| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| let extractComponentStyle, getRgb, loopArray, getStyleSheetById |
| |
| const _css = ` |
| .weex-refresh-indicator, |
| .weex-loading-indicator { |
| width: 1rem !important; |
| height: 1rem !important; |
| -webkit-box-align: center; |
| -moz-box-align: center; |
| -webkit-align-items: center; |
| -ms-flex-align: center; |
| align-items: center; |
| -webkit-box-pack: center; |
| -moz-box-pack: center; |
| -webkit-justify-content: center; |
| -ms-flex-pack: center; |
| justify-content: center; |
| overflow: visible; |
| background: none; |
| } |
| .weex-refresh-indicator:before, |
| .weex-loading-indicator:before { |
| display: block; |
| content: ''; |
| font-size: 0.16rem; |
| width: 0.5em; |
| height: 0.5em; |
| left: 0; |
| top: 0; |
| border-radius: 50%; |
| position: relative; |
| text-indent: -9999em; |
| -webkit-animation: weex-spinner 1.1s infinite ease; |
| -moz-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 |
| } |
| spinnerVm._styleSheet = getStyleSheetById('weex-cmp-loading-indicator') |
| } |
| |
| 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) { |
| setKeyframeColor(vm, rgb) |
| } |
| return style |
| } |
| |
| const loadingIndicator = { |
| name: 'weex-loading-indicator', |
| render (createElement) { |
| this.weexType = 'loading-indicator' |
| return createElement('mark', { |
| attrs: { 'weex-type': 'loading-indicator' }, |
| staticClass: 'weex-loading-indicator weex-ct', |
| staticStyle: processStyle(this) |
| }) |
| }, |
| _css |
| } |
| |
| export default { |
| init (weex) { |
| extractComponentStyle = weex.extractComponentStyle |
| getRgb = weex.utils.getRgb |
| loopArray = weex.utils.loopArray |
| getStyleSheetById = weex.utils.getStyleSheetById |
| weex.registerComponent('loading-indicator', loadingIndicator) |
| } |
| } |