|
|
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;
| + | |
− | });
| + | |