Added option to pass toggle button as a selector
This commit is contained in:
parent
c929b82d8f
commit
210c8ac8df
3
public/dist/scripts/app-all.js
vendored
3
public/dist/scripts/app-all.js
vendored
|
@ -2467,13 +2467,14 @@ element.classList.add('modal');if(!buttonAlias){buttonElements.forEach((button)=
|
|||
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);}
|
||||
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',controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass']||'ls-ui-open';let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let blur=element.hasAttribute('data-blur');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;button.type='button';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',controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass']||'ls-ui-open';let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let buttonSelector=element.dataset['buttonSelector']||'';let hover=element.hasAttribute('data-hover');let blur=element.hasAttribute('data-blur');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;button.type='button';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');});}
|
||||
let close=function(){element.classList.add('close');element.classList.remove('open');};let closeDelay=function(){window.setTimeout(function(){close();},150);};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}
|
||||
while(el=el.parentNode){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}}
|
||||
return null;};if(blur){button.addEventListener('blur',closeDelay);}
|
||||
if(!buttonSelector){let buttonElements=element.querySelectorAll(buttonSelector);buttonElements.forEach((node)=>{node.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(blur){node.addEventListener('blur',closeDelay);}});}
|
||||
element.addEventListener('click',function(event){let target=findParent('a',event.target);if(!target){return false;}
|
||||
if(!target.href){return false;}
|
||||
closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-phases',controller:function(element,window,document,expression,router){var tabs=document.createElement('ul');var container=document.createElement('div');var titles=Array.prototype.slice.call(element.getElementsByTagName('h2'));var next=Array.prototype.slice.call(element.querySelectorAll('[data-next]'));var previous=Array.prototype.slice.call(element.querySelectorAll('[data-previous]'));var position=0;var init=false;for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset['state']||'');if(tabState===(window.location.pathname+window.location.search).substring(0,tabState.length)){position=i;}}
|
||||
|
|
3
public/dist/scripts/app.js
vendored
3
public/dist/scripts/app.js
vendored
|
@ -381,13 +381,14 @@ element.classList.add('modal');if(!buttonAlias){buttonElements.forEach((button)=
|
|||
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);}
|
||||
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',controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass']||'ls-ui-open';let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let blur=element.hasAttribute('data-blur');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;button.type='button';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',controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass']||'ls-ui-open';let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let buttonSelector=element.dataset['buttonSelector']||'';let hover=element.hasAttribute('data-hover');let blur=element.hasAttribute('data-blur');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;button.type='button';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');});}
|
||||
let close=function(){element.classList.add('close');element.classList.remove('open');};let closeDelay=function(){window.setTimeout(function(){close();},150);};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}
|
||||
while(el=el.parentNode){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}}
|
||||
return null;};if(blur){button.addEventListener('blur',closeDelay);}
|
||||
if(!buttonSelector){let buttonElements=element.querySelectorAll(buttonSelector);buttonElements.forEach((node)=>{node.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(blur){node.addEventListener('blur',closeDelay);}});}
|
||||
element.addEventListener('click',function(event){let target=findParent('a',event.target);if(!target){return false;}
|
||||
if(!target.href){return false;}
|
||||
closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-phases',controller:function(element,window,document,expression,router){var tabs=document.createElement('ul');var container=document.createElement('div');var titles=Array.prototype.slice.call(element.getElementsByTagName('h2'));var next=Array.prototype.slice.call(element.querySelectorAll('[data-next]'));var previous=Array.prototype.slice.call(element.querySelectorAll('[data-previous]'));var position=0;var init=false;for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset['state']||'');if(tabState===(window.location.pathname+window.location.search).substring(0,tabState.length)){position=i;}}
|
||||
|
|
|
@ -2,13 +2,14 @@
|
|||
window.ls.container.get('view').add({
|
||||
selector: 'data-ls-ui-open',
|
||||
controller: function(element, window) {
|
||||
let def = (element.classList.contains('open')) ? 'open' : 'close';
|
||||
let buttonClass = element.dataset['buttonClass'] || 'ls-ui-open';
|
||||
let buttonText = element.dataset['buttonText'] || '';
|
||||
let buttonIcon = element.dataset['buttonIcon'] || '';
|
||||
let hover = element.hasAttribute('data-hover');
|
||||
let blur = element.hasAttribute('data-blur');
|
||||
let button = window.document.createElement('button');
|
||||
let def = (element.classList.contains('open')) ? 'open' : 'close';
|
||||
let buttonClass = element.dataset['buttonClass'] || 'ls-ui-open';
|
||||
let buttonText = element.dataset['buttonText'] || '';
|
||||
let buttonIcon = element.dataset['buttonIcon'] || '';
|
||||
let buttonSelector = element.dataset['buttonSelector'] || '';
|
||||
let hover = element.hasAttribute('data-hover');
|
||||
let blur = element.hasAttribute('data-blur');
|
||||
let button = window.document.createElement('button');
|
||||
|
||||
let isTouch = function() {
|
||||
return 'ontouchstart' in window // works on most browsers
|
||||
|
@ -81,6 +82,21 @@
|
|||
button.addEventListener('blur', closeDelay);
|
||||
}
|
||||
|
||||
if(!buttonSelector) {
|
||||
let buttonElements = element.querySelectorAll(buttonSelector);
|
||||
|
||||
buttonElements.forEach((node) => {
|
||||
node.addEventListener('click', function() {
|
||||
element.classList.toggle('open');
|
||||
element.classList.toggle('close');
|
||||
});
|
||||
|
||||
if(blur) {
|
||||
node.addEventListener('blur', closeDelay);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
element.addEventListener('click', function (event) {
|
||||
let target = findParent('a', event.target);
|
||||
|
||||
|
|
Loading…
Reference in a new issue