fix(carousel): Correct dragging on ios

leifoolsen · May 28, 2016 · 4f900c3 · 4f900c3
1 parent 02eee86
commit 4f900c3
Show file tree

Hide file tree

Showing 23 changed files with 59 additions and 55 deletions.
diff --git a/demo/accordion.html b/demo/accordion.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Accordion</title>
@@ -811,7 +811,7 @@ <h5>Fifth</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 
 <script>

diff --git a/demo/bordered-fields.html b/demo/bordered-fields.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Bordered Fields</title>
@@ -484,7 +484,7 @@ <h5>Credits</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/carousel.html b/demo/carousel.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Carousel</title>
@@ -638,7 +638,7 @@ <h5>Carousel</h5>
 
 
 <div style="margin-top: 8px">
-  <button id="btn-add-image" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+  <button id="btn-add-image" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
     Add image to carousel
   </button>
   <p class="mdl-typography--caption" style="margin-top: 8px">
@@ -744,7 +744,7 @@ <h5>Carousel</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/color-themes.html b/demo/color-themes.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Color Themes</title>
@@ -2702,7 +2702,7 @@ <h6>h6 (16px) <small>Subtitle</small></h6>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/grid.html b/demo/grid.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Grid</title>
@@ -262,7 +262,7 @@ <h5>mdl-grid, using media queries</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/index.html b/demo/index.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions</title>
@@ -186,7 +186,7 @@ <h4>Sticky Header</h4>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/lightboard.html b/demo/lightboard.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Lightboard</title>
@@ -314,7 +314,7 @@ <h5 class="mdlext-demo-header">Lightboard Component</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/lightbox.html b/demo/lightbox.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Lightbox</title>
@@ -693,7 +693,7 @@ <h5 class="mdlext-demo-header">Lightbox Component</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/selectfield.html b/demo/selectfield.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Selectfield</title>
@@ -253,7 +253,7 @@ <h5 class="mdlext-demo-header">Selectfield Component</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/sticky-header-ii.html b/demo/sticky-header-ii.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Sticky Header</title>
@@ -152,7 +152,7 @@ <h5>Sticky Header, Drawer (not fixed)</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/sticky-header-iii.html b/demo/sticky-header-iii.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Sticky Header</title>
@@ -66,7 +66,7 @@ <h5>Sticky Header, No Drawer</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/sticky-header-iv.html b/demo/sticky-header-iv.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Sticky Header</title>
@@ -162,7 +162,7 @@ <h5>Sticky Header, Waterfall, Fixed Drawer</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/sticky-header-v.html b/demo/sticky-header-v.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Sticky Header</title>
@@ -162,7 +162,7 @@ <h5>Sticky Header, Waterfall, Drawer (not fixed)</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/sticky-header-vi.html b/demo/sticky-header-vi.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Sticky Header</title>
@@ -75,7 +75,7 @@ <h5>Sticky Header, Waterfall, No Drawer</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/demo/sticky-header.html b/demo/sticky-header.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
 
   <title>Material Design Lite Extensions - Sticky Header</title>
@@ -150,7 +150,7 @@ <h5>Sticky Header, Fixed Drawer Example</h5>
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
   (function() {

diff --git a/lib/mdl-ext.js b/lib/mdl-ext.js
diff --git a/lib/mdl-ext.js.map b/lib/mdl-ext.js.map
diff --git a/lib/mdl-ext.min.js b/lib/mdl-ext.min.js
diff --git a/lib/mdl-ext.min.js.map b/lib/mdl-ext.min.js.map
diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js
@@ -341,8 +341,9 @@ import { inOutQuintic } from '../utils/easing';
     // Cancel slideshow if running
     this.cancelSlideShow_();
 
-    let updating = false;
-    let rAFDragId = 0;
+    //let updating = false;
+    //let rAFDragId = 0;
+
     const startX = event.clientX || (event.touches !== undefined ? event.touches[0].clientX : 0);
     let prevX = startX;
     const targetElement = event.target;
@@ -359,16 +360,18 @@ import { inOutQuintic } from '../utils/easing';
       }
 
       prevX = currentX;
-      updating = false;
+      //updating = false;
     };
 
     // drag handler
     const drag = e => {
       e.preventDefault();
-      if(!updating) {
-        rAFDragId = window.requestAnimationFrame( () => update(e));
-        updating = true;
-      }
+      update(e);
+
+      //if(!updating) {
+      //  rAFDragId = window.requestAnimationFrame( () => update(e));
+      //  updating = true;
+      //}
     };
 
     // end drag handler
@@ -382,7 +385,7 @@ import { inOutQuintic } from '../utils/easing';
       window.removeEventListener('touchend', endDrag);
 
       // cancel any existing drag rAF, see: http://www.html5rocks.com/en/tutorials/speed/animations/
-      window.cancelAnimationFrame(rAFDragId);
+      //window.cancelAnimationFrame(rAFDragId);
 
       // If mouse did not move, trigger custom select event
       if(Math.abs(startX-x) < 2) {

diff --git a/src/carousel/snippets/carousel.html b/src/carousel/snippets/carousel.html
@@ -504,7 +504,7 @@ <h5>Carousel</h5>
 
 
 <div style="margin-top: 8px">
-  <button id="btn-add-image" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+  <button id="btn-add-image" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
     Add image to carousel
   </button>
   <p class="mdl-typography--caption" style="margin-top: 8px">

diff --git a/src/demo/include/_head.html b/src/demo/include/_head.html
@@ -8,5 +8,5 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
-<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.css">
 <link rel="stylesheet" href="./styles/demo.css">
diff --git a/src/demo/include/_scripts.html b/src/demo/include/_scripts.html
@@ -1,4 +1,4 @@
 <script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
 <script src="scripts/eq-customevent-patch.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://code.getmdl.io/1.1.3/material.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.js" type="text/javascript" charset="utf-8"></script>