Support close on mouseleave for tether dialog

README.md

@@ -102,6 +102,7 @@ The tether-dialog component supports all of the modal-dialog properties specifie
 Property              | Purpose
 --------------------- | -------------
 `hasOverlay`          | Toggles presence of overlay div in DOM
+`mouseleaveToClose`     | Closes the dialog on a `mouseleave` event. Useful when providing 'pop-out' modal functionality for a specific area of the page. (default: `false`)
 `tetherClassPrefix`   | Proxies to Hubspot Tether*
 `offset`              | Proxies to Hubspot Tether*
 `targetOffset`        | Proxies to Hubspot Tether*

addon/components/tether-dialog.js

@@ -19,6 +19,11 @@ export default ModalDialog.extend({
   hasOverlay: true,
   target: 'viewport', // element, css selector, view instance, 'viewport', or 'scroll-handle'
 
+  mouseleaveToClose: false,
+
+  // if `mouseleaveToClose`, cache this in didInsertElement so that each dialog has a unqiue listener namespace
+  _eventListenerNameSpace: null,
+
   tetherClassPrefix: 'ember-tether',
   // offset - passed in
   // targetOffset - passed in
@@ -28,6 +33,34 @@ export default ModalDialog.extend({
     if (isIOS && get(this, 'hasOverlay')) {
       Ember.$('div[data-ember-modal-dialog-overlay]').css('cursor', 'pointer');
     }
-  })
+  }),
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    if (this.get('mouseleaveToClose')) {
+      this._eventListenerNameSpace = `ember-modal-dialog.${this.elementId}`;
+
+      Ember.$('.ember-modal-dialog').on(`mouseleave.${this._eventListenerNameSpace}`, (event) => {
+        // DON'T close if the mouse is leaving the target and entering the target
+        if (!event.relatedTarget || !Ember.$(event.relatedTarget).hasClass('ember-tether-target')) {
+          this.send('close');
+        }
+      });
+      Ember.$(this.get('target')).on(`mouseleave.${this._eventListenerNameSpace}`, (event) => {
+        // DON'T close if the mouse is leaving the target and entering the dialog
+        if (!event.relatedTarget || !Ember.$(event.relatedTarget).hasClass('ember-modal-dialog')) {
+          this.send('close');
+        }
+      });
+
+    }
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
 
+    Ember.$('.ember-modal-dialog').off(`mouseleave.${this._eventListenerNameSpace}`);
+    Ember.$(this.get('target')).off(`mouseleave.${this._eventListenerNameSpace}`);
+  }
 });

tests/acceptance/tether-dialog-test.js

@@ -114,6 +114,37 @@ test('target - view', function(assert) {
   });
 });
 
+test('mouseleaveToClose functions with manual close button', function(assert) {
+  const openSelector = '#targetedMouseleaveToClose';
+  const dialogText = 'Target w/ mouseleaveToClose';
+
+  assert.dialogOpensAndCloses({
+    openSelector,
+    dialogText,
+    closeSelector: dialogCloseButton,
+    hasOverlay: false,
+    tethered: true
+  });
+});
+
+test('mouseleaveToClose closes when a mouseleave event occurs on the dialog', function(assert) {
+  const openSelector = '#targetedMouseleaveToClose';
+  const dialogText = 'Target w/ mouseleaveToClose';
+
+  click(openSelector).then(() => {
+    return assert.closesOnMouseleave(dialogSelector, dialogText);
+  });
+});
+
+test('mouseleaveToClose closes when a mouseleave event occurs on the element used to open', function(assert) {
+  const openSelector = '#targetedMouseleaveToClose';
+  const dialogText = 'Target w/ mouseleaveToClose';
+
+  click(openSelector).then(() => {
+    return assert.closesOnMouseleave(openSelector, dialogText);
+  });
+});
+
 test('subclassed modal', function(assert) {
   assert.dialogOpensAndCloses({
     openSelector: '#example-subclass button',

tests/dummy/app/controllers/application.js

@@ -12,6 +12,7 @@ export default Ember.Controller.extend({
   isShowingTargetSelector: false,
   isShowingTargetView: false,
   isShowingTargetElement: false,
+  isShowingMouseleaveToClose: false,
   isShowingSubclassed: false,
   isShowingInPlace: false,
   isInPlace: true,
@@ -91,6 +92,9 @@ export default Ember.Controller.extend({
       }
       this.toggleProperty('isShowingTargetElement');
     },
+    toggleMouseleaveToClose() {
+      this.toggleProperty('isShowingMouseleaveToClose');
+    },
     toggleSubclassed() {
       this.toggleProperty('isShowingSubclassed');
     },
@@ -125,6 +129,11 @@ export default Ember.Controller.extend({
       this.set('isShowingTargetElement', false);
       this.set('exampleTargetAttachment', 'middle left');
       this.set('exampleAttachment', 'middle right');
+    },
+    closeMouseleaveToClose() {
+      this.set('isShowingMouseleaveToClose', false);
+      this.set('exampleTargetAttachment', 'middle left');
+      this.set('exampleAttachment', 'middle right');
     }
   }
 });

tests/dummy/app/templates/-tether-dialog.hbs

@@ -155,6 +155,30 @@
   {{/if}}
 </div>
 
+<div class='example' id='example-targeted-mouseleave-to-close'>
+  <h2>Close w/ mouseleave</h2>
+  <div class='targetContainer'>
+    <button id='targetedMouseleaveToClose' {{action 'toggleMouseleaveToClose'}}>Do It</button>
+  </div>
+  {{code-snippet name='target-selector-tether-dialog.hbs'}}
+  {{#if isShowingMouseleaveToClose}}
+    {{!-- BEGIN-SNIPPET target-element-tether-dialog --}}
+    {{#tether-dialog close='toggleMouseleaveToClose'
+                    hasOverlay=false
+                    targetAttachment=exampleTargetAttachment
+                    attachment=exampleAttachment
+                    mouseleaveToClose=true
+                    target='#targetedMouseleaveToClose' }}
+      <h1>Stop! Modal Time!</h1>
+      <p>Target w/ mouseleaveToClose - Selector: '#targetedMouseleaveToClose'</p>
+      <p>Target Attachment: {{exampleTargetAttachment}}</p>
+      <p>Attachment: {{exampleAttachment}}</p>
+      <button {{action 'closeMouseleaveToClose'}}>Close</button>
+    {{/tether-dialog}}
+    {{!-- END-SNIPPET --}}
+  {{/if}}
+</div>
+
 <div class='example' id='example-subclass'>
   <h2>Via Subclass</h2>
   <button {{action 'toggleSubclassed'}}>Do It</button>

tests/helpers/modal-asserts.js

@@ -39,4 +39,12 @@ export default function registerAssertHelpers() {
       });
     });
   };
+
+  assert.closesOnMouseleave = function(mouseLeaveSelector, dialogText) {
+    const dialogContent = [dialogSelector, `:contains(${dialogText})`].join('');
+
+    return triggerEvent(mouseLeaveSelector, 'mouseleave').then(() => {
+      this.isAbsent(dialogContent);
+    });
+  };
 }