forked from tsai/budibase
2 changed files with 0 additions and 112 deletions
@ -1,111 +0,0 @@ |
|||||
<script> |
|
||||
import { store } from "builderStore" |
|
||||
import UIkit from "uikit" |
|
||||
import ActionButton from "components/common/ActionButton.svelte" |
|
||||
import ButtonGroup from "components/common/ButtonGroup.svelte" |
|
||||
import CodeMirror from "codemirror" |
|
||||
import "codemirror/mode/javascript/javascript.js" |
|
||||
|
|
||||
export let onCodeChanged |
|
||||
export let code |
|
||||
|
|
||||
export const show = () => { |
|
||||
UIkit.modal(codeModal).show() |
|
||||
} |
|
||||
|
|
||||
let codeModal |
|
||||
let editor |
|
||||
let cmInstance |
|
||||
|
|
||||
$: currentCode = code |
|
||||
$: originalCode = code |
|
||||
$: { |
|
||||
if (editor) { |
|
||||
if (!cmInstance) { |
|
||||
cmInstance = CodeMirror.fromTextArea(editor, { |
|
||||
mode: "javascript", |
|
||||
lineNumbers: false, |
|
||||
lineWrapping: true, |
|
||||
smartIndent: true, |
|
||||
matchBrackets: true, |
|
||||
readOnly: false, |
|
||||
}) |
|
||||
cmInstance.on("change", () => (currentCode = cmInstance.getValue())) |
|
||||
} |
|
||||
cmInstance.focus() |
|
||||
cmInstance.setValue(code || "") |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const cancel = () => { |
|
||||
UIkit.modal(codeModal).hide() |
|
||||
currentCode = originalCode |
|
||||
} |
|
||||
|
|
||||
const save = () => { |
|
||||
originalCode = currentCode |
|
||||
onCodeChanged(currentCode) |
|
||||
UIkit.modal(codeModal).hide() |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={codeModal} uk-modal> |
|
||||
<div class="uk-modal-dialog" uk-overflow-auto> |
|
||||
|
|
||||
<div class="uk-modal-header"> |
|
||||
<h3>Code</h3> |
|
||||
</div> |
|
||||
|
|
||||
<div class="uk-modal-body uk-form-horizontal"> |
|
||||
|
|
||||
<p> |
|
||||
Use the code box below to control how this component is displayed, with |
|
||||
javascript. |
|
||||
</p> |
|
||||
|
|
||||
<div> |
|
||||
<div class="editor-code-surround"> |
|
||||
function(render, context, state, route) {'{'} |
|
||||
</div> |
|
||||
<div class="editor"> |
|
||||
<textarea bind:this={editor} /> |
|
||||
</div> |
|
||||
<div class="editor-code-surround">{'}'}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="uk-modal-footer"> |
|
||||
<ButtonGroup> |
|
||||
<ActionButton primary on:click={save}>Save</ActionButton> |
|
||||
<ActionButton alert on:click={cancel}>Close</ActionButton> |
|
||||
</ButtonGroup> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
h3 { |
|
||||
text-transform: uppercase; |
|
||||
font-size: 13px; |
|
||||
font-weight: 700; |
|
||||
color: #8997ab; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
font-size: 13px; |
|
||||
color: #333; |
|
||||
margin-top: 0; |
|
||||
} |
|
||||
|
|
||||
.editor { |
|
||||
border-style: dotted; |
|
||||
border-width: 1px; |
|
||||
border-color: gainsboro; |
|
||||
padding: 10px 30px; |
|
||||
} |
|
||||
|
|
||||
.editor-code-surround { |
|
||||
font-family: "Courier New", Courier, monospace; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue