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

m
m
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/*!
 
/*!
−
  * igemUCAS JavaScript Library v0.18.16
+
  * igemUCAS JavaScript Library v0.18.1
 
  * Copyright UCAS iGEM team
 
  * Copyright UCAS iGEM team
 
  */
 
  */
Line 9: Line 9:
 
inspect = (function(){
 
inspect = (function(){
 
var
 
var
−
strErr = "",
+
strErr = "igemUCAS v0.18.19\n",
 
nextseq = 1,
 
nextseq = 1,
 
error = function( location, desc ){
 
error = function( location, desc ){
Line 43: Line 43:
 
garrison.displayErrors = function(){
 
garrison.displayErrors = function(){
 
if(strErr.length == 0 )
 
if(strErr.length == 0 )
−
alert("No errors, Congrats!")
+
console.log("No errors, Congrats!")
 
else
 
else
−
alert( strErr );
+
console.log( strErr );
 
};
 
};
 +
garrison.root_not_found = function(){
 +
console.log("DIV igemUCAS does not exist.");
 +
garrison.displayErrors();
 +
};
 +
garrison.gl_not_supported = function(){
 +
console.log("WebGL is not supported.");
 +
}
 
return garrison;
 
return garrison;
 
})(),
 
})(),
  
 +
getUid = (function(){
 +
var now = -1;
 +
return function(){
 +
now ++;
 +
return (function(n){
 +
return '_'+n+'_';
 +
})(now);
 +
};
 +
})(),
  
−
consts = {
+
configs = {
−
SIDE: 0.1,
+
defSpan: 3,
−
SEGW: 24,
+
scriptPadding: 20,
−
INF: 2000000
+
topBlank: 60
−
},
+
−
 
+
−
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
+
function css( elem, styles ){
−
schema = {
+
if( !(elem && styles) )
−
general: {
+
return ;
−
"font-family":  "Georgia",
+
−
"font-size": "25px",
+
−
"text-align":  "justify",
+
−
"color": "white"
+
−
},
+
−
span: {
+
  
−
},
+
for(var prop in styles){
−
a: {
+
var
−
"text-decoration": "none",
+
key = "",
−
"mouseover": function(){
+
change = false;
−
+
−
},
+
−
"mouseleave": function(){
+
  
 +
for(var j = 0; j < prop.length; j ++){
 +
if( prop[j] == '-' )
 +
change = true;
 +
else{
 +
key += change ? prop[j].toUpperCase() : prop[j];
 +
change = false;
 
}
 
}
−
},
 
−
b: {
 
−
"color": "yellow"
 
 
}
 
}
 +
 +
if( typeof styles[ prop ] == "function" )
 +
elem.addEventListener(key, styles[prop]);
 +
else
 +
elem.style[ key ] = styles[ prop ];
 
}
 
}
 +
}
 +
function Component( node, cls, width, padding ){
 +
if( typeof node == "string" ){
 +
this.elem = document.createElement(node);
 +
this.elem.style.visibility = "hidden";
 +
this.elem.wait = true;
 +
}
 +
else
 +
this.elem = node;
  
−
function Component( node, id, span ){
+
this.elem.id = getUid();
−
this.elem = (typeof node == "string") ? document.createElement(node) : node;
+
Component.prototype.iU_book.appendChild(this.elem);
−
this.elem.id = id || utils.getUid();
+
−
this.elem.style.visibility = "hidden";
+
  
−
this.span = span;
+
this.padding = padding || 0;
−
this.styles = {};
+
this.width = width - 2*this.padding;
  
−
this.iU_base.appendChild(this.elem);
+
if(cls)
−
this.state = "wait";
+
this.elem.className = cls;
 +
 
 +
if( this.elem.wait )
 +
this.state = "wait";
 +
else
 +
this.loaded();
 
}
 
}
 
Component.prototype = {
 
Component.prototype = {
 
constructor: Component,
 
constructor: Component,
−
adaptWidth: function(){
+
loaded: function(){
−
var
+
css(this.elem,{"width": this.width+"px"});
−
width = utils.realWidth(this.span);
+
this.height= this.elem.offsetHeight;
−
 
+
this.state = "unused";
−
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(){
+
place: function(left, top){
−
this.css( schema.general );
+
this.left = left;
−
this.css( schema[ (this.elem.tagName||"").toLowerCase() ] );
+
this.top  = top;
−
for(var i in this.elem.childNodes)
+
this.state= "used";
−
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 ){
 
render: function( offsetX ){
−
this.adaptWidth();
+
css(this.elem, {
−
 
+
−
this.css({
+
 
"position": "absolute",
 
"position": "absolute",
 
"left": (offsetX+this.left) +"px",
 
"left": (offsetX+this.left) +"px",
Line 197: Line 145:
 
};
 
};
  
−
var
+
function Flow( seq, width, height, top ){
−
Supp = {
+
this.seq = seq;
−
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.width = width;
−
this.marginCross= configs.marginCross;
+
this.height = height;
−
this.marginTop  = configs.marginTop;
+
this.top  = top;
−
this.height = window.innerHeight - configs.marginTop - configs.marginBottom;
+
  
 
this.page = 0;
 
this.page = 0;
Line 235: Line 165:
 
operate: function(){
 
operate: function(){
 
var
 
var
−
wait = false;
+
pause = false;
−
while( !wait && this.buffer.length > 0 ){
+
while( !pause && this.buffer.length > 0 ){
 
switch( this.buffer[0].state ){
 
switch( this.buffer[0].state ){
 
case "dispose": this.buffer.shift(); break;
 
case "dispose": this.buffer.shift(); break;
  
−
case "wait":
+
case "pause":
−
this.buffer[0].adaptWidth();
+
 
if( this.buffer[0].state == "wait" ){
 
if( this.buffer[0].state == "wait" ){
−
        wait = true;
+
        pause = true;
 
        break;
 
        break;
 
}
 
}
 
case "unused":  
 
case "unused":  
 
var
 
var
−
comp = this.buffer.shift(),
+
comp = this.buffer.shift();
−
h = comp.adaptWidth();
+
  
 
if( this.page == 0 )
 
if( this.page == 0 )
 
this.page = 1;
 
this.page = 1;
−
else if( this.usedW == 0 || this.usedW + comp.span > this.span ){
+
else if( this.usedW == 0 || this.usedW + comp.width > this.width ){
−
if( this.frontier + h > this.height ){
+
if( this.frontier + comp.height > this.height ){
−
+
 
this.page += 1;
 
this.page += 1;
 
this.frontier = 0;
 
this.frontier = 0;
 
}
 
}
−
else
 
−
this.frontier+= this.spacing;
 
−
 
 
this.reserve  = this.frontier;
 
this.reserve  = this.frontier;
 
this.usedW   = 0;
 
this.usedW   = 0;
 
}
 
}
−
alert(this.reserve+" "+this.padding);
+
 
−
comp.left = utils.realWidth( this.span * (this.page-1) + this.usedW + this.page*this.padding );
+
comp.place(this.width * (this.page-1) + this.usedW + comp.padding, this.reserve + this.top);
−
comp.top = this.reserve + this.marginTop;
+
 
comp.state = "used";
 
comp.state = "used";
  
−
this.usedW  += comp.span;
+
this.usedW  += comp.width;
−
this.frontier = Math.max( this.frontier, this.reserve+h );
+
this.frontier = Math.max( this.frontier, this.reserve+comp.height );
  
 
this.comps.push( comp );
 
this.comps.push( comp );
Line 277: Line 200:
 
}
 
}
 
},
 
},
−
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(){
 
hide: function(){
−
if( this.isVisible ){
+
if( this.isVisible )
 
for(var i = 0, i_len = this.comps.length; i < i_len; i ++)
 
for(var i = 0, i_len = this.comps.length; i < i_len; i ++)
 
this.comps[ i ].elem.style["visibility"] = "hidden";
 
this.comps[ i ].elem.style["visibility"] = "hidden";
−
}
+
 +
this.isVisible = false;
 
},
 
},
 
getBreadth: function(){
 
getBreadth: function(){
−
return this.page * this.span + (this.page+1) * this.marginCross;
+
return this.page * this.width;
 
},
 
},
 
render: function( offsetX ){
 
render: function( offsetX ){
Line 328: Line 219:
 
};
 
};
  
−
function Scroll( height ){
+
function Book( iU_root, nav ){
−
this.flows = [];
+
this.interface = document.createElement("div");
−
}
+
this.interface.id = "iU_book";
−
Scroll.prototype = {
+
this.nav = nav;
−
constructor: Scroll,
+
−
render: function( position ){
+
−
var
+
−
accum = 0,
+
−
d = [];
+
  
−
for(var i = 0, i_len = this.flows.length; i < i_len; i ++){
+
iU_root.parentNode.appendChild( this.interface );
−
var
+
Component.prototype.iU_book = this.interface;
−
flow = this.flows[i],
+
−
offsetX = accum - position,
+
−
breadth = flow.getBreadth(),
+
−
width = window.innerWidth ;
+
  
−
if( offsetX < -breadth || offsetX > width )
+
this.flows = [];
−
flow.hide();
+
this.buffer  = [];
−
else
+
this.nowFlow = null;
−
d.push( [flow, offsetX] );
+
this.counter = 0;
 +
 
 +
this.nav = undefined;
 +
this.width  = 0;
 +
this.height  = this.interface.clientHeight;
  
−
accum += breadth;
+
var
 +
_this = this;
 +
this.offset = 0;
 +
this.scroll = function( ev ){
 +
ev = ev || window.event;
 +
if( ev.preventDefault )
 +
ev.preventDefault();
 +
 +
_this.offset -= ev.wheelDelta || ev.detail || 0;
 +
_this.offset  = Math.max(_this.offset, 0);
 +
var
 +
accum = 0;
 +
for(var i = 0; i < _this.flows.length; i ++){
 +
_this.flows[i].render( accum - _this.offset );
 +
accum += _this.flows[i].getBreadth();
 
}
 
}
−
for(var j in d)
+
}
−
d[j][0].render( -d[j][1] );
+
}
−
 
+
Book.prototype = {
−
return accum;
+
constructor: Book,
 +
alloc:  function( span ){
 +
this.buffer.push(new Flow( this.counter++, Math.round(window.innerWidth * span / 9), this.height - configs.topBlank, configs.topBlank ) );
 +
},
 +
forward: function(){
 +
if( this.buffer.length == 0 )
 +
this.alloc( configs.defSpan );
 +
this.nowFlow = this.buffer.shift();
 +
this.flows.push(this.nowFlow);
 +
return this.nowFlow;
 +
},
 +
append: function( node ){
 +
switch( ((node||{}).tagName||"").toLowerCase() ){
 +
case "p":  case "span":
 +
this.script(node); break;
 +
case "b":
 +
this.title(node);  break;
 +
case "img": case "video":
 +
this.image(node); break;
 +
case "dfn":
 +
this.special(node);break;
 +
case "pre":
 +
this.formula(node); break;
 +
default: node.parentNode.removeChild(node); break;
 +
}
 +
},
 +
script: function( node ){
 +
var
 +
target = this.nowFlow || this.forward();
 +
for(var i = 0, i_len = node.childNodes.length; i < i_len; i ++){
 +
var
 +
e = node.childNodes[i];
 +
if( !e.attributes ){
 +
var
 +
child = document.createElement("span");
 +
child.className = "script";
 +
child.innerHTML = e.textContent;
 +
node.replaceChild(child, e);
 +
}
 +
}
 +
target.buffer.push( new Component(node, "script", target.width, configs.scriptPadding ));
 +
},
 +
title:  function( node ){
 +
var
 +
target = this.forward();
 +
target.buffer.push( new Component(node, "title", target.width, configs.scriptPadding ));
 +
},
 +
image:  function( node ){
 +
var
 +
target = this.nowFlow || this.forward(),
 +
box  = document.createElement("div"),
 +
comp = new Component(node, "title", target.width, configs.scriptPadding );
 +
node.comp = comp;
 +
target.buffer.push( comp );
 +
},
 +
special:function( node ){
 +
node.parentNode.removeChild(node);
 +
},
 +
formula: function( node ){
 +
node.parentNode.removeChild(node);
 
}
 
}
 
};
 
};
  
−
function SideBar( iU_boot ){
+
function NaviBar( iU_root, logo, sponsors ){
−
this.boot = iU_boot;
+
this.surface = document.createElement("div");
−
iU_boot.id = "UACSboot";
+
iU_root.parentNode.appendChild( this.surface );
−
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 = [];
 
this.headings = [];
 +
this.init(logo, sponsors);
 +
 +
this.fstNow    = 0;
 +
this.secNow    = 0;
 +
this.subheading= null;
 
}
 
}
−
SideBar.prototype = {
+
NaviBar.prototype = {
−
constructor: SideBar,
+
constructor: NaviBar,
−
render: function( width ){
+
init: function( logo, sponsors ){
−
alert(width);
+
this.surface.id = "NaviBar";
−
width = Math.max(width, window.innerWidth*consts.SIDE);
+
this.header = document.createElement("div");
−
var
+
this.header.id = "header";
−
ratio = ((width / window.innerWidth) - consts.SIDE ) / ( 1 - consts.SIDE );
+
 
 +
logo.id  = "logo";
 +
this.header.appendChild( logo );
  
−
Component.prototype.css.call(this.boot, {
+
this.ptrH = document.createElement("div"),
−
"display": "block",
+
this.ptrH.id  = "heading pointer";
−
"position": "absolute",
+
this.ptrH.className = "arrow";
−
"width": width + "px",
+
css(this.ptrH,{
−
"height": window.innerHeight + "px",
+
"visibility": "hidden",
−
"background-color": "black",
+
"position": "absolute"
−
"visibility": "visible"
+
 
});
 
});
−
if(ratio > 0){
+
this.header.appendChild( this.ptrH );
−
Component.prototype.css.call(this.logo, {
+
 
−
"display": "block",
+
 
−
"position": "absolute",
+
this.ptrS = document.createElement("div");
−
"top": Math.floor(window.innerHeight*0.2) + "px",
+
this.ptrS.id  = "subheading pointer";
−
"left": Math.floor(window.innerWidth *0.3) + "px",
+
this.ptrS.className = "arrow";
−
"width": Math.floor(window.innerWidth *0.4) + "px",
+
css(this.ptrS,{
−
"opacity": ratio
+
"visibility": "hidden",
−
});
+
"position": "absolute"
−
}
+
});
−
else
+
this.header.appendChild( this.ptrS );
−
Component.prototype.css.call(this.logo, {
+
 
−
"display": "none"
+
this.surface.appendChild( this.header);
−
});
+
  
 
var
 
var
−
accum = 0;
+
footer = document.createElement("div");
−
for(var i = 0; i < this.headings.length; i ++){
+
footer.id = "footer";
−
Component.prototype.css.call(this.headings[i], {
+
this.surface.appendChild(footer);
−
"position":  "inherit",
+
 
−
"width": Math.floor(window.innerWidth *consts.SIDE) + "px",
+
var
−
"visibility":"visible"
+
strSponsors = document.createElement("span");
−
});
+
strSponsors.innerHTML = "Sponsors";
 +
strSponsors.id = "strSponsors";
 +
footer.appendChild(strSponsors);
 +
 
 +
for(var i = 0; i < sponsors.length; i ++){
 +
sponsors[i].className = "sponsor";
 +
footer.appendChild(sponsors[i]);
 +
}
 +
},
 +
jumpTo: function( path ){
 +
if( !path )
 +
return false;
 +
 +
var
 +
tarF, tarS;
 +
if( typeof path == "string" ){
 
var
 
var
−
h = this.headings[i].clientHeight;
+
sep = path.split(/\s*\.\s*/);
−
Component.prototype.css.call(this.sponsors[i], {
+
if( !sep[0] )
−
"position": "absolute",
+
return false;
−
"top": accum + "px",
+
 
−
"left": "0",
+
var
−
"visibility":"visible",
+
fst = sep[0].toUpperCase(),
−
"opacity":  1.0-ratio
+
h = this.headings,
−
});
+
s = null;
−
accum += h;
+
 
 +
for(var i = 0; i < h.length; i ++){
 +
if( h[i].innerHTML == fst ){
 +
tarF = i;
 +
s = h[i]._catalog.children;
 +
}
 +
}
 +
if( !s )
 +
return false;
 +
 
 +
if(sep[1]){
 +
var
 +
sec = sep[1].toUpperCase();
 +
for(var i = 0; i < s.length; i ++)
 +
if( s[i].innerHTML == sec )
 +
tarS = i;
 +
}
 +
else
 +
tarS = 0;
 
}
 
}
 +
else{
 +
tarF = path[0];
 +
tarS = path[1];
 +
if(!(tarF === +tarF && tarS === +tarS))
 +
return false;
 +
}
 +
 +
var
 +
fstElem = this.headings[ tarF ],
 +
t = fstElem.offsetTop  + fstElem.clientHeight - 3,
 +
l = fstElem.offsetLeft + fstElem.clientWidth*0.5 - 5;
 +
 +
css(this.ptrH,{
 +
"top":  Math.round(t) + "px",
 +
"left":  Math.round(l) + "px",
 +
"visibility": "visible"
 +
});
 +
 +
if(this.subheading)
 +
this.subheading.className = "HiddenCatalog";
 +
 +
this.subheading = h[ tarF ]._catalog;
 +
this.subheading.className = "VisibleCatalog"
 +
 +
return true;
 +
},
 +
addPath: function( path, jumpFunc ){
 +
var
 +
sep = path.split(/\s*\.\s*/);
 +
if( !(sep[0] && sep[1]) )
 +
return false;
  
−
accum = 0;
+
var
−
for(var i = 0; i < this.sponsors.length; i ++){
+
fst = sep[0].toUpperCase(),
−
Component.prototype.css.call(this.sponsors[i].children[0], {
+
sec = sep[1].toUpperCase(),
−
"position":  "inherit",
+
_this = this,
−
"width": Math.floor(window.innerWidth *consts.SIDE) + "px",
+
h = this.headings,
−
"visibility":"visible"
+
target = null;
−
});
+
−
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
+
−
});
+
−
}
+
  
 +
for(var i = 0; i < h.length; i ++)
 +
if( h[i].innerHTML == fst )
 +
target = h[i];
 +
 +
if( !target ){
 +
target = document.createElement("span");
 +
target.className = "H1";
 +
target.innerHTML = fst;
  
 +
target._catalog  = document.createElement("div");
 +
target._catalog.className = "HiddenCatalog";
 +
this.header.appendChild(target._catalog);
 +
 +
target.addEventListener("mousedown",(function(fst, target){
 +
return function(){
 +
_this.jumpTo( fst );
 +
if(_this.subheading)
 +
_this.subheading.className = "HiddenCatalog";
 +
 +
_this.subheading = target._catalog;
 +
_this.subheading.className = "VisibleCatalog";
 +
};
 +
})(fst, target) );
 +
 +
this.header.appendChild(target);
 +
this.headings.push(target);
 +
 +
var accum = [ 0 ];
 +
for(var i = 0; i < this.headings.length; i ++)
 +
accum[i+1] = accum[i] + this.headings[i].clientWidth + 60;
 
 
 +
var left  = Math.round(window.innerWidth * 0.6 - accum.pop()/2);
 +
for(var i = 0; i < this.headings.length; i ++)
 +
css(this.headings[i],{
 +
"left": (left + accum[i]) + "px"
 +
});
 +
}
 +
 +
var
 +
s = target._catalog.children;
 +
for(var i = 0; i < s.length; i ++)
 +
if( s[i].innerHTML == sec ){
 +
s[i]._jumpFunc = jumpFunc;
 +
return true;
 +
}
 +
 +
var
 +
subheading = document.createElement("span");
 +
subheading.className = "H2";
 +
subheading.innerHTML = sec;
 +
subheading._jumpFunc = jumpFunc;
 +
subheading.addEventListener("mouseover",function(){
 +
_this.jumpTo( path );
 +
});
 +
target._catalog.appendChild(subheading);
 +
 +
var accum = [ 0 ];
 +
for(var i = 0; i < s.length; i ++)
 +
accum[i+1] = accum[i] + s[i].clientWidth + 60;
 +
 +
var left  = Math.round(window.innerWidth * 0.6 - accum.pop()/2);
 +
for(var i = 0; i < s.length; i ++)
 +
css(s[i],{
 +
"left": (left + accum[i]) + "px"
 +
});
 +
return true;
 
}
 
}
 +
};
 +
 +
function Loader( iU_root, cover ){
 +
this.boot = document.createElement("div");
 +
this.boot.id = "loader";
 +
iU_root.parentNode.appendChild( this.boot );
 +
 +
this.total  = 0;
 +
this.loaded = 0;
 +
this.failed = 0;
 +
 +
var
 +
_this = this;
 +
this.load = function( img ){
 +
if( !img.height ){
 +
img.onload = function(){
 +
_this.loaded ++;
 +
if(img.comp)
 +
img.comp.state = "unused";
 +
};
 +
img.onerr  = function(){
 +
_this.failed ++;
 +
if(img.comp)
 +
img.comp.state = "dispose";
 +
};
 +
img.wait = true;
 +
_this.total ++;
 +
}
 +
};
 
}
 
}
 +
Loader.prototype.constructor = Loader;
  
 
var
 
var
Line 457: Line 562:
 
iU_root.style["z-index"] = "-100";
 
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, "");
 
inspect("fn.initRoot").assert(iU_root, "");
Line 485: Line 579:
  
 
if(gl)
 
if(gl)
−
Component.prototype.css.call(canvas, {
+
css(canvas, {
 
"position":"absolute",
 
"position":"absolute",
 
"top":"0",
 
"top":"0",
Line 504: Line 598:
 
iU_root.parentNode.appendChild(iU_base);
 
iU_root.parentNode.appendChild(iU_base);
 
return iU_base;
 
return iU_base;
−
},
 
−
 
−
root_not_found: function(){
 
−
 
−
},
 
−
gl_not_supported: function(){
 
−
 
−
},
 
−
defaultConfig: {
 
−
overflow: true,
 
−
webgl: true
 
 
}
 
}
−
}
+
};
  
 
function igemUCAS(){
 
function igemUCAS(){
−
schema = utils.merge( schema, window.schema||{} );
 
−
 
 
var
 
var
−
iU_root = fn.initRoot( (window.configs||fn.defaultConfig).overflow );
+
iU_root = fn.initRoot();
 
if( !iU_root )
 
if( !iU_root )
−
return fn.root_not_found();
+
return inspect.root_not_found();
  
 
var
 
var
−
iU_base = fn.initBase( iU_root );
+
gl = fn.initWebGL( iU_root );
−
Component.prototype.iU_base = iU_base;
+
if( !gl )
 +
inspect.gl_not_supported();
  
 
var
 
var
−
sidebar = new SideBar( iU_root.children[0] );
+
icons = iU_root.children[0].children;
−
iU_root.parentNode.appendChild( sidebar.boot );
+
cover = icons[0],
 +
logo = icons[1],
 +
sponsors = [];
 +
iU_root.removeChild(iU_root.children[0]);
 +
for(var i = 2; i < icons.length; i ++)
 +
sponsors.push( icons[i] );
  
 
var
 
var
−
gl = (window.configs||fn.defaultConfig).webgl || fn.initWebGL( iU_root );
+
loader = new Loader ( iU_root, cover ),
−
if( !gl )
+
nav = new NaviBar( iU_root, logo, sponsors );
−
fn.gl_not_supported();
+
book = new Book( iU_root, nav );
  
−
var
+
for(var i = 0; i < icons.length; i ++)
−
schema = utils.merge( fn.defaultSchema, window.schema||{} );  
+
loader.load(icons[i]);
−
Flow.prototype.schema = schema;
+
 
 +
nav.addPath("project.description");
 +
nav.addPath("project.light to color");
 +
nav.addPath("project.light to odor");
 +
nav.addPath("project.sound to light");
 +
nav.addPath("results.overview");
 +
nav.addPath("results.the rose!");
 +
nav.addPath("results.hardware");
 +
nav.addPath("results.software");
 +
nav.addPath("results.proof & demonstrate");
 +
nav.addPath("results.model");
 +
nav.addPath("results.parts");
 +
nav.addPath("human practice.gift for the world");
 +
nav.addPath("human practice.integrated human practice");
 +
nav.addPath("human practice.public engagement");
 +
nav.addPath("human practice.expert interviews");
 +
nav.addPath("human practice.safety & security");
 +
nav.addPath("human practice.education");
 +
nav.addPath("human practice.collaborations");
 +
nav.addPath("people.meet the team");
 +
nav.addPath("people.arrtibutions");
 +
nav.addPath("people.medal achievement");
 +
nav.addPath("people.notebook");
  
−
var
+
nav.jumpTo("human practice.safety & security");
−
scroll = new Scroll( window.innerHeight );
+
 
while( iU_root.children.length > 0 ){
 
while( iU_root.children.length > 0 ){
 
var
 
var
−
page = iU_root.children[0];
+
node = iU_root.children[0];
−
 
+
node.style.visibility = "hidden";
−
if( (page.tagName||"").toLowerCase() == "div" ){
+
if( (node||{}).tagName == "IMAGE" )
−
var
+
loader.load(node);
−
spacing = page["spacing"] ? page["spacing"].value.split(/\t/): "",
+
book.append( node );
−
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
+
document.addEventListener("DOMMouseScroll", book.scroll, false);
−
offset = window.innerWidth;
+
window.onmousewheel = document.onmousewheel = book.scroll;
−
 
+
book.scroll( {wheelDelta: 0} );
−
var scrollHandler = function( ev ){
+
inspect.displayErrors();
−
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;
 
return igemUCAS;
 
});
 
});

Latest revision as of 10:32, 14 October 2018

/*! 

* igemUCAS JavaScript Library v0.18.1
* 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 = "igemUCAS v0.18.19\n", 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 ) console.log("No errors, Congrats!") else console.log( strErr ); }; garrison.root_not_found = function(){ console.log("DIV igemUCAS does not exist."); garrison.displayErrors(); }; garrison.gl_not_supported = function(){ console.log("WebGL is not supported."); } return garrison; })(),

getUid = (function(){ var now = -1; return function(){ now ++; return (function(n){ return '_'+n+'_'; })(now); }; })(),

configs = { defSpan: 3, scriptPadding: 20, topBlank: 60 };

function css( elem, styles ){ if( !(elem && styles) ) return ;

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 ]; } } function Component( node, cls, width, padding ){ if( typeof node == "string" ){ this.elem = document.createElement(node); this.elem.style.visibility = "hidden"; this.elem.wait = true; } else this.elem = node;

this.elem.id = getUid(); Component.prototype.iU_book.appendChild(this.elem);

this.padding = padding || 0; this.width = width - 2*this.padding;

if(cls) this.elem.className = cls;

if( this.elem.wait ) this.state = "wait"; else this.loaded(); } Component.prototype = { constructor: Component, loaded: function(){ css(this.elem,{"width": this.width+"px"}); this.height= this.elem.offsetHeight; this.state = "unused"; }, place: function(left, top){ this.left = left; this.top = top; this.state= "used"; }, render: function( offsetX ){ css(this.elem, { "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"; } };

function Flow( seq, width, height, top ){ this.seq = seq;

this.width = width; this.height = height; this.top = top;

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 pause = false; while( !pause && this.buffer.length > 0 ){ switch( this.buffer[0].state ){ case "dispose": this.buffer.shift(); break;

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

if( this.page == 0 ) this.page = 1; else if( this.usedW == 0 || this.usedW + comp.width > this.width ){ if( this.frontier + comp.height > this.height ){ this.page += 1; this.frontier = 0; } this.reserve = this.frontier; this.usedW = 0; }

comp.place(this.width * (this.page-1) + this.usedW + comp.padding, this.reserve + this.top); comp.state = "used";

this.usedW += comp.width; this.frontier = Math.max( this.frontier, this.reserve+comp.height );

this.comps.push( comp ); } } }, 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";

this.isVisible = false; }, getBreadth: function(){ return this.page * this.width; }, 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 Book( iU_root, nav ){ this.interface = document.createElement("div"); this.interface.id = "iU_book"; this.nav = nav;

iU_root.parentNode.appendChild( this.interface ); Component.prototype.iU_book = this.interface;

this.flows = []; this.buffer = []; this.nowFlow = null; this.counter = 0;

this.nav = undefined; this.width = 0; this.height = this.interface.clientHeight;

var _this = this; this.offset = 0; this.scroll = function( ev ){ ev = ev || window.event; if( ev.preventDefault ) ev.preventDefault();

_this.offset -= ev.wheelDelta || ev.detail || 0; _this.offset = Math.max(_this.offset, 0); var accum = 0; for(var i = 0; i < _this.flows.length; i ++){ _this.flows[i].render( accum - _this.offset ); accum += _this.flows[i].getBreadth(); } } } Book.prototype = { constructor: Book, alloc: function( span ){ this.buffer.push(new Flow( this.counter++, Math.round(window.innerWidth * span / 9), this.height - configs.topBlank, configs.topBlank ) ); }, forward: function(){ if( this.buffer.length == 0 ) this.alloc( configs.defSpan ); this.nowFlow = this.buffer.shift(); this.flows.push(this.nowFlow); return this.nowFlow; }, append: function( node ){ switch( ((node||{}).tagName||"").toLowerCase() ){ case "p": case "span": this.script(node); break; case "b": this.title(node); break; case "img": case "video": this.image(node); break; case "dfn": this.special(node);break; case "pre": this.formula(node); break; default: node.parentNode.removeChild(node); break; } }, script: function( node ){ var target = this.nowFlow || this.forward(); for(var i = 0, i_len = node.childNodes.length; i < i_len; i ++){ var e = node.childNodes[i]; if( !e.attributes ){ var child = document.createElement("span"); child.className = "script"; child.innerHTML = e.textContent; node.replaceChild(child, e); } } target.buffer.push( new Component(node, "script", target.width, configs.scriptPadding )); }, title: function( node ){ var target = this.forward(); target.buffer.push( new Component(node, "title", target.width, configs.scriptPadding )); }, image: function( node ){ var target = this.nowFlow || this.forward(), box = document.createElement("div"), comp = new Component(node, "title", target.width, configs.scriptPadding ); node.comp = comp; target.buffer.push( comp ); }, special:function( node ){ node.parentNode.removeChild(node); }, formula: function( node ){ node.parentNode.removeChild(node); } };

function NaviBar( iU_root, logo, sponsors ){ this.surface = document.createElement("div"); iU_root.parentNode.appendChild( this.surface );

this.headings = []; this.init(logo, sponsors);

this.fstNow = 0; this.secNow = 0; this.subheading= null; } NaviBar.prototype = { constructor: NaviBar, init: function( logo, sponsors ){ this.surface.id = "NaviBar"; this.header = document.createElement("div"); this.header.id = "header";

logo.id = "logo"; this.header.appendChild( logo );

this.ptrH = document.createElement("div"), this.ptrH.id = "heading pointer"; this.ptrH.className = "arrow"; css(this.ptrH,{ "visibility": "hidden", "position": "absolute" }); this.header.appendChild( this.ptrH );


this.ptrS = document.createElement("div"); this.ptrS.id = "subheading pointer"; this.ptrS.className = "arrow"; css(this.ptrS,{ "visibility": "hidden", "position": "absolute" }); this.header.appendChild( this.ptrS );

this.surface.appendChild( this.header);

var footer = document.createElement("div"); footer.id = "footer"; this.surface.appendChild(footer);

var strSponsors = document.createElement("span"); strSponsors.innerHTML = "Sponsors"; strSponsors.id = "strSponsors"; footer.appendChild(strSponsors);

for(var i = 0; i < sponsors.length; i ++){ sponsors[i].className = "sponsor"; footer.appendChild(sponsors[i]); } }, jumpTo: function( path ){ if( !path ) return false;

var tarF, tarS; if( typeof path == "string" ){ var sep = path.split(/\s*\.\s*/); if( !sep[0] ) return false;

var fst = sep[0].toUpperCase(), h = this.headings, s = null;

for(var i = 0; i < h.length; i ++){ if( h[i].innerHTML == fst ){ tarF = i; s = h[i]._catalog.children; } } if( !s ) return false;

if(sep[1]){ var sec = sep[1].toUpperCase(); for(var i = 0; i < s.length; i ++) if( s[i].innerHTML == sec ) tarS = i; } else tarS = 0; } else{ tarF = path[0]; tarS = path[1]; if(!(tarF === +tarF && tarS === +tarS)) return false; }

var fstElem = this.headings[ tarF ], t = fstElem.offsetTop + fstElem.clientHeight - 3, l = fstElem.offsetLeft + fstElem.clientWidth*0.5 - 5;

css(this.ptrH,{ "top": Math.round(t) + "px", "left": Math.round(l) + "px", "visibility": "visible" });

if(this.subheading) this.subheading.className = "HiddenCatalog";

this.subheading = h[ tarF ]._catalog; this.subheading.className = "VisibleCatalog"

return true; }, addPath: function( path, jumpFunc ){ var sep = path.split(/\s*\.\s*/); if( !(sep[0] && sep[1]) ) return false;

var fst = sep[0].toUpperCase(), sec = sep[1].toUpperCase(), _this = this, h = this.headings, target = null;

for(var i = 0; i < h.length; i ++) if( h[i].innerHTML == fst ) target = h[i];

if( !target ){ target = document.createElement("span"); target.className = "H1"; target.innerHTML = fst;

target._catalog = document.createElement("div"); target._catalog.className = "HiddenCatalog"; this.header.appendChild(target._catalog);

target.addEventListener("mousedown",(function(fst, target){ return function(){ _this.jumpTo( fst ); if(_this.subheading) _this.subheading.className = "HiddenCatalog";

_this.subheading = target._catalog; _this.subheading.className = "VisibleCatalog"; }; })(fst, target) );

this.header.appendChild(target); this.headings.push(target);

var accum = [ 0 ]; for(var i = 0; i < this.headings.length; i ++) accum[i+1] = accum[i] + this.headings[i].clientWidth + 60;

var left = Math.round(window.innerWidth * 0.6 - accum.pop()/2); for(var i = 0; i < this.headings.length; i ++) css(this.headings[i],{ "left": (left + accum[i]) + "px" }); }

var s = target._catalog.children; for(var i = 0; i < s.length; i ++) if( s[i].innerHTML == sec ){ s[i]._jumpFunc = jumpFunc; return true; }

var subheading = document.createElement("span"); subheading.className = "H2"; subheading.innerHTML = sec; subheading._jumpFunc = jumpFunc; subheading.addEventListener("mouseover",function(){ _this.jumpTo( path ); }); target._catalog.appendChild(subheading);

var accum = [ 0 ]; for(var i = 0; i < s.length; i ++) accum[i+1] = accum[i] + s[i].clientWidth + 60;

var left = Math.round(window.innerWidth * 0.6 - accum.pop()/2); for(var i = 0; i < s.length; i ++) css(s[i],{ "left": (left + accum[i]) + "px" }); return true; } };

function Loader( iU_root, cover ){ this.boot = document.createElement("div"); this.boot.id = "loader"; iU_root.parentNode.appendChild( this.boot );

this.total = 0; this.loaded = 0; this.failed = 0;

var _this = this; this.load = function( img ){ if( !img.height ){ img.onload = function(){ _this.loaded ++; if(img.comp) img.comp.state = "unused"; }; img.onerr = function(){ _this.failed ++; if(img.comp) img.comp.state = "dispose"; }; img.wait = true; _this.total ++; } }; } Loader.prototype.constructor = Loader;

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";


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) css(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; } };

function igemUCAS(){ var iU_root = fn.initRoot(); if( !iU_root ) return inspect.root_not_found();

var gl = fn.initWebGL( iU_root ); if( !gl ) inspect.gl_not_supported();

var icons = iU_root.children[0].children; cover = icons[0], logo = icons[1], sponsors = []; iU_root.removeChild(iU_root.children[0]); for(var i = 2; i < icons.length; i ++) sponsors.push( icons[i] );

var loader = new Loader ( iU_root, cover ), nav = new NaviBar( iU_root, logo, sponsors ); book = new Book( iU_root, nav );

for(var i = 0; i < icons.length; i ++) loader.load(icons[i]);

nav.addPath("project.description"); nav.addPath("project.light to color"); nav.addPath("project.light to odor"); nav.addPath("project.sound to light"); nav.addPath("results.overview"); nav.addPath("results.the rose!"); nav.addPath("results.hardware"); nav.addPath("results.software"); nav.addPath("results.proof & demonstrate"); nav.addPath("results.model"); nav.addPath("results.parts"); nav.addPath("human practice.gift for the world"); nav.addPath("human practice.integrated human practice"); nav.addPath("human practice.public engagement"); nav.addPath("human practice.expert interviews"); nav.addPath("human practice.safety & security"); nav.addPath("human practice.education"); nav.addPath("human practice.collaborations"); nav.addPath("people.meet the team"); nav.addPath("people.arrtibutions"); nav.addPath("people.medal achievement"); nav.addPath("people.notebook");

nav.jumpTo("human practice.safety & security");

while( iU_root.children.length > 0 ){ var node = iU_root.children[0]; node.style.visibility = "hidden"; if( (node||{}).tagName == "IMAGE" ) loader.load(node); book.append( node ); }

document.addEventListener("DOMMouseScroll", book.scroll, false); window.onmousewheel = document.onmousewheel = book.scroll; book.scroll( {wheelDelta: 0} ); inspect.displayErrors(); } return igemUCAS; });