Skip to content

Instantly share code, notes, and snippets.

@JamesTryand

JamesTryand/thing.html

Created November 9, 2018 18:20
Download ZIP

Revisions

  1. JamesTryand created this gist Nov 9, 2018.
    134 changes: 134 additions & 0 deletions thing.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,134 @@
    <html>
    <head>
    <title>DONE</title>
    <style>
    .container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    }
    .middle {
    flex-direction: row;
    }
    .left, .right, .top, .bottom {
    flex-basis: auto;
    }
    .top{
    height: 200px;
    }
    .middle, .message, .raw, .newmessage {
    flex-basis: content;
    font-size: 72px;
    }
    .newmessage {
    text-align: center;
    }
    .hidden {
    display: none;
    }
    </style>
    <script>
    window.addEventListener('load',function(){


    var body = document.getElementsByTagName("body")[0];


    var messageElement = document.getElementsByClassName("message")[0];
    var headtag = document.getElementsByTagName('title')[0];
    var editor = document.getElementsByTagName("input")[0];
    var raw = document.getElementsByClassName("raw")[0];

    function startEdit() {
    var initialText = messageElement.innerHTML;
    editor.value = initialText;
    messageElement.classList.add('hidden');
    editor.classList.remove('hidden');
    editor.select();
    }

    function finishEdit() {
    var newText = editor.value;
    messageElement.innerText = newText;
    headtag.innerText = newText;
    messageElement.classList.remove('hidden');
    editor.classList.add('hidden');
    }

    messageElement.addEventListener('click',startEdit);
    editor.addEventListener('change', finishEdit);

    function tag(tagname, classes, content) {
    function tagHandler(tagItem, tagContent, continuation) {
    switch (typeof tagContent) {
    case 'string':
    tagItem.textContent = content;
    break;
    case 'function':
    tagContent(tagItem);
    break;
    case 'object':
    if (Array.isArray(tagContent)) {
    for(var item of tagContent) {
    tagHandler(tagItem, item);
    }
    }
    break;
    default:
    break;
    }
    }
    return function(element) {
    var tagValue = document.createElement(tagname);
    if(classes) {
    tagValue.className = classes;
    }
    tagHandler(tagValue, content);
    element.appendChild(tagValue);
    }
    }

    function d(classes,content) {
    return tag("div",classes,content);
    }

    d("cheese cake", [d("cheese", ":-) hello"),d("cake", "world"),d("thing", d("yer", "!"))])(raw)

    //https://stackoverflow.com/questions/2648293/how-to-get-the-function-name-from-within-that-function

    // returning tuple of [Element,Function] where function takes the thing to attach it to.

    d("container",[
    d("top"),
    d("middle",[
    d("left"),
    d("message","done"),
    tag("input","newmessage hidden"),
    d("left")
    ]),
    d("bottom")
    ])(body);

    // t("div")
    // tag("div", "cheese cake", "'")(raw);

    // tag("div", "cheese cake", [tag("div","cheese","hello"),tag("div","cake","world"),tag("div","thing",tag("div","yer","!"))])(raw);

    }, false);
    </script>
    </head>
    <body>
    <div class="container">
    <div class="top"></div>
    <div class="middle">
    <div class="left"></div>
    <div class="message hidden">Done</div>
    <input class="newmessage hidden"></div>

    <div class="raw">-</div>
    <div class="left"></div>
    </div>
    <div class="bottom"></div>
    </div>
    </body></html>