You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by da...@apache.org on 2017/08/03 13:43:42 UTC
[06/12] incubator-weex git commit: * [html5] bug fix for dom
getComponentRect
* [html5] bug fix for 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/dbccd895
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/dbccd895
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/dbccd895
Branch: refs/heads/0.16-dev
Commit: dbccd895a28223c9bf3c4682df36a2c698289409
Parents: 8df4ccb
Author: erha19 <fa...@gmail.com>
Authored: Wed Aug 2 10:53:00 2017 +0800
Committer: erha19 <fa...@gmail.com>
Committed: Wed Aug 2 10:53:00 2017 +0800
----------------------------------------------------------------------
examples/vue/components/scroller.vue | 9 +-
.../vue/components/scrollable/scroller.js | 1 -
html5/render/vue/modules/dom.js | 107 ++++++++-----------
3 files changed, 51 insertions(+), 66 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/dbccd895/examples/vue/components/scroller.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/scroller.vue b/examples/vue/components/scroller.vue
index f829120..8336ea0 100644
--- a/examples/vue/components/scroller.vue
+++ b/examples/vue/components/scroller.vue
@@ -1,5 +1,5 @@
<template>
- <scroller class="list" append="tree">
+ <scroller class="list" append="tree" ref="scroller">
<refresh class="refresh-view" :display="refresh_display" @refresh="onrefresh" @pullingdown="pullingdown">
<img id="roate" ref="roate" src="http://gw.alicdn.com/bao/uploaded/TB1xDrVNFXXXXbEXFXXXXXXXXXX-48-48.png" style="width: 50px;height: 50px;"></img>
</refresh>
@@ -74,7 +74,14 @@
</style>
<script>
+ const dom = weex.requireModule('dom')
+ console.log(dom)
module.exports = {
+ mounted () {
+ const result = dom.getComponentRect(this.$refs.scroller, option => {
+ console.log('getComponentRect:', option)
+ })
+ },
methods: {
onrefresh: function(e) {
var self = this;
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/dbccd895/html5/render/vue/components/scrollable/scroller.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/scroller.js b/html5/render/vue/components/scrollable/scroller.js
index 4fe998c..56e83d4 100644
--- a/html5/render/vue/components/scrollable/scroller.js
+++ b/html5/render/vue/components/scrollable/scroller.js
@@ -43,7 +43,6 @@ function getScroller (weex) {
},
computed: {
wrapperClass () {
- console.log(this.scrollable)
const classArray = ['weex-scroller', 'weex-scroller-wrapper', 'weex-ct']
if (this.scrollDirection === 'horizontal') {
classArray.push('weex-scroller-horizontal')
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/dbccd895/html5/render/vue/modules/dom.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/modules/dom.js b/html5/render/vue/modules/dom.js
index 7854150..5afa660 100644
--- a/html5/render/vue/modules/dom.js
+++ b/html5/render/vue/modules/dom.js
@@ -17,14 +17,11 @@
* under the License.
*/
import config from '../config'
-
const utils = {}
function getParentScroller (vnode) {
if (!vnode) return null
- const vm = vnode.$el
- ? vnode : vnode.elm
- ? vnode.componentInstance || vnode.context : null
+ const vm = vnode.$el ? vnode : vnode.elm ? vnode.componentInstance || vnode.context : null
if (!vm) return null
const type = vm.$el && vm.$el.getAttribute('weex-type')
if (config.scrollableTypes.indexOf(type) > -1) {
@@ -34,15 +31,13 @@ function getParentScroller (vnode) {
}
function now () {
- const now = window.performance && window.performance.now
- ? window.performance.now.bind(window.performance) : Date.now
+ const now = window.performance && window.performance.now ? window.performance.now.bind(window.performance) : Date.now
return now()
}
function scrollElement (dSuffix, position) {
this[`scroll${dSuffix}`] = position
}
-
/**
* self invoked function that, given a context, steps through scrolling
* @method step
@@ -51,32 +46,25 @@ function scrollElement (dSuffix, position) {
function step (context) {
// call method again on next available frame
context.frame = window.requestAnimationFrame(step.bind(window, context))
-
const time = now()
let elapsed = (time - context.startTime) / 468
-
- // avoid elapsed times higher than one
+ // avoid elapsed times higher than one
elapsed = elapsed > 1 ? 1 : elapsed
-
- // apply easing to elapsed time
+ // apply easing to elapsed time
const value = ease(elapsed)
-
const currentPosition = context.startPosition + (context.position - context.startPosition) * value
-
context.method.call(context.scrollable, context.dSuffix, currentPosition)
-
- // return when end points have been reached
- /**
- * NOTE: should use ~~ to parse position number into integer. Otherwise
- * this two float numbers maybe have a slicely little difference, which
- * will cause this function never to stop.
- */
+ // return when end points have been reached
+ /**
+ * NOTE: should use ~~ to parse position number into integer. Otherwise
+ * this two float numbers maybe have a slicely little difference, which
+ * will cause this function never to stop.
+ */
if (~~currentPosition === ~~context.position) {
window.cancelAnimationFrame(context.frame)
return
}
}
-
/**
* returns result of applying ease math function to a number
* @method ease
@@ -86,7 +74,6 @@ function step (context) {
function ease (k) {
return 0.5 * (1 - Math.cos(Math.PI * k))
}
-
const dom = {
/**
* scrollToElement
@@ -95,21 +82,20 @@ const dom = {
* ps: scroll-to has 'ease' and 'duration'(ms) as options.
*/
scrollToElement: function (vnode, options) {
- const { isArray } = utils
+ const {
+ isArray
+ } = utils
if (isArray(vnode)) {
if (process.env.NODE_ENV === 'development') {
console.warn('[vue-render] the ref passed to animation.transitionOnce is a array.')
}
vnode = vnode[0]
}
-
const scroller = getParentScroller(vnode)
const scrollDirection = scroller && scroller.scrollDirection || 'vertical'
-
const isWindow = !scroller
const ct = isWindow ? document.body : scroller.$el
const el = vnode.$el || vnode.elm
-
if (ct && el) {
// if it's a list, then the listVnode.scrollDirection is undefined. just
// assum it is the default value 'vertical'.
@@ -117,38 +103,28 @@ const dom = {
horizontal: 'Left',
vertical: 'Top'
})[scrollDirection]
-
const ctRect = ct.getBoundingClientRect()
let elRect = el.getBoundingClientRect()
-
- /**
- * if it's a waterfall, and you want to scroll to a header, then just
- * scroll to the top.
- */
- if (scroller
- && scroller.weexType === 'waterfall'
- && scroller._headers
- && scroller._headers.indexOf(vnode.$vnode || vnode) > -1) {
+ /**
+ * if it's a waterfall, and you want to scroll to a header, then just
+ * scroll to the top.
+ */
+ if (scroller && scroller.weexType === 'waterfall' && scroller._headers && scroller._headers.indexOf(vnode.$vnode || vnode) > -1) {
// it's in waterfall. just scroll to the top.
elRect = ct.firstElementChild.getBoundingClientRect()
}
-
const dir = dSuffix.toLowerCase()
let offset = (isWindow ? 0 : ct[`scroll${dSuffix}`]) + elRect[dir] - ctRect[dir]
-
if (options) {
offset += options.offset && options.offset * weex.config.env.scale || 0
- // offset *= weex.config.env.scale /* adapt offset to different screen scales. */
+ // offset *= weex.config.env.scale /* adapt offset to different screen scales. */
}
else if (process.env.NODE_ENV === 'development') {
- console.warn('[Vue Render] The second parameter of "scrollToElement" is required, '
- + 'otherwise it may not works well on native.')
+ console.warn('[Vue Render] The second parameter of "scrollToElement" is required, ' + 'otherwise it may not works well on native.')
}
-
if (options && options.animated === false) {
return scrollElement.call(ct, dSuffix, offset)
}
-
step({
scrollable: ct,
startTime: now(),
@@ -160,23 +136,25 @@ const dom = {
})
}
},
-
/**
* getComponentRect
* @param {String} vnode
* @param {Function} callback
*/
getComponentRect: function (vnode, callback) {
- const { isArray } = utils
+ const {
+ isArray
+ } = utils
if (isArray(vnode)) {
if (process.env.NODE_ENV === 'development') {
console.warn('[vue-render] the ref passed to animation.transitionOnce is a array.')
}
vnode = vnode[0]
}
-
const scale = window.weex.config.env.scale
- const info = { result: false }
+ const info = {
+ result: false
+ }
const rectKeys = ['width', 'height', 'top', 'bottom', 'left', 'right']
function recalc (rect) {
@@ -188,7 +166,6 @@ const dom = {
})
return res
}
-
if (vnode && vnode === 'viewport') {
info.result = true
info.size = recalc({
@@ -207,28 +184,36 @@ const dom = {
else if (vnode && vnode.$el) {
info.result = true
info.size = recalc(vnode.$el.getBoundingClientRect())
- info.contentSize = recalc({
- width: vnode.$el.offsetWidth,
- height: vnode.$el.offsetHeight
- })
+ if (vnode.$refs.inner) {
+ info.contentSize = recalc({
+ width: vnode.$refs.inner.offsetWidth,
+ height: vnode.$refs.inner.offsetHeight
+ })
+ }
+ else {
+ info.contentSize = recalc({
+ width: vnode.$el.offsetWidth,
+ height: vnode.$el.offsetHeight
+ })
+ }
}
-
const message = info.result ? info : {
result: false,
errMsg: 'Illegal parameter'
}
-
callback && callback(message)
return message
},
-
/**
* for adding fontFace
* @param {string} key fontFace
* @param {object} styles rules
*/
addRule: function (key, styles) {
- const { camelToKebab, appendCss } = utils
+ const {
+ camelToKebab,
+ appendCss
+ } = utils
key = camelToKebab(key)
let stylesText = ''
for (const k in styles) {
@@ -240,16 +225,10 @@ const dom = {
appendCss(styleText, 'dom-added-rules')
}
}
-
export default {
init (weex) {
const extendKeys = weex.utils.extendKeys
- extendKeys(utils, weex.utils, [
- 'camelToKebab',
- 'appendCss',
- 'isArray'
- ])
-
+ extendKeys(utils, weex.utils, ['camelToKebab', 'appendCss', 'isArray'])
weex.registerModule('dom', dom)
}
}