JamesTryand · November 9, 2018 18:20
diff --git a/thing.html b/thing.html
 <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>
	<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>