Added bind support for checkbox arrays
This commit is contained in:
parent
5abd8b1a3b
commit
e23506ae92
|
@ -217,7 +217,7 @@ $scopes = [ // TODO sync with project list
|
|||
<div class="row thin margin-bottom">
|
||||
<?php foreach ($scopes as $i => $scope): ?>
|
||||
<div class="col span-6">
|
||||
<input type="checkbox" name="scopes" data-ls-bind="<?php echo $scope; ?>" data-default="{{key.scopes}}" /> <?php echo $scope; ?>
|
||||
<input type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" data-default="{{key.scopes}}" value="<?php echo $scope; ?>" /> <?php echo $scope; ?>
|
||||
</div>
|
||||
<?php if(($i+1) % 2 === 0): ?>
|
||||
</div>
|
||||
|
|
34
public/dist/scripts/app-all.js
vendored
34
public/dist/scripts/app-all.js
vendored
|
@ -1954,13 +1954,16 @@ if(key==="__watch"){return this.watch=value;}
|
|||
target[key]=value;let path=receiver.__name+'.'+key;document.dispatchEvent(new CustomEvent(path+'.changed'));if(skip){return true;}
|
||||
skip=true;container.set('$prop',key,true);container.set('$value',value,true);container.resolve(this.watch);container.set('$key',null,true);container.set('$value',null,true);skip=false;return true;},};instance=new Proxy(instance,handler);}
|
||||
if(service.singleton){service.instance=instance;}
|
||||
return instance;};let resolve=function(target){if(!target){return function(){};}
|
||||
let self=this;let FN_ARGS=/^function\s*[^\(]*\(\s*([^\)]*)\)/m;let text=target.toString()||'';let args=text.match(FN_ARGS)[1].split(',');return target.apply(target,args.map(function(value){return self.get(value.trim());}));};let path=function(path,value,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');path=path.replace(as+'.',prefix+'.').split('.');let name=path.shift();let object=this.get(name);let result=null;while(path.length>1){if(!object){return null;}
|
||||
return instance;};let resolve=function(target){if(!target){return()=>{};}
|
||||
let self=this;const REGEX_COMMENTS=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;const REGEX_FUNCTION_PARAMS=/(?:\s*(?:function\s*[^(]*)?\s*)((?:[^'"]|(?:(?:(['"])(?:(?:.*?[^\\]\2)|\2))))*?)\s*(?=(?:=>)|{)/m;const REGEX_PARAMETERS_VALUES=/\s*([\w\\$]+)\s*(?:=\s*((?:(?:(['"])(?:\3|(?:.*?[^\\]\3)))((\s*\+\s*)(?:(?:(['"])(?:\6|(?:.*?[^\\]\6)))|(?:[\w$]*)))*)|.*?))?\s*(?:,|$)/gm;function getParams(func){let functionAsString=func.toString();let params=[];let match;functionAsString=functionAsString.replace(REGEX_COMMENTS,'');functionAsString=functionAsString.match(REGEX_FUNCTION_PARAMS)[1];if(functionAsString.charAt(0)==='('){functionAsString=functionAsString.slice(1,-1);}
|
||||
while(match=REGEX_PARAMETERS_VALUES.exec(functionAsString)){params.push(match[1]);}
|
||||
return params;}
|
||||
let args=getParams(target);return target.apply(target,args.map(function(value){return self.get(value.trim());}));};let path=function(path,value,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');path=path.replace(as+'.',prefix+'.').split('.');let name=path.shift();let object=this.get(name);let result=null;while(path.length>1){if(!object){return null;}
|
||||
object=object[path.shift()];}
|
||||
if(value){object[path.shift()]=value;return true;}
|
||||
if(!object){return null;}
|
||||
let shift=path.shift();if(!shift){result=object;}else{return object[shift];}
|
||||
return result;};let bind=function(element,path,callback,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');let event=path.replace(as+'.',prefix+'.')+'.changed';let service=event.split('.').slice(0,1).pop();listeners[service]=listeners[service]||{};listeners[service][event]=true;let printer=function(){if(!document.body.contains(element)){element=null;document.removeEventListener(event,printer,false);return false;}
|
||||
return result;};let bind=function(element,path,callback,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');let event=path.replace(as+'.',prefix+'.')+'.changed';let service=event.split('.').slice(0,1).pop();listeners[service]=listeners[service]||{};listeners[service][event]=true;let printer=()=>{if(!document.body.contains(element)){element=null;document.removeEventListener(event,printer,false);return false;}
|
||||
callback();};document.addEventListener(event,printer);};let container={set:set,get:get,resolve:resolve,path:path,bind:bind,stock:stock,listeners:listeners,};set('container',container,true,false,false);return container;}();window.ls.container.set('http',function(document){let globalParams=[],globalHeaders=[];let addParam=function(url,param,value){param=encodeURIComponent(param);let a=document.createElement('a');param+=(value?"="+encodeURIComponent(value):"");a.href=url;a.search+=(a.search?"&":"")+param;return a.href;};let request=function(method,url,headers,payload,progress){let i;if(-1===['GET','POST','PUT','DELETE','TRACE','HEAD','OPTIONS','CONNECT','PATCH'].indexOf(method)){throw new Error('var method must contain a valid HTTP method name');}
|
||||
if(typeof url!=='string'){throw new Error('var url must be of type string');}
|
||||
if(typeof headers!=='object'){throw new Error('var headers must be of type object');}
|
||||
|
@ -1987,7 +1990,7 @@ let defaults={'selector':'','controller':function(){},'template':'','repeat':fal
|
|||
if(prop in object){continue;}
|
||||
object[prop]=defaults[prop];}
|
||||
if(!object.selector){throw new Error('View component is missing a selector attribute');}
|
||||
stock[object.selector]=object;return this;},render:function(element){parse(element);element.dispatchEvent(new window.Event('rendered',{bubbles:false}));}}},true,false);window.ls.container.set('router',function(window){let states=[];let current=null;let previous=null;let getPrevious=function(){return previous;};let setPrevious=function(value){previous=value;return this;};let getCurrent=function(){return current;};let setCurrent=function(value){current=value;return this;};let setParam=function(key,value){state.params[key]=value;return this;};let getParam=function(key,def){if(key in state.params){return state.params[key];}
|
||||
stock[object.selector]=object;return this;},render:function(element){parse(element);element.dispatchEvent(new window.Event('rendered',{bubbles:false}));}}},true,false);window.ls.container.set('router',function(window){let states=[];let current=null;let previous=null;let getPrevious=()=>previous;let getCurrent=()=>current;let setPrevious=(value)=>{previous=value;return this;};let setCurrent=(value)=>{current=value;return this;};let setParam=function(key,value){state.params[key]=value;return this;};let getParam=function(key,def){if(key in state.params){return state.params[key];}
|
||||
return def;};let getParams=function(){return state.params;};let getURL=function(){return window.location.href;};let reset=function(){state.params=getJsonFromUrl(window.location.search);state.hash=window.location.hash;};let add=function(path,view){if(typeof path!=='string'){throw new Error('path must be of type string');}
|
||||
if(typeof view!=='object'){throw new Error('view must be of type object');}
|
||||
states[states.length++]={path:path,view:view};return this;};let match=function(location){let url=location.pathname+((location.hash)?location.hash:'');states.sort(function(a,b){return b.path.length-a.path.length;});states.sort(function(a,b){let n=b.path.split('/').length-a.path.split('/').length;if(n!==0){return n;}
|
||||
|
@ -1996,10 +1999,10 @@ return null};let change=function(URL,replace){if(!replace){window.history.pushSt
|
|||
window.dispatchEvent(new PopStateEvent('popstate',{}));return this;};let reload=function(){return change(window.location.href);};let getJsonFromUrl=function(URL){let query;if(URL){let pos=location.href.indexOf('?');if(pos===-1)return[];query=location.href.substr(pos+1);}else{query=location.search.substr(1);}
|
||||
let result={};query.split('&').forEach(function(part){if(!part){return;}
|
||||
part=part.split('+').join(' ');let eq=part.indexOf('=');let key=eq>-1?part.substr(0,eq):part;let val=eq>-1?decodeURIComponent(part.substr(eq+1)):'';let from=key.indexOf('[');if(from===-1){result[decodeURIComponent(key)]=val;}else{let to=key.indexOf(']');let index=decodeURIComponent(key.substring(from+1,to));key=decodeURIComponent(key.substring(0,from));if(!result[key]){result[key]=[];}
|
||||
if(!index){result[key].push(val);}else{result[key][index]=val;}}});return result;};let state={setParam:setParam,getParam:getParam,getParams:getParams,getURL:getURL,add:add,change:change,reload:reload,reset:reset,match:match,getCurrent:getCurrent,setCurrent:setCurrent,getPrevious:getPrevious,setPrevious:setPrevious,params:getJsonFromUrl(window.location.search),hash:window.location.hash};return state;},true,true);window.ls.container.set('expression',function(container,filter,$as,$prefix){let reg=/(\{{.*?\}})/gi;let paths=[];return{parse:function(string,def,as,prefix,cast=false){def=def||'';paths=[];return string.replace(reg,function(match){let reference=match.substring(2,match.length-2).replace('[\'','.').replace('\']','').trim();reference=reference.split('|');let path=(reference[0]||'');let result=container.path(path,undefined,as,prefix);if(!paths.includes(path)){paths.push(path);}
|
||||
if(!index){result[key].push(val);}else{result[key][index]=val;}}});return result;};let state={setParam:setParam,getParam:getParam,getParams:getParams,getURL:getURL,add:add,change:change,reload:reload,reset:reset,match:match,getCurrent:getCurrent,setCurrent:setCurrent,getPrevious:getPrevious,setPrevious:setPrevious,params:getJsonFromUrl(window.location.search),hash:window.location.hash};return state;},true,true);window.ls.container.set('expression',function(container,filter){let paths=[];return{regex:/(\{{.*?\}})/gi,parse:function(string,def,as,prefix,cast=false){def=def||'';paths=[];return string.replace(this.regex,match=>{let reference=match.substring(2,match.length-2).replace('[\'','.').replace('\']','').trim();reference=reference.split('|');let path=(reference[0]||'');let result=container.path(path,undefined,as,prefix);if(!paths.includes(path)){paths.push(path);}
|
||||
result=(null===result||undefined===result)?def:result;result=(typeof result==='object')?JSON.stringify(result):result;result=(((typeof result==='object')||(typeof result==='string'))&&cast)?'\''+result+'\'':result;if(reference.length>=2){for(let i=1;i<reference.length;i++){result=filter.apply(reference[i],result);}}
|
||||
return result;});},getPaths:function(){return paths;},}},true,false);window.ls.container.set('filter',function(container){let filters={};let add=function(name,callback){filters[name]=callback;return this;};let apply=function(name,value){container.set('$value',value,true,false,false);return container.resolve(filters[name]);};add('uppercase',function($value){return $value.toUpperCase();});add('lowercase',function($value){return $value.toLowerCase();});return{add:add,apply:apply}},true,false);window.ls.container.get('filter').add('escape',function(value){if(typeof value!=='string'){return value;}
|
||||
return value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"').replace(/\'/g,''').replace(/\//g,'/');});window.ls=window.ls||{};window.ls.container.set('window',window,true,false,false).set('document',window.document,true,false,false).set('element',window.document,true,false,false);window.ls.run=function(window){try{this.view.render(window.document);}catch(error){let handler=window.ls.container.resolve(this.error);handler(error);}};window.ls.error=function(){return function(error){console.error('ls-error',error.message,error.stack,error.toString());}};window.ls.router=window.ls.container.get('router');window.ls.view=window.ls.container.get('view');window.ls.filter=window.ls.container.get('filter');window.ls.container.get('view').add({selector:'data-ls-router',repeat:false,controller:function(element,window,document,view,router){let firstFromServer=(element.getAttribute('data-first-from-server')==='true');let scope={selector:'data-ls-scope',template:false,repeat:true,controller:function(){},};let init=function(route){window.scrollTo(0,0);if(window.document.body.scrollTo){window.document.body.scrollTo(0,0);}
|
||||
return result;});},getPaths:()=>paths,}},true,false);window.ls.container.set('filter',function(container){let filters={};let add=function(name,callback){filters[name]=callback;return this;};let apply=function(name,value){container.set('$value',value,true,false);return container.resolve(filters[name]);};add('uppercase',($value)=>{return $value.toUpperCase();});add('lowercase',($value)=>{return $value.toLowerCase();});return{add:add,apply:apply}},true,false);window.ls.container.get('filter').add('escape',value=>{if(typeof value!=='string'){return value;}
|
||||
return value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"').replace(/\'/g,''').replace(/\//g,'/');});window.ls=window.ls||{};window.ls.container.set('window',window,true,false).set('document',window.document,true,false).set('element',window.document,true,false);window.ls.run=function(window){try{this.view.render(window.document);}catch(error){let handler=window.ls.container.resolve(this.error);handler(error);}};window.ls.error=()=>{return error=>{console.error('ls-error',error.message,error.stack,error.toString());}};window.ls.router=window.ls.container.get('router');window.ls.view=window.ls.container.get('view');window.ls.filter=window.ls.container.get('filter');window.ls.container.get('view').add({selector:'data-ls-router',repeat:false,controller:function(element,window,document,view,router){let firstFromServer=(element.getAttribute('data-first-from-server')==='true');let scope={selector:'data-ls-scope',template:false,repeat:true,controller:function(){},};let init=function(route){window.scrollTo(0,0);if(window.document.body.scrollTo){window.document.body.scrollTo(0,0);}
|
||||
router.reset();if(null===route){return;}
|
||||
scope.template=(undefined!==route.view.template)?route.view.template:null;scope.controller=(undefined!==route.view.controller)?route.view.controller:function(){};document.dispatchEvent(new CustomEvent('state-change'));if(firstFromServer&&null===router.getPrevious()){scope.template='';}else if(null!==router.getPrevious()){view.render(element);}
|
||||
document.dispatchEvent(new CustomEvent('state-changed'));};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}
|
||||
|
@ -2013,21 +2016,22 @@ let route=router.match(target);if(null===route){return false;}
|
|||
event.preventDefault();if(window.location===target.href){return false;}
|
||||
route.view.state=(undefined===route.view.state)?true:route.view.state;if(true===route.view.state){if(router.getPrevious()&&router.getPrevious().view&&(router.getPrevious().view.scope!==route.view.scope)){window.location.href=target.href;return false;}
|
||||
window.history.pushState({},'Unknown',target.href);}
|
||||
init(route);return true;});window.addEventListener('popstate',function(){init(router.match(window.location));});window.addEventListener('hashchange',function(){init(router.match(window.location));});init(router.match(window.location));}});window.ls.container.get('view').add({selector:'data-ls-attrs',controller:function(element,expression,container,$as,$prefix){let attrs=element.getAttribute('data-ls-attrs').trim().split(',');let paths=[];let check=function(){for(let i=0;i<attrs.length;i++){let attr=attrs[i];let key=expression.parse(attr.substring(0,attr.indexOf('=')),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());let value=expression.parse(attr.substring(attr.indexOf('=')+1),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());if(!key){return null;}
|
||||
init(route);return true;});window.addEventListener('popstate',function(){init(router.match(window.location));});window.addEventListener('hashchange',function(){init(router.match(window.location));});init(router.match(window.location));}});window.ls.container.get('view').add({selector:'data-ls-attrs',controller:function(element,expression,container,$as,$prefix){let attrs=element.getAttribute('data-ls-attrs').trim().split(',');let paths=[];let check=()=>{for(let i=0;i<attrs.length;i++){let attr=attrs[i];let key=expression.parse(attr.substring(0,attr.indexOf('=')),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());let value=expression.parse(attr.substring(attr.indexOf('=')+1),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());if(!key){return null;}
|
||||
element.setAttribute(key,value);}};check();for(let i=0;i<paths.length;i++){container.bind(element,paths[i],check);}}});window.ls.container.get('view').add({selector:'data-ls-bind',controller:function(element,expression,container,$prefix,$as){let echo=function(value,bind=true){if(element.tagName==='INPUT'||element.tagName==='SELECT'||element.tagName==='BUTTON'||element.tagName==='TEXTAREA'){let type=element.getAttribute('type');if('radio'===type){if(value.toString()===element.value){element.setAttribute('checked','checked');}else{element.removeAttribute('checked');}}
|
||||
if('checkbox'===type){if(typeof value==='boolean'||value==='true'||value==='false'){if(value===true||value==='true'){element.setAttribute('checked','checked');element.checked=true;}else{element.removeAttribute('checked');element.checked=false;}
|
||||
if(bind){element.addEventListener('change',function(){for(let i=0;i<paths.length;i++){container.path(paths[i],element.checked,$as,$prefix);}});}}
|
||||
if(bind){element.addEventListener('change',()=>{for(let i=0;i<paths.length;i++){container.path(paths[i],element.checked,$as,$prefix);}});}}else{try{value=JSON.parse(value);element.checked=(Array.isArray(value)&&(value.indexOf(element.value)>-1));}
|
||||
catch{return null;}
|
||||
console.log(value,element.value);console.log(value.indexOf(element.value));console.log(Array.isArray(value));}
|
||||
return;}
|
||||
if(element.value!==value){element.value=value;}
|
||||
if(bind){element.addEventListener('input',sync);element.addEventListener('change',sync);}}else{if(element.innerText!==value){element.innerHTML=value;}}};let sync=(function(as,prefix){return function(){for(let i=0;i<paths.length;i++){container.path(paths[i],element.value,as,prefix);}}})($as,$prefix);let syntax=element.getAttribute('data-ls-bind');let result=expression.parse(syntax,null,$as,$prefix);let paths=expression.getPaths();echo(result,true);for(let i=0;i<paths.length;i++){container.bind(element,paths[i],function(){echo(expression.parse(syntax,null,$as,$prefix),false);});}}});window.ls.container.get('view').add({selector:'data-ls-if',controller:function(element,expression,container,$as,$prefix){let result='';let syntax=element.getAttribute('data-ls-if')||'';let debug=element.getAttribute('data-debug')||false;let paths=[];let check=function(){if(debug){console.info('debug-ls-if',expression.parse(syntax,'undefined',$as,$prefix));}
|
||||
if(bind){element.addEventListener('input',sync);element.addEventListener('change',sync);}}else{if(element.innerText!==value){element.innerHTML=value;}}};let sync=((as,prefix)=>{return()=>{for(let i=0;i<paths.length;i++){container.path(paths[i],element.value,as,prefix);}}})($as,$prefix);let syntax=element.getAttribute('data-ls-bind');let result=expression.parse(syntax,null,$as,$prefix);let paths=expression.getPaths();echo(result,true);for(let i=0;i<paths.length;i++){container.bind(element,paths[i],()=>{echo(expression.parse(syntax,null,$as,$prefix),false);});}}});window.ls.container.get('view').add({selector:'data-ls-if',controller:function(element,expression,container,$as,$prefix){let result='';let syntax=element.getAttribute('data-ls-if')||'';let debug=element.getAttribute('data-debug')||false;let paths=[];let check=()=>{if(debug){console.info('debug-ls-if',expression.parse(syntax,'undefined',$as,$prefix));}
|
||||
try{result=!!(eval(expression.parse(syntax,'undefined',$as,$prefix,true).replace(/(\r\n|\n|\r)/gm,' ')));}catch(error){throw new Error('Failed to evaluate expression "'+syntax+' (resulted with: "'+result+'")": '+error);}
|
||||
if(debug){console.info('debug-ls-if result:',result);}
|
||||
paths=expression.getPaths();element.$lsSkip=!result;if(!result){element.style.visibility='hidden';element.style.display='none';}else{element.style.removeProperty('display');element.style.removeProperty('visibility');}};check();for(let i=0;i<paths.length;i++){container.bind(element,paths[i],check);}}});window.ls.container.get('view').add({selector:'data-ls-loop',template:false,repeat:false,nested:false,controller:function(element,view,container,window){let expr=element.getAttribute('data-ls-loop');let as=element.getAttribute('data-ls-as');let echo=function(){let value=element.value||null;let array=container.path(expr);array=(!array)?[]:array;while(element.hasChildNodes()){element.removeChild(element.lastChild);element.lastChild=null;}
|
||||
paths=expression.getPaths();element.$lsSkip=!result;if(!result){element.style.visibility='hidden';element.style.display='none';}else{element.style.removeProperty('display');element.style.removeProperty('visibility');}};check();for(let i=0;i<paths.length;i++){container.bind(element,paths[i],check);}}});window.ls.container.get('view').add({selector:'data-ls-loop',template:false,repeat:false,nested:false,controller:function(element,view,container,window){let expr=element.getAttribute('data-ls-loop');let as=element.getAttribute('data-ls-as');let echo=function(){let array=container.path(expr);array=(!array)?[]:array;while(element.hasChildNodes()){element.removeChild(element.lastChild);element.lastChild=null;}
|
||||
if(array instanceof Array&&typeof array!=='object'){throw new Error('Reference value must be array or object. '+(typeof array)+' given');}
|
||||
let children=[];element.$lsSkip=true;element.style.visibility=(0===array.length)?'hidden':'visible';for(let prop in array){if(!array.hasOwnProperty(prop)){continue;}
|
||||
children[prop]=template.cloneNode(true);element.appendChild(children[prop]);(function(index){let context=expr+'.'+index;container.set(as,container.path(context),true);container.set('$index',index,true,false,false);container.set('$prefix',context,true,false,false);container.set('$as',as,true,false,false);view.render(children[prop]);})(prop);}
|
||||
if(value){element.value=value;}
|
||||
container.set('$index',null,true,false,false);container.set('$prefix','',true,false,false);container.set('$as','',true,false,false);};let template=(element.children.length===1)?element.children[0]:window.document.createElement('li');echo();container.bind(element,expr,echo);container.bind(element,expr+'.length',echo);}});window.ls.container.get('view').add({selector:'data-ls-template',template:false,repeat:true,controller:function(element,view,http,expression,document){let template=expression.parse(element.getAttribute('data-ls-template'));let type=element.getAttribute('data-type')||'url';element.innerHTML='';let parse=function(data,element){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));};if('script'===type){let inlineTemplate=document.getElementById(template);if(inlineTemplate&&inlineTemplate.innerHTML){parse(inlineTemplate.innerHTML,element);}else{element.innerHTML='<span style="color: red">Missing template "'+template+'"</span>';}
|
||||
children[prop]=template.cloneNode(true);element.appendChild(children[prop]);(index=>{let context=expr+'.'+index;container.set(as,container.path(context),true);container.set('$index',index,true,false,false);container.set('$prefix',context,true,false,false);container.set('$as',as,true,false,false);view.render(children[prop]);})(prop);}
|
||||
container.set('$index',null,true,false,false);container.set('$prefix','',true,false,false);container.set('$as','',true,false,false);};let template=(element.children.length===1)?element.children[0]:window.document.createElement('li');echo();container.bind(element,expr,echo);container.bind(element,expr+'.length',echo);}});window.ls.container.get('view').add({selector:'data-ls-template',template:false,repeat:true,controller:function(element,view,http,expression,document){let template=expression.parse(element.getAttribute('data-ls-template'));let type=element.getAttribute('data-type')||'url';element.innerHTML='';let parse=(data,element)=>{element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));};if('script'===type){let inlineTemplate=document.getElementById(template);if(inlineTemplate&&inlineTemplate.innerHTML){parse(inlineTemplate.innerHTML,element);}else{element.innerHTML='<span style="color: red">Missing template "'+template+'"</span>';}
|
||||
return;}
|
||||
http.get(template).then(function(element){return function(data){parse(data,element);}}(element),function(){throw new Error('Failed loading template');});}});window.ls.error=function(){return function(error){alert(error);console.error('ERROR-APP',error);}};window.addEventListener('error',function(event){alert(event.error.message);console.error('ERROR-EVENT:',event.error.message,event.error.stack);});document.addEventListener('logout',function(){if(window.ls.router.getCurrent().view.scope==='console'){state.change('/auth/signin');}});document.addEventListener('http-get-401',function(){document.dispatchEvent(new CustomEvent('logout'));},true);(function(window){"use strict";window.ls.container.set('alerts',function(window){let service={};let counter=0;let event=new CustomEvent('alerted',{bubbles:false,cancelable:true});service.list=[];service.remove=function(id){let message=this.get(id);if(message&&message.remove&&typeof message.remove==='function'){message.remove();}
|
||||
this.list=this.list.filter(function(obj){return obj.id!==parseInt(id);});window.document.dispatchEvent(event);};service.get=function(id){id=parseInt(id);let result=this.list.filter(function(obj){return obj.id===id;});if(result[0]){return result[0];}
|
||||
|
@ -2270,7 +2274,7 @@ element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(
|
|||
let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
|
||||
if(openEvent){document.addEventListener(openEvent,open);}
|
||||
buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);}
|
||||
document.addEventListener('modal-close',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
|
||||
document.addEventListener('modal-close',close);element.addEventListener('submit',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
|
||||
if(def==='close'){element.classList.add('close');element.classList.remove('open');}
|
||||
else{element.classList.add('open');element.classList.remove('close');}
|
||||
button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});}
|
||||
|
|
34
public/dist/scripts/app.js
vendored
34
public/dist/scripts/app.js
vendored
|
@ -12,13 +12,16 @@ if(key==="__watch"){return this.watch=value;}
|
|||
target[key]=value;let path=receiver.__name+'.'+key;document.dispatchEvent(new CustomEvent(path+'.changed'));if(skip){return true;}
|
||||
skip=true;container.set('$prop',key,true);container.set('$value',value,true);container.resolve(this.watch);container.set('$key',null,true);container.set('$value',null,true);skip=false;return true;},};instance=new Proxy(instance,handler);}
|
||||
if(service.singleton){service.instance=instance;}
|
||||
return instance;};let resolve=function(target){if(!target){return function(){};}
|
||||
let self=this;let FN_ARGS=/^function\s*[^\(]*\(\s*([^\)]*)\)/m;let text=target.toString()||'';let args=text.match(FN_ARGS)[1].split(',');return target.apply(target,args.map(function(value){return self.get(value.trim());}));};let path=function(path,value,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');path=path.replace(as+'.',prefix+'.').split('.');let name=path.shift();let object=this.get(name);let result=null;while(path.length>1){if(!object){return null;}
|
||||
return instance;};let resolve=function(target){if(!target){return()=>{};}
|
||||
let self=this;const REGEX_COMMENTS=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;const REGEX_FUNCTION_PARAMS=/(?:\s*(?:function\s*[^(]*)?\s*)((?:[^'"]|(?:(?:(['"])(?:(?:.*?[^\\]\2)|\2))))*?)\s*(?=(?:=>)|{)/m;const REGEX_PARAMETERS_VALUES=/\s*([\w\\$]+)\s*(?:=\s*((?:(?:(['"])(?:\3|(?:.*?[^\\]\3)))((\s*\+\s*)(?:(?:(['"])(?:\6|(?:.*?[^\\]\6)))|(?:[\w$]*)))*)|.*?))?\s*(?:,|$)/gm;function getParams(func){let functionAsString=func.toString();let params=[];let match;functionAsString=functionAsString.replace(REGEX_COMMENTS,'');functionAsString=functionAsString.match(REGEX_FUNCTION_PARAMS)[1];if(functionAsString.charAt(0)==='('){functionAsString=functionAsString.slice(1,-1);}
|
||||
while(match=REGEX_PARAMETERS_VALUES.exec(functionAsString)){params.push(match[1]);}
|
||||
return params;}
|
||||
let args=getParams(target);return target.apply(target,args.map(function(value){return self.get(value.trim());}));};let path=function(path,value,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');path=path.replace(as+'.',prefix+'.').split('.');let name=path.shift();let object=this.get(name);let result=null;while(path.length>1){if(!object){return null;}
|
||||
object=object[path.shift()];}
|
||||
if(value){object[path.shift()]=value;return true;}
|
||||
if(!object){return null;}
|
||||
let shift=path.shift();if(!shift){result=object;}else{return object[shift];}
|
||||
return result;};let bind=function(element,path,callback,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');let event=path.replace(as+'.',prefix+'.')+'.changed';let service=event.split('.').slice(0,1).pop();listeners[service]=listeners[service]||{};listeners[service][event]=true;let printer=function(){if(!document.body.contains(element)){element=null;document.removeEventListener(event,printer,false);return false;}
|
||||
return result;};let bind=function(element,path,callback,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');let event=path.replace(as+'.',prefix+'.')+'.changed';let service=event.split('.').slice(0,1).pop();listeners[service]=listeners[service]||{};listeners[service][event]=true;let printer=()=>{if(!document.body.contains(element)){element=null;document.removeEventListener(event,printer,false);return false;}
|
||||
callback();};document.addEventListener(event,printer);};let container={set:set,get:get,resolve:resolve,path:path,bind:bind,stock:stock,listeners:listeners,};set('container',container,true,false,false);return container;}();window.ls.container.set('http',function(document){let globalParams=[],globalHeaders=[];let addParam=function(url,param,value){param=encodeURIComponent(param);let a=document.createElement('a');param+=(value?"="+encodeURIComponent(value):"");a.href=url;a.search+=(a.search?"&":"")+param;return a.href;};let request=function(method,url,headers,payload,progress){let i;if(-1===['GET','POST','PUT','DELETE','TRACE','HEAD','OPTIONS','CONNECT','PATCH'].indexOf(method)){throw new Error('var method must contain a valid HTTP method name');}
|
||||
if(typeof url!=='string'){throw new Error('var url must be of type string');}
|
||||
if(typeof headers!=='object'){throw new Error('var headers must be of type object');}
|
||||
|
@ -45,7 +48,7 @@ let defaults={'selector':'','controller':function(){},'template':'','repeat':fal
|
|||
if(prop in object){continue;}
|
||||
object[prop]=defaults[prop];}
|
||||
if(!object.selector){throw new Error('View component is missing a selector attribute');}
|
||||
stock[object.selector]=object;return this;},render:function(element){parse(element);element.dispatchEvent(new window.Event('rendered',{bubbles:false}));}}},true,false);window.ls.container.set('router',function(window){let states=[];let current=null;let previous=null;let getPrevious=function(){return previous;};let setPrevious=function(value){previous=value;return this;};let getCurrent=function(){return current;};let setCurrent=function(value){current=value;return this;};let setParam=function(key,value){state.params[key]=value;return this;};let getParam=function(key,def){if(key in state.params){return state.params[key];}
|
||||
stock[object.selector]=object;return this;},render:function(element){parse(element);element.dispatchEvent(new window.Event('rendered',{bubbles:false}));}}},true,false);window.ls.container.set('router',function(window){let states=[];let current=null;let previous=null;let getPrevious=()=>previous;let getCurrent=()=>current;let setPrevious=(value)=>{previous=value;return this;};let setCurrent=(value)=>{current=value;return this;};let setParam=function(key,value){state.params[key]=value;return this;};let getParam=function(key,def){if(key in state.params){return state.params[key];}
|
||||
return def;};let getParams=function(){return state.params;};let getURL=function(){return window.location.href;};let reset=function(){state.params=getJsonFromUrl(window.location.search);state.hash=window.location.hash;};let add=function(path,view){if(typeof path!=='string'){throw new Error('path must be of type string');}
|
||||
if(typeof view!=='object'){throw new Error('view must be of type object');}
|
||||
states[states.length++]={path:path,view:view};return this;};let match=function(location){let url=location.pathname+((location.hash)?location.hash:'');states.sort(function(a,b){return b.path.length-a.path.length;});states.sort(function(a,b){let n=b.path.split('/').length-a.path.split('/').length;if(n!==0){return n;}
|
||||
|
@ -54,10 +57,10 @@ return null};let change=function(URL,replace){if(!replace){window.history.pushSt
|
|||
window.dispatchEvent(new PopStateEvent('popstate',{}));return this;};let reload=function(){return change(window.location.href);};let getJsonFromUrl=function(URL){let query;if(URL){let pos=location.href.indexOf('?');if(pos===-1)return[];query=location.href.substr(pos+1);}else{query=location.search.substr(1);}
|
||||
let result={};query.split('&').forEach(function(part){if(!part){return;}
|
||||
part=part.split('+').join(' ');let eq=part.indexOf('=');let key=eq>-1?part.substr(0,eq):part;let val=eq>-1?decodeURIComponent(part.substr(eq+1)):'';let from=key.indexOf('[');if(from===-1){result[decodeURIComponent(key)]=val;}else{let to=key.indexOf(']');let index=decodeURIComponent(key.substring(from+1,to));key=decodeURIComponent(key.substring(0,from));if(!result[key]){result[key]=[];}
|
||||
if(!index){result[key].push(val);}else{result[key][index]=val;}}});return result;};let state={setParam:setParam,getParam:getParam,getParams:getParams,getURL:getURL,add:add,change:change,reload:reload,reset:reset,match:match,getCurrent:getCurrent,setCurrent:setCurrent,getPrevious:getPrevious,setPrevious:setPrevious,params:getJsonFromUrl(window.location.search),hash:window.location.hash};return state;},true,true);window.ls.container.set('expression',function(container,filter,$as,$prefix){let reg=/(\{{.*?\}})/gi;let paths=[];return{parse:function(string,def,as,prefix,cast=false){def=def||'';paths=[];return string.replace(reg,function(match){let reference=match.substring(2,match.length-2).replace('[\'','.').replace('\']','').trim();reference=reference.split('|');let path=(reference[0]||'');let result=container.path(path,undefined,as,prefix);if(!paths.includes(path)){paths.push(path);}
|
||||
if(!index){result[key].push(val);}else{result[key][index]=val;}}});return result;};let state={setParam:setParam,getParam:getParam,getParams:getParams,getURL:getURL,add:add,change:change,reload:reload,reset:reset,match:match,getCurrent:getCurrent,setCurrent:setCurrent,getPrevious:getPrevious,setPrevious:setPrevious,params:getJsonFromUrl(window.location.search),hash:window.location.hash};return state;},true,true);window.ls.container.set('expression',function(container,filter){let paths=[];return{regex:/(\{{.*?\}})/gi,parse:function(string,def,as,prefix,cast=false){def=def||'';paths=[];return string.replace(this.regex,match=>{let reference=match.substring(2,match.length-2).replace('[\'','.').replace('\']','').trim();reference=reference.split('|');let path=(reference[0]||'');let result=container.path(path,undefined,as,prefix);if(!paths.includes(path)){paths.push(path);}
|
||||
result=(null===result||undefined===result)?def:result;result=(typeof result==='object')?JSON.stringify(result):result;result=(((typeof result==='object')||(typeof result==='string'))&&cast)?'\''+result+'\'':result;if(reference.length>=2){for(let i=1;i<reference.length;i++){result=filter.apply(reference[i],result);}}
|
||||
return result;});},getPaths:function(){return paths;},}},true,false);window.ls.container.set('filter',function(container){let filters={};let add=function(name,callback){filters[name]=callback;return this;};let apply=function(name,value){container.set('$value',value,true,false,false);return container.resolve(filters[name]);};add('uppercase',function($value){return $value.toUpperCase();});add('lowercase',function($value){return $value.toLowerCase();});return{add:add,apply:apply}},true,false);window.ls.container.get('filter').add('escape',function(value){if(typeof value!=='string'){return value;}
|
||||
return value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"').replace(/\'/g,''').replace(/\//g,'/');});window.ls=window.ls||{};window.ls.container.set('window',window,true,false,false).set('document',window.document,true,false,false).set('element',window.document,true,false,false);window.ls.run=function(window){try{this.view.render(window.document);}catch(error){let handler=window.ls.container.resolve(this.error);handler(error);}};window.ls.error=function(){return function(error){console.error('ls-error',error.message,error.stack,error.toString());}};window.ls.router=window.ls.container.get('router');window.ls.view=window.ls.container.get('view');window.ls.filter=window.ls.container.get('filter');window.ls.container.get('view').add({selector:'data-ls-router',repeat:false,controller:function(element,window,document,view,router){let firstFromServer=(element.getAttribute('data-first-from-server')==='true');let scope={selector:'data-ls-scope',template:false,repeat:true,controller:function(){},};let init=function(route){window.scrollTo(0,0);if(window.document.body.scrollTo){window.document.body.scrollTo(0,0);}
|
||||
return result;});},getPaths:()=>paths,}},true,false);window.ls.container.set('filter',function(container){let filters={};let add=function(name,callback){filters[name]=callback;return this;};let apply=function(name,value){container.set('$value',value,true,false);return container.resolve(filters[name]);};add('uppercase',($value)=>{return $value.toUpperCase();});add('lowercase',($value)=>{return $value.toLowerCase();});return{add:add,apply:apply}},true,false);window.ls.container.get('filter').add('escape',value=>{if(typeof value!=='string'){return value;}
|
||||
return value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"').replace(/\'/g,''').replace(/\//g,'/');});window.ls=window.ls||{};window.ls.container.set('window',window,true,false).set('document',window.document,true,false).set('element',window.document,true,false);window.ls.run=function(window){try{this.view.render(window.document);}catch(error){let handler=window.ls.container.resolve(this.error);handler(error);}};window.ls.error=()=>{return error=>{console.error('ls-error',error.message,error.stack,error.toString());}};window.ls.router=window.ls.container.get('router');window.ls.view=window.ls.container.get('view');window.ls.filter=window.ls.container.get('filter');window.ls.container.get('view').add({selector:'data-ls-router',repeat:false,controller:function(element,window,document,view,router){let firstFromServer=(element.getAttribute('data-first-from-server')==='true');let scope={selector:'data-ls-scope',template:false,repeat:true,controller:function(){},};let init=function(route){window.scrollTo(0,0);if(window.document.body.scrollTo){window.document.body.scrollTo(0,0);}
|
||||
router.reset();if(null===route){return;}
|
||||
scope.template=(undefined!==route.view.template)?route.view.template:null;scope.controller=(undefined!==route.view.controller)?route.view.controller:function(){};document.dispatchEvent(new CustomEvent('state-change'));if(firstFromServer&&null===router.getPrevious()){scope.template='';}else if(null!==router.getPrevious()){view.render(element);}
|
||||
document.dispatchEvent(new CustomEvent('state-changed'));};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}
|
||||
|
@ -71,21 +74,22 @@ let route=router.match(target);if(null===route){return false;}
|
|||
event.preventDefault();if(window.location===target.href){return false;}
|
||||
route.view.state=(undefined===route.view.state)?true:route.view.state;if(true===route.view.state){if(router.getPrevious()&&router.getPrevious().view&&(router.getPrevious().view.scope!==route.view.scope)){window.location.href=target.href;return false;}
|
||||
window.history.pushState({},'Unknown',target.href);}
|
||||
init(route);return true;});window.addEventListener('popstate',function(){init(router.match(window.location));});window.addEventListener('hashchange',function(){init(router.match(window.location));});init(router.match(window.location));}});window.ls.container.get('view').add({selector:'data-ls-attrs',controller:function(element,expression,container,$as,$prefix){let attrs=element.getAttribute('data-ls-attrs').trim().split(',');let paths=[];let check=function(){for(let i=0;i<attrs.length;i++){let attr=attrs[i];let key=expression.parse(attr.substring(0,attr.indexOf('=')),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());let value=expression.parse(attr.substring(attr.indexOf('=')+1),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());if(!key){return null;}
|
||||
init(route);return true;});window.addEventListener('popstate',function(){init(router.match(window.location));});window.addEventListener('hashchange',function(){init(router.match(window.location));});init(router.match(window.location));}});window.ls.container.get('view').add({selector:'data-ls-attrs',controller:function(element,expression,container,$as,$prefix){let attrs=element.getAttribute('data-ls-attrs').trim().split(',');let paths=[];let check=()=>{for(let i=0;i<attrs.length;i++){let attr=attrs[i];let key=expression.parse(attr.substring(0,attr.indexOf('=')),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());let value=expression.parse(attr.substring(attr.indexOf('=')+1),null,$as,$prefix)||null;paths=paths.concat(expression.getPaths());if(!key){return null;}
|
||||
element.setAttribute(key,value);}};check();for(let i=0;i<paths.length;i++){container.bind(element,paths[i],check);}}});window.ls.container.get('view').add({selector:'data-ls-bind',controller:function(element,expression,container,$prefix,$as){let echo=function(value,bind=true){if(element.tagName==='INPUT'||element.tagName==='SELECT'||element.tagName==='BUTTON'||element.tagName==='TEXTAREA'){let type=element.getAttribute('type');if('radio'===type){if(value.toString()===element.value){element.setAttribute('checked','checked');}else{element.removeAttribute('checked');}}
|
||||
if('checkbox'===type){if(typeof value==='boolean'||value==='true'||value==='false'){if(value===true||value==='true'){element.setAttribute('checked','checked');element.checked=true;}else{element.removeAttribute('checked');element.checked=false;}
|
||||
if(bind){element.addEventListener('change',function(){for(let i=0;i<paths.length;i++){container.path(paths[i],element.checked,$as,$prefix);}});}}
|
||||
if(bind){element.addEventListener('change',()=>{for(let i=0;i<paths.length;i++){container.path(paths[i],element.checked,$as,$prefix);}});}}else{try{value=JSON.parse(value);element.checked=(Array.isArray(value)&&(value.indexOf(element.value)>-1));}
|
||||
catch{return null;}
|
||||
console.log(value,element.value);console.log(value.indexOf(element.value));console.log(Array.isArray(value));}
|
||||
return;}
|
||||
if(element.value!==value){element.value=value;}
|
||||
if(bind){element.addEventListener('input',sync);element.addEventListener('change',sync);}}else{if(element.innerText!==value){element.innerHTML=value;}}};let sync=(function(as,prefix){return function(){for(let i=0;i<paths.length;i++){container.path(paths[i],element.value,as,prefix);}}})($as,$prefix);let syntax=element.getAttribute('data-ls-bind');let result=expression.parse(syntax,null,$as,$prefix);let paths=expression.getPaths();echo(result,true);for(let i=0;i<paths.length;i++){container.bind(element,paths[i],function(){echo(expression.parse(syntax,null,$as,$prefix),false);});}}});window.ls.container.get('view').add({selector:'data-ls-if',controller:function(element,expression,container,$as,$prefix){let result='';let syntax=element.getAttribute('data-ls-if')||'';let debug=element.getAttribute('data-debug')||false;let paths=[];let check=function(){if(debug){console.info('debug-ls-if',expression.parse(syntax,'undefined',$as,$prefix));}
|
||||
if(bind){element.addEventListener('input',sync);element.addEventListener('change',sync);}}else{if(element.innerText!==value){element.innerHTML=value;}}};let sync=((as,prefix)=>{return()=>{for(let i=0;i<paths.length;i++){container.path(paths[i],element.value,as,prefix);}}})($as,$prefix);let syntax=element.getAttribute('data-ls-bind');let result=expression.parse(syntax,null,$as,$prefix);let paths=expression.getPaths();echo(result,true);for(let i=0;i<paths.length;i++){container.bind(element,paths[i],()=>{echo(expression.parse(syntax,null,$as,$prefix),false);});}}});window.ls.container.get('view').add({selector:'data-ls-if',controller:function(element,expression,container,$as,$prefix){let result='';let syntax=element.getAttribute('data-ls-if')||'';let debug=element.getAttribute('data-debug')||false;let paths=[];let check=()=>{if(debug){console.info('debug-ls-if',expression.parse(syntax,'undefined',$as,$prefix));}
|
||||
try{result=!!(eval(expression.parse(syntax,'undefined',$as,$prefix,true).replace(/(\r\n|\n|\r)/gm,' ')));}catch(error){throw new Error('Failed to evaluate expression "'+syntax+' (resulted with: "'+result+'")": '+error);}
|
||||
if(debug){console.info('debug-ls-if result:',result);}
|
||||
paths=expression.getPaths();element.$lsSkip=!result;if(!result){element.style.visibility='hidden';element.style.display='none';}else{element.style.removeProperty('display');element.style.removeProperty('visibility');}};check();for(let i=0;i<paths.length;i++){container.bind(element,paths[i],check);}}});window.ls.container.get('view').add({selector:'data-ls-loop',template:false,repeat:false,nested:false,controller:function(element,view,container,window){let expr=element.getAttribute('data-ls-loop');let as=element.getAttribute('data-ls-as');let echo=function(){let value=element.value||null;let array=container.path(expr);array=(!array)?[]:array;while(element.hasChildNodes()){element.removeChild(element.lastChild);element.lastChild=null;}
|
||||
paths=expression.getPaths();element.$lsSkip=!result;if(!result){element.style.visibility='hidden';element.style.display='none';}else{element.style.removeProperty('display');element.style.removeProperty('visibility');}};check();for(let i=0;i<paths.length;i++){container.bind(element,paths[i],check);}}});window.ls.container.get('view').add({selector:'data-ls-loop',template:false,repeat:false,nested:false,controller:function(element,view,container,window){let expr=element.getAttribute('data-ls-loop');let as=element.getAttribute('data-ls-as');let echo=function(){let array=container.path(expr);array=(!array)?[]:array;while(element.hasChildNodes()){element.removeChild(element.lastChild);element.lastChild=null;}
|
||||
if(array instanceof Array&&typeof array!=='object'){throw new Error('Reference value must be array or object. '+(typeof array)+' given');}
|
||||
let children=[];element.$lsSkip=true;element.style.visibility=(0===array.length)?'hidden':'visible';for(let prop in array){if(!array.hasOwnProperty(prop)){continue;}
|
||||
children[prop]=template.cloneNode(true);element.appendChild(children[prop]);(function(index){let context=expr+'.'+index;container.set(as,container.path(context),true);container.set('$index',index,true,false,false);container.set('$prefix',context,true,false,false);container.set('$as',as,true,false,false);view.render(children[prop]);})(prop);}
|
||||
if(value){element.value=value;}
|
||||
container.set('$index',null,true,false,false);container.set('$prefix','',true,false,false);container.set('$as','',true,false,false);};let template=(element.children.length===1)?element.children[0]:window.document.createElement('li');echo();container.bind(element,expr,echo);container.bind(element,expr+'.length',echo);}});window.ls.container.get('view').add({selector:'data-ls-template',template:false,repeat:true,controller:function(element,view,http,expression,document){let template=expression.parse(element.getAttribute('data-ls-template'));let type=element.getAttribute('data-type')||'url';element.innerHTML='';let parse=function(data,element){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));};if('script'===type){let inlineTemplate=document.getElementById(template);if(inlineTemplate&&inlineTemplate.innerHTML){parse(inlineTemplate.innerHTML,element);}else{element.innerHTML='<span style="color: red">Missing template "'+template+'"</span>';}
|
||||
children[prop]=template.cloneNode(true);element.appendChild(children[prop]);(index=>{let context=expr+'.'+index;container.set(as,container.path(context),true);container.set('$index',index,true,false,false);container.set('$prefix',context,true,false,false);container.set('$as',as,true,false,false);view.render(children[prop]);})(prop);}
|
||||
container.set('$index',null,true,false,false);container.set('$prefix','',true,false,false);container.set('$as','',true,false,false);};let template=(element.children.length===1)?element.children[0]:window.document.createElement('li');echo();container.bind(element,expr,echo);container.bind(element,expr+'.length',echo);}});window.ls.container.get('view').add({selector:'data-ls-template',template:false,repeat:true,controller:function(element,view,http,expression,document){let template=expression.parse(element.getAttribute('data-ls-template'));let type=element.getAttribute('data-type')||'url';element.innerHTML='';let parse=(data,element)=>{element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));};if('script'===type){let inlineTemplate=document.getElementById(template);if(inlineTemplate&&inlineTemplate.innerHTML){parse(inlineTemplate.innerHTML,element);}else{element.innerHTML='<span style="color: red">Missing template "'+template+'"</span>';}
|
||||
return;}
|
||||
http.get(template).then(function(element){return function(data){parse(data,element);}}(element),function(){throw new Error('Failed loading template');});}});window.ls.error=function(){return function(error){alert(error);console.error('ERROR-APP',error);}};window.addEventListener('error',function(event){alert(event.error.message);console.error('ERROR-EVENT:',event.error.message,event.error.stack);});document.addEventListener('logout',function(){if(window.ls.router.getCurrent().view.scope==='console'){state.change('/auth/signin');}});document.addEventListener('http-get-401',function(){document.dispatchEvent(new CustomEvent('logout'));},true);(function(window){"use strict";window.ls.container.set('alerts',function(window){let service={};let counter=0;let event=new CustomEvent('alerted',{bubbles:false,cancelable:true});service.list=[];service.remove=function(id){let message=this.get(id);if(message&&message.remove&&typeof message.remove==='function'){message.remove();}
|
||||
this.list=this.list.filter(function(obj){return obj.id!==parseInt(id);});window.document.dispatchEvent(event);};service.get=function(id){id=parseInt(id);let result=this.list.filter(function(obj){return obj.id===id;});if(result[0]){return result[0];}
|
||||
|
@ -328,7 +332,7 @@ element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(
|
|||
let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
|
||||
if(openEvent){document.addEventListener(openEvent,open);}
|
||||
buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);}
|
||||
document.addEventListener('modal-close',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
|
||||
document.addEventListener('modal-close',close);element.addEventListener('submit',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
|
||||
if(def==='close'){element.classList.add('close');element.classList.remove('open');}
|
||||
else{element.classList.add('open');element.classList.remove('close');}
|
||||
button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});}
|
||||
|
|
|
@ -80,13 +80,30 @@ window.ls.container = function () {
|
|||
};
|
||||
let resolve = function (target) {
|
||||
if (!target) {
|
||||
return function () {
|
||||
return () => {
|
||||
};
|
||||
}
|
||||
let self = this;
|
||||
let FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
|
||||
let text = target.toString() || '';
|
||||
let args = text.match(FN_ARGS)[1].split(',');
|
||||
const REGEX_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
|
||||
const REGEX_FUNCTION_PARAMS = /(?:\s*(?:function\s*[^(]*)?\s*)((?:[^'"]|(?:(?:(['"])(?:(?:.*?[^\\]\2)|\2))))*?)\s*(?=(?:=>)|{)/m;
|
||||
const REGEX_PARAMETERS_VALUES = /\s*([\w\\$]+)\s*(?:=\s*((?:(?:(['"])(?:\3|(?:.*?[^\\]\3)))((\s*\+\s*)(?:(?:(['"])(?:\6|(?:.*?[^\\]\6)))|(?:[\w$]*)))*)|.*?))?\s*(?:,|$)/gm;
|
||||
|
||||
function getParams(func) {
|
||||
let functionAsString = func.toString();
|
||||
let params = [];
|
||||
let match;
|
||||
functionAsString = functionAsString.replace(REGEX_COMMENTS, '');
|
||||
functionAsString = functionAsString.match(REGEX_FUNCTION_PARAMS)[1];
|
||||
if (functionAsString.charAt(0) === '(') {
|
||||
functionAsString = functionAsString.slice(1, -1);
|
||||
}
|
||||
while (match = REGEX_PARAMETERS_VALUES.exec(functionAsString)) {
|
||||
params.push(match[1]);
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
let args = getParams(target);
|
||||
return target.apply(target, args.map(function (value) {
|
||||
return self.get(value.trim());
|
||||
}));
|
||||
|
@ -126,7 +143,7 @@ window.ls.container = function () {
|
|||
let service = event.split('.').slice(0, 1).pop();
|
||||
listeners[service] = listeners[service] || {};
|
||||
listeners[service][event] = true;
|
||||
let printer = function () {
|
||||
let printer = () => {
|
||||
if (!document.body.contains(element)) {
|
||||
element = null;
|
||||
document.removeEventListener(event, printer, false);
|
||||
|
@ -342,17 +359,13 @@ window.ls.container.set('router', function (window) {
|
|||
let states = [];
|
||||
let current = null;
|
||||
let previous = null;
|
||||
let getPrevious = function () {
|
||||
return previous;
|
||||
};
|
||||
let setPrevious = function (value) {
|
||||
let getPrevious = () => previous;
|
||||
let getCurrent = () => current;
|
||||
let setPrevious = (value) => {
|
||||
previous = value;
|
||||
return this;
|
||||
};
|
||||
let getCurrent = function () {
|
||||
return current;
|
||||
};
|
||||
let setCurrent = function (value) {
|
||||
let setCurrent = (value) => {
|
||||
current = value;
|
||||
return this;
|
||||
};
|
||||
|
@ -479,14 +492,13 @@ window.ls.container.set('router', function (window) {
|
|||
};
|
||||
return state;
|
||||
}, true, true);
|
||||
window.ls.container.set('expression', function (container, filter, $as, $prefix) {
|
||||
let reg = /(\{{.*?\}})/gi;
|
||||
window.ls.container.set('expression', function (container, filter) {
|
||||
let paths = [];
|
||||
return {
|
||||
parse: function (string, def, as, prefix, cast = false) {
|
||||
regex: /(\{{.*?\}})/gi, parse: function (string, def, as, prefix, cast = false) {
|
||||
def = def || '';
|
||||
paths = [];
|
||||
return string.replace(reg, function (match) {
|
||||
return string.replace(this.regex, match => {
|
||||
let reference = match.substring(2, match.length - 2).replace('[\'', '.').replace('\']', '').trim();
|
||||
reference = reference.split('|');
|
||||
let path = (reference[0] || '');
|
||||
|
@ -504,9 +516,7 @@ window.ls.container.set('expression', function (container, filter, $as, $prefix)
|
|||
}
|
||||
return result;
|
||||
});
|
||||
}, getPaths: function () {
|
||||
return paths;
|
||||
},
|
||||
}, getPaths: () => paths,
|
||||
}
|
||||
}, true, false);
|
||||
window.ls.container.set('filter', function (container) {
|
||||
|
@ -516,25 +526,25 @@ window.ls.container.set('filter', function (container) {
|
|||
return this;
|
||||
};
|
||||
let apply = function (name, value) {
|
||||
container.set('$value', value, true, false, false);
|
||||
container.set('$value', value, true, false);
|
||||
return container.resolve(filters[name]);
|
||||
};
|
||||
add('uppercase', function ($value) {
|
||||
add('uppercase', ($value) => {
|
||||
return $value.toUpperCase();
|
||||
});
|
||||
add('lowercase', function ($value) {
|
||||
add('lowercase', ($value) => {
|
||||
return $value.toLowerCase();
|
||||
});
|
||||
return {add: add, apply: apply}
|
||||
}, true, false);
|
||||
window.ls.container.get('filter').add('escape', function (value) {
|
||||
window.ls.container.get('filter').add('escape', value => {
|
||||
if (typeof value !== 'string') {
|
||||
return value;
|
||||
}
|
||||
return value.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/\"/g, '"').replace(/\'/g, ''').replace(/\//g, '/');
|
||||
});
|
||||
window.ls = window.ls || {};
|
||||
window.ls.container.set('window', window, true, false, false).set('document', window.document, true, false, false).set('element', window.document, true, false, false);
|
||||
window.ls.container.set('window', window, true, false).set('document', window.document, true, false).set('element', window.document, true, false);
|
||||
window.ls.run = function (window) {
|
||||
try {
|
||||
this.view.render(window.document);
|
||||
|
@ -543,8 +553,8 @@ window.ls.run = function (window) {
|
|||
handler(error);
|
||||
}
|
||||
};
|
||||
window.ls.error = function () {
|
||||
return function (error) {
|
||||
window.ls.error = () => {
|
||||
return error => {
|
||||
console.error('ls-error', error.message, error.stack, error.toString());
|
||||
}
|
||||
};
|
||||
|
@ -640,7 +650,7 @@ window.ls.container.get('view').add({
|
|||
selector: 'data-ls-attrs', controller: function (element, expression, container, $as, $prefix) {
|
||||
let attrs = element.getAttribute('data-ls-attrs').trim().split(',');
|
||||
let paths = [];
|
||||
let check = function () {
|
||||
let check = () => {
|
||||
for (let i = 0; i < attrs.length; i++) {
|
||||
let attr = attrs[i];
|
||||
let key = expression.parse(attr.substring(0, attr.indexOf('=')), null, $as, $prefix) || null;
|
||||
|
@ -681,12 +691,25 @@ window.ls.container.get('view').add({
|
|||
element.checked = false;
|
||||
}
|
||||
if (bind) {
|
||||
element.addEventListener('change', function () {
|
||||
element.addEventListener('change', () => {
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
container.path(paths[i], element.checked, $as, $prefix);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
|
||||
element.checked = (Array.isArray(value) && (value.indexOf(element.value) > -1));
|
||||
}
|
||||
catch {
|
||||
return null;
|
||||
}
|
||||
|
||||
console.log(value, element.value);
|
||||
console.log(value.indexOf(element.value));
|
||||
console.log(Array.isArray(value));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
@ -703,8 +726,8 @@ window.ls.container.get('view').add({
|
|||
}
|
||||
}
|
||||
};
|
||||
let sync = (function (as, prefix) {
|
||||
return function () {
|
||||
let sync = ((as, prefix) => {
|
||||
return () => {
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
container.path(paths[i], element.value, as, prefix);
|
||||
}
|
||||
|
@ -715,7 +738,7 @@ window.ls.container.get('view').add({
|
|||
let paths = expression.getPaths();
|
||||
echo(result, true);
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
container.bind(element, paths[i], function () {
|
||||
container.bind(element, paths[i], () => {
|
||||
echo(expression.parse(syntax, null, $as, $prefix), false);
|
||||
});
|
||||
}
|
||||
|
@ -727,7 +750,7 @@ window.ls.container.get('view').add({
|
|||
let syntax = element.getAttribute('data-ls-if') || '';
|
||||
let debug = element.getAttribute('data-debug') || false;
|
||||
let paths = [];
|
||||
let check = function () {
|
||||
let check = () => {
|
||||
if (debug) {
|
||||
console.info('debug-ls-if', expression.parse(syntax, 'undefined', $as, $prefix));
|
||||
}
|
||||
|
@ -764,7 +787,6 @@ window.ls.container.get('view').add({
|
|||
let expr = element.getAttribute('data-ls-loop');
|
||||
let as = element.getAttribute('data-ls-as');
|
||||
let echo = function () {
|
||||
let value = element.value || null;
|
||||
let array = container.path(expr);
|
||||
array = (!array) ? [] : array;
|
||||
while (element.hasChildNodes()) {
|
||||
|
@ -783,7 +805,7 @@ window.ls.container.get('view').add({
|
|||
}
|
||||
children[prop] = template.cloneNode(true);
|
||||
element.appendChild(children[prop]);
|
||||
(function (index) {
|
||||
(index => {
|
||||
let context = expr + '.' + index;
|
||||
container.set(as, container.path(context), true);
|
||||
container.set('$index', index, true, false, false);
|
||||
|
@ -792,11 +814,6 @@ window.ls.container.get('view').add({
|
|||
view.render(children[prop]);
|
||||
})(prop);
|
||||
}
|
||||
|
||||
if(value) {
|
||||
element.value = value;
|
||||
}
|
||||
|
||||
container.set('$index', null, true, false, false);
|
||||
container.set('$prefix', '', true, false, false);
|
||||
container.set('$as', '', true, false, false);
|
||||
|
@ -815,7 +832,7 @@ window.ls.container.get('view').add({
|
|||
let template = expression.parse(element.getAttribute('data-ls-template'));
|
||||
let type = element.getAttribute('data-type') || 'url';
|
||||
element.innerHTML = '';
|
||||
let parse = function (data, element) {
|
||||
let parse = (data, element) => {
|
||||
element.innerHTML = data;
|
||||
view.render(element);
|
||||
element.dispatchEvent(new CustomEvent('template-loaded', {bubbles: true, cancelable: false}));
|
||||
|
|
Loading…
Reference in a new issue