Merge pull request #144 from wandertosee/feature/element-center

Add element center to positioned container

README.md

@@ -124,7 +124,7 @@ Various modal use cases are best supported by different DOM structures. Ember Mo
 
 ## Positioning
 
-Ember Modal Dialog provides `attachment` and `targetAttachment` properties to configure positioning of the modal dialog near its target. To provide consistency with Hubspot Tether, Ember Modal Dialog uses the same syntax for these properties: "top|middle|bottom left|center|right"... e.g. `'middle left'`
+Ember Modal Dialog provides `attachment` and `targetAttachment` properties to configure positioning of the modal dialog near its target. To provide consistency with Hubspot Tether, Ember Modal Dialog uses the same syntax for these properties: "top|middle|bottom left|center|right|elementCenter"... e.g. `'middle left'`
 
 ### Positioning tether-dialog Components
 
@@ -155,7 +155,7 @@ If you are not overriding the default root element, then don't worry and carry o
 
 The modal-dialog component uses an internal ember-modal-dialog-positioned-container component to position modals near their targets. This is a good option if you do not wish to use Ember Tether + Hubspot Tether. Just know that this positioning logic is not nearly as sophisticated as the positioning logic in Ember Tether. That's why we made Ember Tether.
 
-NOTE: The {{ember-modal-dialog-positioned-container}} component only respects the horizontal value for `targetAttachment`. So, for example,`'top left'`, `'middle left'`, and `'bottom left'` will all be interpreted simply as `'left'`. We will gladly accept [PRs](https://github.com/yapplabs/ember-modal-dialog/pulls) for improvements here.
+NOTE: The {{ember-modal-dialog-positioned-container}} component only respects the horizontal value for `targetAttachment`. So, for example,`'top left'`, `'middle left'`, and `'bottom left'` will all be interpreted simply as `'left'`. Additionally, `'elementCenter'` will center the modal above the clicked element. We will gladly accept [PRs](https://github.com/yapplabs/ember-modal-dialog/pulls) for improvements here.
 
 ## Wormholes
 

addon/components/positioned-container.js

@@ -3,7 +3,7 @@ import Ember from 'ember';
 const { computed, observer, on } = Ember;
 const { capitalize } = Ember.String;
 const SUPPORTED_TARGET_ATTACHMENTS = [
-  'top', 'right', 'bottom', 'left', 'center', 'none'
+  'top', 'right', 'bottom', 'left', 'center', 'elementCenter', 'none'
 ];
 
 export default Ember.Component.extend({
@@ -131,5 +131,19 @@ export default Ember.Component.extend({
       .css('top', originOffsetTop + targetHeight);
   },
 
+  alignElementCenter(targetAttachmentElement) {
+    Ember.assert('ElementCenter targetAttachment requires a target', targetAttachmentElement.length > 0);
+
+    const elementWidth = this.$().outerWidth();
+    const originOffset = targetAttachmentElement.offset();
+    const originOffsetTop = originOffset.top - Ember.$(window).scrollTop();
+    const targetWidth = targetAttachmentElement.outerWidth();
+    const targetHeight = targetAttachmentElement.outerHeight();
+    const elementHeight = this.$().outerHeight();
+
+    this.$().css('left', (originOffset.left + targetWidth / 2 - elementWidth / 2))
+      .css('top', originOffsetTop + targetHeight / 2 - elementHeight / 2);
+  },
+
   alignNone() {}
 });

tests/dummy/app/controllers/application.js

@@ -16,6 +16,7 @@ export default Ember.Controller.extend({
   isShowingInPlace: false,
   isInPlace: true,
   isShowingCenteredScrolling: false,
+  isShowingElementCenterModal: false,
   exampleTargetAttachment: 'middle left',
   exampleAttachment: 'middle right',
   customContainerClassNames: 'custom-styles-modal-container',
@@ -111,6 +112,14 @@ export default Ember.Controller.extend({
         Ember.$('body').removeClass('centered-modal-showing');
       }
     },
+    toggleElementCenterModal() {
+      this.toggleProperty('isShowingElementCenterModal');
+      if (this.get('isShowingElementCenterModal')) {
+        this.set('targetAttachment', 'elementCenter');
+        this.set('exampleTargetAttachment', 'elementCenter');
+        this.set('exampleAttachment', 'elementCenter');
+      }
+    },
     closeTargetSelector() {
       this.set('isShowingTargetSelector', false);
       this.set('exampleTargetAttachment', 'middle left');

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

@@ -73,17 +73,17 @@
 <div class='example' id='example-target-view'>
   <h2>Target (View)</h2>
   <div class='targetContainer'>
-    {{#view viewName="bwmdv" tagName="span"}}
+    <span id="bwmdv">
       <button {{action 'toggleTargetView'}}>Do It</button>
-    {{/view}}
+    </span>
   </div>
   {{code-snippet name='target-view-modal-dialog.hbs'}}
   {{#if isShowingTargetView}}
     {{!-- BEGIN-SNIPPET target-view-modal-dialog --}}
     {{#modal-dialog close='toggleTargetView'
                     targetAttachment=exampleTargetAttachment
                     attachment=exampleAttachment
-                    target=view.bwmdv }}
+                    target="#bwmdv" }}
       <h1>Stop! Modal Time!</h1>
       <p>Target - View: {{view.bwmdv}}</p>
       <p>Target Attachment: {{exampleTargetAttachment}}</p>
@@ -97,17 +97,17 @@
 <div class='example' id='example-target-element'>
   <h2>Target (Element)</h2>
   <div class='targetContainer'>
-    {{#view viewName="bwmde" tagName="span"}}
+    <span id="bwmde">
       <button {{action 'toggleTargetElement'}}>Do It</button>
-    {{/view}}
+    </span>
   </div>
   {{code-snippet name='target-element-modal-dialog.hbs'}}
   {{#if isShowingTargetElement}}
     {{!-- BEGIN-SNIPPET target-element-modal-dialog --}}
     {{#modal-dialog close='toggleTargetElement'
                     targetAttachment=exampleTargetAttachment
                     attachment=exampleAttachment
-                    target=view.bwmde.element }}
+                    target="#bwmde" }}
       <h1>Stop! Modal Time!</h1>
       <p>Target - Element{{view.bwmde.elementId}}</p>
       <p>Target Attachment: {{exampleTargetAttachment}}</p>
@@ -188,3 +188,24 @@
     {{/if}}
   </div>
 </div>
+
+<div class='example'>
+  <h2>Element Center</h2>
+  <span id='elementCenter'>
+    <button {{action 'toggleElementCenterModal'}}>Element Center</button>
+  </span>
+  {{code-snippet name='element-centered-modal-dialog.hbs'}}
+  {{#if isShowingElementCenterModal}}
+  {{!-- BEGIN-SNIPPET element-centered-modal-dialog --}}
+    {{#modal-dialog
+        close='toggleElementCenterModal'
+        elementId=elementId
+        translucentOverlay=true
+        targetAttachment='elementCenter'
+        target='#elementCenter'
+    }}
+      <p>Centered on element.</p>
+    {{/modal-dialog}}
+    {{!-- END-SNIPPET --}}
+  {{/if}}
+</div>

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

@@ -108,9 +108,9 @@
 <div class='example' id='example-target-view'>
   <h2>Target (View)</h2>
   <div class='targetContainer'>
-    {{#view viewName="bwtdv" tagName="span"}}
+    <span id="bwtdv">
       <button {{action 'toggleTargetView'}}>Do It</button>
-    {{/view}}
+    </span>
   </div>
   {{code-snippet name='target-view-tether-dialog.hbs'}}
   {{#if isShowingTargetView}}
@@ -119,9 +119,9 @@
                     hasOverlay=false
                     targetAttachment=exampleTargetAttachment
                     attachment=exampleAttachment
-                    target=view.bwtdv }}
+                    target="#bwtdv" }}
       <h1>Stop! Modal Time!</h1>
-      <p>Target - View: {{view.bwtdv}}</p>
+      <p>Target - View: bwtdv</p>
       <p>Target Attachment: {{exampleTargetAttachment}}</p>
       <p>Attachment: {{exampleAttachment}}</p>
       <button {{action 'closeTargetView'}}>Close</button>
@@ -133,9 +133,9 @@
 <div class='example' id='example-target-element'>
   <h2>Target (Element)</h2>
   <div class='targetContainer'>
-    {{#view viewName="bwtde" tagName="span"}}
+    <span id="bwtde">
       <button {{action 'toggleTargetElement'}}>Do It</button>
-    {{/view}}
+    </span>
   </div>
   {{code-snippet name='target-element-tether-dialog.hbs'}}
   {{#if isShowingTargetElement}}
@@ -144,7 +144,7 @@
                     hasOverlay=false
                     targetAttachment=exampleTargetAttachment
                     attachment=exampleAttachment
-                    target=view.bwtde.element }}
+                    target="#bwtde" }}
       <h1>Stop! Modal Time!</h1>
       <p>Target - Element{{view.bwtde.elementId}}</p>
       <p>Target Attachment: {{exampleTargetAttachment}}</p>