cache window dimensions

ionic/components.ts

@@ -11,7 +11,7 @@ export * from 'ionic/components/icon/icon'
 export * from 'ionic/components/item/item'
 export * from 'ionic/components/item/item-group'
 export * from 'ionic/components/menu/menu'
-export * from 'ionic/components/menu/extensions/types'
+export * from 'ionic/components/menu/menu-types'
 export * from 'ionic/components/menu/menu-toggle'
 export * from 'ionic/components/text-input/text-input'
 export * from 'ionic/components/text-input/label'

ionic/components/app/app.ts

@@ -263,7 +263,7 @@ export function ionicBootstrap(rootComponentType, config) {
         config = new IonicConfig(config);
       }
 
-      let platform = new IonicPlatform(window);
+      let platform = new IonicPlatform();
 
       // create the base IonicApp
       let app = initApp(window, document, config, platform);

ionic/components/menu/menu-gestures.ts

@@ -1,4 +1,4 @@
-import {Menu} from '../menu';
+import {Menu} from './menu';
 import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture';
 
 

ionic/components/menu/menu-types.scss

@@ -4,12 +4,8 @@
 // The content slides over to reveal the menu underneath.
 // The menu itself, which is under the content, does not move.
 
-ion-menu[type=reveal] {
+ion-menu[type=reveal].show-menu {
-  transform: translate3d(-9999px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
-
-  &.show-menu {
-    transform: translate3d(0px, 0px, 0px);
-  }
 }
 
 .menu-content-reveal {
@@ -26,7 +22,6 @@ ion-menu[type=reveal] {
 ion-menu[type=overlay] {
   z-index: $z-index-menu-overlay;
   box-shadow: $menu-shadow;
-  transform: translate3d(-9999px, 0px, 0px);
 
   backdrop {
     display: block;

ionic/components/menu/menu-types.ts

@@ -1,4 +1,4 @@
-import {Menu} from '../menu';
+import {Menu} from './menu';
 import {Animation} from 'ionic/animations/animation';
 
 

ionic/components/menu/menu.scss

@@ -22,6 +22,8 @@ ion-menu {
   flex-direction: column;
 
   background: $menu-background;
+
+  transform: translate3d(-9999px, 0px, 0px);
 }
 
 ion-menu[side=right] {

ionic/components/menu/menu.ts

@@ -4,7 +4,7 @@ import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent} from '../../config/annotations';
-import * as gestures from  './extensions/gestures';
+import * as gestures from  './menu-gestures';
 
 
 /**

ionic/gestures/drag-gesture.ts

@@ -1,16 +1,13 @@
 import {Gesture} from 'ionic/gestures/gesture';
 import * as util from 'ionic/util';
-//import Hammer from 'hammer';
 
-/*
+
- * BUG(ajoslin): HammerJS 2.x does not have an alternative to HammerJS 1.x's
- * dragLockToAxis, so a vertical and horizontal gesture can happen at the same time.
- */
 export class DragGesture extends Gesture {
   constructor(element, opts = {}) {
     util.defaults(opts, {});
     super(element, opts);
   }
+
   listen() {
     super.listen();
     this.on('panstart', ev => {
@@ -33,6 +30,7 @@ export class DragGesture extends Gesture {
       // ev.stopPropagation()
     });
   }
+
   onDrag() {}
   onDragStart() {}
   onDragEnd() {}

ionic/gestures/slide-edge-gesture.ts

@@ -1,9 +1,11 @@
 import {SlideGesture} from 'ionic/gestures/slide-gesture';
-import * as util from 'ionic/util';
+import {defaults} from '../util/util';
+import {windowDimensions} from '../util/dom';
+
 
 export class SlideEdgeGesture extends SlideGesture {
   constructor(element: Element, opts: Object = {}) {
-    util.defaults(opts, {
+    defaults(opts, {
       edge: 'left',
       threshold: 50
     });
@@ -22,8 +24,8 @@ export class SlideEdgeGesture extends SlideGesture {
     return {
       left: 0,
       top: 0,
-      width: window.innerWidth,
+      width: windowDimensions().width,
-      height: window.innerHeight
+      height: windowDimensions().height
     };
   }
 

ionic/ionic.core.scss

@@ -34,7 +34,7 @@
   "components/list/list",
   "components/card/card",
   "components/menu/menu",
-  "components/menu/extensions/types",
+  "components/menu/menu-types",
   "components/modal/modal",
   "components/nav-bar/nav-bar",
   "components/popup/popup",

ionic/platform/platform.ts

@@ -7,8 +7,7 @@ import * as dom from '../util/dom';
  */
 export class IonicPlatform {
 
-  constructor(window) {
+  constructor() {
-    this._window = window;
     this._settings = {};
     this._platforms = [];
     this._versions = {};
@@ -131,19 +130,11 @@ export class IonicPlatform {
   }
 
   width() {
-    if (!this._w) {
+    return dom.windowDimensions().width;
-      this._w = this._window.innerWidth;
-      this._h = this._window.innerHeight;
-    }
-    return this._w;
   }
 
   height() {
-    if (!this._h) {
+    return dom.windowDimensions().height;
-      this._w = this._window.innerWidth;
-      this._h = this._window.innerHeight;
-    }
-    return this._h;
   }
 
   isPortrait() {
@@ -159,7 +150,6 @@ export class IonicPlatform {
     clearTimeout(self._resizeTimer);
 
     self._resizeTimer = setTimeout(() => {
-      this._w = this._h = 0;
       dom.flushDimensionCache();
 
       for (let i = 0; i < self._onResizes.length; i++) {

ionic/util/dom.ts

@@ -228,7 +228,7 @@ export function closest(el, selector) {
 export function getDimensions(ele) {
   if (!ele.ionicId) {
     ele.ionicId = ++ionicElementIds;
-    if (ele.ionicId % 200) {
+    if (ele.ionicId % 100 === 0) {
       // periodically flush dimensions
       flushDimensionCache();
     }
@@ -245,6 +245,16 @@ export function getDimensions(ele) {
   return dimensions;
 }
 
+export function windowDimensions() {
+  if (!elementDimensions.win) {
+    elementDimensions.win = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+  return elementDimensions.win;
+}
+
 export function flushDimensionCache() {
   elementDimensions = {};
 }