[1] | 1 | /**
|
---|
| 2 | * cvi_busy_lib.js 1.3 (14-Aug-2010) (c) by Christian Effenberger
|
---|
| 3 | * All Rights Reserved. Source: busy.netzgesta.de
|
---|
| 4 | * Distributed under Netzgestade Software License Agreement.
|
---|
| 5 | * This license permits free of charge use on non-commercial
|
---|
| 6 | * and private web sites only under special conditions.
|
---|
| 7 | * Read more at... http://www.netzgesta.de/cvi/LICENSE.txt
|
---|
| 8 | * syntax:
|
---|
| 9 |
|
---|
| 10 | Add:
|
---|
| 11 | OBJECT = getBusyOverlay(parent[,overlay[,busy]]);
|
---|
| 12 |
|
---|
| 13 | parent == element to add the overlay (e.g. document.getElementById(id) or 'viewport')
|
---|
| 14 |
|
---|
| 15 | overlay == OBJECT e.g. {color: 'black', opacity: 0.5, ...}
|
---|
| 16 | color == STR 'black' or '#000000' or 'rgb(0,0,0)' Default: 'white'
|
---|
| 17 | opacity == FLOAT 0.0 - 1.0 Default: 0.0
|
---|
| 18 | text == STR e.g. "loading" Default: ''
|
---|
| 19 | style == STR e.g. "color: black;" or "my_text_class" Default: ''
|
---|
| 20 |
|
---|
| 21 | busy == OBJECT e.g. {color: '#fff', size: 48, ...}
|
---|
| 22 | color == STR '#000000' - '#ffffff' or '#000' - '#fff' Default: '#000'
|
---|
| 23 | size == INT 16 - 512 (pixel) Default: 32
|
---|
| 24 | type == STR 'circle|oval|polygon|rectangle|tube' or 'c|o|p|r|t' Default: 'tube'
|
---|
| 25 | iradius == INT 6 - 254 (pixel) Default: 8
|
---|
| 26 | weight == INT 1 - 254 (pixel) Default: 3
|
---|
| 27 | count == INT 5 - 36 (rays) Default: 12
|
---|
| 28 | speed == INT 30 - 1000 (millisec) Default: 96
|
---|
| 29 | minopac == FLOAT 0.0 - 0.5 Default: 0.25
|
---|
| 30 |
|
---|
| 31 | Remove:
|
---|
| 32 | OBJECT.remove();
|
---|
| 33 |
|
---|
| 34 | Set Overlay text:
|
---|
| 35 | OBJECT.settext(string);
|
---|
| 36 |
|
---|
| 37 | *
|
---|
| 38 | **/
|
---|
| 39 |
|
---|
| 40 | function onIEWinResize(event) {
|
---|
| 41 | function parseWidth(val) {return (isNaN(parseInt(val,10))?0:parseInt(val,10));}
|
---|
| 42 | if(!event) {event=window.event;} var i,cs,parent=this, div=parent.getElementsByTagName("div");
|
---|
| 43 | if(div.length>0) {if(parent.currentStyle){cs=parent.currentStyle;}else if(document.defaultView&&document.defaultView.getComputedStyle){cs=document.defaultView.getComputedStyle(parent,"");}else{cs=parent.style;}
|
---|
| 44 | for(i=0; i<div.length; i++) {if(div[i].className=='buzy_ele') {
|
---|
| 45 | div[i].style.height=(parent.offsetHeight-parseWidth(cs.borderBottomWidth)-parseWidth(cs.borderTopWidth));
|
---|
| 46 | div[i].style.width=(parent.offsetWidth-parseWidth(cs.borderLeftWidth)-parseWidth(cs.borderRightWidth));
|
---|
| 47 | div[i].firstChild.style.height=div[i].style.height; div[i].firstChild.style.width=div[i].style.width;
|
---|
| 48 | break;
|
---|
| 49 | }
|
---|
| 50 | }
|
---|
| 51 | }
|
---|
| 52 | }
|
---|
| 53 | function onIEVPResize(event) {
|
---|
| 54 | if(!event) {event=window.event;} var vp=document.getElementById('viewport'); if(vp) {
|
---|
| 55 | if(typeof document.documentElement!='undefined') {vp.style.width=document.documentElement.clientWidth+'px'; vp.style.height=document.documentElement.clientHeight+'px';}
|
---|
| 56 | else {vp.style.width=document.getElementsByTagName('body')[0].clientWidth+'px'; vp.style.height=document.getElementsByTagName('body')[0].clientHeight+'px';}
|
---|
| 57 | }
|
---|
| 58 | }
|
---|
| 59 | function onIEVPScroll(event) {
|
---|
| 60 | if(!event) {event=window.event;} var vp=document.getElementById('viewport'); if(vp) {
|
---|
| 61 | if(typeof document.documentElement!='undefined') {vp.style.left=document.documentElement.scrollLeft+'px'; vp.style.top=document.documentElement.scrollTop+'px';}
|
---|
| 62 | else {vp.style.left=document.getElementsByTagName('body')[0].scrollLeft+'px'; vp.style.top=document.getElementsByTagName('body')[0].scrollTop+'px';}
|
---|
| 63 | }
|
---|
| 64 | }
|
---|
| 65 | function getBusyOverlay(parent,overlay,busy) {
|
---|
| 66 | if((typeof(parent)==='object' || parent=='viewport') && document.getElementsByTagName) {
|
---|
| 67 | function parseWidth(val) {return (isNaN(parseInt(val,10))?0:parseInt(val,10));}
|
---|
| 68 | var isIE,isVL,isCV,isWK,isGE,i,b,o,lt,rt,lb,rb,cz,cs,size,viewport,inner,outer,string,canvas,context,ctrl,opacity,color,text,styles,waiting=true;
|
---|
| 69 | if(parent=='viewport') {viewport=document.getElementById('viewport');
|
---|
| 70 | if(!viewport) {viewport=document.createElement('div'); viewport.id='viewport'; cz=viewport.style;
|
---|
| 71 | cz.backgroundColor='transparent'; cz.position='fixed'; cz.overflow='hidden';
|
---|
| 72 | cz.display='block'; cz.zIndex=999999; cz.left='0px'; cz.top='0px'; cz.zoom=1;
|
---|
| 73 | cz.width='100%'; cz.height='100%'; cz.margin='0px'; cz.padding='0px';
|
---|
| 74 | if(document.all&&!window.opera&&!window.XMLHttpRequest&&(!document.documentMode||document.documentMode<9)) {cz.position='absolute';
|
---|
| 75 | if(typeof document.documentElement!='undefined') {cz.width=document.documentElement.clientWidth+'px'; cz.height=document.documentElement.clientHeight+'px';}
|
---|
| 76 | else {cz.width=document.getElementsByTagName('body')[0].clientWidth+'px'; cz.height=document.getElementsByTagName('body')[0].clientHeight+'px';}
|
---|
| 77 | }document.getElementsByTagName("body")[0].appendChild(viewport);
|
---|
| 78 | }else {viewport.style.display='block';
|
---|
| 79 | if(document.all&&!window.opera&&!window.XMLHttpRequest&&(!document.documentMode||document.documentMode<9)) {
|
---|
| 80 | if(typeof document.documentElement!='undefined') {viewport.style.width=document.documentElement.clientWidth+'px'; viewport.style.height=document.documentElement.clientHeight+'px';}
|
---|
| 81 | else {viewport.style.width=document.getElementsByTagName('body')[0].clientWidth+'px'; viewport.style.height=document.getElementsByTagName('body')[0].clientHeight+'px';}
|
---|
| 82 | }
|
---|
| 83 | }parent=viewport;
|
---|
| 84 | }
|
---|
| 85 | if(parent.currentStyle){cs=parent.currentStyle;}else if(document.defaultView&&document.defaultView.getComputedStyle){cs=document.defaultView.getComputedStyle(parent,"");}else{cs=parent.style;}
|
---|
| 86 | while(cs.display.search(/block|inline-block|table|inline-table|list-item/i)<0) {parent=parent.parentNode; if(parent.currentStyle){cs=parent.currentStyle;}else if(document.defaultView&&document.defaultView.getComputedStyle){cs=document.defaultView.getComputedStyle(parent,"");}else{cs=parent.style;} if(parent.tagName.toUpperCase()=='BODY') {parent="";}}
|
---|
| 87 | if(typeof(parent)==='object') {
|
---|
| 88 | if(!overlay) {overlay=new Object(); overlay['opacity']=0; overlay['color']='white'; overlay['text']=''; overlay['style']='';}
|
---|
| 89 | if(!busy) {busy=new Object(); busy['size']=32; busy['color']='#000'; busy['type']='tube'; busy['iradius']=8; busy['weight']=3; busy['count']=12; busy['speed']=96; busy['minopac']=.25;}
|
---|
| 90 | opacity=Math.max(0.0,Math.min(1.0,(typeof overlay['opacity']==='number'?overlay['opacity']:0)||0)); color=(typeof overlay['color']==='string'?overlay['color']:'white');
|
---|
| 91 | text=(typeof overlay['text']==='string'?overlay['text']:''); styles=(typeof overlay['style']==='string'?overlay['style']:'');
|
---|
| 92 | canvas=document.createElement("canvas"); isCV=canvas.getContext?1:0;
|
---|
| 93 | isWK=navigator.userAgent.indexOf('WebKit')>-1?1:0; isGE=navigator.userAgent.indexOf('Gecko')>-1&&window.updateCommands?1:0;
|
---|
| 94 | isIE=navigator.appName=='Microsoft Internet Explorer'&&window.navigator.systemLanguage&&!window.opera&&(!document.documentMode||document.documentMode<9)?1:0;
|
---|
| 95 | isVL=document.all&&document.namespaces&&(!document.documentMode||document.documentMode<9)?1:0; outer=document.createElement('div'); parent.style.position=(cs.position=='static'?'relative':cs.position);
|
---|
| 96 | cz=parent.style.zIndex>=0?(parent.style.zIndex-0+2):2; if(isIE && !cs.hasLayout) {parent.style.zoom=1;}
|
---|
| 97 | outer.style.position='absolute'; outer.style.overflow='hidden'; outer.style.display='block'; outer.style.zIndex=cz;
|
---|
| 98 | outer.style.left=0+'px'; outer.style.top=0+'px'; outer.style.width='100%'; outer.style.height='100%';
|
---|
| 99 | if(isIE) {outer.className='buzy_ele'; outer.style.zoom=1; outer.style.margin='0px'; outer.style.padding='0px'; outer.style.height=(parent.offsetHeight-parseWidth(cs.borderBottomWidth)-parseWidth(cs.borderTopWidth)); outer.style.width=(parent.offsetWidth-parseWidth(cs.borderLeftWidth)-parseWidth(cs.borderRightWidth));}
|
---|
| 100 | if(typeof(cs.borderRadius)=="undefined"){
|
---|
| 101 | if(typeof(cs.MozBorderRadius)!="undefined"){
|
---|
| 102 | lt=parseFloat(cs.MozBorderRadiusTopleft)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderTopWidth));
|
---|
| 103 | rt=parseFloat(cs.MozBorderRadiusTopright)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderTopWidth));
|
---|
| 104 | lb=parseFloat(cs.MozBorderRadiusBottomleft)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderBottomWidth));
|
---|
| 105 | rb=parseFloat(cs.MozBorderRadiusBottomright)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderBottomWidth));
|
---|
| 106 | outer.style.MozBorderRadiusTopleft=lt+"px"; outer.style.MozBorderRadiusTopright=rt+"px"; outer.style.MozBorderRadiusBottomleft=lb+"px"; outer.style.MozBorderRadiusBottomright=rb+"px";
|
---|
| 107 | }else if(typeof(cs.WebkitBorderRadius)!="undefined"){
|
---|
| 108 | lt=parseFloat(cs.WebkitBorderTopLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderTopWidth));
|
---|
| 109 | rt=parseFloat(cs.WebkitBorderTopRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderTopWidth));
|
---|
| 110 | lb=parseFloat(cs.WebkitBorderBottomLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderBottomWidth));
|
---|
| 111 | rb=parseFloat(cs.WebkitBorderBottomRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderBottomWidth));
|
---|
| 112 | outer.style.WebkitBorderTopLeftRadius=lt+"px"; outer.style.WebkitBorderTopRightRadius=rt+"px"; outer.style.WebkitBorderBottomLeftRadius=lb+"px"; outer.style.WebkitBorderBottomRightRadius=rb+"px";
|
---|
| 113 | }
|
---|
| 114 | }else {
|
---|
| 115 | lt=parseFloat(cs.borderTopLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderTopWidth));
|
---|
| 116 | rt=parseFloat(cs.borderTopRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderTopWidth));
|
---|
| 117 | lb=parseFloat(cs.borderBottomLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderBottomWidth));
|
---|
| 118 | rb=parseFloat(cs.borderBottomRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderBottomWidth));
|
---|
| 119 | outer.style.borderTopLeftRadius=lt+"px"; outer.style.borderTopRightRadius=rt+"px"; outer.style.borderBottomLeftRadius=lb+"px"; outer.style.borderBottomRightRadius=rb+"px";
|
---|
| 120 | }
|
---|
| 121 | parent.appendChild(outer); inner=document.createElement('div');
|
---|
| 122 | inner.style.position='absolute'; inner.style.cursor='progress'; inner.style.display='block';
|
---|
| 123 | inner.style.zIndex=(cz-1); inner.style.left=0+'px'; inner.style.top=0+'px';
|
---|
| 124 | inner.style.width=100+'%'; inner.style.height=100+'%'; inner.style.backgroundColor=color;
|
---|
| 125 | if(isIE) {inner.style.zoom=1; inner.style.margin='0px'; inner.style.padding='0px'; inner.style.height=outer.style.height; inner.style.width=outer.style.width; }
|
---|
| 126 | if(typeof(cs.borderRadius)=="undefined"){
|
---|
| 127 | if(typeof(cs.MozBorderRadius)!="undefined"){inner.style.MozBorderRadiusTopleft=lt+"px"; inner.style.MozBorderRadiusTopright=rt+"px"; inner.style.MozBorderRadiusBottomleft=lb+"px"; inner.style.MozBorderRadiusBottomright=rb+"px";}else
|
---|
| 128 | if(typeof(cs.WebkitBorderRadius)!="undefined"){inner.style.WebkitBorderTopLeftRadius=lt+"px"; inner.style.WebkitBorderTopRightRadius=rt+"px"; inner.style.WebkitBorderBottomLeftRadius=lb+"px"; inner.style.WebkitBorderBottomRightRadius=rb+"px";}
|
---|
| 129 | }else {inner.style.borderTopLeftRadius=lt+"px"; inner.style.borderTopRightRadius=rt+"px"; inner.style.borderBottomLeftRadius=lb+"px"; inner.style.borderBottomRightRadius=rb+"px";}
|
---|
| 130 | if(isIE) {inner.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+parseInt(opacity*100)+")";}else {inner.style.opacity=opacity;}
|
---|
| 131 | outer.appendChild(inner); size=Math.max(16,Math.min(512,(typeof busy['size']==='number'?(busy['size']==0?32:busy['size']):32)));
|
---|
| 132 | if(isVL){
|
---|
| 133 | if(document.namespaces['v']==null) {
|
---|
| 134 | var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet();
|
---|
| 135 | for(i=0; i<e.length; i++) {s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");} document.namespaces.add("v","urn:schemas-microsoft-com:vml");
|
---|
| 136 | }
|
---|
| 137 | }
|
---|
| 138 | if(!isCV){canvas=document.createElement("div");}
|
---|
| 139 | canvas.style.position='absolute'; canvas.style.cursor='progress'; canvas.style.zIndex=(cz-0+1);
|
---|
| 140 | canvas.style.top='50%'; canvas.style.left='50%'; canvas.style.marginTop='-'+(size/2)+'px'; canvas.style.marginLeft='-'+(size/2)+'px';
|
---|
| 141 | canvas.width=size; canvas.height=size; canvas.style.width=size+"px"; canvas.style.height=size+"px";
|
---|
| 142 | outer.appendChild(canvas);
|
---|
| 143 | if(text!=""){
|
---|
| 144 | string=document.createElement('div'); string.style.position='absolute'; string.style.overflow='hidden';
|
---|
| 145 | string.style.cursor='progress'; string.style.zIndex=(cz-0+1); string.style.top='50%'; string.style.left='0px';
|
---|
| 146 | string.style.marginTop=2+(size/2)+'px'; string.style.textAlign='center'; string.style.width=100+'%'; string.style.height='auto';
|
---|
| 147 | if(styles!="") {string.innerHTML='<span '+(styles.match(/:/i)?'style':'class')+'="'+styles+'">'+text+'</span>';}
|
---|
| 148 | else {string.innerHTML='<span>'+text+'</span>';} outer.appendChild(string);
|
---|
| 149 | }
|
---|
| 150 | if(isGE){outer.style.MozUserSelect="none"; inner.style.MozUserSelect="none"; canvas.style.MozUserSelect="none";}else
|
---|
| 151 | if(isWK){outer.style.KhtmlUserSelect="none"; inner.style.KhtmlUserSelect="none"; canvas.style.KhtmlUserSelect="none";}else
|
---|
| 152 | if(isIE){outer.unselectable="on"; inner.unselectable="on"; canvas.unselectable="on";}
|
---|
| 153 | if(isVL){ctrl=getBusyVL(canvas,busy['color'],busy['size'],busy['type'],busy['iradius'],busy['weight'],busy['count'],busy['speed'],busy['minopac']); ctrl.start();}else
|
---|
| 154 | if(isCV){ctrl=getBusyCV(canvas.getContext("2d"),busy['color'],busy['size'],busy['type'],busy['iradius'],busy['weight'],busy['count'],busy['speed'],busy['minopac']); ctrl.start();}
|
---|
| 155 | else {ctrl=getBusy(canvas,busy['color'],busy['size'],busy['type'],busy['iradius'],busy['weight'],busy['count'],busy['speed'],busy['minopac']); ctrl.start();}
|
---|
| 156 | if(isIE) {parent.onresize=onIEWinResize; if(parent.id=='viewport'&&!window.XMLHttpRequest) {window.onresize=onIEVPResize; window.onscroll=onIEVPScroll;}}
|
---|
| 157 | return {
|
---|
| 158 | remove: function (){if(waiting){waiting=false; ctrl.stop(); delete ctrl; parent.removeChild(outer); if(parent.id=='viewport') {parent.style.display='none';}}},
|
---|
| 159 | settext: function (v){if(string&&typeof(v)=='string') {string.firstChild.innerHTML=v; return false;}}
|
---|
| 160 | };
|
---|
| 161 | }
|
---|
| 162 | }
|
---|
| 163 | }
|
---|
| 164 | function getBusy(obj,cl,sz,tp,ir,w,ct,sp,mo) {
|
---|
| 165 | function getHEX(v) {var col=v||'#000000';
|
---|
| 166 | if(!col.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {
|
---|
| 167 | if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f]$/i)) {col='#'+v.substr(1,1)+v.substr(1,1)+v.substr(2,1)+v.substr(2,1)+v.substr(3,1)+v.substr(3,1);}
|
---|
| 168 | }return col;
|
---|
| 169 | }
|
---|
| 170 | var running=false,i=0,os=0,al=0,f=100,c,h,p,t,x,y,v,hp,ph,sh,ele=new Array();
|
---|
| 171 | c=getHEX(cl); tp=tp||"t"; t=(tp.match(/^[coprt]/i)?tp.substr(0,1).toLowerCase():'t');
|
---|
| 172 | ct=Math.max(5,Math.min(36,ct||12)); sp=Math.max(30,Math.min(1000,sp||96));
|
---|
| 173 | sz=Math.max(16,Math.min(512,sz||32)); ir=Math.max(1,Math.min((sz/2)-2,ir||sz/4));
|
---|
| 174 | w=Math.max(1,Math.min((sz/2)-ir,w||sz/10)); mo=Math.max(0,Math.min(0.5,mo||0.25));
|
---|
| 175 | al=360/ct; hp=(Math.PI/2)*-1; ph=Math.PI/180; w=(t!='c'?parseInt((w/2)*3):w); v=parseInt((sz/2)-(w/2));
|
---|
| 176 | for(i=0;i<ct;i++) {
|
---|
| 177 | sh=document.createElement('div'); x=Math.round(v+v*Math.cos(hp+(i+1)*al*ph)); y=Math.round(v+v*Math.sin(hp+(i+1)*al*ph));
|
---|
| 178 | sh.style.position='absolute'; sh.style.margin='0px'; sh.style.width=w+'px'; sh.style.height=w+'px';
|
---|
| 179 | sh.style.lineHeight='1px'; sh.style.fontSize='0px'; sh.style.top=y+'px'; sh.style.left=x+'px'; sh.style.backgroundColor=c;
|
---|
| 180 | if(document.all&&!window.opera&&(!document.documentMode||document.documentMode<9)) {sh.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+parseInt(Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))*100)+")";}else {sh.style.opacity=Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))));}
|
---|
| 181 | obj.appendChild(sh); ele[i]=sh;
|
---|
| 182 | }
|
---|
| 183 | function nextLoop(){
|
---|
| 184 | if(!running) {return;} os=(os+1)%ct;
|
---|
| 185 | if(document.all&&!window.opera&&(!document.documentMode||document.documentMode<9)) {for(i=0;i<ct;i++){al=((os+i)%ct); ele[al].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+parseInt(Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))*100)+")";}}
|
---|
| 186 | else {for(i=0;i<ct;i++){al=((os+i)%ct); ele[al].style.opacity=Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))));}}
|
---|
| 187 | setTimeout(nextLoop,sp);
|
---|
| 188 | }
|
---|
| 189 | nextLoop(0);
|
---|
| 190 | return {
|
---|
| 191 | start: function (){if(!running){running=true; nextLoop(0);}},
|
---|
| 192 | stop: function (){running=false; for(i=0;i<ct;i++) {if(document.all&&!window.opera&&(!document.documentMode||document.documentMode<9)) {ele[i].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)";}else {ele[i].setAttribute('opacity',0);}}},
|
---|
| 193 | pause: function (){running=false; }
|
---|
| 194 | };
|
---|
| 195 | }
|
---|
| 196 | function getBusyVL(obj,cl,sz,tp,ir,w,ct,sp,mo) {
|
---|
| 197 | function getHEX(v) {var col=v||'#000000';
|
---|
| 198 | if(!col.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {
|
---|
| 199 | if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f]$/i)) {col='#'+v.substr(1,1)+v.substr(1,1)+v.substr(2,1)+v.substr(2,1)+v.substr(3,1)+v.substr(3,1);}
|
---|
| 200 | }return col;
|
---|
| 201 | }
|
---|
| 202 | var running=false,os=0,al=0,f=100,c,i,h,p,t,x,y,hs,qs,hw,qw,rp,sh,fl,ele=new Array();
|
---|
| 203 | c=getHEX(cl); tp=tp||"t"; t=(tp.match(/^[coprt]/i)?tp.substr(0,1).toLowerCase():'t');
|
---|
| 204 | ct=Math.max(5,Math.min(36,ct||12)); sp=Math.max(30,Math.min(1000,sp||96));
|
---|
| 205 | sz=Math.max(16,Math.min(512,sz||32)); ir=Math.max(1,Math.min((sz/2)-2,ir||sz/4));
|
---|
| 206 | w=Math.max(1,Math.min((sz/2)-ir,w||sz/10)); mo=Math.max(0,Math.min(0.5,mo||0.25));
|
---|
| 207 | h=(sz/2)-ir; x=sz/2; y=x; al=360/ct; hs=parseInt((sz/2)*f); qs=parseInt(hs/2);
|
---|
| 208 | hw=parseInt((w/2)*f); qw=parseInt(hw/2); rp=hs-parseInt(ir*f);
|
---|
| 209 | switch(t) {
|
---|
| 210 | case "c": p='m '+hs+','+(rp-hw)+' ar '+(hs-hw)+','+(rp-hw-hw)+','+(hs+hw)+','+rp+','+(hs-hw)+','+(rp-hw-hw)+','+(hs-hw)+','+(rp-hw-hw)+' e'; break;
|
---|
| 211 | case "p": p='m '+(hs-qw)+',0 l '+(hs-hw)+','+rp+','+(hs+hw)+','+rp+','+(hs+qw)+',0 x e'; break;
|
---|
| 212 | case "o": p='m '+hs+','+(rp-qs)+' ar '+(hs-hw)+',0,'+(hs+hw)+','+rp+','+(hs-hw)+',0,'+(hs-hw)+',0 e'; break;
|
---|
| 213 | case "t": p='m '+(hs-hw)+','+rp+' l '+(hs-hw)+','+hw+' qy '+hs+',0 qx '+(hs+hw)+','+hw+' l '+(hs+hw)+','+rp+' x e'; break;
|
---|
| 214 | default: p='m '+(hs-hw)+',0 l '+(hs-hw)+','+rp+','+(hs+hw)+','+rp+','+(hs+hw)+',0 x e'; break;
|
---|
| 215 | }
|
---|
| 216 | for(i=0;i<ct;i++) {
|
---|
| 217 | sh=document.createElement('v:shape'); sh.setAttribute('filled','t'); sh.setAttribute('stroked','f');
|
---|
| 218 | sh.setAttribute('coordorigin','0,0'); sh.setAttribute('coordsize',(sz*f)+','+(sz*f));
|
---|
| 219 | sh.setAttribute('path',p); sh.style.rotation=(i*al); sh.style.position='absolute'; sh.style.margin='0px';
|
---|
| 220 | sh.style.width=sz+'px'; sh.style.height=sz+'px'; sh.style.top='-1px'; sh.style.left='-1px';
|
---|
| 221 | obj.appendChild(sh); fl=document.createElement('v:fill');
|
---|
| 222 | fl.setAttribute('opacity',Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1)))));
|
---|
| 223 | fl.setAttribute('color',c); sh.appendChild(fl); ele[i]=fl;
|
---|
| 224 | }
|
---|
| 225 | function nextLoop(){
|
---|
| 226 | if(!running) {return;} os=(os+1)%ct;
|
---|
| 227 | if(document.documentMode==8) {
|
---|
| 228 | for(i=0;i<ct;i++) {al=((os+i)%ct); ele[al].opacity=Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))));}
|
---|
| 229 | }else {
|
---|
| 230 | for(i=0;i<ct;i++) {al=((os+i)%ct); ele[al].setAttribute('opacity',Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1)))));}
|
---|
| 231 | }
|
---|
| 232 | setTimeout(nextLoop,sp);
|
---|
| 233 | }
|
---|
| 234 | nextLoop(0);
|
---|
| 235 | return {
|
---|
| 236 | start: function (){if(!running){running=true; nextLoop(0);}},
|
---|
| 237 | stop: function (){running=false; for(i=0;i<ct;i++) {ele[i].setAttribute('opacity',0);}},
|
---|
| 238 | pause: function (){running=false; }
|
---|
| 239 | };
|
---|
| 240 | }
|
---|
| 241 | function getBusyCV(ctx,cl,sz,tp,ir,w,ct,sp,mo) {
|
---|
| 242 | function getRGB(v){
|
---|
| 243 | function hex2dec(h){return(Math.max(0,Math.min(parseInt(h,16),255)));}
|
---|
| 244 | var r=0,g=0,b=0; v=v||'#000'; if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f]$/i)) {
|
---|
| 245 | r=hex2dec(v.substr(1,1)+v.substr(1,1)),g=hex2dec(v.substr(2,1)+v.substr(2,1)),b=hex2dec(v.substr(3,1)+v.substr(3,1));
|
---|
| 246 | }else if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {
|
---|
| 247 | r=hex2dec(v.substr(1,2)),g=hex2dec(v.substr(3,2)),b=hex2dec(v.substr(5,2));
|
---|
| 248 | } return r+','+g+','+b;
|
---|
| 249 | }
|
---|
| 250 | function drawOval(ctx,w,h){ctx.beginPath(); ctx.moveTo(-w/2,h/2); ctx.quadraticCurveTo(-w/2,0,0,0); ctx.quadraticCurveTo(w/2,0,w/2,h/2); ctx.quadraticCurveTo(w/2,h,0,h); ctx.quadraticCurveTo(-w/2,h,-w/2,h/2); ctx.fill();}
|
---|
| 251 | function drawTube(ctx,w,h){ctx.beginPath(); ctx.moveTo(w/2,0); ctx.lineTo(-w/2,0); ctx.lineTo(-w/2,h-(w/2)); ctx.quadraticCurveTo(-w/2,h,0,h); ctx.quadraticCurveTo(w/2,h,w/2,h-(w/2)); ctx.fill();}
|
---|
| 252 | function drawPoly(ctx,w,h){ctx.beginPath(); ctx.moveTo(w/2,0); ctx.lineTo(-w/2,0); ctx.lineTo(-w/4,h); ctx.lineTo(w/4,h); ctx.fill();}
|
---|
| 253 | function drawCirc(ctx,r,z){ctx.beginPath(); ctx.arc(r,r,r,0,Math.PI*2,false); ctx.fill();}
|
---|
| 254 | var running=false,os=0,al=0,c,i,h,t,x,y;
|
---|
| 255 | c=getRGB(cl); tp=tp||"t"; t=(tp.match(/^[coprt]/i)?tp.substr(0,1).toLowerCase():'t');
|
---|
| 256 | ct=Math.max(5,Math.min(36,ct||12)); sp=Math.max(30,Math.min(1000,sp||96));
|
---|
| 257 | sz=Math.max(16,Math.min(512,sz||32)); ir=Math.max(1,Math.min((sz/2)-2,ir||sz/4));
|
---|
| 258 | w=Math.max(1,Math.min((sz/2)-ir,w||sz/10)); mo=Math.max(0,Math.min(0.5,mo||0.25));
|
---|
| 259 | h=(sz/2)-ir; x=sz/2; y=x;
|
---|
| 260 | function nextLoop(){
|
---|
| 261 | if(!running) {return;} os=(os+1)%ct; ctx.clearRect(0,0,sz,sz); ctx.save(); ctx.translate(x,y);
|
---|
| 262 | for(i=0;i<ct;i++) {al=2*((os+i)%ct)*Math.PI/ct;
|
---|
| 263 | ctx.save(); ctx.translate(ir*Math.sin(-al),ir*Math.cos(-al)); ctx.rotate(al);
|
---|
| 264 | ctx.fillStyle='rgba('+c+','+Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))+')';
|
---|
| 265 | switch(t) {case "c": drawCirc(ctx,w/2,h); break; case "o": drawOval(ctx,w,h); break; case "p": drawPoly(ctx,w,h); break; case "t": drawTube(ctx,w,h); break; default: ctx.fillRect(-w/2,0,w,h); break;} ctx.restore();
|
---|
| 266 | } ctx.restore();
|
---|
| 267 | setTimeout(nextLoop,sp);
|
---|
| 268 | }
|
---|
| 269 | nextLoop(0);
|
---|
| 270 | return {
|
---|
| 271 | start: function (){if(!running){running=true; nextLoop(0);}},
|
---|
| 272 | stop: function (){running=false; ctx.clearRect(0,0,sz,sz); },
|
---|
| 273 | pause: function (){running=false; }
|
---|
| 274 | };
|
---|
| 275 | }
|
---|