miki

Miki: personal wiki with the fmd markup format
git clone https://wtenison.com/repo/miki.git
Log | Files | Refs | README | LICENSE

script.js (4946B)

      1 
      2 // STYLE GUIDE ::
      3 // class: __attribute - ( __ ) signifies global attribute
      4 // class: _attribute_ - ( _*_ ) signifies local attribute
      5 // class: --attribute - ( -- ) signifies modifier
      6 
      7 // START WASM //
      8 
      9 const go = new global.Go();
     10 
     11 WebAssembly.instantiateStreaming(fetch("web/global/fmd.wasm"), go.importObject)
     12     .then((result) => {
     13         go.run(result.instance);
     14 
     15         makeFMDState(0) // System state
     16         makeFMDState(1) // Editor state
     17 
     18         fmdViewDescriptor.innerHTML = interpretFMD(1, "span(class:\"__descriptor\"):{b:{TEXT PAD}<br>span:{Input fmd text here ▾}}")
     19 
     20         loadFMDFileRaw("https://test.wtenison.com/web/edit/default.fmd", fmdViewPanelSet["text-editor"].content)
     21         loadFMDFileHTML("https://test.wtenison.com/web/edit/legend.fmd", fmdViewPanelSet["guide-text"].content)
     22     })
     23     .catch(err => console.error('_ERROR:instantiateStreaming:failed to load WASM:', err));
     24 
     25 // GOBALS //
     26 
     27 fmdViewDescriptor = document.getElementById("fmd-view-descriptor")
     28 
     29 fmdView = document.getElementById("fmd-view")
     30 currentFMDView = "text-editor"
     31 
     32 var fmdViewPanelSet = {
     33     "text-editor": {
     34         root: document.getElementById("text-editor-panel"),
     35         content: document.getElementById("text-editor-panel").getElementsByClassName("_content_")[0]
     36     },
     37     "html-output": {
     38         root: document.getElementById("html-output-panel"),
     39         content: document.getElementById("html-output-panel").getElementsByClassName("_content_")[0]
     40     },
     41     "guide-text": {
     42         root: document.getElementById("guide-text-panel"),
     43         content: document.getElementById("guide-text-panel").getElementsByClassName("_content_")[0]
     44     },
     45     "error-output": {
     46         root: document.getElementById("error-output-panel"),
     47         content: document.getElementById("error-output-panel").getElementsByClassName("_content_")[0]
     48     },
     49 }
     50 
     51 var fmdViewTransitions = {
     52     "text-editor": {
     53         open: function () {
     54             fmdViewDescriptor.innerHTML = interpretFMD(1, "span(class:\"__descriptor\"):{b:{TEXT PAD}<br>span:{Input fmd text here ▾}}")
     55         },
     56         close: function () { return }
     57     },
     58     "html-output": {
     59         open: function () {
     60             fmdViewDescriptor.innerHTML = interpretFMD(1, "span(class:\"__descriptor\"):{b:{OUTPUT}<br>span:{View rendered text:}}")
     61             fmdViewPanelSet["html-output"].root.classList.add("--open")
     62             fmdViewPanelSet["html-output"].content.innerHTML = interpretFMD(1, fmdViewPanelSet["text-editor"].content.value)
     63             renderButton = document.getElementById("render-fmd-bttn")
     64             renderButton.innerHTML = "◂ RETURN"
     65         },
     66         close: function () {
     67             fmdViewPanelSet["html-output"].root.classList.remove("--open")
     68             renderButton = document.getElementById("render-fmd-bttn")
     69             renderButton.innerHTML = "Render ▸"
     70         }
     71     },
     72     "guide-text": {
     73         open: function () {
     74             fmdViewDescriptor.innerHTML = interpretFMD(1, "span(class:\"__descriptor\"):{b:{GUIDE}<br>span:{Readme:}}")
     75             fmdViewPanelSet["guide-text"].root.classList.add("--open")
     76             openGuideButton = document.getElementById("open-guide-bttn")
     77             openGuideButton.innerHTML = "CLOSE ▸"
     78         },
     79         close: function () {
     80             fmdViewPanelSet["guide-text"].root.classList.remove("--open")
     81             openGuideButton = document.getElementById("open-guide-bttn")
     82             openGuideButton.innerHTML = "◂ Guide"
     83         }
     84     },
     85     "error-output": {
     86         open: function () {
     87             fmdViewPanelSet["error-output"].content.innerHTML = getFMDErrors(1)
     88             fmdViewPanelSet["error-output"].root.classList.add("--open")
     89             errorLogButton = document.getElementById("error-log-bttn")
     90             errorLogButton.innerHTML = "▾ CLOSE"
     91         },
     92         close: function () {
     93             fmdViewPanelSet["error-output"].root.classList.remove("--open")
     94             errorLogButton = document.getElementById("error-log-bttn")
     95             errorLogButton.innerHTML = "▴ Error Log"
     96         },
     97     }
     98 }
     99 
    100 function GotoFrame(nextActiveFrame) {
    101     fmdViewTransitions[currentFMDView].close()
    102     fmdViewTransitions[nextActiveFrame].open()
    103     currentFMDView = nextActiveFrame
    104 }
    105 
    106 document.getElementById("open-guide-bttn").onclick = (event) => {
    107     if (!fmdViewPanelSet["guide-text"].root.classList.contains("--open")) {
    108         GotoFrame("guide-text")
    109     } else {
    110         GotoFrame("text-editor")
    111     }
    112 }
    113 
    114 document.getElementById("error-log-bttn").onclick = (event) => {
    115     if (!fmdViewPanelSet["error-output"].root.classList.contains("--open")) {
    116         GotoFrame("error-output")
    117     } else {
    118         GotoFrame("text-editor")
    119     }
    120 }
    121 
    122 document.getElementById("render-fmd-bttn").onclick = (event) => {
    123     if (!fmdViewPanelSet["html-output"].root.classList.contains("--open")) {
    124         GotoFrame("html-output")
    125     } else {
    126         GotoFrame("text-editor")
    127     }
    128 }