You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by gu...@apache.org on 2017/10/31 14:55:11 UTC
[1/2] incubator-weex git commit: * [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 laz
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 <te...@gmail.com>
Authored: Tue Sep 26 15:56:51 2017 +0800
Committer: MrRaindrop <te...@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",
[2/2] incubator-weex git commit: * [html5] bugfix
Posted by gu...@apache.org.
* [html5] bugfix
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/672800f5
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/672800f5
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/672800f5
Branch: refs/heads/release-0.16
Commit: 672800f51d3eec6650fe575c66cbd74d06241f37
Parents: 5c3fffc cd84c57
Author: gurisxie <27...@qq.com>
Authored: Tue Oct 31 22:54:23 2017 +0800
Committer: gurisxie <27...@qq.com>
Committed: Tue Oct 31 22:54:56 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/672800f5/html5/render/browser/extend/api/stream.js
----------------------------------------------------------------------