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/06/04 06:05:03 UTC
[01/20] incubator-weex git commit: * [html5] fix conflicts.
Repository: incubator-weex
Updated Branches:
refs/heads/0.13-dev d2f4cfe76 -> 404f3cc14
* [html5] fix conflicts.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/84ad6853
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/84ad6853
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/84ad6853
Branch: refs/heads/0.13-dev
Commit: 84ad6853d6e573732759f28fa5a66658cec943a8
Parents: 7a6b69a
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 11:20:45 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 11:20:45 2017 +0800
----------------------------------------------------------------------
examples/vue/hello.vue | 59 ++-
html5/render/vue/components/slider/index.js | 137 +-----
.../render/vue/components/slider/slideMixin.js | 489 +++++++++++++++++--
.../vue/components/slider/slider-neighbor.css | 19 -
.../vue/components/slider/slider-neighbor.js | 119 +----
html5/render/vue/components/slider/slider.css | 30 ++
html5/render/vue/utils/style.js | 85 +++-
7 files changed, 618 insertions(+), 320 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/84ad6853/examples/vue/hello.vue
----------------------------------------------------------------------
diff --git a/examples/vue/hello.vue b/examples/vue/hello.vue
index 462ccd9..020181e 100644
--- a/examples/vue/hello.vue
+++ b/examples/vue/hello.vue
@@ -1,5 +1,58 @@
<template>
- <div>
- <text style="font-size: 100px;">Hello World.</text>
- </div>
+ <div class="root">
+ <div class="anim" ref="anim">
+ <image class="award-box" ref="awardBox" src="https://img.alicdn.com/tps/TB1qsoYPpXXXXXcaXXXXXXXXXXX-718-777.png"></image>
+ </div>
+ </div>
</template>
+<style scoped>
+ .root {
+ /*overflow: visible;*/
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
+ background-color: rgba(0, 0, 0, 0.8);
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .anim {
+ /*overflow: visible;*/
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .award-box {
+ position: absolute;
+ top: 300px;
+ left: 125px;
+ width: 498px;
+ height: 540px;
+ }
+</style>
+<script>
+ const animation = weex.requireModule('animation');
+ module.exports = {
+ mounted: function () {
+ var testEl = this.$refs.awardBox;
+ animation.transition(testEl, {
+ styles: {
+ transform: 'translate(250px, 100px)',
+ transformOrigin: 'center center'
+ },
+ duration: 800, //ms
+ timingFunction: 'ease',
+ delay: 500 //ms
+ }, null);
+ }
+ }
+</script>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/84ad6853/html5/render/vue/components/slider/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/index.js b/html5/render/vue/components/slider/index.js
index 740a8ee..f37be08 100644
--- a/html5/render/vue/components/slider/index.js
+++ b/html5/render/vue/components/slider/index.js
@@ -17,36 +17,9 @@
* under the License.
*/
// import { validateStyles } from '../../validator'
-import { extractComponentStyle, createEventMap } from '../../core'
-import { throttle, bind, extend, fireLazyload } from '../../utils'
// import indicator from './indicator'
import slideMixin from './slideMixin'
-const _css = `
-.weex-slider-wrapper {
- overflow: hidden;
-}
-
-.weex-slider-inner {
- position: absolute;
- height: 100%;
- top: 0;
- left: 0;
-}
-
-.weex-slider-cell {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: 0;
- padding: 0;
- height: 100%;
- overflow: hidden;
-}
-`
-
export default {
mixins: [slideMixin],
props: {
@@ -70,7 +43,7 @@ export default {
watch: {
index () {
- this.currentIndex = this.normalizeIndex(this.index)
+ this.currentIndex = this._normalizeIndex(this.index)
}
},
@@ -81,84 +54,8 @@ export default {
}
},
- methods: {
- computeWrapperSize () {
- const wrapper = this.$refs.wrapper
- if (wrapper) {
- const rect = wrapper.getBoundingClientRect()
- this.wrapperWidth = rect.width
- this.wrapperHeight = rect.height
- }
- },
-
- updateLayout () {
- this.computeWrapperSize()
- const inner = this.$refs.inner
- if (inner) {
- inner.style.width = this.wrapperWidth * this.frameCount + 'px'
- }
- },
-
- formatChildren (createElement) {
- const children = this.$slots.default || []
- let indicatorVnode
- const cells = children.filter(vnode => {
- if (!vnode.tag) return false
- if (vnode.componentOptions && vnode.componentOptions.tag === 'indicator') {
- indicatorVnode = vnode
- return false
- }
- return true
- }).map(vnode => {
- return createElement('li', {
- ref: 'cells',
- staticClass: 'weex-slider-cell'
- }, [vnode])
- })
- if (indicatorVnode) {
- indicatorVnode.data.attrs = indicatorVnode.data.attrs || {}
- indicatorVnode.data.attrs.count = cells.length
- indicatorVnode.data.attrs.active = this.currentIndex
- this._indicator = indicatorVnode
- }
- return cells
- }
- },
-
- created () {
+ beforeCreate () {
this.weexType = 'slider'
- this.innerOffset = 0
- this._indicator = null
- this.$nextTick(() => {
- this.updateLayout()
- })
- },
-
- beforeUpdate () {
- this.updateLayout()
- this.reorder()
- },
-
- mounted () {
- if (this.autoPlay && this.autoPlay !== 'false') {
- const interval = Number(this.interval)
- this._lastSlideTime = Date.now()
-
- const autoPlayFn = bind(function () {
- clearTimeout(this._autoPlayTimer)
- const now = Date.now()
- let nextTick = interval - now + this._lastSlideTime
- nextTick = nextTick > 100 ? nextTick : interval
-
- this.next()
- this._lastSlideTime = now
- this._autoPlayTimer = setTimeout(autoPlayFn, nextTick)
- }, this)
-
- this._autoPlayTimer = setTimeout(autoPlayFn, interval)
- }
- this.reorder()
- fireLazyload(this.$el, true)
},
render (createElement) {
@@ -166,32 +63,6 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('slider', this.$vnode.data && this.$vnode.data.staticStyle)
// }
- this._cells = this.formatChildren(createElement)
- this.frameCount = this._cells.length
-
- this._renderHook()
- return createElement(
- 'nav',
- {
- ref: 'wrapper',
- attrs: { 'weex-type': 'slider' },
- staticClass: 'weex-slider weex-slider-wrapper weex-ct',
- on: extend(createEventMap(this, ['scroll', 'scrollstart', 'scrollend']), {
- touchstart: this.handleTouchStart,
- touchmove: throttle(bind(this.handleTouchMove, this), 25),
- touchend: this.handleTouchEnd
- }),
- staticStyle: extractComponentStyle(this)
- },
- [
- createElement('ul', {
- ref: 'inner',
- staticClass: 'weex-slider-inner weex-ct'
- }, this._cells),
- this._indicator
- ]
- )
- },
- // export default css styles for this component.
- _css
+ return this._renderSlides(createElement)
+ }
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/84ad6853/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 d85cf9b..7938a10 100644
--- a/html5/render/vue/components/slider/slideMixin.js
+++ b/html5/render/vue/components/slider/slideMixin.js
@@ -16,16 +16,41 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { createEvent/*, nextFrame*/, fireLazyload, addTransform } from '../../utils'
-
-const TRANSITION_TIME = 200
+import './slider.css'
+import {
+ throttle,
+ extend,
+ createEvent,
+ /* nextFrame, */
+ fireLazyload,
+ addTransform,
+ copyTransform,
+ bind
+} from '../../utils'
+import { extractComponentStyle, createEventMap } from '../../core'
+// const TRANSITION_TIME = 200
+const TRANSITION_TIME = 1000
const MAIN_SLIDE_OPACITY = 1
// trigger scroll event frequency.
// const scrollDam = 16
export default {
+ created () {
+ this._clones = []
+ this.innerOffset = 0
+ this._indicator = null
+ this.$nextTick(() => {
+ this._updateLayout()
+ })
+ },
+
+ beforeUpdate () {
+ this._updateLayout()
+ // this._reorder()
+ },
+
updated () {
const children = this.$children
const len = children && children.length
@@ -39,39 +64,180 @@ export default {
fireLazyload(this.$el, true)
},
+ mounted () {
+ this._updateLayout()
+ this._startAutoPlay()
+ this._slideTo(this.currentIndex)
+ // this._reorder()
+ fireLazyload(this.$el, true)
+ },
+
methods: {
+ _computeWrapperSize () {
+ const wrapper = this.$refs.wrapper
+ if (wrapper) {
+ const rect = wrapper.getBoundingClientRect()
+ this.wrapperWidth = rect.width
+ this.wrapperHeight = rect.height
+ }
+ },
+
+ _updateLayout () {
+ this._computeWrapperSize()
+ // const inner = this.$refs.inner
+ // if (inner) {
+ // inner.style.width = this.wrapperWidth * this.frameCount + 'px'
+ // }
+ },
+
+ _formatChildren (createElement) {
+ const children = this.$slots.default || []
+ let indicatorVnode
+ const cells = children.filter(vnode => {
+ if (!vnode.tag) return false
+ if (vnode.componentOptions && vnode.componentOptions.tag === 'indicator') {
+ indicatorVnode = vnode
+ return false
+ }
+ return true
+ }).map(vnode => {
+ return createElement('li', {
+ ref: 'cells',
+ staticClass: 'weex-slider-cell weex-ct'
+ }, [vnode])
+ })
+ if (indicatorVnode) {
+ indicatorVnode.data.attrs = indicatorVnode.data.attrs || {}
+ indicatorVnode.data.attrs.count = cells.length
+ indicatorVnode.data.attrs.active = this.currentIndex
+ this._indicator = indicatorVnode
+ }
+ return cells
+ },
+
+ _renderSlides (createElement) {
+ this._cells = this._formatChildren(createElement)
+ this.frameCount = this._cells.length
+ this._renderHook()
+ return createElement(
+ 'nav',
+ {
+ 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
+ }),
+ staticClass: 'weex-slider weex-slider-wrapper weex-ct',
+ staticStyle: extractComponentStyle(this)
+ },
+ [
+ createElement('ul', {
+ ref: 'inner',
+ staticClass: 'weex-slider-inner weex-ct'
+ }, this._cells),
+ this._indicator
+ ]
+ )
+ },
+
// get standard index
- normalizeIndex (index) {
+ _normalizeIndex (index) {
const newIndex = (index + this.frameCount) % this.frameCount
return Math.min(Math.max(newIndex, 0), this.frameCount - 1)
},
- slideTo (index) {
+ _startAutoPlay () {
+ if (!this.autoPlay || this.autoPlay === 'false') {
+ return
+ }
+ if (this._autoPlayTimer) {
+ clearTimeout(this._autoPlayTimer)
+ this._autoPlayTimer = null
+ }
+ const interval = parseInt(this.interval)
+ this._lastSlideTime = Date.now()
+
+ const autoPlayFn = bind(function () {
+ clearTimeout(this._autoPlayTimer)
+ const now = Date.now()
+ let nextTick = this._lastSlideTime + interval - now
+ nextTick = nextTick > 100 ? nextTick : interval
+ this._next()
+ this._lastSlideTime = now
+ this._autoPlayTimer = setTimeout(autoPlayFn, nextTick)
+ }, this)
+
+ this._autoPlayTimer = setTimeout(autoPlayFn, interval)
+ },
+
+ _stopAutoPlay () {
+ if (this._autoPlayTimer) {
+ clearTimeout(this._autoPlayTimer)
+ this._autoPlayTimer = null
+ }
+ },
+
+ _slideTo (index) {
if (!this.infinite || this.infinite === 'false') {
- if (index === -1 || index > (this._cells.length - 1)) {
- this.slideTo(this.currentIndex)
+ if (index === -1 || index > (this.frameCount - 1)) {
+ this._slideTo(this.currentIndex)
return
}
}
- const newIndex = this.normalizeIndex(index)
+ const newIndex = this._normalizeIndex(index)
const inner = this.$refs.inner
- const step = this._cells.length <= 1 ? 0 : this.currentIndex - index
+ let step = this._step = this.frameCount <= 1 ? 0 : this.currentIndex - index
+ // newIndex: 0 -> 1, sign: -1; newIndex: 1 -> 0, sign: 1.
const sign = step === 0 ? 0 : step > 0 ? 1 : -1
- this.innerOffset += sign * this.wrapperWidth
+
+ if (Math.abs(step) > 1) {
+ if (process.env.NODE_ENV === 'development') {
+ console.warn('[vue-render] slider step should be no more than 1.')
+ }
+ step = sign
+ }
+
if (inner) {
- // const match = (inner.style.transform || inner.style.webkitTransform).match(/(\d+)px/)
- // const currentOffset = parseFloat(match[1])
- // TODO: will-change | set styles together
- inner.style.webkitTransition = `-webkit-transform .2s ease-in-out`
- inner.style.transition = `transform .2s ease-in-out`
- inner.style.webkitTransform = `translate3d(${this.innerOffset}px, 0, 0)`
- inner.style.transform = `translate3d(${this.innerOffset}px, 0, 0)`
+ this._prepareNodes()
+
+ this.innerOffset += sign * 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`
+ // inner.style.webkitTransform = `translate3d(${this.innerOffset}px, 0, 0)`
+ // inner.style.transform = `translate3d(${this.innerOffset}px, 0, 0)`
+
+ this._loopShowNodes(step)
+
+ if (this.isNeighbor) {
+ // set neighbors
+ setTimeout(this._setNeighbors.bind(this), 0)
+ }
+
+ // current arrange index changed since the slides position begin to change.
+ // this._currentIndexInArrangeArray = this._currentIndexInArrangeArray - step
+
setTimeout(() => {
- inner.style.webkitTransition = ''
- inner.style.transition = ''
+ // inner.style.webkitTransition = ''
+ // inner.style.transition = ''
+ for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
+ const node = this._showNodes[i]
+ if (!node) { continue }
+ const elm = node.firstElementChild
+ elm.style.webkitTransition = ''
+ elm.style.transition = ''
+ }
+
+ // this._loopShowNodes(step)
+
+ // clean cloned nodes and rearrange slide cells.
+ this._rearrangeNodes(newIndex)
}, TRANSITION_TIME)
}
+
// TODO: emit scroll event.
// nextFrame()
@@ -79,12 +245,262 @@ export default {
// replace $el with { attr, style } is a legacy usage. Is it necessary to
// do this ? Or just tell devers to use inline functions to access attrs ?
this.$emit('change', createEvent(this.$el, 'change', {
- index: this.currentIndex
+ index: newIndex
}))
- setTimeout(() => { this.reorder(newIndex) }, TRANSITION_TIME)
+ // setTimeout(() => { this._reorder(newIndex) }, TRANSITION_TIME)
}
},
- order () {
+
+ _loopShowNodes (step) {
+ const sign = step > 0 ? 1 : -1
+ let val = Math.abs(step)
+ while (val--) {
+ let i = sign < 0 ? this._showStartIdx : this._showEndIdx
+ const end = sign < 0 ? this._showEndIdx : this._showStartIdx
+ for (; i !== end - sign; i -= sign) {
+ const nextIdx = i + sign
+ this._positionNode(this._showNodes[i], nextIdx)
+ // this._showNodes[nextIdx] = this._showNodes[i]
+ // this._showNodes[nextIdx]._showIndex = nextIdx
+ // this._positionNode(this._showNodes[nextIdx], nextIdx)
+ }
+ }
+ const begin = sign < 0 ? this._showEndIdx : this._showStartIdx
+ const end = begin - step
+ for (let i = begin; i !== end; i -= sign) {
+ delete this._showNodes[i]
+ }
+ this._showStartIdx += step
+ this._showEndIdx += step
+ },
+
+ _prepareNodes () {
+ // test if the next slide towards the direction exists.
+ // e.g. currentIndex 0 -> 1: should prepare 4 slides: -1, 0, 1, 2
+ // if not, translate a node to here, or just clone it.
+ const step = this._step
+ if (!this._inited) {
+ this._initNodes()
+ this._inited = true
+ this._showNodes = {}
+ // // prepare nodes for the first time.
+ // // just generate the arrangeArray.
+ // for (let i = 0; i < total; i++) {
+ // const node = cells[i].elm
+ // node.index = i
+ // node.style.zIndex = 0
+ // node.style.opacity = 0
+ // node._showIndex = i
+ // }
+ // // this._positionNodes(start, end, cellBeginIndex)
+ }
+
+ const showCount = this._showCount = Math.abs(step) + 3
+
+ this._showStartIdx = step <= 0 ? -1 : 1
+ this._showEndIdx = step <= 0 ? showCount - 2 : 2 - showCount
+ this._positionNodes(this._showStartIdx, this._showEndIdx, step)
+ },
+
+ _initNodes () {
+ const total = this.frameCount
+ const cells = this._cells
+ for (let i = 0; i < total; i++) {
+ const node = cells[i].elm
+ node.index = i
+ node._inShow = false
+ node.style.zIndex = 0
+ node.style.opacity = 0
+ }
+ },
+
+ _positionNodes (begin, end, step) {
+ const cells = this._cells
+ const sign = step <= 0 ? -1 : 1
+ let cellIndex = this.currentIndex + sign
+ for (let i = begin; i !== end - sign; i = i - sign) {
+ const node = cells[this._normalizeIndex(cellIndex)].elm
+ cellIndex = cellIndex - sign
+ this._positionNode(node, i)
+ }
+ },
+
+ /**
+ * index: position index in the showing cells' view.
+ */
+ _positionNode (node, index) {
+ // if (this._showNodes[index]) {
+ // return
+ // }
+ if (node._inShow && this._showNodes[index] !== node) {
+ node = this._getClone(node.index)
+ }
+ else if (node._inShow) {
+ return
+ }
+
+ node._inShow = true
+ // else if (!this._showNodes[index]) {
+ // node = this._getClone(node.index)
+ // }
+ const translateX = index * this.wrapperWidth - this.innerOffset
+ addTransform(node, {
+ translate: `translate3d(${translateX}px, 0px, 0px)`
+ })
+ // node.style.left = (index + this._step) * this.wrapperWidth - this.innerOffset + 'px'
+ // node.style.left = index * this.wrapperWidth + 'px'
+ node.style.zIndex = 99 - Math.abs(index)
+ node.style.opacity = 1
+ node._showIndex = index
+ this._showNodes[index] = node
+ },
+
+ _getClone (index) {
+ let arr = this._clones[index]
+ if (!arr) {
+ this._clones[index] = arr = []
+ }
+ if (arr.length <= 0) {
+ const origNode = this._cells[index].elm
+ const clone = origNode.cloneNode(true)
+ clone._isClone = true
+ clone._inShow = origNode._inShow
+ clone.index = origNode.index
+ clone.style.left = 0
+ clone.style.opacity = 0
+ clone.style.zIndex = 0
+ const ct = this.$refs.inner
+ ct.appendChild(clone)
+ arr.push(clone)
+ }
+ return arr.pop()
+ },
+
+ _removeClone (node) {
+ const idx = node.index
+ this._hideNode(node)
+ const arr = this._clones[idx]
+ arr.push(node)
+ },
+
+ _hideNode (node) {
+ node._inShow = false
+ node.style.opacity = 0
+ node.style.left = 0
+ node.style.zIndex = 0
+ },
+
+ /**
+ * hide nodes from begin to end in showArray.
+ * if it is clone node, just move the clone node to the buffer.
+ */
+ _clearNodes (begin, end) {
+ for (let i = begin; i <= end; i++) {
+ const node = this._showNodes[i]
+ if (node._isClone) {
+ this._removeClone(node)
+ }
+ else if (!node._inShow) {
+ this._hideNode(node)
+ }
+ delete this._showNodes[i]
+ }
+ },
+
+ /**
+ * replace a clone node with the original node if it's not in use.
+ */
+ _replaceClone (clone, pos) {
+ const origNode = this._cells[clone.index].elm
+ if (origNode._inShow) {
+ return
+ }
+ origNode._inShow = true
+ origNode.style.left = clone.style.left
+ origNode.style.opacity = clone.style.opacity
+ origNode.style.zIndex = clone.style.zIndex
+ copyTransform(clone, origNode)
+ origNode.firstElementChild.style.left = clone.firstElementChild.style.left
+ this._removeClone(clone)
+ delete this._showNodes[clone._showIndex]
+ this._showNodes[pos] = origNode
+ },
+
+ _rearrangeNodes (newIndex) {
+ /**
+ * clean nodes. replace current node with non-cloned node.
+ * set current index to the new index.
+ */
+ const shows = this._showNodes
+
+ for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
+ shows[i]._inShow = false
+ }
+ for (let i = -1; i <= 1; i++) {
+ const node = shows[i]
+ if (!node._isClone) {
+ node._inShow = true
+ }
+ else {
+ this._replaceClone(node, i)
+ }
+ }
+
+ this._clearNodes(this._showStartIdx, -2)
+ this._clearNodes(2, this._showEndIdx)
+
+ // const curNode = shows[0]
+ // if (curNode._isClone) {
+ // // replace this cloned node with the original node.
+ // const idx = curNode.index
+ // for (let i = 0; i < nodesLen; i++) {
+ // if (nodes[i].index === idx) {
+ // break
+ // }
+ // }
+ // this._replaceCloneNode(curNode, i)
+ // }
+
+ // set current index to the new index.
+ this.currentIndex = newIndex
+ },
+
+ /**
+ * according to the attrs: neighborScale, neighborAlpha, neighborSpace.
+ * 1. apply the main cell transform effects.
+ * 2. set the previous cell and the next cell's positon, scale and alpha.
+ * 3. set other cells' scale and alpha.
+ */
+ _setNeighbors () {
+ // const curIdx = this._currentIndexInArrangeArray
+ // const step = this._step
+ // const newBegin = -1 - step
+
+ for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
+ const elm = this._showNodes[i].firstElementChild
+ elm.style.webkitTransition = `all ${TRANSITION_TIME / 1000}s ease`
+ elm.style.transition = `all ${TRANSITION_TIME / 1000}s ease`
+ const transObj = {
+ scale: `scale(${i === 0 ? this.currentItemScale : this.neighborScale})`
+ }
+ addTransform(elm, transObj)
+ if (!this._neighborWidth) {
+ this._neighborWidth = parseFloat(elm.style.width) || elm.getBoundingClientRect().width
+ }
+ // calculate position offsets according to neighbor scales.
+ if (Math.abs(i) === 1) {
+ const dist = (this.wrapperWidth - this._neighborWidth * this.neighborScale) / 2
+ + this.neighborSpace * weex.config.env.scale
+ elm.style.left = `${-i * dist}px`
+ }
+ // clear position offsets.
+ else {
+ elm.style.left = ''
+ }
+ }
+ },
+
+ _order () {
this.$nextTick(() => {
for (let i = 1, l = this._cells.length; i < l; i++) {
const nextElm = this._cells[i].elm
@@ -92,10 +508,11 @@ export default {
nextElm.style.webkitTransform = `translate3d(${nextOffset}px, 0, 0)`
nextElm.style.transform = `translate3d(${nextOffset}px, 0, 0)`
}
- // this.reorder()
+ // this._reorder()
})
},
- reorder (newIndex) {
+
+ _reorder (newIndex) {
if (!newIndex && newIndex !== 0) {
newIndex = this.currentIndex
}
@@ -159,12 +576,12 @@ export default {
return
}
if (!this.infinite || this.infinite === 'false') {
- this.order()
+ this._order()
return
}
const lastPrev = this._prevElm
- const prevIndex = this.normalizeIndex(newIndex - 1)
- const nextIndex = this.normalizeIndex(newIndex + 1)
+ const prevIndex = this._normalizeIndex(newIndex - 1)
+ const nextIndex = this._normalizeIndex(newIndex + 1)
let prevElm = this._prevElm = this._cells[prevIndex].elm
const nextElm = this._cells[nextIndex].elm
const currentElm = this._cells[newIndex].elm
@@ -204,17 +621,18 @@ export default {
})
},
- next () {
- this.slideTo(this.currentIndex + 1)
+ _next () {
+ this._slideTo(this.currentIndex + 1)
},
- prev () {
- this.slideTo(this.currentIndex - 1)
+ _prev () {
+ this._slideTo(this.currentIndex - 1)
},
- handleTouchStart (event) {
+ _handleTouchStart (event) {
// event.stopPropagation()
const touch = event.changedTouches[0]
+ this._stopAutoPlay()
this._touchParams = {
originalTransform: this.$refs.inner.style.webkitTransform || this.$refs.inner.style.transform,
startTouchEvent: touch,
@@ -224,7 +642,7 @@ export default {
}
},
- handleTouchMove (event) {
+ _handleTouchMove (event) {
// event.stopPropagation()
const tp = this._touchParams
if (!tp) { return }
@@ -258,8 +676,9 @@ export default {
}
},
- handleTouchEnd (event) {
+ _handleTouchEnd (event) {
// event.stopPropagation()
+ this._startAutoPlay()
const tp = this._touchParams
if (!tp) { return }
const isV = tp.isVertical
@@ -274,7 +693,7 @@ export default {
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)
+ this._slideTo(newIndex)
}
delete this._touchParams
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/84ad6853/html5/render/vue/components/slider/slider-neighbor.css
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/slider-neighbor.css b/html5/render/vue/components/slider/slider-neighbor.css
deleted file mode 100644
index 9bbdb36..0000000
--- a/html5/render/vue/components/slider/slider-neighbor.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.weex-slider > .weex-slider-inner {
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
-}
-
-.weex-neighbor-item {
- position: absolute !important;
- -webkit-box-align: center;
- -webkit-align-items: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
-}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/84ad6853/html5/render/vue/components/slider/slider-neighbor.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/slider-neighbor.js b/html5/render/vue/components/slider/slider-neighbor.js
index c576ea7..07ec2a7 100644
--- a/html5/render/vue/components/slider/slider-neighbor.js
+++ b/html5/render/vue/components/slider/slider-neighbor.js
@@ -16,18 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
-import './slider-neighbor.css'
-import { extractComponentStyle, createEventMap } from '../../core'
-import { throttle, bind, extend, fireLazyload } from '../../utils'
-import indicator from './indicator'
import slideMixin from './slideMixin'
-const DEFAULT_NEIGHBOR_SPACE = 25
+const DEFAULT_MAIN_SLIDE_SCALE = 0.9
+const DEFAULT_NEIGHBOR_SPACE = 20
const DEFAULT_NEIGHBOR_ALPHA = 0.6
const DEFAULT_NEIGHBOR_SCALE = 0.8
const DEFAULT_CURRENT_ITEM_SCALE = 0.9
-let id = 0
export default {
mixins: [slideMixin],
props: {
@@ -77,13 +73,13 @@ export default {
val = parseFloat(val)
return !isNaN(val) && val >= 0 && val <= 1
},
- default: DEFAULT_CURRENT_ITEM_SCALE
+ default: DEFAULT_MAIN_SLIDE_SCALE
}
},
watch: {
index () {
- this.currentIndex = this.normalizeIndex(this.index)
+ this.currentIndex = this._normalizeIndex(this.index)
}
},
@@ -94,90 +90,9 @@ export default {
}
},
- methods: {
- computeWrapperSize () {
- const wrapper = this.$refs.wrapper
- if (wrapper) {
- const rect = wrapper.getBoundingClientRect()
- this.wrapperWidth = rect.width
- this.wrapperHeight = rect.height
- }
- },
-
- updateLayout () {
- this.computeWrapperSize()
- const inner = this.$refs.inner
- if (inner) {
- inner.style.width = this.wrapperWidth * this.frameCount + 'px'
- }
- },
-
- formatChildren (createElement) {
- const children = this.$slots.default || []
- let indicatorVnode
- const cells = children.filter(vnode => {
- if (!vnode.tag) return false
- if (vnode.componentOptions && vnode.componentOptions.tag === 'indicator') {
- indicatorVnode = vnode
- return false
- }
- return true
- }).map(vnode => {
- return createElement('li', {
- ref: 'cells',
- staticClass: 'weex-slider-cell weex-ct weex-neighbor-item'
- }, [vnode])
- })
- if (indicatorVnode) {
- indicatorVnode.data.attrs = indicatorVnode.data.attrs || {}
- indicatorVnode.data.attrs.count = cells.length
- indicatorVnode.data.attrs.active = this.currentIndex
- this._indicator = createElement(indicator, indicatorVnode.data)
- }
- return cells
- }
- },
-
beforeCreate () {
this.isNeighbor = true
- },
-
- created () {
this.weexType = 'slider-neighbor'
- this.innerOffset = 0
- this._indicator = null
- this.id = id++
- this.$nextTick(() => {
- this.updateLayout()
- })
- },
-
- beforeUpdate () {
- this.updateLayout()
- this.reorder()
- },
-
- mounted () {
- if (this.autoPlay && this.autoPlay !== 'false') {
- const interval = Number(this.interval)
- this._lastSlideTime = Date.now()
-
- const autoPlayFn = bind(function () {
- clearTimeout(this._autoPlayTimer)
- const now = Date.now()
- let nextTick = interval - now + this._lastSlideTime
- nextTick = nextTick > 100 ? nextTick : interval
-
- this.next()
- this._lastSlideTime = now
- this._autoPlayTimer = setTimeout(autoPlayFn, nextTick)
- }, this)
-
- this._autoPlayTimer = setTimeout(autoPlayFn, interval)
- }
-
- this.reorder()
- fireLazyload(this.$el, true)
},
render (createElement) {
@@ -185,30 +100,6 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('slider', this.$vnode.data && this.$vnode.data.staticStyle)
// }
- this._cells = this.formatChildren(createElement)
- this.frameCount = this._cells.length
-
- this._renderHook()
- return createElement(
- 'nav',
- {
- ref: 'wrapper',
- attrs: { 'weex-type': 'slider-neighbor' },
- on: extend(createEventMap(this, ['scroll', 'scrollstart', 'scrollend']), {
- touchstart: this.handleTouchStart,
- touchmove: throttle(bind(this.handleTouchMove, this), 25),
- touchend: this.handleTouchEnd
- }),
- staticClass: 'weex-slider weex-slider-wrapper weex-ct',
- staticStyle: extractComponentStyle(this)
- },
- [
- createElement('ul', {
- ref: 'inner',
- staticClass: 'weex-slider-inner weex-ct'
- }, this._cells),
- this._indicator
- ]
- )
+ return this._renderSlides(createElement)
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/84ad6853/html5/render/vue/components/slider/slider.css
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/slider.css b/html5/render/vue/components/slider/slider.css
new file mode 100644
index 0000000..dbcb999
--- /dev/null
+++ b/html5/render/vue/components/slider/slider.css
@@ -0,0 +1,30 @@
+.weex-slider-wrapper {
+ overflow-x: hidden;
+ overflow-y: visible;
+}
+
+.weex-slider-inner {
+ width: 100%;
+ height: 100%;
+ overflow: visible;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-orient: horizontal;
+}
+
+.weex-slider-cell {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ background: transparent !important;
+ overflow: visible !important;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/84ad6853/html5/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index c4f7d18..45bc2dc 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -162,6 +162,35 @@ export function normalizeStyle (style: {}) {
}
/**
+ * get transformObj
+ */
+export function getTransformObj (elm: HTMLElement): any {
+ let styleObj = {}
+ if (!elm) { return styleObj }
+ const transformStr = elm.style.webkitTransform || elm.style.transform
+ if (transformStr && transformStr.match(/(?: *(?:translate|rotate|scale)[^(]*\([^(]+\))+/i)) {
+ styleObj = transformStr.trim().split(' ').reduce(function (pre, str) {
+ ['translate', 'scale', 'rotate'].forEach(function (name) {
+ if (new RegExp(name, 'i').test(str)) {
+ pre[name] = str
+ }
+ })
+ return pre
+ }, {})
+ }
+ return styleObj
+}
+
+/**
+ * translate a transform string from a transformObj.
+ */
+export function getTransformStr (obj: {}): string {
+ return Object.keys(obj).reduce(function (pre, key) {
+ return pre + obj[key] + ' '
+ }, '')
+}
+
+/**
* add transform style to element.
* @param {HTMLElement} elm
* @param {object} style: transform object, format is like this:
@@ -174,20 +203,9 @@ export function normalizeStyle (style: {}) {
*/
export function addTransform (elm: HTMLElement, style: {}, replace: boolean): void {
if (!style) { return }
- const transformStr = elm.style.webkitTransform || elm.style.transform
let styleObj = {}
- if (
- transformStr
- && !replace
- && transformStr.match(/(?: *(?:translate|rotate|scale)[^(]*\([^(]+\))+/i)) {
- styleObj = transformStr.trim().split(' ').reduce(function (pre, str) {
- ['translate', 'scale', 'rotate'].forEach(function (name) {
- if (new RegExp(name, 'i').test(str)) {
- pre[name] = str
- }
- })
- return pre
- }, {})
+ if (!replace) {
+ styleObj = getTransformObj(elm)
}
for (const key in style) {
const val = style[key]
@@ -195,9 +213,44 @@ export function addTransform (elm: HTMLElement, style: {}, replace: boolean): vo
styleObj[key] = val
}
}
- const resStr = Object.keys(style).reduce(function (pre, key) {
- return pre + style[key] + ' '
- }, '')
+ const resStr = getTransformStr(styleObj)
elm.style.webkitTransform = resStr
elm.style.transform = resStr
}
+
+/**
+ * add translate X to the element.
+ */
+export function addTranslateX (elm: HTMLElement, toAdd: number): void {
+ if (!toAdd) { return }
+ const styleObj = getTransformObj(elm)
+ if (!styleObj.translate) {
+ styleObj.translate = 'translate3d(0px, 0px, 0px)'
+ }
+ styleObj.translate = styleObj.translate.replace(/[+-\d.]+[pw]x/, function ($0) {
+ return (parseFloat($0) + toAdd) + 'px'
+ })
+ const resStr = getTransformStr(styleObj)
+ elm.style.webkitTransform = resStr
+ elm.style.transform = resStr
+}
+
+/**
+ * copy a transform behaviour from one element to another.
+ * key could be: 'translate' | 'scale' | 'rotate'
+ */
+export function copyTransform (from: HTMLElement, to: HTMLElement, key: string | void): void {
+ let str
+ if (!key) {
+ str = to.style.webkitTransform || to.style.transform
+ }
+ else {
+ const fromObj = getTransformObj(from)
+ if (!fromObj[key]) { return }
+ const toObj = getTransformObj(to)
+ toObj[key] = fromObj[key]
+ str = getTransformStr(toObj)
+ }
+ to.style.webkitTransform = str
+ to.style.transform = str
+}
[19/20] incubator-weex git commit: Merge branch
'0.13-dev-web-no-slider-refactor' into 0.13-dev-web
Posted by ta...@apache.org.
Merge branch '0.13-dev-web-no-slider-refactor' into 0.13-dev-web
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/8b2ee21e
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/8b2ee21e
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/8b2ee21e
Branch: refs/heads/0.13-dev
Commit: 8b2ee21e0d688e4c57462fba4cd2c8a1c26f42f6
Parents: c2a853b 6ddbab8
Author: MrRaindrop <te...@gmail.com>
Authored: Sun Jun 4 13:40:54 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sun Jun 4 13:40:54 2017 +0800
----------------------------------------------------------------------
html5/render/vue/core/style.js | 7 ++++---
package.json | 2 +-
packages/weex-vue-render/package.json | 2 +-
3 files changed, 6 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
[06/20] incubator-weex git commit: * [html5] update
Posted by ta...@apache.org.
* [html5] update
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/e8e286be
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/e8e286be
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/e8e286be
Branch: refs/heads/0.13-dev
Commit: e8e286be5bc50ef7213389ede6e695f1150a13c6
Parents: e752d93
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 15:29:54 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 15:29:54 2017 +0800
----------------------------------------------------------------------
html5/render/vue/index.js | 2 ++
1 file changed, 2 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/e8e286be/html5/render/vue/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/index.js b/html5/render/vue/index.js
index 3cec4ca..9c3c38c 100644
--- a/html5/render/vue/index.js
+++ b/html5/render/vue/index.js
@@ -32,6 +32,8 @@ import { base, style } from './mixins'
let _inited = false
function init (Vue/*, options = {}*/) {
if (_inited) { return }
+ _inited = true
+
setVue(Vue)
Vue.prototype.$getConfig = () => {
[12/20] incubator-weex git commit: * [html5] use clientWidth to get
documentElement's width or height
Posted by ta...@apache.org.
* [html5] use clientWidth to get documentElement's width or height
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/4b856aec
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/4b856aec
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/4b856aec
Branch: refs/heads/0.13-dev
Commit: 4b856aecf37a5d4a8de15918e4e08b87206eaedb
Parents: 948452f
Author: MrRaindrop <te...@gmail.com>
Authored: Sat May 27 15:20:01 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sat May 27 15:20:01 2017 +0800
----------------------------------------------------------------------
html5/render/vue/env/viewport.js | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/4b856aec/html5/render/vue/env/viewport.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/env/viewport.js b/html5/render/vue/env/viewport.js
index 278dbef..33efd6a 100644
--- a/html5/render/vue/env/viewport.js
+++ b/html5/render/vue/env/viewport.js
@@ -46,7 +46,6 @@ if (metaWidth && !isNaN(metaWidth) && metaWidth > 0) {
}
let dpr: number = 0
-let deRect: mixed = null
let screenWidth: number = 0
let screenHeight: number = 0
@@ -116,9 +115,8 @@ export function init (viewportWidth: number = width): ?{
}
dpr = info.dpr = window.devicePixelRatio
- deRect = doc.documentElement.getBoundingClientRect()
- screenWidth = deRect.width
- screenHeight = deRect.height
+ screenWidth = doc.documentElement.clientWidth
+ screenHeight = doc.documentElement.clientHeight
// set root font for rem.
setRootFont(screenWidth)
[05/20] incubator-weex git commit: * [html5] update
Posted by ta...@apache.org.
* [html5] update
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/e752d935
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/e752d935
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/e752d935
Branch: refs/heads/0.13-dev
Commit: e752d9352ded2b6b9ae93b09031abfe3b3921b26
Parents: 9137092
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 15:27:04 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 15:27:04 2017 +0800
----------------------------------------------------------------------
html5/render/vue/README.md | 23 ++++++++++++++++++++++-
1 file changed, 22 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/e752d935/html5/render/vue/README.md
----------------------------------------------------------------------
diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md
index d41f777..e2f39d0 100644
--- a/html5/render/vue/README.md
+++ b/html5/render/vue/README.md
@@ -4,7 +4,28 @@ This is a group of Vue 2.x components for Weex, which have the same behavior wit
It can be run on browser only based on Vue 2.x (without Weex).
-## use vue-loader
+## how to use
+
+If you prefer npm way, you should manually call `init` function to pass Vue constructor to weex.
+
+```javascript
+import Vue from 'vue'
+import weex from 'weex-vue-render'
+weex.init(Vue)
+
+import App from 'App.vue'
+new Vue(App)
+```
+
+If you perfer cdn way, and use script tag to import a script link, just import it into your html file, it will auto-init and you can just ignore it.
+
+```html
+<script>{{Vue}}</script>
+<script>{{weex-vue-render}}</script>
+<script>{{your js bundle}}</script>
+```
+
+## 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.
[15/20] incubator-weex git commit: * [html5] refactor slider &
slider-neighbor.
Posted by ta...@apache.org.
* [html5] refactor slider & slider-neighbor.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/776a74a2
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/776a74a2
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/776a74a2
Branch: refs/heads/0.13-dev
Commit: 776a74a234c92dd386feb0ace9714ebd33063760
Parents: 804178a
Author: MrRaindrop <te...@gmail.com>
Authored: Fri Jun 2 11:47:29 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Fri Jun 2 11:47:29 2017 +0800
----------------------------------------------------------------------
.../render/vue/components/slider/slideMixin.js | 389 ++++++++-----------
.../vue/components/slider/slider-neighbor.js | 3 +-
html5/render/vue/utils/style.js | 2 +-
3 files changed, 159 insertions(+), 235 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/776a74a2/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 7938a10..907687e 100644
--- a/html5/render/vue/components/slider/slideMixin.js
+++ b/html5/render/vue/components/slider/slideMixin.js
@@ -25,16 +25,15 @@ import {
fireLazyload,
addTransform,
copyTransform,
+ getTransformObj,
bind
} from '../../utils'
import { extractComponentStyle, createEventMap } from '../../core'
-// const TRANSITION_TIME = 200
-const TRANSITION_TIME = 1000
+const TRANSITION_TIME = 100
+const NEIGHBOR_SCALE_TIME = 50
const MAIN_SLIDE_OPACITY = 1
-
-// trigger scroll event frequency.
-// const scrollDam = 16
+const THROTTLE_SCROLL_TIME = 16
export default {
created () {
@@ -48,7 +47,6 @@ export default {
beforeUpdate () {
this._updateLayout()
- // this._reorder()
},
updated () {
@@ -62,13 +60,16 @@ export default {
}
}
fireLazyload(this.$el, true)
+ this._preIndex = this._showNodes[0].index
+ if (this._preIndex !== this.currentIndex) {
+ this._slideTo(this.currentIndex)
+ }
},
mounted () {
this._updateLayout()
this._startAutoPlay()
this._slideTo(this.currentIndex)
- // this._reorder()
fireLazyload(this.$el, true)
},
@@ -127,7 +128,8 @@ export default {
on: extend(createEventMap(this, ['scroll', 'scrollstart', 'scrollend']), {
touchstart: this._handleTouchStart,
touchmove: throttle(bind(this._handleTouchMove, this), 25),
- touchend: this._handleTouchEnd
+ touchend: this._handleTouchEnd,
+ touchcancel: this._handleTouchCancel
}),
staticClass: 'weex-slider weex-slider-wrapper weex-ct',
staticStyle: extractComponentStyle(this)
@@ -179,7 +181,7 @@ export default {
}
},
- _slideTo (index) {
+ _slideTo (index, isTouchScroll) {
if (!this.infinite || this.infinite === 'false') {
if (index === -1 || index > (this.frameCount - 1)) {
this._slideTo(this.currentIndex)
@@ -187,87 +189,103 @@ export default {
}
}
- const newIndex = this._normalizeIndex(index)
- const inner = this.$refs.inner
- let step = this._step = this.frameCount <= 1 ? 0 : this.currentIndex - index
- // newIndex: 0 -> 1, sign: -1; newIndex: 1 -> 0, sign: 1.
- const sign = step === 0 ? 0 : step > 0 ? 1 : -1
-
- if (Math.abs(step) > 1) {
- if (process.env.NODE_ENV === 'development') {
- console.warn('[vue-render] slider step should be no more than 1.')
+ if (!this._preIndex && this._preIndex !== 0) {
+ if (this._showNodes && this._showNodes[0]) {
+ this._preIndex = this._showNodes[0].index
+ }
+ else {
+ this._preIndex = this.currentIndex
}
- step = sign
}
+ if (this._sliding) {
+ return
+ }
+ this._sliding = true
+
+ const newIndex = this._normalizeIndex(index)
+ const inner = this.$refs.inner
+ const step = this._step = this.frameCount <= 1 ? 0 : this._preIndex - index
+
if (inner) {
this._prepareNodes()
-
- this.innerOffset += sign * this.wrapperWidth
+ const translate = getTransformObj(inner).translate
+ const match = translate && translate.match(/translate[^(]+\(([+-\d.]+)/)
+ const innerX = match && match[1] || 0
+ const dist = innerX - this.innerOffset
+ 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`
- // inner.style.webkitTransform = `translate3d(${this.innerOffset}px, 0, 0)`
- // inner.style.transform = `translate3d(${this.innerOffset}px, 0, 0)`
-
- this._loopShowNodes(step)
-
- if (this.isNeighbor) {
- // set neighbors
- setTimeout(this._setNeighbors.bind(this), 0)
+ inner.style.webkitTransition = `-webkit-transform ${TRANSITION_TIME / 1000}s ease-in-out`
+ inner.style.transition = `transform ${TRANSITION_TIME / 1000}s ease-in-out`
+ inner.style.webkitTransform = `translate3d(${this.innerOffset}px, 0, 0)`
+ inner.style.transform = `translate3d(${this.innerOffset}px, 0, 0)`
+
+ // emit scroll events.
+ if (!isTouchScroll) {
+ this._emitScrollEvent('scrollstart')
}
+ setTimeout(() => {
+ this._throttleEmitScroll(dist, () => {
+ this._emitScrollEvent('scrollend')
+ })
+ }, THROTTLE_SCROLL_TIME)
- // current arrange index changed since the slides position begin to change.
- // this._currentIndexInArrangeArray = this._currentIndexInArrangeArray - step
+ this._loopShowNodes(step)
setTimeout(() => {
- // inner.style.webkitTransition = ''
- // inner.style.transition = ''
- for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
- const node = this._showNodes[i]
- if (!node) { continue }
- const elm = node.firstElementChild
- elm.style.webkitTransition = ''
- elm.style.transition = ''
+ if (this.isNeighbor) {
+ this._setNeighbors()
}
- // this._loopShowNodes(step)
-
- // clean cloned nodes and rearrange slide cells.
- this._rearrangeNodes(newIndex)
+ setTimeout(() => {
+ inner.style.webkitTransition = ''
+ inner.style.transition = ''
+ for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
+ const node = this._showNodes[i]
+ if (!node) { continue }
+ const elm = node.firstElementChild
+ elm.style.webkitTransition = ''
+ elm.style.transition = ''
+ }
+ // this._loopShowNodes(step)
+ // clean cloned nodes and rearrange slide cells.
+ this._rearrangeNodes(newIndex)
+ }, NEIGHBOR_SCALE_TIME)
}, TRANSITION_TIME)
}
// TODO: emit scroll event.
// nextFrame()
- if (newIndex !== this.currentIndex) {
+ if (newIndex !== this._preIndex) {
// replace $el with { attr, style } is a legacy usage. Is it necessary to
// do this ? Or just tell devers to use inline functions to access attrs ?
this.$emit('change', createEvent(this.$el, 'change', {
index: newIndex
}))
- // setTimeout(() => { this._reorder(newIndex) }, TRANSITION_TIME)
+ }
+ },
+
+ _clearNodesOffset () {
+ const end = this._showEndIdx
+ for (let i = this._showStartIdx; i <= end; i++) {
+ addTransform(this._showNodes[i].firstElementChild, {
+ translate: 'translate3d(0px, 0px, 0px)'
+ })
}
},
_loopShowNodes (step) {
- const sign = step > 0 ? 1 : -1
- let val = Math.abs(step)
- while (val--) {
- let i = sign < 0 ? this._showStartIdx : this._showEndIdx
- const end = sign < 0 ? this._showEndIdx : this._showStartIdx
- for (; i !== end - sign; i -= sign) {
- const nextIdx = i + sign
- this._positionNode(this._showNodes[i], nextIdx)
- // this._showNodes[nextIdx] = this._showNodes[i]
- // this._showNodes[nextIdx]._showIndex = nextIdx
- // this._positionNode(this._showNodes[nextIdx], nextIdx)
- }
+ if (!step) {
+ return
}
- const begin = sign < 0 ? this._showEndIdx : this._showStartIdx
- const end = begin - step
- for (let i = begin; i !== end; i -= sign) {
+ const sign = step > 0 ? 1 : -1
+ let i = step <= 0 ? this._showStartIdx : this._showEndIdx
+ const end = step <= 0 ? this._showEndIdx : this._showStartIdx
+ for (; i !== end - sign; i -= sign) {
+ const nextIdx = i + step
+ this._showNodes[nextIdx] = this._showNodes[i]
+ this._showNodes[nextIdx]._showIndex = nextIdx
delete this._showNodes[i]
}
this._showStartIdx += step
@@ -283,22 +301,11 @@ export default {
this._initNodes()
this._inited = true
this._showNodes = {}
- // // prepare nodes for the first time.
- // // just generate the arrangeArray.
- // for (let i = 0; i < total; i++) {
- // const node = cells[i].elm
- // node.index = i
- // node.style.zIndex = 0
- // node.style.opacity = 0
- // node._showIndex = i
- // }
- // // this._positionNodes(start, end, cellBeginIndex)
}
const showCount = this._showCount = Math.abs(step) + 3
-
- this._showStartIdx = step <= 0 ? -1 : 1
- this._showEndIdx = step <= 0 ? showCount - 2 : 2 - showCount
+ this._showStartIdx = step <= 0 ? -1 : 2 - showCount
+ this._showEndIdx = step <= 0 ? showCount - 2 : 1
this._positionNodes(this._showStartIdx, this._showEndIdx, step)
},
@@ -314,11 +321,13 @@ export default {
}
},
- _positionNodes (begin, end, step) {
+ _positionNodes (begin, end, step, anim) {
const cells = this._cells
+ const start = step <= 0 ? begin : end
+ const stop = step <= 0 ? end : begin
const sign = step <= 0 ? -1 : 1
- let cellIndex = this.currentIndex + sign
- for (let i = begin; i !== end - sign; i = i - sign) {
+ let cellIndex = this._preIndex + sign
+ for (let i = start; i !== stop - sign; i = i - sign) {
const node = cells[this._normalizeIndex(cellIndex)].elm
cellIndex = cellIndex - sign
this._positionNode(node, i)
@@ -329,9 +338,6 @@ export default {
* index: position index in the showing cells' view.
*/
_positionNode (node, index) {
- // if (this._showNodes[index]) {
- // return
- // }
if (node._inShow && this._showNodes[index] !== node) {
node = this._getClone(node.index)
}
@@ -397,6 +403,7 @@ export default {
_clearNodes (begin, end) {
for (let i = begin; i <= end; i++) {
const node = this._showNodes[i]
+ if (!node) { return }
if (node._isClone) {
this._removeClone(node)
}
@@ -419,11 +426,19 @@ export default {
origNode.style.left = clone.style.left
origNode.style.opacity = clone.style.opacity
origNode.style.zIndex = clone.style.zIndex
- copyTransform(clone, origNode)
- origNode.firstElementChild.style.left = clone.firstElementChild.style.left
+ // copyTransform(clone, origNode)
+ const transObj = getTransformObj(clone)
+ transObj.translate = transObj.translate.replace(/[+-\d.]+[pw]x/, ($0) => {
+ return pos * this.wrapperWidth - this.innerOffset + 'px'
+ })
+ addTransform(origNode, transObj)
+ copyTransform(clone.firstElementChild, origNode.firstElementChild)
+ // origNode.firstElementChild.style.left = clone.firstElementChild.style.left
this._removeClone(clone)
- delete this._showNodes[clone._showIndex]
+ // delete this._showNodes[clone._showIndex]
+ delete this._showNodes[origNode._showIndex]
this._showNodes[pos] = origNode
+ origNode._showIndex = pos
},
_rearrangeNodes (newIndex) {
@@ -447,22 +462,14 @@ export default {
}
this._clearNodes(this._showStartIdx, -2)
+ this._showStartIdx = -1
this._clearNodes(2, this._showEndIdx)
-
- // const curNode = shows[0]
- // if (curNode._isClone) {
- // // replace this cloned node with the original node.
- // const idx = curNode.index
- // for (let i = 0; i < nodesLen; i++) {
- // if (nodes[i].index === idx) {
- // break
- // }
- // }
- // this._replaceCloneNode(curNode, i)
- // }
+ this._showEndIdx = 1
+ this._sliding = false
// set current index to the new index.
this.currentIndex = newIndex
+ this._preIndex = newIndex
},
/**
@@ -478,147 +485,29 @@ export default {
for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
const elm = this._showNodes[i].firstElementChild
- elm.style.webkitTransition = `all ${TRANSITION_TIME / 1000}s ease`
- elm.style.transition = `all ${TRANSITION_TIME / 1000}s ease`
+ elm.style.webkitTransition = `all ${NEIGHBOR_SCALE_TIME / 1000}s ease`
+ elm.style.transition = `all ${NEIGHBOR_SCALE_TIME / 1000}s ease`
const transObj = {
scale: `scale(${i === 0 ? this.currentItemScale : this.neighborScale})`
}
- addTransform(elm, transObj)
+ let translateX
if (!this._neighborWidth) {
this._neighborWidth = parseFloat(elm.style.width) || elm.getBoundingClientRect().width
}
// calculate position offsets according to neighbor scales.
if (Math.abs(i) === 1) {
- const dist = (this.wrapperWidth - this._neighborWidth * this.neighborScale) / 2
- + this.neighborSpace * weex.config.env.scale
- elm.style.left = `${-i * dist}px`
+ const dist = ((this.wrapperWidth - this._neighborWidth * this.neighborScale) / 2
+ + this.neighborSpace * weex.config.env.scale) / this.neighborScale
+ translateX = -i * dist
}
- // clear position offsets.
else {
- elm.style.left = ''
- }
- }
- },
-
- _order () {
- this.$nextTick(() => {
- for (let i = 1, l = this._cells.length; i < l; i++) {
- const nextElm = this._cells[i].elm
- const nextOffset = this.wrapperWidth * i
- nextElm.style.webkitTransform = `translate3d(${nextOffset}px, 0, 0)`
- nextElm.style.transform = `translate3d(${nextOffset}px, 0, 0)`
- }
- // this._reorder()
- })
- },
-
- _reorder (newIndex) {
- if (!newIndex && newIndex !== 0) {
- newIndex = this.currentIndex
- }
- // dir: 'current' | 'prev' | 'next'
- const setPosition = (elm, dir) => {
- const scale = window.weex.config.env.scale
- let neighborScale = this.neighborScale
- let opacity = this.neighborAlpha
- let offsetX = -this.innerOffset
- let offsetY = 0
- if (dir === 'current') {
- elm.style.zIndex = 1
- neighborScale = this.currentItemScale
- opacity = MAIN_SLIDE_OPACITY
- }
-
- elm.style.visibility = 'visible'
-
- const origin = dir === 'prev' ? '100% 0' : '0 0'
- elm.style.webkitTransformOrigin = origin
- elm.style.transformOrigin = origin
-
- const sign = dir === 'current' ? 0 : dir === 'prev' ? -1 : 1
- offsetX = -this.innerOffset + sign * this.wrapperWidth
- if (this.isNeighbor) {
- offsetY = (1 - neighborScale) * this.wrapperHeight / 2
- elm.style.opacity = opacity
- if (dir === 'current') {
- offsetX += this.wrapperWidth * (1 - neighborScale) / 2
- }
- else {
- // offsetX = offsetX - sign * this.neighborSpace * scale
- offsetX = offsetX - sign * (
- (this.wrapperWidth - this._origItemWidth * this.currentItemScale) / 2
- - this.neighborSpace * scale)
- }
- }
-
- elm.style.width = this.wrapperWidth + 'px'
- const transObj = {
- translate: `translate3d(${offsetX}px, ${offsetY}px, 0px)`
- }
- if (this.isNeighbor) {
- transObj.scale = `scale(${neighborScale})`
+ // clear position offsets.
+ translateX = 0
}
+ transObj.translate = `translate3d(${translateX}px, 0px, 0px)`
addTransform(elm, transObj)
+ elm.style.opacity = i === 0 ? MAIN_SLIDE_OPACITY : this.neighborAlpha
}
-
- const removeClone = (clone, prevElm) => {
- // switch current page.
- setPosition(prevElm, 'current')
- // const curTransform = `translate3d(${-this.innerOffset}px, 0, 0)`
- // prevElm.style.transform = curTransform
- // prevElm.style.webkitTransform = curTransform
- // remove clone node.
- clone && clone.parentElement.removeChild(clone)
- }
-
- this.$nextTick(() => {
- if (this._cells.length <= 1) {
- return
- }
- if (!this.infinite || this.infinite === 'false') {
- this._order()
- return
- }
- const lastPrev = this._prevElm
- const prevIndex = this._normalizeIndex(newIndex - 1)
- const nextIndex = this._normalizeIndex(newIndex + 1)
- let prevElm = this._prevElm = this._cells[prevIndex].elm
- const nextElm = this._cells[nextIndex].elm
- const currentElm = this._cells[newIndex].elm
-
- if (!this._origItemWidth) {
- this._origItemWidth = currentElm.firstElementChild.getBoundingClientRect().width
- }
-
- // put current slide on the top.
- setPosition(currentElm, 'current')
- currentElm.style.webkitBoxAlign = 'center'
- currentElm.style.webkitAlignItems = 'center'
- currentElm.style.AlignItems = 'center'
-
- // clone prevCell if there are only tow slides.
- if (this._cells.length === 2) {
- this._clonePrev && removeClone(this._clonePrev, lastPrev)
- this._clonePrev = prevElm.cloneNode(true)
- this._clonePrev.classList.add('weex-slide-clone-prev')
- prevElm.parentElement.insertBefore(this._clonePrev, currentElm)
- if (!this._prevFired) {
- fireLazyload(this._clonePrev, true)
- this._prevFired = true
- }
- prevElm = this._clonePrev
- }
-
- setPosition(prevElm, 'prev')
- prevElm.style.webkitBoxAlign = 'end'
- prevElm.style.webkitAlignItems = 'flex-end'
- prevElm.style.AlignItems = 'flex-end'
- setPosition(nextElm, 'next')
- nextElm.style.webkitBoxAlign = 'start'
- nextElm.style.webkitAlignItems = 'flex-start'
- nextElm.style.AlignItems = 'flex-start'
- this.currentIndex = newIndex
- })
},
_next () {
@@ -630,7 +519,6 @@ export default {
},
_handleTouchStart (event) {
- // event.stopPropagation()
const touch = event.changedTouches[0]
this._stopAutoPlay()
this._touchParams = {
@@ -643,9 +531,14 @@ export default {
},
_handleTouchMove (event) {
- // event.stopPropagation()
const tp = this._touchParams
if (!tp) { return }
+ if (this._sliding) {
+ if (process.env.NODE_ENV === 'development') {
+ console.warn(`[vue-render] warn: can't scroll the slider during sliding.`)
+ }
+ return
+ }
const { startX, startY } = this._touchParams
const touch = event.changedTouches[0]
const offsetX = touch.pageX - startX
@@ -656,7 +549,7 @@ export default {
if (typeof isV === 'undefined') {
isV = tp.isVertical = Math.abs(offsetX) < Math.abs(offsetY)
if (!isV) {
- this.$emit('scrollstart', createEvent(this.$el, 'scrollstart', {}))
+ this._emitScrollEvent('scrollstart')
}
}
// vertical scroll. just ignore it.
@@ -667,17 +560,20 @@ export default {
event.preventDefault()
const inner = this.$refs.inner
if (inner && offsetX) {
+ if (!this._nodesOffsetCleared) {
+ this._nodesOffsetCleared = true
+ this._clearNodesOffset()
+ }
// TODO: add throttle.
- this.$emit('scroll', createEvent(this.$el, 'scroll', {
+ this._emitScrollEvent('scroll', {
offsetXRatio: offsetX / this.wrapperWidth
- }))
+ })
inner.style.transform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)`
inner.style.webkitTransform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)`
}
},
_handleTouchEnd (event) {
- // event.stopPropagation()
this._startAutoPlay()
const tp = this._touchParams
if (!tp) { return }
@@ -688,14 +584,43 @@ export default {
const inner = this.$refs.inner
const { offsetX } = tp
if (inner) {
- this.$emit('scrollend', createEvent(this.$el, 'scrollend'))
+ this._nodesOffsetCleared = false
// TODO: test the velocity if it's less than 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)
+ this._slideTo(newIndex, true)
}
delete this._touchParams
+ },
+
+ _handleTouchCancel (event) {
+ return this._handleTouchEnd(event)
+ },
+
+ _emitScrollEvent (type, data = {}) {
+ this.$emit(type, createEvent(this.$el, type, data))
+ },
+
+ _throttleEmitScroll (offset, callback) {
+ let i = 0
+ 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 throttledScroll = () => {
+ if (++i > cnt) {
+ return callback && callback.call(this)
+ }
+ const ratio = this._step === 0
+ ? sign * r * (1 - i / cnt)
+ : sign * (r + (1 - r) * i / cnt)
+ this._emitScrollEvent('scroll', {
+ offsetXRatio: ratio
+ })
+ setTimeout(throttledScroll, THROTTLE_SCROLL_TIME)
+ }
+ throttledScroll()
}
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/776a74a2/html5/render/vue/components/slider/slider-neighbor.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/slider-neighbor.js b/html5/render/vue/components/slider/slider-neighbor.js
index 07ec2a7..7d691e1 100644
--- a/html5/render/vue/components/slider/slider-neighbor.js
+++ b/html5/render/vue/components/slider/slider-neighbor.js
@@ -18,7 +18,6 @@
*/
import slideMixin from './slideMixin'
-const DEFAULT_MAIN_SLIDE_SCALE = 0.9
const DEFAULT_NEIGHBOR_SPACE = 20
const DEFAULT_NEIGHBOR_ALPHA = 0.6
const DEFAULT_NEIGHBOR_SCALE = 0.8
@@ -73,7 +72,7 @@ export default {
val = parseFloat(val)
return !isNaN(val) && val >= 0 && val <= 1
},
- default: DEFAULT_MAIN_SLIDE_SCALE
+ default: DEFAULT_CURRENT_ITEM_SCALE
}
},
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/776a74a2/html5/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index 0a66285..bb12934 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -242,7 +242,7 @@ export function addTranslateX (elm: HTMLElement, toAdd: number): void {
export function copyTransform (from: HTMLElement, to: HTMLElement, key: string | void): void {
let str
if (!key) {
- str = to.style.webkitTransform || to.style.transform
+ str = from.style.webkitTransform || from.style.transform
}
else {
const fromObj = getTransformObj(from)
[18/20] incubator-weex git commit: * [html5] update.
Posted by ta...@apache.org.
* [html5] update.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/6ddbab85
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/6ddbab85
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/6ddbab85
Branch: refs/heads/0.13-dev
Commit: 6ddbab858458dc4c697bd06182d1940766a19d24
Parents: 19c0a78
Author: MrRaindrop <te...@gmail.com>
Authored: Sun Jun 4 13:39:39 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sun Jun 4 13:39:39 2017 +0800
----------------------------------------------------------------------
html5/render/vue/core/style.js | 2 ++
1 file changed, 2 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ddbab85/html5/render/vue/core/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js
index 07e6e7b..8bb3029 100644
--- a/html5/render/vue/core/style.js
+++ b/html5/render/vue/core/style.js
@@ -42,6 +42,8 @@ export function getHeadStyleMap () {
* why not using styleSheet.rules || styleSheet.cssRules to get css rules ?
* because weex's components defined non-standard style attributes, which is
* auto ignored when access rule.cssText.
+ * another reason not to use cssRules directy:
+ * @issue: https://stackoverflow.com/questions/21642277/security-error-the-operation-is-insecure-in-firefox-document-stylesheets
*/
if ((styleSheet.ownerNode.tagName.toLowerCase() === 'link')
|| !styleSheet.ownerNode.textContent) {
[20/20] incubator-weex git commit: Merge branch '0.13-dev' of
https://github.com/MrRaindrop/incubator-weex into 0.13-dev
Posted by ta...@apache.org.
Merge branch '0.13-dev' of https://github.com/MrRaindrop/incubator-weex into 0.13-dev
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/404f3cc1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/404f3cc1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/404f3cc1
Branch: refs/heads/0.13-dev
Commit: 404f3cc149836932011c082c32552aafc51d5c3b
Parents: d2f4cfe 8b2ee21
Author: tancy <ro...@gmail.com>
Authored: Sun Jun 4 14:04:42 2017 +0800
Committer: tancy <ro...@gmail.com>
Committed: Sun Jun 4 14:04:42 2017 +0800
----------------------------------------------------------------------
html5/render/vue/README.md | 23 +-
html5/render/vue/components/slider/index.js | 137 +---
.../render/vue/components/slider/slideMixin.js | 647 ++++++++++++++-----
.../vue/components/slider/slider-neighbor.css | 19 -
.../vue/components/slider/slider-neighbor.js | 116 +---
html5/render/vue/components/slider/slider.css | 34 +
html5/render/vue/core/style.js | 7 +-
html5/render/vue/env/viewport.js | 6 +-
html5/render/vue/index.js | 6 +
html5/render/vue/mixins/scrollable.js | 7 +-
html5/render/vue/modules/dom.js | 16 +-
html5/render/vue/utils/style.js | 85 ++-
package.json | 2 +-
packages/weex-vue-render/README.md | 23 +-
packages/weex-vue-render/package.json | 2 +-
15 files changed, 685 insertions(+), 445 deletions(-)
----------------------------------------------------------------------
[07/20] incubator-weex git commit: Merge branch '0.13-dev-web' into
0.13-dev-web-slider-refactor
Posted by ta...@apache.org.
Merge branch '0.13-dev-web' into 0.13-dev-web-slider-refactor
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/56177b35
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/56177b35
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/56177b35
Branch: refs/heads/0.13-dev
Commit: 56177b35c6b8c4307b2a69604f919faf2c46f384
Parents: 4853e3d e8e286b
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 15:35:51 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 15:35:51 2017 +0800
----------------------------------------------------------------------
html5/render/vue/README.md | 23 ++++++++++++++++++++++-
html5/render/vue/index.js | 2 ++
2 files changed, 24 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
[14/20] incubator-weex git commit: Merge branch '0.13-dev-web' into
0.13-dev-web-slider-refactor
Posted by ta...@apache.org.
Merge branch '0.13-dev-web' into 0.13-dev-web-slider-refactor
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/804178a8
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/804178a8
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/804178a8
Branch: refs/heads/0.13-dev
Commit: 804178a836cab9747cc03a0734deab8087e56dee
Parents: f2bd128 b3f49bf
Author: MrRaindrop <te...@gmail.com>
Authored: Sat May 27 15:21:53 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sat May 27 15:21:53 2017 +0800
----------------------------------------------------------------------
html5/render/vue/env/viewport.js | 6 ++----
html5/render/vue/modules/dom.js | 16 +++++++++++++---
html5/render/vue/utils/style.js | 2 +-
3 files changed, 16 insertions(+), 8 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/804178a8/html5/render/vue/utils/style.js
----------------------------------------------------------------------
[13/20] incubator-weex git commit: + [html5] add style util for css
transform
Posted by ta...@apache.org.
+ [html5] add style util for css transform
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/b3f49bf6
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/b3f49bf6
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/b3f49bf6
Branch: refs/heads/0.13-dev
Commit: b3f49bf69becb6082b7ab55c61f8f6e32861e22c
Parents: 4b856ae
Author: MrRaindrop <te...@gmail.com>
Authored: Sat May 27 15:20:34 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sat May 27 15:20:34 2017 +0800
----------------------------------------------------------------------
html5/render/vue/utils/style.js | 29 +++++++++++++++++++++++++++++
1 file changed, 29 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b3f49bf6/html5/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index c4f7d18..013ca82 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -162,6 +162,35 @@ export function normalizeStyle (style: {}) {
}
/**
+ * get transformObj
+ */
+export function getTransformObj (elm: HTMLElement): any {
+ let styleObj = {}
+ if (!elm) { return styleObj }
+ const transformStr = elm.style.webkitTransform || elm.style.transform
+ if (transformStr && transformStr.match(/(?: *(?:translate|rotate|scale)[^(]*\([^(]+\))+/i)) {
+ styleObj = transformStr.trim().replace(/, +/g, ',').split(' ').reduce(function (pre, str) {
+ ['translate', 'scale', 'rotate'].forEach(function (name) {
+ if (new RegExp(name, 'i').test(str)) {
+ pre[name] = str
+ }
+ })
+ return pre
+ }, {})
+ }
+ return styleObj
+}
+
+/**
+ * translate a transform string from a transformObj.
+ */
+export function getTransformStr (obj: {}): string {
+ return Object.keys(obj).reduce(function (pre, key) {
+ return pre + obj[key] + ' '
+ }, '')
+}
+
+/**
* add transform style to element.
* @param {HTMLElement} elm
* @param {object} style: transform object, format is like this:
[08/20] incubator-weex git commit: * [html5] set one throttled scroll
handler for every list/scroller instance.
Posted by ta...@apache.org.
* [html5] set one throttled scroll handler for every list/scroller instance.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/2ec3fa8e
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/2ec3fa8e
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/2ec3fa8e
Branch: refs/heads/0.13-dev
Commit: 2ec3fa8e5f8cf26cf88ff664ca1d60190b24d356
Parents: e8e286b
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 17:35:18 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 17:35:18 2017 +0800
----------------------------------------------------------------------
html5/render/vue/mixins/scrollable.js | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ec3fa8e/html5/render/vue/mixins/scrollable.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/scrollable.js b/html5/render/vue/mixins/scrollable.js
index b0a84de..9eb1209 100644
--- a/html5/render/vue/mixins/scrollable.js
+++ b/html5/render/vue/mixins/scrollable.js
@@ -18,16 +18,15 @@
*/
import { getThrottleLazyload, throttle } from '../utils'
-let throttleScroll
function getThrottledScroll (context) {
- if (!throttleScroll) {
+ if (!context._throttleScroll) {
const wrapper = context.$refs.wrapper
const inner = context.$refs.inner
let preOffset = (context.scrollDirection === 'horizontal'
? wrapper.scrollLeft
: wrapper.scrollTop)
|| 0
- throttleScroll = throttle(function (evt) {
+ context._throttleScroll = throttle(function (evt) {
const offset = context.scrollDirection === 'horizontal'
? wrapper.scrollLeft
: wrapper.scrollTop
@@ -65,7 +64,7 @@ function getThrottledScroll (context) {
}
}, 16, true)
}
- return throttleScroll
+ return context._throttleScroll
}
export default {
[16/20] incubator-weex git commit: * [html5] update
Posted by ta...@apache.org.
* [html5] update
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/c2a853b5
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/c2a853b5
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/c2a853b5
Branch: refs/heads/0.13-dev
Commit: c2a853b55d76b2a90c7497c2cdfe5bf52e823af0
Parents: 776a74a
Author: MrRaindrop <te...@gmail.com>
Authored: Sat Jun 3 11:16:55 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sat Jun 3 11:16:55 2017 +0800
----------------------------------------------------------------------
.../render/vue/components/slider/slideMixin.js | 145 ++++++++++---------
html5/render/vue/components/slider/slider.css | 6 +-
2 files changed, 83 insertions(+), 68 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c2a853b5/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 907687e..2655fbb 100644
--- a/html5/render/vue/components/slider/slideMixin.js
+++ b/html5/render/vue/components/slider/slideMixin.js
@@ -21,35 +21,34 @@ import {
throttle,
extend,
createEvent,
- /* nextFrame, */
fireLazyload,
addTransform,
copyTransform,
getTransformObj,
- bind
+ bind,
+ extendKeys
} from '../../utils'
import { extractComponentStyle, createEventMap } from '../../core'
-const TRANSITION_TIME = 100
-const NEIGHBOR_SCALE_TIME = 50
+const TRANSITION_TIME = 400
+const NEIGHBOR_SCALE_TIME = 100
const MAIN_SLIDE_OPACITY = 1
-const THROTTLE_SCROLL_TIME = 16
+const THROTTLE_SCROLL_TIME = 25
+const INTERVAL_MINIMUM = 200
export default {
created () {
this._clones = []
this.innerOffset = 0
this._indicator = null
- this.$nextTick(() => {
- this._updateLayout()
- })
},
beforeUpdate () {
- this._updateLayout()
+ this._getWrapperSize()
},
updated () {
+ this._startAutoPlay()
const children = this.$children
const len = children && children.length
if (children && len > 0) {
@@ -67,14 +66,14 @@ export default {
},
mounted () {
- this._updateLayout()
+ this._getWrapperSize()
this._startAutoPlay()
this._slideTo(this.currentIndex)
fireLazyload(this.$el, true)
},
methods: {
- _computeWrapperSize () {
+ _getWrapperSize () {
const wrapper = this.$refs.wrapper
if (wrapper) {
const rect = wrapper.getBoundingClientRect()
@@ -83,14 +82,6 @@ export default {
}
},
- _updateLayout () {
- this._computeWrapperSize()
- // const inner = this.$refs.inner
- // if (inner) {
- // inner.style.width = this.wrapperWidth * this.frameCount + 'px'
- // }
- },
-
_formatChildren (createElement) {
const children = this.$slots.default || []
let indicatorVnode
@@ -104,7 +95,7 @@ export default {
}).map(vnode => {
return createElement('li', {
ref: 'cells',
- staticClass: 'weex-slider-cell weex-ct'
+ staticClass: `weex-slider-cell weex-ct${this.isNeighbor ? ' neighbor-cell' : ''}`
}, [vnode])
})
if (indicatorVnode) {
@@ -158,20 +149,9 @@ export default {
clearTimeout(this._autoPlayTimer)
this._autoPlayTimer = null
}
- const interval = parseInt(this.interval)
- this._lastSlideTime = Date.now()
-
- const autoPlayFn = bind(function () {
- clearTimeout(this._autoPlayTimer)
- const now = Date.now()
- let nextTick = this._lastSlideTime + interval - now
- nextTick = nextTick > 100 ? nextTick : interval
- this._next()
- this._lastSlideTime = now
- this._autoPlayTimer = setTimeout(autoPlayFn, nextTick)
- }, this)
-
- this._autoPlayTimer = setTimeout(autoPlayFn, interval)
+ let interval = parseInt(this.interval - TRANSITION_TIME - NEIGHBOR_SCALE_TIME)
+ interval = interval > INTERVAL_MINIMUM ? interval : INTERVAL_MINIMUM
+ this._autoPlayTimer = setTimeout(bind(this._next, this), interval)
},
_stopAutoPlay () {
@@ -247,19 +227,13 @@ export default {
elm.style.webkitTransition = ''
elm.style.transition = ''
}
- // this._loopShowNodes(step)
// clean cloned nodes and rearrange slide cells.
this._rearrangeNodes(newIndex)
}, NEIGHBOR_SCALE_TIME)
}, TRANSITION_TIME)
}
- // TODO: emit scroll event.
- // nextFrame()
-
if (newIndex !== this._preIndex) {
- // replace $el with { attr, style } is a legacy usage. Is it necessary to
- // do this ? Or just tell devers to use inline functions to access attrs ?
this.$emit('change', createEvent(this.$el, 'change', {
index: newIndex
}))
@@ -269,6 +243,9 @@ export default {
_clearNodesOffset () {
const end = this._showEndIdx
for (let i = this._showStartIdx; i <= end; i++) {
+ let node = this._showNodes[i]
+ node = node && node.firstElementChild
+ if (!node) { continue }
addTransform(this._showNodes[i].firstElementChild, {
translate: 'translate3d(0px, 0px, 0px)'
})
@@ -276,7 +253,7 @@ export default {
},
_loopShowNodes (step) {
- if (!step) {
+ if (!step || this.frameCount <= 1) {
return
}
const sign = step > 0 ? 1 : -1
@@ -302,10 +279,21 @@ export default {
this._inited = true
this._showNodes = {}
}
-
+ if (this.frameCount <= 1) {
+ this._showStartIdx = this._showEndIdx = 0
+ const node = this._cells[0].elm
+ node.style.opacity = 1
+ node.style.zIndex = 99
+ node.index = 0
+ this._showNodes[0] = node
+ node._inShow = true
+ node._showIndex = 0
+ return
+ }
const showCount = this._showCount = Math.abs(step) + 3
this._showStartIdx = step <= 0 ? -1 : 2 - showCount
this._showEndIdx = step <= 0 ? showCount - 2 : 1
+ this._clearNodesOffset()
this._positionNodes(this._showStartIdx, this._showEndIdx, step)
},
@@ -338,7 +326,9 @@ export default {
* index: position index in the showing cells' view.
*/
_positionNode (node, index) {
- if (node._inShow && this._showNodes[index] !== node) {
+ const holder = this._showNodes[index]
+ if (node._inShow && holder !== node) {
+ if (holder) { this._removeClone(holder) }
node = this._getClone(node.index)
}
else if (node._inShow) {
@@ -346,15 +336,10 @@ export default {
}
node._inShow = true
- // else if (!this._showNodes[index]) {
- // node = this._getClone(node.index)
- // }
const translateX = index * this.wrapperWidth - this.innerOffset
addTransform(node, {
translate: `translate3d(${translateX}px, 0px, 0px)`
})
- // node.style.left = (index + this._step) * this.wrapperWidth - this.innerOffset + 'px'
- // node.style.left = index * this.wrapperWidth + 'px'
node.style.zIndex = 99 - Math.abs(index)
node.style.opacity = 1
node._showIndex = index
@@ -372,7 +357,6 @@ export default {
clone._isClone = true
clone._inShow = origNode._inShow
clone.index = origNode.index
- clone.style.left = 0
clone.style.opacity = 0
clone.style.zIndex = 0
const ct = this.$refs.inner
@@ -392,7 +376,6 @@ export default {
_hideNode (node) {
node._inShow = false
node.style.opacity = 0
- node.style.left = 0
node.style.zIndex = 0
},
@@ -415,6 +398,23 @@ export default {
},
/**
+ * copy node style props (opacity and zIndex) and transform status from
+ * one element to another.
+ */
+ _copyStyle (from, to, styles = ['opacity', 'zIndex'], transformExtra = {}) {
+ extendKeys(to.style, from.style, styles)
+ const transObj = getTransformObj(from)
+ for (const k in transformExtra) {
+ transObj[k] = transformExtra[k]
+ }
+ addTransform(to, transObj)
+ const fromInner = from.firstElementChild
+ const toInner = to.firstElementChild
+ toInner.style.opacity = fromInner.style.opacity
+ copyTransform(fromInner, toInner)
+ },
+
+ /**
* replace a clone node with the original node if it's not in use.
*/
_replaceClone (clone, pos) {
@@ -422,32 +422,40 @@ export default {
if (origNode._inShow) {
return
}
+ const origShowIndex = origNode._showIndex
+ const styleProps = ['opacity', 'zIndex']
+ let cl
+ if (Math.abs(origShowIndex) <= 1) {
+ // leave a clone to replace the origNode in the show zone(-1 ~ 1).
+ cl = this._getClone(origNode.index)
+ this._copyStyle(origNode, cl)
+ this._showNodes[origShowIndex] = cl
+ }
origNode._inShow = true
- origNode.style.left = clone.style.left
- origNode.style.opacity = clone.style.opacity
- origNode.style.zIndex = clone.style.zIndex
- // copyTransform(clone, origNode)
const transObj = getTransformObj(clone)
transObj.translate = transObj.translate.replace(/[+-\d.]+[pw]x/, ($0) => {
return pos * this.wrapperWidth - this.innerOffset + 'px'
})
- addTransform(origNode, transObj)
- copyTransform(clone.firstElementChild, origNode.firstElementChild)
- // origNode.firstElementChild.style.left = clone.firstElementChild.style.left
+ this._copyStyle(clone, origNode, styleProps, transObj)
this._removeClone(clone)
- // delete this._showNodes[clone._showIndex]
- delete this._showNodes[origNode._showIndex]
+ if (!cl) {
+ delete this._showNodes[origShowIndex]
+ }
this._showNodes[pos] = origNode
origNode._showIndex = pos
},
_rearrangeNodes (newIndex) {
+ if (this.frameCount <= 1) {
+ this._sliding = false
+ this.currentIndex = 0
+ return
+ }
/**
* clean nodes. replace current node with non-cloned node.
* set current index to the new index.
*/
const shows = this._showNodes
-
for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
shows[i]._inShow = false
}
@@ -479,10 +487,6 @@ export default {
* 3. set other cells' scale and alpha.
*/
_setNeighbors () {
- // const curIdx = this._currentIndexInArrangeArray
- // const step = this._step
- // const newBegin = -1 - step
-
for (let i = this._showStartIdx; i <= this._showEndIdx; i++) {
const elm = this._showNodes[i].firstElementChild
elm.style.webkitTransition = `all ${NEIGHBOR_SCALE_TIME / 1000}s ease`
@@ -511,11 +515,19 @@ export default {
},
_next () {
- this._slideTo(this.currentIndex + 1)
+ let next = this.currentIndex + 1
+ if (this.frameCount <= 1) {
+ next--
+ }
+ this._slideTo(next)
},
_prev () {
- this._slideTo(this.currentIndex - 1)
+ let prev = this.currentIndex - 1
+ if (this.frameCount <= 1) {
+ prev++
+ }
+ this._slideTo(prev)
},
_handleTouchStart (event) {
@@ -564,7 +576,6 @@ export default {
this._nodesOffsetCleared = true
this._clearNodesOffset()
}
- // TODO: add throttle.
this._emitScrollEvent('scroll', {
offsetXRatio: offsetX / this.wrapperWidth
})
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c2a853b5/html5/render/vue/components/slider/slider.css
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/slider.css b/html5/render/vue/components/slider/slider.css
index dbcb999..4e0f9c2 100644
--- a/html5/render/vue/components/slider/slider.css
+++ b/html5/render/vue/components/slider/slider.css
@@ -20,7 +20,7 @@
top: 0px;
left: 0px;
background: transparent !important;
- overflow: visible !important;
+ overflow: hidden;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
@@ -28,3 +28,7 @@
-webkit-justify-content: center;
justify-content: center;
}
+
+.neighbor-cell {
+ overflow: visible !important;
+}
\ No newline at end of file
[09/20] incubator-weex git commit: * [html5] release v0.11.43 & fix
init multiple times.
Posted by ta...@apache.org.
* [html5] release v0.11.43 & fix init multiple times.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/5350069b
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/5350069b
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/5350069b
Branch: refs/heads/0.13-dev
Commit: 5350069bee1a4295c0552b19a3262b64e810caad
Parents: 2ec3fa8
Author: MrRaindrop <te...@gmail.com>
Authored: Fri May 26 16:14:35 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Fri May 26 16:14:35 2017 +0800
----------------------------------------------------------------------
package.json | 2 +-
packages/weex-vue-render/README.md | 23 ++++++++++++++++++++++-
packages/weex-vue-render/package.json | 2 +-
3 files changed, 24 insertions(+), 3 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/5350069b/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 421ada9..502cede 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"subversion": {
"browser": "0.5.0",
"framework": "0.20.6",
- "vue-render": "0.11.42",
+ "vue-render": "0.11.43",
"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/5350069b/packages/weex-vue-render/README.md
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/README.md b/packages/weex-vue-render/README.md
index d41f777..e2f39d0 100644
--- a/packages/weex-vue-render/README.md
+++ b/packages/weex-vue-render/README.md
@@ -4,7 +4,28 @@ This is a group of Vue 2.x components for Weex, which have the same behavior wit
It can be run on browser only based on Vue 2.x (without Weex).
-## use vue-loader
+## how to use
+
+If you prefer npm way, you should manually call `init` function to pass Vue constructor to weex.
+
+```javascript
+import Vue from 'vue'
+import weex from 'weex-vue-render'
+weex.init(Vue)
+
+import App from 'App.vue'
+new Vue(App)
+```
+
+If you perfer cdn way, and use script tag to import a script link, just import it into your html file, it will auto-init and you can just ignore it.
+
+```html
+<script>{{Vue}}</script>
+<script>{{weex-vue-render}}</script>
+<script>{{your js bundle}}</script>
+```
+
+## 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.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/5350069b/packages/weex-vue-render/package.json
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json
index 8cc0c47..b165279 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.42",
+ "version": "0.11.43",
"description": "Weex built-in components for Vue 2.x.",
"license": "Apache-2.0",
"main": "dist/index.js",
[03/20] incubator-weex git commit: * [html5] export init method to
weex.
Posted by ta...@apache.org.
* [html5] export init method to weex.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/91370924
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/91370924
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/91370924
Branch: refs/heads/0.13-dev
Commit: 913709244cd6d0cf1ff1253d4d2005299e5954c3
Parents: 7a6b69a
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 15:24:28 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 15:24:28 2017 +0800
----------------------------------------------------------------------
html5/render/vue/index.js | 4 ++++
package.json | 2 +-
packages/weex-vue-render/package.json | 2 +-
3 files changed, 6 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/91370924/html5/render/vue/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/index.js b/html5/render/vue/index.js
index d821b54..3cec4ca 100644
--- a/html5/render/vue/index.js
+++ b/html5/render/vue/index.js
@@ -29,7 +29,9 @@ import { base, style } from './mixins'
* - components.
* - modules.
*/
+let _inited = false
function init (Vue/*, options = {}*/) {
+ if (_inited) { return }
setVue(Vue)
Vue.prototype.$getConfig = () => {
@@ -64,6 +66,8 @@ if (typeof window !== 'undefined' && window.Vue) {
init(window.Vue)
}
+weex.init = init
+
// perf stat for componentCount.
window._component_count = 0
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/91370924/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 16779e1..421ada9 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"subversion": {
"browser": "0.5.0",
"framework": "0.20.6",
- "vue-render": "0.11.41",
+ "vue-render": "0.11.42",
"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/91370924/packages/weex-vue-render/package.json
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json
index 6f17d2d..8cc0c47 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.41",
+ "version": "0.11.42",
"description": "Weex built-in components for Vue 2.x.",
"license": "Apache-2.0",
"main": "dist/index.js",
[10/20] incubator-weex git commit: Merge branch '0.13-dev-web' into
0.13-dev-web-slider-refactor
Posted by ta...@apache.org.
Merge branch '0.13-dev-web' into 0.13-dev-web-slider-refactor
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/f2bd1280
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/f2bd1280
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/f2bd1280
Branch: refs/heads/0.13-dev
Commit: f2bd1280fd8885835e19c17da83b62010a4ef2ec
Parents: 56177b3 5350069
Author: MrRaindrop <te...@gmail.com>
Authored: Sat May 27 11:02:47 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sat May 27 11:02:47 2017 +0800
----------------------------------------------------------------------
html5/render/vue/mixins/scrollable.js | 7 +++----
package.json | 2 +-
packages/weex-vue-render/README.md | 23 ++++++++++++++++++++++-
packages/weex-vue-render/package.json | 2 +-
4 files changed, 27 insertions(+), 7 deletions(-)
----------------------------------------------------------------------
[04/20] incubator-weex git commit: Merge branch '0.13-dev-web' into
0.13-dev-web-slider-refactor
Posted by ta...@apache.org.
Merge branch '0.13-dev-web' into 0.13-dev-web-slider-refactor
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/4853e3df
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/4853e3df
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/4853e3df
Branch: refs/heads/0.13-dev
Commit: 4853e3df10cb521a3a6a518258affa8dc3b6024f
Parents: c6c1abf 9137092
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 15:25:48 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 15:25:48 2017 +0800
----------------------------------------------------------------------
html5/render/vue/index.js | 4 ++++
package.json | 2 +-
packages/weex-vue-render/package.json | 2 +-
3 files changed, 6 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
[02/20] incubator-weex git commit: * [html5] fix hello
Posted by ta...@apache.org.
* [html5] fix hello
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/c6c1abfd
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/c6c1abfd
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/c6c1abfd
Branch: refs/heads/0.13-dev
Commit: c6c1abfd07fd65eebd2a8ae3a50e5e2cdfc88629
Parents: 84ad685
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 25 11:23:39 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 25 11:23:39 2017 +0800
----------------------------------------------------------------------
examples/vue/hello.vue | 59 +++------------------------------------------
1 file changed, 3 insertions(+), 56 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6c1abfd/examples/vue/hello.vue
----------------------------------------------------------------------
diff --git a/examples/vue/hello.vue b/examples/vue/hello.vue
index 020181e..462ccd9 100644
--- a/examples/vue/hello.vue
+++ b/examples/vue/hello.vue
@@ -1,58 +1,5 @@
<template>
- <div class="root">
- <div class="anim" ref="anim">
- <image class="award-box" ref="awardBox" src="https://img.alicdn.com/tps/TB1qsoYPpXXXXXcaXXXXXXXXXXX-718-777.png"></image>
- </div>
- </div>
+ <div>
+ <text style="font-size: 100px;">Hello World.</text>
+ </div>
</template>
-<style scoped>
- .root {
- /*overflow: visible;*/
- position: absolute;
- left: 0px;
- right: 0px;
- top: 0px;
- bottom: 0px;
- background-color: rgba(0, 0, 0, 0.8);
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
-
- .anim {
- /*overflow: visible;*/
- position: absolute;
- left: 0px;
- right: 0px;
- top: 0px;
- bottom: 0px;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
-
- .award-box {
- position: absolute;
- top: 300px;
- left: 125px;
- width: 498px;
- height: 540px;
- }
-</style>
-<script>
- const animation = weex.requireModule('animation');
- module.exports = {
- mounted: function () {
- var testEl = this.$refs.awardBox;
- animation.transition(testEl, {
- styles: {
- transform: 'translate(250px, 100px)',
- transformOrigin: 'center center'
- },
- duration: 800, //ms
- timingFunction: 'ease',
- delay: 500 //ms
- }, null);
- }
- }
-</script>
\ No newline at end of file
[11/20] incubator-weex git commit: * [html5] fix dom.getComponentRect.
Posted by ta...@apache.org.
* [html5] fix dom.getComponentRect.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/948452fa
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/948452fa
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/948452fa
Branch: refs/heads/0.13-dev
Commit: 948452faebd7b83c6f6f21a9bf0a05af297723b6
Parents: 5350069
Author: MrRaindrop <te...@gmail.com>
Authored: Sat May 27 15:19:32 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sat May 27 15:19:32 2017 +0800
----------------------------------------------------------------------
html5/render/vue/modules/dom.js | 16 +++++++++++++---
1 file changed, 13 insertions(+), 3 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/948452fa/html5/render/vue/modules/dom.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/modules/dom.js b/html5/render/vue/modules/dom.js
index 2efccfc..8280ab5 100644
--- a/html5/render/vue/modules/dom.js
+++ b/html5/render/vue/modules/dom.js
@@ -160,22 +160,32 @@ export default {
vnode = vnode[0]
}
+ const scale = window.weex.config.env.scale
const info = { result: false }
+ const rectKeys = ['width', 'height', 'top', 'bottom', 'left', 'right']
+
+ function recalc (rect) {
+ const res = {}
+ rectKeys.forEach(key => {
+ res[key] = rect[key] / scale
+ })
+ return res
+ }
if (vnode && vnode === 'viewport') {
info.result = true
- info.size = {
+ info.size = recalc({
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
top: 0,
left: 0,
right: document.documentElement.clientWidth,
bottom: document.documentElement.clientHeight
- }
+ })
}
else if (vnode && vnode.$el) {
info.result = true
- info.size = vnode.$el.getBoundingClientRect()
+ info.size = recalc(vnode.$el.getBoundingClientRect())
}
const message = info.result ? info : {
[17/20] incubator-weex git commit: * [html5] release 0.11.44 & fix
accessing stylesheet's cssRules causing error in firefox.
Posted by ta...@apache.org.
* [html5] release 0.11.44 & fix accessing stylesheet's cssRules causing error in firefox.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/19c0a78f
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/19c0a78f
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/19c0a78f
Branch: refs/heads/0.13-dev
Commit: 19c0a78f9215a2ca52211be26cb50629af55d8f7
Parents: 804178a
Author: MrRaindrop <te...@gmail.com>
Authored: Sun Jun 4 13:35:28 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sun Jun 4 13:35:28 2017 +0800
----------------------------------------------------------------------
html5/render/vue/core/style.js | 5 ++---
package.json | 2 +-
packages/weex-vue-render/package.json | 2 +-
3 files changed, 4 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/19c0a78f/html5/render/vue/core/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js
index 5ea83a1..07e6e7b 100644
--- a/html5/render/vue/core/style.js
+++ b/html5/render/vue/core/style.js
@@ -43,11 +43,10 @@ export function getHeadStyleMap () {
* because weex's components defined non-standard style attributes, which is
* auto ignored when access rule.cssText.
*/
- if (!styleSheet.cssRules
- || (styleSheet.ownerNode.tagName.toLowerCase() === 'link')
+ if ((styleSheet.ownerNode.tagName.toLowerCase() === 'link')
|| !styleSheet.ownerNode.textContent) {
/**
- * no rules, or in a link. just ignore this. probably a link stylesheet.
+ * css in a link. just ignore this. probably a link stylesheet.
*/
return pre
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/19c0a78f/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 502cede..0d543b7 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"subversion": {
"browser": "0.5.0",
"framework": "0.20.6",
- "vue-render": "0.11.43",
+ "vue-render": "0.11.44",
"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/19c0a78f/packages/weex-vue-render/package.json
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json
index b165279..cac8980 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.43",
+ "version": "0.11.44",
"description": "Weex built-in components for Vue 2.x.",
"license": "Apache-2.0",
"main": "dist/index.js",