|  | @@ -0,0 +1,285 @@
 | 
	
		
			
				|  |  | +<!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>
 | 
	
		
			
				|  |  | +
 |