Merge pull request #101 from kybishop/angle-bracket

Support angle bracket invocation

addon/components/ember-popper-base.js

@@ -126,6 +126,21 @@ export default Component.extend({
    */
   _popper: null,
 
+  /**
+   * Tracks popper element
+   */
+  _popperElement: computed({
+    get() {
+      return null;
+    },
+    set(key, el) {
+      if (el) {
+        this._updatePopper(el);
+      }
+      return el;
+    }
+  }),
+
   /**
    * Tracks current/previous value of popper target
    */
@@ -201,8 +216,8 @@ export default Component.extend({
 
   // ================== PRIVATE IMPLEMENTATION DETAILS ==================
 
-  _updatePopper() {
-    if (this.isDestroying || this.isDestroyed) {
+  _updatePopper(popperElement = this._getPopperElement()) {
+    if (this.isDestroying || this.isDestroyed || !popperElement) {
       return;
     }
 
@@ -228,8 +243,6 @@ export default Component.extend({
         this._popper.destroy();
       }
 
-      const popperElement = this._getPopperElement();
-
       // Store current values to check against on updates
       this._didRenderInPlace = renderInPlace;
       this._eventsEnabled = eventsEnabled;
@@ -269,7 +282,7 @@ export default Component.extend({
    * Used to get the popper element
    */
   _getPopperElement() {
-    return self.document.getElementById(this.id);
+    return this.get('_popperElement');
   },
 
   _getPopperTarget() {

addon/templates/components/ember-popper-targeting-parent.hbs

@@ -1,13 +1,13 @@
-{{unbound _parentFinder}}
+{{unbound this._parentFinder}}
 
 {{!-- Elements that exist deep within the document tree are given an implicitly lower z-index
       value than elements that aren't as deep in the tree; this has the effect of hiding our
       ember-popper behind less-nested elements. Due to the way z-indexing works, we cannot simply
       add a higher z-index value to our ember-popper. To avoid this issue, we render the element
       on the document body, giving it the highest default z-index value. --}}
-{{#maybe-in-element _popperContainer renderInPlace}}
+{{#maybe-in-element this._popperContainer this.renderInPlace}}
 {{!-- Add a wrapper around the yielded block so we have something for the Popper to target --}}
-  <div id={{id}} class={{class}} hidden={{hidden}} role={{ariaRole}}>
+  <div id={{@id}} class={{@class}} hidden={{this.hidden}} role={{@ariaRole}} ...attributes {{ref this '_popperElement'}}>
     {{yield (hash
       disableEventListeners=(action 'disableEventListeners')
       enableEventListeners=(action 'enableEventListeners')

addon/templates/components/ember-popper.hbs

@@ -3,9 +3,9 @@
       ember-popper behind less-nested elements. Due to the way z-indexing works, we cannot simply
       add a higher z-index value to our ember-popper. To avoid this issue, we render the element
       on the document body, giving it the highest default z-index value. --}}
-{{#maybe-in-element _popperContainer renderInPlace}}
+{{#maybe-in-element this._popperContainer this.renderInPlace}}
   {{!-- Add a wrapper around the yielded block so we have something for the Popper to target --}}
-  <div id={{id}} class={{class}} hidden={{hidden}} role={{ariaRole}}>
+  <div id={{@id}} class={{@class}} hidden={{this.hidden}} role={{@ariaRole}} ...attributes {{ref this '_popperElement'}}>
     {{yield (hash
       disableEventListeners=(action 'disableEventListeners')
       enableEventListeners=(action 'enableEventListeners')

package.json

@@ -27,11 +27,14 @@
   },
   "dependencies": {
     "babel6-plugin-strip-class-callcheck": "^6.0.0",
+    "ember-angle-bracket-invocation-polyfill": "^1.3.1",
     "ember-cli-babel": "^7.1.2",
     "ember-cli-htmlbars": "^3.0.0",
     "ember-cli-node-assets": "^0.2.2",
     "ember-maybe-in-element": "^0.2.0",
+    "ember-named-arguments-polyfill": "^1.0.0",
     "ember-raf-scheduler": "^0.1.0",
+    "ember-ref-modifier": "^0.1.2",
     "fastboot-transform": "^0.1.0",
     "popper.js": "^1.14.1"
   },

tests/integration/components/ember-popper/attributes-test.js

@@ -54,4 +54,18 @@ module('Integration | Component | attributes', function(hooks) {
 
     assert.dom('#foo').hasAttribute('role', 'tooltip', 'role attribute bound correctly');
   });
+
+  test('any attributes are supported with angle bracket invocation', async function(assert) {
+    await render(hbs`
+      <div class='parent' style='position: fixed; bottom: 0; height: 100px; width: 100%;'>
+        <EmberPopperTargetingParent @id='foo' @placement='top' role='tooltip' title="bar" data-test-foo>
+          test
+        </EmberPopperTargetingParent>
+      </div>
+    `);
+
+    assert.dom('#foo').hasAttribute('role', 'tooltip', 'role attribute bound correctly');
+    assert.dom('#foo').hasAttribute('title', 'bar', 'title attribute bound correctly');
+    assert.dom('#foo').hasAttribute('data-test-foo');
+  });
 });

yarn.lock

@@ -1324,7 +1324,7 @@ babel-plugin-debug-macros@^0.1.10, babel-plugin-debug-macros@^0.1.11:
   dependencies:
     semver "^5.3.0"
 
-babel-plugin-debug-macros@^0.2.0-beta.6:
+babel-plugin-debug-macros@^0.2.0, babel-plugin-debug-macros@^0.2.0-beta.6:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.2.0.tgz#0120ac20ce06ccc57bf493b667cf24b85c28da7a"
   integrity sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==
@@ -1352,7 +1352,7 @@ babel-plugin-ember-modules-api-polyfill@^2.5.0:
   dependencies:
     ember-rfc176-data "^0.3.5"
 
-babel-plugin-ember-modules-api-polyfill@^2.8.0:
+babel-plugin-ember-modules-api-polyfill@^2.6.0, babel-plugin-ember-modules-api-polyfill@^2.8.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-2.9.0.tgz#8503e7b4192aeb336b00265e6235258ff6b754aa"
   integrity sha512-c03h50291phJ2gQxo/aIOvFQE2c6glql1A7uagE3XbPXpKVAJOUxtVDjvWG6UAB6BC5ynsJfMWvY0w4TPRKIHQ==
@@ -3405,6 +3405,15 @@ electron-to-chromium@^1.3.47:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.78.tgz#ecb72b5b166ba6598efb384461d63cad74678ebf"
   integrity sha512-p4D/5iX08c3LNep5bWn/X3dFmec1K9le6O43lgRsO/vYKBTH2smWDMDfkGlPtERFcLVkI8xdKW5EokBZODh1xg==
 
+ember-angle-bracket-invocation-polyfill@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/ember-angle-bracket-invocation-polyfill/-/ember-angle-bracket-invocation-polyfill-1.3.1.tgz#3dd0b91b3776a8048a943889c031fa7f9ea44ec4"
+  integrity sha512-eeE4LBFIxJ5EclTIydPMPs04vvSDv64m+1fxwN2UKdSdRDWwus36k4B/LquDfWuG1WI0Dk3R4WoTFcRYlbNTWg==
+  dependencies:
+    ember-cli-babel "^6.17.0"
+    ember-cli-version-checker "^2.1.2"
+    ember-compatibility-helpers "^1.0.2"
+
 ember-assign-polyfill@~2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/ember-assign-polyfill/-/ember-assign-polyfill-2.4.0.tgz#acb00466f7d674b3e6b030acfe255b3b1f6472e1"
@@ -3456,6 +3465,25 @@ ember-cli-babel@^6.12.0:
     ember-cli-version-checker "^2.1.2"
     semver "^5.5.0"
 
+ember-cli-babel@^6.17.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz#3f6435fd275172edeff2b634ee7b29ce74318957"
+  integrity sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==
+  dependencies:
+    amd-name-resolver "1.2.0"
+    babel-plugin-debug-macros "^0.2.0-beta.6"
+    babel-plugin-ember-modules-api-polyfill "^2.6.0"
+    babel-plugin-transform-es2015-modules-amd "^6.24.0"
+    babel-polyfill "^6.26.0"
+    babel-preset-env "^1.7.0"
+    broccoli-babel-transpiler "^6.5.0"
+    broccoli-debug "^0.6.4"
+    broccoli-funnel "^2.0.0"
+    broccoli-source "^1.1.0"
+    clone "^2.0.0"
+    ember-cli-version-checker "^2.1.2"
+    semver "^5.5.0"
+
 ember-cli-babel@^7.1.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.4.2:
   version "7.7.3"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.7.3.tgz#f94709f6727583d18685ca6773a995877b87b8a0"
@@ -3682,6 +3710,14 @@ ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0:
     resolve "^1.3.3"
     semver "^5.3.0"
 
+ember-cli-version-checker@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz#47771b731fe0962705e27c8199a9e3825709f3b3"
+  integrity sha512-G+KtYIVlSOWGcNaTFHk76xR4GdzDLzAS4uxZUKdASuFX0KJE43C6DaqL+y3VTpUFLI2FIkAS6HZ4I1YBi+S3hg==
+  dependencies:
+    resolve "^1.3.3"
+    semver "^5.3.0"
+
 ember-cli-version-checker@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-2.1.2.tgz#305ce102390c66e4e0f1432dea9dc5c7c19fed98"
@@ -3793,6 +3829,15 @@ ember-cli@~3.9.0:
     watch-detector "^0.1.0"
     yam "^1.0.0"
 
+ember-compatibility-helpers@^1.0.2, ember-compatibility-helpers@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.0.tgz#feee16c5e9ef1b1f1e53903b241740ad4b01097e"
+  integrity sha512-pUW4MzJdcaQtwGsErYmitFRs0rlCYBAnunVzlFFUBr4xhjlCjgHJo0b53gFnhTgenNM3d3/NqLarzRhDTjXRTg==
+  dependencies:
+    babel-plugin-debug-macros "^0.2.0"
+    ember-cli-version-checker "^2.1.1"
+    semver "^5.4.1"
+
 ember-disable-prototype-extensions@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e"
@@ -3829,6 +3874,23 @@ ember-maybe-in-element@^0.2.0:
   dependencies:
     ember-cli-babel "^7.1.0"
 
+ember-modifier-manager-polyfill@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.0.3.tgz#6554b70d09a7d3b80d366b72ed482fb9a3e813c0"
+  integrity sha512-d8Uz0BhAZaqzttF4NXTwJ/A8uPrgd7fMho5jh89BfzJAHu5WZfGewX9cbjh3m6f512ZyxkIeeolw3Z5/Jyaujg==
+  dependencies:
+    ember-cli-babel "^7.4.2"
+    ember-cli-version-checker "^2.1.2"
+    ember-compatibility-helpers "^1.2.0"
+
+ember-named-arguments-polyfill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ember-named-arguments-polyfill/-/ember-named-arguments-polyfill-1.0.0.tgz#0b81fb81a7cef2c89e9e1d0278b579e708bf4ded"
+  integrity sha1-C4H7gafO8sienh0CeLV55wi/Te0=
+  dependencies:
+    ember-cli-babel "^6.6.0"
+    ember-cli-version-checker "^2.1.2"
+
 ember-native-dom-helpers@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/ember-native-dom-helpers/-/ember-native-dom-helpers-0.6.2.tgz#ad1f82d64ac9abdd612022f4f390bdb6653b3d39"
@@ -3857,6 +3919,14 @@ ember-raf-scheduler@^0.1.0:
   dependencies:
     ember-cli-babel "^6.6.0"
 
+ember-ref-modifier@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ember-ref-modifier/-/ember-ref-modifier-0.1.2.tgz#96a62ebb30ba9dcf29832e1deb6f500c3d963044"
+  integrity sha512-5zJiQWfnz7XsjsLc3Kp9tXJ7wa+TboJ/EXQ4xesZFqoZjcPvMz++RF5Qc1n9Ki3l4Nzfmb7I61KEvqrgrT9k0Q==
+  dependencies:
+    ember-cli-babel "^7.1.2"
+    ember-modifier-manager-polyfill "^1.0.1"
+
 ember-resolver@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-5.0.1.tgz#21740b92e1e4a65f94018de22aa1c73434dc3b2f"