diff --git a/src/animations/animation.ts b/src/animations/animation.ts index 68ada6a9cd0..a9e1774f851 100644 --- a/src/animations/animation.ts +++ b/src/animations/animation.ts @@ -504,12 +504,14 @@ export class Animation { // set the after styles // ******** DOM WRITE **************** - self._playEnd(1); + self._playEnd(shouldComplete ? 1 : 0); // transition finished self._didFinishAll(shouldComplete, true, false); } + assert(dur > 0, 'duration can not be 0 in async animations'); + // set the TRANSITION END event on one of the transition elements self._unrgTrns = transitionEnd(self._transEl(), onTransitionEnd); @@ -641,6 +643,8 @@ export class Animation { var fromNum = fx.from.num; var toNum = fx.to.num; var tweenEffect = (fromNum !== toNum); + + assert(tweenEffect || !this._isAsync, 'in async animations to != from value'); if (tweenEffect) { this._twn = true; } @@ -655,7 +659,12 @@ export class Animation { } else if (tweenEffect) { // EVERYTHING IN BETWEEN - val = (((toNum - fromNum) * stepValue) + fromNum) + fx.to.unit; + var valNum = (((toNum - fromNum) * stepValue) + fromNum); + var unit = fx.to.unit; + if (unit === 'px') { + valNum = Math.round(valNum); + } + val = valNum + unit; } if (val !== null) { @@ -1011,11 +1020,20 @@ export class Animation { progressEnd(shouldComplete: boolean, currentStepValue: number, dur: number = -1) { console.debug('Animation, progressEnd, shouldComplete', shouldComplete, 'currentStepValue', currentStepValue); + if (this._rv) { + // if the animation is going in reverse then + // flip the step value: 0 becomes 1, 1 becomes 0 + currentStepValue = ((currentStepValue * -1) + 1); + } const stepValue = shouldComplete ? 1 : 0; - if (dur < 0) { + const diff = Math.abs(currentStepValue - stepValue); + if (diff < 0.05) { + dur = 0; + } else if (dur < 0) { dur = this._dur; } + this._isAsync = (dur > 30); this._progressEnd(shouldComplete, stepValue, dur, this._isAsync); diff --git a/src/components/menu/menu-gestures.ts b/src/components/menu/menu-gestures.ts index 836ca631002..8ceebb832db 100644 --- a/src/components/menu/menu-gestures.ts +++ b/src/components/menu/menu-gestures.ts @@ -47,6 +47,11 @@ export class MenuContentGesture extends SlideEdgeGesture { // Set CSS, then wait one frame for it to apply before sliding starts onSlideBeforeStart(ev: any) { console.debug('menu gesture, onSlideBeforeStart', this.menu.side); + this.menu.swipeBeforeStart(); + } + + onSlideStart() { + console.debug('menu gesture, onSlideStart', this.menu.side); this.menu.swipeStart(); } diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 52f7a202ed3..3a02f2c80c5 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -435,15 +435,27 @@ export class Menu { this._app.isEnabled(); } + /** + * @private + */ + swipeBeforeStart() { + if (!this.canSwipe()) { + assert(false, 'canSwipe() has to be true'); + return; + } + this._before(); + } + /** * @private */ swipeStart() { - // user started swiping the menu open/close - if (this.canSwipe()) { - this._before(); - this._getType().setProgressStart(this.isOpen); + // user actively dragging the menu + if (!this._isAnimating) { + assert(false, '_isAnimating has to be true'); + return; } + this._getType().setProgressStart(this.isOpen); } /** @@ -452,6 +464,7 @@ export class Menu { swipeProgress(stepValue: number) { // user actively dragging the menu if (!this._isAnimating) { + assert(false, '_isAnimating has to be true'); return; } this._getType().setProgessStep(stepValue); diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index 0bf249550a4..fdb76da1985 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -80,11 +80,12 @@ $navbar-ios-height: $toolbar-ios-height !default; } .toolbar-title-ios { + margin-top: 1px; + font-size: $toolbar-ios-title-font-size; font-weight: $toolbar-ios-title-font-weight; text-align: $toolbar-ios-title-text-align; color: $toolbar-ios-title-text-color; - margin-top: 1px; pointer-events: auto; } diff --git a/src/gestures/drag-gesture.ts b/src/gestures/drag-gesture.ts index 04923c93946..b3cda29751f 100644 --- a/src/gestures/drag-gesture.ts +++ b/src/gestures/drag-gesture.ts @@ -1,4 +1,4 @@ -import { defaults } from '../util/util'; +import { defaults, assert } from '../util/util'; import { GestureDelegate } from '../gestures/gesture-controller'; import { PanRecognizer } from './recognizers'; import { PointerEvents, PointerEventsConfig, UIEventManager } from '../util/ui-event-manager'; @@ -26,7 +26,7 @@ export class PanGesture { private events: UIEventManager = new UIEventManager(false); private pointerEvents: PointerEvents; private detector: PanRecognizer; - private started: boolean = false; + protected started: boolean = false; private captured: boolean = false; public isListening: boolean = false; protected gestute: GestureDelegate; @@ -106,10 +106,10 @@ export class PanGesture { } pointerMove(ev: any) { + if (!this.started) { + return; + } this.debouncer.debounce(() => { - if (!this.started) { - return; - } if (this.captured) { this.onDragMove(ev); return; @@ -134,11 +134,9 @@ export class PanGesture { } pointerUp(ev: any) { + assert(this.started, 'started failed'); this.debouncer.cancel(); - if (!this.started) { - return; - } this.gestute && this.gestute.release(); if (this.captured) { diff --git a/src/gestures/slide-gesture.ts b/src/gestures/slide-gesture.ts index 7a88961ee16..ca914e7e3d0 100644 --- a/src/gestures/slide-gesture.ts +++ b/src/gestures/slide-gesture.ts @@ -1,6 +1,6 @@ import { PanGesture } from './drag-gesture'; -import { clamp } from '../util/util'; -import { pointerCoord } from '../util/dom'; +import { clamp, assert } from '../util/util'; +import { nativeRaf, pointerCoord } from '../util/dom'; /** * @private @@ -49,16 +49,21 @@ export class SlideGesture extends PanGesture { distance: 0, velocity: 0, }; - let {min, max} = this.getSlideBoundaries(this.slide, ev); - this.slide.min = min; - this.slide.max = max; - this.slide.elementStartPos = this.getElementStartPos(this.slide, ev); - - this.onSlideStart(this.slide, ev); + this.started = false; + nativeRaf(() => { + let {min, max} = this.getSlideBoundaries(this.slide, ev); + this.slide.min = min; + this.slide.max = max; + this.slide.elementStartPos = this.getElementStartPos(this.slide, ev); + this.started = true; + this.onSlideStart(this.slide, ev); + }); } onDragMove(ev: any) { let slide: SlideData = this.slide; + assert(slide.min !== slide.max, 'slide data must be properly initialized'); + let coord = pointerCoord(ev); let newPos = coord[this.direction]; let newTimestamp = Date.now(); @@ -74,8 +79,6 @@ export class SlideGesture extends PanGesture { slide.velocity = velocity; slide.delta = newPos - slide.pointerStartPos; this.onSlide(slide, ev); - - return true; } onDragEnd(ev: any) { diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss index dbd93ea22ae..5b22e861ba2 100644 --- a/src/themes/ionic.theme.dark.ios.scss +++ b/src/themes/ionic.theme.dark.ios.scss @@ -34,7 +34,7 @@ $item-ios-note-color: #f4f4f4 !default; // -------------------------------------------------- $toolbar-ios-background: $toolbar-background !default; -$toolbar-ios-border-color: rgba(255, 255, 255, 0.1) !default; +$toolbar-ios-border-color: rgba(255, 255, 255, .1) !default; $toolbar-ios-text-color: $toolbar-text-color !default; $toolbar-ios-active-color: $toolbar-active-color !default; $toolbar-ios-inactive-color: $toolbar-inactive-color !default; diff --git a/src/transitions/page-transition.ts b/src/transitions/page-transition.ts index ef4f7b0da4d..cc0019e74e8 100644 --- a/src/transitions/page-transition.ts +++ b/src/transitions/page-transition.ts @@ -1,5 +1,4 @@ import { Animation } from '../animations/animation'; -import { Content } from '../components/content/content'; import { Transition } from './transition'; @@ -24,7 +23,7 @@ export class PageTransition extends Transition { * DOM READ */ readDimensions() { - const content = this.enteringView.getIONContent(); + const content = this.enteringView.getIONContent(); if (content) { content.readDimensions(); } @@ -34,7 +33,7 @@ export class PageTransition extends Transition { * DOM WRITE */ writeDimensions() { - const content = this.enteringView.getIONContent(); + const content = this.enteringView.getIONContent(); if (content) { content.writeDimensions(); }