Fix broken factory function

Tweak perspective view demo CSS Add basic click effect to demo to ensure event works with drag
NickPiscitelli · Nov 14, 2018 · bdaadbd · bdaadbd
1 parent 5789693
commit bdaadbd
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 40 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -4340,38 +4340,84 @@ user-select: none; /* Standard */
   }
   .glider-persp .glider-slide {
     margin: 7px 0;
-    transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
+
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform-style: preserve-3d;
     will-change: transform;
-    transform:  perspective(0) rotateY(0) scale(1) translateZ(0);
+    transform:  perspective(1500px) rotateY(0deg) scale(1) translateZ(0);
     transform-origin: 0 0;
+    transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  .glider-persp .glider-slide.right-3 {
+    -webkit-transform:  perspective(1500px) rotateY(-50deg) scale(1.35) translateZ(0);
+    -webkit-transform-origin: 100% 50% 0;
+    transform:  perspective(1500px) rotateY(-50deg) scale(1.35) translateZ(0);
+    transform-origin: 0% 50% 0;
+    margin: 10px -8px;
+  }
+  .glider-persp .glider-slide.left-3 {
+    -webkit-transform:  perspective(1500px) rotateY(50deg) scale(1.35) translateZ(0);
+    -webkit-transform-origin: 100% 50% 0;
+    transform:  perspective(1500px) rotateY(50deg) scale(1.35) translateZ(0);
+    transform-origin: 0% 50% 0;
+    margin: 10px 0;
   }
   .glider-persp .glider-slide.left-2 {
-    -webkit-transform:  perspective(1500px) rotateY(50deg) scale(1.2) translateZ(0);;
+    -webkit-transform:  perspective(1500px) rotateY(50deg) scale(1.2) translateZ(0);
     -webkit-transform-origin: 100% 50% 0;
-    transform:  perspective(1500px) rotateY(50deg) scale(1.2) translateZ(0);;
+    transform:  perspective(1500px) rotateY(50deg) scale(1.2) translateZ(0);
     transform-origin: 100% 50% 0;
   }
   .glider-persp .glider-slide.right-2 {
-    -webkit-transform:  perspective(1500px) rotateY(-50deg) scale(1.2) translateZ(0);;
+    -webkit-transform:  perspective(1500px) rotateY(-50deg) scale(1.2) translateZ(0);
     -webkit-transform-origin: 0 50% 0;
-    transform:  perspective(1500px) rotateY(-50deg) scale(1.2) translateZ(0);;
+    transform:  perspective(1500px) rotateY(-50deg) scale(1.2) translateZ(0);
     transform-origin: 0 50% 0;
   }
   .glider-persp .glider-slide.left-1 {
-    -webkit-transform:  perspective(750px) rotateY(30deg) scale(1.1) translateZ(0);;
+    -webkit-transform:  perspective(1200px) rotateY(34deg) scale(1.1) translateZ(0);
     -webkit-transform-origin: 100% 50% 0;
-    transform:  perspective(750px) rotateY(30deg) scale(1.1) translateZ(0);;
+    transform:  perspective(1200px) rotateY(34deg) scale(1.1) translateZ(0);
     transform-origin: 100% 50% 0;
   }
   .glider-persp .glider-slide.right-1 {
-    -webkit-transform:  perspective(750px) rotateY(-30deg) scale(1.1) translateZ(0);;
+    -webkit-transform:  perspective(1200px) rotateY(-34deg) scale(1.1) translateZ(0);
     -webkit-transform-origin: 0 50% 0;
-    transform:  perspective(750px) rotateY(-30deg) scale(1.1) translateZ(0);;
+    transform:  perspective(1200px) rotateY(-34deg) scale(1.1) translateZ(0);
     transform-origin: 0 50% 0;
   }
+  .glider-slide h1 {
+    cursor: pointer;
+  }
+
+  .clickEffect {
+    position:fixed;
+    box-sizing:border-box;
+    border-style:solid;
+    border-color:red;
+    border-radius:50%;
+    animation: clickEffect 0.4s ease-out;
+    z-index:99999;
+    border-image:   linear-gradient(to right,
+  #8cc9f0,
+  #efa8b0,
+  #a89cc8) 5;
+  }
+  @keyframes clickEffect {
+  0%{
+  opacity:1;
+  width:0.5em; height:0.5em;
+  margin:-0.25em;
+  border-width:0.5em;
+  }
+  100%{
+  opacity:0.2;
+  width:15em; height:15em;
+  margin:-7.5em;
+  border-width:0.03em;
+  }
+  }
   .glider-persp .glider-slide {
     margin: 10px;
   }

diff --git a/docs/assets/js/glider.js b/docs/assets/js/glider.js
@@ -13,9 +13,9 @@
   Release Date: October 25th, 2018
   Last Update: November 10th, 2018
 */
-(function (factory){
+;(function (factory) {
   typeof define === 'function' && define.amd ? define(factory) :
-  typeof exports !== 'undefined' ? module.exports = factory() :
+  typeof exports === 'object' ? module.exports = factory() :
   factory();
 }(function() {
   'use strict';
@@ -386,4 +386,4 @@
     });
     _.ele.dispatchEvent(e);
   }
-}()));
+}));
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -19,6 +19,11 @@ var isAndroid = !!navigator.platform && /android/i.test(navigator.platform);
 if(isAndroid) {
   document.body.classList.add('android')
 }
+
+// center arrows on load
+document.addEventListener('glider-loaded',centerArrows);
+document.addEventListener('glider-refresh',centerArrows);
+
 (function ($) {
 
   var $window = $(window),
@@ -150,7 +155,7 @@ if(isAndroid) {
     typeof ga !== 'undefined' && ga('send', 'event', 'Dot Click', $(this).parents('.glider-contain').data('name'), $(this).data('index'))
   });
 
-
+  $(document).on('click','.glider-slide h1', clickEffect);
 })($);
 
 function scrollIt(destination, duration = 350, easing = 'linear', callback) {
@@ -181,3 +186,28 @@ function scrollIt(destination, duration = 350, easing = 'linear', callback) {
 
   scroller();
 }
+
+// make sure click still works
+function clickEffect(e){
+  var d=document.createElement("div");
+  d.className="clickEffect";
+  d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
+  document.body.appendChild(d);
+  d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
+}
+
+function centerArrows(e){
+  var
+    glider = e.target._glider,
+    arrows = glider.arrows,
+    height = glider.ele.clientHeight;
+
+  if (arrows){
+    ['prev','next'].forEach(function(v){
+      if (arrows[v]){
+        var top = (height - arrows[v].clientHeight) / 2;
+        arrows[v].style.top = top + 'px';
+      }
+    });
+  }
+}
diff --git a/docs/index.html b/docs/index.html
@@ -30,26 +30,6 @@
   </noscript>
   <script src="assets/js/glider-compat.min.js"></script>
   <script src="assets/js/glider.js"></script>
-  <script>
-  // center arrows on load
-  document.addEventListener('glider-loaded',centerArrows);
-  document.addEventListener('glider-refresh',centerArrows);
-  function centerArrows(e){
-    var
-      glider = e.target._glider,
-      arrows = glider.arrows,
-      height = glider.ele.clientHeight;
-
-    if (arrows){
-      ['prev','next'].forEach(function(v){
-        if (arrows[v]){
-          var top = (height - arrows[v].clientHeight) / 2;
-          arrows[v].style.top = top + 'px';
-        }
-      });
-    }
-  }
-  </script>
 </head>
 
 <body class="is-preload">
@@ -163,6 +143,7 @@ <h2>Single Item</h2>
             new Glider(document.getElementById('glider-single'), {
               slidesToShow: 1,
               dots: '#dots',
+              draggable: true,
               arrows: {
                 prev: '#glider-prev',
                 next: '#glider-next'
@@ -178,6 +159,7 @@ <h2>Single Item</h2>
               new Glider(document.querySelector('.glider'), {
                 slidesToShow: 1,
                 dots: '#dots',
+                draggable: true,
                 arrows: {
                   prev: '.glider-prev',
                   next: '.glider-next'

diff --git a/glider.js b/glider.js
@@ -13,9 +13,9 @@
   Release Date: October 25th, 2018
   Last Update: November 10th, 2018
 */
-(function (factory){
+;(function (factory) {
   typeof define === 'function' && define.amd ? define(factory) :
-  typeof exports !== 'undefined' ? module.exports = factory() :
+  typeof exports === 'object' ? module.exports = factory() :
   factory();
 }(function() {
   'use strict';
@@ -386,4 +386,4 @@
     });
     _.ele.dispatchEvent(e);
   }
-}()));
+}));
diff --git a/glider.min.js b/glider.min.js