Added select all button to all events and scopes lists

app/views/console/keys/index.phtml

@@ -52,19 +52,21 @@ $scopes = $this->getParam('scopes', []);
                         <label data-ls-attrs="for=name-{{key.$id}}">Name <span class="tooltip large" data-tooltip="Choose any name that will help you distinguish between your different API keys."><i class="icon-question"></i></span></label>
                         <input type="text" class="full-width" data-ls-attrs="id=name-{{key.$id}}" name="name" required autocomplete="off" data-ls-bind="{{key.name}}" />
 
-                        <label data-ls-attrs="for=scopes-{{key.$id}}">Scopes (<a data-ls-attrs="href={{env.HOME}}/docs/keys" target="_blank" rel="noopener">Learn more</a>)</label>
-                        <div class="row responsive thin">
-                            <?php foreach ($scopes as $i => $scope) : ?>
-                                <div class="col span-6 text-one-liner margin-bottom text-height-large">
-                                    <input type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" value="<?php echo $scope; ?>" /> &nbsp; <?php echo $scope; ?>
-                                </div>
-                                <?php if (($i + 1) % 2 === 0) : ?>
-                                </div>
-                                <div class="row responsive thin">
-                                <?php endif; ?>
-
-                            <?php endforeach; ?>
-                        </div>
+                        <section data-forms-select-all>
+                            <label data-ls-attrs="for=scopes-{{key.$id}}">Scopes (<a data-ls-attrs="href={{env.HOME}}/docs/keys" target="_blank" rel="noopener">Learn more</a>)</label>
+                            <div class="row responsive thin">
+                                <?php foreach ($scopes as $i => $scope) : ?>
+                                    <div class="col span-6 text-one-liner margin-bottom text-height-large">
+                                        <input type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" value="<?php echo $scope; ?>" /> &nbsp; <?php echo $scope; ?>
+                                    </div>
+                                    <?php if (($i + 1) % 2 === 0) : ?>
+                                    </div>
+                                    <div class="row responsive thin">
+                                    <?php endif; ?>
+    
+                                <?php endforeach; ?>
+                            </div>
+                        </section>
 
                         <hr class="margin-top-no" />
 
@@ -147,19 +149,21 @@ $scopes = $this->getParam('scopes', []);
                 <label for="name">Name <span class="tooltip large" data-tooltip="Choose any name that will help you distinguish between your different API keys."><i class="icon-question"></i></span></label>
                 <input type="text" class="full-width" id="name" name="name" required autocomplete="off" />
 
-                <label for="scopes">Scopes (<a data-ls-attrs="href={{env.HOME}}/docs/keys" target="_blank" rel="noopener">Learn more</a>)</label>
-                <div class="row responsive thin">
-                    <?php foreach ($scopes as $i => $scope) : ?>
-                        <div class="col span-6 text-one-liner margin-bottom text-height-large">
-                            <input type="checkbox" name="scopes" value="<?php echo $scope; ?>" /> &nbsp; <?php echo $scope; ?>
-                        </div>
-                        <?php if (($i + 1) % 2 === 0) : ?>
-                        </div>
-                        <div class="row responsive thin">
-                        <?php endif; ?>
+                <section data-forms-select-all>
+                    <label for="scopes">Scopes (<a data-ls-attrs="href={{env.HOME}}/docs/keys" target="_blank" rel="noopener">Learn more</a>)</label>
+                    <div class="row responsive thin">
+                        <?php foreach ($scopes as $i => $scope) : ?>
+                            <div class="col span-6 text-one-liner margin-bottom text-height-large">
+                                <input type="checkbox" name="scopes" value="<?php echo $scope; ?>" /> &nbsp; <?php echo $scope; ?>
+                            </div>
+                            <?php if (($i + 1) % 2 === 0) : ?>
+                            </div>
+                            <div class="row responsive thin">
+                            <?php endif; ?>
 
-                    <?php endforeach; ?>
-                </div>
+                        <?php endforeach; ?>
+                    </div>
+                </section>
 
                 <hr class="margin-top-no" />
 

app/views/console/webhooks/index.phtml

@@ -56,19 +56,21 @@ $events = array_keys($this->getParam('events', []));
                         <label data-ls-attrs="for=name-{{webhook.$id}}">Name</label>
                         <input type="text" class="full-width" data-ls-attrs="id=name-{{webhook.$id}}" name="name" required autocomplete="off" data-ls-bind="{{webhook.name}}" />
 
-                        <label data-ls-attrs="for=events-{{webhook.$id}}">Events</label>
-                        <div class="row responsive thin">
-                            <?php foreach ($events as $i => $event) : ?>
-                                <div class="col span-6 text-one-liner margin-bottom text-height-large">
-                                    <input type="checkbox" name="events" data-ls-bind="{{webhook.events}}" value="<?php echo $event; ?>" /> &nbsp; <?php echo $event; ?>
-                                </div>
-                                <?php if (($i + 1) % 2 === 0) : ?>
-                                </div>
-                                <div class="row responsive thin">
-                                <?php endif; ?>
-
-                            <?php endforeach; ?>
-                        </div>
+                        <section data-forms-select-all>
+                            <label data-ls-attrs="for=events-{{webhook.$id}}">Events</label>
+                            <div class="row responsive thin">
+                                <?php foreach ($events as $i => $event) : ?>
+                                    <div class="col span-6 text-one-liner margin-bottom text-height-large">
+                                        <input type="checkbox" name="events" data-ls-bind="{{webhook.events}}" value="<?php echo $event; ?>" /> &nbsp; <?php echo $event; ?>
+                                    </div>
+                                    <?php if (($i + 1) % 2 === 0) : ?>
+                                    </div>
+                                    <div class="row responsive thin">
+                                    <?php endif; ?>
+    
+                                <?php endforeach; ?>
+                            </div>
+                        </section>
 
                         <label data-ls-attrs="for=url-{{webhook.$id}}">POST URL</label>
                         <input type="url" class="full-width" data-ls-attrs="id=url-{{webhook.$id}}" name="url" required autocomplete="off" placeholder="https://example.com/callback" data-ls-bind="{{webhook.url}}" />
@@ -170,19 +172,21 @@ $events = array_keys($this->getParam('events', []));
                 <label for="name">Name</label>
                 <input type="text" class="full-width" id="name" name="name" required autocomplete="off" />
 
-                <label for="events">Events</label>
-                <div class="row responsive thin">
-                    <?php foreach ($events as $i => $event) : ?>
-                        <div class="col span-6 text-one-liner margin-bottom text-height-large">
-                            <input type="checkbox" name="events" value="<?php echo $event; ?>" /> &nbsp; <?php echo $event; ?>
-                        </div>
-                        <?php if (($i + 1) % 2 === 0) : ?>
-                        </div>
-                        <div class="row responsive thin">
-                        <?php endif; ?>
+                <section data-forms-select-all>
+                    <label for="events">Events</label>
+                    <div class="row responsive thin">
+                        <?php foreach ($events as $i => $event) : ?>
+                            <div class="col span-6 text-one-liner margin-bottom text-height-large">
+                                <input type="checkbox" name="events" value="<?php echo $event; ?>" /> &nbsp; <?php echo $event; ?>
+                            </div>
+                            <?php if (($i + 1) % 2 === 0) : ?>
+                            </div>
+                            <div class="row responsive thin">
+                            <?php endif; ?>
 
-                    <?php endforeach; ?>
-                </div>
+                        <?php endforeach; ?>
+                    </div>
+                </section>
 
                 <label for="url">POST URL</label>
                 <input type="url" class="full-width" id="url" name="url" required autocomplete="off" placeholder="https://example.com/callback" />

gulpfile.js

@@ -55,6 +55,7 @@ const configApp  = {
         'public/scripts/views/forms/pell.js',
         'public/scripts/views/forms/remove.js',
         'public/scripts/views/forms/run.js',
+        'public/scripts/views/forms/select-all.js',
         'public/scripts/views/forms/switch.js',
         'public/scripts/views/forms/tags.js',
         'public/scripts/views/forms/text-count.js',

public/dist/scripts/app-all.js

@@ -2308,7 +2308,8 @@ var variations={digits:/\d/.test(password),lower:/[a-z]/.test(password),upper:/[
 score+=(variationCount-1)*10;return parseInt(score);};var callback=function(){var score=calc(this.value);if(""===this.value)return(meter.className="password-meter");if(score>60)return(meter.className="password-meter strong");if(score>30)return(meter.className="password-meter medium");if(score>=0)return(meter.className="password-meter weak");};var meter=window.document.createElement("div");meter.className="password-meter";element.parentNode.insertBefore(meter,element.nextSibling);element.addEventListener("change",callback);element.addEventListener("keypress",callback);element.addEventListener("keyup",callback);element.addEventListener("keydown",callback);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-pell",controller:function(element,window,document,markdown,rtl){var div=document.createElement("div");element.className="pell hide";div.className="input pell";element.parentNode.insertBefore(div,element);element.tabIndex=-1;var turndownService=new TurndownService();turndownService.addRule("underline",{filter:["u"],replacement:function(content){return"__"+content+"__";}});var editor=window.pell.init({element:div,onChange:function onChange(html){alignText();element.value=turndownService.turndown(html);},defaultParagraphSeparator:"p",actions:[{name:"bold",icon:'<i class="icon-bold"></i>'},{name:"underline",icon:'<i class="icon-underline"></i>'},{name:"italic",icon:'<i class="icon-italic"></i>'},{name:"olist",icon:'<i class="icon-list-numbered"></i>'},{name:"ulist",icon:'<i class="icon-list-bullet"></i>'},{name:"link",icon:'<i class="icon-link"></i>'}]});var clean=function(e){e.stopPropagation();e.preventDefault();var clipboardData=e.clipboardData||window.clipboardData;console.log(clipboardData.getData("Text"));window.pell.exec("insertText",clipboardData.getData("Text"));return true;};var alignText=function(){let paragraphs=editor.content.querySelectorAll('p,li');let last='';for(let paragraph of paragraphs){var content=paragraph.textContent;if(content.trim()===''){content=last.textContent;}
 if(rtl.isRTL(content)){paragraph.style.direction='rtl';paragraph.style.textAlign='right';}
 else{paragraph.style.direction='ltr';paragraph.style.textAlign='left';}
-last=paragraph;}};var santize=function(e){clean(e);alignText(e);};element.addEventListener("change",function(){editor.content.innerHTML=markdown.render(element.value);alignText();});editor.content.setAttribute("placeholder",element.placeholder);editor.content.innerHTML=markdown.render(element.value);editor.content.tabIndex=0;alignText();editor.content.onkeydown=function preventTab(event){if(event.which===9){event.preventDefault();if(document.activeElement){var focussable=Array.prototype.filter.call(document.querySelectorAll('a:not([disabled]), button:not([disabled]), select:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])'),function(element){return(element.offsetWidth>0||element.offsetHeight>0||element===document.activeElement);});var index=focussable.indexOf(document.activeElement);if(index>-1){if(event.shiftKey){var prevElement=focussable[index-1]||focussable[focussable.length-1];prevElement.focus();}else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};div.addEventListener("paste",santize);div.addEventListener("drop",santize);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-remove",controller:function(element){Array.prototype.slice.call(element.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-run",repeat:false,controller:function(element,expression,container){let action=expression.parse(element.dataset["formsRun"]||'');element.addEventListener('click',function(){return container.path(action)();});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-switch",controller:function(element){let input=window.document.createElement("input");input.type="checkbox";input.className="button switch";let syncA=function(){let value=input.checked?"true":"false"
+last=paragraph;}};var santize=function(e){clean(e);alignText(e);};element.addEventListener("change",function(){editor.content.innerHTML=markdown.render(element.value);alignText();});editor.content.setAttribute("placeholder",element.placeholder);editor.content.innerHTML=markdown.render(element.value);editor.content.tabIndex=0;alignText();editor.content.onkeydown=function preventTab(event){if(event.which===9){event.preventDefault();if(document.activeElement){var focussable=Array.prototype.filter.call(document.querySelectorAll('a:not([disabled]), button:not([disabled]), select:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])'),function(element){return(element.offsetWidth>0||element.offsetHeight>0||element===document.activeElement);});var index=focussable.indexOf(document.activeElement);if(index>-1){if(event.shiftKey){var prevElement=focussable[index-1]||focussable[focussable.length-1];prevElement.focus();}else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};div.addEventListener("paste",santize);div.addEventListener("drop",santize);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-remove",controller:function(element){Array.prototype.slice.call(element.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-run",repeat:false,controller:function(element,expression,container){let action=expression.parse(element.dataset["formsRun"]||'');element.addEventListener('click',function(){return container.path(action)();});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-select-all",controller:function(element){let select=document.createElement("button");let unselect=document.createElement("button");select.textContent='Select All';unselect.textContent='Unselect All';select.classList.add('link');select.classList.add('margin-top-tiny');select.classList.add('margin-start-small');select.classList.add('text-size-small');select.classList.add('pull-end');unselect.classList.add('link');unselect.classList.add('margin-top-tiny');unselect.classList.add('margin-start-small');unselect.classList.add('text-size-small');unselect.classList.add('pull-end');select.type='button';unselect.type='button';element.parentNode.insertBefore(select,element);element.parentNode.insertBefore(unselect,element);select.addEventListener('click',function(){let checkboxes=document.querySelectorAll("input[type='checkbox']");for(var i=0;i<checkboxes.length;i++){checkboxes[i].checked=true;}})
+unselect.addEventListener('click',function(){let checkboxes=document.querySelectorAll("input[type='checkbox']");for(var i=0;i<checkboxes.length;i++){checkboxes[i].checked=false;}})}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-switch",controller:function(element){let input=window.document.createElement("input");input.type="checkbox";input.className="button switch";let syncA=function(){let value=input.checked?"true":"false"
 let old=element.value;element.value=value;if(value!==old){element.dispatchEvent(new Event('change'));}};let syncB=function(){input.checked=(element.value==="true");};input.addEventListener("input",syncA);input.addEventListener("change",syncA);element.addEventListener("input",syncB);element.addEventListener("change",syncB);syncA();element.parentNode.insertBefore(input,element);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-tags",controller:function(element){let array=[];let tags=window.document.createElement("div");let preview=window.document.createElement("ul");let add=window.document.createElement("input");let listen=function(event){if((event.key==="Enter"||event.key===" "||event.key==="Tab")&&add.value.length>0){array.push(add.value);add.value="";element.value=JSON.stringify(array);check();if(event.key!=="Tab"){event.preventDefault();}}
 if((event.key==="Backspace"||event.key==="Delete")&&add.value===""){array.splice(-1,1);element.value=JSON.stringify(array);check();}
 return false;};let check=function(){try{array=JSON.parse(element.value)||[];}catch(error){array=[];}

public/dist/scripts/app.js

@@ -356,7 +356,8 @@ var variations={digits:/\d/.test(password),lower:/[a-z]/.test(password),upper:/[
 score+=(variationCount-1)*10;return parseInt(score);};var callback=function(){var score=calc(this.value);if(""===this.value)return(meter.className="password-meter");if(score>60)return(meter.className="password-meter strong");if(score>30)return(meter.className="password-meter medium");if(score>=0)return(meter.className="password-meter weak");};var meter=window.document.createElement("div");meter.className="password-meter";element.parentNode.insertBefore(meter,element.nextSibling);element.addEventListener("change",callback);element.addEventListener("keypress",callback);element.addEventListener("keyup",callback);element.addEventListener("keydown",callback);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-pell",controller:function(element,window,document,markdown,rtl){var div=document.createElement("div");element.className="pell hide";div.className="input pell";element.parentNode.insertBefore(div,element);element.tabIndex=-1;var turndownService=new TurndownService();turndownService.addRule("underline",{filter:["u"],replacement:function(content){return"__"+content+"__";}});var editor=window.pell.init({element:div,onChange:function onChange(html){alignText();element.value=turndownService.turndown(html);},defaultParagraphSeparator:"p",actions:[{name:"bold",icon:'<i class="icon-bold"></i>'},{name:"underline",icon:'<i class="icon-underline"></i>'},{name:"italic",icon:'<i class="icon-italic"></i>'},{name:"olist",icon:'<i class="icon-list-numbered"></i>'},{name:"ulist",icon:'<i class="icon-list-bullet"></i>'},{name:"link",icon:'<i class="icon-link"></i>'}]});var clean=function(e){e.stopPropagation();e.preventDefault();var clipboardData=e.clipboardData||window.clipboardData;console.log(clipboardData.getData("Text"));window.pell.exec("insertText",clipboardData.getData("Text"));return true;};var alignText=function(){let paragraphs=editor.content.querySelectorAll('p,li');let last='';for(let paragraph of paragraphs){var content=paragraph.textContent;if(content.trim()===''){content=last.textContent;}
 if(rtl.isRTL(content)){paragraph.style.direction='rtl';paragraph.style.textAlign='right';}
 else{paragraph.style.direction='ltr';paragraph.style.textAlign='left';}
-last=paragraph;}};var santize=function(e){clean(e);alignText(e);};element.addEventListener("change",function(){editor.content.innerHTML=markdown.render(element.value);alignText();});editor.content.setAttribute("placeholder",element.placeholder);editor.content.innerHTML=markdown.render(element.value);editor.content.tabIndex=0;alignText();editor.content.onkeydown=function preventTab(event){if(event.which===9){event.preventDefault();if(document.activeElement){var focussable=Array.prototype.filter.call(document.querySelectorAll('a:not([disabled]), button:not([disabled]), select:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])'),function(element){return(element.offsetWidth>0||element.offsetHeight>0||element===document.activeElement);});var index=focussable.indexOf(document.activeElement);if(index>-1){if(event.shiftKey){var prevElement=focussable[index-1]||focussable[focussable.length-1];prevElement.focus();}else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};div.addEventListener("paste",santize);div.addEventListener("drop",santize);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-remove",controller:function(element){Array.prototype.slice.call(element.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-run",repeat:false,controller:function(element,expression,container){let action=expression.parse(element.dataset["formsRun"]||'');element.addEventListener('click',function(){return container.path(action)();});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-switch",controller:function(element){let input=window.document.createElement("input");input.type="checkbox";input.className="button switch";let syncA=function(){let value=input.checked?"true":"false"
+last=paragraph;}};var santize=function(e){clean(e);alignText(e);};element.addEventListener("change",function(){editor.content.innerHTML=markdown.render(element.value);alignText();});editor.content.setAttribute("placeholder",element.placeholder);editor.content.innerHTML=markdown.render(element.value);editor.content.tabIndex=0;alignText();editor.content.onkeydown=function preventTab(event){if(event.which===9){event.preventDefault();if(document.activeElement){var focussable=Array.prototype.filter.call(document.querySelectorAll('a:not([disabled]), button:not([disabled]), select:not([disabled]), input[type=text]:not([disabled]), input[type=checkbox]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])'),function(element){return(element.offsetWidth>0||element.offsetHeight>0||element===document.activeElement);});var index=focussable.indexOf(document.activeElement);if(index>-1){if(event.shiftKey){var prevElement=focussable[index-1]||focussable[focussable.length-1];prevElement.focus();}else{var nextElement=focussable[index+1]||focussable[0];nextElement.focus();}}}}};div.addEventListener("paste",santize);div.addEventListener("drop",santize);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-remove",controller:function(element){Array.prototype.slice.call(element.querySelectorAll("[data-remove]")).map(function(obj){obj.addEventListener("click",function(){element.parentNode.removeChild(element);});});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-run",repeat:false,controller:function(element,expression,container){let action=expression.parse(element.dataset["formsRun"]||'');element.addEventListener('click',function(){return container.path(action)();});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-select-all",controller:function(element){let select=document.createElement("button");let unselect=document.createElement("button");select.textContent='Select All';unselect.textContent='Unselect All';select.classList.add('link');select.classList.add('margin-top-tiny');select.classList.add('margin-start-small');select.classList.add('text-size-small');select.classList.add('pull-end');unselect.classList.add('link');unselect.classList.add('margin-top-tiny');unselect.classList.add('margin-start-small');unselect.classList.add('text-size-small');unselect.classList.add('pull-end');select.type='button';unselect.type='button';element.parentNode.insertBefore(select,element);element.parentNode.insertBefore(unselect,element);select.addEventListener('click',function(){let checkboxes=document.querySelectorAll("input[type='checkbox']");for(var i=0;i<checkboxes.length;i++){checkboxes[i].checked=true;}})
+unselect.addEventListener('click',function(){let checkboxes=document.querySelectorAll("input[type='checkbox']");for(var i=0;i<checkboxes.length;i++){checkboxes[i].checked=false;}})}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-switch",controller:function(element){let input=window.document.createElement("input");input.type="checkbox";input.className="button switch";let syncA=function(){let value=input.checked?"true":"false"
 let old=element.value;element.value=value;if(value!==old){element.dispatchEvent(new Event('change'));}};let syncB=function(){input.checked=(element.value==="true");};input.addEventListener("input",syncA);input.addEventListener("change",syncA);element.addEventListener("input",syncB);element.addEventListener("change",syncB);syncA();element.parentNode.insertBefore(input,element);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-tags",controller:function(element){let array=[];let tags=window.document.createElement("div");let preview=window.document.createElement("ul");let add=window.document.createElement("input");let listen=function(event){if((event.key==="Enter"||event.key===" "||event.key==="Tab")&&add.value.length>0){array.push(add.value);add.value="";element.value=JSON.stringify(array);check();if(event.key!=="Tab"){event.preventDefault();}}
 if((event.key==="Backspace"||event.key==="Delete")&&add.value===""){array.splice(-1,1);element.value=JSON.stringify(array);check();}
 return false;};let check=function(){try{array=JSON.parse(element.value)||[];}catch(error){array=[];}

public/scripts/views/forms/select-all.js

@@ -0,0 +1,51 @@
+(function(window) {
+  "use strict";
+
+  window.ls.container.get("view").add({
+    selector: "data-forms-select-all",
+    controller: function(element) {
+      let select = document.createElement("button");
+      let unselect = document.createElement("button");
+
+      select.textContent = 'Select All';
+      unselect.textContent = 'Unselect All';
+
+      select.classList.add('link');
+      select.classList.add('margin-top-tiny');
+      select.classList.add('margin-start-small');
+      select.classList.add('text-size-small');
+      select.classList.add('pull-end');
+      unselect.classList.add('link');
+      unselect.classList.add('margin-top-tiny');
+      unselect.classList.add('margin-start-small');
+      unselect.classList.add('text-size-small');
+      unselect.classList.add('pull-end');
+
+      // select.disabled = true;
+      // unselect.disabled = true;
+
+      select.type = 'button';
+      unselect.type = 'button';
+
+      element.parentNode.insertBefore(select, element);
+      element.parentNode.insertBefore(unselect, element);
+
+      select.addEventListener('click', function () {
+        let checkboxes = document.querySelectorAll("input[type='checkbox']");
+
+        for(var i = 0; i < checkboxes.length; i++) {
+          checkboxes[i].checked = true;
+        }
+      })
+
+      unselect.addEventListener('click', function () {
+        let checkboxes = document.querySelectorAll("input[type='checkbox']");
+
+        for(var i = 0; i < checkboxes.length; i++) {
+          checkboxes[i].checked = false;
+        }
+      })
+
+    }
+  });
+})(window);