Merge branch 'patch-3' of https://github.com/kriadmin/30-seconds-of-css

src/js/components/Snippet.js

@@ -4,9 +4,9 @@ const snippets = selectAll('.snippet')
 EventHub.on('Tag.click', data => {
   snippets.forEach(snippet => {
     snippet.style.display = 'block'
-    if (data.type === 'all') return
+    if (data.type.includes('all')) return
     const tags = selectAll('.tags__tag', snippet)
-    if (!tags.some(el => el.dataset.type === data.type)) {
+    if (!tags.some(el => data.type.includes(el.dataset.type))) {
       snippet.style.display = 'none'
     }
   })

src/js/components/Tag.js

@@ -1,14 +1,31 @@
 import { select, selectAll, on } from '../deps/utils'
 
 const tagButtons = selectAll('button.tags__tag')
-
+let 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) {
+    this.classList.add('is-active');
+    select('button[data-type=all]').classList.reomove('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.shiftKey){
+    isShiftSelected = false;
+}};
 tagButtons.forEach(button => on(button, 'click', onClick))