feat(queue): use stencil's queue controller for dom read/writes

core/src/components/content/content.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Listen, Method, Prop } from '@stencil/core';
-import { Config, DomController } from '../../index';
+import { Config, QueueController } from '../../index';
 
 @Component({
   tag: 'ion-content',
@@ -18,7 +18,7 @@ export class Content {
   @Element() private el: HTMLElement;
 
   @Prop({ context: 'config' }) config: Config;
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
 
   /**
    * If true, the content will scroll behind the headers
@@ -100,13 +100,13 @@ export class Content {
       return;
     }
     if (this.fullscreen) {
-      this.dom.raf(() => {
-        this.dom.read(this.readDimensions.bind(this));
-        this.dom.write(this.writeDimensions.bind(this));
+      this.queue.read(() => {
+        this.queue.read(this.readDimensions.bind(this));
+        this.queue.write(this.writeDimensions.bind(this));
       });
     } else {
       this.cTop = this.cBottom = -1;
-      this.dom.write(() => this.scrollEl && this.scrollEl.removeAttribute('style'));
+      this.queue.write(() => this.scrollEl && this.scrollEl.removeAttribute('style'));
     }
   }
 

core/src/components/gesture/gesture.tsx

@@ -1,6 +1,6 @@
 import { Component, Event, EventEmitter, EventListenerEnable, Listen, Prop, Watch } from '@stencil/core';
 import { assert, now } from '../../utils/helpers';
-import { BlockerConfig, BlockerDelegate, DomController, GestureDelegate } from '../../index';
+import { BlockerConfig, BlockerDelegate, GestureDelegate, QueueController } from '../../index';
 import { PanRecognizer } from './recognizers';
 
 export const BLOCK_ALL: BlockerConfig = {
@@ -27,7 +27,7 @@ export class Gesture {
   private blocker: BlockerDelegate|undefined;
 
   @Prop({ connect: 'ion-gesture-controller' }) gestureCtrl: HTMLIonGestureControllerElement;
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
   @Prop({ context: 'enableListener' }) enableListener: EventListenerEnable;
 
   @Prop() disabled = false;
@@ -232,7 +232,7 @@ export class Gesture {
       if (!this.isMoveQueued && this.hasFiredStart) {
         this.isMoveQueued = true;
         this.calcGestureData(ev);
-        this.dom.write(this.fireOnMove.bind(this));
+        this.queue.write(this.fireOnMove.bind(this));
       }
       return;
     }

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { DomController } from '../../index';
+import { QueueController } from '../../index';
 
 const enum Position {
   Top = 'top',
@@ -22,7 +22,7 @@ export class InfiniteScroll {
   @Element() private el: HTMLElement;
   @State() isLoading = false;
 
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
   @Prop({ context: 'enableListener' }) enableListener: EventListenerEnable;
 
   /**
@@ -92,7 +92,7 @@ export class InfiniteScroll {
     this.thresholdChanged(this.threshold);
     this.enableScrollEvents(!this.disabled);
     if (this.position === Position.Top) {
-      this.dom.write(() => this.scrollEl && this.scrollEl.scrollToBottom(0));
+      this.queue.write(() => this.scrollEl && this.scrollEl.scrollToBottom(0));
     }
   }
 
@@ -179,14 +179,14 @@ export class InfiniteScroll {
       const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
 
       // ******** DOM READ ****************
-      this.dom.read(() => {
+      this.queue.read(() => {
         // UI has updated, save the new content dimensions
         const scrollHeight = scrollEl.scrollHeight;
         // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
         const newScrollTop = scrollHeight - prev;
 
         // ******** DOM WRITE ****************
-        this.dom.write(() => {
+        this.queue.write(() => {
           scrollEl.scrollTop = newScrollTop;
           this.isBusy = false;
         });

core/src/components/nav/nav.tsx

@@ -11,7 +11,7 @@ import {
 } from './nav-util';
 
 import { ViewController, matches } from './view-controller';
-import { Animation, ComponentProps, Config, DomController, FrameworkDelegate, GestureDetail, NavOutlet } from '../..';
+import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, NavOutlet, QueueController } from '../..';
 import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces';
 import { AnimationOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition';
 import { assert } from '../../utils/helpers';
@@ -25,7 +25,7 @@ import mdTransitionAnimation from './animations/md.transition';
 export class Nav implements NavOutlet {
 
   private init = false;
-  private queue: TransitionInstruction[] = [];
+  private transInstr: TransitionInstruction[] = [];
   private sbTrns: Animation|undefined;
   private useRouter = false;
   private isTransitioning = false;
@@ -36,7 +36,7 @@ export class Nav implements NavOutlet {
 
   @Element() el: HTMLElement;
 
-  @Prop({context: 'dom'}) dom: DomController;
+  @Prop({context: 'queue'}) queue: QueueController;
   @Prop({context: 'config'}) config: Config;
   @Prop({context: 'window'}) win: Window;
 
@@ -82,7 +82,7 @@ export class Nav implements NavOutlet {
 
     // release swipe back gesture and transition
     this.sbTrns && this.sbTrns.destroy();
-    this.queue.length = this.views.length = 0;
+    this.transInstr.length = this.views.length = 0;
     this.sbTrns = undefined;
     this.destroyed = true;
   }
@@ -283,7 +283,7 @@ export class Nav implements NavOutlet {
     }
 
     // Enqueue transition instruction
-    this.queue.push(ti);
+    this.transInstr.push(ti);
 
     // if there isn't a transition already happening
     // then this will kick off this transition
@@ -293,7 +293,7 @@ export class Nav implements NavOutlet {
   }
 
   private success(result: NavResult, ti: TransitionInstruction) {
-    if (this.queue === null) {
+    if (this.transInstr === null) {
       this.fireError('nav controller was destroyed', ti);
       return;
     }
@@ -323,11 +323,11 @@ export class Nav implements NavOutlet {
   }
 
   private failed(rejectReason: any, ti: TransitionInstruction) {
-    if (this.queue === null) {
+    if (this.transInstr === null) {
       this.fireError('nav controller was destroyed', ti);
       return;
     }
-    this.queue.length = 0;
+    this.transInstr.length = 0;
     this.fireError(rejectReason, ti);
   }
 
@@ -351,7 +351,7 @@ export class Nav implements NavOutlet {
 
     // there is no transition happening right now
     // get the next instruction
-    const ti = this.queue.shift();
+    const ti = this.transInstr.shift();
     if (!ti) {
       return false;
     }
@@ -689,7 +689,7 @@ export class Nav implements NavOutlet {
   }
 
   private swipeBackStart() {
-    if (this.isTransitioning || this.queue.length > 0) {
+    if (this.isTransitioning || this.transInstr.length > 0) {
       return;
     }
 

core/src/components/picker-column/picker-column.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { DomController, GestureDetail, PickerColumn, PickerColumnOption } from '../../index';
 import { clamp } from '../../utils/helpers';
+import { GestureDetail, PickerColumn, PickerColumnOption, QueueController } from '../../index';
 import { hapticSelectionChanged } from '../../utils';
 
 
@@ -28,7 +28,7 @@ export class PickerColumnCmp {
 
   @Element() private el: HTMLElement;
 
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
 
   @Prop() col: PickerColumn;
 
@@ -210,7 +210,7 @@ export class PickerColumnCmp {
 
       if (notLockedIn) {
         // isn't locked in yet, keep decelerating until it is
-        this.dom.raf(() => this.decelerate());
+        this.queue.read(() => this.decelerate());
       }
 
     } else if (this.y % this.optHeight !== 0) {

core/src/components/refresher/refresher.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, State } from '@stencil/core';
-import { DomController, GestureDetail } from '../../index';
+import { GestureDetail, QueueController } from '../../index';
 
 export const enum RefresherState {
   Inactive = 1 << 0,
@@ -30,7 +30,7 @@ export class Refresher {
   private progress = 0;
   private scrollEl: HTMLElement | null = null;
 
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
 
   /**
    * The current state which the refresher is in. The refresher's states include:
@@ -335,7 +335,7 @@ export class Refresher {
 
   private setCss(y: number, duration: string, overflowVisible: boolean, delay: string) {
     this.appliedStyles = (y > 0);
-    this.dom.write(() => {
+    this.queue.write(() => {
       if (this.scrollEl) {
         const style = this.scrollEl.style;
         style.transform = ((y > 0) ? 'translateY(' + y + 'px) translateZ(0px)' : 'translateZ(0px)');

core/src/components/reorder-group/reorder-group.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Prop, State, Watch } from '@stencil/core';
-import { DomController, GestureDetail } from '../../index';
+import { GestureDetail, QueueController } from '../../index';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart} from '../../utils/haptic';
 
 const AUTO_SCROLL_MARGIN = 60;
@@ -44,7 +44,7 @@ export class ReorderGroup {
 
   @Element() private el: HTMLElement;
 
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
 
   /**
    * If true, the reorder will be hidden. Defaults to `true`.
@@ -55,7 +55,7 @@ export class ReorderGroup {
   protected disabledChanged(disabled: boolean) {
     if (!disabled) {
       this.enabled = true;
-      this.dom.raf(() => {
+      this.queue.read(() => {
         this.iconVisible = true;
       });
     } else {

core/src/components/ripple-effect/ripple-effect.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, EventListenerEnable, Listen, Method, Prop, Watch } from '@stencil/core';
 import { now } from '../../utils/helpers';
-import { DomController } from '../../global/dom-controller';
+import { QueueController } from '../../index';
 
 @Component({
   tag: 'ion-ripple-effect',
@@ -11,7 +11,7 @@ export class RippleEffect {
   private lastClick = -10000;
   @Element() el: HTMLElement;
 
-  @Prop({context: 'dom'}) dom: DomController;
+  @Prop({context: 'queue'}) queue: QueueController;
   @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;
 
   @Prop() tapClick = false;
@@ -50,15 +50,15 @@ export class RippleEffect {
   addRipple(pageX: number, pageY: number) {
     let x: number, y: number, size: number;
 
-    this.dom.read(() => {
+    this.queue.read(() => {
       const rect = this.el.getBoundingClientRect();
       const width = rect.width;
       const height = rect.height;
       size = Math.min(Math.sqrt(width * width + height * height) * 2, MAX_RIPPLE_DIAMETER);
       x = pageX - rect.left - (size / 2);
       y = pageY - rect.top - (size / 2);
     });
-    this.dom.write(() => {
+    this.queue.write(() => {
       const div = document.createElement('div');
       div.classList.add('ripple-effect');
       const style = div.style;

core/src/components/router/router.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Config, DomController } from '../../index';
+import { Config, QueueController } from '../../index';
 import { flattenRouterTree, readRedirects, readRoutes } from './utils/parser';
 import { readNavState, writeNavState } from './utils/dom';
 import { chainToPath, generatePath, parsePath, readPath, writePath } from './utils/path';
@@ -23,7 +23,7 @@ export class Router {
   @Element() el: HTMLElement;
 
   @Prop({ context: 'config' }) config: Config;
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
 
   @Prop() base = '';
   @Prop() useHash = true;

core/src/components/scroll/scroll.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Config, DomController, GestureDetail } from '../../index';
+import { Config, GestureDetail, QueueController } from '../../index';
 
 @Component({
   tag: 'ion-scroll',
@@ -22,7 +22,7 @@ export class Scroll {
   @Element() private el: HTMLElement;
 
   @Prop({ context: 'config'}) config: Config;
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
 
   @Prop() mode: string;
 
@@ -99,7 +99,7 @@ export class Scroll {
     }
     if (!this.queued && this.scrollEvents) {
       this.queued = true;
-      this.dom.read(timeStamp => {
+      this.queue.read(timeStamp => {
         this.queued = false;
         this.detail.event = ev;
         updateScrollDetail(this.detail, this.el, timeStamp, didStart);
@@ -189,7 +189,7 @@ export class Scroll {
       if (easedT < 1) {
         // do not use DomController here
         // must use nativeRaf in order to fire in the next frame
-        self.dom.raf(step);
+        self.queue.read(step);
 
       } else {
         stopScroll = true;
@@ -203,8 +203,8 @@ export class Scroll {
     self.isScrolling = true;
 
     // chill out for a frame first
-    this.dom.write(() => {
-      this.dom.write(timeStamp => {
+    this.queue.write(() => {
+      this.queue.write(timeStamp => {
         startTime = timeStamp;
         step(timeStamp);
       });

core/src/components/status-tap/status-tap.tsx

@@ -1,18 +1,18 @@
 import { Component, Listen, Prop } from '@stencil/core';
-import { DomController } from '../..';
+import { QueueController } from '../..';
 
 @Component({
   tag: 'ion-status-tap'
 })
 export class StatusTap {
 
-  @Prop({ context: 'dom' }) dom: DomController;
+  @Prop({ context: 'queue' }) queue: QueueController;
 
   @Prop() duration = 300;
 
   @Listen('window:statusTap')
   onStatusTap() {
-    this.dom.read(() => {
+    this.queue.read(() => {
       const width = window.innerWidth;
       const height = window.innerWidth;
       const el = document.elementFromPoint(width / 2, height / 2);
@@ -22,7 +22,7 @@ export class StatusTap {
       const scrollEl = el.closest('ion-scroll');
       if (scrollEl) {
         scrollEl.componentOnReady().then(() => {
-          this.dom.write(() => {
+          this.queue.write(() => {
             scrollEl.scrollToTop(this.duration);
           });
         });