User:Bluedeck/haystack/sandbox.js

(function(){

    let inside_console = `
<div id="bluedeck_dom_console_output_window"></div>
<input id="bluedeck_dom_console_input_element" type="text" style="width: 100%; height: 1.4em; padding-left: 1em; font-family: Courier New; border: 0; position: absolute; bottom: 0.2em; " />
<div style="width: 1em; font-family: Courier New; position: absolute; bottom: 0.2em; ">&gt;</div>
`

    let console_html = `<div id="bluedeck_dom_console" class="dialogue-wrap" style="display: none; position: fixed; z-index: 1000; bottom: 2.2em; right: 2.2em; width: 38em; margin: 2em 0em; padding: 0; border: 0.7px solid rgba(0,0,0,0.3); background-color: rgba(255,255,255,1); box-shadow: 0 14px 18px rgba(0,0,0,0.52); border-radius: 0.3em; overflow: hidden;">
<div class="dialogue-head" style="position: relative; height: 1.4em; border-bottom:0.7px solid rgba(187,187,187,1); text-align:center; background: linear-gradient(to top, rgba(0,0,0,0.09), rgba(0,0,0,0.06)); color: rgba(0,0,0,0.8);"><span style="position: relative; font-size: 0.8em; line-height: 1.4em; cursor: default;">Console</span><div class="dialogue-head-window-options" style="position: absolute; top: 0.4em; left: 0.6em; height: 0.6em; width: 0.6em; border-radius: 100%; float: left; background: rgba(255,88,77,1); border: 0.5px solid rgba(235,78,67,1);"></div><div class="dialogue-head-window-options" style="position: absolute; top: 0.4em; left: 1.67em; height: 0.6em; width: 0.6em; border-radius: 100%; float: left; background: rgba(255,197,40,1); border: 0.5px solid rgba(235,177,34,1);"></div><div class="dialogue-head-window-options" style="position: absolute; top: 0.4em; left: 2.74em; height: 0.6em; width: 0.6em; border-radius: 100%; float: left; background: rgba(82,210,75,1); border: 0.5px solid rgba(70,200,65,1);"></div></div>
<div class="bubble-wrap" style="font-size: 90%; font-family: Courier New; height: 22em; overflow-y: auto; overflow-x: hidden; padding: 0.2em; position: relative; ">
${inside_console}
</div></div>`

    document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", console_html)

    let console_element = document.getElementById("bluedeck_dom_console")

    let output_element = document.getElementById("bluedeck_dom_console_output_window")
    
    let input_element = document.getElementById("bluedeck_dom_console_input_element")

    let console_is_open = false;

    window.addEventListener('keydown', e => {
      if (e.ctrlKey && e.keyCode == 90) {
        console.log("pressed option + z, toggle console.")
        console_toggle()
      }
    })

    function console_toggle(){
        if(console_is_open) (console_close(), console_is_open = false)
        else (console_open(), console_is_open = true)
    }

    function console_open(){
        console_element.style.display = "block"
        input_element.focus()
        input_element.select()
    }

    function console_close(){
        console_element.style.display = "none"
    }

    function calling_wrap(){

        let command = input_element.value.replace(/^\s*/, "").replace(/\s*$/, "")
        input_element.value = ""
        log("Bluedeck$>" + command + "\n")

        calling(command)
    }

    function calling(command){

        // parse input

        let input_arr = command.split(/\s+/)
        let name = input_arr.shift()

        window.bluedeck_console_communications = {}
        window.bluedeck_console_communications.log = log
        window.bluedeck_console_communications.raw_input = command
        window.bluedeck_console_communications.bin_name = name
        window.bluedeck_console_communications.parameters = input_arr.map(str => parse_parameter(str))

        log(window.bluedeck_console_communications.parameters)

        // real calling

        mw.loader.load(`//zh.wikipedia.org/w/index.php?title=user:bluedeck/bin/${name}.js&action=raw&ctype=text/javascript`)

    }

    function log(line){

        line = String(line)

        output_element.insertAdjacentHTML("beforeend", "<span style='font-family: Courier New'>" + line.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\n/g, "<br />") + "</span>");

        output_element.scrollTop = output_element.scrollHeight;
    }

    function parse_parameter(str) {

        if(str.length === 0) return str

        if(str[0] !== "$") return str

        if(str === "$true") return true

        if(str === "$false") return false

        else return parseFloat(str.replace(/^\$/, ""))
    }

    input_element.addEventListener("keydown", event => {
        if(event.key === "Enter") {
            calling_wrap()
        }
    })

})()