Difference between revisions of "Template:UCAS-China/igemUCAS.js"

Revision as of 12:43, 9 October 2018

/*!

* igemUCAS JavaScript Library v0.18.16
* Copyright UCAS iGEM team
*/

( function( global, factory ) { var iU = global.iU = factory(global); iU(); } ) (window, function( window ) { var document = window.document, inspect = (function(){ var strErr = "", nextseq = 1, error = function( location, desc ){ strErr = strErr.concat(nextseq, " ", location, ": ", desc, '\n'); nextseq ++; }, garrison = function( name ){ var f = { string: function( s ){ if( (!s) || typeof s != 'string' ) error(name, "parameter should be of ."); return f; }, number: function( s ){ if( (!s) || typeof s != 'number' ) error(name, "parameter should be of number type."); return f; }, keyUnused: function(obj, key){ if( obj[key] ) error(name, "key "+key+" has been used."); return f; }, assert: function( val, desc ){ if( !val ) error(name, desc ); return f; } }; return f; };

garrison.displayErrors = function(){ if(strErr.length == 0 ) alert("No errors, Congrats!") else alert( strErr ); }; return garrison; })(),

consts = { SIDE: 0.1, SEGW: 24, INF: 2000000 },

utils = { merge: function( t, c){ for(var i in c){ if( t[i] ){ if( typeof t[i] == 'object' && typeof c[i] == 'object') t[i] = utils.merge(t[i],c[i]); else t[i] = c[i]; } else t[i] = c[i]; } return t; }, getUid: (function(){ var now = -1; return function(){ now ++; return (function(n){ return '_'+n+'_'; })(now); }; })(), realWidth: function( span ){ return span * window.innerWidth / consts.SEGW; } };

var schema = { general: { "font-family": "Georgia", "font-size": "25px", "text-align": "justify", "color": "white" }, span: {

}, a: { "text-decoration": "none", "mouseover": function(){

}, "mouseleave": function(){

} }, b: { "color": "yellow" } }

function Component( node, id, span ){ this.elem = (typeof node == "string") ? document.createElement(node) : node; this.elem.id = id || utils.getUid(); this.elem.style.visibility = "hidden";

this.span = span; this.styles = {};

this.iU_base.appendChild(this.elem); this.state = "wait"; } Component.prototype = { constructor: Component, adaptWidth: function(){ var width = utils.realWidth(this.span);

if( width == this.elem.clientWidth ) return this.elem.clientHeight;

this.css({ "display": "block", "width": width+"px" });

var h = this.elem.clientHeight; if( h != 0 && this.state == "wait" ) this.state = "unused";

return h; }, updataSchema: function(){ this.css( schema.general ); this.css( schema[ (this.elem.tagName||"").toLowerCase() ] ); for(var i in this.elem.childNodes) Component.prototype.css.call( this.elem.childNodes[i], schema[ (this.elem.childNodes[i].tagName||"").toLowerCase() ] ); }, css: function( styles ){ if( !styles ) return ;

var elem = this.elem || this;//maybe a component or DOM Element if(this.styles){ for(var prop in this.styles) elem.style[prop] = this.styles[ prop ]; }

for(var prop in styles){ var key = "", change = false;

for(var j = 0; j < prop.length; j ++){ if( prop[j] == '-' ) change = true; else{ key += change ? prop[j].toUpperCase() : prop[j]; change = false; } }

if( typeof styles[ prop ] == "function" ) elem.addEventListener(key, styles[prop]); else elem.style[ key ] = styles[ prop ];

if(this.styles) this.styles[ key ] = styles[ prop ]; } }, render: function( offsetX ){ this.adaptWidth();

this.css({ "position": "absolute", "left": (offsetX+this.left) +"px", "top": this.top +"px", "visibility": "visible" }); }, toString: function(){ return "["+this.elem.tagName.toLowerCase() +"] "+ this.elem.innerHTML.substr(0,50)+"\n"; } };

var Supp = { upgradeText: function(){ for(var i = 0, i_len = this.elem.childNodes.length; i < i_len; i ++){ var node = this.elem.childNodes[i]; if( !node.attributes ){ var child = document.createElement("span"); child.innerHTML = node.textContent; this.elem.replaceChild(child, node); } } } };

function Flow( configs ){ this.span = configs.span; this.padding = configs.padding;

this.spacing = configs.spacing; this.marginCross= configs.marginCross; this.marginTop = configs.marginTop; this.height = window.innerHeight - configs.marginTop - configs.marginBottom;

this.page = 0; this.frontier = 0; this.reserve = 0; this.usedW = 0;

this.comps = []; this.buffer = []; this.isVisible = true; } Flow.prototype = { constructor: Flow, operate: function(){ var wait = false; while( !wait && this.buffer.length > 0 ){ switch( this.buffer[0].state ){ case "dispose": this.buffer.shift(); break;

case "wait": this.buffer[0].adaptWidth(); if( this.buffer[0].state == "wait" ){ wait = true; break; } case "unused": var comp = this.buffer.shift(), h = comp.adaptWidth();

if( this.page == 0 ) this.page = 1; else if( this.usedW == 0 || this.usedW + comp.span > this.span ){ if( this.frontier + h > this.height ){

this.page += 1; this.frontier = 0; } else this.frontier+= this.spacing;

this.reserve = this.frontier; this.usedW = 0; }

comp.left = utils.realWidth( this.span * (this.page-1) + this.usedW + this.page*this.padding ); comp.top = this.reserve + this.marginTop; comp.state = "used";

this.usedW += comp.span; this.frontier = Math.max( this.frontier, this.reserve+h );

this.comps.push( comp ); } } }, getSpan: function( s ){ var span = s ? s.value : this.span; span = (span < 0) ? (span + this.span) : Math.min(span, this.span); return span; },

script: function( node ){ var t = new Component( node, node["name"], this.getSpan( node["span"] )); Supp.upgradeText.call(t); t.updataSchema(); t.adaptWidth();

this.buffer.push( t ); }, image: function( node ){ var i = new Component( node, node["name"], this.getSpan( node["span"] )); i.updataSchema(); i.adaptWidth();

this.buffer.push( i ); }, title: function( node ){ var t = new Component( node, node["name"], this.getSpan( node["span"] )); t.updataSchema(); t.adaptWidth();

this.buffer.push( t ); },

hide: function(){ if( this.isVisible ){ for(var i = 0, i_len = this.comps.length; i < i_len; i ++) this.comps[ i ].elem.style["visibility"] = "hidden"; } }, getBreadth: function(){ return this.page * this.span + (this.page+1) * this.marginCross; }, render: function( offsetX ){ this.isVisible = true; this.operate();

for(var i = 0, i_len = this.comps.length; i < i_len; i ++) this.comps[ i ].render( offsetX ); } };

function Scroll( height ){ this.flows = []; } Scroll.prototype = { constructor: Scroll, render: function( position ){ var accum = 0, d = [];

for(var i = 0, i_len = this.flows.length; i < i_len; i ++){ var flow = this.flows[i], offsetX = accum - position, breadth = flow.getBreadth(), width = window.innerWidth ;

if( offsetX < -breadth || offsetX > width ) flow.hide(); else d.push( [flow, offsetX] );

accum += breadth; } for(var j in d) d[j][0].render( -d[j][1] );

return accum; } };

function SideBar( iU_boot ){ this.boot = iU_boot; iU_boot.id = "UACSboot"; iU_boot.style["display"] = "none";

this.logo = iU_boot.children[0];

this.sponsors = []; for(var i = 1; i < iU_boot.children.length; i ++) this.sponsors.push( iU_boot.children[i] );

this.headings = []; } SideBar.prototype = { constructor: SideBar, render: function( width ){ width = Math.max(width, window.innerWidth*consts.SIDE); var ratio = ((width / window.innerWidth) - consts.SIDE ) / ( 1 - consts.SIDE );

Component.prototype.css.call(this.boot, { "display": "block", "position": "absolute", "width": width + "px", "height": window.innerHeight + "px", "background-color": "black", "visibility": "visible" }); if(ratio > 0){ Component.prototype.css.call(this.logo, { "display": "block", "position": "absolute", "top": Math.floor(window.innerHeight*0.2) + "px", "left": Math.floor(window.innerWidth *0.3) + "px", "width": Math.floor(window.innerWidth *0.4) + "px", "opacity": ratio }); } else Component.prototype.css.call(this.logo, { "display": "none" });

var accum = 0; for(var i = 0; i < this.headings.length; i ++){ Component.prototype.css.call(this.headings[i], { "position": "inherit", "width": Math.floor(window.innerWidth *consts.SIDE) + "px", "visibility":"visible" }); var h = this.headings[i].clientHeight; Component.prototype.css.call(this.sponsors[i], { "position": "absolute", "top": accum + "px", "left": "0", "visibility":"visible", "opacity": 1.0-ratio }); accum += h; }

accum = 0; for(var i = 0; i < this.sponsors.length; i ++){ Component.prototype.css.call(this.sponsors[i].children[0], { "position": "inherit", "width": Math.floor(window.innerWidth *consts.SIDE) + "px", "visibility":"visible" }); accum += this.sponsors[i].children[0].clientHeight; Component.prototype.css.call(this.sponsors[i], { "position": "absolute", "top": (window.innerHeight - accum) + "px", "left": "0", "visibility":"visible", "opacity": 1.0-ratio }); }

} }

var fn = { initRoot: function( overflow ){ var iU_root = document.getElementById("igemUCAS");

if( !iU_root ) return null;

iU_root.style.visibility = "hidden"; iU_root.style["z-index"] = "-100";

if( overflow ){ var webpage = document.getElementsByTagName("igem_2018_team_content")[0]; Component.prototype.css.call(webpage,{ "overflow-x": "hidden", "overflow-y": "hidden", "padding" : "0", "margin" : "0", "background-color": "black" }); }

inspect("fn.initRoot").assert(iU_root, ""); return iU_root; }, initWebGL: function( iU_root ){ var canvas = document.createElement("canvas");

canvas.id = "bgCanvas"; canvas.width = window.innerWidth; canvas.height = window.innerHeight; iU_root.parentNode.appendChild(canvas);

var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

if(gl) Component.prototype.css.call(canvas, { "position":"absolute", "top":"0", "left":"0", "z-index":"-90", "overflow":"hidden", "visibility":"visible" });

return gl; }, initBase: function( iU_root ){ var iU_base = document.createElement("div"); iU_base.id = "UCASigem"; iU_base.style.position = "absolute";

iU_root.parentNode.appendChild(iU_base); return iU_base; },

root_not_found: function(){

}, gl_not_supported: function(){

}, defaultConfig: { overflow: true, webgl: true } }

function igemUCAS(){ schema = utils.merge( schema, window.schema||{} );

var iU_root = fn.initRoot( (window.configs||fn.defaultConfig).overflow ); if( !iU_root ) return fn.root_not_found();

var iU_base = fn.initBase( iU_root ); Component.prototype.iU_base = iU_base;

var sidebar = new SideBar( iU_root.children[0] ); iU_root.parentNode.appendChild( sidebar.boot );

var gl = (window.configs||fn.defaultConfig).webgl || fn.initWebGL( iU_root ); if( !gl ) fn.gl_not_supported();

var schema = utils.merge( fn.defaultSchema, window.schema||{} ); Flow.prototype.schema = schema;

var scroll = new Scroll( window.innerHeight ); while( iU_root.children.length > 0 ){ var page = iU_root.children[0];

if( (page.tagName||"").toLowerCase() == "div" ){ var spacing = page["spacing"] ? page["spacing"].value.split(/\t/): "", flow = new Flow({ span: page["span"] ? page["span"].value : 8, padding: page["padding"] ? page["padding"].value : 1, spacing: parseInt(spacing[0]) || 40, marginTop: parseInt(spacing[1]) || 100, marginBottom: spacing[2] ? parseInt(spacing[2]) : (parseInt(spacing[1]) || 100) });

scroll.flows.push(flow);

while( page.children.length > 0 ){ var node = page.children[0]; switch( ((node||{}).tagName||"").toLowerCase() ){ case "p": flow.script(node); break; case "b": flow.title(node); break; case "img": flow.image(node); break; default: page.removeChild(node); break; } } } iU_root.removeChild( page ); } iU_root.parentNode.removeChild(iU_root);

var offset = window.innerWidth;

var scrollHandler = function( ev ){ ev = ev || window.event; offset -= ev.wheelDelta || ev.detail; offset = Math.min(offset, window.innerWidth); sidebar.render( offset ); scroll .render( offset ); };

//document.addEventListener("DOMMouseScroll", scrollHandler , false); window.onmousewheel = document.onmousewheel = scrollHandler; scrollHandler( {detail: 0} ); } igemUCAS.displayErrors = inspect.displayErrors;

return igemUCAS; });