From 210c8ac8dfda33c98dd7d884d16a877116e6529e Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Sat, 31 Aug 2019 02:41:33 +0300
Subject: [PATCH] Added option to pass toggle button as a selector

---
 public/dist/scripts/app-all.js  |  3 ++-
 public/dist/scripts/app.js      |  3 ++-
 public/scripts/views/ui/open.js | 30 +++++++++++++++++++++++-------
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/public/dist/scripts/app-all.js b/public/dist/scripts/app-all.js
index a76b2bee6d..38408f4bad 100644
--- a/public/dist/scripts/app-all.js
+++ b/public/dist/scripts/app-all.js
@@ -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;}}
diff --git a/public/dist/scripts/app.js b/public/dist/scripts/app.js
index 093f6e5936..fd8ab47d6a 100644
--- a/public/dist/scripts/app.js
+++ b/public/dist/scripts/app.js
@@ -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;}}
diff --git a/public/scripts/views/ui/open.js b/public/scripts/views/ui/open.js
index 263e5e07fd..e7913da6cd 100644
--- a/public/scripts/views/ui/open.js
+++ b/public/scripts/views/ui/open.js
@@ -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);