Skip to content
This repository has been archived by the owner on Jun 3, 2021. It is now read-only.

Commit

Permalink
* [html5] bugfix:
Browse files Browse the repository at this point in the history
  - fix waterfall: use headers below cells as footers.
  - fix issue WEEX-97.
  - fix click handler being invoked twice for switch.
  • Loading branch information
MrRaindrop committed Nov 22, 2017
1 parent cd84c57 commit 881d1db
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 26 deletions.
6 changes: 5 additions & 1 deletion html5/render/vue/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,11 +193,15 @@ vue: {

* fix image lazyloading.

#### 0.12.23
#### 0.12.24

* add try catch to accessing localStorage.
* support image sprite.

#### 0.12.25

* fix indicator position in one page slider.

## component -> dom map

| component | dom element | children | note |
Expand Down
45 changes: 38 additions & 7 deletions html5/render/vue/components/scrollable/waterfall.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,35 +93,66 @@ function getWaterfall (weex) {
_createChildren (h, rootStyle) {
const slots = this.$slots.default || []
this._headers = []
this._footers = []
this._others = []
const len = slots.length

for (let i = 0; i < len; i++) {
const vnode = slots[i]
const tag = vnode.componentOptions && vnode.componentOptions.tag
if (tag === 'refresh' || tag === 'loading') {
continue
}
if (tag === 'cell') {
break
}
if (tag === 'header') {
this._headers.push(vnode)
}
}

for (let i = len - 1; i >= 0; i--) {
const vnode = slots[i]
const tag = vnode.componentOptions && vnode.componentOptions.tag
if (tag === 'refresh' || tag === 'loading') {
continue
}
if (tag === 'cell') {
break
}
if (tag === 'header') {
this._footers.push(vnode)
}
}

this._cells = slots.filter(vnode => {
if (!vnode.tag || !vnode.componentOptions) return false
const tag = vnode.componentOptions.tag
if (tag === 'refresh' || tag === 'loading') {
this[`_${tag}`] = vnode
return false
}
if (tag === 'header') {
this._headers.push(vnode)
return false
}
if (tag !== 'cell') {
this._others.push(vnode)
return false
}
return true
})

this._reCalc(rootStyle)
this._genColumns(h)
let children = []
this._refresh && children.push(this._refresh)
children = children
.concat(this._headers)
.concat(this._others)
children = children.concat(this._headers)
// .concat(this._others)
children.push(h('html:div', {
ref: 'columns',
staticClass: 'weex-waterfall-inner-columns weex-ct'
}, this._columns))
children.push(h('html:div', {
ref: 'footers',
staticClass: 'weex-waterfall-footers weex-ct'
}, this._footers))
this._loading && children.push(this._loading)
return [
h('article', {
Expand Down
27 changes: 21 additions & 6 deletions html5/render/vue/components/switch.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,19 +115,34 @@ function getSwitch (weex) {
}
},

mounted () {
const el = this.$el
if (el && el.nodeType === 1) {
if (!this._removeClickHandler) {
const handler = evt => {
this.toggle()
}
this._removeClickHandler = el.removeEventListener.bind(el, 'click', handler)
el.addEventListener('click', handler)
}
}
},

beforeDestroy () {
const rm = this._removeClickHandler
if (rm) {
rm()
delete this._removeClickHandler
}
},

render (createElement) {
/* istanbul ignore next */
// if (process.env.NODE_ENV === 'development') {
// validateStyles('switch', this.$vnode.data && this.$vnode.data.staticStyle)
// }
return createElement('span', {
attrs: { 'weex-type': 'switch' },
on: {
click: event => {
this.$emit('click', event)
this.toggle()
}
},
staticClass: this.wrapperClass,
staticStyle: extractComponentStyle(this)
}, [createElement('small', { staticClass: 'weex-switch-inner' })])
Expand Down
24 changes: 15 additions & 9 deletions html5/render/vue/core/style.js
Original file line number Diff line number Diff line change
Expand Up @@ -225,13 +225,13 @@ export function getComponentStyle (context, extract) {
}
return {}
}
let style = {}
const style = {}
let vnode = context.$vnode
while (vnode) {
extend(style, getStyle(vnode, extract))
vnode = vnode.parent
}
style = autoPrefix(style)
const prefixedStyle = autoPrefix(style)
/**
* when prefixed value is a array, it should be applied to element
* during the next tick.
Expand All @@ -245,9 +245,9 @@ export function getComponentStyle (context, extract) {
* "linear-gradient(to top,#f5fefd,#ffffff)"]
* }
*/
for (const k in style) {
if (Array.isArray(style[k])) {
const vals = style[k]
for (const k in prefixedStyle) {
if (Array.isArray(prefixedStyle[k])) {
const vals = prefixedStyle[k]
context.$nextTick(function () {
const el = context.$el
if (el) {
Expand All @@ -256,14 +256,20 @@ export function getComponentStyle (context, extract) {
}
}
})
if (k !== 'position') { delete style[k] }
if (k !== 'position') {
/**
* Should not delete prefixedStyle[k] directly. Otherwise will
* trigger issue: https://issues.apache.org/jira/projects/WEEX/issues/WEEX-97
*/
prefixedStyle[k] = style[k]
}
}
}

/**
* If position is 'sticky', then add it to the stickyChildren of the parent scroller.
*/
const pos = style.position
const pos = prefixedStyle.position
const reg = /sticky$/
if (pos === 'fixed') {
context.$nextTick(function () {
Expand All @@ -274,7 +280,7 @@ export function getComponentStyle (context, extract) {
})
}
else if (isArray(pos) && pos[0].match(reg) || (pos + '').match(reg)) {
delete style.position
delete prefixedStyle.position
// use native sticky.
if (supportSticky()) {
context.$nextTick(function () {
Expand Down Expand Up @@ -304,7 +310,7 @@ export function getComponentStyle (context, extract) {
}
}

return style
return prefixedStyle
}

export function extractComponentStyle (context) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"subversion": {
"browser": "0.5.0",
"framework": "0.22.4",
"vue-render": "0.12.24",
"vue-render": "0.12.25",
"transformer": ">=0.1.5 <0.5"
},
"description": "A framework for building Mobile cross-platform UI",
Expand Down
6 changes: 5 additions & 1 deletion packages/weex-vue-render/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,11 +193,15 @@ vue: {

* fix image lazyloading.

#### 0.12.23
#### 0.12.24

* add try catch to accessing localStorage.
* support image sprite.

#### 0.12.25

* fix indicator position in one page slider.

## component -> dom map

| component | dom element | children | note |
Expand Down
2 changes: 1 addition & 1 deletion packages/weex-vue-render/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "weex-vue-render",
"version": "0.12.24",
"version": "0.12.25",
"description": "Weex built-in components for Vue 2.x.",
"license": "Apache-2.0",
"main": "dist/index.common.js",
Expand Down

1 comment on commit 881d1db

@gurisxie
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR has been merged and will close soon, thanks ^_^

Please sign in to comment.