weex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sospar...@apache.org
Subject [28/37] incubator-weex git commit: [weex-vue-render] add some features including:
Date Wed, 28 Jun 2017 08:46:19 GMT
[weex-vue-render] add some features including:

+ [html5] add 'loadmore' event to horizontal scroller.

* [html5] fix slider's autoplay.

+ [html5] release v0.11.51 @notdanger.

* [html5] fix slider auto-play

+ [html5] support pseudo class.


Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/45677545
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/45677545
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/45677545

Branch: refs/heads/0.15-dev
Commit: 456775451532bba975612e0a8bab08067ced502c
Parents: 06232f2
Author: MrRaindrop <tekkahs@gmail.com>
Authored: Fri Jun 23 14:52:50 2017 +0800
Committer: MrRaindrop <tekkahs@gmail.com>
Committed: Mon Jun 26 18:00:16 2017 +0800

----------------------------------------------------------------------
 html5/render/vue/README.md                      | 19 +++++++++-
 .../render/vue/components/slider/slideMixin.js  | 24 +++++++------
 html5/render/vue/core/style.js                  | 31 ++++++++++++----
 html5/render/vue/mixins/scrollable.js           | 38 ++++++++++++--------
 html5/render/vue/utils/style.js                 | 28 +++++++++++++++
 package.json                                    |  2 +-
 packages/weex-vue-render/package.json           |  2 +-
 7 files changed, 108 insertions(+), 36 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/README.md
----------------------------------------------------------------------
diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md
index e2f39d0..f0d3ba8 100644
--- a/html5/render/vue/README.md
+++ b/html5/render/vue/README.md
@@ -27,7 +27,24 @@ If you perfer cdn way, and use script tag to import a script link, just
import i
 
 ## use vue-loader to bundle .vue file
 
-**NOTE: ** after `v0.11.3` there's no need to add `$processStyle` and `autoprefixer` in your
vue-loader config anymore. The runtime render will take care of it once for all.
+NOTE: you should inject `$processStyle` to preprocess vnode's style in vue-loader's postTransformNode
hook.
+
+```javascript
+vue: {
+  /**
+    * important! should use postTransformNode to add $processStyle for
+    * inline style prefixing.
+    */
+  compilerModules: [
+    {
+      postTransformNode: el => {
+        el.staticStyle = `$processStyle(${el.staticStyle})`
+        el.styleBinding = `$processStyle(${el.styleBinding})`
+      }
+    }
+  ],
+}
+```
 
 ## component -> dom map
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/components/slider/slideMixin.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/slideMixin.js b/html5/render/vue/components/slider/slideMixin.js
index da2c848..73960e5 100644
--- a/html5/render/vue/components/slider/slideMixin.js
+++ b/html5/render/vue/components/slider/slideMixin.js
@@ -48,7 +48,6 @@ export default {
   },
 
   updated () {
-    this._startAutoPlay()
     const children = this.$children
     const len = children && children.length
     if (children && len > 0) {
@@ -69,7 +68,6 @@ export default {
 
   mounted () {
     this._getWrapperSize()
-    this._startAutoPlay()
     this._slideTo(this.currentIndex)
     fireLazyload(this.$el, true)
   },
@@ -79,8 +77,8 @@ export default {
       const wrapper = this.$refs.wrapper
       if (wrapper) {
         const rect = wrapper.getBoundingClientRect()
-        this.wrapperWidth = rect.width
-        this.wrapperHeight = rect.height
+        this._wrapperWidth = rect.width
+        this._wrapperHeight = rect.height
       }
     },
 
@@ -198,7 +196,7 @@ export default {
         const match = translate && translate.match(/translate[^(]+\(([+-\d.]+)/)
         const innerX = match && match[1] || 0
         const dist = innerX - this.innerOffset
-        this.innerOffset += step * this.wrapperWidth
+        this.innerOffset += step * this._wrapperWidth
         // transform the whole slides group.
         inner.style.webkitTransition = `-webkit-transform ${TRANSITION_TIME / 1000}s ease-in-out`
         inner.style.transition = `transform ${TRANSITION_TIME / 1000}s ease-in-out`
@@ -341,7 +339,7 @@ export default {
       }
 
       node._inShow = true
-      const translateX = index * this.wrapperWidth - this.innerOffset
+      const translateX = index * this._wrapperWidth - this.innerOffset
       addTransform(node, {
         translate: `translate3d(${translateX}px, 0px, 0px)`
       })
@@ -439,7 +437,7 @@ export default {
       origNode._inShow = true
       const transObj = getTransformObj(clone)
       transObj.translate = transObj.translate.replace(/[+-\d.]+[pw]x/, ($0) => {
-        return pos * this.wrapperWidth - this.innerOffset + 'px'
+        return pos * this._wrapperWidth - this.innerOffset + 'px'
       })
       this._copyStyle(clone, origNode, styleProps, transObj)
       this._removeClone(clone)
@@ -456,6 +454,10 @@ export default {
         this.currentIndex = 0
         return
       }
+
+      // clear autoPlay timer (and restart after updated hook).
+      this._startAutoPlay()
+
       /**
        * clean nodes. replace current node with non-cloned node.
        * set current index to the new index.
@@ -505,7 +507,7 @@ export default {
         }
         // calculate position offsets according to neighbor scales.
         if (Math.abs(i) === 1) {
-          const dist = ((this.wrapperWidth - this._neighborWidth * this.neighborScale) /
2
+          const dist = ((this._wrapperWidth - this._neighborWidth * this.neighborScale) /
2
             + this.neighborSpace * weex.config.env.scale) / this.neighborScale
           translateX = -i * dist
         }
@@ -582,7 +584,7 @@ export default {
           this._clearNodesOffset()
         }
         this._emitScrollEvent('scroll', {
-          offsetXRatio: offsetX / this.wrapperWidth
+          offsetXRatio: offsetX / this._wrapperWidth
         })
         inner.style.transform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)`
         inner.style.webkitTransform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)`
@@ -602,7 +604,7 @@ export default {
       if (inner) {
         this._nodesOffsetCleared = false
         // TODO: test the velocity if it's less than 0.2.
-        const reset = Math.abs(offsetX / this.wrapperWidth) < 0.2
+        const reset = Math.abs(offsetX / this._wrapperWidth) < 0.2
         const direction = offsetX > 0 ? 1 : -1
         const newIndex = reset ? this.currentIndex : (this.currentIndex - direction)
         this._slideTo(newIndex, true)
@@ -623,7 +625,7 @@ export default {
       const throttleTime = THROTTLE_SCROLL_TIME
       const cnt = parseInt(TRANSITION_TIME / throttleTime) - 1
       const sign = offset > 0 ? 1 : -1
-      const r = Math.abs(offset / this.wrapperWidth)
+      const r = Math.abs(offset / this._wrapperWidth)
       const throttledScroll = () => {
         if (++i > cnt) {
           return callback && callback.call(this)

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/core/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js
index 063c1e5..7230b74 100644
--- a/html5/render/vue/core/style.js
+++ b/html5/render/vue/core/style.js
@@ -26,11 +26,13 @@ import {
   autoPrefix,
   isArray,
   getParentScroller,
-  supportSticky
+  supportSticky,
+  appendCss
 } from '../utils'
 import { tagBegin, tagEnd } from '../utils/perf'
 /* istanbul ignore next */
 
+let pseudoId = 0
 /**
  * get scoped class style map from stylesheets in <head>.
  */
@@ -55,6 +57,9 @@ export function getHeadStyleMap () {
          */
         return pre
       }
+      if (styleSheet.ownerNode.id.match(/weex-pseudo-\d+/)) {
+        return pre
+      }
       const strArr = trimComment(styleSheet.ownerNode.textContent.trim()).split(/}/)
       const len = strArr.length
       const rules = []
@@ -65,7 +70,8 @@ export function getHeadStyleMap () {
         }
         /**
          * should match these cases:
-         * .a[data-v-xxx] { color: red }
+         * .a[data-v-xxx] { color: red; }
+         * .a[data-v-xxx]:active { color: green; }
          * .a[data-v-xxx], .b[data-v-xxx] { color: red; }
          *
          * should not match these cases:
@@ -92,6 +98,10 @@ export function getHeadStyleMap () {
       }
       Array.from(rules).forEach(rule => {
         const selector = rule.selectorText || ''
+        let isPseudo = false
+        if (selector.match(/:(?:active|focus|enabled|disabled)/)) {
+          isPseudo = true
+        }
         const styleObj = trimComment(rule.cssText).split(';')
           .reduce((styleObj, statement) => {
             statement = statement.trim()
@@ -101,12 +111,19 @@ export function getHeadStyleMap () {
             }
             return styleObj
           }, {})
-        const res = pre[selector]
+        if (isPseudo) {
+          const txt = Object.keys(styleObj).reduce(function (pre, cur) {
+            return pre + `${cur}:${styleObj[cur]}!important;`
+          }, '')
+          appendCss(`${selector}{${txt}}`, `weex-pseudo-${pseudoId++}`)
+        }
+        const objMap = !isPseudo ? pre : pre.pseudo
+        const res = objMap[selector]
         if (!res) {
-          pre[selector] = styleObj
+          objMap[selector] = styleObj
         }
         else {
-          extend(pre[selector], styleObj)
+          extend(objMap[selector], styleObj)
         }
       })
       /**
@@ -116,7 +133,7 @@ export function getHeadStyleMap () {
        */
       needToRemoveStyleSheetNodes.push(styleSheet.ownerNode)
       return pre
-    }, {})
+    }, { pseudo: {}})
   if (!window._no_remove_style_sheets) {
     needToRemoveStyleSheetNodes.forEach(function (node) {
       node.parentNode.removeChild(node)
@@ -301,7 +318,7 @@ export function processSticky (context) {
     return
   }
   // current only support list and vertical scroller.
-  if (container.scrollDirection === 'horizontal') {
+  if (context.scrollDirection === 'horizontal') {
     return
   }
   const stickyChildren = context._stickyChildren

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/mixins/scrollable.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/scrollable.js b/html5/render/vue/mixins/scrollable.js
index 011c8e0..4f7b03c 100644
--- a/html5/render/vue/mixins/scrollable.js
+++ b/html5/render/vue/mixins/scrollable.js
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { getThrottleLazyload, throttle } from '../utils'
+import { getThrottleLazyload, throttle, getRangeWidth } from '../utils'
 import { processSticky } from '../core'
 
 const DEFAULT_OFFSET_ACCURACY = 10
@@ -97,8 +97,20 @@ export default {
       const wrapper = this.$refs.wrapper
       if (wrapper) {
         const rect = wrapper.getBoundingClientRect()
-        this.wrapperWidth = rect.width
-        this.wrapperHeight = rect.height
+        this._wrapperWidth = rect.width
+        this._wrapperHeight = rect.height
+      }
+      const inner = this.$refs.inner
+      const children = inner && inner.children
+      if (inner) {
+        const rect = inner.getBoundingClientRect()
+        this._innerWidth = rect.width
+        this._innerHeight = rect.height
+      }
+      // inner width is always the viewport width somehow in horizontal
+      // scoller, therefore the inner width should be reclaculated.
+      if (this.scrollDirection === 'horizontal' && children) {
+        this._innerWidth = getRangeWidth(inner)
       }
     },
 
@@ -115,19 +127,13 @@ export default {
       // fire loadmore event.
       const inner = this.$refs.inner
       if (inner) {
-        const innerRect = inner.getBoundingClientRect()
         const innerLength = this.scrollDirection === 'horizontal'
-          ? innerRect.width
-          : innerRect.height
-        // hscroller not support loadmore event yet.
-        if (this.scrollDirection === 'horizontal') {
-          return
-        }
+          ? this._innerWidth
+          : this._innerHeight
         if (!this._innerLength) {
           this._innerLength = innerLength
         }
         if (this._innerLength !== innerLength) {
-          console.log(this._innerLength, innerLength)
           this._innerLength = innerLength
           this._loadmoreReset = true
         }
@@ -149,13 +155,15 @@ export default {
       const offset = parseInt(this.loadmoreoffset) * weex.config.env.scale
 
       if (wrapper && inner) {
-        const innerRect = inner.getBoundingClientRect()
-        const wrapperRect = wrapper.getBoundingClientRect()
+        // const innerRect = inner.getBoundingClientRect()
+        // const wrapperRect = wrapper.getBoundingClientRect()
         const key = this.scrollDirection === 'horizontal'
           ? 'width'
           : 'height'
-        const innerLength = innerRect[key]
-        const wrapperLength = wrapperRect[key]
+        // const innerLength = innerRect[key]
+        // const wrapperLength = wrapperRect[key]
+        const innerLength = this[`_inner${key[0].toUpperCase()}${key.substr(1)}`]
+        const wrapperLength = this[`_wrapper${key[0].toUpperCase()}${key.substr(1)}`]
         const scrollOffset = this.scrollDirection === 'horizontal'
           ? wrapper.scrollLeft
           : wrapper.scrollTop

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/html5/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index a9f7ef1..0d74721 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -303,3 +303,31 @@ export function getStyleSheetById (id?: string) {
     }
   }
 }
+
+function getChildrenTotalWidth (children) {
+  const len = children.length
+  let total = 0
+  for (let i = 0; i < len; i++) {
+    total += children[i].getBoundingClientRect().width
+  }
+  return total
+}
+/**
+ * get total content width of the element.
+ * @param {HTMLElement} elm
+ */
+export function getRangeWidth (elm: HTMLElement) {
+  const children = elm.children
+  if (!children) {
+    return elm.getBoundingClientRect().width
+  }
+  if (!Range) {
+    return getChildrenTotalWidth(children)
+  }
+  const range = document.createRange()
+  if (!range.selectNodeContents) {
+    return getChildrenTotalWidth(children)
+  }
+  range.selectNodeContents(elm)
+  return range.getBoundingClientRect().width
+}

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 381190f..0a9e951 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "subversion": {
     "browser": "0.5.0",
     "framework": "0.20.6",
-    "vue-render": "0.11.50",
+    "vue-render": "0.11.51",
     "transformer": ">=0.1.5 <0.5"
   },
   "description": "A framework for building Mobile cross-platform UI",

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/45677545/packages/weex-vue-render/package.json
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json
index e97525f..80d6443 100644
--- a/packages/weex-vue-render/package.json
+++ b/packages/weex-vue-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "weex-vue-render",
-  "version": "0.11.50",
+  "version": "0.11.51",
   "description": "Weex built-in components for Vue 2.x.",
   "license": "Apache-2.0",
   "main": "dist/index.js",


Mime
View raw message