MaMe82
108 lines
2.5 KiB
Go
108 lines
2.5 KiB
Go
package main
|
|
|
|
import (
|
|
"github.com/gopherjs/gopherjs/js"
|
|
"github.com/mame82/hvue"
|
|
)
|
|
|
|
//https://github.com/cnu4/vue-codemirror-lite/blob/master/codemirror.vue
|
|
|
|
type CodeMirrorOptionsType struct {
|
|
*js.Object
|
|
Mode interface{} `js:"mode"`
|
|
LineNumbers bool `js:"lineNumbers"`
|
|
LineWrapping bool `js:"lineWrapping"`
|
|
AutoCloseBrackets bool `js:"autoCloseBrackets"`
|
|
ExtraKeys interface{} `js:"extraKeys"`
|
|
}
|
|
|
|
type CompCodeEditorData struct {
|
|
*js.Object
|
|
ScriptContent string `js:"scriptContent"`
|
|
CodeMirrorOptions *CodeMirrorOptionsType `js:"codemirrorOptions"`
|
|
|
|
}
|
|
|
|
func NewCodeEditorData(vm *hvue.VM) interface{} {
|
|
data := &CompCodeEditorData{ Object: O() }
|
|
data.ScriptContent = ""
|
|
cmo := &CodeMirrorOptionsType{Object: O()}
|
|
|
|
mode := struct{
|
|
*js.Object
|
|
Name string `js:"name"`
|
|
GlobalVars bool `js:"globalVars"`
|
|
}{ Object: O() }
|
|
mode.Name = "text/javascript"
|
|
mode.GlobalVars = true //expose globalVars of mode for auto-complete with addon/hint/show-hint.js, addon/hint/javascript-hint.js"
|
|
cmo.Mode = &mode
|
|
|
|
|
|
extraKeys := struct{
|
|
*js.Object
|
|
CtrlSpace string `js:"Ctrl-Space"`
|
|
}{ Object: O() }
|
|
extraKeys.CtrlSpace = "autocomplete"
|
|
cmo.ExtraKeys = &extraKeys
|
|
|
|
|
|
|
|
cmo.LineNumbers = true
|
|
cmo.LineWrapping = true
|
|
cmo.AutoCloseBrackets = true
|
|
data.CodeMirrorOptions = cmo
|
|
return data
|
|
}
|
|
|
|
|
|
|
|
func initCodeMirror(vm *hvue.VM) {
|
|
// this.value = this.scriptContent (copy "value" property over to "scriptContent")
|
|
val := vm.Get("value")
|
|
vm.Set("scriptContent", val)
|
|
|
|
|
|
//this.editor = CodeMirror.fromTextArea(this.$el.querySelector('#CodeEditor'), this.codemirrorOptions)
|
|
editorEl := vm.El.Call("querySelector","#CodeEditor")
|
|
editor := js.Global.Get("CodeMirror").Call("fromTextArea", editorEl, vm.Get("codemirrorOptions"))
|
|
|
|
//copy value property to initial editor state
|
|
editor.Call("setValue", val)
|
|
|
|
// ToDo: Global scope export could be removed, debugging only usage
|
|
js.Global.Set("editor", editor)
|
|
//vm.Set("editor", editor)
|
|
|
|
editor.Call("on", "change", func(cm *js.Object) {
|
|
newVal := cm.Call("getValue")
|
|
|
|
//update ViewModel data scriptContent
|
|
vm.Set("scriptContent", newVal)
|
|
//propagate up change
|
|
vm.Emit("change", newVal)
|
|
vm.Emit("input", newVal)
|
|
})
|
|
|
|
}
|
|
|
|
func InitCompCodeEditor() {
|
|
hvue.NewComponent(
|
|
"code-editor",
|
|
hvue.Template(compCodeEditorTemplate),
|
|
hvue.DataFunc(NewCodeEditorData),
|
|
hvue.PropObj("value",hvue.Types(hvue.PString),hvue.Default("type('Hello');")),
|
|
hvue.Mounted(initCodeMirror),
|
|
|
|
)
|
|
}
|
|
|
|
const(
|
|
compCodeEditorTemplate = `
|
|
<div>
|
|
<textarea id="CodeEditor"></textarea>
|
|
</div>
|
|
`
|
|
)
|
|
|
|
|