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

m
m (Replaced content with "alert(1);")
Line 1: Line 1:
/*!
+
alert(1);
* 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;
+
}
+
alert(this.reserve+" "+this.padding);
+
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 ){
+
alert(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;
+
});
+

Revision as of 13:20, 9 October 2018

alert(1);