Jannick Knudsen 1 năm trước cách đây
commit
64078eb4ff
3 tập tin đã thay đổi với 478 bổ sung0 xóa
  1. 1 0
      README.md
  2. 285 0
      modulatum.html
  3. 192 0
      modulatum2.html

+ 1 - 0
README.md

@@ -0,0 +1 @@
+##modulatum

+ 285 - 0
modulatum.html

@@ -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>
+

+ 192 - 0
modulatum2.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<style type="text/css">
+		html , body { height: 100%; width: 100%; margin: 0px; padding: 0px; }
+		#editor { width: 30%; background-color: #afafaf; height: 100%; position: relative; float: right; overflow: hidden;}
+		#holder { width: 70%; background-color: #ffddff; height: 100%;}
+		#editor textarea {height: 70%; width: 100%; font-family: monospace; font-size: 11px; line-height: 13px;}
+	</style>
+</head>
+<body onload="startit();">
+	<div id="editor"></div>
+	<div id="holder">
+			<div id="main"></div>
+
+	</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 types = new MT();
+
+	var register = function(name, func) {
+	    site.register(name, func)
+	};
+
+	function strip(str) {
+
+	    var reg = new RegExp(/\/\*([\s\S]*?)\*\//gi);
+	    str = str.replace(reg, function(matched, attrstr, content, line, d) {
+	        //console.log("COMMENT:;",attrstr)         
+	        return "";
+	    })
+	    return str;
+	}
+
+	function tryparse(str) {
+		var astr = strip(str);
+		var ret = {};
+		try{
+			ret.res = eval('(function(d){ '+str+' ; return d})({})')    ;// JSON.parse(astr);
+		}catch(e){
+			ret.error = e;
+		}
+		return ret;
+
+	}
+
+	var currentres={};
+
+	function startit(){
+	 		var status =  document.createElement("div");
+	 		var result  = document.createElement("div");
+ 	 	var editor = document.createElement("textarea");
+ 	 		editor.addEventListener("input",function(ev){
+  				status.innerHTML = "";
+ 	 			var res = tryparse(ev.target.value)
+ 	 			if(res.error){
+ 	 				status.innerHTML = res.error;
+ 	 			}else{
+ 	 				currentres = res;
+ 	 				result.innerHTML = "Last known valid result: "+JSON.stringify(res);
+ 	 			}
+
+ 	 		});
+
+ 	 	document.getElementById("editor").appendChild(editor);
+ 	 	document.getElementById("editor").appendChild(result);
+ 	 	document.getElementById("editor").appendChild(status);
+
+
+		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();
+}
+
+ 
+ 
+
+</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 
+*/
+ 
+ 
+
+
+
+</script>
+
+</body>
+</html>
+