Wormhole-less Modals

addon/components/modal-dialog.js

@@ -14,11 +14,11 @@ export default Ember.Component.extend({
                // the container div
   layout: template,
 
-  "container-class": null, // set this from templates
+  'container-class': null, // set this from templates
   containerClassNames: ['ember-modal-dialog'], // set this in a subclass definition
   containerClassNamesString: computedJoin('containerClassNames'),
 
-  "overlay-class": null, // set this from templates
+  'overlay-class': null, // set this from templates
   overlayClassNames: ['ember-modal-overlay'], // set this in a subclass definition
   overlayClassNamesString: computedJoin('overlayClassNames'),
 
@@ -31,12 +31,19 @@ export default Ember.Component.extend({
     }
   }),
 
+  renderInPlaceClass: computed('renderInPlace', function() {
+    if (this.get('renderInPlace')) {
+      return 'ember-modal-dialog-in-place';
+    }
+  }),
+
   destinationElementId: null, // injected
   alignmentTarget: null, // view instance, passed in
   alignment: 'center', // passed in
   isPositioned: computed.notEmpty('alignmentTarget'),
   hasOverlay: true,
   translucentOverlay: false,
+  renderInPlace: false,
 
   actions: {
     close: function() {

addon/templates/components/modal-dialog.hbs

@@ -1,8 +1,8 @@
-{{#ember-wormhole to=destinationElementId}}
+{{#ember-wormhole to=destinationElementId renderInPlace=renderInPlace}}
   {{#if hasOverlay}}
     <div {{bind-attr class="overlayClassNamesString translucentOverlay:translucent overlay-class"}} {{action 'close'}}></div>
   {{/if}}
-  {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString alignmentClass container-class"
+  {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString alignmentClass renderInPlaceClass container-class"
                                 alignment=alignment
                                 alignmentTarget=alignmentTarget}}
     {{yield}}

app/styles/ember-modal-dialog/ember-modal-structure.scss

@@ -10,4 +10,8 @@
 .ember-modal-dialog {
   z-index: 50;
   position: fixed;
+
+  &.ember-modal-dialog-in-place {
+    position: relative;
+  }
 }

examples/in-place.hbs

@@ -0,0 +1,4 @@
+{{#modal-dialog renderInPlace=true alignment='none'}}
+  <h1>Stop! Modal Time!</h1>
+  <p>In Place</p>
+{{/modal-dialog}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-modal-dialog",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "An ember-cli addon for implementing modal dialogs",
   "directories": {
     "doc": "doc",
@@ -36,7 +36,7 @@
   "dependencies": {
     "ember-cli-babel": "4.1.0",
     "ember-cli-htmlbars": "^0.7.4",
-    "ember-wormhole": "0.2.1"
+    "ember-wormhole": "^0.3.1"
   },
   "keywords": [
     "ember-addon"

tests/acceptance/modal-dialogs-test.js

@@ -145,4 +145,22 @@ test('opening and closing modals', function(assert) {
       assert.ok(Ember.$(`${modalRootElementSelector} ${dialogSelector}`).hasClass('my-cool-modal'), 'has provided containerClassNames');
     }
   });
+
+  click('#example-in-place button');
+  var dialogText = 'In Place';
+  var defaultSelector = [modalRootElementSelector, dialogSelector, ':contains(' + dialogText + ')'].join(' ');
+  var inPlaceDialogSelector = dialogSelector + '.ember-modal-dialog-in-place';
+  var inPlaceRootSelector = '#container-in-place';
+  var inPlaceSelector = [inPlaceRootSelector, inPlaceDialogSelector, ':contains(' + dialogText + ')'].join(' ');
+  var inPlaceCloseButton = [inPlaceRootSelector, inPlaceDialogSelector, 'button'].join(' ');
+  andThen(function() {
+    assert.isAbsent(defaultSelector);
+    assert.isPresentOnce(inPlaceSelector);
+  });
+
+  click(inPlaceCloseButton);
+  andThen(function() {
+    assert.isAbsent(defaultSelector);
+    assert.isAbsent(inPlaceSelector);
+  });
 });

tests/dummy/app/controllers/application.js

@@ -5,6 +5,8 @@ export default Ember.Controller.extend({
   isShowingTranslucent: false,
   isShowingCustomStyles: false,
   isShowingAlignmentTarget: false,
+  isShowingSubclassed: false,
+  isShowingInPlace: false,
   alignmentTargetDirection: 'right',
   customContainerClassNames: 'custom-styles-modal-container',
   nextAlignmentTargetDirection: function(){
@@ -63,6 +65,9 @@ export default Ember.Controller.extend({
     toggleSubclassed: function(){
       this.toggleProperty('isShowingSubclassed');
     },
+    toggleInPlace: function() {
+      this.toggleProperty('isShowingInPlace');
+    },
     closeAlignmentTargetSelector: function() {
       this.set('isShowingAlignmentTargetSelector', false);
       this.set('alignmentTargetDirection', 'right');

tests/dummy/app/initializers/register-subclassed-modals.js

@@ -0,0 +1,12 @@
+export default {
+  after: 'add-modals-container',
+  name: 'custom-modals',
+  initialize(_, application) {
+    var customModals = ['my-cool-modal-dialog'];
+    customModals.forEach(function(customModal) {
+      application.inject('component:' + customModal,
+                         'destinationElementId',
+                         'config:modals-container-id');
+    });
+  }
+};

tests/dummy/app/styles/app.scss

@@ -18,6 +18,12 @@ body {
   width: 500px;
 }
 
+#container-in-place {
+  min-height: 10px;
+  border: dotted 2px lime;
+  padding: 20px;
+}
+
 button {
   padding: 4px 8px;
   border-radius: 4px;

tests/dummy/app/templates/application.hbs

@@ -121,3 +121,19 @@
     {{/my-cool-modal-dialog}}
   {{/if}}
 </div>
+
+<div class='example' id='example-in-place'>
+<h2>In Place</h2>
+  <button {{action 'toggleInPlace'}}>Do It</button>
+  {{code-snippet name='in-place.hbs'}}
+  <div id='container-in-place'>
+    I AM THE CONTAINER
+    {{#if isShowingInPlace}}
+      {{#modal-dialog close='toggleInPlace' renderInPlace=true alignment='none'}}
+        <h1>Stop! Modal Time!</h1>
+        <p>In Place</p>
+        <button {{action 'toggleInPlace'}}>Close</button>
+      {{/modal-dialog}}
+    {{/if}}
+  </div>
+</div>