zcode.js
f9f56b7db931master

zcode.js
View Options


			var zpage;
			var config = {
			serverurl: 'https://slpc1.epfl.ch/cgi-bin/zcode/',
			useObjectForHTML: false,
			};
			var mode = 'edit';

			function zcodeinit (starturl) {
			zmenuinit ();
			zpage = new ZPage (starturl);
			zpage.load ();
			}

			function ZPage (url) {
			this.url = url;
			this.zboxes = new Array;
			var me = this;

			this.load = function () {
			if (url) {
			var receiver = function (jsontext) {
			var json = JSON.parse (jsontext);
			me.build (json);
			};
			new ZboxHandler (url, receiver, 'json').send ();
			} else {
			var json = {
			"page": {
			"id": uuid(),
			"type": "container"
			}
			};
			this.build (json);
			}
			}

			this.build = function (json) {
			var jpage = json.page;
			if (!jpage) return; // Error
			this.root = new ZBox ({
			id: jpage.id,
			name: jpage.name,
			type: 'page',
			direction: jpage.direction \|\| 'column',
			});
			this.root.build (jpage);
			this.render ();
			this.name = jpage.name;
			}

			this.unload = function () {
			document.body.removeChild (this.root.container);
			}

			this.render = function () {
			document.body.appendChild (this.root.container);
			this.root.render ();
			}

			this.toJSON = function () {
			var json = '{"page": ' + this.root.toJSON () + '}';
			return json;
			}

			}

			function ZBox (args) {
			for (var arg in args) {
			this [arg] = args [arg];
			}
			this.direction = args.direction \|\| 'column';
			this.children = new Array;

			var container = document.createElement ('div');
			var className = 'zbox';
			if (mode == 'edit') className += ' edit';
			container.className = className;
			container.id = this.id;
			container.zbox = this;
			this.container = container;
			container.style.flexDirection = this.direction \|\| 'column';
			if (this.width) {
			container.style.width = this.width;
			}
			if (this.height) {
			container.style.height = this.height;
			}
			zpage.zboxes [this.name] = this;
			addEvents (container);

			this.build = function (json) {
			if (json.type == 'complex') {
			var model = json.model;
			var head = document.getElementsByTagName ('head')[0];
			var me = this;

			var sheet = document.createElement ('link');
			sheet.rel = 'stylesheet';
			sheet.type = 'text/css';
			sheet.href = '/zcode/libraries/toolbars/EPFL.css';
			container.appendChild (sheet);

			var script = document.createElement ('script');
			script.type = "text/javascript";
			script.src = '/zcode/libraries/toolbars/EPFL.js'; // build path with model name.
			script.onload = function () {
			buildlib (me, json.content);
			}
			container.appendChild (script);
			} else
			if (json.children) {
			for (var ichild = 0; ichild < json.children.length; ichild++) {
			var jchild = json.children [ichild];
			var zchild = new ZBox (jchild);
			zchild.build (jchild);
			this.addChild (zchild);
			}
			}
			}
			this.render = function () {
			if (this.parent) {
			this.parent.container.appendChild (this.container);
			}
			if (this.type == 'html') {
			this.setHTMLcontent (this.src, this.css)
			} else
			if (this.type == 'image') {
			this.container.style.display = 'block';
			var html = '<img src="' + this.src + '">';
			this.container.innerHTML = html;
			} else
			if (this.type == 'text') {
			this.container.innerHTML = this.content;
			} else
			if (this.type == 'container' \|\| this.type == 'page') {
			for (var ichild = 0; ichild < this.children.length; ichild++) {
			var zchild = this.children [ichild];
			zchild.render ();
			}
			}
			}

			this.toJSON = function () {
			var properties = new Array;
			for (var attr in this) {
			if (attr != 'children') {
			if (this.hasOwnProperty (attr) &&
			(typeof this [attr] == 'string' \|\|
			typeof this [attr] == 'number' \|\|
			typeof this [attr] == 'boolean')) {
			properties.push ('"' + attr + '": "' + this [attr] + '"');
			}
			}
			}
			if (this.children && this.children.length > 0) {
			var zchildren = new Array;
			for (var ichild = 0; ichild < this.children.length; ichild++) {
			var zchild = this.children [ichild];
			zchildren.push (zchild.toJSON ());
			}
			properties.push ('"children": [' + zchildren.join (',') + ']');
			}
			var json = '{' + properties.join (',') + '}';
			return json;
			}

			this.toObject = function () {
			var object = new Array;
			for (var attr in this) {
			if (this.hasOwnProperty (attr) && attr != 'children') {
			object [attr] = this [attr];
			}
			}
			if (this.children) {
			object.children = new Array;
			for (var ichild = 0; ichild < this.children.length; ichild++) {
			var zchild = this.children [ichild];
			object.children.push (zchild.toObject ());
			}
			}
			return object;
			}

			this.addChild = function (zbox) {
			zbox.parent = this;
			this.children.push (zbox);
			this.container.appendChild (zbox.container);
			}

			this.setHTMLcontent = function (url, css) {
			this.type = 'html';
			this.docurl = url;
			this.doccss = css;

			var height = this.height \|\| '100%';
			var width = this.width \|\| '100%';

			if (config.useObjectForHTML) {
			var contentname = this.name + '_content';
			this.container.innerHTML =
			'<object name="' + contentname + '" ' +
			'id="' + contentname + '" ' +
			'type="text/html" width="' + width + '" height="' + height + '" ' +
			'style="overflow: hidden;" ' +
			'data="' + url + '">' +
			'</object>'
			;
			if (css) {
			document [contentname].onload = function (e) {
			var content = document [contentname].contentDocument;
			var url = 'https://www.epfl.ch/css/epfl.css';
			var sheet = document.createElement ('link');
			sheet.rel = 'stylesheet';
			sheet.type = 'text/css';
			sheet.href = url;
			content.head.appendChild (sheet);
			}
			}
			} else {
			var me = this;
			var receiver = function (html) {
			me.container.innerHTML = html;
			};
			new ZboxHandler (url, receiver, 'json').send ();
			}
			}
			}

			function getZBox (zboxsel) {
			if (!zboxsel) return;
			if (zboxsel instanceof HTMLDivElement) {
			return zboxsel.zbox;
			}
			return zpage.zboxes [zboxsel];
			}

			function loadPage (pagename) {
			if (!pagename) {
			askForPageName ();
			return;
			}
			closePopup ('askforpagename');
			var url = config.serverurl + 'loadPage?name=' + pagename;
			zpage.unload ();
			zpage = new ZPage (url);
			zpage.load ();
			}

			function askForPageName () {
			var receiver = function (json) {
			var names = JSON.parse (json);
			if (names.error) {
			alert ('You have no stored page.');
			return;
			}
			var lines = new Array;
			for (var ipage in names.pagenames) {
			var pagename = names.pagenames [ipage];
			lines.push ('<a onclick="loadPage (\'' + pagename + '\');">' + pagename + '</a>');
			}
			var html = lines.join ('<hr>');
			html += '<hr>\
			<input type="reset" value="Cancel" \
			onclick="closePopup (\'askforpagename\');">';
			popup ('askforpagename', html);
			};
			var url = config.serverurl + 'listPages';
			new ZboxHandler (url, receiver, 'json').send ();
			}

			function popup (name, html) {
			var container = document.body;
			var mask = document.createElement ('div');
			var popup = document.createElement ('div');
			popup.id = name;
			mask.className = 'popupmask';
			popup.className = 'popupwindow';
			mask.appendChild (popup);
			mask.style.display = 'block';
			popup.mask = mask;

			var popupbar = document.createElement ('div');
			popupbar.className = 'popupBar';
			var closebutton = document.createElement ('div');
			closebutton.className = 'closepopup';
			closebutton.onclick = function () {
			closePopup ('askforpagename');
			}
			popupbar.appendChild (closebutton);

			var popupwin = document.createElement ('div');
			popupwin.className = 'popupWin';

			popup.bar = popupbar;
			popup.win = popupwin;

			popup.appendChild (popupbar);
			popup.appendChild (popupwin);
			popupwin.innerHTML = html;

			adjustPopupSize (popup);
			container.appendChild (mask);

			return popup;
			}

			function closePopup (name) {
			var popup = document.getElementById (name);
			if (!popup) return;
			document.body.removeChild (popup.mask);
			}

			function adjustPopupSize (popup) {
			if (popup.win.offsetHeight > popup.offsetHeight - 18) {
			popup.win.style.height = (popup.offsetHeight - 34) + 'px';
			}
			if (popup.win.scrollWidth > popup.offsetWidth) {
			popup.win.style.width = popup.offsetWidth + 'px';
			}
			}

			function savePage () {
			if (!zpage.name) {
			zpage.name = prompt ("Page name ?");
			}
			if (!zpage.name) return;
			var url = config.serverurl + 'savePage?name=' + zpage.name;
			var receiver = function (text) {
			console.log ('COUCOU:text = ' + text);
			};
			new ZboxHandler (url, receiver, 'json').postjson (zpage);
			}

			function setMode (newmode) {
			mode = newmode;
			var className = zpage.root.container.className;
			var zboxes = document.querySelectorAll (".zbox");
			for (var z = 0; z < zboxes.length; z++) {
			zboxes [z].className = (mode == 'edit') ? 'zbox edit' : 'zbox';
			}
			}

			function splitHoriz (e) {
			toggleMenuOff ();
			var zbox = getZBox (menu.zbox);
			if (!zbox) {
			alert ('splitHoriz: zbox ' + menu.zbox + ' does not exists.');
			return;
			}
			zbox.container.style.flexDirection = 'column';

			var zbox1 = new ZBox ({
			id: zbox.id + '_1',
			name: zbox.name + '_1',
			type: 'container',
			});
			zbox.addChild (zbox1);
			var zbox2 = new ZBox ({
			id: zbox.id + '_2',
			name: zbox.name + '_2',
			type: 'container',
			});
			zbox.addChild (zbox2);
			}

			function splitVert (e) {
			toggleMenuOff ();
			var zbox = getZBox (menu.zbox);
			if (!zbox) {
			alert ('splitVert: zbox ' + menu.zbox + ' does not exists.');
			return;
			}
			zbox.container.style.flexDirection = 'row';

			var zbox1 = new ZBox ({
			id: zbox.id + '_1',
			name: zbox.name + '_1',
			type: 'container',
			});
			zbox.addChild (zbox1);
			var zbox2 = new ZBox ({
			id: zbox.id + '_2',
			name: zbox.name + '_2',
			type: 'container',
			});
			zbox.addChild (zbox2);
			}

			function setHTMLcontent (e) {
			toggleMenuOff ();
			var zbox = getZBox (menu.zbox);
			if (!zbox) {
			alert ('setHTMLcontent: zbox ' + zboxname + ' does not exists.');
			return;
			}
			var url = 'https://slpc1.epfl.ch/epflhead.html';
			var contentname = zbox.name + '_content';
			zbox.container.innerHTML =
			'<object name="' + contentname + '" ' +
			'id="' + contentname + '" ' +
			'type="text/html" width="100%" ' +
			'data="' + url + '">' +
			'</object>'
			;
			zbox.type = 'html';
			zbox.url = url;

			var cssurl = 'https://www.epfl.ch/css/epfl.css';
			if (cssurl) {
			document [contentname].onload = function (e) {
			var content = document [contentname].contentDocument;
			var url = 'https://www.epfl.ch/css/epfl.css';
			var sheet = document.createElement ('link');
			sheet.rel = 'stylesheet';
			sheet.type = 'text/css';
			sheet.href = url;
			content.head.appendChild (sheet);
			}
			}
			}

			function setJSONcontent (e) {
			toggleMenuOff ();
			var zbox = getZBox (menu.zbox);
			if (!zbox) {
			alert ('setJSONcontent: zbox ' + zbox.name + ' does not exists.');
			return;
			}
			zbox.container.style.overflow = 'hidden';
			var url1 = 'https://test-websrv.epfl.ch/rwsgroups/listMembers' +
			'?app=testsrv&caller=105640&name=testsrv&id=S00013';
			var url = 'https://test-websrv.epfl.ch/rwsgroups/listGroupsOwnedBy' +
			'?app=testsrv&caller=105640&name=testsrv&user=105640';
			var receiver = function (jsontext) {
			var json = JSON.parse (jsontext);
			zbox.container.innerHTML =
			'<div style="width: 100%">' +
			tree2table (zbox.name, json.result) +
			'</div';
			zbox.type = 'json';
			zbox.url = url;
			};
			new ZboxHandler (url, receiver, 'json').send ();

			//var contentname = zbox.name + '_content';
			//zbox.innerHTML = `
			// <object name="` + contentname + `" id="` + contentname + `" type="text/json"
			// width="100%" data="` + url + `">
			// </object>
			//`;
			}

			function setTextcontent (e) {
			toggleMenuOff ();
			var zbox = getZBox (menu.zbox);
			if (!zbox) {
			alert ('setTextcontent: zbox ' + menuzbox + ' does not exists.');
			return;
			}
			var quill = new Quill ('#' + zbox.name, {
			placeholder: zbox.name,
			});
			zbox.type = 'text';
			zbox.quill = 'quill';
			}

			function adjustZBoxSize (zbox) {
			var container = zbox.container;
			if (container.scrollHeight > container.offsetHeight - 18) {
			container.style.height = (container.offsetHeight - 34) + 'px';
			}
			//if (popup.win.scrollWidth > popup.offsetWidth) {
			// popup.win.style.width = popup.offsetWidth + 'px';
			//}
			}

			function tree2html (zbox, tree) {
			var html = '';
			if (tree.constructor === Object) {
			for (var key in tree) {
			var value = tree [key];
			html += '<br>' + key + ' = ' + tree2html (value);
			}
			} else
			if (tree.constructor === Array) {
			for (var i = 0; i < tree.length; i++) {
			var value = tree [i];
			html += '<br>' + tree2html (value) + '<br>';
			}
			} else {
			html += tree;
			}
			}

			function tree2table (zbox, tree) {
			if (tree.constructor !== Array) return;
			var headers = new Array;
			var first = tree [0];
			if (first.constructor === Object) {
			for (var f in first) {
			headers.push (f);
			}
			}
			var stdobjects;
			if (first.id && first.display) {
			stdobjects = true;

			}
			//
			var html = '<table border>';
			if (headers) {
			html += '<thead><tr>';
			for (var h = 0; h < headers.length; h++) {
			html += '<th>' + headers [h] + '</th>';
			}
			html += '</tr></thead>';
			}
			html += '<tbody>';
			for (var t = 0; t < tree.length; t++) {
			var value = tree [t];
			if (value.constructor === Array) {
			for (var v = 0; v < value.length; v++) {
			html += '<td>' + value [v] + '</td>';
			}
			} else
			if (value.constructor === Object) {
			for (var v in value) {
			html += '<td>' + value [v] + '</td>';
			}
			} else {
			continue;
			}
			html += '</tr>';
			}
			html += '</table>';
			return html;
			}


			//
			//
			//

			function startResize (e) {
			var target = e.target;
			//console.log ('COUCOU:startResize: target = ' + target.id);
			target.startX = e.clientX;
			target.startY = e.clientY;
			target.startWidth = parseInt (target.width, 10);
			target.startHeight = parseInt (target.height, 10);
			document.addEventListener ('mousemove', doResize, false);
			document.addEventListener ('mouseup', stopResize, false);
			}

			function doResize (e) {
			var target = e.target;
			//console.log ('COUCOU:doResize: target = ' + target.id);
			var neww = (target.startWidth + e.clientX - target.startX) + 'px';
			var newh = (target.startHeight + e.clientY - target.startY) + 'px';
			//console.log ('COUCOU:doResize: neww = ' + neww);
			target.style.width = (target.startWidth + e.clientX - target.startX) + 'px';
			target.style.height = (target.startHeight + e.clientY - target.startY) + 'px';
			}

			function stopResize (e) {
			var target = e.target;
			//console.log ('COUCOU:stopResize: target = ' + target.id);
			document.documentElement.removeEventListener ('mousemove', doResize, false);
			document.documentElement.removeEventListener ('mouseup', stopResize, false);
			}

			function resizeZBox (zboxname) {
			console.log ('COUCOU:resizeZBox: zboxname = ' + zboxname);
			}

			function setzboxcontent (zbox, json) {
			var json = JSON.parse (json);
			var titletext = json.title;
			var titlenode = document.createTextNode (titletext);
			var titleh2 = document.createElement ('h2');
			titleh2.appendChild (titlenode);
			zbox.appendChild (titleh2);
			//
			var pages = json.pages;
			//for (var page in pages) {
			for (var ipage = 0; ipage < pages.length; ipage++) {
			var page = pages [ipage];
			var pagediv = document.createElement ('div');
			pagediv.id = 'pagediv' + ipage;
			pagediv.className = 'page';
			var titlenode = document.createTextNode (page.title);
			pagediv.appendChild (titlenode);

			var lines = page.lines;
			for (var iline = 0; iline < lines.length; iline++) {
			var line = lines [iline];
			var linediv = document.createElement ('div');
			linediv.id = 'linediv' + iline;
			linediv.className = 'line';

			var stamps = line;
			for (var istamp = 0; istamp < stamps.length; istamp++) {
			var stamp = stamps [istamp];
			var stampdiv = document.createElement ('div');
			stampdiv.id = 'stampdiv' + istamp;
			stampdiv.className = 'stamp';
			var titlenode = document.createTextNode (stamp.yvert);
			stampdiv.appendChild (titlenode);
			linediv.appendChild (stampdiv);
			}

			pagediv.appendChild (linediv);
			}
			zbox.appendChild (pagediv);
			}

			var children = JSON.parse (json).children;
			for (var ichild = 0; ichild < children.length; ichild++) {
			var child = children [ichild];
			var objectid = child.objectid;
			var objectlabel = child.objectlabel;
			var icon = child.icon;
			var action = child.action;
			var haschildren = child.haschildren;

			var childtrig = document.createElement ('div');
			childtrig.id = 'div' + objectid;
			childtrig.className = 'trigger';

			var plusimg = document.createElement ('img');
			plusimg.id = 'folder' + objectid;
			plusimg.src = haschildren ? '/images/plus.gif' : '/images/tee.gif';
			plusimg.onclick = function (objectid) {
			return function () { swapBranch (objectid); };
			} (objectid);
			plusimg.style.border = 0;
			plusimg.style.verticalAlign = 'middle';
			childtrig.appendChild (plusimg);

			var iconimg = document.createElement ('img');
			iconimg.src = icon;
			iconimg.style.border = 0;
			iconimg.style.width = '16px';
			iconimg.style.margin = 0;
			iconimg.style.verticalAlign = "middle";
			childtrig.appendChild (iconimg);

			var label = document.createElement ('a');
			label.onclick = function (action) {
			return function () {
			if (match = action.match (/^js:(.*)$/)) {
			var js = match [1];
			eval (js);
			} else {
			loadcontent (action);
			}
			}
			} (action);

			label.style.fontSize = '8pt';
			label.style.verticalAlign = 'baseline';
			var text = document.createTextNode (objectlabel);
			label.appendChild (text);
			childtrig.appendChild (label);

			branch.appendChild (childtrig);
			if (haschildren) {
			var childspan = document.createElement ('span');
			childspan.id = 'branch' + objectid;
			childspan.style.display = 'none';
			childspan.className = 'branch';
			branch.appendChild (childspan);
			childspan.loaded = false;
			}
			}
			branch.loaded = true;
			branch.style.display = 'zbox';
			}



			function ZboxHandler (url, receiver, type) {
			var req = init ();
			req.onreadystatechange = processRequest;

			function init () {
			if (window.XMLHttpRequest) {
			return new XMLHttpRequest ();
			} else if (window.ActiveXObject) {
			isIE = true;
			return new ActiveXObject ("Microsoft.XMLHTTP");
			}
			}

			function processRequest () {
			if ((req.readyState == 4) && (req.status == 200)) {
			if (type == 'xml') {
			receiver (req.responseXML);
			} else
			if (type == 'json') {
			receiver (req.responseText);
			} else {
			receiver (req.responseText);
			}
			}
			}

			this.get = function () {
			req.open ("GET", url, true);
			req.send ();
			}

			this.post = function (data) {
			req.open ("POST", url, true);
			req.setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
			req.send (data);
			}

			this.postjson = function (page) {
			req.open ("POST", url, true);
			req.setRequestHeader ("Content-type", "application/json");
			req.send (page.toJSON ());
			}

			this.send = function () {
			req.open ("GET", url, true);
			req.send (null);
			}
			}

			function addEvents (container) {
			container.addEventListener ('mouseenter',
			function (e) {
			//console.log ('COUCOU:mouseenter:target = ' + e.target.id);
			e.target.focus ();
			//e.target.style.background = 'lightblue';
			}
			);
			container.addEventListener ('mouseleave',
			function (e) {
			e.target.style.background = 'white';
			}
			);
			container.addEventListener ('blur',
			function (e) {
			//console.log ('COUCOU:onblur:target = ' + e.target.id);
			}
			);
			container.addEventListener ('focusin',
			function (e) {
			//console.log ('COUCOU:onfocusin:target = ' + e.target.id);
			}
			);
			container.addEventListener ('keypress',
			function (e) {
			var target = e.target;
			var char = String.fromCharCode(e.keyCode \|\| e.charCode);
			//console.log ('COUCOU:onkeypress:target = ' + target.id + ', char = ' + char);
			}
			);

			container.onmousedown = function (e) {
			var target = e.target;
			//console.log ('COUCOU:onmousedown:target = ' + target.id);
			toggleMenuOff ();
			var x = e.offsetX;
			var y = e.offsetY;
			if (x < 5) {
			target.resizing = true;
			console.log ('1');
			} else
			if (x > e.target.clientWidth - 5) {
			target.resizing = true;
			console.log ('2');
			} else
			if (y < 5) {
			target.resizing = true;
			console.log ('3');
			} else
			if (y > e.target.clientHeight - 5) {
			target.resizing = true;
			console.log ('4');
			} else {
			target.resizing = false;
			container.style.cursor = 'default';
			}
			if (!target.resizing) {
			//startResize (e);
			}
			};
			}

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

			//
			// Menus
			//

			//container.onmousemove = function (e) {
			// var target = e.target;
			// if (target.resizing) {
			// doResize (e);
			// } else {
			// var x = e.offsetX;
			// var y = e.offsetY;
			// if (x < 5) {
			// container.style.cursor = 'ew-resize';
			// } else
			// if (x > e.target.clientWidth - 5) {
			// container.style.cursor = 'ew-resize';
			// } else
			// if (y < 5) {
			// container.style.cursor = 'ns-resize';
			// } else
			// if (y > e.target.clientHeight - 5) {
			// container.style.cursor = 'ns-resize';
			// } else {
			// container.style.cursor = 'default';
			// }
			// }
			//};

zcode/js/zcode.jsf9f56b7db931master

zcode.jsView Options

zcode/js/zcode.js
f9f56b7db931master

zcode.js
View Options