1
0
Fork 0
mirror of synced 2024-06-27 10:41:00 +12:00

Added option to pass toggle button as a selector

This commit is contained in:
eldadfux 2019-08-31 02:41:33 +03:00
parent c929b82d8f
commit 210c8ac8df
3 changed files with 27 additions and 9 deletions

View file

@ -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;}}

View file

@ -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;}}

View file

@ -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);