Repository: incubator-weex Updated Branches: refs/heads/release-0.16 5c3fffcf6 -> 672800f51
* [html5] bugfix: - scroll event listenning on window. - img lazyloading. - scrollToElement on latest chrome. - rm id of a comp. - fix stream.fetch. - add statistics for components and modules. - support lazyload and appear watcher when body height set to 100% - add try catch for accessing localStorage may throw a error. - image support sprite (sprite-src, sprite-position, sprite-width). - fix indicator when there's only one slide in slider. Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/cd84c579 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/cd84c579 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/cd84c579 Branch: refs/heads/release-0.16 Commit: cd84c579bcc4e7c1a80a5b7d2c6c46a051e19649 Parents: aab1d74 Author: MrRaindrop <tekk...@gmail.com> Authored: Tue Sep 26 15:56:51 2017 +0800 Committer: MrRaindrop <tekk...@gmail.com> Committed: Tue Oct 31 21:26:31 2017 +0800 ---------------------------------------------------------------------- html5/render/browser/extend/api/storage.js | 123 ++++++++++++------- html5/render/browser/extend/api/stream.js | 9 +- html5/render/vue/README.md | 20 ++- html5/render/vue/components/a.js | 3 - html5/render/vue/components/image.js | 42 +++++-- html5/render/vue/components/slider/indicator.js | 4 +- html5/render/vue/env/weex.js | 34 ++++- html5/render/vue/index.js | 2 +- html5/render/vue/mixins/base.js | 81 +++++++++++- html5/render/vue/mixins/style.js | 22 +--- html5/render/vue/modules/dom.js | 6 +- html5/render/vue/utils/component.js | 11 +- html5/render/vue/utils/lazyload.js | 24 +++- html5/test/render/vue/components/image.js | 1 - html5/test/render/vue/components/switch.js | 9 +- html5/test/render/vue/components/text.js | 2 +- html5/test/render/vue/modules/dom.js | 1 + package.json | 2 +- packages/weex-vue-render/README.md | 20 ++- packages/weex-vue-render/package.json | 2 +- 20 files changed, 313 insertions(+), 105 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/browser/extend/api/storage.js ---------------------------------------------------------------------- diff --git a/html5/render/browser/extend/api/storage.js b/html5/render/browser/extend/api/storage.js index bdd4c22..cb4de3b 100644 --- a/html5/render/browser/extend/api/storage.js +++ b/html5/render/browser/extend/api/storage.js @@ -20,12 +20,33 @@ 'use strict' -const supportLocalStorage = typeof localStorage !== 'undefined' +let supportLocalStorage = false +try { + supportLocalStorage = typeof localStorage !== 'undefined' +} +catch (err) { + // not support. +} + const SUCCESS = 'success' const FAILED = 'failed' const INVALID_PARAM = 'invalid_param' const UNDEFINED = 'undefined' +function callFail (sender, callbackId, errorMsg) { + sender.performCallback(callbackId, { + result: FAILED, + data: errorMsg || UNDEFINED + }) +} + +function callNotSupportFail (sender, callbackId) { + sender.performCallback(callbackId, { + result: FAILED, + data: 'localStorage is disabled or not supported.' + }) +} + const storage = { /** @@ -36,11 +57,10 @@ const storage = { * @param {function} callbackId */ setItem: function (key, value, callbackId) { + const sender = this.sender if (!supportLocalStorage) { - console.error('your browser is not support localStorage yet.') - return + return callNotSupportFail(sender, callbackId) } - const sender = this.sender if (!key || (!value && value !== 0)) { sender.performCallback(callbackId, { result: 'failed', @@ -57,10 +77,7 @@ const storage = { } catch (e) { // accept any exception thrown during a storage attempt as a quota error - sender.performCallback(callbackId, { - result: FAILED, - data: UNDEFINED - }) + callFail(sender, callbackId) } }, @@ -70,11 +87,10 @@ const storage = { * @param {function} callbackId */ getItem: function (key, callbackId) { + const sender = this.sender if (!supportLocalStorage) { - console.error('your browser is not support localStorage yet.') - return + return callNotSupportFail(sender, callbackId) } - const sender = this.sender if (!key) { sender.performCallback(callbackId, { result: FAILED, @@ -82,11 +98,17 @@ const storage = { }) return } - const val = localStorage.getItem(key) - sender.performCallback(callbackId, { - result: val ? SUCCESS : FAILED, - data: val || UNDEFINED - }) + try { + const val = localStorage.getItem(key) + sender.performCallback(callbackId, { + result: val ? SUCCESS : FAILED, + data: val || UNDEFINED + }) + } + catch (e) { + // accept any exception thrown during a storage attempt as a quota error + callFail(sender, callbackId) + } }, /** @@ -95,11 +117,10 @@ const storage = { * @param {function} callbackId */ removeItem: function (key, callbackId) { + const sender = this.sender if (!supportLocalStorage) { - console.error('your browser is not support localStorage yet.') - return + return callNotSupportFail(sender, callbackId) } - const sender = this.sender if (!key) { sender.performCallback(callbackId, { result: FAILED, @@ -107,11 +128,17 @@ const storage = { }) return } - localStorage.removeItem(key) - sender.performCallback(callbackId, { - result: SUCCESS, - data: UNDEFINED - }) + try { + localStorage.removeItem(key) + sender.performCallback(callbackId, { + result: SUCCESS, + data: UNDEFINED + }) + } + catch (e) { + // accept any exception thrown during a storage attempt as a quota error + callFail(sender, callbackId) + } }, /** @@ -119,16 +146,21 @@ const storage = { * @param {function} callbackId */ length: function (callbackId) { + const sender = this.sender if (!supportLocalStorage) { - console.error('your browser is not support localStorage yet.') - return + return callNotSupportFail(sender, callbackId) + } + try { + const len = localStorage.length + sender.performCallback(callbackId, { + result: SUCCESS, + data: len + }) + } + catch (e) { + // accept any exception thrown during a storage attempt as a quota error + callFail(sender, callbackId) } - const sender = this.sender - const len = localStorage.length - sender.performCallback(callbackId, { - result: SUCCESS, - data: len - }) }, /** @@ -136,19 +168,24 @@ const storage = { * @param {function} callbackId */ getAllKeys: function (callbackId) { + const sender = this.sender if (!supportLocalStorage) { - console.error('your browser is not support localStorage yet.') - return + return callNotSupportFail(sender, callbackId) + } + try { + const _arr = [] + for (let i = 0; i < localStorage.length; i++) { + _arr.push(localStorage.key(i)) + } + sender.performCallback(callbackId, { + result: SUCCESS, + data: _arr + }) + } + catch (e) { + // accept any exception thrown during a storage attempt as a quota error + callFail(sender, callbackId) } - const sender = this.sender - const _arr = [] - for (let i = 0; i < localStorage.length; i++) { - _arr.push(localStorage.key(i)) - } - sender.performCallback(callbackId, { - result: SUCCESS, - data: _arr - }) } } http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/browser/extend/api/stream.js ---------------------------------------------------------------------- diff --git a/html5/render/browser/extend/api/stream.js b/html5/render/browser/extend/api/stream.js index 8e27dd7..92c2459 100644 --- a/html5/render/browser/extend/api/stream.js +++ b/html5/render/browser/extend/api/stream.js @@ -245,9 +245,14 @@ const stream = { let hashIdx = url.indexOf('#') hashIdx <= -1 && (hashIdx = url.length) let hash = url.substr(hashIdx) - hash && (hash = '#' + hash) + if (hash && hash[0] === '#') { + hash = hash.substr(1) + } url = url.substring(0, hashIdx) - url += (config.url.indexOf('?') <= -1 ? '?' : '&') + body + hash + if (body) { + url += (config.url.indexOf('?') <= -1 ? '?' : '&') + body + } + url += '#' + hash config.url = url } http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/README.md ---------------------------------------------------------------------- diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md index ad7c61f..6af6a37 100644 --- a/html5/render/vue/README.md +++ b/html5/render/vue/README.md @@ -176,9 +176,27 @@ vue: { * not to prevent default behaviour of click events unless the click-binding element is inside a `<a>` link, or it is a `<a>` link and has a `prevent` attribute on it. -#### 0.12.17 +#### 0.12.18 * support offset appear. +* fix lazyload failing when frequently updating images' src. Typical scenario is skeleton replacing. + +#### 0.12.20 + +* fix scrollToElement on latest chrome. + +#### 0.12.21 + +* fix `stream.fetch` for adding wrong suffix to the request url. + +#### 0.12.22 + +* fix image lazyloading. + +#### 0.12.23 + +* add try catch to accessing localStorage. +* support image sprite. ## component -> dom map http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/components/a.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/a.js b/html5/render/vue/components/a.js index ff4a59d..2915952 100644 --- a/html5/render/vue/components/a.js +++ b/html5/render/vue/components/a.js @@ -23,7 +23,6 @@ const _css = ` text-decoration: none; } ` -let cnt = 0 function getA (weex) { const { @@ -41,11 +40,9 @@ function getA (weex) { // if (process.env.NODE_ENV === 'development') { // validateStyles('a', this.$vnode.data && this.$vnode.data.staticStyle) // } - const id = cnt++ return createElement('html:a', { attrs: { 'weex-type': 'a', - 'id': `weex-a-${id}`, href: this.href }, staticClass: 'weex-a weex-ct', http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/components/image.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/image.js b/html5/render/vue/components/image.js index 754725b..d2041e2 100644 --- a/html5/render/vue/components/image.js +++ b/html5/render/vue/components/image.js @@ -17,7 +17,7 @@ * under the License. */ -let extractComponentStyle, createEventMap, extend +let extractComponentStyle, createEventMap, extend, isArray const IMG_NAME_BITS = 15 @@ -28,9 +28,28 @@ const _css = ` } ` /** - * get resize (stetch|cover|contain) related styles. + * 1. get sprite style if spritePosition is set. + * 2. else get resize (stetch|cover|contain) related styles. */ -function getResizeStyle (context) { +function getCustomStyle (context, mergedStyle) { + let spritePosition = context.spritePosition + if (spritePosition && !isArray(spritePosition)) { + spritePosition = (spritePosition + '').split(',').map(function (val) { + return val.replace(/[[\]]/g, '').replace(/^\s*(\S[\s\S]*?)\s*$/g, function ($0, $1) { + return parseInt($1) + }) + }) + } + if (spritePosition) { + const posX = -spritePosition[0] + const posY = -spritePosition[1] + const scale = weex.config.env.scale + const sizeScale = parseFloat(context.spriteWidth) / parseFloat(mergedStyle.width) * weex.config.env.scale + return { + 'background-position': `${posX * scale}px ${posY * scale}px`, + 'background-size': `${sizeScale * 100}%` + } + } const stretch = '100% 100%' const resize = context.resize || stretch const bgSize = ['cover', 'contain', stretch].indexOf(resize) > -1 ? resize : stretch @@ -107,7 +126,10 @@ const image = { resize: String, quality: String, sharpen: String, - original: [String, Boolean] + original: [String, Boolean], + spriteSrc: String, + spritePosition: [String, Array], + spriteWidth: [String, Number] }, updated () { @@ -125,17 +147,20 @@ const image = { }, render (createElement) { - const resizeStyle = getResizeStyle(this) const style = extractComponentStyle(this) + const customStyle = getCustomStyle(this, style) return createElement('figure', { attrs: { 'weex-type': 'image', - 'img-src': preProcessSrc(this, this.src, style), - 'img-placeholder': preProcessSrc(this, this.placeholder, style) + 'img-src': this.spriteSrc || preProcessSrc(this, this.src, style), + 'img-placeholder': preProcessSrc(this, this.placeholder, style), + 'sprite-src': this.spriteSrc, + 'sprite-position': this.spritePosition, + 'sprite-width': this.spriteWidth }, on: createEventMap(this, ['load', 'error']), staticClass: 'weex-image weex-el', - staticStyle: extend(style, resizeStyle) + staticStyle: extend(style, customStyle) }) }, _css @@ -146,6 +171,7 @@ export default { extractComponentStyle = weex.extractComponentStyle createEventMap = weex.createEventMap extend = weex.utils.extend + isArray = weex.utils.isArray weex.registerComponent('image', image) weex.registerComponent('img', image) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/components/slider/indicator.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/slider/indicator.js b/html5/render/vue/components/slider/indicator.js index 070f3f7..1e6e5e3 100644 --- a/html5/render/vue/components/slider/indicator.js +++ b/html5/render/vue/components/slider/indicator.js @@ -118,7 +118,9 @@ function _getLtbr (context, mergedStyle) { function _getIndicatorRect (el) { let width, height if (el.children.length === 1) { - width = height = window.getComputedStyle(el.children[0]) + const itemComputedStyle = window.getComputedStyle(el.children[0]) + width = parseFloat(itemComputedStyle.width) + height = parseFloat(itemComputedStyle.height) } else { const itemComputedStyle = window.getComputedStyle(el.children[1]) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/env/weex.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/env/weex.js b/html5/render/vue/env/weex.js index 7d88268..dfbd7a5 100644 --- a/html5/render/vue/env/weex.js +++ b/html5/render/vue/env/weex.js @@ -34,12 +34,27 @@ const weex = { }, _components: {}, + _modules: weexModules, + + _meta: { + mounted: {}, + updated: {}, + destroyed: {}, + requiredModules: {}, + apiCalled: {}, + perf: {} + }, document: { body: {} }, requireModule (moduleName) { + const metaMod = weex._meta.requiredModules + if (!metaMod[moduleName]) { + metaMod[moduleName] = 0 + } + metaMod[moduleName]++ return weexModules[moduleName] }, @@ -56,9 +71,9 @@ const weex = { method = method && method.replace(/^\./, '') switch (type) { case 'component': - return !!this._components[mod] + return typeof this._components[mod] !== 'undefined' case 'module': - const module = this.requireModule(mod) + const module = weexModules[mod] return module && method ? !!module[method] : !!module } } @@ -106,7 +121,18 @@ const weex = { } for (const key in module) { if (module.hasOwnProperty(key)) { - weexModules[name][key] = utils.bind(module[key], this) + weexModules[name][key] = function () { + const called = weex._meta.apiCalled + if (!called[name]) { + called[name] = {} + } + const calledMod = called[name] + if (!calledMod[key]) { + calledMod[key] = 0 + } + calledMod[key]++ + return module[key].apply(weex, arguments) + } } } }, @@ -115,7 +141,7 @@ const weex = { if (!this.__vue__) { return console.log('[Vue Render] Vue is not found. Please import Vue.js before register a component.') } - this._components[name] = 1 + this._components[name] = 0 if (component._css) { const css = component._css.replace(/\b[+-]?[\d.]+rem;?\b/g, function (m) { return parseFloat(m) * 75 * weex.config.env.scale + 'px' http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/index.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/index.js b/html5/render/vue/index.js index bd0016d..61d275e 100644 --- a/html5/render/vue/index.js +++ b/html5/render/vue/index.js @@ -46,7 +46,7 @@ function init (Vue/*, options = {}*/) { Vue.config.parsePlatformTagName = tag => tag.replace(htmlRegex, '') function isWeexTag (tag) { - return !!weex._components[tag] + return typeof weex._components[tag] !== 'undefined' } const oldGetTagNamespace = Vue.config.getTagNamespace Vue.config.getTagNamespace = function (tag) { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/mixins/base.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/mixins/base.js b/html5/render/vue/mixins/base.js index 28c7703..36891ee 100644 --- a/html5/render/vue/mixins/base.js +++ b/html5/render/vue/mixins/base.js @@ -27,15 +27,20 @@ let lazyloadWatched = false function watchLazyload () { lazyloadWatched = true ; [ - 'scroll' + 'scroll', // 'transitionend', // 'webkitTransitionEnd', // 'animationend', // 'webkitAnimationEnd', - // 'resize' + 'resize' ].forEach(evt => { window.addEventListener(evt, getThrottleLazyload(25, document.body)) }) + /** + * In case the users use the body's overflow to scroll. Then the scroll + * event would not be triggered on the window object but on the body. + */ + document.body.addEventListener('scroll', getThrottleLazyload(25, document.body)) } let warned = false @@ -49,6 +54,8 @@ function warnProcessStyle () { } } +let idCnt = 0 + export default { beforeCreate () { if (!lazyloadWatched) { @@ -56,10 +63,53 @@ export default { } }, + updated () { + if (this._rootId) { + const el = this.$el + if (el.nodeType === 1 + && el.className.indexOf('weex-root') <= -1) { + el.classList.add('weex-root') + el.setAttribute('data-wx-root-id', this._rootId) + } + } + + const tagName = this.$options && this.$options._componentTag + const metaUp = weex._meta.updated + if (!metaUp[tagName]) { + metaUp[tagName] = 0 + } + metaUp[tagName]++ + /** + * since the updating of component may affect the layout, the lazyloading should + * be fired. + */ + this._fireLazyload() + }, + mounted () { - if (!weex._root) { - weex._root = this.$root.$el - weex._root.classList.add('weex-root') + const tagName = this.$options && this.$options._componentTag + if (typeof weex._components[tagName] !== 'undefined') { + weex._components[tagName]++ + } + const metaMt = weex._meta.mounted + if (!metaMt[tagName]) { + metaMt[tagName] = 0 + } + metaMt[tagName]++ + if (this === this.$root) { + const rootId = `wx-root-${idCnt++}` + if (!weex._root) { + weex._root = {} + } + weex._root[rootId] = this + this._rootId = rootId + const el = this.$el + if (el.nodeType !== 1) { + return + } + el.classList.add('weex-root') + el.setAttribute('data-wx-root-id', rootId) + this._fireLazyload(el) } // give warning for not using $processStyle in vue-loader config. @@ -76,12 +126,31 @@ export default { }, destroyed () { + /** + * if the destroyed element is above another panel with images inside, and the images + * moved into the viewport, then the lazyloading should be triggered. + */ + if (this._rootId) { + delete weex._root[this._rootId] + delete this._rootId + } + const tagName = this.$options && this.$options._componentTag + if (typeof weex._components[tagName] !== 'undefined') { + weex._components[tagName]-- + } + const metaDs = weex._meta.destroyed + if (!metaDs[tagName]) { + metaDs[tagName] = 0 + } + metaDs[tagName]++ + + this._fireLazyload() triggerDisappear(this) }, methods: { _fireLazyload (el) { - getThrottleLazyload(25)() + getThrottleLazyload(25, el || document.body)() } } } http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/mixins/style.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/mixins/style.js b/html5/render/vue/mixins/style.js index ba11ed5..29bac33 100644 --- a/html5/render/vue/mixins/style.js +++ b/html5/render/vue/mixins/style.js @@ -17,9 +17,7 @@ * under the License. */ import { - getHeadStyleMap, - getComponentStyle, - extractComponentStyle + getHeadStyleMap } from '../core' import { @@ -56,7 +54,7 @@ function getIdentifiedBeforeCreate () { */ if (((this === this.$root && this.$options) || (tagName - && !weex._components[tagName] + && (typeof weex._components[tagName] === 'undefined') && !disposed[tagName])) && !this._secondScanned) { disposed[tagName] = 1 @@ -95,22 +93,6 @@ export default { return normalizeStyle(camelizeKeys(style)) }, - _extractComponentStyle () { - return extractComponentStyle(this) - }, - - /** - * get style from class, staticClass, style and staticStyle. - * merge styles priority: high -> low - * 1. data.style (bound style). - * 2. data.staticStyle (inline styles). - * 3. data.class style (bound class names). - * 4. data.staticClass style (scoped styles or static classes). - */ - _getComponentStyle (data) { - return getComponentStyle(this) - }, - _getParentRect () { const parentElm = this.$options._parentElm return parentElm && parentElm.getBoundingClientRect() http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/modules/dom.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/modules/dom.js b/html5/render/vue/modules/dom.js index 035443d..797e774 100644 --- a/html5/render/vue/modules/dom.js +++ b/html5/render/vue/modules/dom.js @@ -39,6 +39,10 @@ function now () { } function scrollElement (dSuffix, position) { + if ((this === document.body) || (this === window) + && window.scrollTo) { + return window.scrollTo(0, position) + } this[`scroll${dSuffix}`] = position } /** @@ -133,7 +137,7 @@ const dom = { scrollable: ct, startTime: now(), frame: null, - startPosition: ct[`scroll${dSuffix}`], + startPosition: isWindow ? window.pageYOffset : ct[`scroll${dSuffix}`], position: offset, method: scrollElement, dSuffix: dSuffix http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/utils/component.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/utils/component.js b/html5/render/vue/utils/component.js index 7e96585..e68a0b0 100644 --- a/html5/render/vue/utils/component.js +++ b/html5/render/vue/utils/component.js @@ -97,7 +97,7 @@ export function isElementVisible (el, container, dir, offset) { bottom: window.innerHeight, right: window.innerWidth } - const ctRect = (container === document.body) + const ctRect = (container === window || container === document.body) ? bodyRect : container ? container.getBoundingClientRect() : bodyRect return hasIntersection(el.getBoundingClientRect(), ctRect, dir, offset) @@ -163,7 +163,7 @@ export function watchAppear (context, fireNow) { } let isWindow = false - let container = document.body + let container = window const scroller = getParentScroller(context) if (scroller && scroller.$el) { container = scroller.$el @@ -214,6 +214,13 @@ export function watchAppear (context, fireNow) { } }, 25, true) container.addEventListener('scroll', scrollHandler, false) + /** + * In case the users use the body's overflow to scroll. Then the scroll + * event would not be handled on the window object but on the body. + */ + if (isWindow) { + document.body.addEventListener('scroll', scrollHandler, false) + } } /** http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/render/vue/utils/lazyload.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/utils/lazyload.js b/html5/render/vue/utils/lazyload.js index 158377b..a4737a9 100644 --- a/html5/render/vue/utils/lazyload.js +++ b/html5/render/vue/utils/lazyload.js @@ -37,7 +37,7 @@ export function applySrc (item: any, src: ?string, placeholderSrc: ?string): voi function finallCb () { delete item._src_loading } - if (item._src_loading) { + if (item._src_loading === src) { return } /** @@ -50,7 +50,7 @@ export function applySrc (item: any, src: ?string, placeholderSrc: ?string): voi * 2. then load the img src with Image constructor (but would not post * a request again), just to trigger the load event. */ - item._src_loading = true + item._src_loading = src preLoadImg(src, function (evt) { item.style.backgroundImage = `url(${src || ''})` const { width: naturalWidth, height: naturalHeight } = this @@ -75,6 +75,24 @@ export function applySrc (item: any, src: ?string, placeholderSrc: ?string): voi }) } +function getCtScroller (el: any) { + if (!el) { return } + let scroller = el._ptScroller + if (!scroller) { + let pt = el.parentElement + while (pt && pt !== document.body) { + if ((pt.className + '' || '').match(/weex-list|weex-scroller|weex-waterfall/)) { + scroller = pt + break + } + pt = pt.parentElement + } + scroller = pt + el._ptScroller = pt + } + return scroller +} + export function fireLazyload (el: Array<any> | any | null, ignoreVisibility: ?boolean): void { if (Array.isArray(el)) { return el.forEach(ct => fireLazyload(ct)) @@ -88,7 +106,7 @@ export function fireLazyload (el: Array<any> | any | null, ignoreVisibility: ?bo if (typeof ignoreVisibility === 'boolean' && ignoreVisibility) { applySrc(img, img.getAttribute('img-src'), img.getAttribute('img-placeholder')) } - else if (isElementVisible(img, el)) { + else if (isElementVisible(img, getCtScroller(el))[0]) { applySrc(img, img.getAttribute('img-src'), img.getAttribute('img-placeholder')) } } http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/test/render/vue/components/image.js ---------------------------------------------------------------------- diff --git a/html5/test/render/vue/components/image.js b/html5/test/render/vue/components/image.js index 4e013a4..7779525 100644 --- a/html5/test/render/vue/components/image.js +++ b/html5/test/render/vue/components/image.js @@ -32,7 +32,6 @@ init('<image> component', (Vue, helper) => { expect(el.tagName.toLowerCase()).to.be.equal('figure') expect(utils.toArray(el.classList)).to.include.members(['weex-image', 'weex-el']) expect(el.getAttribute('weex-type')).to.be.equal('image') - expect(el.innerHTML).to.be.equal('') }) it('<image> with src', () => { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/test/render/vue/components/switch.js ---------------------------------------------------------------------- diff --git a/html5/test/render/vue/components/switch.js b/html5/test/render/vue/components/switch.js index 123bb8e..f7c2ab8 100644 --- a/html5/test/render/vue/components/switch.js +++ b/html5/test/render/vue/components/switch.js @@ -30,7 +30,6 @@ init('<switch> component', (Vue, helper) => { const vm = compile(`<switch></switch>`) expect(vm.$el.tagName.toLowerCase()).to.be.equal('span') expect(utils.toArray(vm.$el.classList)).to.include('weex-switch') - expect(vm.$el.innerHTML).to.be.equal('<small class="weex-switch-inner"></small>') }) it('disabled <switch>', () => { @@ -46,8 +45,8 @@ init('<switch> component', (Vue, helper) => { const vmA = compile(`<switch></switch>`) const vmB = compile(`<switch disabled="false"></switch>`) - expect(vmA.$el.className).to.be.equal('weex-switch') - expect(vmB.$el.className).to.be.equal('weex-switch') + expect(vmA.$el.className).to.match(/weex-switch/) + expect(vmB.$el.className).to.match(/weex-switch/) }) it('checked <switch>', () => { @@ -82,8 +81,8 @@ init('<switch> component', (Vue, helper) => { const vmA = compile(`<switch></switch>`) const vmB = compile(`<switch checked="false"></switch>`) - expect(vmA.$el.className).to.be.equal('weex-switch') - expect(vmB.$el.className).to.be.equal('weex-switch') + expect(vmA.$el.className).to.match(/weex-switch/) + expect(vmB.$el.className).to.match(/weex-switch/) }) it('disabled & checked <switch>', () => { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/test/render/vue/components/text.js ---------------------------------------------------------------------- diff --git a/html5/test/render/vue/components/text.js b/html5/test/render/vue/components/text.js index e45432b..6428979 100644 --- a/html5/test/render/vue/components/text.js +++ b/html5/test/render/vue/components/text.js @@ -31,7 +31,7 @@ init('<text> component', (Vue, helper) => { const vm = compile(`<text>abc</text>`) expect(vm.$el.tagName.toLowerCase()).to.be.equal('p') - expect(vm.$el.innerHTML).to.be.equal('abc') + expect(vm.$el.textContent).to.be.equal('abc') }) it('empty text component', () => { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/html5/test/render/vue/modules/dom.js ---------------------------------------------------------------------- diff --git a/html5/test/render/vue/modules/dom.js b/html5/test/render/vue/modules/dom.js index 5c8dbc5..1def61e 100644 --- a/html5/test/render/vue/modules/dom.js +++ b/html5/test/render/vue/modules/dom.js @@ -86,6 +86,7 @@ describe('dom module', () => { height: 100 }).height) expect(callback.callCount).to.be.equal(1) + // while node is a viewport message = getComponentRect('viewport', callback) expect(message.result).to.be.true http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/package.json ---------------------------------------------------------------------- diff --git a/package.json b/package.json index 1c7024d..766310d 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "subversion": { "browser": "0.5.0", "framework": "0.22.4", - "vue-render": "0.12.17", + "vue-render": "0.12.24", "transformer": ">=0.1.5 <0.5" }, "description": "A framework for building Mobile cross-platform UI", http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/packages/weex-vue-render/README.md ---------------------------------------------------------------------- diff --git a/packages/weex-vue-render/README.md b/packages/weex-vue-render/README.md index ad7c61f..6af6a37 100644 --- a/packages/weex-vue-render/README.md +++ b/packages/weex-vue-render/README.md @@ -176,9 +176,27 @@ vue: { * not to prevent default behaviour of click events unless the click-binding element is inside a `<a>` link, or it is a `<a>` link and has a `prevent` attribute on it. -#### 0.12.17 +#### 0.12.18 * support offset appear. +* fix lazyload failing when frequently updating images' src. Typical scenario is skeleton replacing. + +#### 0.12.20 + +* fix scrollToElement on latest chrome. + +#### 0.12.21 + +* fix `stream.fetch` for adding wrong suffix to the request url. + +#### 0.12.22 + +* fix image lazyloading. + +#### 0.12.23 + +* add try catch to accessing localStorage. +* support image sprite. ## component -> dom map http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cd84c579/packages/weex-vue-render/package.json ---------------------------------------------------------------------- diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json index c60617b..e54f49b 100644 --- a/packages/weex-vue-render/package.json +++ b/packages/weex-vue-render/package.json @@ -1,6 +1,6 @@ { "name": "weex-vue-render", - "version": "0.12.17", + "version": "0.12.24", "description": "Weex built-in components for Vue 2.x.", "license": "Apache-2.0", "main": "dist/index.common.js",