Improve example.

vuejs · Jan 6, 2017 · b900db0 · b900db0
1 parent 4004205
commit b900db0
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 31 deletions.
diff --git a/example/components.js b/example/components.js
@@ -11,36 +11,54 @@ Vue.component('container', {
 Vue.component('rotator', {
   template: `
     <container>
-      <v-touch @rotate="cb" :rotate-options="{threshold: 15}" :style="rotated" class="rotator">
-        <slot></slot>
-        {{name || 'NoEvent'}} - {{angle}}deg, {{rotation}}
+      <v-touch
+        @rotatestart="start"
+        @rotate="rotate"
+        @doubletap="reset"
+        :rotate-options="{threshold: 15}"
+        style="text-align: center; padding-top: 30px;" :style="rotated" class="rotator"
+      >
+        <slot></slot><br>
+        This element is rotated {{rotation | round(2) }} deg<br>
+        Double-tap to reset.
       </v-touch>
+      {{$data}}
     </container>
   `,
   data() {
     return  {
-      angle: 0,
+      startRotation: 0,
+      currentRotation: 0,
       rotation: 0,
-      initialRotation: 0,
       name: ''
     }
   },
   methods: {
-    cb(event) {
-      console.log('rotate', event)
-      if (event.isFirst) { this.initialRotation = event.rotation }
-      else {
-        const newRotation = Math.round(event.rotation - this.initialRotation)
+    start(e) {
+      this.startRotation = e.rotation < 0 ? 360 + e.rotaton : e.rotation
+      this.name = e.type
+    },
+    rotate(e) {
+      this.currentRotation = e.rotation < 0 ? 360 + e.rotation : e.rotation
 
-        this.rotation = this.rotation = newRotation
-      }
-      this.angle = Math.round(event.angle)
-      this.name = event.type
+    },
+    reset() {
+      this.currentRotation = 0
+      this.startRotation = 0
     }
   },
   computed: {
     rotated() {
-      return { transform: `rotate(${this.rotation}deg)` }
+      const  { currentRotation: current, startRotation: start } = this.$data
+      const real = current - start
+      this.rotation = real
+      return { transform: `rotate(${real}deg)` }
+    }
+  },
+  filters: {
+    round(n, dec = 0) {
+      const f = Math.pow(10, dec)
+      return Math.round(n * f) / f
     }
   }
 })
diff --git a/example/example.js b/example/example.js
@@ -8,9 +8,9 @@ if (process.env.NODE_ENV === 'development') {
 else {
   VueTouch = require('../dist/vue-touch.js')
 }
-// import './styling.css'
-// import './components'
-// use the plugin
+
+import './styling.css'
+import './components'
 
 // example registering a custom doubletap event.
 // the `type` indicates the base recognizer to use from Hammer
@@ -34,11 +34,4 @@ new Vue({
       console.log(e)
     }
   }
-}
-
-new Vue({
-  components: { app: App },
-  render(h) {
-    return h(App)
-  }
-}).$mount('#app')
+})
diff --git a/example/index.html b/example/index.html
@@ -8,24 +8,24 @@
     #test-div {
       width: 300px;
       height: 300px;
-      background-color: #f00;
+      background-color: orange;
     }
     </style>
   </head>
   <body>
     <div id="app">
-      <v-touch tag="div"
+      <!-- <v-touch tag="div" id="test-div"
         @swipe="test"
         @doubletap="test"
         :doubletap-options="{taps: 3}"
       >
         <p>{{event.type}}</p>
-      </v-touch>
+      </v-touch> -->
       <pre>{{event}}</pre>
 
-      <!-- <rotator>
+      <rotator>
         rotate me!
-      </rotator> -->
+      </rotator>
     </div>
     <script src="vendor.build.js"></script>
     <script src="example.build.js"></script>