How to use PropOverride method in storybook-root

Best JavaScript code snippet using storybook-root

sui.js

Source:sui.js

1MathJax={tex:{inlineMath:[['$','$'],['\\(','\\)']]}};2const PC_DEVICE=0x01;3const MOBILE_DEVICE=0x02;4const WINDOWS_DEVICE=0x10;5const APPLE_DEVICE=0x20;6const LINUX_DEVICE=0x40;7const UNIX_DEVICE=0x80;8var CLIENT_ENV=0;9if(platform){10 const o=platform.os.toString().toLowerCase();11 if(o.indexOf("windows")!==-1) CLIENT_ENV=PC_DEVICE|WINDOWS_DEVICE;12 else if(o.indexOf("mac")!==-1) CLIENT_ENV=PC_DEVICE|APPLE_DEVICE;13 else if(o.indexOf("os x")!==-1) CLIENT_ENV=PC_DEVICE|APPLE_DEVICE;14 else if(o.indexOf("android")!==-1) CLIENT_ENV=MOBILE_DEVICE|LINUX_DEVICE;15 else if(o.indexOf("ios")!==-1) CLIENT_ENV=MOBILE_DEVICE|APPLE_DEVICE;16}17var PARSER=new DOMParser();18if(CLIENT_ENV===MOBILE_DEVICE|APPLE_DEVICE){19 (function(DOMParser){"use strict";20 var p=DOMParser.prototype,nativeParse=p.parseFromString;21 try{if((new DOMParser()).parseFromString("","text/html")){return;}}catch(e){}22 p.parseFromString=function(m,t){23 if(/^\s*text\/html\s*(?:;|$)/i.test(t)){24 var d=document.implementation.createHTMLDocument("");25 if(m.toLowerCase().indexOf('<!doctype')>-1){d.documentElement.innerHTML=m;}26 else{d.body.innerHTML=m;} return d;27 }else{return nativeParse.apply(this,arguments);}28 };29 }(DOMParser));30}31if(!String.prototype.startsWith){String.prototype.startsWith=function(s,p){return this.substr((p||0),s.length)===s;};}32if(!String.prototype.endsWith){String.prototype.endsWith=function(s,p){return this.substr(this.length-s.length-(p||0),s.length)===s;};}33if(!String.prototype.padStart){34 String.prototype.padStart=function padStart(l,s){35 l=l>>0;s=String(typeof s!=='undefined'?padString:' ');36 if(this.length>=l) return String(this);37 else{l=l-this.length;if(l>s.length){s+=s.repeat(l/s.length);}return s.slice(0,l)+String(this);}38 };39}40if(!DOMTokenList.prototype.replace){DOMTokenList.prototype.replace=function(o,n){const v=String(DOMTokenList.value);DOMTokenList.value=v.replace(o,n);};}41if(typeof TextEncoder==="undefined"){42 TextEncoder=function TextEncoder(){};43 TextEncoder.prototype.encode=function encode(s){44 "use strict";45 var l=s.length,r=-1;var a=typeof Uint8Array==="undefined"?new Array(l*1.5):new Uint8Array(l*3);46 for(var p=0,n=0,i=0;i!==l;){47 p=s.charCodeAt(i), i+=1;48 if(p>=0xD800&&p<=0xDBFF){49 if(i===l){a[r+=1]=0xef;a[r+=1]=0xbf;a[r+=1]=0xbd;break;}50 n=s.charCodeAt(i);51 if(n>=0xDC00&&n<=0xDFFF){52 p=(p-0xD800)*0x400+n-0xDC00+0x10000;i+=1;53 if(p>0xffff){a[r+=1]=(0x1e<<3)|(p>>>18);a[r+=1]=(0x2<<6)|((p>>>12)&0x3f);a[r+=1]=(0x2<<6)|((p>>>6)&0x3f);a[r+=1]=(0x2<<6)|(p&0x3f);continue;}54 } 55 else{a[r+=1]=0xef;a[r+=1]=0xbf;a[r+=1]=0xbd;continue;}56 }57 if(p<=0x007f){a[r+=1]=(0x0<<7)|p;} 58 else if(p<=0x07ff){a[r+=1]=(0x6<<5)|(p>>>6);a[r+=1]=(0x2<<6)|(p&0x3f);}59 else{a[r+=1]=(0xe<<4)|(p>>>12);a[r+=1]=(0x2<<6)|((p>>>6)&0x3f);a[r+=1]=(0x2<<6)|(p&0x3f);}60 }61 if(typeof Uint8Array!=="undefined") return a.subarray(0,r+1);62 a.length=r+1; return a;63 };64 TextEncoder.prototype.toString=function(){return "[object TextEncoder]"};65 try{Object.defineProperty(TextEncoder.prototype,"encoding",{66 get:function(){if(TextEncoder.prototype.isPrototypeOf(this)){return"utf-8";} else throw TypeError("Illegal invocation");}67 });68 }catch(e){TextEncoder.prototype.encoding="utf-8"; }69 if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder";70};71function codedString(s){return PARSER.parseFromString(s,"text/html").body.innerText;};72const SPACE_CHAR=codedString('&nbsp;');73const AMP_CHAR=codedString('&amp;');74const QUOT_CHAR=codedString('&quot;');75const DEGREE_CHAR=codedString('&deg;');76const DOT_CHAR=codedString('&middot;');77const CIRC_CHAR=codedString('&circ;');78const TILDA_CHAR=codedString('&tilde;');79const LT_CHAR=codedString('&lt;');80const GT_CHAR=codedString('&gt;');81const CHECK_CHAR=codedString('&#10003;');82const POST_CHAR=codedString('&#12306;');83const COPYWRITE_CHAR=codedString('&copy;');84const TRI_CHARS=[codedString('&#9650;'),codedString('&#9660;'),codedString('&#9664;'),codedString('&#9654;')];85const CROSS_CHAR=codedString('&#215;');86const COMMAND_CHAR=codedString('&#8984;');87const CTRL_CHAR=codedString('&#8963;');88const SHIFT_CHAR=codedString('&#8679;');89const OPT_CHAR=codedString('&#8997;');90const SHIFT_MASK=0x01;91const CTRL_MASK=0x02;92const ALT_MASK=0x04;93const CMD_MASK=0x08;94const DEFAULT_CMD_MASK=0x10;95const DEFAULT=0x00;96const ORIGINAL=0x01;97const NOT_FOUND=-1;98const S_ICON=0x0001;99const S_LABEL=0x0002;100const S_BUTTON=0x0004;101const S_SELECT=0x0008;102const S_TOGGLE=0x0010;103const S_PANEL=0x0020;104const S_MODIFIER=0x0040;105//Tree106var NORMAL_TREE=0x01;107var FILE_TREE=0x02;108const VERTICAL=0x01;109const HORIZONTAL=0x02;110const DEPTH=0x04;111const DIVERGENCE=0x11;112const CONVERGENCE=0x12;113const CW=0x21;114const CCW=0x22;115const TOP=0x00;116const BOTTOM=0x01;117const LEFT=0x02;118const RIGHT=0x03;119const NONE=0xFF;120var CURRENT_MENU=null;121var SKEY_STATE={source:null,pushed:false,mask:0,key:''};122var SKEY_EVENTLISTENER={down:[],pressed:[],up:[]};123function SShortCut(s,a){124 this.key=s.key;this.mask=s.mask;125 if(this.mask&DEFAULT_CMD_MASK){126 if(CLIENT_ENV&APPLE_DEVICE) this.mask=this.mask-DEFAULT_CMD_MASK+CMD_MASK;127 else this.mask=this.mask-DEFAULT_CMD_MASK+CTRL_MASK;128 }129 this.action=a;130};131SShortCut.prototype={132 toString: function(){133 var str='';134 if(CLIENT_ENV&APPLE_DEVICE){135 if(this.mask&CMD_MASK) str+=COMMAND_CHAR;136 if(this.mask&CTRL_MASK) str+=CTRL_CHAR;137 if(this.mask&SHIFT_MASK) str+=SHIFT_CHAR;138 if(this.mask&ALT_MASK) str+=OPT_CHAR;139 }140 else {141 if(this.mask&CTRL_MASK) str+='Ctrl+';142 if(this.mask&SHIFT_MASK) str+='Shift+';143 if(this.mask&ALT_MASK) str+='Alt+';144 }145 str+=this.key.toUpperCase(); return str;146 }147};148function SSCManager(){this.sclist={};};149SSCManager.prototype={150 register: function(s){151 if(this.sclist[s.key]) this.sclist[s.key][s.mask]=s.action;152 else {this.sclist[s.key]=new Array(16);this.sclist[s.key][s.mask]=s.action;}153 },154 fire: function(e){155 if(this.sclist[SKEY_STATE.key]&&this.sclist[SKEY_STATE.key][SKEY_STATE.mask]){this.sclist[SKEY_STATE.key][SKEY_STATE.mask](e);}156 }157};158function addSKeyEventListener(t,a){SKEY_EVENTLISTENER[t].pushed(a);}159var SC_MANAGER=new SSCManager();160document.addEventListener('keydown',function(e){161 if(e.target&&e.target.sui) SKEY_STATE.source=e.target.sui;162 SKEY_STATE.pushed=true;163 if(e.altKey) SKEY_STATE.mask|=ALT_MASK;164 if(e.shiftKey) SKEY_STATE.mask|=SHIFT_MASK;165 if(e.ctrlKey ) SKEY_STATE.mask|=CTRL_MASK;166 if(e.metaKey ) SKEY_STATE.mask|=CMD_MASK;167 SKEY_STATE.key=e.key;168 if(SKEY_EVENTLISTENER['down'].length){169 for(var a=0;a<SKEY_EVENTLISTENER['down'].length;a++){SKEY_EVENTLISTENER['down'][a](e);}170 }171 SC_MANAGER.fire(e);172});173document.addEventListener('keypress', function(e){174 if(SKEY_EVENTLISTENER['pressed'].length){175 for(var a=0;a<SKEY_EVENTLISTENER['pressed'].length;a++){SKEY_EVENTLISTENER['pressed'][a](e);}176 }177});178document.addEventListener('keyup', function(e){179 if(SKEY_EVENTLISTENER['up'].length){180 for(var a=0;a<SKEY_EVENTLISTENER['up'].length;a++){SKEY_EVENTLISTENER['up'][a](e);}181 }182 SKEY_STATE.source=null;183 SKEY_STATE.pushed=false;184 SKEY_STATE.mask=0;185 SKEY_STATE.key='';186});187function inRange(x,y,s){if(s){return x>=s.X()&&x<=(s.X()+s.width())&&y>=s.Y()&&y<=s.Y()+s.height();} return false;};188function menuRoot(sui){189};190function encodeForm(d){var params=[];for(var k in d){params.push(encodeURIComponent(k)+'='+encodeURIComponent(d[k]));} return params.join('&').replace(/%20/g,'+');};191function propOverride(p,o){if(!p){p=o;}else{for(var k in o){if(Object.keys(p).indexOf(k)==-1) p[k]=o[k];}} return p;};192function instanceOfID(i,s){if(!s){s=document;} const e=s.getElementById(i); if(e){return e.sui;} else return null;};193function supload(f){194 var i=document.getElementById('_FILE_LOADER_');195 if(!i){196 i=document.createElement('input');197 i.setAttribute('type','file');198 i.setAttribute('id','_FILE_LOADER_');199 i.onchange=function(e){if(f){f(e);}i.remove();};200 i.style.display='none';201 document.body.appendChild(i);202 }203 i.click();204};205function sdownload(n,b){206 const u=URL.createObjectURL(b);207 const a=document.createElement("a");208 document.body.appendChild(a);209 a.download=n;210 a.href=u;a.click();211 setTimeout(function(){212 URL.revokeObjectURL(u)213 document.body.removeChild(a)214 }, 500);215};216function sget(u,t){217 return new Promise(function(resolve,reject){218 var xhr=new XMLHttpRequest();xhr.open('GET',u);xhr.responseType=t;xhr.send();219 xhr.onreadystatechange=function(){220 if(xhr.readyState===XMLHttpRequest.DONE){221 if(xhr.status===200){resolve(xhr.response);} else{reject();}222 }223 }224 });225};226function spost(u,t,d){227 return new Promise(function(resolve,reject){228 var xhr=new XMLHttpRequest();xhr.open('POST',u);xhr.setRequestHeader('Content-Type',t);xhr.send(d);229 xhr.onreadystatechange=function(){230 if(this.readyState===XMLHttpRequest.DONE){231 if(xhr.status===200){resolve(xhr.response);} else{reject(xhr.status);}232 }233 }234 });235};236function parseValue(v){237 if(typeof v==='number') return v+'px';238 else if(typeof v==='string') return v;239}240function parseImage(s,c){241 if(s.startsWith('icon:')) return sicon(s.substring(5),{class:['unselectable','unresponsible']});242 else if(s.startsWith('image:')) return simgview({src:s.substring(6),class:['unselectable','unresponsible']});243 else return slabel(s,{class:['unselectable','unresponsible']});244};245function useHash(t,f){246 const e=new TextEncoder().encode(t);247 if(crypto.subtle&&crypto.subtle.digest){248 crypto.subtle.digest('SHA-256',e).then(function(d){249 const a=Array.from(new Uint8Array(d));250 var s='';251 for(var i=0;i<a.length;i++){s+=a[i].toString(16).padStart(2,'0');}252 if(f) f(s);253 });254 }255 else if(crypto.webkitSubtle){256 crypto.webkitSubtle.digest('SHA-256',e).then(function(d){257 const a=Array.from(new Uint8Array(d));var s='';258 for(var i=0;i<a.length;i++){s+=a[i].toString(16).padStart(2,'0');}259 if(f) f(s);260 });261 }262};263function SAjax(){};264SAjax.prototype={265 get: function(p){266 p=propOverride(p,{url:'',type:'',next:null,error:null});267 const xhr=new XMLHttpRequest();xhr.open('GET',p.url);xhr.responseType=p.type;xhr.send();268 xhr.onreadystatechange=function(){269 if(xhr.readyState===XMLHttpRequest.DONE){270 if(xhr.status===200&&p.next){p.next(xhr.response);} else if(p.error){p.error(xhr.status);}271 }272 }273 },274 post: function(p){275 p=propOverride(p,{url:'',data:null,next:null,error:null});276 var xhr=new XMLHttpRequest();xhr.open('POST',p.url);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(encodeForm(p.data));277 xhr.onreadystatechange=function(){278 if(this.readyState===XMLHttpRequest.DONE){279 if(xhr.status===200&&p.next){p.next(xhr.response);} else if(p.error){p.error(xhr.status);}280 }281 }282 }283};284function sajax(){return new SAjax();}285function SCookie(p){286 p=propOverride(p,{samesite:'lax',secure:true,path:null,age:null,expires:null});287 if(p.samesite) document.cookie='samesite='+p.samesite;288 if(p.secure) document.cookie='secure';289 if(p.path) document.cookie='path='+p.path;290 if(p.expires) document.cookie='expires='+p.expires;291 else if(p.age) document.cookie='max-age='+p.age;292};293SCookie.prototype={294 set: function(k,v){document.cookie=k+'='+v;},295 at: function(k){296 const c=document.cookie.split('; ');297 for(i=0;i<c.length;i++){if(c[i].startsWith(k+'=')){return c[i].split('=')[1];}}298 return null;299 },300 data:function(){301 var d={};302 const c=document.cookie.split('; ');303 for(i=0;i<c.length;i++){304 if(c[i].indexOf('=')!=-1){const v= c[i].split('=');d[v[0]]=v[1];}305 }306 return d;307 },308 setExpireSec: function(s){document.cookie='max-age='+s;},309 setExpire:function(d){document.cookie='expires='+d},310 clear:function(){document.cookie='max-age=-1';}311};312function SSocket(n){313 this.socket=io();314 this.connectID=n;315 this.response=null;316 const Cls=this;317 this.socket.on(Cls.connectID,function(d){318 if(Cls.response) Cls.response(d);319 });320};321SSocket.prototype={322 send: function(d){this.socket.emit(this.connectID,d);},323 setResponse:function(r){this.response=r;}324};325var SMOUSE_EVENTLISTENER={326 down:[],327 over:[],328 enter:[],329 leave:[],330 up:[],331 click:[]332};333var SMOUSE_STATE={334 source: undefined,335 count: 0,336 button: 0,337 pushed: false,338 dragging: false,339 oriX: -1,340 oriY: -1,341 diffX: -1,342 diffY: -1343};344document.addEventListener('mousedown',function(e){345 if(e.target&&e.target.sui) SMOUSE_STATE.source=e.target.sui;346 SMOUSE_STATE.pushed=true;347 SMOUSE_STATE.dragging=false;348 SMOUSE_STATE.oriX=e.clientX;349 SMOUSE_STATE.oriY=e.clientY;350});351document.addEventListener('mousemove',function(e){352 if(SMOUSE_STATE.pushed){353 SMOUSE_STATE.dragging=true;354 SMOUSE_STATE.diffX=e.clientX-SMOUSE_STATE.oriX;355 SMOUSE_STATE.diffY=e.clientY-SMOUSE_STATE.oriY;356 SMOUSE_STATE.oriX=e.clientX;357 SMOUSE_STATE.oriY=e.clientY;358 if(SMOUSE_STATE.source.suiid==='splitter') SMOUSE_STATE.source.update(e);359 //console.log(SMOUSE_STATE.diffX+","+SMOUSE_STATE.diffY);360 }361 else {362 if(e.target&&e.target.sui) SMOUSE_STATE.source=e.target.sui;363 }364});365document.addEventListener('mouseup',function(e){366 SMOUSE_STATE.source=null;367 SMOUSE_STATE.pushed=false;368 SMOUSE_STATE.dragging=false;369 SMOUSE_STATE.oriX=e.clientX;370 SMOUSE_STATE.oriY=e.clientY;371});372document.addEventListener('mouseover',function(e){373 //console.log(event.target.sui);374});375document.addEventListener('click',function(e){376 if(e.target&&e.target.sui) SMOUSE_STATE.source=e.target.sui;377 if(e.target){378 if(e.target.sui){379 if(CURRENT_MENU){380 if(e.target.sui != CURRENT_MENU) CURRENT_MENU.close();381 }382 }383 else {384 if(CURRENT_MENU) CURRENT_MENU.close();385 }386 }387 else {388 if(CURRENT_MENU) CURRENT_MENU.close();389 }390});391document.addEventListener('touchstart',function(e){392 if(e.target&&e.target.sui) SMOUSE_STATE.source=e.target.sui;393 if(e.target){394 if(e.target.sui){395 if(CURRENT_MENU){396 if(e.target.sui != CURRENT_MENU) CURRENT_MENU.close();397 }398 }399 else {400 if(CURRENT_MENU){ CURRENT_MENU.close(); }401 }402 }403 else {404 if(CURRENT_MENU){ CURRENT_MENU.close(); }405 }406});407document.addEventListener('drag',function(e){408});409document.addEventListener('dragstart',function(e){410 if(e.target&&e.target.sui) SMOUSE_STATE.source=e.target.sui;411 SMOUSE_STATE.dragging=true;412});413document.addEventListener('dragend', function(e){414});415document.addEventListener('dragover', function(e){416});417document.addEventListener('dragenter', function(e){418});419document.addEventListener('dragleave', function(e){420});421document.addEventListener('drop',function(e){422 event.preventDefault();423});424function sframe(a){return new SFrame(a);}425function simgview(a){return new SImageView(a);}426function SLayout(t){this.type=t;this.C=undefined;};427SLayout.prototype={428 applyLayout:function(c){this.C=c;this.C.setDisplay(this.type);},429 append:function(c,l){this.C.node.appendChild(c);},430 insert:function(i,c,l){this.C.node.insertBefore(c,this.C.node.childNodes[i]);},431 remove:function(c,l){c.parentNode.removeChild(c);},432 clear:function(l){while(this.C.node.hasChildNodes()){this.C.node.removeChild(this.C.node.childNodes[0]);}}433};434function slayout(a){return new SLayout(a);};435function SColumnLayout(n){SLayout.call(this,'flex');this.count=n;};436SColumnLayout.prototype=Object.create(SLayout.prototype,{437 applyLayout:{value:function(c){438 SLayout.prototype.applyLayout.apply(this,[c]);439 this.C.addClass('column-layout');440 this.C.node.style.columnCount=this.count;441 }}442});443SColumnLayout.prototype.constructor=SColumnLayout;444function scolumn(a){return new SColumnLayout(a);};445function SFlowLayout(d,r){SLayout.call(this,'flex');this.direction=d;this.reverse=(r==null?false:r);};446SFlowLayout.prototype=Object.create(SLayout.prototype,{447 applyLayout:{value:function(c){448 SLayout.prototype.applyLayout.apply(this,[c]);449 this.C.addClass('flow-layout');450 this.C.addClass(this.direction==VERTICAL?'vertical':'horizontal');451 if(this.reverse) this.C.addClass('reverse');452 }}453});454SFlowLayout.prototype.constructor=SFlowLayout;455function sflow(a,b){return new SFlowLayout(a,b);};456function SCardLayout(d,r){SLayout.call(this,'flex'); this.direction=d;this.reverse=(r==null?false:r);};457SCardLayout.prototype=Object.create(SLayout.prototype,{458 applyLayout:{value:function(c){459 SLayout.prototype.applyLayout.apply(this,[c]);460 this.C.addClass('card-layout');461 this.C.addClass(this.direction==VERTICAL?'vertical':'horizontal');462 if(this.reverse) this.C.addClass('reverse');463 }}464});465SCardLayout.prototype.constructor=SCardLayout;466function scard(a,b){return new SCardLayout(a,b);};function scard(a,b){return new SCardLayout(a,b);};467function SBorderLayout(){SLayout.call(this,'flex');};468SBorderLayout.prototype=Object.create(SLayout.prototype,{469 applyLayout:{value:function(c){470 SLayout.prototype.applyLayout.apply(this,[c]);471 this.C.addClass('border-layout');472 this.north=sview({class:['north']});473 this.med=sview({layout:SFlowLayout(HORIZONTAL),class:['med']});474 this.west=sview({class:['west']});475 this.center=sview({class:['center']});476 this.east=sview({class:['east']});477 this.south=sview({class:['south']});478 this.med.add(this.west).add(this.center).add(this.east);479 this.C.node.appendChild(this.north.node);480 this.C.node.appendChild(this.med.node);481 this.C.node.appendChild(this.south.node);482 }},483 append:{value:function(c,l){484 if(l==='north') this.north.node.appendChild(c);485 else if(l==='south') this.south.node.appendChild(c);486 else if(l==='west') this.west.node.appendChild(c);487 else if(l==='east') this.east.node.appendChild(c);488 else if(l==='center') this.center.node.appendChild(c);489 }},490 clear:{value:function(l){491 while ( this.north.node.node.hasChildNodes() ){492 this.north.node.node.removeChild( this.north.node.node.childNodes[0] );493 }494 while ( this.south.node.node.hasChildNodes() ){495 this.south.node.node.removeChild( this.south.node.node.childNodes[0] );496 }497 while ( this.west.node.node.hasChildNodes() ){498 this.west.node.node.removeChild( this.west.node.node.childNodes[0] );499 }500 while ( this.east.node.node.hasChildNodes() ){501 this.east.node.node.removeChild( this.east.node.node.childNodes[0] );502 }503 while ( this.center.node.node.hasChildNodes() ){504 this.center.node.node.removeChild( this.center.node.node.childNodes[0] );505 }506 }507 }508});509SBorderLayout.prototype.constructor=SBorderLayout;510function sborder(){return new SBorderLayout();};511function SGridLayout(r,c,a){SLayout.call(this,'grid');512 this.rows=[];513 this.columns=[];514 this.areas=[];515 for(var i=0;i<r.length;i++){516 if(typeof(r[i])==='number'){517 if(r[i]===0) this.rows.push('auto');518 else if(r[i]<0) this.rows.push((-r[i])+'fr');519 else this.rows.push(r[i]+'px');520 }521 else this.rows.push(r[i]);522 };523 for (var j=0;j<c.length;j++){524 if(typeof(c[j])==='number'){525 if(c[j]=== 0) this.columns.push('auto');526 else if(c[j]<0) this.columns.push((-c[j])+'fr');527 else this.columns.push(c[j]+'px');528 }529 else this.columns.push(c[j]);530 };531 if(a===null){532 this.areas=Array(this.rows.length).fill(Array(this.columns.length).fill('area'));533 var k=1;534 for (var i=0;i<this.rows.length;i++){535 for (var j=0;j<this.columns.length;j++){536 this.areas[i][j]=this.areas[r][c]+k; k++;537 }538 }539 }540 else this.areas=a;541};542SGridLayout.prototype=Object.create(SLayout.prototype,{543 applyLayout:{544 value:function(c){545 SLayout.prototype.applyLayout.apply(this,[c]);546 this.C.addClass('grid-layout');547 var tmp='';548 for(var r=0;r<this.rows.length;r++){tmp+=this.rows[r]+' ';};549 this.C.node.style.gridTemplateRows=tmp;550 tmp='';551 for (var c=0;c<this.columns.length;c++){tmp+=this.columns[c]+' ';};552 this.C.node.style.gridTemplateColumns=tmp;553 tmp='';554 for (var a=0;a<this.areas.length;a++){555 var tmp2='"'+this.areas[a][0];556 for (var a2=1;a2<this.areas[a].length;a2++){tmp2+=' '+this.areas[a][a2];} tmp2+='"';557 tmp+=tmp2+' ';558 };559 this.C.node.style.gridTemplateAreas=tmp;560 }561 },562 append:{value:function(c,l){this.C.node.appendChild(c);c.style.gridArea=l;}}563});564SGridLayout.prototype.constructor=SGridLayout;565function sgrid(a,b,c){return new SGridLayout(a,b,c);};566function SUIComponent(t,p){567 p=propOverride(p,{element:null});568 this.node=document.createElement(t);569 this.node.sui=this;570 this.suiid=null;571 this.layout=null;572 this.parent=null;573 this.components=[];574 this.display=null;575 this.locale=null;576 this.draggable=false;577 this.initNode(p);578 if(p.element) p.element.appendChild(this.node);579};580SUIComponent.prototype={581 initNode:function(p){582 if(p.display) this.setDisplay(p.display);583 this.node.classList.add('component');584 if(p.id) this.setID(p.id);585 if(p.name) this.setName(p.name);586 if(p.tooltip) this.setToolTip(p.tooltip);587 if(p.uiid) this.setSuiID(p.uiid);588 if(p.locale) this.setLocale(p.locale);589 if(p.class&&p.class.length) this.setClass(p.class);590 if(p.layout) this.setLayout(p.layout);591 if(p.components) this.setComponents(p.components);592 if(p.margin&&p.margin.length){this.setMargin(p.margin);}593 if(p.padding&&p.padding.length){this.setPadding(p.padding);}594 if(p.halign) this.setHorizontalAlign(p.halign);595 if(p.valign) this.setVerticalAlign(p.valign);596 if(p.cursor) this.setCursor(p.cursor);597 if(p.x!==undefined) this.setX(p.x);598 if(p.y!==undefined) this.setY(p.y);599 if(p.z!==undefined) this.setZ(p.z);600 if(p.position) this.setPosition(p.position);601 if(p.width!==undefined) this.setWidth(p.width);602 if(p.height!==undefined) this.setHeight(p.height);603 if(p.minw!==undefined) this.setMinWidth(p.minw);604 if(p.maxw!==undefined) this.setMaxWidth(p.maxw);605 if(p.minh!==undefined) this.setMinHeight(p.minh);606 if(p.maxh!==undefined) this.setMaxHeight(p.maxh);607 if(p.size!==undefined) this.setSize(p.size);608 if(p.draggable!==undefined) this.setDraggable(p.draggable);609 if(p.border) this.setBorder(p.border);610 if(p.background) this.setBackground(p.background);611 if(p.shadow) this.setShadow(p.shadow);612 if(p.color) this.setColor(p.color);613 if(p.event) this.setEventListener(p.event);614 if(p.available!==undefined) this.setAvailable(p.available);615 if(p.visible!==undefined) this.setVisible(p.visible);616 },617 setDisplay:function(d){this.display=d;if(d){this.node.style.display=d;}return this;},618 setLocale:function(l){this.locale=l; for(var i=0;i<this.components.length;i++){this.components[i].setLocale(l);} return this;},619 isLocalized :function(){return this.locale;},620 root:function(){621 var p=this.parent;622 if(!p) return this;623 while (p.parent){p=p.parent;}624 return p;625 },626 id:function(){return this.node.id;},627 setID:function(i){this.node.id=i; return this;},628 name:function(){return this.node.name;},629 setName:function(n){this.node.name=n; return this;},630 tooltip:function(){return this.node.title;},631 setToolTip:function(t){this.node.title=t; return this;},632 suiID:function(){return this.suiid;},633 setSuiID:function(i){this.suiid=i; return this;},634 setVisible:function(v){635 if(v) this.node.style.display=this.display;636 else if(this.node.style.display!=='none'){637 this.display=this.node.style.display;638 this.node.style.display='none';639 }640 return this;641 },642 setAttribute:function(a){for(var k in a){this.node[k]=a[k];} return this;},643 setAvailable:function(a){this.node.disabled=!a; return this;},644 setMainClass:function(c){this.node.classList.replace(this.node.classList[0],c); return this;},645 setClass:function(c){for (var i=0;i<c.length;i++){this.addClass(c[i]);} return this;},646 hasClass:function(c){return this.node.classList.contains(c);},647 addClass:function(c){this.node.classList.add(c); return this;},648 removeClass:function(c){if(this.node.classList.contains(c)) this.node.classList.remove(c); return this;},649 componentAt:function(i){return this.components[i];},650 setComponents:function(c){651 if(c instanceof Array&&c.length) for(var i=0;i<c.length;i++){this.add(c[i]);}652 else {for(var e in c){for(var i=0;i<c[e].length;i++){this.add(c[e][i],e);}}}653 return this;654 },655 elementCount:function(){return this.components.length;},656 add:function(ui,loc){657 if(loc == null) loc=undefined;658 ui.setParent(this);659 if(this.locale != undefined) ui.setLocale(this.locale);660 this.components.push(ui);661 if(this.layout != undefined) this.layout.append(ui.node,loc);662 else this.node.appendChild(ui.node);663 return this;664 },665 insert:function(idx,ui,loc){666 if(loc == null) loc=undefined;667 ui.setParent(this);668 if(this.locale != undefined) ui.setLocale(this.locale);669 this.components.splice(idx,0,ui);670 if(this.layout != undefined){671 /*672 */673 this.layout.append(idx,ui.node,loc);674 }675 else this.node.insertBefore(ui.node,this.components[idx].node);676 },677 remove:function(ui){678 ui.setParent(undefined);679 ui.node.parentNode.removeChild(ui.node);680 this.components.splice(this.components.indexOf(ui),1);681 },682 setParent:function(element){this.parent=element; return this;},683 setLayout:function(layout){684 this.layout=layout;685 if(this.layout != undefined){686 this.layout.applyLayout(this);687 }688 return this;689 },690 setMargin:function(margin){691 this.node.style.marginTop=parseValue(margin[0]);692 this.node.style.marginRight=parseValue(margin[1]);693 this.node.style.marginBottom=parseValue(margin[2]);694 this.node.style.marginLeft=parseValue(margin[3]);695 },696 setMarginT:function(margin){this.node.style.marginTop=margin;},697 setMarginB:function(margin){this.node.style.marginBottom=margin;},698 setMarginL:function(margin){this.node.style.marginLeft=margin;},699 setMarginR:function(margin){this.node.style.marginRight=margin;},700 setPadding:function(padding){701 this.node.style.paddingTop=parseValue(padding[0]);702 this.node.style.paddingRight=parseValue(padding[1]);703 this.node.style.paddingBottom=parseValue(padding[2]);704 this.node.style.paddingLeft=parseValue(padding[3]);705 },706 setHorizontalAlign:function(align){this.node.style.textAlign=align; return this;},707 setVerticalAlign:function(align){ this.node.style.verticalAlign=align; return this;},708 setCursor:function(cursor){this.node.style.cursor=cursor; return this;},709 setX:function(x){this.node.style.left=parseValue(x); return this;},710 setXr:function(x){711 if(typeof(x)==='number') this.node.style.right=x+'px';712 else this.node.style.right=x;713 return this;714 },715 X:function(){return this.node.getBoundingClientRect().left+window.pageXOffset;},716 setY:function(y){717 if(typeof(y)==='number') this.node.style.top=y+'px';718 else this.node.style.top=y;719 return this;720 },721 setYr:function(y){722 if(typeof(y)==='number') this.node.style.bottom=y+'px';723 else this.node.style.bottom=y;724 return this;725 },726 Y:function(){return this.node.getBoundingClientRect().top+window.pageYOffset;},727 setZ:function(z){this.node.style.zIndex=z; return this;},728 setPosition:function(pos){this.node.style.position=pos; return this;},729 setWidth:function(w){this.node.style.width=parseValue(w);return this;},730 setMinWidth:function(w){this.node.style.minWidth=parseValue(w);return this;},731 setMaxWidth:function(w){this.node.style.maxWidth=parseValue(w);return this;},732 setHeight:function(h){this.node.style.height=parseValue(h);return this;},733 setMinHeight:function(h){this.node.style.minHeight=parseValue(h);return this;},734 setMaxHeight:function(h){this.node.style.maxHeight=parseValue(h);return this;},735 setSize:function(size){this.node.style.fontSize=parseValue(size);},736 setDraggable:function(d){this.node.draggable=d;},737 setBorder:function(border){738 if(border.style) this.node.style.borderStyle=border.style;739 if(border.width) this.node.style.borderWidth=parseValue(border.width);740 if(border.color) this.node.style.borderColor=border.color;741 if(border.radius) this.node.style.borderRadius=parseValue(border.radius);742 if(border.top){743 var tborder=border.top;744 if(tborder.style) this.node.style.borderTopStyle=tborder.style;745 if(tborder.width) this.node.style.borderTopWidth=parseValue(tborder.width);746 if(tborder.color) this.node.style.borderTopColor=tborder.color;747 if(tborder.radius) this.node.style.borderTopRadius=parseValue(tborder.radius);748 }749 if(border.bottom){750 var bborder=border.bottom;751 if(bborder.style) this.node.style.borderBottomStyle=bborder.style;752 if(bborder.width) this.node.style.borderBottomWidth=parseValue(bborder.width);753 if(bborder.color) this.node.style.borderBottomColor=bborder.color;754 if(bborder.radius) this.node.style.borderBottomRadius=parseValue(bborder.radius);755 }756 if(border.left){757 var lborder=border.left;758 if(lborder.style) this.node.style.borderLeftStyle=lborder.style;759 if(lborder.width) this.node.style.borderLeftWidth=parseValue(lborder.width);760 if(lborder.color) this.node.style.borderLeftColor=lborder.color;761 if(lborder.radius) this.node.style.borderLeftRadius=parseValue(lborder.radius);762 }763 if(border.right){764 var rborder=border.right;765 if(rborder.style) this.node.style.borderRightStyle=rborder.style;766 if(rborder.width) this.node.style.borderRightidth=parseValue(rborder.width);767 if(rborder.color) this.node.style.borderRightColor=rborder.color;768 if(rborder.radius) this.node.style.borderRightRadius=parseValue(rborder.radius);769 }770 return this;771 },772 setBackground:function(back){773 if(back.color){this.node.style.background=back.color;}774 else if(back.image){this.node.style.backgroundImage=back.image;}775 return this;776 },777 setShadow:function(shadow){this.node.style.boxShadow=shadow; return this;},778 setFont:function(font){779 if(font.name != undefined) this.node.style.fontFamily=font.name;780 if(font.style != undefined){781 var style=font.style;782 if(style != undefined && 0 < style.length){783 for (var i=0; i < style.length; i++){784 var element=style[i];785 if(element == 'bold'){786 this.node.style.fontWeight='bold';787 }788 else this.node.style.fontStyle=element;789 }790 }791 }792 if(font.size != undefined) this.node.style.fontSize=font.size;793 return this;794 },795 setColor:function(col){this.node.style.color=col; return this;},796 setEventListener:function(l){797 for(var i=0;i<l.length;i++){798 this.node.addEventListener(l[i].type,l[i].func);799 }800 return this;801 },802 width:function(){return this.node.offsetWidth;},803 height:function(){return this.node.offsetHeight;},804 boundary:function(){return [this.X(),this.Y(),this.width(),this.height()];},805 isVisible:function(){return !(this.node.display=='none');},806 clear:function(){807 while (this.node.hasChildNodes()) this.node.removeChild(this.node.lastChild);808 this.components=[]; return this;809 }810};811function suic(a,b){return new SUIComponent(a,b);};812function SSpacer(){SUIComponent.call(this,'div',{class:['sspacer','auto','unresponsible']});};813SSpacer.prototype=Object.create(SUIComponent.prototype,{814 initNode:{value:function(p){815 SUIComponent.prototype.initNode.apply(this,[p]);816 this.setSuiID('spacer').setMainClass('sspacer');817 }}818});819SSpacer.prototype.constructor=SSpacer;820function sspace(){return new SSpacer();};821function SBar(d,p){p=propOverride(p,{style:'solid',width:0.25,color:'dimgray'});822 if(d===HORIZONTAL) SUIComponent.call(this,'div',{border:{top:p}});823 else SUIComponent.call(this,'div',{border:{left:p}});824};825SBar.prototype=Object.create(SUIComponent.prototype,{826 initNode:{value:function(p){827 SUIComponent.prototype.initNode.apply(this,[p]);828 this.setSuiID('separator').setMainClass('sseparator');829 }},830});831SBar.prototype.constructor=SBar;832function sbar(a,b){return new SBar(a,b);};833function SView(p){p=propOverride(p,{});SUIComponent.call(this,'div',p);};834SView.prototype=Object.create(SUIComponent.prototype, {835 initNode:{value:function(p){836 SUIComponent.prototype.initNode.apply(this,[p]);837 this.setSuiID('view').setMainClass('sview');838 }}839});840SView.prototype.constructor=SView;841function sview(a){return new SView(a);}842function SPanel(p){p=propOverride(p,{});SUIComponent.call(this,'div',p);};843SPanel.prototype=Object.create(SUIComponent.prototype, {844 initNode:{value:function(p){845 SUIComponent.prototype.initNode.apply(this,[p]);846 this.setSuiID('panel').setMainClass('spane;');847 }}848});849SPanel.prototype.constructor=SPanel;850function spanel(a){return new SPanel(a);}851function SFrame(p){852 p=propOverride(p,{rorate:false,resize:true,move:true,header:TOP,hdrag:true,close:true,minimize:true,maximize:true});853 p.layout=sflow(VERTICAL);854 SUIComponent.call(this,'div',p);855};856SFrame.prototype=Object.create(SUIComponent.prototype, {857 initNode:{858 value:function(p){859 SUIComponent.prototype.initNode.apply(this,[{860 layout:sgrid(861 [10,5,0,5,10],862 [10,5,0,5,10],863 [864 ['r1','d1','d1','d1','r2'],865 ['d2','s1','s2','s3','d3'],866 ['d2','s4','m','s5','d3'],867 ['d2','s6','s7','s8','d3'],868 ['r3','d4','d4','d4','r4']869 ]870 )871 }]);872 const Cls=this;873 this.current=[0,0];874 this.hdrag=p.hdrag;875 this.min=false;876 this.resizePane=[877 spanel({cursor:'nw-resize',class:['frame-resize']}),878 spanel({cursor:'n-resize',class:['frame-resize']}),879 spanel({cursor:'ne-resize',class:['frame-resize']}),880 spanel({cursor:'w-resize',class:['frame-resize']}),881 spanel({cursor:'e-resize',class:['frame-resize']}),882 spanel({cursor:'sw-resize',class:['frame-resize']}),883 spanel({cursor:'s-resize',class:['frame-resize']}),884 spanel({cursor:'se-resize',class:['frame-resize']})885 ];886 this.dragPane=[887 spanel({cursor:'move',class:['frame-drag']}),888 spanel({cursor:'move',class:['frame-drag']}),889 spanel({cursor:'move',class:['frame-drag']}),890 spanel({cursor:'move',class:['frame-drag']})891 ];892 this.rotPane=[893 spanel({class:['frame-rot','cwrotator']}),894 spanel({class:['frame-rot','cwrotator']}),895 spanel({class:['frame-rot','cwrotator']}),896 spanel({class:['frame-rot','cwrotator']})897 ]898 this.mainPanel=spanel(p);899 this.header=sview({layout:sflow(HORIZONTAL),class:['frame-header']});900 this.header.setDraggable(p.hdrag);901 this.header.node.onmousemove=function(e){902 if(p.hdrag && SMOUSE_STATE.dragging) Cls.move(SMOUSE_STATE.diffX,SMOUSE_STATE.diffY);903 };904 this.content=sview({class:['frame-content']});905 this.closer=sbutton({style:S_PANEL,class:['frame-closer']});906 this.mbuttonPane=spanel({layout:sflow(HORIZONTAL),class:['frame-mbuttons']});907 this.minimizer=sbutton({style:S_PANEL,class:['frame-minimizer'],action:function(e){Cls.minimize();}});908 this.maximizer=sbutton({style:S_PANEL,class:['frame-maximizer']});909 this.mbuttonPane.add(this.minimizer).add(this.maximizer);910 if(p.header===NONE) this.header.setVisible(false);911 else {912 if(!p.close) this.closer.setAvailable(false);913 if(!p.minimize) this.minimizer.setAvailable(false);914 if(!p.maximize) this.maximizer.setAvailable(false);915 }916 this.header.add(sspace()).add(this.mbuttonPane).add(this.closer);917 this.mainPanel.addClass('frame-main').add(this.header).add(this.content);918 this.setSuiID('frame')919 .setMainClass('sframe');920 for(var i=0;i<4;i++) this.layout.append(this.rotPane[i].node,'r'+(i+1));921 for(var i=0;i<4;i++) this.layout.append(this.dragPane[i].node,'d'+(i+1));922 for(var i=0;i<8;i++) this.layout.append(this.resizePane[i].node,'s'+(i+1));923 this.layout.append(this.mainPanel.node,'m');924 }925 },926 add:{value:function(u){this.components.push(u); this.content.add(u); return this;}},927 minimize:{value:function(){if(this.min) this.content.setVisible(true); else this.content.setVisible(false); this.min=!this.min;}},928 move:{value:function(dx,dy){this.setX(this.X()+dx);this.setY(this.Y()+dy);}},929});930SFrame.prototype.constructor=SFrame;931function SWindow(p){932 p=propOverride(p,{title:'unnamed',resize:true,move:true,header:TOP,close:true,minimize:true,maximize:true});933 SUIComponent.call(this,'div',p);934};935SWindow.prototype=Object.create(SUIComponent.prototype, {936 initNode:{937 value:function(p){938 SUIComponent.prototype.initNode.apply(this,[p]);939 this.header=sview({940 layout:sflow((p.header==LEFT||p.header==RIGHT)?VERTICAL:HORIZONTAL),941 class:['window-header']942 });943 this.title=slabel(title,{class:['window-title','unresponsible','unselectable']});944 this.content=sview();945 }946 },947 add:{value:function(u){this.components.push(u); this.content.add(u); return this;}},948 close:{value:function(){this.setVisible(false);}},949 minimize:{value:function(){if(this.min) this.content.setVisible(true); else this.content.setVisible(false); this.min=!this.min;}},950 move:{value:function(dx,dy){this.setX(this.X()+dx);this.setY(this.Y()+dy);}},951});952SWindow.prototype.constructor=SWindow;953function SDialog(p){954 p=propOverride(p,{mode:'generic',modal:true,message:'',content:null});955 this.mode=p.mode;this.modal=p.modal;956 if(p.mode==='generic') {957 p.layout=sflow(VERTICAL);p.class=['align-center'];958 this.content=p.content?p.content:spanel();959 SUIComponent.call(this,'div',p);960 }961 else {this.result=null;this.message=p.message;}962};963SDialog.prototype=Object.create(SUIComponent.prototype, {964 initNode:{value:function(p){965 SUIComponent.prototype.initNode.apply(this,[p]);966 this.setSuiID('dialog').setMainClass('sscreen').add(this.content).setModal(p.modal).setVisible(false);967 const Cls=this;968 this.content.setMainClass('sdialog');969 this.content.node.onclick=function(e){e.stopPropagation();};970 this.node.onclick=function(e){Cls.hide();};971 }},972 show:{value:function(){973 if(this.mode==='alert') alert(this.message);974 else if(this.mode==='confirm') this.result=confirm(this.message);975 else if(this.mode==='prompt') this.result=prompt(this.message);976 else {this.setVisible(true); this.content.addClass('show');}977 }},978 hide:{value:function(){979 if(this.mode==='generic'){this.setVisible(false);this.content.removeClass('show');}980 }},981 setModal:{value:function(m){982 if(this.mode==='generic'){this.modal=m;if(m){this.addClass('modal');}else{this.removeClass('modal');}} return this;983 }},984 setContent:{value:function(c){985 c.setMainClass('sdialog');c.node.onclick=function(e){e.stopPropagation();};986 this.remove(this.content);this.content=c;this.add(this.content);return;987 }}988});989SDialog.prototype.constructor=SDialog;990function sdialog(a){return new SDialog(a);}991function SBox(p){p=propOverride(p,{label:'',content:null});SUIComponent.call(this,'fieldset',p);};992SBox.prototype=Object.create(SUIComponent.prototype, {993 initNode:{994 value:function(p){995 SUIComponent.prototype.initNode.apply(this,[p]);996 this.label=slabel(p.label);this.legend=suic('legend');this.legend.add(this.label);997 this.content=p.content?p.content:sview();998 this.setSuiID('box').setMainClass('sbox').add(this.legend).add(this.content);999 }1000 },1001 title:{value:function(){return this.label.text();}},1002 setTitle:{value:function(t){this.label.setText(t); return this;}}1003});1004SBox.prototype.constructor=SBox;1005function sbox(a){return new SBox(a);}1006function SExpandView(p){1007 p=propOverride(p,{style:DEFAULT,direction:BOTTOM,expand:false,label:['show','hide'],icon:[TRI_CHARS[RIGHT],TRI_CHARS[BOTTOM]],content:null});1008 this.direction=p.direction;this.style=p.style;1009 if(p.style){1010 if(p.direction<2) p.layout=sflow(VERTICAL);1011 else p.layout=sflow(HORIZONTAL);1012 SUIComponent.call(this,'div',p);1013 }1014 else SUIComponent.call(this,'details',p);1015};1016SExpandView.prototype=Object.create(SUIComponent.prototype, {1017 initNode:{1018 value:function(p){1019 SUIComponent.prototype.initNode.apply(this,[p]);1020 const Cls=this;1021 this.setSuiID('exview').setMainClass('sexview');1022 this.labels=p.label;this.icons=null;this.header=null;this.controler=null;1023 this.label=slabel('',{class:['unselectable','unresponsible']});1024 this.label.setMainClass('exview-label');1025 if(p.content) this.content=p.content;1026 else this.content=sview();1027 this.content.setMainClass('exview-content');1028 if(p.style){1029 this.header=sview({layout:sflow(HORIZONTAL),class:['exview-header'],event:[{type:'click',func:function(e){Cls.setState(!Cls.state);}}]});1030 this.controler=spanel({class:['exview-expander','unresponsible']});1031 this.icons=[parseImage(p.icon[0]),parseImage(p.icon[1])];1032 if(this.direction<2) this.controler.addClass('horizontal');1033 else {1034 this.label.addClass('vtext');1035 this.controler.addClass('vertical');1036 }1037 if(this.expand===0||this.expand===2) this.addClass('reverse');1038 this.header.add(this.controler).add(this.label);1039 }1040 else {1041 this.header=suic('summary');1042 this.header.add(this.label);1043 this.node.ontoggle=function(e){Cls.state=Cls.node.open; Cls.update();}1044 }1045 this.add(this.header).add(this.content).setState(p.state);1046 }1047 },1048 expand:{value:function(){this.setState(true); return this;}},1049 collapse:{value:function(){this.setState(false); return this;}},1050 update:{value:function(){1051 if(this.state) this.addClass('open');1052 else this.removeClass('open');1053 this.label.setText(this.labels[this.state?1:0]);1054 if(this.controler){1055 this.controler.clear();1056 this.controler.add(this.icons[this.state?1:0]);1057 }1058 }},1059 setState:{value:function(s){1060 this.state=s;1061 if(this.style) this.content.setVisible(s);1062 else this.node.open=this.s;1063 this.update(); return this;1064 }},1065 setContent:{value:function(c){1066 c.setMainClass('exview-content');this.remove(this.content);this.content=c;this.add(this.content);1067 }}1068});1069SExpandView.prototype.constructor=SExpandView;1070function sexview(a){return new SExpandView(a);}1071function STab(p){1072 p=propOverride(p,{direction:HORIZONTAL,content:null,icon:null,label:'tab',close:true,draggable:true});1073 p.layout=sflow(p.direction);SUIComponent.call(this,'div',p);1074}1075STab.prototype=Object.create(SUIComponent.prototype, {1076 initNode:{value:function(p){1077 SUIComponent.prototype.initNode.apply(this,[p]);1078 const Cls=this;this.active=false;this.icon=null;this.content=null;1079 if(p.icon) this.icon=parseImage(p.icon)1080 else this.icon=slabel('',{class:['unselectable','unresponsible']});1081 this.icon.addClass('tab-icon');1082 this.label=slabel(p.label,{class:['tab-title','unselectable']});1083 this.node.onclick=function(e){Cls.parent.select(Cls);};1084 this.closer=spanel({class:['tab-closer']});1085 this.closer.node.onclick=function(e){e.stoppagation();Cls.parent.close(Cls);}1086 if(!p.close) this.closer.setVisible(false);1087 this.setSuiID('tab').setMainClass('stab').add(sspace()).add(this.icon).add(this.title).add(sspace()).add(this.closer).setContent(p.content);1088 }},1089 setActive:{value:function(a){1090 if(a){this.addClass('active');}else{this.removeClass('active');}1091 this.active=a;return this;1092 }},1093 setContent:{value:function(c){this.content=c;if(c){this.content.setMainClass('tab-content');}return this;}},1094 title:{value:function(){return this.label.text();}},1095 setTitle:{value:function(t){this.label.setText(t);return this;}}1096});1097STab.prototype.constructor=STab;1098function stab(a){return new STab(a);}1099function STabViewHeader(d){1100 SUIComponent.call(this,'div',{layout:sflow(d)});1101};1102STabViewHeader.prototype=Object.create(SUIComponent.prototype, {1103 initNode:{1104 value:function(p){1105 SUIComponent.prototype.initNode.apply(this,[p]);1106 var Cls=this;this.setSuiID('tabheader').setMainClass('stab-header');1107 }1108 }1109});1110STabViewHeader.prototype.constructor=STabViewHeader;1111function STabView(p){1112 p=propOverride(p,{hpos:TOP,direction:VERTICAL,tabs:[],selected:0});1113 p.layout=sflow(p.direction);SUIComponent.call(this,'div',p);1114};1115STabView.prototype=Object.create(SUIComponent.prototype, {1116 initNode:{1117 value:function(p){1118 SUIComponent.prototype.initNode.apply(this,[p]);1119 this.tabs=[];1120 this.selected=null;1121 this.header=new STabViewHeader(p.direction==HORIZONTAL?VERTICAL:HORIZONTAL);1122 this.content=sview({class:['tabview-content']});1123 if(p.tabs.length){1124 for (var i=0;i<p.tabs.length;i++){1125 this.addTab(p.tabs[t]);1126 }1127 }1128 this.setSuiID('tabview')1129 .setMainClass('stabview')1130 .add(this.header)1131 .add(this.content)1132 .selectIndex(p.selected);1133 }1134 },1135 addTab:{1136 value:function(p){1137 var tab=new STab(p);1138 this.tabs.push(tab);1139 this.header.addTab(tab);1140 return this;1141 }1142 },1143 indexOf:{value:function(t){return this.tabs.indexOf(t);}},1144 select:{1145 value:function(t){1146 if(this.selected){1147 this.selected.removeClass('active');1148 this.selected.active=false;1149 }1150 this.content.clear();1151 this.selected=t;1152 this.selected.addClass('active');1153 if(t.content) this.content.add(t.content);1154 return this;1155 }1156 },1157 selectIndex:{1158 value:function(i){1159 if(i<this.tabs.length) this.select(this.tabs[i]);1160 }1161 },1162 close:{value:function(t){1163 const i=this.indexOf(t);1164 this.header.removeTab(t);1165 this.tabs.splice(i, 1);1166 if(t.active){1167 this.content.clear();1168 if(i===this.tabs.length) i--;1169 this.selectIndex(i);1170 }1171 }}1172});1173STabView.prototype.constructor=STabView;1174function stabview(a){return new STabView(a);}1175function SSplitter(p,s,d){1176 this.primary=p;this.secondary=s;this.direction=d;1177 this.border=null;this.edge=(p==null||s==null);1178 SUIComponent.call(this,'div',{});1179};1180SSplitter.prototype=Object.create(SUIComponent.prototype, {1181 initNode:{1182 value:function(){1183 SUIComponent.prototype.initNode.apply(this,[p]);1184 this.setSuiID('splitter').setMainClass('ssplitter').addClass(this.direction==HORIZONTAL?'horizontal':'vertical');1185 }1186 },1187 update:{value:function(e){1188 if(this.direction==HORIZONTAL){1189 if(this.primary){1190 if(this.primary.width()+SMOUSE_STATE.diffX<0) this.primary.setWidth(0);1191 else this.primary.setWidth(this.primary.width()+SMOUSE_STATE.diffX);1192 }1193 if(this.secondary){1194 if(this.secondary.X()+SMOUSE_STATE.diffX<this.primary.X()) this.secondary.setX(this.primary.X());1195 else this.secondary.setX(this.secondary.X()+SMOUSE_STATE.diffX);1196 }1197 }1198 else {1199 if(this.primary){1200 if(this.primary.height()+SMOUSE_STATE.diffY<0) this.primary.setHeight(0);1201 else this.primary.setHeight(this.primary.height()+SMOUSE_STATE.diffY);1202 }1203 if(this.secondary){1204 if(this.secondary.Y()+SMOUSE_STATE.diffY<this.primary.Y()) this.secondary.setY(this.primary.Y());1205 else this.secondary.setY(this.secondary.Y()+SMOUSE_STATE.diffY);1206 }1207 }1208 }}1209});1210SSplitter.prototype.constructor=SSplitter;1211function ssplitter(a,b,c){return new SSplitter(a,b,c);}1212function SSplitView(d,p){1213 p=propOverride(p,{ratio:1.0,primary:null,secondary:null});1214 this.direction=d;p.layout=sflow(d);1215 SUIComponent.call(this,'div',p);1216}1217SSplitView.prototype=Object.create(SView.prototype, {1218 initNode:{1219 value:function(p){1220 SUIComponent.prototype.initNode.apply(this,[p]);1221 if(this.direction===HORIZONTAL) this.primary=sview({width:(50.0*p.ratio)+'%',class:['split-primary']});1222 else this.primary=sview({height:(50.0*p.ratio)+'%',class:['split-primary']});1223 this.secondary=sview({class:['split-secondary']});1224 if(p.primary) this.primary.add(p.primary);1225 if(p.secondary) this.secondary.add(p.secondary);1226 this.splitter=ssplitter(this.primary,this.secondary,this.direction);1227 this.setSuiID('splitview').setMainClass('split-view').add(this.primary).add(this.splitter).add(this.secondary);1228 }1229 },1230 setPrimaryView:{value:function(v){this.primary.clear();this.primary.add(v);return this;}},1231 setSecondaryView:{value:function(v){this.secondary.clear();this.secondary.add(v);return this;}}1232});1233SSplitView.prototype.constructor=SSplitView;1234function ssplitview(a,b){return new SSplitView(a,b);}1235function SWebView(p){p=propOverride(p,{src:''});SUIComponent.call(this,'iframe',p);}1236SWebView.prototype=Object.create(SUIComponent.prototype, {1237 initNode:{1238 value:function(p){1239 SUIComponent.prototype.initNode.apply(this, [ p ]);1240 this.setSuiID('webview').setMainClass('swebview').setAttribute({frameBorder:'0'}).setSource(p.src);1241 }1242 },1243 source:{value:function(){return this.node.contentWindow.location;}},1244 setSource:{value:function(src){this.node.src=src;return this;}}1245});1246SWebView.prototype.constructor=SWebView;1247function swebview(a){return new SWebView(a);}1248function SImageView(p){p=propOverride(p,{src:'',alt:'',width:null,height:null});SUIComponent.call(this,'img',p);};1249SImageView.prototype=Object.create(SUIComponent.prototype, {1250 initNode:{1251 value:function(p){1252 SUIComponent.prototype.initNode.apply(this,[p]);1253 const Cls=this;this.oriWidth=0;this.oriHeight=0;this.image=new Image();1254 this.image.onload=function(){Cls.oriWidth=Cls.image.width;Cls.oriHeight=Cls.image.height;};1255 this.setSuiID('image').setMainClass('simage').setSource(p.src).setAlt(p.alt).setWidth(p.width).setHeight(p.height);1256 }1257 },1258 source:{value:function(){return this.node.src;}},1259 setSource:{value:function(s){this.image.src=s;this.node.src=s;return this;}},1260 altText:{value:function(){return this.node.alt;}},1261 setAlt:{value:function(t){this.node.alt=t; return this;}},1262 setWidth:{value:function(w){if(w){this.node.width=w;}return this;}},1263 setHeight:{value:function(h){if(h){this.node.height=h;}return this;}}1264});1265SImageView.prototype.constructor=SImageView;1266function SSvgCanvas(p){1267}1268function SFigure(p){1269 if(p == null) p={};1270 SUIComponent.call(this,'svg',p);1271};1272SFigure.prototype=Object.create(SUIComponent.prototype, {1273 initNode:{1274 value:function(p){1275 SUIComponent.prototype.initNode.apply(this, [ p ]);1276 this.setSuiID('graphic')1277 .setMainClass('sgraphic');1278 }1279 }1280});1281SFigure.prototype.constructor=SFigure;1282function SCanvas(p){1283 p=propOverride(p,{width:640,height:480});1284 this.context=null;1285 SUIComponent.call(this,'canvas',p);1286};1287SCanvas.prototype=Object.create(SUIComponent.prototype, {1288 initNode:{1289 value:function(p){1290 SUIComponent.prototype.initNode.apply(this, [ p ]);1291 this.setSuiID('drawer')1292 .setMainClass('sdrawer')1293 .setWidth(p.width)1294 .setHeight(p.height);1295 this.context=this.node.getContext('2d');1296 }1297 },1298 setWidth:{value:function(w){this.node.width=w; return this;}},1299 setHeight:{value:function(h){this.node.height=h; return this;}},1300 setPainter:{value:function(p){1301 p=propOverride(p,{fill:null,stroke:null,width:null,alpha:null})1302 if(p.fill) this.context.fillStyle=p.fill;1303 if(p.stroke) this.context.strokeStyle=p.stroke;1304 if(p.witdth) this.context.lineWidth=p.width;1305 if(p.alpha) this.context.globalAlpha=p.alpha;1306 return this;1307 }},1308 path:{value:function(x,y){this.context.beginPath();}},1309 moveTo:{value:function(x,y){this.context.moveTo(x,y);}},1310 lineTo:{value:function(x,y){this.context.lineTo(x,y);}},1311 curveTo:{value:function(rx,ry,x,y){this.context.quadraticCurveTo(rx,ry,x,y);}},1312 curveTo:{value:function(rx1,ry1,rx2,ry2,x,y){this.context.bezierCurveTo(rx1,ry1,rx2,ry2,x,y);}},1313 closePath:{value:function(){this.context.closePath();}},1314 drawPath:{value:function(){this.context.stroke();}},1315 fillPath:{value:function(){this.context.fill();}},1316 arc:{value:function(x,y,r,s,e,d){this.context.arc(x,y,r,s,e,d);}},1317 drawRect: {value:function(x,y,w,h,p){1318 if(p) this.setPainter(p);1319 this.context.fillRect(x,y,w,h);1320 this.context.strokeRect(x,y,w,h);1321 }},1322 drawRoundRect: {value:function(x,y,w,h,r){1323 this.context.beginPath();1324 this.context.moveTo(x,y+r);1325 this.context.lineTo(x,y+h-r);1326 this.context.arcTo(x,y+h,x+r,y+h,r);1327 this.context.lineTo(x+w-r,y+h);1328 this.context.arcTo(x+width, y+height, x+width, y+height - radius, radius);1329 this.context.lineTo(x+width, y+radius);1330 this.context.arcTo(x+width, y, x+width - radius, y, radius);1331 this.context.lineTo(x+radius, y);1332 this.context.arcTo(x, y, x, y+radius, radius);1333 this.context.fill();1334 this.context.stroke();1335 }},1336 drawEllipse: {value:function(x,y,w,h,t,p){1337 if(p) this.setPainter(p);1338 }},1339 drawArc: {value:function(x,y,w,h,b,e,t,p){1340 if(p) this.setPainter(p);1341 }},1342 drawPolygon: {value:function(x,y,n,t,p){1343 if(p) this.setPainter(p);1344 }},1345 erase: {value:function(x,y,w,h){1346 this.context.clearRect(x,y,w,h);1347 }}1348});1349SCanvas.prototype.constructor=SCanvas;1350function SColorPicker(p){1351 if(p == null) p={};1352 SUIComponent.call(this, 'input', p);1353};1354SColorPicker.prototype=Object.create(SUIComponent.prototype, {1355 initNode:{1356 value:function(p){1357 SUIComponent.prototype.initNode.apply(this, [ p ]);1358 this.className='colorpicker';1359 this.addClass('scolor-picker');1360 this.node.type='color';1361 }1362 }1363});1364SColorPicker.prototype.constructor=SColorPicker;1365////////////////1366function SListItem(p){p=propOverride(p,{content:null});SUIComponent.call(this,'li',p);};1367SListItem.prototype=Object.create(SUIComponent.prototype,{1368 initNode:{value:function(p){1369 SUIComponent.prototype.initNode.apply(this,[p]);1370 this.setSuiID('listitem').setMainClass('sli-item');1371 if(p.content) this.node.innerHTML=p.content;1372 }}1373});1374SListItem.prototype.constructor=SListItem;1375function slistitem(a){return new SListItem(a);};1376function SList(p){p=propOverride(p,{type:'ol',prefix:'decimal',items:[]});SUIComponent.call(this,p.type,p);};1377SList.prototype=Object.create(SUIComponent.prototype,{1378 initNode:{value:function(p){1379 SUIComponent.prototype.initNode.apply(this,[p]);1380 this.setSuiID('list').setMainClass('slist');1381 this.node.style.listStyle=p.prefix;1382 for (var i=0;i<p.items.length;i++){if(p.items[i].suiid){this.add(p.items[i]);}else{this.add(slistitem(p.items[i]));}}1383 }}1384});1385SList.prototype.constructor=SList;1386function slist(a){return new SList(a);};1387function SListView(p){1388 p=propOverride(p,{direction:VERTICAL,items:[]});1389 p.layout=sflow(p.direction);1390 SUIComponent.call(this,'div',p);1391};1392SListView.prototype=Object.create(SUIComponent.prototype,{1393 initNode:{value:function(p){1394 SUIComponent.prototype.initNode.apply(this,[p]);1395 this.setSuiID('listview').setMainClass('slist-view');1396 for(var i=0;i<p.items.length;i++){this.add(p.items[i]);}1397 }}1398});1399SListView.prototype.constructor=SListView;1400function slistview(a){return new SListView(a);};1401function SCardView(p){1402 p=propOverride(p,{direction:HORIZONTAL,items:[]});1403 p.layout=scard(p.direction);1404 SUIComponent.call(this,'div',p);1405};1406SCardView.prototype=Object.create(SUIComponent.prototype,{1407 initNode:{value:function(p){1408 SUIComponent.prototype.initNode.apply(this,[ p ]);1409 this.setSuiID('cardview').setMainClass('scard-view');1410 for(var i=0;i<p.items.length;i++){this.add(p.items[i]);}1411 }}1412});1413SCardView.prototype.constructor=SCardView;1414function scardview(a){return new SCardView(a);};1415function SCellRenderer(){};1416SCellRenderer.prototype={1417 render:function(c,p){1418 p.class=['unselectable'];1419 c.add(suic('p',p));1420 if(p.value) c.componentAt(0).node.innerHTML=p.value;1421 c.componentAt(0).node.ondblclick=function(e){1422 c.componentAt(0).removeClass('unselectable');1423 if(c.table.editable) {1424 c.componentAt(0).node.contentEditable=true;1425 c.componentAt(0).addClass('editing');1426 }1427 };1428 c.componentAt(0).node.onmouseleave=function(e){1429 c.componentAt(0).node.contentEditable=false;1430 c.componentAt(0).removeClass('editing');1431 c.componentAt(0).addClass('unselectable');1432 };1433 },1434 setValue:function(c,v){c.componentAt(0).node.innerHTML=v;},1435 getValue:function(c){return c.componentAt(0).node.innerHTML;},1436};1437function SCheckCellRenderer(){};1438SCheckCellRenderer.prototype={1439 render:function(c,p){1440 p.state=p.value;p.available=c.table.editable;1441 c.add(scheck(p));1442 },1443 setValue:function(c,v){c.componentAt(0).setState(v);},1444 getValue:function(c){return c.componentAt(0).state;}1445};1446function SSelectCellRenderer(i){this.items=i;}1447SSelectCellRenderer.prototype={1448 render:function(c,p){1449 p.items=[];p.available=c.table.editable;1450 for(var i=0;i<this.items.length;i++){p.items.push({label:this.items[i],value:this.items[i]});}1451 c.add(sselect(p));1452 c.componentAt(0).selectValue(p.value);1453 c.componentAt(0).setMainClass('cell-select');1454 },1455 setValue:function(c,v){c.componentAt(0).selectAt(v);},1456 getValue:function(c){return c.componentAt(0).selected.value();},1457 setEditable:function(c,e){ c.componentAt(0).setAvailable(e); }1458}1459function SButtonCellRenderer(l){this.label=l;}1460SButtonCellRenderer.prototype={1461 render:function(c,p){1462 p.label=this.label;p.action=p.value;1463 c.add(sbutton(p));1464 c.componentAt(0).setMainClass('cell-button');1465 },1466 setValue:function(c,v){c.componentAt(0).setAction(v);},1467 getValue:function(c){return c.componentAt(0).action;},1468}1469function SUICellRenderer(){}1470SUICellRenderer.prototype={1471 render:function(c,p){c.add(p.value);},1472 setValue:function(c,v){c.clear().add(v);},1473 getValue:function(c){return c.componentAt(0);},1474}1475function STableColumn(t,p){1476 p=propOverride(p,{label:'column',renderer:new SCellRenderer(),items:null,sort:false,search:false});1477 this.table=t;this.cindex=0;this.renderer=p.renderer;1478 SUIComponent.call(this,'th',p);1479};1480STableColumn.prototype=Object.create(SUIComponent.prototype,{1481 initNode:{1482 value:function(p){1483 SUIComponent.prototype.initNode.apply(this,[p]);1484 this.sort=p.sort;this.search=p.search;1485 this.header=sview({layout:sflow(HORIZONTAL)});1486 this.label=slabel(p.label,{class:['column-label']});1487 this.ctitle=sview({layout:sflow(HORIZONTAL)});1488 this.sorter=sview({layout:sflow(VERTICAL),class:['column-sorter']});1489 this.sorter.add(slabel(TRI_CHARS[TOP],{class:['asc','unselectable']}))1490 .add(slabel(TRI_CHARS[BOTTOM],{class:['desc','unselectable']}));1491 this.ctitle.add(sspace()).add(this.label).add(sspace());1492 this.header.add(this.ctitle).add(this.sorter);1493 this.setSuiID('tablecolumn').setMainClass('stable-column').add(this.header)1494 .setSortable(p.sort).setSearchable(p.search);1495 }1496 },1497 setLabel:{value:function(t){this.label.setText(t);return this;}},1498 setSortable:{value:function(s){this.sort=s;this.sorter.setVisible(s); return this;}},1499 setSearchable:{value:function(s){this.search=s; return this;}},1500 setRenderer:{value:function(r){this.renderer=r; return this;}}1501});1502STableColumn.prototype.constructor=STableColumn;1503function stablecolumn(a,b){return new STableColumn(a,b);};1504function STableRow(t,p){1505 p=propOverride(p,{values:[]})1506 this.table=t;this.rindex=0;this.cells=[];1507 SUIComponent.call(this,'tr',p);1508};1509STableRow.prototype=Object.create(SUIComponent.prototype,{1510 initNode:{1511 value:function(p){1512 SUIComponent.prototype.initNode.apply(this,[p]);1513 this.setSuiID('tablerow').addClass('stable-row').addCell({value:''});1514 for(var c=1;c<this.table.columns.length;c++) {this.addCell({value:p.values[c-1]});}1515 this.cells[0].setMainClass('row-header').setVisible(this.table.showRowHeader);1516 }1517 },1518 addCell:{value:function(c){1519 if(c.suiid) {this.cells.push(c);this.add(c);}1520 else {1521 var c_=stablecell(this.table,this,this.table.columns[this.cells.length],c);1522 this.cells.push(c_);this.add(c_);1523 }1524 return this;1525 }},1526 cellAt:{value:function(i){return this.cells[i];}}1527});1528STableRow.prototype.constructor=STableRow;1529function stablerow(a,b){return new STableRow(a,b);};1530function STableCell(t,r,c,p){1531 p=propOverride(p,{value:null});1532 this.table=t;this.row=r;this.column=c;1533 SUIComponent.call(this,'td',p);1534};1535STableCell.prototype=Object.create(SUIComponent.prototype,{1536 initNode:{1537 value:function(p){1538 SUIComponent.prototype.initNode.apply(this,[p]);1539 this.setSuiID('tablecell').setMainClass('stable-cell');1540 this.column.renderer.render(this,p);1541 }1542 },1543 setValue:{value:function(v){this.column.renderer.setValue(this,v);}},1544 value:{value:function(){this.column.renderer.getValue(this);}}1545});1546STableCell.prototype.constructor=STableCell;1547function stablecell(a,b,c,d){return new STableCell(a,b,c,d);};1548function STable(p){1549 p=propOverride(p,{columns:null,rows:null,load:null,editable:false,selectType:'cell',showRowHeader:false});1550 SUIComponent.call(this,'table',p);1551};1552STable.prototype=Object.create(SUIComponent.prototype,{1553 initNode:{1554 value:function(p){1555 SUIComponent.prototype.initNode.apply(this,[p]);1556 const Cls=this;1557 this.header=suic('thead',{class:['table-header']});1558 this.body=suic('tbody',{class:['table-body']});1559 this.footer=suic('tfoot',{class:['table-footer']})1560 this.colview=suic('tr',{class:['column-header']});1561 this.header.add(this.colview);1562 this.editable=p.editable;this.showRowHeader=p.showRowHeader;this.selectType=p.selectType;1563 this.columns=[];this.rows=[];1564 this.setSuiID('table').setMainClass('stable').add(this.header).add(this.body).add(this.footer).addColumn({label:''});1565 if(p.columns&&p.columns.length){1566 for(var c=0;c<p.columns.length;c++){ this.addColumn(p.columns[c]); }1567 }1568 if(p.rows&&p.rows.length){1569 for(var r=0;r<p.rows.length;r++){ this.addRow(p.rows[r]); }1570 }1571 if(p.load) {1572 var r=sget(p.load,'json');1573 r.then(function(d){Cls.setData(d);},function(e){console.error(e);});1574 }1575 this.columns[0].setMainClass('table-corner');1576 this.setRowHeader(p.showRowHeader);1577 }1578 },1579 columnAt:{value:function(i){return this.columns[i];}},1580 columnCount:{value:function(){return this.columns.length;}},1581 addColumn:{value:function(c){1582 if(c.suiid){this.columns.push(c);this.colview.add(c);}1583 else {var c_=stablecolumn(this,c);this.columns.push(c_);this.colview.add(c_);}1584 return this;1585 }},1586 setColumn:{value:function(i,c){1587 const j=this.colview.components.indexOf(this.columns[i]);1588 this.colview.remove(this.columns[i]);1589 this.columns[i]=c;1590 this.colview.insert(j,this.columns[i]);1591 return this;1592 }},1593 setColumns:{value:function(c){1594 this.clearColumns();1595 for(var i in c){this.addColumn(i);}1596 return this;1597 }},1598 colunmIndex:{value:function(c){return this.columns.indexOf(c);}},1599 clearColumns:{value:function(){1600 this.colview.clear();this.clolumns=[];return this;1601 }},1602 rowAt:{value:function(i){return this.rows[i];}},1603 rowCount:{value:function(){return this.rows.length;}},1604 addRow:{value:function(r){1605 if(r.suiid) {this.rows.push(r);this.body.add(r);}1606 else {1607 var r_=null;1608 if(r instanceof Array) r_=stablerow(this,{values:r});1609 else r_=stablerow(this,r);1610 this.rows.push(r_);this.body.add(r_);1611 }1612 return this;1613 }},1614 setRow:{value:function(i,r){1615 const j=this.body.components.indexOf(this.rows[i]);1616 this.body.remove(this.rows[i]);1617 this.rows[i]=r;1618 this.body.insert(j,this.row[i]);1619 return this;1620 }},1621 setRows:{value:function(r){1622 this.clearRows();1623 for(var i in r){this.addRow(i);}1624 return this;1625 }},1626 rowIndex:{value:function(r){return this.rows.indexOf(r);}},1627 clearRows:{value:function(){1628 this.body.clear();1629 this.rows=[];1630 return this;1631 }},1632 setData:{value:function(d){this.setColumns(d.columns);this.setRows(d.rows);}},1633 cellAt:{value:function(i,j){return this.rows[i].cellAt(j);}},1634 setCell:{value:function(r,c,v){this.columns[c].renderer.setValue(this.rows[r].cellAt(c),v);return this;}},1635 setRowHeader:{value:function(b){this.showRowHeader=b;this.columns[0].setVisible(b);}},1636});1637STable.prototype.constructor=STable;1638function stable(a){return new STable(a);};1639function STableView(p){1640 p=propOverride(p,{table:null,paging:true,count:20,current:1,});1641 SUIComponent.call(this,'table',p);1642};1643STableView.prototype=Object.create(SUIComponent.prototype,{1644 initNode:{1645 value:function(p){1646 SUIComponent.prototype.initNode.apply(this,[ p ]);1647 this.header=null;this.main=null;this.footer=null;1648 }1649 },1650 currentPage:{value:function(){return this.current;}},1651 pageCount:{value:function(){ return null;}},1652});1653STableView.prototype.constructor=STableView;1654function stableview(a){return new STableView(a);};1655function STreeNode(p){1656 p=propOverride(p,{layout:sflow(VERTICAL),style:NORMAL_TREE,label:'item',leaf:true,state:false,icon:null,children:[]});1657 this.style=p.style;this.leaf=p.leaf;this.rootview=null;1658 SUIComponent.call(this,'div',p);1659};1660STreeNode.prototype=Object.create(SUIComponent.prototype,{1661 initNode:{1662 value:function(p){1663 SUIComponent.prototype.initNode.apply(this,[p]);1664 const Cls=this;1665 this.layer=0;1666 this.state=false;1667 this.icons=null;1668 this.action=p.action;1669 this.space=spanel();1670 this.hpane=spanel({layout:sflow(HORIZONTAL),class:['tnode-header']});1671 this.label=slabel(p.label,{class:['tnode-label','unresponsible','unselectable']});1672 this.toggle=sview({class:['tnode-icon','unresponsible','unselectable']});1673 if(this.style===NORMAL_TREE){1674 this.setMainClass('stree-node');1675 if(p.icon) this.icons=[parseImage(p.icon[0]),parseImage(p.icon[1]),parseImage(p.icon[2])];1676 else this.icons=[parseImage(''),parseImage(TRI_CHARS[RIGHT]),parseImage(TRI_CHARS[BOTTOM])];1677 }1678 else if(this.style===FILE_TREE){1679 this.setMainClass('sfile-node');1680 if(p.icon) this.icons=[parseImage(p.icon[0]),parseImage(p.icon[1]),parseImage(p.icon[2])];1681 else this.icons=[parseImage('icon:insert_drive_file'),parseImage('icon:folder'),parseImage('icon:folder_open')];1682 }1683 if(this.leaf) this.toggle.add(this.icons[0]);1684 this.hpane.add(this.space).add(this.toggle).add(this.label);1685 this.hpane.node.onclick=function(e){1686 if(!Cls.leaf) Cls.setState(!Cls.state);1687 if(Cls.action) Cls.action(e);1688 }1689 this.children=sview({layout:sflow(VERTICAL),class:['tree-children']});1690 if(!this.leaf&&p.children.length){1691 for (var c=0;c<p.children.length;c++){this.addNode(p.children[c]);}1692 }1693 this.setSuiID('treenode').add(this.hpane).add(this.children).setState(p.state);1694 }1695 },1696 setRootView:{value:function(v){this.rootview=v;return this;}},1697 setLayer:{value:function(l){1698 this.layer=l;this.space.setWidth(l+'rem');1699 for(var c=0;c<this.children.components.length;c++){this.children.components[c].setLayer(l+1);}return this;1700 }},1701 addNode:{value:function(n){1702 if(n.suiid) {1703 n.setRootView(this.rootview);1704 n.setLayer(this.layer+1);1705 this.children.add(n);1706 }1707 else this.addNode(streenode(n));1708 if(this.leaf) this.leaf=false; 1709 return this;1710 }},1711 open:{value:function(){this.setState(true);}},1712 close:{value:function(){this.setState(false);}},1713 setState:{value:function(s){1714 if(this.leaf) return;1715 this.state=s;1716 this.toggle.clear();1717 this.toggle.add(this.icons[s?2:1]);1718 this.children.setVisible(s);1719 return this;1720 }}1721});1722STreeNode.prototype.constructor=STreeNode;1723function streenode(a){return new STreeNode(a);};1724function STreeView(p){1725 p=propOverride(p,{root:null,showRoot:false});1726 SUIComponent.call(this,'div',p);1727};1728STreeView.prototype=Object.create(SUIComponent.prototype,{1729 initNode:{1730 value:function(p){1731 SUIComponent.prototype.initNode.apply(this,[p]);1732 this.showRoot=p.showRoot;1733 this.root=null;1734 if(p.root){1735 if(p.root.suiid) this.root=p.root;1736 else this.root=streenode(p.root);1737 }1738 else this.root=streenode({label:'root'});1739 this.root.setRootView(this);1740 this.root.setLayer(p.showRoot?0:-1);1741 this.setSuiID('treeview').setMainClass('stree-view').update();1742 }1743 },1744 update:{value:function(){1745 this.clear();1746 if(this.root){1747 if(this.showRoot) this.add(this.root);1748 else this.add(this.root.children);1749 }1750 else return;1751 }},1752 setRoot:{value:function(r){this.root=r;this.update();return this;}}1753});1754STreeView.prototype.constructor=STreeView;1755function streeview(a){return new STreeView(a);};1756function SMenuItem(p){1757 p=propOverride(p,{style:S_LABEL|S_ICON|S_MODIFIER,state:false,label:'',icon:null,direction:HORIZONTAL,expand:NONE,shortcut:null,submenu:false,items:null,action:null});1758 p.layout=sflow(p.direction);1759 SUIComponent.call(this,'div',p);1760};1761SMenuItem.prototype=Object.create(SUIComponent.prototype, {1762 initNode: {1763 value: function(p){1764 SUIComponent.prototype.initNode.apply(this,[p]);1765 const Cls=this;this.style=p.style;this.active=false;this.state=null;this.expand=p.expand;//this.focused=false;1766 this.toggle=slabel('',{class:['menu-toggle','unselectable','unresponsible']});1767 this.label=null;this.icon=null;this.modify=null;this.submenu=null;1768 if(p.icon) this.icon=parseImage(p.icon).addClass('menu-icon');1769 else this.icon=slabel('',{class:['menu-icon','unselectable','unresponsible']});1770 this.label=slabel(p.label,{class: ['menu-label','unselectable','unresponsible']});1771 if(this.hasClass('vertical')) this.label.addClass('vtext');1772 if(p.submenu){1773 this.submenu=p.submenu;this.submenu.setVisible(false);1774 this.modify=slabel(TRI_CHARS[p.expand],{class: ['menu-expand','unselectable','unresponsible']});1775 this.add(this.submenu);1776 }1777 else if((this.style&S_MODIFIER)&&p.shortcut){1778 var sc=new SShortCut(p.shortcut,p.action);1779 SC_MANAGER.register(sc);1780 this.modify=slabel(sc.toString(),{class:['menu-shortcut','unselectable','unresponsible']});1781 }1782 else this.modify=slabel('');1783 if(!(p.style&S_TOGGLE)) this.toggle.setVisible(false);1784 if(!(p.style&S_ICON)) this.icon.setVisible(false);1785 if(!(p.style&S_LABEL)) this.label.setVisible(false);1786 if(!(p.style&S_MODIFIER)) this.modify.setVisible(false);1787 this.setSuiID('menuitem').setMainClass('smenu-item').setAction(p.action).setState(p.state)1788 .add(this.toggle).add(this.icon).add(this.label).add(sspace()).add(this.modify);1789 this.node.onclick=function(e){1790 e.stopPropagation();1791 if(Cls.parent.suiid==='menubar'&&Cls.submenu){1792 Cls.setActive(!Cls.active);1793 if(Cls.active){1794 Cls.parent.setActive(true);1795 Cls.parent.select(Cls);1796 Cls.showMenu();1797 }1798 else {1799 Cls.parent.setActive(false);1800 Cls.parent.select(null);1801 Cls.hideMenu();1802 }1803 }1804 else if(Cls.parent.suiid==='menu'&&Cls.submenu){1805 Cls.setActive(!Cls.active);1806 if(Cls.active){1807 Cls.parent.setActive(true);1808 Cls.parent.select(Cls);1809 Cls.showMenu();1810 }1811 else {1812 Cls.parent.setActive(false);1813 Cls.parent.select(null);1814 Cls.hideMenu();1815 }1816 }1817 if(Cls.parent.suiid==='menu'){1818 if(Cls.parent.mode==='select'){1819 Cls.parent.select(Cls);1820 Cls.setActive(false);1821 Cls.hideMenu();1822 }1823 if(Cls.action) Cls.action(e);1824 Cls.parent.close();1825 }1826 }1827 this.node.onmouseover=function(e){1828 if(Cls.parent.suiid==='menubar'&&Cls.parent.active&&Cls.submenu){1829 Cls.parent.select(Cls);Cls.setActive(true).showMenu();1830 }1831 else if(Cls.parent.suiid==='menu'&&Cls.submenu){1832 Cls.setActive(true).showMenu();1833 }1834 }1835 /*1836 this.node.onmouseleave=function(e){1837 if(Cls.parent.suiid==='menubar'&&Cls.active){1838 Cls.setActive(false).hideMenu();1839 }1840 else if(Cls.parent.suiid==='menu'&&Cls.active){1841 Cls.setActive(false).hideMenu();1842 }1843 }1844 */1845 }1846 },1847 setActive:{value:function(a){1848 if(a){this.addClass('active');}else{this.removeClass('active');}1849 this.active=a;return this;1850 }}, 1851 setState: {value:function(s){1852 this.state=s;1853 if(this.style&S_TOGGLE){1854 if(this.state) this.toggle.setText(CHECK_CHAR);1855 else this.toggle.setText('');1856 }1857 return this;1858 }},1859 showMenu: { value: function(){1860 if(this.submenu){1861 this.submenu.setVisible(true).setX(0).setY(0);1862 if(this.expand===BOTTOM||this.expand===TOP){1863 if(document.body.clientWidth<this.X()+this.submenu.width()) this.submenu.setX(this.X()+this.width()-this.submenu.width());1864 else this.submenu.setX(this.X());1865 if(this.expand===BOTTOM) this.submenu.setY(this.Y()+this.height());1866 else this.submenu.setY(this.Y()-this.submenu.height());1867 }1868 else {1869 if(document.body.clientHeight<this.Y()+this.submenu.height()) this.submenu.setY(document.body.clientHeight-this.submenu.height());1870 else this.submenu.setY(this.Y());1871 if(this.expand===RIGHT) this.submenu.setX(this.X()+this.width());1872 else this.submenu.setX(this.X()-this.submenu.width());1873 }1874 CURRENT_MENU=this.submenu;1875 }1876 return this;1877 }},1878 hideMenu: {value:function(){if(this.submenu){this.submenu.setVisible(false);} return this;}},1879 setLocale:{value:function(l){SUIComponent.prototype.setLocale.apply(this,[l]);if(this.submenu)this.submenu.setLocale(l);}},1880 setAction:{value:function(a){this.action=a;return this;}}1881});1882SMenuItem.prototype.constructor=SMenuItem;1883function smenuitem(a){return new SMenuItem(a);}1884function SMenu(p){1885 p=propOverride(p,{direction:VERTICAL,mode:null,items:[]});1886 p.layout=sflow(p.direction);SUIComponent.call(this,'div',p);1887}1888SMenu.prototype=Object.create(SUIComponent.prototype, {1889 initNode:{value:function(p){1890 SUIComponent.prototype.initNode.apply(this,[p]);1891 const Cls=this;this.mode=p.mode;this.active=false;this.selected=null;1892 this.setSuiID('menu').setMainClass('smenu').setItems(p.items);1893 }},1894 showAt: {1895 value: function(u,l){1896 this.setVisible(true).setActive(true).setX(0).setY(0);1897 if(l===BOTTOM||l===TOP){1898 if(document.body.clientWidth<u.X()+this.width()) this.setX(u.X()+u.width()-this.width());1899 else this.setX(u.X());1900 if(l===BOTTOM) this.setY(u.Y()+u.height());1901 else this.setY(u.Y()-this.height());1902 }1903 else {1904 if(document.body.clientHeight<u.Y()+this.height()) this.setY(document.body.clientHeight-this.height());1905 else this.setY(u.Y());1906 if(l===RIGHT) this.setX(u.X()+u.width());1907 else this.setX(u.X()-this.width());1908 }1909 CURRENT_MENU=this;1910 }},1911 hide:{value:function(){this.setVisible(false).setActive(false);CURRENT_MENU=null;}},1912 close:{ value:function(){1913 this.hide();1914 var p=this.parent;1915 while(true) {1916 if(p.suiid==='menuitem') {1917 p.setActive(false);p=p.parent;1918 }1919 else if(p.suiid==='menu') {1920 p.setActive(false);p.hide();p=p.parent;1921 }1922 else if(p.suiid==='menubar') {1923 p.setActive(false);p=p.parent;1924 }1925 else break;1926 }1927 }},1928 setActive:{value:function(a){1929 if(a){this.addClass('active');}else{this.removeClass('active');}1930 this.active=a;return this;1931 }}, 1932 select:{value:function(i){1933 if(this.selected) this.selected.setState(false);1934 this.selected=i;this.selected.setState(true);1935 }},1936 selectedIndex:{value:function(){return this.selected?this.components.indexOf(this.selected):null;}},1937 setItems:{value:function(i){if(i.length){for(var v=0;v<i.length;v++){this.addItem(i[v]);}}}},1938 addItem: {1939 value: function(i){1940 if(i.suiid){1941 this.add(i);1942 if(this.mode==='select'&&i.state) this.selected=i;1943 }1944 else {1945 if(i.type==='space') this.add(sspace());1946 else if(i.type==='bar') this.add(sbar(this.hasClass('vertical')?HORIZONTAL:VERTICAL));1947 else {1948 var i_=smenuitem(i);1949 this.add(i_);1950 if(this.mode==='select'&&i.state) this.selected=i_;1951 }1952 }1953 }1954 },1955 setMode:{value:function(m){this.mode=m;}}1956});1957SMenu.prototype.constructor=SMenu;1958function smenu(a){return new SMenu(a);}1959function SMenuBar(p){1960 p=propOverride(p,{direction:HORIZONTAL,items:[]});1961 this.direction=p.direction;1962 p.layout=sflow(this.direction);1963 SUIComponent.call(this,'div',p);1964}1965SMenuBar.prototype=Object.create(SUIComponent.prototype, {1966 initNode:{value:function(p){1967 SUIComponent.prototype.initNode.apply(this,[p]);1968 var Cls=this;this.active=false;this.selected=null;1969 this.setSuiID('menubar').addClass('smenu-bar').setItems(p.items);1970 this.node.onclick=function(e){1971 if(Cls.active&&Cls.selected) Cls.select(null);1972 };1973 }},1974 select:{value:function(i){1975 if(this.selected){this.selected.hideMenu().setActive(false);}1976 this.selected=i;1977 this.setActive(this.selected?true:false);1978 }},1979 setActive:{value:function(a){this.active=a;if(this.active){this.addClass('active');}else{this.removeClass('active');} return this;}},1980 setItems:{value:function(i){if(i.length) for(var v=0;v<i.length;v++){this.addItem(i[v]);}}},1981 addItem:{value:function(i){1982 if(i.suiid) this.add(i);1983 else {1984 if(i.type==='space') this.add(sspace());1985 else if(i.type==='bar') this.add(sbar(this.direction==VERTICAL?HORIZONTAL:VERTICAL));1986 else this.add(smenuitem(i));1987 }1988 return this;1989 }}1990});1991SMenuBar.prototype.constructor=SMenuBar;1992function smenubar(a){return new SMenuBar(a);}1993function SToolItem(p){1994 p=propOverride(p,{style:S_ICON|S_LABEL,mode:'button',icon:'',label:'item',state:false,available:true,action:null,submenu:null,direction:VERTICAL,expand:BOTTOM});1995 this.direction=p.direction;p.layout=sflow(p.direction);1996 SUIComponent.call(this,'div',p);1997};1998SToolItem.prototype=Object.create(SUIComponent.prototype, {1999 initNode:{value:function(p){2000 SUIComponent.prototype.initNode.apply(this,[p]);2001 const Cls=this;this.mode=p.mode;this.style=p.style;this.available=p.available;2002 this.icon=null;this.label=null;this.state=false;this.submenu=null;2003 if(p.icon) this.icon=parseImage(p.icon);2004 else this.icon=slabel('',{class:['unselectable','unresponsible']});2005 this.icon.addClass('tool-icon');2006 this.label=slabel(p.label,{class: ['tool-label','unselectable','unresponsible']});2007 if(!(p.style&S_ICON)) this.icon.setVisible(false);2008 if(!(p.style&S_LABEL)) this.label.setVisible(false);2009 this.setSuiID('toolitem').setMainClass('stool-item').addClass('align-center')2010 .setAvailable(p.available).setAction(p.action)2011 .add(this.icon).add(this.label);2012 if(p.mode==='toggle') this.setState(p.state);2013 if(p.submenu){2014 p.submenu.setVisible(false);this.submenu=p.submenu;2015 if(p.mode==='select') p.submenu.setMode(S_SELECT);2016 this.add(this.submenu);2017 }2018 this.node.onclick=function(e){2019 e.stopPropagation();2020 if(Cls.hasClass('unavailable')) return;2021 if(p.mode==='toggle') Cls.setState(!Cls.state);2022 else if(Cls.submenu){2023 if(Cls.submenu.active) Cls.submenu.hide();2024 else Cls.submenu.showAt(Cls,p.expand);2025 }2026 if(Cls.action) Cls.action(e);2027 };2028 }2029 },2030 setIcon:{value:function(i){2031 if(this.icon) {2032 if(this.icon.suiid==='text') this.icon.setText(i);2033 else if(this.icon.suiid==='icon') this.icon.setIcon(i.substr(i.indexOf(':')+1));2034 else if(this.icon.suiid==='image') this.icon.setSrc(i.substr(i.indexOf(':')+1));2035 }2036 }},2037 setState:{value:function(s){2038 if(s){this.addClass('active');}else{this.removeClass('active');}2039 this.state=s;return this;2040 }},2041 setAvailable:{value:function(a){2042 if(a){this.removeClass('unavailable');}else{this.addClass('unavailable');}2043 this.available=a;return this;2044 }},2045 setAction:{value:function(a){this.action=a;return this;}}2046});2047SToolItem.prototype.constructor=SToolItem;2048function stoolitem(a){return new SToolItem(a);};2049function SToolBar(p){2050 p=propOverride(p,{autohide:false,direction:HORIZONTAL,items:[]});2051 p.layout=sflow(p.direction);this.direction=p.direction;2052 SUIComponent.call(this,'div',p);2053};2054SToolBar.prototype=Object.create(SUIComponent.prototype, {2055 initNode:{value:function(p){2056 SUIComponent.prototype.initNode.apply(this,[p]);2057 const Cls=this;this.autohide=p.autohide;2058 this.setSuiID('toolbar').setMainClass('stool-bar');2059 if(this.autohide){2060 this.addClass('hide');2061 this.node.onmouseover=function(e){Cls.show();}2062 this.node.onmouseleave=function(e){Cls.hide();}2063 }2064 for(var i=0;i<p.items.length;i++){ this.addItem(p.items[i]);}2065 }},2066 addItem:{value:function(i){2067 if(i.suiid) this.add(i);2068 else{2069 if(i.type==='space') this.add(sspace());2070 else if(i.type==='bar') this.add(sbar(this.direction==HORIZONTAL?VERTICAL:HORIZONTAL));2071 else this.add(stbitem(i));2072 }2073 return this;2074 }},2075 show:{value:function(){this.removeClass('hide');}},2076 hide:{value: function(){this.addClass('hide');}}2077});2078SToolBar.prototype.constructor=SToolBar;2079function stoolbar(a){return new SToolBar(a);};2080function SLabel(t,p){p=propOverride(p,{});SUIComponent.call(this,'span',p);this.setText(t);};2081SLabel.prototype=Object.create(SUIComponent.prototype, {2082 initNode:{value:function(p){2083 SUIComponent.prototype.initNode.apply(this,[p]);2084 this.txt='';this.setSuiID('label').setMainClass('slabel');2085 }},2086 text:{value:function(){return this.node.innerText;}},2087 setText:{value:function(t){this.txt=t;2088 if(this.isLocalized()&&localizable(this.locale,t)){this.node.innerHTML=LOCAL_LABEL[t][this.locale];}2089 else{this.node.innerHTML=t;} return this;2090 }},2091 setLocale:{value:function(l){SUIComponent.prototype.setLocale.apply(this,[l]); this.setText(this.txt); return this;}}2092});2093SLabel.prototype.constructor=SLabel;2094function slabel(a,b){return new SLabel(a,b);};2095function SLinkLabel(t,u,p){p=propOverride(p,{newtab:false});SUIComponent.call(this,'a',p);this.setText(t).setURL(u);};2096SLinkLabel.prototype=Object.create(SUIComponent.prototype, {2097 initNode:{value:function(p){2098 SUIComponent.prototype.initNode.apply(this,[p]);2099 this.txt='';this.setSuiID('link').setMainClass('slink');2100 if(p.newtab) this.setAttribute({target:'_blank',rel:'noopener noreferrer'});2101 }},2102 text:{value:function(){return this.node.innerText;}},2103 setText:{value:function(t){this.txt=t;2104 if(this.isLocalized()&&localizable(this.locale,t)){this.node.innerText=LOCAL_LABEL[t][this.locale];}2105 else{this.node.innerText=t;}return this;2106 }},2107 setURL:{value:function(u){if(u){this.node.href=u;} else{this.node.href='javascript:void(0)'} return this;}},2108 setLocale:{value:function(l){2109 SUIComponent.prototype.setLocale.apply(this,[l]);2110 this.setText(this.txt); return this;2111 }}2112});2113SLinkLabel.prototype.constructor=SLinkLabel;2114function slink(a,b,c){return new SLinkLabel(a,b,c);};2115function SIcon(i,p){p=propOverride(p,{});SUIComponent.call(this,'i',p);this.node.innerText=i;};2116SIcon.prototype=Object.create(SUIComponent.prototype, {2117 initNode:{value:function(p){2118 SUIComponent.prototype.initNode.apply(this,[p]);2119 this.setSuiID('icon').setMainClass('sicon');2120 }},2121 setIcon:{value:function(i){this.node.innerText=i;}}2122});2123SIcon.prototype.constructor=SIcon;2124function sicon(a,b){return new SIcon(a,b);};2125function SForm(p){p=propOverride(p,{key:'api',method:'post'});SUIComponent.call(this,'form',p);};2126SForm.prototype=Object.create(SUIComponent.prototype,{2127 initNode:{value:function(p){2128 SUIComponent.prototype.initNode.apply(this,[p]);2129 this.setSuiID('form').setMainClass('sform').setAttribute({action:p.key,method:p.method});2130 }},2131 submit:{value:function(){this.node.submit();}},2132 setKey:{value:function(k){this.node.action=k;return this;}},2133 setMethod:{value:function(m){this.node.method=m;return this;}},2134});2135SForm.prototype.constructor=SForm;2136function sform(a){return new SForm(a);};2137function SInput(t,p){p=propOverride(p,{value:null});SUIComponent.call(this,'input',p);this.node.type=t;};2138SInput.prototype=Object.create(SUIComponent.prototype,{2139 initNode:{value:function(p){2140 SUIComponent.prototype.initNode.apply(this,[p]);2141 this.setSuiID('input').setMainClass('sinput').setValue(p.value);2142 }},2143 value:{value:function(){return this.node.value;}},2144 setValue:{value:function(v){if(v) this.node.value=v;return this;}},2145 setType:{value:function(t){this.node.type=t;return this;}}2146});2147SInput.prototype.constructor=SInput;2148function sinput(a,b){return new SInput(a,b);};2149function STextField(p){2150 p=propOverride(p,{type:'text',label:'',value:'',placeholder:'',selectable:true,editable:true,required:false});2151 SUIComponent.call(this,'label',p);2152};2153STextField.prototype=Object.create(SUIComponent.prototype, {2154 initNode:{value:function(p){2155 SUIComponent.prototype.initNode.apply(this,[p]);2156 this.label=slabel(p.label,{class:['field-label']});this.input=sinput(p.type,p);2157 if(p.type==='number'){this.setSuiID('numericfield').setMainClass('snumber-field');}2158 else if(p.type==='password'){this.setSuiID('passfield').setMainClass('spass-field');}2159 else if(p.type==='text'){this.setSuiID('textfield').setMainClass('stext-field');}2160 this.add(this.label).add(this.input).setValue(p.value).setPlaceholder(p.placeholder).setSelectable(p.selectable).setEditable(p.editable).setRequired(p.required);2161 }},2162 placeholder:{value:function(){return this.input.node.placeholder;}},2163 setValue:{value:function(v){if(v) this.input.node.value=v; return this;}},2164 setPlaceholder:{value:function(t){if(t) this.input.node.placeholder=t; return this;}},2165 isSelectable:{value:function(){return !this.hasClass('unselectable');}},2166 setSelectable:{value:function(s){if(s) this.removeClass('unselectable'); else{this.addClass('unselectable');} return this;}},2167 isEditable:{value:function(){return !this.input.node.readOnly;}},2168 setEditable:{value:function(e){this.input.node.readOnly=!e; return this;}},2169 isReqired:{value:function(){return this.input.node.required;}},2170 setRequired:{value:function(r){this.input.node.required=r; return this;}}2171});2172STextField.prototype.constructor=STextField;2173function stextfield(a){return new STextField(a);};2174function STextArea(p){2175 p=propOverride(p,{label:'',value:'',placeholder:'',selectable:true,editable:true,required:false});2176 SUIComponent.call(this,'label',p);2177};2178STextArea.prototype=Object.create(SUIComponent.prototype, {2179 initNode:{2180 value:function(p){2181 SUIComponent.prototype.initNode.apply(this,[{}]);2182 this.label=slabel(p.label, {class:['area-label','valign-top']});this.area=sinput('textarea',p);2183 this.setSuiID('textarea').setMainClass('stext-area').add(this.label).add(this.area).setValue(p.text).setPlaceholder(p.placeholder).setSelectable(p.selectable).setEditable(p.editable).setRequired(p.required);2184 }2185 },2186 value:{value:function(){return this.area.node.innerText;}},2187 setValue:{value:function(txt){if(txt!=undefined) this.area.node.innerText=txt; return this;}},2188 placeholder:{value:function(){return this.node.placeholder;}},2189 setPlaceholder:{value:function(txt){if(txt!=undefined) this.node.placeholder=txt; return this;}},2190 isSelectable:{value:function(){return !this.hasClass('unselectable');}},2191 setSelectable:{value:function(sel){2192 if(sel){this.removeClass('unselectable');}2193 else{this.addClass('unselectable');} return this;2194 }},2195 isEditable:{value:function(){return !this.node.readOnly;}},2196 setEditable:{value:function(edit){this.node.readOnly=!edit; return this;}},2197 isReqired:{value:function(){return this.node.required;}},2198 setRequired:{value:function(req){this.node.required=req; return this;}}2199});2200STextArea.prototype.constructor=STextArea;2201function stextarea(a){return new STextArea(a);};2202function STextView(p){2203 p=propOverride(p,{value:'',selectable:true,editable:false});2204 SUIComponent.call(this,'p',p);2205};2206STextView.prototype=Object.create(SUIComponent.prototype, {2207 initNode:{value:function(p){2208 SUIComponent.prototype.initNode.apply(this,[p]);2209 this.setSuiID('textview').setMainClass('stext-view').setValue(p.value).setSelectable(p.selectable).setEditable(p.editable);2210 }},2211 value:{value:function(){return this.node.innerHTML;}},2212 setValue:{value:function(t){this.node.innerHTML=t; return this;}},2213 isSelectable:{value:function(){return !this.hasClass('unselectable');}},2214 setSelectable:{value:function(s){2215 if(s){this.removeClass('unselectable');}2216 else{this.addClass('unselectable');} return this;2217 }},2218 isEditable:{value:function(){return this.node.contentEditable;}},2219 setEditable:{value:function(e){this.node.contentEditable=e; return this;}}2220});2221STextView.prototype.constructor=STextView;2222function stextview(a){return new STextView(a);};2223function SMathText(m,p){2224 p=propOverride(p,{});2225 SUIComponent.call(this,'code',p);2226 this.node.innerHTML=codedString('\\('+m+'\\)');2227};2228SMathText.prototype=Object.create(SUIComponent.prototype, {2229 initNode:{value:function(p){2230 SUIComponent.prototype.initNode.apply(this,[p]);2231 this.setSuiID('math').setMainClass('smath');2232 }},2233 value:{value:function(){return this.node.innerHTML;}},2234 setValue:{value:function(t){this.node.innerHTML='\\('+t+'\\)'; return this;}},2235});2236SMathText.prototype.constructor=SMathText;2237function smath(a,b){return new SMathText(a,b);};2238function SButton(p){2239 p=propOverride(p,{label:'',image:null,state:false,available:true,action:null,mode:null,style:S_LABEL});2240 if(p.mode) SUIComponent.call(this,'div',p);2241 else SUIComponent.call(this,'button',p);2242};2243SButton.prototype=Object.create(SUIComponent.prototype,{2244 initNode:{value:function(p){2245 SUIComponent.prototype.initNode.apply(this,[p]);2246 const Cls=this;this.state=null;this.available=null;this.action=null;2247 if(p.mode==='panel') {2248 this.content=p.content?p.content:spanel();2249 this.content.setMainClass('button-panel');2250 this.setMainClass('scustom-button').setDisplay('inline-block').add(this.content);2251 }2252 else if(p.mode==='push') this.setMainClass('spush-button').setDisplay('inline-block');2253 else if(p.mode==='toggle') {2254 if(p.image) this.image=[parseImage(p.image[0]),parseImage(p.icon[1])];2255 else this.image=[sicon('toggle_off'),sicon('toggle_on')];2256 this.image[0].addClass('button-image');2257 this.image[1].addClass('button-image');2258 this.setMainClass('stoggle-button').setDisplay('inline-block').setState(p.state);2259 }2260 else{2261 this.label=slabel(p.label,{class:['button-label','unselectable','unresponsible']});2262 this.setMainClass('sbutton').add(this.label);2263 }2264 this.node.onclick=function(e){2265 if(Cls.available){Cls.setState(!Cls.state);if(Cls.action){Cls.action(e);}}2266 };2267 this.setSuiID('button').setState(p.state).setAvailable(p.available).setAction(p.action);2268 }},2269 setLabel:{value:function(t){if(this.label){this.label.setText(t);} return this;}},2270 setLabels:{value:function(t){this.labels=t; return this;}},2271 setState:{value:function(s){2272 this.state=s;2273 if(this.image&&this.image.length==2) {this.clear();this.add(this.image[s?1:0]);}2274 if(this.state){this.addClass('active');}else{this.removeClass('active');} return this;2275 }},2276 setAvailable:{value:function(a){2277 this.available=a;if(a){this.removeClass('unavailable');} else{this.addClass('unavailable');} return this;2278 }},2279 setAction:{value:function(a){this.action=a; return this;}}2280});2281SButton.prototype.constructor=SButton;2282function sbutton(a){return new SButton(a);};2283function SRadioButton(p){p=propOverride(p,{label:'',state:false,available:true,action:null});SUIComponent.call(this,'label',p);};2284SRadioButton.prototype=Object.create(SUIComponent.prototype, {2285 initNode:{value:function(p){2286 SUIComponent.prototype.initNode.apply(this,[{}]);2287 this.label=slabel(p.label,{class:['sradio-label']});this.input=sinput('radio',p);2288 this.setSuiID('radio').setMainClass('sradio').add(this.input).add(this.label).setState(p.state).setAvailable(p.available).setAction(p.action);2289 }},2290 state:{value:function(){return this.input.node.checked;}},2291 setState:{value:function(s){this.input.node.checked=s;return this;}},2292 isAvailable:{value:function(){return !this.input.isAvailable();}},2293 setAvailable:{value:function(a){this.input.setAvailable(a);return this;}},2294 setAction:{value:function(a){if(a) this.input.node.onchange=a;return this;}}2295});2296SRadioButton.prototype.constructor=SRadioButton;2297function sradio(a){return new SRadioButton(a);};2298function SCheckBox(p){p=propOverride(p,{label:'',state:false,available:true,action:null});SUIComponent.call(this,'label',p);};2299SCheckBox.prototype=Object.create(SUIComponent.prototype, {2300 initNode:{value:function(p){2301 SUIComponent.prototype.initNode.apply(this, [{}]);2302 this.label=slabel(p.label,{class:['scheck-label']});this.input=sinput('checkbox',p);2303 this.setSuiID('checkbox').setMainClass('scheckbox').add(this.input).add(this.label).setState(p.state).setAvailable(p.available).setAction(p.action);2304 }},2305 state:{value:function(){return this.input.node.checked;}},2306 setState:{value:function(s){this.input.node.checked=s;return this;}},2307 isAvailable:{value:function(){return !this.input.isAvailable();}},2308 setAvailable:{value:function(a){this.input.setAvailable(a);return this;}},2309 setAction:{value:function(a){if(a) this.input.node.onchange=a;return this;}}2310});2311SCheckBox.prototype.constructor=SCheckBox;2312function scheck(a){return new SCheckBox(a);};2313function SSelectItem(p){2314 p=propOverride(p,{group:false,value:'item',label:'item'});2315 if(p.group) SUIComponent.call(this,'optgroup',p);2316 else SUIComponent.call(this,'option',p);2317};2318SSelectItem.prototype=Object.create(SUIComponent.prototype, {2319 initNode:{value:function(p){2320 SUIComponent.prototype.initNode.apply(this,[p]);2321 this.label=slabel(p.label);2322 if(p.group) this.setSuiID('selectgroup').setMainClass('sselect-group').add(this.label);2323 else this.setSuiID('selectitem').setMainClass('sselect-item').add(this.label).setValue(p.value);2324 }},2325 setLabel:{value:function(l){this.label.setText(l);return this;}},2326 value:{value:function(v){return this.node.value;}},2327 setValue:{value:function(v){this.node.value=v;return this;}},2328 setSelected:{value:function(s){this.node.selected=s;return this;}}2329});2330SSelectItem.prototype.constructor=SSelectItem;2331function sselitem(a){return new SSelectItem(a);};2332function SSelector(p){p=propOverride(p,{multi:false,selected:1,items:[],action:null});SUIComponent.call(this,'select',p);};2333SSelector.prototype=Object.create(SUIComponent.prototype, {2334 initNode:{value:function(p){2335 SUIComponent.prototype.initNode.apply(this,[p]);2336 const Cls=this;this.multi=p.multi;2337 this.setSuiID('selector').setMainClass(['sselector']).setMultiSelectable(p.multi).setOptions(p.items).selectAt(p.selected).setAction(p.action);2338 }},2339 setMultiSelectable:{value:function(m){this.node.multiple=m; return this;}},2340 setOptions:{value:function(o){for(var i=0;i<o.length;i++){this.addOption(o[i]);} return this;}},2341 select:{value:function(o){this.components[o].node.selected=true; return this;}},2342 selectValue:{value:function(v){for(var o=0;o<this.components.length;o++){if(this.components[o].node.value===v){this.components[o].node.selected=true;break;}} return this;}},2343 selectAt:{value:function(i){if(i<=this.components.length){this.node.selectedIndex=i-1;} return this;}},2344 addOption:{value:function(o){2345 if(o.suiid==='selectitem'||o.suiid==='selectgroup'){this.add(o);}2346 else{this.add(sselitem(o));} return this;2347 }},2348 setAction:{value:function(a){if(a) this.node.onchange=function(e){a(e);}; return this;}},2349 selectedIndex:{value:function(){return this.node.selectedIndex;}},2350 selectedItem:{value:function(){return this.node.selectedOptions[0];}},2351 selectedItems:{value:function(){return this.node.selectedOptions;}}2352});2353SSelector.prototype.constructor=SSelector;2354function sselect(a){return new SSelector(a);};2355function SSlider(p){p=propOverride(p,{label:'',min:0,max:100,value:0,action:null});SUIComponent.call(this,'label',p);};2356SSlider.prototype=Object.create(SUIComponent.prototype, {2357 initNode:{value:function(p){2358 SUIComponent.prototype.initNode.apply(this,[{}]);2359 this.label=slabel(p.label,{class:['slider-label']});this.input=sinput('range',p);2360 this.setSuiID('slider').setMainClass('sslider').add(this.input).add(this.label).setMin(p.min).setMax(p.max).setValue(p.value).setAction(p.action);2361 }},2362 minValue:{value:function(){return this.input.node.min;}},2363 setMin:{value:function(m){this.input.node.min=m; return this;}},2364 maxValue:{value:function(){return this.input.node.max;}},2365 setMax:{value:function(m){this.input.node.max=m; return this;}},2366 current:{value:function(){return this.input.node.value;}},2367 setValue:{value:function(v){2368 this.input.node.value=v;this.input.node.caption=v;return this;2369 }},2370 setAction:{value:function(a){if(a) this.input.node.onchange=function(e){a(e);}; return this;}}2371});2372SSlider.prototype.constructor=SSlider;2373function sslider(a){return new SSlider(a);};2374function SProgress(p){2375 p=propOverride(p,{min:0,max:100,value:0,direction:HORIZONTAL,repaint:null});2376 this.direction=p.direction;SUIComponent.call(this,'div',p);2377};2378SProgress.prototype=Object.create(SUIComponent.prototype, {2379 initNode: {value:function(p){2380 SUIComponent.prototype.initNode.apply(this,[p]);2381 this.setSuiID('progress').setMainClass('sprogress');2382 this.min=p.min;this.max=p.max;this.value=p.value;this.spacer=sspace();2383 this.indicator=sview({width:'100%',height:'100%',class:['prog-indicator']});2384 this.repaint=p.repaint;2385 switch(this.direction){2386 case HORIZONTAL:2387 this.setLayout(sflow(HORIZONTAL)).addClass('horizontal').add(this.indicator).add(this.spacer);break;2388 case VERTICAL:2389 this.setLayout(sflow(VERTICAL)).addClass('vertical').add(this.spacer).add(this.indicator);break;2390 }2391 }},2392 getValue:{value:function(){return current;}},2393 setValue:{value: function(v){if(v<=this.max&&this.min<=v){this.value=v;this.update();} return this;}},2394 setAction:{value:function(a){if(a) this.input.node.onchange=function(e){a(e);}; return this;}},2395 update:{value:function(){2396 switch(this.direction){2397 case HORIZONTAL:2398 {2399 if(this.repaint) this.repaint(this.value);2400 else this.spacer.setWidth((1.0-(this.value-this.min)/(this.max-this.min))*100+'%');2401 }2402 break;2403 case VERTICAL:2404 {2405 if(this.repaint) this.repaint(this.value);2406 else this.spacer.setHeight((1.0-(this.value-this.min)/(this.max-this.min))*100+'%');2407 }2408 break;2409 default:2410 {2411 if(this.repaint){this.repaint(this.value);}2412 }2413 break;2414 }2415 }}2416});2417SProgress.prototype.constructor=SProgress;2418function sprogress(a){return new SProgress(a);};2419function STimer(d,f,r){this.thread=null;this.active=false;this.rep=r;this.duration=d;this.action=f;};2420STimer.prototype={2421 start:function(){2422 const Cls=this;2423 if(1<this.rep){this.thread=setInterval(function(){Cls.action(Cls.thread, Cls.rep);}, Cls.duration);}2424 else{this.thread=setTimeout(function(){Cls.action(Cls.thread);}, Cls.duration);}2425 },2426 stop:function(){if(1<this.rep){clearInterval(this.thread);}else{clearTimeout(this.thread);}}2427};2428function stimer(a,b,c){return new STimer(a,b,c);};2429////2430function SCalender(){2431};2432SCalender.prototype=Object.create(SUIComponent.prototype, {2433 initNode:{2434 value:function(p){2435 SUIComponent.prototype.initNode.apply(this,[{}]);2436 }2437 },2438});2439SCalender.prototype.constructor=SCalender;2440function SDatePicker(p){2441 if(p == null) p={};2442 p.sclass='datepicker';2443 if(p.class == undefined) p.class=['sdatepicker'];2444 else p.class.push('sdatepicker');2445 SUIComponent.call(this, 'input', p);2446};2447SDatePicker.prototype=Object.create(SUIComponent.prototype, {2448 initNode:{2449 value:function(p){2450 SUIComponent.prototype.initNode.apply(this, [ p ]);2451 this.node.type='date';2452 this.setFormat(p.format==undefined?'yyyy/mm/dd':p.format);2453 this.setValue(p.value==undefined?(new Date()).toDateString():p.value);2454 }2455 },2456 setFormat:{value:function(form){this.node.format=form;}},2457 setValue:{value:function(val){this.node.value=val;}}2458});2459SDatePicker.prototype.constructor=SDatePicker;2460////2461function SFileLoader(p){2462 p=propOverride(p,{id:'sfl',label:'file-select',filter:null,action:null});2463 this.accessible=true;this.files=null;2464 SUIComponent.call(this,'div',p);2465};2466SFileLoader.prototype=Object.create(SUIComponent.prototype, {2467 initNode:{value:function(p){2468 SUIComponent.prototype.initNode.apply(this,[{}]);2469 const Cls=this;2470 this.input=sinput('file',{id:p.id,visible:false});2471 this.input.node.onchange=function(e){2472 Cls.files=this.files;if(p.action){p.action(e);}2473 };2474 this.label=suic('label');2475 this.label.setMainClass('fl-label').add(slabel(p.label,{class:['unselectable','unresponsible']}));2476 this.label.node.htmlFor=p.id;2477 this.setSuiID('fileloader').setMainClass('sfileloader').setFilter(p.filter).add(this.input).add(this.label);2478 }},2479 setFilter: {value:function(f){if(f){this.input.node.accept=f;}return this;}}2480});2481SFileLoader.prototype.constructor=SFileLoader;...

defaults.ts

Source:defaults.ts

1import { isEmpty, isNil } from 'lodash-es';2import { SelectOption } from '@viaa/avo2-components';3import { FileUploadProps } from '../../../../shared/components/FileUpload/FileUpload';4import { WYSIWYGWrapperProps } from '../../../../shared/components/WYSIWYGWrapper/WYSIWYGWrapper';5import { WYSIWYG_OPTIONS_FULL_WITHOUT_ALIGN } from '../../../../shared/constants';6import i18n from '../../../../shared/translations/i18n';7import { UserGroupSelectProps } from '../../../shared/components';8import {9 Color,10 ContentBlockEditor,11 ContentBlockField,12 DefaultContentBlockState,13 PaddingFieldState,14} from '../../../shared/types';15import {16 GET_ALIGN_OPTIONS,17 GET_BACKGROUND_COLOR_OPTIONS,18 GET_FOREGROUND_COLOR_OPTIONS,19} from '../../content-block.const';20// Block config defaults21export const BLOCK_STATE_DEFAULTS = (22 state: Partial<DefaultContentBlockState> = {}23): DefaultContentBlockState => {24 return {25 backgroundColor: state.backgroundColor || Color.Transparent,26 headerBackgroundColor: state.headerBackgroundColor || Color.Transparent,27 padding:28 state.padding ||29 ({30 top: 'small',31 bottom: 'small',32 } as PaddingFieldState),33 margin:34 state.margin ||35 ({36 top: 'none',37 bottom: 'none',38 } as PaddingFieldState),39 userGroupIds: state.userGroupIds || [],40 };41};42export const BLOCK_FIELD_DEFAULTS = () => ({43 backgroundColor: BACKGROUND_COLOR_FIELD(),44 padding: PADDING_FIELD(),45 margin: PADDING_FIELD(i18n.t('admin/content-block/helpers/generators/defaults___marge')),46 userGroupIds: USER_GROUP_SELECT(),47 // Used to link to this block from inside the same page using the anchors-block48 anchor: INPUT_FIELD({49 label: i18n.t('admin/content-block/helpers/generators/defaults___anchor-id'),50 }),51});52// Recurring fields53export const FOREGROUND_COLOR_FIELD = (54 label: string = i18n.t('admin/content-block/helpers/generators/defaults___tekst-kleur'),55 defaultValue?: SelectOption<Color>56): ContentBlockField => ({57 label,58 editorType: ContentBlockEditor.ColorSelect,59 editorProps: {60 options: GET_FOREGROUND_COLOR_OPTIONS(),61 defaultValue: defaultValue || GET_FOREGROUND_COLOR_OPTIONS()[0],62 },63});64export const BACKGROUND_COLOR_FIELD = (65 label: string = i18n.t('admin/content-block/helpers/generators/defaults___achtergrondkleur'),66 defaultValue?: SelectOption<Color>67): ContentBlockField => ({68 label,69 editorType: ContentBlockEditor.ColorSelect,70 editorProps: {71 options: GET_BACKGROUND_COLOR_OPTIONS(),72 defaultValue: defaultValue || GET_BACKGROUND_COLOR_OPTIONS()[0],73 },74});75export const PADDING_FIELD = (76 label = i18n.t('admin/content-block/helpers/generators/defaults___padding')77): ContentBlockField => ({78 label,79 editorType: ContentBlockEditor.PaddingSelect,80});81export const USER_GROUP_SELECT = (82 label = i18n.t('admin/content-block/helpers/generators/defaults___zichtbaar-voor')83): ContentBlockField => ({84 label,85 editorType: ContentBlockEditor.UserGroupSelect,86 editorProps: {87 placeholder: i18n.t(88 'admin/content-block/helpers/generators/defaults___iedereen-met-toegang-tot-de-pagina'89 ),90 } as UserGroupSelectProps,91});92export const ALIGN_FIELD = (93 label: string = i18n.t('admin/content-block/helpers/generators/defaults___uitlijning')94): ContentBlockField => ({95 label,96 editorType: ContentBlockEditor.AlignSelect,97 editorProps: {98 options: GET_ALIGN_OPTIONS(),99 },100});101export const TEXT_FIELD = (102 emptyFieldValidatorMessage = i18n.t(103 'admin/content-block/helpers/generators/defaults___tekst-is-verplicht'104 ),105 propOverride?: Partial<ContentBlockField>106): ContentBlockField => ({107 label: i18n.t('admin/content-block/helpers/generators/defaults___tekst'),108 editorType: ContentBlockEditor.WYSIWYG,109 validator: (value: string) => {110 const errorArray: string[] = [];111 if (isNil(value) || isEmpty(value)) {112 errorArray.push(emptyFieldValidatorMessage);113 }114 return errorArray;115 },116 editorProps: {117 controls: [...WYSIWYG_OPTIONS_FULL_WITHOUT_ALIGN, 'media'],118 fileType: 'CONTENT_BLOCK_IMAGE',119 } as Partial<WYSIWYGWrapperProps>,120 ...propOverride,121});122export const INPUT_FIELD = (propOverride?: Partial<ContentBlockField>): ContentBlockField => ({123 label: i18n.t('admin/content-block/helpers/generators/defaults___tekst'),124 editorType: ContentBlockEditor.TextInput,125 ...propOverride,126});127export const FILE_FIELD = (128 emptyFieldValidatorMessage = i18n.t(129 'admin/content-block/helpers/generators/defaults___een-bestand-is-verplicht'130 ),131 propOverride?: Partial<ContentBlockField>132): ContentBlockField => ({133 label: i18n.t('admin/content-block/helpers/generators/defaults___bestand'),134 editorType: ContentBlockEditor.FileUpload,135 validator: (value: string) => {136 const errorArray: string[] = [];137 if (isNil(value) || isEmpty(value)) {138 errorArray.push(emptyFieldValidatorMessage);139 }140 return errorArray;141 },142 editorProps: { assetType: 'CONTENT_BLOCK_IMAGE' } as FileUploadProps,143 ...propOverride,144});145export const ITEM_PICKER_FIELD = (146 emptyFieldValidatorMessage = i18n.t(147 'admin/content-block/helpers/generators/defaults___selecteren-van-video-item-is-verplicht'148 ),149 propOverride?: Partial<ContentBlockField>150): ContentBlockField => ({151 label: i18n.t('admin/content-block/helpers/generators/media-player___video-of-audio-item'),152 editorType: ContentBlockEditor.ContentPicker,153 validator: (value: string) => {154 const errorArray: string[] = [];155 if (isNil(value) || isEmpty(value)) {156 errorArray.push(emptyFieldValidatorMessage);157 }158 return errorArray;159 },160 editorProps: {161 allowedTypes: ['ITEM'],162 hideTargetSwitch: true,163 },164 ...propOverride,165});166export const CONTENT_TYPE_AND_LABELS_INPUT = (167 propOverride?: Partial<ContentBlockField>168): ContentBlockField => ({169 label: i18n.t('admin/content-block/helpers/generators/defaults___type-en-labels'),170 editorType: ContentBlockEditor.ContentTypeAndLabelsPicker,171 validator: undefined,172 ...propOverride,...

ButtonLoader.js

Source:ButtonLoader.js

1import React from 'react';2import {3 Grid,4 Typography5} from '@material-ui/core';6import ComponentLayout from 'components/DevTools/Cosmos/ComponentLayout';7import Button from 'components/Button';8import buttonGroups from './ButtonLoader.props';9// const titleWrapperStyle = {10// width: '100%',11// textAlign: 'center'12// };13const titleStyle = {14 width: '100%',15 textAlign: 'center',16 opacity: 0.8,17 marginTop: '10px'18};19const propOverride = { loading: false };20const modifyCounter = 0;21const handleLoadStatus = function handleLoadStatus(count) {22 propOverride.loading = !propOverride.loading;23 this.setState({ modifyCounter: count });24};25const drawChild = (buttonGroup) => (26 <Grid item>27 <Typography variant='body2' style={titleStyle}>28 {buttonGroup.title}29 </Typography>30 <Grid container justify='center' spacing={16}>31 {buttonGroup.props.map((propGroup, i) => (32 <Grid key={propGroup.idx} item>33 <Button {...propGroup} override={propOverride} />34 </Grid>35 ))}36 </Grid>37 </Grid>38);39const ButtonLoader = {40 namespace: 'Buttons',41 name: 'Loaders',42 component: ComponentLayout,43 props: {44 modifyTimer: handleLoadStatus45 },46 state: {47 modifyCounter48 },49 url: '/',50 children: buttonGroups51 .map((bg) => {52 // assign ids to props for stupid index keys53 const propIds = bg.props.map((bgp, idx) => ({ ...bgp, idx }));54 return ({ ...bg, props: propIds });55 })56 .map(drawChild)57};...

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withRootDecorator } from 'storybook-root-decorator';5import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';6import { withA11y } from '@storybook/addon-a11y';7import { action } from '@storybook/addon-actions';8import Button from './';9const stories = storiesOf('Button', module);10stories.addDecorator(withRootDecorator);11stories.addDecorator(withKnobs);12stories.addDecorator(withA11y);13stories.add(14 withInfo('Default Button')(() => {15 const label = text('Label', 'Button');16 const disabled = boolean('Disabled', false);17 const loading = boolean('Loading', false);18 const onClick = action('onClick');19 return (20 label={label}21 disabled={disabled}22 loading={loading}23 onClick={onClick}24 );25 }),26);27stories.add(28 withInfo('Button with Icon')(() => {29 const label = text('Label', 'Button');30 const disabled = boolean('Disabled', false);31 const loading = boolean('Loading', false);32 const onClick = action('onClick');33 return (34 label={label}35 disabled={disabled}36 loading={loading}37 onClick={onClick}38 );39 }),40);41stories.add(42 withInfo('Button with Icon and Icon Position')(() => {43 const label = text('Label', 'Button');44 const disabled = boolean('Disabled', false);45 const loading = boolean('Loading', false);46 const onClick = action('onClick');47 const iconPosition = text('Icon Position', 'left');48 return (49 label={label}50 disabled={disabled}51 loading={loading}52 onClick={onClick}53 iconPosition={iconPosition}54 );55 }),56);57stories.add(58 withInfo('Button with Icon and Icon Position and Icon Size')(() => {59 const label = text('Label', 'Button');60 const disabled = boolean('Disabled', false);61 const loading = boolean('Loading

Using AI Code Generation

1import { PropOverride } from 'storybook-root-decorator';2import { Button } from 'antd';3export default {4 argTypes: {5 type: {6 control: {7 },8 },9 },10};11const Template = (args) => <Button {...args} />;12export const Primary = Template.bind({});13Primary.args = {14};15import React from 'react';16import { storiesOf } from '@storybook/react';17import { withKnobs, text } from '@storybook/addon-knobs';18import Button from 'antd/lib/button';19import 'antd/dist/antd.css';20import '../test.css';21storiesOf('Button', module)22 .addDecorator(withKnobs)23 .add('Primary', () => (24 type={text('type', 'primary')}25 children={text('children', 'Button')}26 ));27module.exports = {28 {29 options: {30 },31 },32};33MIT © [mohitgoyal91](

Using AI Code Generation

1import { PropOverride } from 'storybook-root-decorator';2import { PropOverride } from 'storybook-root-decorator';3import { PropOverride } from 'storybook-root-decorator';4import { PropOverride } from 'storybook-root-decorator';5import { PropOverride } from 'storybook-root-decorator';6import { PropOverride } from 'storybook-root-decorator';7MIT © [joshuajhun](

Using AI Code Generation

1import { PropOverride } from 'storybook-root-decorator';2import { withKnobs, text } from '@storybook/addon-knobs';3const withProps = PropOverride(4 {5 label: text('label', 'label'),6 placeholder: text('placeholder', 'placeholder'),7 },8);9export default withProps;10import { PropOverride } from 'storybook-root-decorator';11import { withKnobs, text } from '@storybook/addon-knobs';12const withProps = PropOverride(13 {14 label: text('label', 'label'),15 placeholder: text('placeholder', 'placeholder'),16 },17);18export { withProps };19import { PropOverride } from 'storybook-root-decorator';20import { withKnobs, text } from '@storybook/addon-knobs';21export default {22 PropOverride(23 {24 label: text('label', 'label'),25 placeholder: text('placeholder', 'placeholder'),26 },27};28export const test = () => <Input />;29import { PropOverride } from 'storybook-root-decorator';30import { withKnobs, text } from '@storybook/addon-knobs';31export default {32 PropOverride(33 {34 label: text('label', 'label'),35 placeholder: text('placeholder', 'placeholder'),36 },37};38export const test = () => <Input />;

Using AI Code Generation

1import { PropOverride } from 'storybook-root-decorator';2export default {3};4export const Button = () => (5);6Button.story = {7 decorators: [PropOverride({ label: 'World' })]8};9MIT © [matt-tyler](

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

• JUnit Tutorial
• TestNG Tutorial
• Webdriver Tutorial
• WebDriverIO Tutorial
• Protractor Tutorial
• Selenium 4 Tutorial
• Jenkins Tutorial
• NUnit Tutorial
• Jest Tutorial
• Playwright Tutorial
• Cypress Tutorial
• PyTest Tutorial

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

View sample repo View DocumentationSign up Free

›

_