Merge pull request #165 from mike-north/typescript

Typescript

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "javascript.implicitProjectConfig.checkJs": true
-}
+  "javascript.implicitProjectConfig.checkJs": true,
+  "eslint.validate": [
+    "javascript",
+    "typescript"
+  ]
+}

addon/mixins/resize-aware.js → addon/mixins/resize-aware.ts

@@ -1,49 +1,55 @@
-import Mixin from '@ember/object/mixin';
 import { readOnly } from '@ember/object/computed';
+import Mixin from '@ember/object/mixin';
+import ResizeService from 'dummy/services/resize';
 const { floor } = Math;
 
-export default Mixin.create({
-  resizeEventsEnabled: true,
+// tslint:disable-next-line:variable-name
+const ResizeAwareMixin = Mixin.create({
   resizeDebouncedEventsEnabled: true,
+  resizeEventsEnabled: true,
 
-  screenWidth: readOnly('resizeService.screenWidth'),
   screenHeight: readOnly('resizeService.screenHeight'),
+  screenWidth: readOnly('resizeService.screenWidth'),
 
-  _oldViewWidth: null,
-  _oldViewHeight: null,
-  _oldViewWidthDebounced: null,
-  _oldViewHeightDebounced: null,
-  resizeWidthSensitive: true,
+  _oldViewHeight: null as number | null,
+  _oldViewHeightDebounced: null as number | null,
+  _oldViewWidth: null as number | null,
+  _oldViewWidthDebounced: null as number | null,
   resizeHeightSensitive: true,
+  resizeWidthSensitive: true,
 
   didInsertElement() {
     this._super(...arguments);
+    const resizeService: ResizeService = (this as any).get('resizeService');
     if (this.get('resizeEventsEnabled')) {
-      this.get('resizeService').on('didResize', this, this._handleResizeEvent);
+      resizeService.on('didResize', this, this._handleResizeEvent);
     }
     if (this.get('resizeDebouncedEventsEnabled')) {
-      this.get('resizeService').on('debouncedDidResize', this, this._handleDebouncedResizeEvent);
+      resizeService.on('debouncedDidResize', this, this._handleDebouncedResizeEvent);
     }
   },
 
   willDestroyElement() {
     this._super(...arguments);
+    const resizeService: ResizeService = (this as any).get('resizeService');
     if (this.get('resizeEventsEnabled')) {
-      this.get('resizeService').off('didResize', this, this._handleResizeEvent);
+      resizeService.off('didResize', this, this._handleResizeEvent);
     }
     if (this.get('resizeDebouncedEventsEnabled')) {
-      this.get('resizeService').off('debouncedDidResize', this, this._handleDebouncedResizeEvent);
+      resizeService.off('debouncedDidResize', this, this._handleDebouncedResizeEvent);
     }
   },
 
-  didResize(/*width, height, evt*/) {}, // Overridden in subclass
-  debouncedDidResize(/*width, height, evt*/) {}, // Overridden in subclass
+  // tslint:disable-next-line:no-empty
+  didResize(_width: number, _height: number, _evt: UIEvent) {}, // Overridden in subclass
+  // tslint:disable-next-line:no-empty
+  debouncedDidResize(_width: number, _height: number, _evt: UIEvent) {}, // Overridden in subclass
 
-  _getComponentSize() {
+  _getComponentSize(this: any) {
     return this.element.getClientRects()[0];
   },
 
-  _handleResizeEvent(evt) {
+  _handleResizeEvent(evt: UIEvent) {
     const w = floor(this._getComponentSize().width);
     const h = floor(this._getComponentSize().height);
     if (
@@ -52,13 +58,13 @@ export default Mixin.create({
     ) {
       this.didResize(w, h, evt);
       this.setProperties({
+        _oldViewHeight: h,
         _oldViewWidth: w,
-        _oldViewHeight: h
       });
     }
   },
 
-  _handleDebouncedResizeEvent(evt) {
+  _handleDebouncedResizeEvent(evt: UIEvent) {
     const w = floor(this._getComponentSize().width);
     const h = floor(this._getComponentSize().height);
     if (
@@ -67,9 +73,11 @@ export default Mixin.create({
     ) {
       this.debouncedDidResize(w, h, evt);
       this.setProperties({
+        _oldViewHeightDebounced: h,
         _oldViewWidthDebounced: w,
-        _oldViewHeightDebounced: h
       });
     }
-  }
+  },
 });
+
+export default ResizeAwareMixin;

addon/services/resize.ts

@@ -0,0 +1,115 @@
+import { oneWay, readOnly } from '@ember-decorators/object/computed';
+import { getWithDefault, set } from '@ember/object';
+import Evented from '@ember/object/evented';
+import { cancel, debounce } from '@ember/runloop';
+import Service from '@ember/service';
+import { classify } from '@ember/string';
+
+declare global {
+  // tslint:disable-next-line:variable-name
+  const FastBoot: {} | undefined;
+}
+
+export interface ResizeDefaults {
+  widthSensitive?: boolean;
+  heightSensitive?: boolean;
+  debounceTimeout?: number   ;
+  injectionFactories?: string[];
+}
+
+class ResizeService extends Service.extend(Evented) {
+  public _oldWidth = window.innerWidth;
+  public _oldHeight = window.innerHeight;
+  public _oldWidthDebounced = window.innerWidth;
+  public _oldHeightDebounced = window.innerHeight;
+
+  @oneWay('defaultDebounceTimeout') public debounceTimeout!: number;
+  @oneWay('defaultWidthSensitive') public widthSensitive!: boolean;
+  @oneWay('defaultHeightSensitive') public heightSensitive!: boolean;
+
+  public resizeServiceDefaults!: ResizeDefaults;
+
+  @readOnly('_oldWidth') public screenWidth!: number;
+  @readOnly('_oldHeight') public screenHeight!: number;
+  public _onResizeHandler?: (this: Window, evt: UIEvent) => void;
+  public _scheduledDebounce?: ReturnType<typeof debounce>;
+  constructor() {
+    super(...arguments);
+    this._setDefaults();
+    this._onResizeHandler = (evt) => {
+      this._fireResizeNotification(evt);
+      const scheduledDebounce = debounce(this, this._fireDebouncedResizeNotification, evt, this.get('debounceTimeout'));
+      this._scheduledDebounce = scheduledDebounce;
+    };
+    if (typeof FastBoot === 'undefined') {
+      this._installResizeListener();
+    }
+  }
+
+  public destroy() {
+    this._super(...arguments);
+    if (typeof FastBoot === 'undefined') {
+      this._uninstallResizeListener();
+    }
+    this._cancelScheduledDebounce();
+    return this;
+  }
+
+  public _setDefaults() {
+    const defaults = getWithDefault(this, 'resizeServiceDefaults', {});
+
+    Object.keys(defaults).map((key: keyof ResizeDefaults ) => {
+      const classifiedKey = classify(key);
+      const defaultKey = `default${classifiedKey}`;
+      return set(this as any, defaultKey, defaults[key]);
+    });
+  }
+
+  public _hasWindowSizeChanged(w: number, h: number, debounced = false) {
+    const wKey = debounced ? '_oldWidthDebounced' : '_oldWidth';
+    const hKey = debounced ? '_oldHeightDebounced' : '_oldHeight';
+    return (
+      (this.get('widthSensitive') && w !== this.get(wKey)) ||
+      (this.get('heightSensitive') && h !== this.get(hKey))
+    );
+  }
+
+  public _updateCachedWindowSize(w: number, h: number, debounced = false) {
+    const wKey = debounced ? '_oldWidthDebounced' : '_oldWidth';
+    const hKey = debounced ? '_oldHeightDebounced' : '_oldHeight';
+    this.set(wKey, w);
+    this.set(hKey, h);
+  }
+
+  public _installResizeListener() {
+    if (!this._onResizeHandler) { return; }
+    window.addEventListener('resize', this._onResizeHandler);
+  }
+
+  public _uninstallResizeListener() {
+    if (!this._onResizeHandler) { return; }
+    window.removeEventListener('resize', this._onResizeHandler);
+  }
+
+  public _cancelScheduledDebounce() {
+    if (!this._scheduledDebounce) { return; }
+    cancel(this._scheduledDebounce);
+  }
+
+  public _fireResizeNotification(evt: UIEvent) {
+    const { innerWidth, innerHeight } = window;
+    if (this._hasWindowSizeChanged(innerWidth, innerHeight)) {
+      this.trigger('didResize', evt);
+      this._updateCachedWindowSize(innerWidth, innerHeight);
+    }
+  }
+  public _fireDebouncedResizeNotification(evt: UIEvent) {
+    const { innerWidth, innerHeight } = window;
+    if (this._hasWindowSizeChanged(innerWidth, innerHeight, true)) {
+      this.trigger('debouncedDidResize', evt);
+      this._updateCachedWindowSize(innerWidth, innerHeight, true);
+    }
+  }
+}
+
+export default ResizeService;

app/config/environment.d.ts

@@ -0,0 +1,7 @@
+import { ResizeDefaults } from 'ember-resize/services/resize';
+
+interface IEnvironment {
+  resizeServiceDefaults: ResizeDefaults;
+}
+declare const env: IEnvironment;
+export = env;