fix(toggling renderInPlace) (#58)

kybishop · Nov 3, 2017 · e777f3e · e777f3e
1 parent f13574c
commit e777f3e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 31 deletions.
diff --git a/addon/components/-ember-popper-legacy.js b/addon/components/-ember-popper-legacy.js
@@ -16,33 +16,33 @@ export default class EmberPopper extends EmberPopperBase {
     this._initialParentNode = this.element.parentNode;
 
     if (!GTE_EMBER_1_13) {
-      addObserver(this, 'renderInPlace', this, this.didUpdateAttrs);
-      addObserver(this, 'eventsEnabled', this, this.didUpdateAttrs);
-      addObserver(this, 'modifiers', this, this.didUpdateAttrs);
-      addObserver(this, 'registerAPI', this, this.didUpdateAttrs);
-      addObserver(this, 'onCreate', this, this.didUpdateAttrs);
-      addObserver(this, 'onUpdate', this, this.didUpdateAttrs);
-      addObserver(this, 'placement', this, this.didUpdateAttrs);
-      addObserver(this, 'popperContainer', this, this.didUpdateAttrs);
-      addObserver(this, 'target', this, this.didUpdateAttrs);
+      addObserver(this, 'renderInPlace', this, this._updatePopper);
+      addObserver(this, 'eventsEnabled', this, this._updatePopper);
+      addObserver(this, 'modifiers', this, this._updatePopper);
+      addObserver(this, 'registerAPI', this, this._updatePopper);
+      addObserver(this, 'onCreate', this, this._updatePopper);
+      addObserver(this, 'onUpdate', this, this._updatePopper);
+      addObserver(this, 'placement', this, this._updatePopper);
+      addObserver(this, 'popperContainer', this, this._updatePopper);
+      addObserver(this, 'target', this, this._updatePopper);
+
+      super.didRender(...arguments);
     }
-
-    super.didInsertElement(...arguments);
   }
 
   willDestroyElement() {
     super.willDestroyElement(...arguments);
 
     if (!GTE_EMBER_1_13) {
-      removeObserver(this, 'renderInPlace', this, this.didUpdateAttrs);
-      removeObserver(this, 'eventsEnabled', this, this.didUpdateAttrs);
-      removeObserver(this, 'modifiers', this, this.didUpdateAttrs);
-      removeObserver(this, 'registerAPI', this, this.didUpdateAttrs);
-      removeObserver(this, 'onCreate', this, this.didUpdateAttrs);
-      removeObserver(this, 'onUpdate', this, this.didUpdateAttrs);
-      removeObserver(this, 'placement', this, this.didUpdateAttrs);
-      removeObserver(this, 'popperContainer', this, this.didUpdateAttrs);
-      removeObserver(this, 'target', this, this.didUpdateAttrs);
+      removeObserver(this, 'renderInPlace', this, this._updatePopper);
+      removeObserver(this, 'eventsEnabled', this, this._updatePopper);
+      removeObserver(this, 'modifiers', this, this._updatePopper);
+      removeObserver(this, 'registerAPI', this, this._updatePopper);
+      removeObserver(this, 'onCreate', this, this._updatePopper);
+      removeObserver(this, 'onUpdate', this, this._updatePopper);
+      removeObserver(this, 'placement', this, this._updatePopper);
+      removeObserver(this, 'popperContainer', this, this._updatePopper);
+      removeObserver(this, 'target', this, this._updatePopper);
     }
 
     const element = this._getPopperElement();

diff --git a/addon/components/ember-popper-base.js b/addon/components/ember-popper-base.js
@@ -151,13 +151,7 @@ export default class EmberPopperBase extends Component {
 
   // ================== LIFECYCLE HOOKS ==================
 
-  didUpdateAttrs() {
-    this._updatePopper();
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-
+  didRender() {
     this._updatePopper();
   }
 
@@ -301,14 +295,14 @@ export default class EmberPopperBase extends Component {
       // bootstrap the public API with fields that are guaranteed to be static,
       // such as imperative actions
       this._publicAPI = {
-        popperElement: this._getPopperElement(),
         update: this.update.bind(this),
         scheduleUpdate: this.scheduleUpdate.bind(this),
         enableEventListeners: this.enableEventListeners.bind(this),
         disableEventListeners: this.disableEventListeners.bind(this)
       };
     }
 
+    this._publicAPI.popperElement = this._getPopperElement();
     this._publicAPI.popperTarget = this._popperTarget;
 
     return this._publicAPI;

diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
@@ -1,11 +1,16 @@
 import Controller from '@ember/controller';
 
 export default Controller.extend({
+  eventsEnabled: true,
   showTargetedPopper: true,
 
   actions: {
     toggleShowTargetedPopper() {
       this.toggleProperty('showTargetedPopper');
+    },
+
+    toggleEventsEnabled() {
+      this.toggleProperty('eventsEnabled');
     }
   }
 });
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="left">
-    {{#ember-popper class="popper"}}
+    {{#ember-popper id='parent' class='popper' eventsEnabled=eventsEnabled}}
       Hello from the left! I have no explicit target.
       <div class="popper-arrow" x-arrow></div>
 
@@ -26,4 +26,9 @@
   {{/ember-popper}}
 {{/if}}
 
-<button {{action "toggleShowTargetedPopper"}}>toggle show targeted popper</button>
+<div class="row">
+  <button {{action "toggleShowTargetedPopper"}}>toggle show targeted popper</button>
+</div>
+<div class="row">
+  <button {{action "toggleEventsEnabled"}}>toggle eventsEnabled on parent popper</button>
+</div>
diff --git a/yarn.lock b/yarn.lock
@@ -2513,7 +2513,7 @@ ember-hash-helper-polyfill@^0.1.2:
     ember-cli-babel "^5.1.7"
     ember-cli-version-checker "^1.2.0"
 
-ember-legacy-class-transform@^0.1.2:
+ember-legacy-class-transform@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/ember-legacy-class-transform/-/ember-legacy-class-transform-0.1.3.tgz#af943fd46aa050981b7f0927bf70ef8736878682"
   dependencies: