* [html5] fix styles in firefox & impl get/set selection range methods.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/2f3af6f6 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/2f3af6f6 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/2f3af6f6 Branch: refs/heads/master Commit: 2f3af6f6fc97fdc32cfa15c06b8da6d098753553 Parents: 86cd036 Author: MrRaindrop <tekk...@gmail.com> Authored: Tue Sep 12 15:20:17 2017 +0800 Committer: MrRaindrop <tekk...@gmail.com> Committed: Tue Sep 12 15:20:17 2017 +0800 ---------------------------------------------------------------------- .../components/scrollable/loading-indicator.js | 13 +++--- .../render/vue/components/scrollable/style.css | 22 ++++++---- html5/render/vue/components/slider/indicator.js | 2 + .../render/vue/components/slider/slideMixin.js | 13 +++++- html5/render/vue/components/slider/slider.css | 6 +++ html5/render/vue/components/switch.js | 12 +++--- html5/render/vue/components/text.js | 3 ++ html5/render/vue/env/event-manager.js | 4 +- html5/render/vue/mixins/input-common.js | 32 ++++++++++++++ html5/render/vue/modules/animation.js | 44 +++++++++++++++----- html5/render/vue/modules/modal/style.js | 20 ++++++--- html5/render/vue/styles/base.css | 15 +++++++ html5/render/vue/styles/reset.css | 5 ++- html5/render/vue/utils/func.js | 5 ++- html5/render/vue/utils/style.js | 13 +++++- 15 files changed, 166 insertions(+), 43 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/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 aa289bd..4fa2c7b 100644 --- a/html5/render/vue/components/scrollable/loading-indicator.js +++ b/html5/render/vue/components/scrollable/loading-indicator.js @@ -24,13 +24,15 @@ const _css = ` 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; + -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; + -ms-flex-pack: center; + justify-content: center; overflow: visible; background: none; } @@ -47,7 +49,8 @@ const _css = ` position: relative; text-indent: -9999em; -webkit-animation: weex-spinner 1.1s infinite ease; - 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 { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/components/scrollable/style.css ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/scrollable/style.css b/html5/render/vue/components/scrollable/style.css index c90d2ea..f79ff7d 100644 --- a/html5/render/vue/components/scrollable/style.css +++ b/html5/render/vue/components/scrollable/style.css @@ -43,8 +43,10 @@ body > .weex-waterfall { .weex-waterfall-inner-columns { -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; -webkit-box-orient: horizontal; } @@ -65,8 +67,10 @@ body > .weex-waterfall { .weex-scroller-horizontal .weex-scroller-inner { -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + -ms-flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + flex-direction: row; -webkit-box-orient: horizontal; height: 100%; } @@ -79,12 +83,14 @@ body > .weex-waterfall { .weex-loading { -webkit-box-align: center; -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 100%; overflow: hidden; } http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/components/slider/indicator.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/slider/indicator.js b/html5/render/vue/components/slider/indicator.js index 62b95a3..070f3f7 100644 --- a/html5/render/vue/components/slider/indicator.js +++ b/html5/render/vue/components/slider/indicator.js @@ -23,6 +23,8 @@ const _css = ` z-index: 10; -webkit-flex-direction: row; -ms-flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; flex-direction: row; -webkit-box-orient: horizontal; margin: 0; http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/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 f160d58..710fbcb 100644 --- a/html5/render/vue/components/slider/slideMixin.js +++ b/html5/render/vue/components/slider/slideMixin.js @@ -190,8 +190,10 @@ export default { this.innerOffset += step * this._wrapperWidth // transform the whole slides group. inner.style.webkitTransition = `-webkit-transform ${TRANSITION_TIME / 1000}s ease-in-out` + inner.style.mozTransition = `transform ${TRANSITION_TIME / 1000}s ease-in-out` inner.style.transition = `transform ${TRANSITION_TIME / 1000}s ease-in-out` inner.style.webkitTransform = `translate3d(${this.innerOffset}px, 0, 0)` + inner.style.mozTransform = `translate3d(${this.innerOffset}px, 0, 0)` inner.style.transform = `translate3d(${this.innerOffset}px, 0, 0)` // emit scroll events. @@ -213,12 +215,14 @@ export default { setTimeout(() => { inner.style.webkitTransition = '' + inner.style.mozTransition = '' inner.style.transition = '' for (let i = this._showStartIdx; i <= this._showEndIdx; i++) { const node = this._showNodes[i] if (!node) { continue } const elm = node.firstElementChild elm.style.webkitTransition = '' + elm.style.mozTransition = '' elm.style.transition = '' } // clean cloned nodes and rearrange slide cells. @@ -488,6 +492,7 @@ export default { for (let i = this._showStartIdx; i <= this._showEndIdx; i++) { const elm = this._showNodes[i].firstElementChild elm.style.webkitTransition = `all ${NEIGHBOR_SCALE_TIME / 1000}s ease` + elm.style.mozTransition = `all ${NEIGHBOR_SCALE_TIME / 1000}s ease` elm.style.transition = `all ${NEIGHBOR_SCALE_TIME / 1000}s ease` const transObj = { scale: `scale(${i === 0 ? this.currentItemScale : this.neighborScale})` @@ -531,8 +536,11 @@ export default { _handleTouchStart (event) { const touch = event.changedTouches[0] this._stopAutoPlay() + const inner = this.$refs.inner this._touchParams = { - originalTransform: this.$refs.inner.style.webkitTransform || this.$refs.inner.style.transform, + originalTransform: inner.style.webkitTransform + || inner.style.mozTransform + || inner.style.transform, startTouchEvent: touch, startX: touch.pageX, startY: touch.pageY, @@ -577,8 +585,9 @@ export default { this._emitScrollEvent('scroll', { offsetXRatio: offsetX / this._wrapperWidth }) - inner.style.transform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)` inner.style.webkitTransform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)` + inner.style.mozTransform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)` + inner.style.transform = `translate3d(${this.innerOffset + offsetX}px, 0, 0)` } }, http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/components/slider/slider.css ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/slider/slider.css b/html5/render/vue/components/slider/slider.css index 8fe384b..c712278 100644 --- a/html5/render/vue/components/slider/slider.css +++ b/html5/render/vue/components/slider/slider.css @@ -27,6 +27,8 @@ height: 100%; overflow: visible; -webkit-flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-orient: horizontal; @@ -42,9 +44,13 @@ overflow: hidden; -webkit-box-align: center; -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; justify-content: center; } http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/components/switch.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/switch.js b/html5/render/vue/components/switch.js index 508957b..7f9562a 100644 --- a/html5/render/vue/components/switch.js +++ b/html5/render/vue/components/switch.js @@ -25,9 +25,9 @@ const _css = ` position: relative; vertical-align: middle; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; box-sizing: content-box; background-clip: content-box; color: #64bd63; @@ -38,7 +38,8 @@ const _css = ` box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 0.8rem; -webkit-transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; - transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; + -moz-transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; + transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; } .weex-switch-checked { @@ -66,7 +67,8 @@ const _css = ` top: 0; left: 0; -webkit-transition: background-color 0.4s, left 0.2s; - transition: background-color 0.4s, left 0.2s; + -moz-transition: background-color 0.4s, left 0.2s; + transition: background-color 0.4s, left 0.2s; } .weex-switch-checked > .weex-switch-inner { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/components/text.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/text.js b/html5/render/vue/components/text.js index 0ff66f4..7379bc6 100644 --- a/html5/render/vue/components/text.js +++ b/html5/render/vue/components/text.js @@ -28,7 +28,10 @@ const _css = ` .weex-text { display: -webkit-box; + display: -moz-box; -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -moz-box-direction: normal; position: relative; white-space: pre-wrap; /* not using 'pre': support auto line feed. */ font-size: 0.426667rem; http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/env/event-manager.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/env/event-manager.js b/html5/render/vue/env/event-manager.js index c2d714d..16057ca 100644 --- a/html5/render/vue/env/event-manager.js +++ b/html5/render/vue/env/event-manager.js @@ -79,9 +79,9 @@ function _init (doc) { doc.addEventListener(evt, function (e) { let el = e.target let vm = el.__vue__ - while (!vm && el !== document.body) { + while (!vm && el && el !== document.body) { el = el.parentElement - vm = el.__vue__ + vm = el && el.__vue__ } if (!vm) { // not a vue component. return http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/mixins/input-common.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/mixins/input-common.js b/html5/render/vue/mixins/input-common.js index db86079..7568ff4 100644 --- a/html5/render/vue/mixins/input-common.js +++ b/html5/render/vue/mixins/input-common.js @@ -38,6 +38,38 @@ export default { blur () { this.$el && this.$el.blur() }, + + setSelectionRange (start: number, end: number) { + try { + this.$el.setSelectionRange(start, end) + } + catch (e) { + if (process.env.NODE_ENV === 'development') { + console.warn(`[vue-render] setSelectionRange is not supported.`) + } + } + }, + + getSelectionRange (callback: Function) { + try { + const selection = window.getSelection() + const str = selection.toString() + const selectionStart = this.$el.value.indexOf(str) + const selectionEnd = selectionStart === -1 ? selectionStart : selectionStart + str.length + callback && callback({ + selectionStart, + selectionEnd + }) + } + catch (e) { + callback && callback(new Error('[vue-render] getSelection is not supported.')) + } + }, + + getEditSelectionRange (callback: Function) { + return this.getSelectionRange(callback) + }, + // support enter key event createKeyboardEvent (events: {}) { const customKeyType = this.returnKeyType http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/modules/animation.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/modules/animation.js b/html5/render/vue/modules/animation.js index bf94447..ce747c2 100644 --- a/html5/render/vue/modules/animation.js +++ b/html5/render/vue/modules/animation.js @@ -17,6 +17,30 @@ * under the License. */ const utils = {} +let endEvent +let styleName + +const EVENT_NAME_MAP = { + transition: 'transitionend', + WebkitTransition: 'webkitTransitionEnd', + MozTransition: 'mozTransitionEnd', + OTransition: 'oTransitionEnd', + msTransition: 'MSTransitionEnd' +} + +function detectEvents () { + const testEl = document.createElement('div') + const style = testEl.style + for (const name in EVENT_NAME_MAP) { + if (name in style) { + endEvent = EVENT_NAME_MAP[name] + styleName = name + break + } + } +} + +detectEvents() function transitionOnce (vnode, config, callback) { const { @@ -47,19 +71,17 @@ function transitionOnce (vnode, config, callback) { dom && weex.utils.fireLazyload(dom, true) const transitionEndHandler = function (event) { - event.stopPropagation() - dom.removeEventListener('webkitTransitionEnd', transitionEndHandler) - dom.removeEventListener('transitionend', transitionEndHandler) - dom.style.transition = '' - dom.style.webkitTransition = '' + event && event.stopPropagation() + if (endEvent) { + dom.removeEventListener(endEvent, transitionEndHandler) + dom.style[styleName] = '' + } callback() } - - dom.style.transition = transitionValue - dom.style.webkitTransition = transitionValue - dom.addEventListener('webkitTransitionEnd', transitionEndHandler) - dom.addEventListener('transitionend', transitionEndHandler) - + if (endEvent) { + dom.style[styleName] = transitionValue + dom.addEventListener(endEvent, transitionEndHandler) + } nextFrame(() => { dom.style.cssText += toCSSText(autoPrefix(normalizeStyle(camelizeKeys(config.styles))) || {}) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/modules/modal/style.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/modules/modal/style.js b/html5/render/vue/modules/modal/style.js index 510bb6c..2b005e1 100644 --- a/html5/render/vue/modules/modal/style.js +++ b/html5/render/vue/modules/modal/style.js @@ -32,11 +32,14 @@ export default ` text-align: center; opacity: 0.7; -webkit-transition: all 0.4s ease-in-out; - transition: all 0.4s ease-in-out; + -moz-transition: all 0.4s ease-in-out; + -ms-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; border-radius: 0.066667rem; -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); - transform: translateX(-50%); + transform: translateX(-50%); } .weex-toast.hide { @@ -77,8 +80,9 @@ export default ` min-height: 2.666667rem; border-radius: 0.066667rem; -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); background-color: #fff; } @@ -89,20 +93,26 @@ export default ` .weex-modal-node .content { display: -webkit-box; display: -webkit-flex; + display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; + -moz-box-orient: vertical; + -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; - align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; + -moz-box-pack: center; -ms-flex-pack: center; - justify-content: center; + justify-content: center; width: 100%; min-height: 1.866667rem; box-sizing: border-box; http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/styles/base.css ---------------------------------------------------------------------- diff --git a/html5/render/vue/styles/base.css b/html5/render/vue/styles/base.css index 96beb83..f4263ea 100644 --- a/html5/render/vue/styles/base.css +++ b/html5/render/vue/styles/base.css @@ -26,6 +26,8 @@ .weex-flex-ct { display: -webkit-box; display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; display: flex; } @@ -33,21 +35,29 @@ box-sizing: border-box; display: -webkit-box; display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; display: flex; position: relative; -webkit-box-orient: vertical; -webkit-flex-direction: column; + -moz-box-orient: vertical; + -moz-box-direction: normal; + -ms-flex-direction: column; flex-direction: column; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-grow: 0; + -moz-box-flex: 0; -ms-flex-grow: 0; flex-grow: 0; -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-align: stretch; -webkit-align-items: stretch; + -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-align-content: flex-start; @@ -62,6 +72,9 @@ .weex-ct.horizontal { -webkit-box-orient: horizontal; -webkit-flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; } @@ -73,9 +86,11 @@ -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-grow: 0; + -moz-box-flex: 0; -ms-flex-grow: 0; flex-grow: 0; -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; flex-basis: auto; border: 0 solid black; margin: 0; http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/styles/reset.css ---------------------------------------------------------------------- diff --git a/html5/render/vue/styles/reset.css b/html5/render/vue/styles/reset.css index cb334a0..b61de0f 100644 --- a/html5/render/vue/styles/reset.css +++ b/html5/render/vue/styles/reset.css @@ -43,8 +43,9 @@ .weex-root *::after { box-sizing: border-box; -webkit-text-size-adjust: none; - -ms-text-size-adjust: none; - text-size-adjust: none; + -moz-text-size-adjust: none; + -ms-text-size-adjust: none; + text-size-adjust: none; } .weex-root a, http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/utils/func.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/utils/func.js b/html5/render/vue/utils/func.js index d4112c47..4e77430 100644 --- a/html5/render/vue/utils/func.js +++ b/html5/render/vue/utils/func.js @@ -254,7 +254,10 @@ export function appendCss (css: string, cssId: string, replace: boolean) { style.appendChild(document.createTextNode(css)) } export function nextFrame (callback: any) { - const runner = window.requestAnimationFrame || window.webkitRequestAnimationFrame || (cb => setTimeout(cb, 16)) + const runner = window.requestAnimationFrame + || window.webkitRequestAnimationFrame + || window.mozRequestAnimationFrame + || (cb => setTimeout(cb, 16)) runner(callback) } export function toCSSText (object: any) { http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2f3af6f6/html5/render/vue/utils/style.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js index 482e01a..a992617 100644 --- a/html5/render/vue/utils/style.js +++ b/html5/render/vue/utils/style.js @@ -153,6 +153,8 @@ export function autoPrefix (style: {}): {} { const flex = prefixed.flex if (flex) { prefixed.WebkitBoxFlex = flex + prefixed.MozBoxFlex = flex + prefixed.MsFlex = flex } return prefixed } @@ -195,7 +197,9 @@ export function normalizeStyle (style: {}) { export function getTransformObj (elm: HTMLElement): any { let styleObj = {} if (!elm) { return styleObj } - const transformStr = elm.style.webkitTransform || elm.style.transform + const transformStr = elm.style.webkitTransform + || elm.style.mozTransform + || elm.style.transform if (transformStr && transformStr.match(/(?: *(?:translate|rotate|scale)[^(]*\([^(]+\))+/i)) { styleObj = transformStr.trim().replace(/, +/g, ',').split(' ').reduce(function (pre, str) { ['translate', 'scale', 'rotate'].forEach(function (name) { @@ -243,6 +247,7 @@ export function addTransform (elm: HTMLElement, style: {}, replace: boolean): vo } const resStr = getTransformStr(styleObj) elm.style.webkitTransform = resStr + elm.style.mozTransform = resStr elm.style.transform = resStr } @@ -260,6 +265,7 @@ export function addTranslateX (elm: HTMLElement, toAdd: number): void { }) const resStr = getTransformStr(styleObj) elm.style.webkitTransform = resStr + elm.style.mozTransform = resStr elm.style.transform = resStr } @@ -270,7 +276,9 @@ export function addTranslateX (elm: HTMLElement, toAdd: number): void { export function copyTransform (from: HTMLElement, to: HTMLElement, key: string | void): void { let str if (!key) { - str = from.style.webkitTransform || from.style.transform + str = from.style.webkitTransform + || from.style.mozTransform + || from.style.transform } else { const fromObj = getTransformObj(from) @@ -280,6 +288,7 @@ export function copyTransform (from: HTMLElement, to: HTMLElement, key: string | str = getTransformStr(toObj) } to.style.webkitTransform = str + to.style.mozTransform = str to.style.transform = str }
