You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ta...@apache.org on 2017/07/28 09:11:45 UTC
[06/43] incubator-weex git commit: * [html5] add touch events & fix
event mapping.
* [html5] add touch events & fix event mapping.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/c4f461f3
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/c4f461f3
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/c4f461f3
Branch: refs/heads/0.16-dev
Commit: c4f461f34929a6c2f733047698ee4d565db001c1
Parents: 736772b
Author: MrRaindrop <te...@gmail.com>
Authored: Mon Jul 3 17:37:04 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Mon Jul 3 17:37:04 2017 +0800
----------------------------------------------------------------------
.../vue/components/scrollable/list/index.js | 3 +-
.../vue/components/scrollable/scroller.js | 3 +-
.../vue/components/scrollable/waterfall.js | 3 +-
.../render/vue/components/slider/slideMixin.js | 17 ++++---
html5/render/vue/core/node.js | 51 ++++++++++++++++----
html5/test/render/vue/core/node.js | 4 +-
6 files changed, 57 insertions(+), 24 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c4f461f3/html5/render/vue/components/scrollable/list/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/list/index.js b/html5/render/vue/components/scrollable/list/index.js
index e781fe9..79e6d7d 100644
--- a/html5/render/vue/components/scrollable/list/index.js
+++ b/html5/render/vue/components/scrollable/list/index.js
@@ -19,7 +19,6 @@
import { extractComponentStyle, createEventMap } from '../../../core'
import { scrollable } from '../../../mixins'
// import { validateStyles } from '../../../validator'
-import { extend } from '../../../utils'
import listMixin from './listMixin'
export default {
@@ -66,7 +65,7 @@ export default {
ref: 'wrapper',
attrs: { 'weex-type': 'list' },
staticClass: this.wrapperClass,
- on: extend(createEventMap(this), {
+ on: createEventMap(this, {
scroll: this.handleListScroll,
touchstart: this.handleTouchStart,
touchmove: this.handleTouchMove,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c4f461f3/html5/render/vue/components/scrollable/scroller.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/scroller.js b/html5/render/vue/components/scrollable/scroller.js
index 3151fae..1eebab3 100644
--- a/html5/render/vue/components/scrollable/scroller.js
+++ b/html5/render/vue/components/scrollable/scroller.js
@@ -19,7 +19,6 @@
import { extractComponentStyle, createEventMap } from '../../core'
import { scrollable } from '../../mixins'
// import { validateStyles } from '../../validator'
-import { extend } from '../../utils'
import listMixin from './list/listMixin'
export default {
@@ -80,7 +79,7 @@ export default {
return createElement('main', {
ref: 'wrapper',
attrs: { 'weex-type': 'scroller' },
- on: extend(createEventMap(this), {
+ on: createEventMap(this, {
scroll: this.handleScroll,
touchstart: this.handleTouchStart,
touchmove: this.handleTouchMove,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c4f461f3/html5/render/vue/components/scrollable/waterfall.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/waterfall.js b/html5/render/vue/components/scrollable/waterfall.js
index 2239f00..012c1d2 100644
--- a/html5/render/vue/components/scrollable/waterfall.js
+++ b/html5/render/vue/components/scrollable/waterfall.js
@@ -23,7 +23,6 @@
*/
import { extractComponentStyle, createEventMap } from '../../core'
import { scrollable } from '../../mixins'
-import { extend } from '../../utils'
const NORMAL_GAP_SIZE = 32
const DEFAULT_COLUMN_COUNT = 1
@@ -325,7 +324,7 @@ export default {
return createElement('main', {
ref: 'wrapper',
attrs: { 'weex-type': 'waterfall' },
- on: extend(createEventMap(this), {
+ on: createEventMap(this, {
scroll: this.handleScroll,
touchstart: this.handleTouchStart,
touchmove: this.handleTouchMove,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c4f461f3/html5/render/vue/components/slider/slideMixin.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/slideMixin.js b/html5/render/vue/components/slider/slideMixin.js
index 73960e5..2b7bfa1 100644
--- a/html5/render/vue/components/slider/slideMixin.js
+++ b/html5/render/vue/components/slider/slideMixin.js
@@ -19,7 +19,6 @@
import './slider.css'
import {
throttle,
- extend,
createEvent,
fireLazyload,
addTransform,
@@ -116,12 +115,16 @@ export default {
{
ref: 'wrapper',
attrs: { 'weex-type': this.isNeighbor ? 'slider-neighbor' : 'slider' },
- on: extend(createEventMap(this, ['scroll', 'scrollstart', 'scrollend']), {
- touchstart: this._handleTouchStart,
- touchmove: throttle(bind(this._handleTouchMove, this), 25),
- touchend: this._handleTouchEnd,
- touchcancel: this._handleTouchCancel
- }),
+ on: createEventMap(
+ this,
+ ['scroll', 'scrollstart', 'scrollend'],
+ {
+ touchstart: this._handleTouchStart,
+ touchmove: throttle(bind(this._handleTouchMove, this), 25),
+ touchend: this._handleTouchEnd,
+ touchcancel: this._handleTouchCancel
+ }
+ ),
staticClass: 'weex-slider weex-slider-wrapper weex-ct',
staticStyle: extractComponentStyle(this)
},
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c4f461f3/html5/render/vue/core/node.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/node.js b/html5/render/vue/core/node.js
index 8edc608..d07f3ed 100644
--- a/html5/render/vue/core/node.js
+++ b/html5/render/vue/core/node.js
@@ -17,7 +17,7 @@
* under the License.
*/
-import { extend } from '../utils'
+import { extend, isArray } from '../utils'
/**
* remove text nodes in the nodes array.
@@ -25,7 +25,7 @@ import { extend } from '../utils'
* @return {Array} nodes without text nodes.
*/
export function trimTextVNodes (vnodes) {
- if (Array.isArray(vnodes)) {
+ if (isArray(vnodes)) {
return vnodes.filter(vnode => !!vnode.tag)
}
return vnodes
@@ -55,7 +55,7 @@ function getListeners (vnode, evt) {
const supportedEvents = [
'longpress', 'appear', 'disappear',
- // 'touchstart', 'touchmove', 'touchend',
+ 'touchstart', 'touchmove', 'touchend',
'panstart', 'panmove', 'panend', 'swipe', 'longpress'
]
@@ -76,9 +76,9 @@ function isInANode (el) {
/**
* emit native events to enable v-on.
* @param {VComponent} context: which one to emit a event on.
- * @param {array} extras: extra events.
+ * @param {array | object} extras: extra events. You can pass in multiple arguments here.
*/
-export function createEventMap (context, extras = []) {
+export function createEventMap (context, ...extras) {
const eventMap = {}
/**
* Bind some original type event to your specified type event handler.
@@ -88,11 +88,11 @@ export function createEventMap (context, extras = []) {
const bindFunc = (originalType) => {
return listenTo => {
let handler
+ const evtName = originalType || listenTo
if (typeof listenTo === 'function') {
handler = listenTo
}
else if (typeof listenTo === 'string') {
- if (!originalType) { originalType = listenTo }
handler = function (e) {
/**
* allow original bubbling.
@@ -115,7 +115,7 @@ export function createEventMap (context, extras = []) {
on = on.fn
}
let evt = e
- if (originalType === listenTo) {
+ if (originalType && evtName !== listenTo) {
evt = extend({}, { type: listenTo })
// weex didn't provide these two methods for event object.
delete event.preventDefault
@@ -135,10 +135,43 @@ export function createEventMap (context, extras = []) {
}
}
}
- eventMap[originalType] = handler
+ if (!eventMap[evtName]) {
+ eventMap[evtName] = []
+ }
+ eventMap[evtName].push(handler)
}
}
- supportedEvents.concat(extras).forEach(bindFunc())
+
+ /**
+ * 1. Dispatch default supported events directly to user's event listeners. These
+ * listeners will be triggered before extras event handlers.
+ */
+ supportedEvents.forEach(bindFunc())
+
+ /**
+ * 2. component's extra event bindings. This is mostly for the needs of component's
+ * own special behaviours. These handlers will be processed after the user's
+ * corresponding event handlers.
+ */
+ if (extras) {
+ const len = extras.length
+ for (let i = 0; i < len; i++) {
+ const extra = extras[i]
+ if (isArray(extra)) {
+ extra.forEach(bindFunc())
+ }
+ else if (typeof extra === 'object') {
+ for (const key in extra) {
+ bindFunc(key)(extra[key])
+ }
+ }
+ }
+ }
+
+ /**
+ * 3. special binding for click event, which should be a fastclick event without
+ * 300ms latency.
+ */
bindFunc('tap')('click')
/**
* Special treatment for click event:
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c4f461f3/html5/test/render/vue/core/node.js
----------------------------------------------------------------------
diff --git a/html5/test/render/vue/core/node.js b/html5/test/render/vue/core/node.js
index 910e390..8076e4c 100644
--- a/html5/test/render/vue/core/node.js
+++ b/html5/test/render/vue/core/node.js
@@ -31,7 +31,7 @@ init('core node', (Vue, helper) => {
* child vnode -> parent vnode.
* e.g. div -> foo (whoes root element is the div.)
*/
- const evt = new Event('click', { bubbles: true })
+ const evt = new Event('tap', { bubbles: true })
el.dispatchEvent(evt)
helper.registerDone(id, (tracker) => {
@@ -49,7 +49,7 @@ init('core node', (Vue, helper) => {
* click inner div. should just trigget the inner handler and
* shouldn't bubbe to outter div.
*/
- const evt = new Event('click', { bubbles: true })
+ const evt = new Event('tap', { bubbles: true })
inner.dispatchEvent(evt)
helper.registerDone(id, (tracker) => {