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/22 02:38:58 UTC
[1/4] incubator-weex git commit: * [html5] update fetching style map
in every instance initiation.
Repository: incubator-weex
Updated Branches:
refs/heads/0.14-dev 8983f244f -> 15c7cd029
* [html5] update fetching style map in every instance initiation.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/5fdd99ff
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/5fdd99ff
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/5fdd99ff
Branch: refs/heads/0.14-dev
Commit: 5fdd99ff830b0b65f4b5abe9a7460d4467f82914
Parents: b6c9d0e
Author: MrRaindrop <te...@gmail.com>
Authored: Wed Jun 21 12:13:50 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Wed Jun 21 12:13:50 2017 +0800
----------------------------------------------------------------------
html5/render/vue/components/index.js | 4 ++--
html5/render/vue/mixins/style.js | 11 ++++++++---
2 files changed, 10 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/5fdd99ff/html5/render/vue/components/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/index.js b/html5/render/vue/components/index.js
index 68c5739..87ddeb0 100644
--- a/html5/render/vue/components/index.js
+++ b/html5/render/vue/components/index.js
@@ -35,7 +35,7 @@ import indicator from './slider/indicator'
// import loading from './warning'
import refresh from './scrollable/refresh'
import loading from './scrollable/loading'
-import LoadingIndicator from './scrollable/loading-indicator'
+import loadingIndicator from './scrollable/loading-indicator'
import text from './text'
import textarea from './textarea'
import video from './video'
@@ -60,7 +60,7 @@ export default {
indicator,
refresh,
loading,
- LoadingIndicator,
+ 'loading-indicator': loadingIndicator,
text,
textarea,
video,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/5fdd99ff/html5/render/vue/mixins/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/style.js b/html5/render/vue/mixins/style.js
index 6fe9bb2..394c1ab 100644
--- a/html5/render/vue/mixins/style.js
+++ b/html5/render/vue/mixins/style.js
@@ -24,7 +24,8 @@ import {
import {
normalizeStyle,
- camelizeKeys
+ camelizeKeys,
+ extend
} from '../utils'
export default {
@@ -34,8 +35,12 @@ export default {
* Weex.on will create a Vue instance. In this case we'll ignore it, since
* it's not sure whether the scoped style has already attached to head or not.
*/
- if (!weex.styleMap && this.$options && this.$options._scopeId) {
- weex.styleMap = getHeadStyleMap()
+ if (this === this.$root && this.$options && !this._styleMapGot) {
+ if (!weex.styleMap) {
+ weex.styleMap = {}
+ }
+ this._styleMapGot = true
+ extend(weex.styleMap, getHeadStyleMap())
}
},
[4/4] incubator-weex git commit: Merge branch '0.14-dev' of
https://github.com/MrRaindrop/incubator-weex into 0.14-dev
Posted by ta...@apache.org.
Merge branch '0.14-dev' of https://github.com/MrRaindrop/incubator-weex into 0.14-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/15c7cd02
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/15c7cd02
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/15c7cd02
Branch: refs/heads/0.14-dev
Commit: 15c7cd02934e506af3d18d539827c19b6de4727e
Parents: 8983f24 76ab14b
Author: tancy <ro...@gmail.com>
Authored: Thu Jun 22 10:38:46 2017 +0800
Committer: tancy <ro...@gmail.com>
Committed: Thu Jun 22 10:38:46 2017 +0800
----------------------------------------------------------------------
html5/render/vue/components/index.js | 4 +-
.../components/scrollable/loading-indicator.js | 138 ++++++++++++++++++-
html5/render/vue/mixins/style.js | 11 +-
html5/render/vue/styles/base.css | 56 --------
html5/render/vue/utils/func.js | 30 ++++
html5/render/vue/utils/style.js | 33 +++++
6 files changed, 210 insertions(+), 62 deletions(-)
----------------------------------------------------------------------
[2/4] incubator-weex git commit: * [html5] support updating
loading-indicator's color @notdanger.
Posted by ta...@apache.org.
* [html5] support updating loading-indicator's color @notdanger.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/40a6f13a
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/40a6f13a
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/40a6f13a
Branch: refs/heads/0.14-dev
Commit: 40a6f13a7261e8dbb5606e5f92e999abbebcd4df
Parents: 5fdd99f
Author: MrRaindrop <te...@gmail.com>
Authored: Wed Jun 21 16:52:55 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Wed Jun 21 17:26:44 2017 +0800
----------------------------------------------------------------------
.../components/scrollable/loading-indicator.js | 138 ++++++++++++++++++-
html5/render/vue/styles/base.css | 56 --------
html5/render/vue/utils/func.js | 30 ++++
html5/render/vue/utils/style.js | 33 +++++
4 files changed, 200 insertions(+), 57 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/40a6f13a/html5/render/vue/components/scrollable/loading-indicator.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/loading-indicator.js b/html5/render/vue/components/scrollable/loading-indicator.js
index 897d568..d2746a5 100644
--- a/html5/render/vue/components/scrollable/loading-indicator.js
+++ b/html5/render/vue/components/scrollable/loading-indicator.js
@@ -17,6 +17,7 @@
* under the License.
*/
import { extractComponentStyle } from '../../core'
+import { getRgb, loopArray } from '../../utils'
const _css = `
.weex-refresh-indicator,
@@ -49,8 +50,143 @@ const _css = `
-webkit-animation: weex-spinner 1.1s infinite ease;
animation: weex-spinner 1.1s infinite ease;
}
+
+@-webkit-keyframes weex-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0em -1.3em 0em 0em #ffffff, 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.5), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7);
+ }
+ 11.25% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.7), 0.9em -0.9em 0 0em #ffffff, 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5);
+ }
+ 25% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.5), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7), 1.25em 0em 0 0em #ffffff, 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 37.5% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5), 1.25em 0em 0 0em rgba(255, 255, 255, 0.7), 0.875em 0.875em 0 0em #ffffff, 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 50% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.5), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.7), 0em 1.25em 0 0em #ffffff, -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 61.25% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.5), 0em 1.25em 0 0em rgba(255, 255, 255, 0.7), -0.9em 0.9em 0 0em #ffffff, -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 75% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.5), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.7), -1.3em 0em 0 0em #ffffff, -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 87.5% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.5), -1.3em 0em 0 0em rgba(255, 255, 255, 0.7), -0.9em -0.9em 0 0em #ffffff;
+ }
+}
+
+@keyframes weex-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0em -1.3em 0em 0em #ffffff, 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.5), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7);
+ }
+ 11.25% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.7), 0.9em -0.9em 0 0em #ffffff, 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5);
+ }
+ 25% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.5), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7), 1.25em 0em 0 0em #ffffff, 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 37.5% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5), 1.25em 0em 0 0em rgba(255, 255, 255, 0.7), 0.875em 0.875em 0 0em #ffffff, 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 50% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.5), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.7), 0em 1.25em 0 0em #ffffff, -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 61.25% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.5), 0em 1.25em 0 0em rgba(255, 255, 255, 0.7), -0.9em 0.9em 0 0em #ffffff, -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 75% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.5), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.7), -1.3em 0em 0 0em #ffffff, -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
+ }
+ 87.5% {
+ box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.5), -1.3em 0em 0 0em rgba(255, 255, 255, 0.7), -0.9em -0.9em 0 0em #ffffff;
+ }
+}
`
+function getStyleSheet (spinnerVm) {
+ if (spinnerVm._styleSheet) {
+ return
+ }
+ const styleSheets = document.styleSheets
+ const len = styleSheets.length
+ for (let i = 0; i < len; i++) {
+ if (styleSheets[i].ownerNode.id === 'weex-cmp-loading-indicator') {
+ spinnerVm._styleSheet = styleSheets[i]
+ break
+ }
+ }
+}
+
+function setKeyframeColor (spinnerVm, val) {
+ getStyleSheet(spinnerVm)
+ const keyframeRules = computeKeyFrameRules(val)
+ const rules = spinnerVm._styleSheet.rules || spinnerVm._styleSheet.cssRules
+ for (let i = 0, l = rules.length; i < l; i++) {
+ const item = rules.item(i)
+ if ((item.type === CSSRule.KEYFRAMES_RULE
+ || item.type === CSSRule.WEBKIT_KEYFRAMES_RULE)
+ && item.name === 'weex-spinner') {
+ const cssRules = item.cssRules
+ for (let j = 0, m = cssRules.length; j < m; j++) {
+ const keyframe = cssRules[j]
+ if (keyframe.type === CSSRule.KEYFRAME_RULE
+ || keyframe.type === CSSRule.WEBKIT_KEYFRAME_RULE) {
+ keyframe.style.boxShadow = keyframeRules[j]
+ }
+ }
+ }
+ }
+}
+
+function computeKeyFrameRules (rgb) {
+ if (!rgb) {
+ return
+ }
+ const scaleArr = [
+ '0em -1.3em 0em 0em',
+ '0.9em -0.9em 0 0em',
+ '1.25em 0em 0 0em',
+ '0.875em 0.875em 0 0em',
+ '0em 1.25em 0 0em',
+ '-0.9em 0.9em 0 0em',
+ '-1.3em 0em 0 0em',
+ '-0.9em -0.9em 0 0em']
+ const colorArr = [
+ '1',
+ '0.2',
+ '0.2',
+ '0.2',
+ '0.2',
+ '0.2',
+ '0.5',
+ '0.7'].map(function (e) {
+ return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + e + ')'
+ })
+ const rules = []
+ for (let i = 0; i < scaleArr.length; i++) {
+ const tmpColorArr = loopArray(colorArr, i, 'r')
+ rules.push(scaleArr.map(function (scaleStr, i) {
+ return scaleStr + ' ' + tmpColorArr[i]
+ }).join(', '))
+ }
+ return rules
+}
+
+function processStyle (vm) {
+ const style = extractComponentStyle(vm)
+ const color = style.color
+ const rgb = color && getRgb(color)
+ if (!rgb) {
+ return
+ }
+ setKeyframeColor(vm, rgb)
+}
+
export default {
render (createElement) {
this.weexType = 'loading-indicator'
@@ -58,7 +194,7 @@ export default {
return createElement('mark', {
attrs: { 'weex-type': 'loading-indicator' },
staticClass: 'weex-loading-indicator weex-ct',
- staticStyle: extractComponentStyle(this)
+ staticStyle: processStyle(this)
})
},
_css
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/40a6f13a/html5/render/vue/styles/base.css
----------------------------------------------------------------------
diff --git a/html5/render/vue/styles/base.css b/html5/render/vue/styles/base.css
index 7f59e42..a9a41ff 100644
--- a/html5/render/vue/styles/base.css
+++ b/html5/render/vue/styles/base.css
@@ -148,59 +148,3 @@ body > .weex-waterfall {
width: 100%;
overflow: hidden;
}
-
-@-webkit-keyframes weex-spinner {
- 0%,
- 100% {
- box-shadow: 0em -1.3em 0em 0em #ffffff, 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.5), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7);
- }
- 11.25% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.7), 0.9em -0.9em 0 0em #ffffff, 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5);
- }
- 25% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.5), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7), 1.25em 0em 0 0em #ffffff, 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 37.5% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5), 1.25em 0em 0 0em rgba(255, 255, 255, 0.7), 0.875em 0.875em 0 0em #ffffff, 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 50% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.5), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.7), 0em 1.25em 0 0em #ffffff, -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 61.25% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.5), 0em 1.25em 0 0em rgba(255, 255, 255, 0.7), -0.9em 0.9em 0 0em #ffffff, -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 75% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.5), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.7), -1.3em 0em 0 0em #ffffff, -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 87.5% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.5), -1.3em 0em 0 0em rgba(255, 255, 255, 0.7), -0.9em -0.9em 0 0em #ffffff;
- }
-}
-
-@keyframes weex-spinner {
- 0%,
- 100% {
- box-shadow: 0em -1.3em 0em 0em #ffffff, 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.5), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7);
- }
- 11.25% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.7), 0.9em -0.9em 0 0em #ffffff, 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5);
- }
- 25% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.5), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.7), 1.25em 0em 0 0em #ffffff, 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 37.5% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.5), 1.25em 0em 0 0em rgba(255, 255, 255, 0.7), 0.875em 0.875em 0 0em #ffffff, 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 50% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.5), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.7), 0em 1.25em 0 0em #ffffff, -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.2), -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 61.25% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.5), 0em 1.25em 0 0em rgba(255, 255, 255, 0.7), -0.9em 0.9em 0 0em #ffffff, -1.3em 0em 0 0em rgba(255, 255, 255, 0.2), -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 75% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.5), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.7), -1.3em 0em 0 0em #ffffff, -0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2);
- }
- 87.5% {
- box-shadow: 0em -1.3em 0em 0em rgba(255, 255, 255, 0.2), 0.9em -0.9em 0 0em rgba(255, 255, 255, 0.2), 1.25em 0em 0 0em rgba(255, 255, 255, 0.2), 0.875em 0.875em 0 0em rgba(255, 255, 255, 0.2), 0em 1.25em 0 0em rgba(255, 255, 255, 0.2), -0.9em 0.9em 0 0em rgba(255, 255, 255, 0.5), -1.3em 0em 0 0em rgba(255, 255, 255, 0.7), -0.9em -0.9em 0 0em #ffffff;
- }
-}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/40a6f13a/html5/render/vue/utils/func.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/func.js b/html5/render/vue/utils/func.js
index 1af34ea..38a0435 100644
--- a/html5/render/vue/utils/func.js
+++ b/html5/render/vue/utils/func.js
@@ -19,6 +19,8 @@
// @flow
+import { isArray } from './type'
+
/**
* Mix properties into target object.
* the rightest object's value has the highest priority.
@@ -148,3 +150,31 @@ export function throttle (func: Function, wait: number, callLastTime: boolean) {
}
}
}
+
+// direction: 'l' | 'r', default is 'r'
+// num: how many times to loop, should be a positive integer
+export function loopArray (arr: any, num: number, direction: string) {
+ if (!isArray(arr)) {
+ return
+ }
+ let isLeft = (direction + '').toLowerCase() === 'l'
+ const len = arr.length
+ num = num % len
+ if (num < 0) {
+ num = -num
+ isLeft = !isLeft
+ }
+ if (num === 0) {
+ return arr
+ }
+ let lp, rp
+ if (isLeft) {
+ lp = arr.slice(0, num)
+ rp = arr.slice(num)
+ }
+ else {
+ lp = arr.slice(0, len - num)
+ rp = arr.slice(len - num)
+ }
+ return rp.concat(lp)
+}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/40a6f13a/html5/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index bb12934..5df3750 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -254,3 +254,36 @@ export function copyTransform (from: HTMLElement, to: HTMLElement, key: string |
to.style.webkitTransform = str
to.style.transform = str
}
+
+/**
+ * get color's r, g, b value.
+ * @param {string} color support all kinds of value of color.
+ */
+export function getRgb (color: string) {
+ const haxReg = /#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/
+ const rgbReg = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/
+ const span = document.createElement('span')
+ const body = document.body
+ span.style.cssText = `color: ${color}; width: 0px; height: 0px;`
+ body && body.appendChild(span)
+ color = window.getComputedStyle(span).color + ''
+ body && body.removeChild(span)
+
+ let match
+ match = color.match(haxReg)
+ if (match) {
+ return {
+ r: parseInt(match[1], 16),
+ g: parseInt(match[2], 16),
+ b: parseInt(match[3], 16)
+ }
+ }
+ match = color.match(rgbReg)
+ if (match) {
+ return {
+ r: parseInt(match[1]),
+ g: parseInt(match[2]),
+ b: parseInt(match[3])
+ }
+ }
+}
[3/4] 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/76ab14b9
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/76ab14b9
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/76ab14b9
Branch: refs/heads/0.14-dev
Commit: 76ab14b92b94f76f1b27812cbb01647da967ab1d
Parents: 40a6f13
Author: MrRaindrop <te...@gmail.com>
Authored: Wed Jun 21 17:44:23 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Wed Jun 21 17:44:23 2017 +0800
----------------------------------------------------------------------
html5/render/vue/components/scrollable/loading-indicator.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/76ab14b9/html5/render/vue/components/scrollable/loading-indicator.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/loading-indicator.js b/html5/render/vue/components/scrollable/loading-indicator.js
index d2746a5..37129fd 100644
--- a/html5/render/vue/components/scrollable/loading-indicator.js
+++ b/html5/render/vue/components/scrollable/loading-indicator.js
@@ -181,10 +181,10 @@ function processStyle (vm) {
const style = extractComponentStyle(vm)
const color = style.color
const rgb = color && getRgb(color)
- if (!rgb) {
- return
+ if (rgb) {
+ setKeyframeColor(vm, rgb)
}
- setKeyframeColor(vm, rgb)
+ return style
}
export default {