Merge pull request #2 from axentix/develop

1.0.1
axentix · Apr 23, 2020 · 4ac9a03 · 4ac9a03
2 parents 53f9282 + 20f44ca
commit 4ac9a03
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 28 deletions.
diff --git a/.drone.yml b/.drone.yml
@@ -54,16 +54,16 @@ steps:
     event:
       - tag
 
-- name: send
-  image: plugins/webhook
-  settings:
-    urls: https://neu.useaxentix.com/api/hook
-    headers:
-      from_secret: hook_headers
-    template: |
-      {
-        "version": "{{ build.tag }}"
-      }
-  when:
-    event:
-      - tag
+# - name: send
+#   image: plugins/webhook
+#   settings:
+#     urls: https://neu.useaxentix.com/api/hook
+#     headers:
+#       from_secret: hook_headers
+#     template: |
+#       {
+#         "version": "{{ build.tag }}"
+#       }
+#   when:
+#     event:
+#       - tag
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 1.0.1 - 2020-04-23
+
+- ADDED
+  - `reset()` method
+- REMOVED
+- IMPROVED
+- BUGFIXES
+  - Init of js features
+  - Pagination disabled state
+
 # 1.0.0 - 2020-04-16
 
 - ADDED

diff --git a/examples/layouts.html b/examples/layouts.html
@@ -142,14 +142,14 @@
         </div>
       </div>
       <ul class="pagination small">
-        <li class="disabled">
+        <li class="disabled neu-flat">
           <a href=""><i class="fas fa-step-backward"></i></a>
         </li>
         <li>
           <a href=""><i class="fas fa-angle-left"></i></a>
         </li>
         <li><a href="">1</a></li>
-        <li class="active"><a href="">2</a></li>
+        <li class="neu-pressed"><a href="">2</a></li>
         <li><a href="">3</a></li>
         <li>
           <a href=""><i class="fas fa-angle-right"></i></a>
@@ -159,14 +159,14 @@
         </li>
       </ul>
       <ul class="pagination">
-        <li class="disabled">
+        <li class="disabled neu-flat">
           <a href=""><i class="fas fa-step-backward"></i></a>
         </li>
         <li>
           <a href=""><i class="fas fa-angle-left"></i></a>
         </li>
         <li><a href="">1</a></li>
-        <li class="active"><a href="">2</a></li>
+        <li class="neu-pressed"><a href="">2</a></li>
         <li><a href="">3</a></li>
         <li>
           <a href=""><i class="fas fa-angle-right"></i></a>
@@ -176,14 +176,14 @@
         </li>
       </ul>
       <ul class="pagination large">
-        <li class="disabled">
+        <li class="disabled neu-flat">
           <a href=""><i class="fas fa-step-backward"></i></a>
         </li>
         <li>
           <a href=""><i class="fas fa-angle-left"></i></a>
         </li>
         <li><a href="">1</a></li>
-        <li class="active"><a href="">2</a></li>
+        <li class="neu-pressed"><a href="">2</a></li>
         <li><a href="">3</a></li>
         <li>
           <a href=""><i class="fas fa-angle-right"></i></a>
@@ -242,7 +242,7 @@
         // }
       });
       var modal = new Modal('#example-modal', {
-        bodyScrolling: true
+        bodyScrolling: true,
       });
 
       const sidenav = axentix.getInstance('#example-sidenav');

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neu-axentix",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Neu-Axentix is the first front end framework based on neumorphism using CSS and JS. Start creating your website using neumorphic design.",
   "homepage": "https://neu.useaxentix.com",
   "author": "Axel SIMONET, Vincent LEVEQUE",

diff --git a/src/js/core.js b/src/js/core.js
@@ -1,8 +1,5 @@
 const NeuAxentix = (() => {
-  const neuClickElements = document.querySelectorAll('[data-neu-click]');
-  const neuFocusElements = document.querySelectorAll('[data-neu-focus]');
-  const neuClickedElements = document.querySelectorAll('[data-neu-clicked]');
-  const neuHoverElements = document.querySelectorAll('[data-neu-hover]');
+  let neuClickElements, neuFocusElements, neuClickedElements, neuHoverElements;
   const stateList = ['neu-bordered', 'neu-flat', 'neu-pressed', 'neu-concave', 'neu-convex'];
 
   /**
@@ -69,6 +66,11 @@ const NeuAxentix = (() => {
    * Setup neu-click elements
    */
   function setup() {
+    neuClickElements = document.querySelectorAll('[data-neu-click]');
+    neuFocusElements = document.querySelectorAll('[data-neu-focus]');
+    neuClickedElements = document.querySelectorAll('[data-neu-clicked]');
+    neuHoverElements = document.querySelectorAll('[data-neu-hover]');
+
     neuClickedElements.forEach((el) => {
       _setupClasses(el);
       el.toggleRef = _toggle.bind(el, 'neuClicked');
@@ -107,9 +109,54 @@ const NeuAxentix = (() => {
     });
   }
 
+  /**
+   * Reset all listeners & setup
+   */
+  function reset() {
+    if (neuClickedElements) {
+      neuClickedElements.forEach((el) => {
+        el.removeEventListener('click', el.toggleRef);
+        el.toggleRef = undefined;
+      });
+    }
+
+    if (neuClickElements) {
+      neuClickElements.forEach((el) => {
+        el.removeEventListener('mousedown', el.toggleRef);
+        el.removeEventListener('mouseleave', el.toggleRef);
+        el.removeEventListener('mouseup', el.toggleRef);
+
+        if ('ontouchstart' in document.documentElement) {
+          el.removeEventListener('touchstart', el.toggleRef);
+          el.removeEventListener('touchend', el.toggleRef);
+        }
+        el.toggleRef = undefined;
+      });
+    }
+
+    if (neuFocusElements) {
+      neuFocusElements.forEach((el) => {
+        el.removeEventListener('focus', el.toggleRef);
+        el.removeEventListener('blur', el.toggleRef);
+        el.toggleRef = undefined;
+      });
+    }
+
+    if (neuHoverElements) {
+      neuHoverElements.forEach((el) => {
+        el.removeEventListener('mouseenter', el.toggleRef);
+        el.removeEventListener('mouseleave', el.toggleRef);
+        el.toggleRef = undefined;
+      });
+    }
+
+    setup();
+  }
+
   return {
     setup,
+    reset,
   };
 })();
 
-NeuAxentix.setup();
+document.addEventListener('DOMContentLoaded', NeuAxentix.setup);
diff --git a/src/scss/components/_pagination.scss b/src/scss/components/_pagination.scss
@@ -2,8 +2,12 @@
   li[class*='neu-'] {
     transition-property: background-color, color, filter;
 
-    &:hover {
+    &:hover:not(.disabled) {
       background-color: inherit;
     }
+
+    &.disabled {
+      box-shadow: none;
+    }
   }
 }
diff --git a/src/scss/utilities/_mixins.scss b/src/scss/utilities/_mixins.scss
@@ -24,6 +24,14 @@
             filter: brightness($brightness-neg);
           }
         }
+
+        &.disabled {
+          @if txtColor($value) == #fff {
+            filter: brightness(120%);
+          } @else if txtColor($value) == #000 {
+            filter: brightness(80%);
+          }
+        }
       } @else if ($i >= 2) {
         &.neu-#{$variant} {
           &:hover {
@@ -33,6 +41,14 @@
               filter: brightness($brightness-neg);
             }
           }
+
+          &.disabled {
+            @if txtColor($value) == #fff {
+              filter: brightness(120%);
+            } @else if txtColor($value) == #000 {
+              filter: brightness(80%);
+            }
+          }
         }
       }
     }