Merge pull request #152 from zachnthebox/zach-screen

feat(service): add screen height and screen width properties

Author: mike-north

addon/mixins/resize-aware.js

@@ -1,10 +1,14 @@
 import Mixin from '@ember/object/mixin';
+import { readOnly } from '@ember/object/computed';
 const { floor } = Math;
 
 export default Mixin.create({
   resizeEventsEnabled: true,
   resizeDebouncedEventsEnabled: true,
 
+  screenWidth: readOnly('resizeService.screenWidth'),
+  screenHeight: readOnly('resizeService.screenHeight'),
+
   _oldViewWidth: null,
   _oldViewHeight: null,
   _oldViewWidthDebounced: null,

addon/services/resize.js

@@ -2,7 +2,7 @@ import { keys as emberKeys } from '@ember/polyfills';
 import Service from '@ember/service';
 import Evented from '@ember/object/evented';
 import { classify } from '@ember/string';
-import { oneWay } from '@ember/object/computed';
+import { oneWay, readOnly } from '@ember/object/computed';
 import { debounce } from '@ember/runloop';
 import EmberObject, { set, getWithDefault } from '@ember/object';
 
@@ -11,15 +11,18 @@ const Base = Service || EmberObject;
 const keys = Object.keys || emberKeys;
 
 export default Base.extend(Evented, {
-  _oldWidth: null,
-  _oldHeight: null,
-  _oldWidthDebounced: null,
-  _oldHeightDebounced: null,
+  _oldWidth: window.innerWidth,
+  _oldHeight: window.innerHeight,
+  _oldWidthDebounced: window.innerWidth,
+  _oldHeightDebounced: window.innerHeight,
 
   debounceTimeout: oneWay('defaultDebounceTimeout'),
   widthSensitive: oneWay('defaultWidthSensitive'),
   heightSensitive: oneWay('defaultHeightSensitive'),
 
+  screenWidth: readOnly('_oldWidth'),
+  screenHeight: readOnly('_oldHeight'),
+
   init() {
     this._super(...arguments);
     this._setDefaults();

tests/unit/services/resize-test.js

@@ -20,14 +20,28 @@ test('it fires "didResize"  when the window is resized', function(assert) {
   let evt = new window.Event('resize');
 
   window.dispatchEvent(evt);
-  assert.equal(didResizeCallCount, 1, 'didResize called 1 time on event firing');
+  assert.equal(didResizeCallCount, 0, 'didResize called 0 time on event firing');
   service.incrementProperty('_oldHeight', -20);
   window.dispatchEvent(evt);
-  assert.equal(didResizeCallCount, 2, 'didResize called another time on event firing again');
+  assert.equal(didResizeCallCount, 1, 'didResize called 1 time on event firing');
   service.set('heightSensitive', false);
   service.incrementProperty('_oldHeight', -20);
   window.dispatchEvent(evt);
-  assert.equal(didResizeCallCount, 2, 'didResize shouldn\'t be called again if heightSensitive is false');
+  assert.equal(didResizeCallCount, 1, 'didResize shouldn\'t be called again if heightSensitive is false');
+
+});
+
+test('screenHeight is bound to the non debounced resize', function(assert) {
+
+  let service = this.subject({
+    widthSensitive: false,
+    heightSensitive: true
+  });
+
+  let evt = new window.Event('resize');
+
+  window.dispatchEvent(evt);
+  assert.equal(service.get('screenHeight'), window.innerHeight);
 
 });
 
@@ -55,6 +69,7 @@ test('it fires "debouncedDidResize"  when the window is resized', function(asser
     later(triggerEvent, 10);
   }
 
+  service.incrementProperty('_oldHeightDebounced', -20);
   assert.equal(debouncedDidResizeCallCount, 0, 'debouncedDidResize not called yet');
   later(() => {
     assert.equal(debouncedDidResizeCallCount, 1, 'debouncedDidResize called 1 time after 500ms');