Add passive event listener and refine demo site styles

NigelOToole · Feb 21, 2018 · 102ce68 · 102ce68
1 parent 5d98d6c
commit 102ce68
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -484,7 +484,7 @@ <h3>Touch support</h3>
 
       <h3>Browser support</h3>
 
-      <p>Supports all modern browsers(Firefox, Chrome and Edge) released as of January 2018. For older browsers you may need to include polyfills for <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach" target="_blank" rel="noopener">Nodelist.forEach</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" target="_blank" rel="noopener">Element.classList</a>.</p>
+      <p>Supports all modern browsers(Firefox, Chrome and Edge) released as of January 2018. For older browsers you may need to include polyfills for <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach" target="_blank" rel="noopener">Nodelist.forEach</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" target="_blank" rel="noopener">Element.classList</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" target="_blank" rel="noopener">Passive Event Listeners</a>.</p>
 
     </div>
 

diff --git a/index.js b/index.js
@@ -117,7 +117,7 @@
 
           item.addEventListener('touchstart', function (e) {
             touchStart = +new Date();
-          });
+          }, { passive: true });
 
           item.addEventListener('touchend', function (e) {
             var touchTime = +new Date() - touchStart;

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "direction-reveal",
   "description": "Direction aware content reveals.",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "index.js",
   "module": "scripts/direction-reveal.js",
   "jsnext:main": "scripts/direction-reveal.js",

diff --git a/scripts/bundle.js b/scripts/bundle.js
diff --git a/scripts/bundle.js.map b/scripts/bundle.js.map
diff --git a/scripts/direction-reveal.js b/scripts/direction-reveal.js
@@ -11,7 +11,7 @@
 */
 
 
-const DirectionReveal = function({
+const DirectionReveal = function ({
   selector: selector = '.direction-reveal',
   itemSelector: itemSelector = '.direction-reveal__card',
   animationName: animationName = 'swing',
@@ -86,22 +86,22 @@ const DirectionReveal = function({
 
     items.forEach((item) => {
 
-      addEventListenerMulti(item, ['mouseenter', 'focus'], function(e) {
+      addEventListenerMulti(item, ['mouseenter', 'focus'], (e) => {
         addClass(e, 'in');
       });
 
-      addEventListenerMulti(item, ['mouseleave', 'blur'], function(e) {
+      addEventListenerMulti(item, ['mouseleave', 'blur'], (e) => {
         addClass(e, 'out');
       });
 
 
       if (enableTouch) {
 
-        item.addEventListener('touchstart', function(e) {
+        item.addEventListener('touchstart', (e) => {
           touchStart = +new Date;
-        });
+        }, { passive: true });
 
-        item.addEventListener('touchend', function(e) {
+        item.addEventListener('touchend', (e) => {
           let touchTime = +new Date - touchStart;
 
           if (touchTime < touchThreshold && !item.className.includes(`${animationName}--in`)) {

diff --git a/styles/direction-reveal.css b/styles/direction-reveal.css
diff --git a/styles/direction-reveal.scss b/styles/direction-reveal.scss
@@ -55,19 +55,25 @@
   margin-left: -$grid-spacing;
 
   .direction-reveal__card {
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
     border: $grid-spacing solid transparent; // Transparent border used for spacing as this make direction detection more accurate as there is more area to detect.
+    @media (min-width: 576px) {
+      flex: 0 0 33.333333%;
+      max-width: 33.333333%;
+    }
   }
+
 }
 
 // 3x3 grid layout - CSS grid
 .direction-reveal--3-grid-cssgrid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
   margin-right: -$grid-spacing;
   margin-left: -$grid-spacing;
 
+  @media (min-width: 576px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   .direction-reveal__card {
     border: $grid-spacing solid transparent;
   }

diff --git a/styles/site.css b/styles/site.css
diff --git a/styles/site/_site.scss b/styles/site/_site.scss
@@ -24,13 +24,18 @@ html {
 }
 
 body {
-  padding-top: 90px;
+  padding-top: 110px;
   font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.4;
   color: #333;
   background-color: #fff;
+
+  @media (min-width: 768px) {
+    padding-top: 90px;
+  }
+
 }
 
 a {
@@ -83,15 +88,15 @@ strong {
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px;
-  @include clearfix();  
+  @include clearfix();
 }
 
 // Bootstrap grid example
   .row {
     display: flex;
     flex-wrap: wrap;
     margin-right: -15px;
-    margin-left: -15px;  
+    margin-left: -15px;
   }
 
     .col-sm-4 {
@@ -151,7 +156,7 @@ strong {
         margin-left: 7px;
       }
     }
-    
+
     @media (min-width: 768px) {
       float: right;
     }
@@ -167,12 +172,17 @@ strong {
 
 // ----- Demo -----
 .demo {
-  margin-top: 20px;
+  margin-top: 40px;
   margin-bottom: 40px;
 }
 
 .demo--intro {
+  margin-top: 20px;
   border-bottom: 1px solid #ddd;
+
+  p:last-child {
+    padding-bottom: 20px;
+  }
 }
 
 .btn {