Disable tethering while tooltips are hidden

addon/components/tooltip-and-popover.js

@@ -85,16 +85,21 @@ export default EmberTetherComponent.extend({
 
   /* Properties */
 
-  attributeBindings: ['aria-hidden', 'role', 'tabindex'],
+  attributeBindings: ['aria-hidden', 'role', 'tabindex', 'data-tether-enabled'],
   classNameBindings: ['effectClass'],
   classPrefix: 'ember-tooltip-or-popover',
-
+  
   _didUpdateTimeoutLength: 1000, // 1000 ms or 0 ms, depending whether in test mode
   _hideTimer: null,
   _showTimer: null,
+  _isTetherEnabled: true,
 
   /* CPs */
 
+  'data-tether-enabled': computed('_isTetherEnabled', function() {
+    return this.get('_isTetherEnabled') ? 'true' : 'false';
+  }),
+
   'aria-hidden': computed('isShown', function() {
     return this.get('isShown') ? 'false' : 'true';
   }),
@@ -240,6 +245,8 @@ export default EmberTetherComponent.extend({
 
     this.set('isShown', false);
     this.sendAction('onHide', this);
+
+    this.stopTether();
   },
 
   didInsertElement() {
@@ -298,6 +305,10 @@ export default EmberTetherComponent.extend({
     }
 
     this.set('offset', offset);
+
+    if (!this.get('isShown')) {
+      this.stopTether();
+    }
   },
 
   /*
@@ -327,6 +338,7 @@ export default EmberTetherComponent.extend({
     const isShown = this.get('isShown');
 
     if (isShown) {
+      this.startTether();
       const duration = cleanNumber(this.get('duration'));
 
       run.cancel(this.get('_hideTimer'));
@@ -342,6 +354,8 @@ export default EmberTetherComponent.extend({
 
         this.set('_hideTimer', hideTimer);
       }
+    } else {
+      this.stopTether();
     }
   }),
 
@@ -377,6 +391,7 @@ export default EmberTetherComponent.extend({
 
       const _showTimer = run.later(this, () => {
         if (!this.get('destroying') && !this.get('isDestroyed')) {
+          this.startTether();
           this.set('isShown', true);
         }
       }, delay);
@@ -386,6 +401,7 @@ export default EmberTetherComponent.extend({
 
       /* If there is no delay, show the tooltop immediately */
 
+      this.startTether();
       this.set('isShown', true);
     }
 
@@ -419,4 +435,20 @@ export default EmberTetherComponent.extend({
     this.sendAction('onDestroy', this);
   },
 
+  startTether() {
+    // can't depend on `_tether.enabled` because it's not an
+    // Ember property (so won't trigger cp update when changed)
+    this.set('_isTetherEnabled', true);
+    this.get('_tether').enable();
+  },
+
+  stopTether() {
+    run.schedule('afterRender', () => {
+      // can't depend on `_tether.enabled` because it's not an
+      // Ember property (so won't trigger cp update when changed)
+      this.set('_isTetherEnabled', false);
+      this.get('_tether').disable();
+    });
+  }
+
 });

tests/helpers/sync/assert-visibility.js

@@ -2,6 +2,9 @@ export function assertShow(assert, context) {
 
   assert.equal(context.$().find('.ember-tooltip').attr('aria-hidden'), 'false',
     'Should show tooltip');
+
+  assert.equal(context.$().find('.ember-tooltip').attr('data-tether-enabled'), 'true',
+    'Should enable tether');
 
 }
 
@@ -10,19 +13,27 @@ export function assertHide(assert, context) {
   assert.equal(context.$().find('.ember-tooltip').attr('aria-hidden'), 'true',
     'Should hide tooltip');
 
-}
+  assert.equal(context.$().find('.ember-tooltip').attr('data-tether-enabled'), 'false',
+    'Should disable tether');
 
+}
 
 export function assertPopoverShow(assert, context) {
 
   assert.equal(context.$().find('.ember-popover').attr('aria-hidden'), 'false',
     'Should show popover');
 
+  assert.equal(context.$().find('.ember-popover').attr('data-tether-enabled'), 'true',
+    'Should enable tether');
+
 }
 
 export function assertPopoverHide(assert, context) {
 
   assert.equal(context.$().find('.ember-popover').attr('aria-hidden'), 'true',
     'Should hide popover');
 
+  assert.equal(context.$().find('.ember-popover').attr('data-tether-enabled'), 'false',
+    'Should disable tether');
+
 }

tests/integration/components/delay-test.js

@@ -12,7 +12,7 @@ moduleForComponent('tooltip-on-element', 'Integration | Option | delay', {
 test('It animates with delay passed as a number', function(assert) {
   const done = assert.async();
 
-  assert.expect(4);
+  assert.expect(8);
 
   this.render(hbs`{{tooltip-on-element delay=300}}`);
 
@@ -25,6 +25,8 @@ test('It animates with delay passed as a number', function(assert) {
   /* Check the tooltip is shown after the correct delay */
 
   run.later(() => {
+    // tether should be enabled, because the tooltip must be positioned
+    // before it is shown
     assertHide(assert, this);
   }, 290);
 
@@ -49,7 +51,7 @@ test('It animates with delay passed as a number', function(assert) {
 test('It animates with delay passed as a string', function(assert) {
   const done = assert.async();
 
-  assert.expect(4);
+  assert.expect(8);
 
   this.render(hbs`{{tooltip-on-element delay='300'}}`);
 
@@ -62,6 +64,8 @@ test('It animates with delay passed as a string', function(assert) {
   /* Check the tooltip is shwon after the correct delay */
 
   run.later(() => {
+    // tether should be enabled, because the tooltip must be positioned
+    // before it is shown
     assertHide(assert, this);
   }, 290);
 

tests/integration/components/duration-test.js

@@ -12,7 +12,7 @@ moduleForComponent('tooltip-on-element', 'Integration | Option | duration', {
 test('It hides after the given duration', function(assert) {
   const done = assert.async();
 
-  assert.expect(3);
+  assert.expect(6);
 
   this.render(hbs`{{tooltip-on-element duration=300}}`);
 
@@ -35,7 +35,7 @@ test('It hides after the given duration', function(assert) {
 
 test('It hides before the given duration, if requested', function(assert) {
 
-  assert.expect(3);
+  assert.expect(6);
 
   this.render(hbs`{{tooltip-on-element duration=300}}`);
 
@@ -58,7 +58,7 @@ test('It hides before the given duration, if requested', function(assert) {
 test('It uses duration after the first show', function(assert) {
   const done = assert.async();
 
-  assert.expect(5);
+  assert.expect(10);
 
   this.render(hbs`{{tooltip-on-element duration=300}}`);
 

tests/integration/components/event-test.js

@@ -11,7 +11,7 @@ moduleForComponent('tooltip-on-element', 'Integration | Option | event', {
 
 test('It toggles with hover', function(assert) {
 
-  assert.expect(3);
+  assert.expect(6);
 
   this.render(hbs`{{tooltip-on-element}}`);
 
@@ -33,7 +33,7 @@ test('It toggles with hover', function(assert) {
 
 test('It toggles with click', function(assert) {
 
-  assert.expect(3);
+  assert.expect(6);
 
   this.render(hbs`{{tooltip-on-element event='click'}}`);
 
@@ -55,7 +55,7 @@ test('It toggles with click', function(assert) {
 
 test('It toggles with focus', function(assert) {
 
-  assert.expect(3);
+  assert.expect(6);
 
   this.render(hbs`
     <div id="target">
@@ -83,7 +83,7 @@ test('It toggles with focus', function(assert) {
 
 test('It does not show with none', function(assert) {
 
-  assert.expect(4);
+  assert.expect(8);
 
   this.render(hbs`{{tooltip-on-element event='none'}}`);
 

tests/integration/components/hide-on-test.js

@@ -11,7 +11,7 @@ moduleForComponent('tooltip-on-element', 'Integration | Option | hideOn', {
 
 test('It hides with hideOn', function(assert) {
 
-  assert.expect(3);
+  assert.expect(6);
 
   this.render(hbs`{{tooltip-on-element hideOn='click'}}`);
 

tests/integration/components/popover/api-test.js

@@ -35,7 +35,7 @@ test('Popover: click target, click hideAction', function(assert) {
 
   assertPopoverHide(assert, this);
 
-  assert.expect(3);
+  assert.expect(6);
 
 });
 
@@ -72,7 +72,7 @@ test('Popover: click target, click hideAction, click target', function(assert) {
 
   assertPopoverShow(assert, this);
 
-  assert.expect(4);
+  assert.expect(8);
 
 });
 
@@ -116,6 +116,6 @@ test('Popover: click target, click popover, click hideAction, click target', fun
 
   assertPopoverShow(assert, this);
 
-  assert.expect(5);
+  assert.expect(10);
 
 });

tests/integration/components/popover/click-test.js

@@ -31,7 +31,7 @@ test('Popover: click target, click target', function(assert) {
 
   assertPopoverHide(assert, this);
 
-  assert.expect(3);
+  assert.expect(6);
 
 });
 
@@ -64,7 +64,7 @@ test('Popover: click target, click popover, click target', function(assert) {
 
   assertPopoverHide(assert, this);
 
-  assert.expect(4);
+  assert.expect(8);
 
 });
 
@@ -96,7 +96,7 @@ test('Popover: click target, click elsewhere', function(assert) {
 
   assertPopoverHide(assert, this);
 
-  assert.expect(3);
+  assert.expect(6);
 
 });
 
@@ -135,6 +135,6 @@ test('Popover: click target, click popover, click elsewhere', function(assert) {
 
   assertPopoverHide(assert, this);
 
-  assert.expect(4);
+  assert.expect(8);
 
 });

tests/integration/components/popover/focus-test.js

@@ -44,7 +44,7 @@ test('Popover: target focus, popover focus, popover blur', function(assert) {
 		done();
 	}, 100);
 
-	assert.expect(4);
+	assert.expect(8);
 
 });
 
@@ -92,7 +92,7 @@ test('Popover: target focus, targetInterior focus, popover focus, popover blur',
 		done();
 	}, 100);
 
-	assert.expect(5);
+	assert.expect(10);
 
 });
 
@@ -140,6 +140,6 @@ test('Popover: target focus, popover focus, popoverInterior focus, popover blur'
 		done();
 	}, 100);
 
-	assert.expect(5);
+	assert.expect(10);
 
 });

tests/integration/components/popover/hover-test.js

@@ -35,7 +35,7 @@ test('Popover: hover target, hover elsewhere', function(assert) {
     done();
   }, 300);
 
-  assert.expect(4);
+  assert.expect(8);
 
 });
 
@@ -69,7 +69,7 @@ test('Popover: hover target, hover popover (too slow)', function(assert) {
     done();
   }, 500);
 
-  assert.expect(3);
+  assert.expect(6);
 
 });
 
@@ -130,6 +130,6 @@ test('Popover: hover target, hover inbetween, hover popover, hover elsewhere', f
     done();
   }, 1000);
 
-  assert.expect(6);
+  assert.expect(12);
 
 });

tests/integration/components/popover/none-test.js

@@ -42,6 +42,6 @@ test('Popover: never shows with none', function(assert) {
 
   assertPopoverHide(assert, this);
 
-  assert.expect(4);
+  assert.expect(8);
 
 });

tests/integration/components/show-on-test.js

@@ -11,7 +11,7 @@ moduleForComponent('tooltip-on-element', 'Integration | Option | showOn', {
 
 test('It shows with showOn', function(assert) {
 
-  assert.expect(3);
+  assert.expect(6);
 
   this.render(hbs`{{tooltip-on-element showOn='click'}}`);