Merge branch 'dev'

vvenv · Nov 16, 2016 · c3c4cd6 · c3c4cd6
2 parents 713bec3 + 6db9ebb
commit c3c4cd6
Show file tree

Hide file tree

Showing 18 changed files with 306 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "PLATO",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "a Boilerplate for mobile SPAs use vue, vuex, vue-router",
   "license": "MIT",
   "main": "src/index.js",
@@ -28,12 +28,12 @@
     "nuo": "^1.0.0",
     "query-string": "^4.2.3",
     "string-template": "^1.0.0",
-    "vue": "^2.0.5",
-    "vue-router": "^2.0.1",
+    "vue": "^2.0.6",
+    "vue-router": "^2.0.2",
     "vuex": "^2.0.0",
     "vuex-actions": "^1.1.1",
     "vuex-localstorage": "^0.3.0",
-    "whatwg-fetch": "^1.0.0"
+    "whatwg-fetch": "^2.0.0"
   },
   "devDependencies": {
     "babel-loader": "^6.2.7",
@@ -45,12 +45,12 @@
     "bundle-loader": "^0.5.4",
     "chai": "^3.5.0",
     "chromedriver": "^2.25.1",
-    "copy-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^4.0.1",
     "core-js": "^2.4.1",
     "cross-env": "^3.1.3",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.25.0",
-    "eslint": "^3.9.1",
+    "eslint": "^3.10.2",
     "eslint-config-plato": "^0.0.1",
     "eslint-friendly-formatter": "^2.0.6",
     "eslint-loader": "^1.6.0",
@@ -63,21 +63,21 @@
     "karma": "^1.3.0",
     "karma-coverage": "^1.1.1",
     "karma-es6-shim": "^1.0.0",
-    "karma-mocha": "^1.2.0",
+    "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
     "mocha": "^3.1.2",
-    "nightwatch": "^0.9.8",
+    "nightwatch": "^0.9.9",
     "nodemon": "^1.11.0",
     "phantomjs-polyfill": "^0.0.2",
     "phantomjs-prebuilt": "^2.1.13",
     "postcss-browser-reporter": "^0.5.0",
     "postcss-cssnext": "^2.8.0",
     "postcss-flexible": "^0.2.1",
     "postcss-import": "~8.0.2",
-    "postcss-loader": "^1.1.0",
+    "postcss-loader": "^1.1.1",
     "postcss-reporter": "^1.4.1",
     "postcss-url": "^5.1.2",
     "rimraf": "^2.5.4",
@@ -91,10 +91,10 @@
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^9.8.0",
+    "vue-loader": "^9.9.5",
     "vue-style-loader": "^1.0.0",
-    "webpack": "^2.1.0-beta.25",
-    "webpack-dev-server": "^2.1.0-beta.10",
-    "yargs": "^6.3.0"
+    "webpack": "^2.1.0-beta.27",
+    "webpack-dev-server": "^2.1.0-beta.11",
+    "yargs": "^6.4.0"
   }
 }
diff --git a/src/components/core/directives/drag.js b/src/components/core/directives/drag.js
@@ -0,0 +1,53 @@
+/**
+ * Simple directive for dragging events
+ */
+export default {
+  name: 'drag',
+  bind (el, { value, modifiers }) {
+    let startPoint = null
+    el.addEventListener('touchstart', e => {
+      startPoint = null
+      if (e.touches && e.touches.length === 1) {
+        startPoint = {
+          pageX: e.touches[0].pageX,
+          pageY: e.touches[0].pageY
+        }
+        el.dispatchEvent(createEvent('dragstart', { originalEvent: e }))
+      }
+    })
+    el.addEventListener('touchmove', e => {
+      if (startPoint) {
+        if (modifiers.direction) {
+          if ((value.horizontal && isHorizontal(e.touches[0], startPoint)) ||
+              (value.vertical && isVertical(e.touches[0], startPoint))) {
+            el.dispatchEvent(createEvent('drag', { originalEvent: e }))
+          } else {
+            startPoint = null
+          }
+        } else {
+          el.dispatchEvent(createEvent('drag', { originalEvent: e }))
+        }
+      }
+    })
+    el.addEventListener('touchend', e => {
+      if (startPoint) {
+        startPoint = null
+        el.dispatchEvent(createEvent('dragend', { originalEvent: e }))
+      }
+    })
+  }
+}
+
+function createEvent (name, mixins = {}) {
+  const tapEvent = document.createEvent('HTMLEvents')
+  tapEvent.initEvent(name, true, true)
+  return Object.assign(tapEvent, mixins)
+}
+
+function isHorizontal (to, from) {
+  return Math.abs(to.pageX - from.pageX) > Math.abs(to.pageY - from.pageY)
+}
+
+function isVertical (to, from) {
+  return Math.abs(to.pageX - from.pageX) < Math.abs(to.pageY - from.pageY)
+}
diff --git a/src/components/core/icon.vue b/src/components/core/icon.vue
@@ -14,6 +14,10 @@ export default {
 
   beforeMount () {
     this.html = entities[this.$slots.default[0].text] || ' '
+  },
+
+  beforeUpdate () {
+    this.html = entities[this.$slots.default[0].text] || ' '
   }
 }
 

diff --git a/src/components/core/picker.vue b/src/components/core/picker.vue
@@ -2,9 +2,10 @@
 <template>
   <div class="c-picker"
     :style="{height: itemHeight * size + 'px'}"
-    @touchstart="dragstart"
-    @touchmove="drag"
-    @touchend="dragend">
+    v-drag.direction="{vertical: 'yes'}"
+    @dragstart="dragstart"
+    @drag="drag"
+    @dragend="dragend">
     <div class="c-picker-cover"
       :style="{'background-size': '100% ' + (size - 1) / 2 * itemHeight + 'px'}">
       <div class="c-picker-highlight"
@@ -17,6 +18,8 @@
 </template>
 
 <script>
+import drag from './directives/drag'
+
 export default {
   props: {
     index: {
@@ -59,12 +62,10 @@ export default {
 
   watch: {
     index () {
-      if (!this.dragging) {
-        this.updateOffset()
-      }
+      this.calcOffset()
     },
     size () {
-      this.updateOffset()
+      this.calcOffset()
     }
   },
 
@@ -73,7 +74,7 @@ export default {
     this.itemLength = children.length
     if (this.itemLength) {
       this.itemHeight = children[0].clientHeight
-      this.updateOffset()
+      this.calcOffset()
     }
   },
 
@@ -83,7 +84,7 @@ export default {
       this.itemLength = children.length
       if (this.itemLength) {
         this.itemHeight = children[0].clientHeight
-        this.updateOffset()
+        this.calcOffset()
       } else {
         this.itemHeight = 0
         this.offset = 0
@@ -92,38 +93,35 @@ export default {
   },
 
   methods: {
-    updateOffset () {
+    calcOffset () {
       let index = this.index
       if (this.index > this.itemLength - 1) {
         index = this.itemLength - 1
         this.$emit('change', index)
       }
       this.offset = this.itemHeight * ((this.size - 1) / 2 - index)
     },
-    dragstart (e) {
-      if (!this.dragging && e.touches && e.touches.length === 1) {
-        this.dragging = true
-        this.startY = e.touches[0].pageY - this.offset
-      }
+    dragstart ({ originalEvent: e }) {
+      this.startY = e.touches[0].pageY - this.offset
     },
-    drag (e) {
-      if (this.dragging) {
-        e.preventDefault()
-        e.stopPropagation()
-        this.offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageY - this.startY))
-      }
+    drag ({ originalEvent: e }) {
+      // prevent scroll
+      e.preventDefault()
+      e.stopPropagation()
+      this.offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageY - this.startY))
     },
-    dragend (e) {
-      if (this.dragging) {
-        this.dragging = false
-        const offsetIndex = Math.max((this.size - 1) / 2 - this.itemLength, Math.round(this.offset / this.itemHeight))
-        this.offset = this.itemHeight * offsetIndex
-        const index = (this.size - 1) / 2 - offsetIndex
-        if (index !== this.index) {
-          this.$emit('change', index)
-        }
+    dragend ({ originalEvent: e }) {
+      const offsetIndex = Math.max((this.size - 1) / 2 - this.itemLength, Math.round(this.offset / this.itemHeight))
+      this.offset = this.itemHeight * offsetIndex
+      const index = (this.size - 1) / 2 - offsetIndex
+      if (index !== this.index) {
+        this.$emit('change', index)
       }
     }
+  },
+
+  directives: {
+    drag
   }
 }
 </script>

diff --git a/src/components/core/range.vue b/src/components/core/range.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="c-range"
-    @touchstart="dragstart"
-    @touchmove="drag"
-    @touchend="dragend">
+    :class="{disabled: disabled}"
+    v-drag.direction="{horizontal: 'yes'}"
+    @dragstart="dragstart"
+    @drag="drag">
     <div class="c-range-content"
-      :style="{width: '' + (offset / maxOffset * 100) + '%'}"></div>
+      :style="{width: '' + (percent * 100) + '%'}"></div>
   </div>
 </template>
 
 <script>
+import drag from './directives/drag'
+
 export default {
   props: {
     min: {
@@ -35,49 +38,52 @@ export default {
   data () {
     return {
       offset: 0,
-      range: 0,
-      maxOffset: 0,
-      stepOffset: 0
+      maxOffset: 0
+    }
+  },
+
+  computed: {
+    range () {
+      return this.max - this.min
+    },
+    stepOffset () {
+      return this.maxOffset / Math.ceil(this.range / this.step)
+    },
+    percent () {
+      return this.offset / this.maxOffset
     }
   },
 
   watch: {
-    value (val) {
-      if (!this.dragging) {
-        this.offset = (this.value - this.min) / this.range * this.maxOffset
-      }
+    value () {
+      this.calcOffset()
     }
   },
 
   mounted () {
     this.maxOffset = this.$el.clientWidth
-    this.range = this.max - this.min
-    this.stepOffset = this.maxOffset / Math.ceil(this.range / this.step)
-    const value = typeof this.value === 'number' ? this.value : this.min
-    this.offset = (value - this.min) / this.range * this.maxOffset
+    this.calcOffset()
   },
 
   methods: {
-    dragstart (e) {
-      if (!this.dragging && e.touches && e.touches.length === 1) {
-        this.dragging = true
-        this.startY = e.touches[0].pageX - this.offset
-      }
+    calcOffset () {
+      this.offset = typeof this.value === 'number' ? (this.value - this.min) / this.range * this.maxOffset : 0
     },
-    drag (e) {
-      if (this.dragging) {
-        e.preventDefault()
-        e.stopPropagation()
-        const offset = Math.min(this.maxOffset, Math.max(0, e.touches[0].pageX - this.startY))
-        this.offset = Math.round(offset / this.stepOffset) * this.stepOffset
-        this.$emit('change', parseInt(this.min + this.range * (this.offset / this.maxOffset), 10))
+    dragstart ({ originalEvent: e }) {
+      if (!this.disabled) {
+        this.startX = e.touches[0].pageX - this.offset
       }
     },
-    dragend (e) {
-      if (this.dragging) {
-        this.dragging = false
+    drag ({ originalEvent: e }) {
+      if (!this.disabled) {
+        this.offset = Math.round(Math.min(this.maxOffset, Math.max(0, e.touches[0].pageX - this.startX)) / this.stepOffset) * this.stepOffset
+        this.$emit('change', parseInt(this.min + this.range * this.percent, 10))
       }
     }
+  },
+
+  directives: {
+    drag
   }
 }
 </script>