vuecm2.html

<script src="./vue.js"></script><script src="./codemirror.js"></script><script src="./utils.js"></script><script src="./methods.js"></script><link rel="stylesheet" type="text/css" href="./codemirror.css"/><link rel="stylesheet" type="text/css" href="./styles.css"/>
<script src="./vcodeframe.js"></script>
<script src="./vpreview.js"></script>
<script>


function ontick32() {
    this.displayString += 'hi'
}

function toggleFrame() {
    console.log( 'toggling the frame' )
    // this.isIframe = !this.isIframe
    // to have made a mistake ... a costly mistake.
    // i speak a certain way.
    // money is just money. 
    // an expensive mistake. 
    // Good morning. I am not the primary account holder.
}
createElement('style', fadestring, cssreset)

function revertCodeMirror() {
    this.computedHtml = ''
    setTimeout(() => this.codemirror.focus(), 250)
}

</script>

<div id="app" @keyup.ctrl.enter.prevent="toggleFrame">
    <!-- <component is="style">{{computedStyleString}}</component>-->
    
    <div v-show="computedHtml">
        <p>codeframe</p>
        <codeframe @close="revertCodeMirror"  :mount-count="mountCount" :computed-html="computedHtml"/>
    </div>

    <section v-show="appMode == 'PREVIEW'">
        <h1>Preview Mode</h1>
        <preview @close="appMode == 'DEFAULT'" :items="items"/>
    </section>

    <section v-show = "!computedHtml && appMode == 'DEFAULT'">

        <textarea ref="codemirror"></textarea>
        <section v-show="displayEvalStore" a=component>
        <h2>Eval Items</h2>        
        <ul>
            <li v-for="item in evalStore">{{item}}</li>
        </ul>
        </section>

        <p @click="displayString = ''"> displayString: {{ displayString }}</p>
        <p @click="normalString = 'hii'"> normalString: {{ normalString }}</p>
        <p> insertString: {{ insertString }}</p>
        <p> insertMode: {{ insertMode }}</p>
        <p> isColon: {{ isColon }}</p>
        <p v-show="htmlString"> {{htmlString}}</p>
        <p v-show="jsString"> {{jsString}}</p>
        <p v-show="cssString"> {{cssString}}</p>
        <p> evalString: {{ evalString }}</p>
        <p style="font-family: monospace;">{{ computedHtml }}</p>

    <!-- component -->
    <!-- it is a small component to bring up the buttons-->
    <div style="height: 100">
        <transition name="fade">
            <div v-show="computedOption">
                <button @click="buttonHandler(computedOption, button)" v-for="button in buttonOptions[computedOption]">
                    {{button}}
                </button>
            </div>
        </transition>
    </div>


    </section>
</div>


<script>

const Pos = CodeMirror.Pos
CodeMirror.commands.goLineUp = null
CodeMirror.commands.goLineDown = null
CodeMirror.commands.selectAll = null
// createElement('style', fadestring + snsn + opacitykfstring)

Vue.directive('animate', (el, binding) => {
    console.string(binding  )
    animateElement(el, 'fade')
})



const colonmap = {
      createpage: (cm) => cm.setValue(createPage.format(cm.getValue())),
      vuelines: (cm) => cm.setValue(vuelines.format(cm.getValue())),
      cm: (cm, arg) => cm.state.store.add(arg, cm.getValue()),
      today: (cm) => updateStorage('today.txt', cm.getValue()),
      set: (cm, arg) => cm.state.store.set(arg, cm.getValue()),
      edit: (cm, arg) => cm.setValue(cm.state.store.get(arg)),
      date: PersonalAssistant.date,
      weather: () => getWeather().then(getWeatherInfoFactory),
      sunset:  () => getWeather().then(getWeatherInfoFactory('sunset')),
      time: PersonalAssistant.time,
      wc:   clipboardWordCount,
      toframe: (cm) => this.htmlText = cm.getValue(),
      totext:  (cm) => cm.setValue(this.htmlText),
      addstyle: (arg) => this.$set(this.styles, ...cssParser3(arg)),
      removestyle: (arg) => this.$delete(this.styles, arg),
      style: (cm, arg) => cmEditStyle(cm, arg),
      dobj : cm => cmEditor(cm, 'DICT-OBJ'),
      aobj : cm => cmEditor(cm, 'ARRAY-OBJ'),
      grab:  (cm, arg) => cmGrab(cm, arg),
      sub:   cmSubmitter,
      reset: () => {
          
      },
      load: (cm, arg) => {
          cm.setValue(arg)
      },
      merge: (arg) => {
          const [key, s] = split(arg)
          const obj = window[key]
          const data = getLineInfoMAPS(s)
          mergeInPlace(obj, data)
      },
      // cleanup: 
      //fexec
      //fcol

      eval: () => this.evalStore = [],
      e: (arg) => this.evalString = evaluator(bestText(arg)),
      jbin: (arg) => {
          const [mode, key] = split(arg, {default: ['GET', null]})
          const value = mode == 'GET' ? null : cm.state.store.get(key)
          const promise = jsonbin2({mode, value})
          this.handlePromise(promise, )
      },
      postreddit: cm => {
          const promise = jsonbin2({
              mode: 'PUT', 
              versioning: false,
              value: cm.state.store.get('reddit')
          })
          promise.then(console.red)
      },
    }

function cmTextValue(cm, {lineCount = 3}) {
    if (count('\n', cm.getValue().trim()) < lineCount) return null
    return cm.getValue().trim()
}
function setDisplayString(mode) {
    const value = cmTextValue(this.codemirror)
    if (value) {
        this[mode] = value
        this.displayString = value
    }
    else {
        console.log( 'hii doing something else' )
    }
}
function cmReplaceEntity(cm) {
    cm.replaceRange('', ...cmgetter(cm, 'WORD-RANGE'))
// cm word-range replaces at the current word. this mimics the functionality of ',r' on vim.
}
function getVueMaps() {

    this.modmap = {

    'q': () => this.fontValue = this.styleController.next('font'),
    'w': () =>  this.sizeValue = this.styleController.next('size'),
    'e': () =>  this.colorValue = this.styleController.next('color'),
    ',e': () => console.log('suppers'),
    ',r': {
        action: cmReplaceEntity,
        mode: 'ENTER-INSERT-MODE'
    },
    gg: (cm) => cmCursor(cm, 'DOCUMENT-START'),
    G: (cm) => cmCursor(cm, 'DOCUMENT-END'),
    A: (cm) => cmCursor(cm, 'LINE-END'),
    o: cmToLineBottom,
    O: cmToLineTop,
    '0': (cm) => cmCursor(cmSprawl(cm, /(?<={)}/, {mode: 'ch'})),
    '1': () => this.setDisplayString('htmlString'),
    '2': () => this.setDisplayString('cssString'),
    '3': () => this.setDisplayString('jsString'),
    // '4': () => this.setDisplayString('computedHtml'),
    '11097': (cm) => cm.setValue(''),
    '12097': (cm) => {updateClipboard(cm.getValue()); cm.setValue('');},
    '13097': () => console.log( 'zzzz22' ),
    '12108': () => console.log( 'zzzzaa' ),
    //modmap
    gtt: (cm) => cmCursor(cm, cm.state.blockEnter),
    // A:   {action: (cm) => cmCursor(cm, 'LINE-END'), mode: 'ENTER-INSERT-MODE'},
    // o:   {action: cmToLineBottom, mode: 'ENTER-INSERT-MODE'},
    // O:   {action: cmToLineTop, mode: 'ENTER-INSERT-MODE'},

    su:  (cm) => speak(cmgetter(cm, 'UPLINE')),
    sl:  (cm) => speak(cmgetter(cm, 'LINE')),
    sb:  (cm) => speak(cmgetter(cm, 'BLOCK')),
    sc:  (cm) => speak(cmgetter(cm, 'CURSOR')),
    u: (cm) => cm.undo(),
    r: (cm) => cm.redo(),
    f: (cm) => cm.replaceRange('', ...cmgetter(cm, 'UPLINE-END-TO-LINE-END')),
    }
}
Vue.prototype.colonmap = colonmap

Vue.prototype.primaryMap = {
    // 'Backspace': '',
    'ShiftRight': cmToggleBuffer,
    // 'ShiftLeft': '',
    'Tab':       {action: cmTabCompletion, reset: true, preventDefault: true},
    'ControlRight': exitBlock,
    'AltRight':  enterBlock,
    'Backspace': backspaceHandler,
    // 'Semicolon':  {action: colonKeyHandler, preventDefault: true},
    'Escape': escapeKeyHandler,
    'Enter': enterKeyHandler,
    'KeyI' : {action: keyIHandler}
    // 'KeyA' : {action: keyAHandler}
}

new Vue({
    data() {
        return vueDataObject
    },
    
    watch: {
        computedStyleString(val) {
            console.log( val, 'HIII!!!' )
            cmEditStyle(this.codemirror, val)
        }
    },
    
    computed: {

        computedStyleString,
        computedOption() {
            let match = search('^(?:create|gen(?:erate)?)', this.normalString)
            if (match == 'gen') match = 'generate'
            return match
        },
        // computedHtml,
        // computedStyleString() {
            // return this.styleString || Object.values(this.styles).join(snsn)
        // }
    },
    methods: {
        //fmet
        getVueMaps,
        revertCodeMirror,
        createFrame,
        toggleFrame,
        gvfn,
        setDisplayString,
        getElement,
        handlePromise,
        buttonHandler,
        load,
        blurHandler,
        focusHandler,
        previewItems,
        keyIHandler,
        inoremapHandler,
        primaryFirstAction,
        cmWriteFactory,
        enterInsertMode,
        enterBlock,
        exitBlock,
        backspaceHandler,
        colonKeyHandler,
        enterVimMode,
        escapeKeyHandler, 
        enterKeyHandler,
        executeColonCommand,
        primaryKeyHandler,
    },
    
    async mounted() {
        this.codemirror = CodeMirror.fromTextArea(this.$refs.codemirror, {
            pollInterval: 10000,
            lineWrapping: true,
            lineNumbers: true,
            autofocus: true,
            cursorBlinkRate: 0,
            value: 'hello world', 
            mode: 'javascript',
            tabSize: 4,
        })
        window.addEventListener('blur', this.blurHandler)
        window.addEventListener('focus', this.focusHandler)
        cmAddClass(this.codemirror, 'cm-fat-cursor')
        cmInitializeBuffers(this.codemirror, BUFFERS)

        this.styleController = new Indexed2(fontobject, fontindexobject)
        this.codemirror.on('keydown', this.primaryKeyHandler);
        this.codemirror.on('loadExternalFile', (e) => {
            console.log( e )
            console.log( 'loading external!' )
        })
        this.getVueMaps()

        // await sleep(1)
        this.cmWriteFactory('p hi')

        // let foo = await sleepclock({bind: true, ontick, duration: 2000, increment: 500})
        // this.executeColonCommand(this.codemirror, 'gen vue') // WORKS
        // this.cmWriteFactory(toDictionary.toString())
        //fmo
        // this.executeColonCommand(this.codemirror, 'jbin') // WORKS
        // this.executeColonCommand(this.codemirror, 'jbin clipboard')  //WORKS
    },
}).$mount("#app")

</script>