You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/06/28 08:46:19 UTC
[28/37] incubator-weex git commit: [weex-vue-render] add some
features including:
[weex-vue-render] add some features including:
+ [html5] add 'loadmore' event to horizontal scroller.
* [html5] fix slider's autoplay.
+ [html5] release v0.11.51 @notdanger.
* [html5] fix slider auto-play
+ [html5] support pseudo class.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/45677545
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/45677545
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/45677545
Branch: refs/heads/0.15-dev
Commit: 456775451532bba975612e0a8bab08067ced502c
Parents: 06232f2
Author: MrRaindrop <te...@gmail.com>
Authored: Fri Jun 23 14:52:50 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Mon Jun 26 18:00:16 2017 +0800
----------------------------------------------------------------------
html5/render/vue/README.md | 19 +++++++++-
.../render/vue/components/slider/slideMixin.js | 24 +++++++------
html5/render/vue/core/style.js | 31 ++++++++++++----
html5/render/vue/mixins/scrollable.js | 38 ++++++++++++--------
html5/render/vue/utils/style.js | 28 +++++++++++++++
package.json | 2 +-
packages/weex-vue-render/package.json | 2 +-
7 files changed, 108 insertions(+), 36 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/README.md
----------------------------------------------------------------------
diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md
index e2f39d0..f0d3ba8 100644
--- a/html5/render/vue/README.md
+++ b/html5/render/vue/README.md
@@ -27,7 +27,24 @@ If you perfer cdn way, and use script tag to import a script link, just import i
## use vue-loader to bundle .vue file
-**NOTE: ** after `v0.11.3` there's no need to add `$processStyle` and `autoprefixer` in your vue-loader config anymore. The runtime render will take care of it once for all.
+NOTE: you should inject `$processStyle` to preprocess vnode's style in vue-loader's postTransformNode hook.
+
+```javascript
+vue: {
+ /**
+ * important! should use postTransformNode to add $processStyle for
+ * inline style prefixing.
+ */
+ compilerModules: [
+ {
+ postTransformNode: el => {
+ el.staticStyle = `$processStyle(${el.staticStyle})`
+ el.styleBinding = `$processStyle(${el.styleBinding})`
+ }
+ }
+ ],
+}
+```
## component -> dom map
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/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 da2c848..73960e5 100644
--- a/html5/render/vue/components/slider/slideMixin.js
+++ b/html5/render/vue/components/slider/slideMixin.js
@@ -48,7 +48,6 @@ export default {
},
updated () {
- this._startAutoPlay()
const children = this.$children
const len = children && children.length
if (children && len > 0) {
@@ -69,7 +68,6 @@ export default {
mounted () {
this._getWrapperSize()
- this._startAutoPlay()
this._slideTo(this.currentIndex)
fireLazyload(this.$el, true)
},
@@ -79,8 +77,8 @@ export default {
const wrapper = this.$refs.wrapper
if (wrapper) {
const rect = wrapper.getBoundingClientRect()
- this.wrapperWidth = rect.width
- this.wrapperHeight = rect.height
+ this._wrapperWidth = rect.width
+ this._wrapperHeight = rect.height
}
},
@@ -198,7 +196,7 @@ export default {
const match = translate && translate.match(/translate[^(]+\(([+-\d.]+)/)
const innerX = match && match[1] || 0
const dist = innerX - this.innerOffset
- this.innerOffset += step * this.wrapperWidth
+ this.innerOffset += step * this._wrapperWidth
// transform the whole slides group.
inner.style.webkitTransition = `-webkit-transform ${TRANSITION_TIME / 1000}s ease-in-out`
inner.style.transition = `transform ${TRANSITION_TIME / 1000}s ease-in-out`
@@ -341,7 +339,7 @@ export default {
}
node._inShow = true
- const translateX = index * this.wrapperWidth - this.innerOffset
+ const translateX = index * this._wrapperWidth - this.innerOffset
addTransform(node, {
translate: `translate3d(${translateX}px, 0px, 0px)`
})
@@ -439,7 +437,7 @@ export default {
origNode._inShow = true
const transObj = getTransformObj(clone)
transObj.translate = transObj.translate.replace(/[+-\d.]+[pw]x/, ($0) => {
- return pos * this.wrapperWidth - this.innerOffset + 'px'
+ return pos * this._wrapperWidth - this.innerOffset + 'px'
})
this._copyStyle(clone, origNode, styleProps, transObj)
this._removeClone(clone)
@@ -456,6 +454,10 @@ export default {
this.currentIndex = 0
return
}
+
+ // clear autoPlay timer (and restart after updated hook).
+ this._startAutoPlay()
+
/**
* clean nodes. replace current node with non-cloned node.
* set current index to the new index.
@@ -505,7 +507,7 @@ export default {
}
// calculate position offsets according to neighbor scales.
if (Math.abs(i) === 1) {
- const dist = ((this.wrapperWidth - this._neighborWidth * this.neighborScale) / 2
+ const dist = ((this._wrapperWidth - this._neighborWidth * this.neighborScale) / 2
+ this.neighborSpace * weex.config.env.scale) / this.neighborScale
translateX = -i * dist
}
@@ -582,7 +584,7 @@ export default {
this._clearNodesOffset()
}
this._emitScrollEvent('scroll', {
- offsetXRatio: offsetX / this.wrapperWidth
+ offsetXRatio: offsetX / this._wrapperWidth
})
inner.style.transform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)`
inner.style.webkitTransform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)`
@@ -602,7 +604,7 @@ export default {
if (inner) {
this._nodesOffsetCleared = false
// TODO: test the velocity if it's less than 0.2.
- const reset = Math.abs(offsetX / this.wrapperWidth) < 0.2
+ const reset = Math.abs(offsetX / this._wrapperWidth) < 0.2
const direction = offsetX > 0 ? 1 : -1
const newIndex = reset ? this.currentIndex : (this.currentIndex - direction)
this._slideTo(newIndex, true)
@@ -623,7 +625,7 @@ export default {
const throttleTime = THROTTLE_SCROLL_TIME
const cnt = parseInt(TRANSITION_TIME / throttleTime) - 1
const sign = offset > 0 ? 1 : -1
- const r = Math.abs(offset / this.wrapperWidth)
+ const r = Math.abs(offset / this._wrapperWidth)
const throttledScroll = () => {
if (++i > cnt) {
return callback && callback.call(this)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/core/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js
index 063c1e5..7230b74 100644
--- a/html5/render/vue/core/style.js
+++ b/html5/render/vue/core/style.js
@@ -26,11 +26,13 @@ import {
autoPrefix,
isArray,
getParentScroller,
- supportSticky
+ supportSticky,
+ appendCss
} from '../utils'
import { tagBegin, tagEnd } from '../utils/perf'
/* istanbul ignore next */
+let pseudoId = 0
/**
* get scoped class style map from stylesheets in <head>.
*/
@@ -55,6 +57,9 @@ export function getHeadStyleMap () {
*/
return pre
}
+ if (styleSheet.ownerNode.id.match(/weex-pseudo-\d+/)) {
+ return pre
+ }
const strArr = trimComment(styleSheet.ownerNode.textContent.trim()).split(/}/)
const len = strArr.length
const rules = []
@@ -65,7 +70,8 @@ export function getHeadStyleMap () {
}
/**
* should match these cases:
- * .a[data-v-xxx] { color: red }
+ * .a[data-v-xxx] { color: red; }
+ * .a[data-v-xxx]:active { color: green; }
* .a[data-v-xxx], .b[data-v-xxx] { color: red; }
*
* should not match these cases:
@@ -92,6 +98,10 @@ export function getHeadStyleMap () {
}
Array.from(rules).forEach(rule => {
const selector = rule.selectorText || ''
+ let isPseudo = false
+ if (selector.match(/:(?:active|focus|enabled|disabled)/)) {
+ isPseudo = true
+ }
const styleObj = trimComment(rule.cssText).split(';')
.reduce((styleObj, statement) => {
statement = statement.trim()
@@ -101,12 +111,19 @@ export function getHeadStyleMap () {
}
return styleObj
}, {})
- const res = pre[selector]
+ if (isPseudo) {
+ const txt = Object.keys(styleObj).reduce(function (pre, cur) {
+ return pre + `${cur}:${styleObj[cur]}!important;`
+ }, '')
+ appendCss(`${selector}{${txt}}`, `weex-pseudo-${pseudoId++}`)
+ }
+ const objMap = !isPseudo ? pre : pre.pseudo
+ const res = objMap[selector]
if (!res) {
- pre[selector] = styleObj
+ objMap[selector] = styleObj
}
else {
- extend(pre[selector], styleObj)
+ extend(objMap[selector], styleObj)
}
})
/**
@@ -116,7 +133,7 @@ export function getHeadStyleMap () {
*/
needToRemoveStyleSheetNodes.push(styleSheet.ownerNode)
return pre
- }, {})
+ }, { pseudo: {}})
if (!window._no_remove_style_sheets) {
needToRemoveStyleSheetNodes.forEach(function (node) {
node.parentNode.removeChild(node)
@@ -301,7 +318,7 @@ export function processSticky (context) {
return
}
// current only support list and vertical scroller.
- if (container.scrollDirection === 'horizontal') {
+ if (context.scrollDirection === 'horizontal') {
return
}
const stickyChildren = context._stickyChildren
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/mixins/scrollable.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/scrollable.js b/html5/render/vue/mixins/scrollable.js
index 011c8e0..4f7b03c 100644
--- a/html5/render/vue/mixins/scrollable.js
+++ b/html5/render/vue/mixins/scrollable.js
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { getThrottleLazyload, throttle } from '../utils'
+import { getThrottleLazyload, throttle, getRangeWidth } from '../utils'
import { processSticky } from '../core'
const DEFAULT_OFFSET_ACCURACY = 10
@@ -97,8 +97,20 @@ export default {
const wrapper = this.$refs.wrapper
if (wrapper) {
const rect = wrapper.getBoundingClientRect()
- this.wrapperWidth = rect.width
- this.wrapperHeight = rect.height
+ this._wrapperWidth = rect.width
+ this._wrapperHeight = rect.height
+ }
+ const inner = this.$refs.inner
+ const children = inner && inner.children
+ if (inner) {
+ const rect = inner.getBoundingClientRect()
+ this._innerWidth = rect.width
+ this._innerHeight = rect.height
+ }
+ // inner width is always the viewport width somehow in horizontal
+ // scoller, therefore the inner width should be reclaculated.
+ if (this.scrollDirection === 'horizontal' && children) {
+ this._innerWidth = getRangeWidth(inner)
}
},
@@ -115,19 +127,13 @@ export default {
// fire loadmore event.
const inner = this.$refs.inner
if (inner) {
- const innerRect = inner.getBoundingClientRect()
const innerLength = this.scrollDirection === 'horizontal'
- ? innerRect.width
- : innerRect.height
- // hscroller not support loadmore event yet.
- if (this.scrollDirection === 'horizontal') {
- return
- }
+ ? this._innerWidth
+ : this._innerHeight
if (!this._innerLength) {
this._innerLength = innerLength
}
if (this._innerLength !== innerLength) {
- console.log(this._innerLength, innerLength)
this._innerLength = innerLength
this._loadmoreReset = true
}
@@ -149,13 +155,15 @@ export default {
const offset = parseInt(this.loadmoreoffset) * weex.config.env.scale
if (wrapper && inner) {
- const innerRect = inner.getBoundingClientRect()
- const wrapperRect = wrapper.getBoundingClientRect()
+ // const innerRect = inner.getBoundingClientRect()
+ // const wrapperRect = wrapper.getBoundingClientRect()
const key = this.scrollDirection === 'horizontal'
? 'width'
: 'height'
- const innerLength = innerRect[key]
- const wrapperLength = wrapperRect[key]
+ // const innerLength = innerRect[key]
+ // const wrapperLength = wrapperRect[key]
+ const innerLength = this[`_inner${key[0].toUpperCase()}${key.substr(1)}`]
+ const wrapperLength = this[`_wrapper${key[0].toUpperCase()}${key.substr(1)}`]
const scrollOffset = this.scrollDirection === 'horizontal'
? wrapper.scrollLeft
: wrapper.scrollTop
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index a9f7ef1..0d74721 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -303,3 +303,31 @@ export function getStyleSheetById (id?: string) {
}
}
}
+
+function getChildrenTotalWidth (children) {
+ const len = children.length
+ let total = 0
+ for (let i = 0; i < len; i++) {
+ total += children[i].getBoundingClientRect().width
+ }
+ return total
+}
+/**
+ * get total content width of the element.
+ * @param {HTMLElement} elm
+ */
+export function getRangeWidth (elm: HTMLElement) {
+ const children = elm.children
+ if (!children) {
+ return elm.getBoundingClientRect().width
+ }
+ if (!Range) {
+ return getChildrenTotalWidth(children)
+ }
+ const range = document.createRange()
+ if (!range.selectNodeContents) {
+ return getChildrenTotalWidth(children)
+ }
+ range.selectNodeContents(elm)
+ return range.getBoundingClientRect().width
+}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 381190f..0a9e951 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"subversion": {
"browser": "0.5.0",
"framework": "0.20.6",
- "vue-render": "0.11.50",
+ "vue-render": "0.11.51",
"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/45677545/packages/weex-vue-render/package.json
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json
index e97525f..80d6443 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.11.50",
+ "version": "0.11.51",
"description": "Weex built-in components for Vue 2.x.",
"license": "Apache-2.0",
"main": "dist/index.js",