* [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 <tekk...@gmail.com> Authored: Mon Jul 3 17:37:04 2017 +0800 Committer: MrRaindrop <tekk...@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) => {
