Use Ember.Evented, yield eqYieldable, rename updateEqWidth to eqUpdateSizes

.node-version

@@ -1 +1 @@
-6.0.0
+6

CHANGELOG.md

@@ -6,6 +6,30 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 
 
+2.0.0 Roadmap
+-------------
+
+- [x] Component yield value returns a hash with many useful properties (`eqYieldable`).
+- [x] Support IE11 event mechanism (#2).
+- [x] Support Ember Fastboot.
+- [ ] Make `eq-to()` and `eq-between()` non-inclusive on the right side. (#3)
+- [ ] Demo website
+
+
+
+Unreleased
+----------
+
+### Changed :warning:
+- `updateEqWidth` renamed to `eqUpdateSizes` with a different return value.
+- Component yield arguments changed to `eqYieldable` (see API docs).
+- Migrated from native `Event` to `Ember.Evented`:
+  - The target for EQ events is now an `eq` Ember service, rather than window.
+  - The event name is `shouldUpdate`, it will trigger recalculation on all element query components.
+  - There's a convenience method `update` on the service that triggers that event.
+
+
+
 [1.0.1]
 -------
 

addon/mixin.js

@@ -5,13 +5,12 @@ import Ember from 'ember';
 
 const {
   computed,
+  inject: {service},
   Mixin,
   on,
   run: {next, scheduleOnce}
 } = Ember;
 
-import eqTrigger from 'ember-element-query/trigger';
-
 /**
  *
  * A component mixin that implements the element query functionality.
@@ -65,7 +64,7 @@ export default Mixin.create({
   },
 
   /**
-   * ember-element-query will trigger the `eq-update` event on the
+   * ember-element-query will trigger the `shouldUpdate` event on the
    * transition end event of any child element whose HTML selector is listed
    * in this array.
    *
@@ -78,6 +77,11 @@ export default Mixin.create({
 
 
 
+  // ----- Services -----
+  eqService: service('eq'),
+
+
+
   // ----- Overridden properties -----
   attributeBindings: [
          'eqSliceCurrent:data-eq-current',
@@ -95,7 +99,7 @@ export default Mixin.create({
    * element.
    *
    * Initially is `null`. Gets updated by `_eqResizeHandler` on `resize` and
-   * `eq-update` events.
+   * `shouldUpdate` events.
    *
    * @property eqWidth
    * @type Number
@@ -106,9 +110,24 @@ export default Mixin.create({
 
 
   /**
-   * A callback triggered by `resize` and `eq-update` events.
+   * An integer referencing the current height in pixels of the component's
+   * element.
    *
-   * Is initially null, is assigned to from `_setupEqResize`.
+   * Initially is `null`. Gets updated by `_eqResizeHandler` on `resize` and
+   * `shouldUpdate` events.
+   *
+   * @property eqHeight
+   * @type Number
+   * @final
+   */
+  eqHeight: null,
+
+
+
+  /**
+   * A callback triggered by `resize` and `shouldUpdate` events.
+   *
+   * Is initially null, is assigned to from `_eqSetupResizeHandler`.
    *
    * @method _eqResizeHandler
    * @private
@@ -407,7 +426,7 @@ export default Mixin.create({
    * @computed
    * @final
    * */
-  eqTransitionEventName: computed(function (){
+  eqTransitionEventName: computed(function () {
     const el = document.createElement('fakeelement');
     const transitions = {
       'transition':       'transitionend',
@@ -425,6 +444,77 @@ export default Mixin.create({
   }),
 
 
+  /**
+   * Returns bound eqService.trigger method.
+   *
+   * Used to pass into addEventListener/removeEventListener pairs.
+   *
+   * @property eqTrigger
+   * @type Function
+   * @computed
+   * @final
+   * */
+  eqTrigger: computed(function () {
+    const eqService = this.get('eqService');
+
+    return () => eqService.get('trigger').bind(eqService);
+  }),
+
+  /**
+   * A hash containing useful properties. Used as return value for `{{yield}}`.
+   *
+   * Properties:
+   *
+   * * `eqBPCurrent`
+   * * `eqBPCurrentIndex`
+   * * `eqBPsBetween`
+   * * `eqBPsFrom`
+   * * `eqBPsTo`
+   * * `eqBreakpointsAsc`
+   * * `eqBreakpointsDesc`
+   * * `eqSliceCurrent`
+   * * `eqSlices`
+   * * `eqSlicesFrom`
+   * * `eqSlicesTo`
+   * * `eqWidth`
+   *
+   * @property eqYieldable
+   * @type {Object}
+   * @computed eqBPCurrent, eqBPCurrentIndex, eqBPsBetween, eqBPsFrom, eqBPsTo, eqBreakpointsAsc, eqBreakpointsDesc, eqSliceCurrent, eqSlices, eqSlicesFrom, eqSlicesTo, eqWidth
+   * @final
+   * */
+  eqYieldable: computed(
+    'eqBPCurrent',
+    'eqBPCurrentIndex',
+    'eqBPsBetween',
+    'eqBPsFrom',
+    'eqBPsTo',
+    'eqBreakpointsAsc',
+    'eqBreakpointsDesc',
+    'eqSliceCurrent',
+    'eqSlices',
+    'eqSlicesFrom',
+    'eqSlicesTo',
+    'eqWidth',
+    function () {
+      return this.getProperties(
+        'eqBPCurrent',
+        'eqBPCurrentIndex',
+        'eqBPsBetween',
+        'eqBPsFrom',
+        'eqBPsTo',
+        'eqBreakpointsAsc',
+        'eqBreakpointsDesc',
+        'eqSliceCurrent',
+        'eqSlices',
+        'eqSlicesFrom',
+        'eqSlicesTo',
+        'eqWidth'
+      );
+    }
+  ),
+
+
 
   // ----- Methods -----
 
@@ -452,19 +542,25 @@ export default Mixin.create({
   },
 
   /**
-   * Sets `eqWidth` to current element width.
+   * Sets `eqWidth` and `eqHeight` to current element sizes.
    *
-   * @method updateEqWidth
-   * @returns {Number} Current element width
+   * @method eqUpdateSizes
+   * @returns {Object} A hash with `width` and `height` properties.
    * */
-  updateEqWidth() {
+  eqUpdateSizes() {
     const element = this.get('element');
 
     if (!element) {
       return;
     }
 
-    this.set('eqWidth', element.offsetWidth);
+    this.set('eqWidth',  element.offsetWidth);
+    this.set('eqHeight', element.offsetHeight);
+
+    return {
+      width:  element.offsetWidth,
+      height: element.offsetHeight
+    };
   },
 
 
@@ -473,21 +569,21 @@ export default Mixin.create({
 
   /**
    * On `didInsertElement`, define `_eqResizeHandler` and have it called on
-   * `resize` and `eq-update` events.
+   * `resize` and `shouldUpdate` events.
    *
    * @method _eqSetupResizeHandler
    * @on
    * @private
    * */
   _eqSetupResizeHandler: on('didInsertElement', function () {
     const _eqResizeHandler = () => {
-      scheduleOnce('afterRender', this, this.updateEqWidth);
-      next(this, this.updateEqWidth);
+      scheduleOnce('afterRender', this, this.eqUpdateSizes);
+      next(this, this.eqUpdateSizes);
     };
 
     this.setProperties({_eqResizeHandler});
-    window.addEventListener('resize',    _eqResizeHandler, true);
-    window.addEventListener('eq-update', _eqResizeHandler, true);
+    window.addEventListener('resize', _eqResizeHandler, true);
+    this.get('eqService').on('shouldUpdate', this, _eqResizeHandler);
   }),
 
   /**
@@ -503,20 +599,20 @@ export default Mixin.create({
 
   /**
    * On `willDestroyElement`, remove `_eqResizeHandler` from listening to
-   * `resize` and `eq-update` events.
+   * `resize` and `shouldUpdate` events.
    *
    * @method _eqSetupResizeHandler
    * @on
    * @private
    * */
   _eqTeardownEqResizeHandler: on('willDestroyElement', function () {
     const _eqResizeHandler = this.get('_eqResizeHandler');
-    window.removeEventListener('resize',    _eqResizeHandler, true);
-    window.removeEventListener('eq-update', _eqResizeHandler, true);
+    window.removeEventListener('resize', _eqResizeHandler, true);
+    this.get('eqService').off('shouldUpdate', this, _eqResizeHandler);
   }),
 
   /**
-   * On `didInsertElement`, set up the `eq-update` event to trigger on
+   * On `didInsertElement`, set up the `shouldUpdate` event to trigger on
    * transition end of child elements whose selectors have been defined
    * in `eqTransitionEventName`.
    *
@@ -536,6 +632,8 @@ export default Mixin.create({
       return;
     }
 
+    const eqTrigger = this.get('eqTrigger');
+
     eqTransitionSelectors
       .forEach(className => {
         this
@@ -547,15 +645,15 @@ export default Mixin.create({
 
   /**
    * On `willDestroyElement`, remove `_eqResizeHandler` from listening to
-   * `resize` and `eq-update` events.
+   * `resize` and `shouldUpdate` events.
    *
    * @method _eqSetupTransitions
    * @on
    * @private
    * */
   _eqTeardownTransitions: on('willDestroyElement', function () {
     const eqTransitionEventName = this.get('eqTransitionEventName');
-    const eqTransitionSelectors   = this.get('eqTransitionSelectors');
+    const eqTransitionSelectors = this.get('eqTransitionSelectors');
 
     if (
       !eqTransitionEventName
@@ -565,6 +663,8 @@ export default Mixin.create({
       return;
     }
 
+    const eqTrigger = this.get('eqTrigger');
+
     eqTransitionSelectors
       .forEach(className => {
         this

addon/service.js

@@ -0,0 +1,53 @@
+import Ember from 'ember';
+
+const {
+  Evented,
+  Service
+} = Ember;
+
+/**
+ *
+ * A service to trigger and subscribe for an update of element queries.
+ *
+ * The `e-q` component includes this mixin.
+ *
+ * @class EEQ.Service
+ * @module ember-element-query
+ * @extends Ember.Service
+ * @uses Ember.Evented
+ * @ember Service
+ * @example
+ * {
+ *   eq: Ember.extend.service(),
+ *   foo () {
+ *     this.get('eq').update()
+ *   }
+ * }
+ * */
+
+/**
+ * Triggers the update of element queries.
+ *
+ * @event shouldUpdate
+ * */
+
+/**
+ * Fired after update has been made.
+ *
+ * @event afterUpdate
+ * */
+
+export default Service.extend(Evented, {
+
+
+  /**
+   * Triggers the update of element queries.
+   *
+   * Shortcut for `this.trigger('update')`.
+   *
+   * @method update
+   * */
+  update () {
+    this.trigger('shouldUpdate');
+  }
+});

addon/templates/components/e-q.hbs

@@ -1 +1 @@
-{{yield eqSliceCurrent eqSlicesFrom eqSlicesTo eqSlicesBetween}}
+{{yield eqYieldable}}

app/services/eq.js

@@ -0,0 +1 @@
+export { default } from 'ember-element-query/service';