tum.dk
/
modulatum


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
							<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		ul, li { margin: 0px; padding: 0px; list-style: none; }
		.typemenu li { float: left; }
		#editor {clear: both; width: 100%; height: 30px;}
		.module { background-color: #afafaf; }
	</style>
</head>
<body onload="startit();">
	<div id="editor"></div>
	<div id="main"></div>

<script>
	function loada(){
		var header = document.getElementsByTagName("head")[0];
		
		var current_script =  document.getElementById("current_script");
		var current_style =  document.getElementById("current_style");

			header.removeChild(current_script);
			header.removeChild(current_style);

		var newscript = document.createElement("script");
			newscript.type = "text/javascript";
			newscript.src = "./current.js?"+Math.random();
			newscript.id = "current_script";
			header.appendChild(newscript);

		var newstyle = document.createElement("link");
			newstyle.type = "text/css";
			newstyle.rel = "stylesheet";
			newstyle.href = "./current.css?"+Math.random();
			newstyle.id = "current_style";
			header.appendChild(newstyle);
	}

	function MT(){
		this.modules = [];
		this.events = {};
	}
	MT.prototype.register = function(name,func) {
		console.log("register",name,func);
		this[name] = func;
	}
	MT.prototype.on = function(eventName,func){
		this.events[eventName] = this.events[eventName] || [];
		this.events[eventName].push(func);
	}
	MT.prototype.emit = function(eventName,content){
		(this.events[eventName]||[]).map(function(func){
			func.apply(func,[content]);
		})
	}

	var site = new MT();
	var data = new MT();

	var register = function(name,func){ site.register(name,func) } ;

	var sss = [{
	    "type": "layout"
	}, {
	    "type": "blog"
	}, {
	    "type": "menu"
	}, {
	    "type": "form"
	}, {
	    "type": "statement"
	}, {
	    "type": "note"
	}, {
	    "type": "comment"
	}, {
	    "type": "picture"
	}, {
	    "type": "text",
	    "fields": ["title", "text"],
	    "init": function(obj, tnode){
	    	var holder =  dd("div",obj.id+"-holder","holder");
		    	var title = dd("h1",obj.id+"-title","title");
		    		title.contentEditable = true;
		    		title.addEventListener("input", function() {
					    console.log("input event fired");
					}, false);
					title.addEventListener("blur", function() {
					    console.log("change event fired");
					}, false);
	    		holder.appendChild(title)
	    		var text = dd("p",obj.id+"-text","text");
		    		text.contentEditable = true;
		    		text.addEventListener("input", function() {
					    console.log("text input event fired");
					}, false);
					text.addEventListener("blur", function() {
					    console.log("text change event fired");
					}, false);


	    		holder.appendChild( text );
				tnode.appendChild(holder);
				var aa = this;
				requestAnimationFrame(function(){aa.update(obj,tnode)})
	    },
	    "update": function(obj,tnode){
	    	console.log("UPDATE", this.type);
	    	var data=getData(obj.id)
	    	this.fields.map(function(f){
		    	console.log("UPDATE", this.type, obj.id+"-"+ f);
	    		document.getElementById(obj.id+"-"+f).innerHTML = data[f];
	    	})
	    },
	    "saveable": function(){

	    }
	}, {
	    "type": "map"
	}]


	function startit(){
		console.log("SITESTART" , sss)
		var s=dd("ul","editormenu","typemenu")
			sss.map(function(t){
				var sa = document.createElement("li")
				var saa = document.createElement("button")
					saa.onclick = function(){
						site.emit("addElement",da(t));
					}
					t._but = saa;
					saa.textContent= t.type;
					sa.appendChild(saa);
				s.appendChild(sa);
			})
			document.getElementById("editor").appendChild(s);
		site.emit("start","helo");
	};


	site.on("addElement",function(type){

		console.log("ADDING",type);


		site.modules.push( type )
		render();
	});

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + '-' + s4() + s4();
}

var shadow = {};


	function render() {
	    

	    site.modules.map(function(m) {
				if(shadow[m.id]){
 
					if(m.model.update){

						m.model.update( m, shadow[m.id] )


					}
 

				}else{
					shadow[m.id] = dd("div",m.id,"module "+m.model.type)
	
	
					if(m.model.init){
						  m.model.init( m, shadow[m.id] ) 
 					}

					document.getElementById("main").appendChild( shadow[m.id] )
					console.log( "create",m.id,shadow[m.id].textContent );

				}


	    });

	   
	}

	function getData(id,cb){
		return {"id":id,"content":"dfasdlfs"}
	}


	function da(t){


		return {"id":"e"+(guid()),"model":t }

	}

	function dd(ns, id, cla) {
	    var rr = document.createElement(ns);
	    rr.id = id;
	    rr.className = cla;
	    return rr
	}

</script>

<script>
	console.log("OKOKOKO");

	 
/*
	raws: rendable


	im: a blog post type
			{ def }


	im: a menu thing type

	im: a video window type

	im: a contact formular

	im: a privacy statment

	im: a note
		function Note(){}

	im: a comment 

	im: a picture

	im: a window with collection

	im: a graphics

	im: a map

	im: a button

	im: a layout 
*/
var ss = [{
        "type": "layout",
        "children": [{
                "type": "contentarea"
            }, {
                "type": "contentarea"
            }, {
                "type": "contentarea"
            }
        ]
    }


]


</script>
</body>
</html>