dolphin-weex-ui 0.2.13 → 0.2.15

package/packages/utils/touch.js

@@ -0,0 +1,76 @@
+import { Direction } from './direction.js'
+
+export class Touch {
+  static MIN_DISTANCE = 10
+
+  static Create() {
+    return new Touch()
+  }
+
+  constructor() {
+    this.startX = 0
+    this.startY = 0
+    this.deltaX = 0
+    this.deltaY = 0
+
+    this.direction = Direction.NONE
+  }
+
+  get offsetX() {
+    return Math.abs(this.deltaX)
+  }
+
+  get offsetY() {
+    return Math.abs(this.deltaY)
+  }
+
+  get isHorizental() {
+    return this.direction === Direction.HOR
+  }
+
+  get isVertical() {
+    return this.direction === Direction.VER
+  }
+
+  get isUndetermined() {
+    return this.direction === Direction.NONE
+  }
+
+  resolveDirection(x, y) {
+    if (x > y && x > Touch.MIN_DISTANCE) {
+      return Direction.HOR
+    }
+    if (y > x && y > Touch.MIN_DISTANCE) {
+      return Direction.VER
+    }
+    return Direction.NONE
+  }
+
+  reset() {
+    this.startX = 0
+    this.startY = 0
+    this.deltaX = 0
+    this.deltaY = 0
+    this.direction = Direction.NONE
+  }
+
+  getTouchByEvent(e) {
+    return e.changedTouches[0]
+  }
+
+  start(evt) {
+    const e = this.getTouchByEvent(evt)
+    this.reset()
+    this.startX = e.screenX
+    this.startY = e.screenY
+  }
+
+  move(evt) {
+    const e = this.getTouchByEvent(evt)
+    this.deltaX = e.screenX - this.startX
+    this.deltaY = e.screenY - this.startY
+    if (this.isUndetermined) {
+      this.direction = this.resolveDirection(this.offsetX, this.offsetY)
+    }
+  }
+}

package/packages/utils/transition.js

@@ -0,0 +1,130 @@
+const animation = weex.requireModule('animation')
+
+export class Transition {
+  static Create() {
+    return new Transition()
+  }
+
+  static Default() {
+    return this.Create()
+      .duration(360)
+      .delay(0)
+      .needLayout(false)
+      .timing('cubic-bezier(0.25, 0.46, 0.45, 0.94)')
+  }
+
+  constructor() {
+    this.options = {}
+    this.styles = {}
+    this.configureTransform = []
+  }
+
+  width(width) {
+    this.styles.width = `${width}px`
+    return this
+  }
+
+  height(height) {
+    this.styles.height = `${height}px`
+    return this
+  }
+
+  backgroundColor(color) {
+    this.styles.backgroundColor = color
+    return this
+  }
+
+  opacity(opacity) {
+    this.styles.opacity = opacity
+    return this
+  }
+
+  translate(x, y, z) {
+    this.configureTransform.push(`translate(${x},${y},${z})`)
+    return this
+  }
+
+  translateX(x) {
+    this.configureTransform.push(`translateX(${x})`)
+    return this
+  }
+
+  translateY(y) {
+    this.configureTransform.push(`translateY(${y})`)
+    return this
+  }
+
+  rotate(x, y, z) {
+    this.configureTransform.push(`rotate(${x}deg,${y}deg,${z}deg)`)
+    return this
+  }
+
+  rotateX(x) {
+    this.configureTransform.push(`rotateX(${x}deg)`)
+    return this
+  }
+
+  rotateY(y) {
+    this.configureTransform.push(`rotateY(${y}deg)`)
+    return this
+  }
+
+  rotateZ(z) {
+    this.configureTransform.push(`rotateZ(${z}deg)`)
+    return this
+  }
+
+  perspective(pers) {
+    this.configureTransform.push(`perspective(${pers})`)
+    return this
+  }
+
+  scale(x, y, z) {
+    this.configureTransform.push(`scale(${x},${y},${z})`)
+    return this
+  }
+
+  scaleX(x) {
+    this.configureTransform.push(`scaleX(${x})`)
+    return this
+  }
+
+  scaleY(y) {
+    this.configureTransform.push(`scaleY(${y})`)
+    return this
+  }
+
+  transformOrigin(origin) {
+    this.styles.transformOrigin = origin
+    return this
+  }
+
+  duration(duration) {
+    this.options.duration = duration
+    return this
+  }
+
+  delay(delay) {
+    this.options.delay = delay
+    return this
+  }
+
+  needLayout(layout) {
+    this.options.needLayout = layout
+    return this
+  }
+
+  timing(timing) {
+    this.options.timingFunction = timing
+    return this
+  }
+
+  run(element, func) {
+    const styles = { ...this.styles }
+    if (this.configureTransform.length) {
+      styles.transform = this.configureTransform.join(' ')
+    }
+    const opts = Object.assign({}, this.options, { styles })
+    animation.transition(element, opts, func)
+  }
+}

package/packages/utils/vue-extension.js

@@ -0,0 +1,32 @@
+export function traverseVNode(vnodes) {
+  const res = []
+  for (const vnode of vnodes) {
+    res.push(vnode)
+
+    if (vnode.componentInstance) {
+      res.push(...traverseVNode(vnode.componentInstance.$children.map(x => x.$vnode)))
+    }
+
+    if (vnode.children) {
+      res.push(...traverseVNode(vnode.children))
+    }
+  }
+  return res
+}
+
+export function flattenVNode(vnodes) {
+  return traverseVNode(vnodes)
+}
+
+export function sortComponent(children, parent) {
+  const { componentOptions } = parent.$vnode
+
+  if (!componentOptions || !componentOptions.children || !componentOptions.children.length) {
+    return
+  }
+
+  const vnodes = flattenVNode(componentOptions.children)
+  children.sort((a, b) => vnodes.indexOf(a.$vode) - vnodes.indexOf(b.$vode))
+
+  return children
+}