Merge pull request #72 from kriadmin/patch-3 --force-build

[FEATURE] Add multiple tag-selection

src/js/components/Sidebar.js

@@ -39,11 +39,16 @@ document.addEventListener('click', e => {
 })
 
 EventHub.on('Tag.click', data => {
+  data.type_new = data.type.map(el => el.dataset.type)
   sections.forEach(section => {
     section.style.display = 'block'
-    if (section.dataset.type !== data.type && data.type !== 'all') {
+    //console.log(data.type_new.includes('all'))
+    if(!data.type_new.includes(section.dataset.type) && !data.type_new.includes('all')) {
       section.style.display = 'none'
     }
+    else{
+      section.style.display = ''
+    }
   })
 })
 

src/js/components/Snippet.js

@@ -2,12 +2,16 @@ import { selectAll } from '../deps/utils'
 
 const snippets = selectAll('.snippet')
 EventHub.on('Tag.click', data => {
+  data.type_new = data.type.map(el => el.dataset.type)
   snippets.forEach(snippet => {
     snippet.style.display = 'block'
-    if (data.type === 'all') return
+    if (data.type_new.includes('all')) return
     const tags = selectAll('.tags__tag', snippet)
-    if (!tags.some(el => el.dataset.type === data.type)) {
+    if (!tags.some(el => data.type_new.includes(el.dataset.type))) {
       snippet.style.display = 'none'
     }
+    else {
+      snippet.style.display = ''
+    }
   })
 })

src/js/components/Tag.js

@@ -1,14 +1,42 @@
 import { select, selectAll, on } from '../deps/utils'
 
 const tagButtons = selectAll('button.tags__tag')
-
+var isShiftSelected = false;
 const onClick = function() {
-  tagButtons.forEach(button => button.classList.remove('is-active'))
-  this.classList.add('is-active')
-
+  if(isShiftSelected && this.dataset.type === 'all'){
+    tagButtons.forEach(button => button.classList.remove('is-active'));
+    this.classList.add('is-active');
+  }
+  else if(isShiftSelected) {
+    select('button[data-type=all]').classList.remove('is-active');
+    if(this.classList.contains('is-active') && (selectAll('button.tags__tag.is-active').length > 1)){
+      this.classList.remove('is-active')
+    }
+    else if(this.classList.contains('is-active')){
+      this.classList.remove('is-active')
+      select('button[data-type=all]').classList.add('is-active')
+    }
+    else{
+    this.classList.add('is-active');
+    }
+  }
+  else {
+    tagButtons.forEach(button => button.classList.remove('is-active'));
+    this.classList.add('is-active');
+  }
   EventHub.emit('Tag.click', {
-    type: this.dataset.type
+    type: [...selectAll('button.tags__tag.is-active')]
   })
 }
+onkeydown = e => {
+  if(e.shiftKey){
+    isShiftSelected = true;
+}
+};
 
+onkeyup = e => {
+  if(e.key == 'Shift'){
+    isShiftSelected = false;
+}
+};
 tagButtons.forEach(button => on(button, 'click', onClick))