Home Explore Help
Register Sign In
tum.dk
/
modulatum
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

init

Jannick Knudsen 1 year ago
commit
64078eb4ff
3 changed files with 478 additions and 0 deletions
Split View Show Diff Stats
  1. 1 0
      README.md
  2. 285 0
      modulatum.html
  3. 192 0
      modulatum2.html

+ 1 - 0
README.md
View File 

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

+ 285 - 0
modulatum.html
View File 

@@ -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
View File 

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