From 6f933d21ea96044a490add968018c3fe397f50b0 Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Thu, 23 Feb 2017 15:26:53 +0100
Subject: [PATCH] Added swipeable functionality.

---
 docs/src/pages/components/Onboarding.vue | 22 ++++++--
 src/components/mdOnboarding/mdBoards.vue | 69 +++++++++++++++++++++---
 2 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/components/Onboarding.vue b/docs/src/pages/components/Onboarding.vue
index 7fb5875..2bb5fc0 100644
--- a/docs/src/pages/components/Onboarding.vue
+++ b/docs/src/pages/components/Onboarding.vue
@@ -38,9 +38,9 @@
               </md-table-row>
 
               <md-table-row>
-                <md-table-cell>md-timeout</md-table-cell>
+                <md-table-cell>md-duration</md-table-cell>
                 <md-table-cell><code>Number</code></md-table-cell>
-                <md-table-cell>Set timeout for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
+                <md-table-cell>Set duration for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
               </md-table-row>
 
               <md-table-row>
@@ -48,6 +48,18 @@
                 <md-table-cell><code>Boolean</code></md-table-cell>
                 <md-table-cell>Enable prev/next controls. Default <code>false</code>.</md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-swipeable</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable the swipe functionality. Default <code>false</code>.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-swipe-distance</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Set the swipe distance needed to open/close the sidenav. Default <code>100</code>.</md-table-cell>
+              </md-table-row>
             </md-table-body>
 
           </md-table>
@@ -55,9 +67,9 @@
       </div>
 
       <div slot="example">
-        <example-box card-title="Basic, automatic, infinite, uncontrolled">
+        <example-box card-title="Basic, automatic, infinite, uncontrolled, swipeable">
           <div slot="demo">
-            <md-boards :md-auto="true" :md-infinite="true" :md-duration="8000">
+            <md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true">
               <md-board id="slide1">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-board>
@@ -74,7 +86,7 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;3000&quot;&gt;
+              &lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;5000&quot; :md-swipeable=&quot;true&quot;&gt;
                 &lt;md-board id=&quot;slide1&quot;&gt;
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
                 &lt;/md-board&gt;
diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
index a3ab626..ff3483d 100644
--- a/src/components/mdOnboarding/mdBoards.vue
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md-boards" :class="[themeClass, boardClasses]">
 
-    <div class="md-boards-content" ref="boardContent" :style="{ height: contentHeight }">
+    <div class="md-boards-content" ref="boardsContent" :style="{ height: contentHeight }">
       <div class="md-boards-wrapper" :style="{ transform: `translate3D(-${contentWidth}, 0, 0)` }">
         <slot></slot>
       </div>
@@ -87,6 +87,11 @@
       mdInfinite: {
         type: Boolean,
         default: false
+      },
+      mdSwipeable: Boolean,
+      mdSwipeDistance: {
+        type: Number,
+        default: 100
       }
     },
     mixins: [theme],
@@ -164,7 +169,7 @@
       },
       observeElementChanges() {
         this.parentObserver = new MutationObserver(throttle(this.calculateOnWatch, 50));
-        this.parentObserver.observe(this.$refs.boardContent, {
+        this.parentObserver.observe(this.$refs.boardsContent, {
           childList: true,
           attributes: true,
           subtree: true
@@ -240,7 +245,7 @@
         }, this.mdDuration);
       },
       setActiveBoard(boardData, reset) {
-        if (reset) {
+        if (this.mdAuto && reset) {
           this.start();
         }
         this.hasIcons = !!boardData.icon;
@@ -275,6 +280,40 @@
   
           this.setActiveBoard(this.boardList[firstBoard], true);
         }
+      },
+      isHorizontallyInside(positionX) {
+        return positionX > this.mountedRect.left && positionX < this.mountedRect.left + this.mountedRect.width;
+      },
+      isVerticallyInside(positionY) {
+        return positionY > this.mountedRect.top && positionY < this.mountedRect.top + this.mountedRect.height;
+      },
+      handleTouchStart(event) {
+        this.mountedRect = this.$refs.boardsContent.getBoundingClientRect();
+        const positionX = event.changedTouches[0].clientX;
+        const positionY = event.changedTouches[0].clientY;
+
+        if (this.isHorizontallyInside(positionX) && this.isVerticallyInside(positionY)) {
+          this.initialTouchPosition = positionX;
+          this.canMove = true;
+        }
+      },
+      handleTouchEnd(event) {
+        if (this.canMove) {
+          const positionX = event.changedTouches[0].clientX;
+
+          const difference = this.initialTouchPosition - positionX;
+
+          const action = difference > 0
+            ? 'moveNextBoard'
+            : 'movePrevBoard';
+  
+          if (Math.abs(difference) > this.mdSwipeDistance) {
+            this[action]();
+          }
+
+          this.canMove = false;
+          this.initialTouchPosition = null;
+        }
       }
     },
     mounted() {
@@ -287,12 +326,20 @@
 
           this.setActiveBoard(this.boardList[firstBoard]);
         }
-      });
 
-      /* automatic behaviour */
-      if (this.mdAuto) {
-        this.start();
-      }
+        if (this.mdSwipeable) {
+          this.mountedRect = this.$refs.boardsContent.getBoundingClientRect();
+          this.initialTouchPosition = null;
+          this.canMove = false;
+
+          document.addEventListener('touchstart', this.handleTouchStart);
+          document.addEventListener('touchend', this.handleTouchEnd);
+        }
+
+        if (this.mdAuto) {
+          this.start();
+        }
+      });
     },
     beforeDestroy() {
       if (this.parentObserver) {
@@ -304,6 +351,12 @@
       }
 
       window.removeEventListener('resize', this.calculateOnResize);
+
+      if (this.mdSwipeable) {
+        document.removeEventListener('touchstart', this.handleTouchStart);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+      }
+
     }
   };
 </script>