Added modal support for multiple alias buttons
This commit is contained in:
eldadfux
parent
32c2ff2881
commit
d25ce2bc11
|
|
@ -8,13 +8,13 @@
|
|||
|
||||
<div class="list pull-start project-only">
|
||||
<label>
|
||||
<select id="test" data-switch data-ls-loop="projects" data-ls-as="option" data-ls-bind="{{console-project.$uid}}">
|
||||
<select data-ls-bind="{{console-project.$uid}}" data-switch data-ls-loop="projects" data-ls-as="option">
|
||||
<option data-ls-attrs="value={{option.$uid}}" data-ls-bind="{{option.name}}"></option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button style="overflow: visible;" id="setup" class="new tooltip round down" aria-label="Quick Start" data-tooltip="Create a new project"><i class="icon-plus"></i></button>
|
||||
<button style="overflow: visible;" class="setup-new tooltip round down" aria-label="Quick Start" data-tooltip="Create a new project"><i class="icon-plus"></i></button>
|
||||
|
||||
<div class="account-box clear pull-end"
|
||||
data-service="account.get"
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
data-singleton="true">
|
||||
</div>
|
||||
|
||||
<div data-ui-modal class="modal close" data-button-alias="setup" data-button-icon="icon-plus" data-button-class="project-only" data-open-event="new-project">
|
||||
<div data-ui-modal class="modal close" data-button-alias=".setup-new" data-button-icon="icon-plus" data-button-class="project-only" data-open-event="new-project">
|
||||
<h1>Add Project</h1>
|
||||
|
||||
<form data-setup>
|
||||
|
|
|
|||
|
|
@ -127,22 +127,22 @@
|
|||
<div class="drop-list pull-start" data-ls-ui-open="" data-button-text="Add Platform" data-button-class="button" tabindex="1">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="link" id="web-new"><img src="/images/clients/web.png" alt="Web Platform Logo" class="avatar xs margin-end" /> New Website</div>
|
||||
<div class="link web-new"><img src="/images/clients/web.png" alt="Web Platform Logo" class="avatar xs margin-end" /> New Website</div>
|
||||
</li>
|
||||
<li class="disabled">
|
||||
<div class="link" id="ios-new"><img src="/images/clients/ios.png" alt="iOS Platform Logo" class="avatar xs margin-end" /> New iOS App <span class="note">(soon)</span></div>
|
||||
<div class="link ios-new"><img src="/images/clients/ios.png" alt="iOS Platform Logo" class="avatar xs margin-end" /> New iOS App <span class="note">(soon)</span></div>
|
||||
</li>
|
||||
<li class="disabled">
|
||||
<div class="link" id="android-new"><img src="/images/clients/android.png" alt="Android Platform Logo" class="avatar xs margin-end" /> New Android App <span class="note">(soon)</span></div>
|
||||
<div class="link android-new"><img src="/images/clients/android.png" alt="Android Platform Logo" class="avatar xs margin-end" /> New Android App <span class="note">(soon)</span></div>
|
||||
</li>
|
||||
<li class="disabled">
|
||||
<div class="link" id="unity-new"><img src="/images/clients/unity.png" alt="Unity Platform Logo" class="avatar xs margin-end" /> New Unity Game <span class="note">(soon)</span></div>
|
||||
<div class="link unity-new"><img src="/images/clients/unity.png" alt="Unity Platform Logo" class="avatar xs margin-end" /> New Unity Game <span class="note">(soon)</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-ui-modal class="modal close" data-button-alias="web-new">
|
||||
<div data-ui-modal class="modal close" data-button-alias=".web-new">
|
||||
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
|
||||
|
||||
<h1>New Website</h1>
|
||||
|
|
|
|||
|
|
@ -42,5 +42,5 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<button data-ls-trigger="new-project">Add Project</button>
|
||||
<button data-ls-trigger="new-project" class="setup-new">Add Project</button>
|
||||
</section>
|
||||
14
public/dist/scripts/app-all.js
vendored
14
public/dist/scripts/app-all.js
vendored
|
|
@ -2037,7 +2037,7 @@ else{try{value=JSON.parse(value);element.checked=(Array.isArray(value)&&(value.i
|
|||
catch{return null;}}}
|
||||
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=((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,view,$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.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
|
||||
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);element.addEventListener('looped',function(){echo(expression.parse(syntax,null,$as,$prefix),false);});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,view,$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.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
|
||||
try{result=(eval(expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true)));}
|
||||
catch(error){throw new Error('Failed to evaluate expression "'+syntax+' (resulted with: "'+result+'")": '+error);}
|
||||
if(debug){console.info('debug-ls-if result:',result);}
|
||||
|
|
@ -2047,7 +2047,7 @@ if(prv===true&&element.$lsSkip===false){view.render(element)}};check();for(let i
|
|||
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]);(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);}
|
||||
container.set('$index',null,true,false,false);container.set('$prefix','',true,false,false);container.set('$as','',true,false,false);element.dispatchEvent(new Event('looped'));};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();}
|
||||
|
|
@ -2284,13 +2284,13 @@ return router.change('/console/home?project='+element.value);}});}});})(window);
|
|||
return n[0];}).join('')||'--';let def='https://ui-avatars.com/api/'+encodeURIComponent(name)+'/'+size+'';element.src='//www.gravatar.com/avatar/'+MD5(email)+'.jpg?s='+size+'&d='+encodeURIComponent(def);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-highlight',controller:function(element,state,expression,document){let check=function(){let links=element.getElementsByTagName('a');let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset['lsHref']||'');list.push(links[i]);}
|
||||
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){let href=list[i].href||expression.parse(list[i].dataset['lsHref']||'');if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add('selected');if(selected!==null){list[selected].classList.remove('selected');}
|
||||
selected=i;}
|
||||
else{list[i].classList.remove('selected');}}};document.addEventListener('state-changed',check);check();}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-modal',controller:function(document,element,expression){let name=element.dataset['name']||null;let buttonText=expression.parse(element.dataset['buttonText']||'');let buttonClass=element.dataset['buttonClass']||'button-class';let buttonIcon=element.dataset['buttonIcon']||null;let buttonEvent=element.dataset['buttonEvent']||'';let buttonAlias=element.dataset['buttonAlias']||'';let buttonElement=(!buttonAlias)?document.createElement('button'):document.getElementById(buttonAlias);let openEvent=element.dataset['openEvent']||null;let background=document.getElementById('modal-bg');if(!background){background=document.createElement('div');background.id='modal-bg';background.className='modal-bg';document.body.appendChild(background);background.addEventListener('click',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});}
|
||||
if(!buttonAlias){buttonElement.innerText=buttonText;buttonElement.className=buttonClass;buttonElement.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;buttonElement.insertBefore(iconElement,buttonElement.firstChild);}}
|
||||
if(buttonEvent){buttonElement.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});}
|
||||
element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(buttonElement,element);}
|
||||
else{list[i].classList.remove('selected');}}};document.addEventListener('state-changed',check);check();}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-modal',controller:function(document,element,expression){let name=element.dataset['name']||null;let buttonText=expression.parse(element.dataset['buttonText']||'');let buttonClass=element.dataset['buttonClass']||'button-class';let buttonIcon=element.dataset['buttonIcon']||null;let buttonEvent=element.dataset['buttonEvent']||'';let buttonAlias=element.dataset['buttonAlias']||'';let buttonElements=(!buttonAlias)?[document.createElement('button')]:document.querySelectorAll(buttonAlias);let openEvent=element.dataset['openEvent']||null;let background=document.getElementById('modal-bg');if(!background){background=document.createElement('div');background.id='modal-bg';background.className='modal-bg';document.body.appendChild(background);background.addEventListener('click',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});}
|
||||
if(!buttonAlias){buttonElements.forEach((button)=>{button.innerText=buttonText;button.className=buttonClass;button.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
|
||||
if(buttonEvent){buttonElements.forEach((button)=>{button.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});});}
|
||||
element.classList.add('modal');if(!buttonAlias){buttonElements.forEach((button)=>{element.parentNode.insertBefore(button,element);});}
|
||||
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);}
|
||||
buttonElements.forEach((button)=>{button.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);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');}
|
||||
|
|
|
|||
14
public/dist/scripts/app.js
vendored
14
public/dist/scripts/app.js
vendored
|
|
@ -95,7 +95,7 @@ else{try{value=JSON.parse(value);element.checked=(Array.isArray(value)&&(value.i
|
|||
catch{return null;}}}
|
||||
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=((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,view,$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.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
|
||||
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);element.addEventListener('looped',function(){echo(expression.parse(syntax,null,$as,$prefix),false);});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,view,$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.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
|
||||
try{result=(eval(expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true)));}
|
||||
catch(error){throw new Error('Failed to evaluate expression "'+syntax+' (resulted with: "'+result+'")": '+error);}
|
||||
if(debug){console.info('debug-ls-if result:',result);}
|
||||
|
|
@ -105,7 +105,7 @@ if(prv===true&&element.$lsSkip===false){view.render(element)}};check();for(let i
|
|||
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]);(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);}
|
||||
container.set('$index',null,true,false,false);container.set('$prefix','',true,false,false);container.set('$as','',true,false,false);element.dispatchEvent(new Event('looped'));};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();}
|
||||
|
|
@ -342,13 +342,13 @@ return router.change('/console/home?project='+element.value);}});}});})(window);
|
|||
return n[0];}).join('')||'--';let def='https://ui-avatars.com/api/'+encodeURIComponent(name)+'/'+size+'';element.src='//www.gravatar.com/avatar/'+MD5(email)+'.jpg?s='+size+'&d='+encodeURIComponent(def);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-highlight',controller:function(element,state,expression,document){let check=function(){let links=element.getElementsByTagName('a');let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset['lsHref']||'');list.push(links[i]);}
|
||||
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){let href=list[i].href||expression.parse(list[i].dataset['lsHref']||'');if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add('selected');if(selected!==null){list[selected].classList.remove('selected');}
|
||||
selected=i;}
|
||||
else{list[i].classList.remove('selected');}}};document.addEventListener('state-changed',check);check();}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-modal',controller:function(document,element,expression){let name=element.dataset['name']||null;let buttonText=expression.parse(element.dataset['buttonText']||'');let buttonClass=element.dataset['buttonClass']||'button-class';let buttonIcon=element.dataset['buttonIcon']||null;let buttonEvent=element.dataset['buttonEvent']||'';let buttonAlias=element.dataset['buttonAlias']||'';let buttonElement=(!buttonAlias)?document.createElement('button'):document.getElementById(buttonAlias);let openEvent=element.dataset['openEvent']||null;let background=document.getElementById('modal-bg');if(!background){background=document.createElement('div');background.id='modal-bg';background.className='modal-bg';document.body.appendChild(background);background.addEventListener('click',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});}
|
||||
if(!buttonAlias){buttonElement.innerText=buttonText;buttonElement.className=buttonClass;buttonElement.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;buttonElement.insertBefore(iconElement,buttonElement.firstChild);}}
|
||||
if(buttonEvent){buttonElement.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});}
|
||||
element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(buttonElement,element);}
|
||||
else{list[i].classList.remove('selected');}}};document.addEventListener('state-changed',check);check();}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-modal',controller:function(document,element,expression){let name=element.dataset['name']||null;let buttonText=expression.parse(element.dataset['buttonText']||'');let buttonClass=element.dataset['buttonClass']||'button-class';let buttonIcon=element.dataset['buttonIcon']||null;let buttonEvent=element.dataset['buttonEvent']||'';let buttonAlias=element.dataset['buttonAlias']||'';let buttonElements=(!buttonAlias)?[document.createElement('button')]:document.querySelectorAll(buttonAlias);let openEvent=element.dataset['openEvent']||null;let background=document.getElementById('modal-bg');if(!background){background=document.createElement('div');background.id='modal-bg';background.className='modal-bg';document.body.appendChild(background);background.addEventListener('click',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});}
|
||||
if(!buttonAlias){buttonElements.forEach((button)=>{button.innerText=buttonText;button.className=buttonClass;button.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
|
||||
if(buttonEvent){buttonElements.forEach((button)=>{button.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});});}
|
||||
element.classList.add('modal');if(!buttonAlias){buttonElements.forEach((button)=>{element.parentNode.insertBefore(button,element);});}
|
||||
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);}
|
||||
buttonElements.forEach((button)=>{button.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);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');}
|
||||
|
|
|
|||
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -95,7 +95,7 @@ catch(error){let handler=window.ls.container.resolve(this.error);handler(error);
|
|||
catch{return null;}}}
|
||||
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=((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,view,$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.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
|
||||
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);element.addEventListener('looped',function(){echo(expression.parse(syntax,null,$as,$prefix),false);});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,view,$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.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
|
||||
try{result=(eval(expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true)));}
|
||||
catch(error){throw new Error('Failed to evaluate expression "'+syntax+' (resulted with: "'+result+'")": '+error);}
|
||||
if(debug){console.info('debug-ls-if result:',result);}
|
||||
|
|
@ -105,7 +105,7 @@ catch(error){let handler=window.ls.container.resolve(this.error);handler(error);
|
|||
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]);(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);}
|
||||
container.set('$index',null,true,false,false);container.set('$prefix','',true,false,false);container.set('$as','',true,false,false);element.dispatchEvent(new Event('looped'));};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');});}});
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
let buttonIcon = element.dataset['buttonIcon'] || null;
|
||||
let buttonEvent = element.dataset['buttonEvent'] || '';
|
||||
let buttonAlias = element.dataset['buttonAlias'] || '';
|
||||
let buttonElement = (!buttonAlias) ? document.createElement('button') : document.getElementById(buttonAlias);
|
||||
let buttonElements = (!buttonAlias) ? [document.createElement('button')] : document.querySelectorAll(buttonAlias);
|
||||
let openEvent = element.dataset['openEvent'] || null; // When event triggers modal will open
|
||||
let background = document.getElementById('modal-bg');
|
||||
|
||||
|
|
@ -29,31 +29,38 @@
|
|||
}
|
||||
|
||||
if(!buttonAlias) {
|
||||
buttonElement.innerText = buttonText;
|
||||
buttonElement.className = buttonClass;
|
||||
buttonElement.type = 'button';
|
||||
buttonElements.forEach((button) => {
|
||||
|
||||
if(buttonIcon) {
|
||||
let iconElement = document.createElement('i');
|
||||
iconElement.className = buttonIcon;
|
||||
button.innerText = buttonText;
|
||||
button.className = buttonClass;
|
||||
button.type = 'button';
|
||||
|
||||
buttonElement.insertBefore(iconElement, buttonElement.firstChild);
|
||||
}
|
||||
if(buttonIcon) {
|
||||
let iconElement = document.createElement('i');
|
||||
iconElement.className = buttonIcon;
|
||||
|
||||
button.insertBefore(iconElement, button.firstChild);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(buttonEvent) {
|
||||
buttonElement.addEventListener('click', function () {
|
||||
document.dispatchEvent(new CustomEvent(buttonEvent, {
|
||||
bubbles: false,
|
||||
cancelable: true
|
||||
}));
|
||||
buttonElements.forEach((button) => {
|
||||
button.addEventListener('click', function () {
|
||||
document.dispatchEvent(new CustomEvent(buttonEvent, {
|
||||
bubbles: false,
|
||||
cancelable: true
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
element.classList.add('modal');
|
||||
|
||||
if(!buttonAlias) { // Add to DOM when not alias
|
||||
element.parentNode.insertBefore(buttonElement, element);
|
||||
buttonElements.forEach((button) => {
|
||||
element.parentNode.insertBefore(button, element);
|
||||
});
|
||||
}
|
||||
|
||||
let open = function () {
|
||||
|
|
@ -85,7 +92,9 @@
|
|||
document.addEventListener(openEvent, open);
|
||||
}
|
||||
|
||||
buttonElement.addEventListener('click', open);
|
||||
buttonElements.forEach((button) => {
|
||||
button.addEventListener('click', open);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.which === 27) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.box {
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
padding: 30px;
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
z-index: 2;
|
||||
font-size: 14px;
|
||||
|
||||
.new {
|
||||
.setup-new {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue