When renderInPlace is true, do not use tether or do any positioning

README.md

@@ -90,10 +90,11 @@ Property              | Purpose
 `close`               | The action handler for the dialog's `close` action. This action triggers when the user clicks the modal overlay.
 `attachment`          | A string of the form 'vert-attachment horiz-attachment' (see "Positioning" section below)
 `targetAttachment`    | A string of the form 'vert-attachment horiz-attachment' (see "Positioning" section below)
+`renderInPlace`       | A boolean, when true renders the modal without positioning or DOM position manipulation, useful for including a modal in a style guide
 
 ## Positioning With or Without ~~Bono~~ Ember Tether
 
-This component **optionally** uses our [ember-tether](//github.com/yapplabs/ember-tether) addon to position modal dialogs near another element or view on the page. 
+This component **optionally** uses our [ember-tether](//github.com/yapplabs/ember-tether) addon to position modal dialogs near another element or view on the page.
 
 If you include ember-tether as a dependency in your Ember app, ember-modal-dialog will use it. If you do not include the ember-tether dependency, ember-modal-dialog will fallback to its default positioning behavior.
 
@@ -112,7 +113,7 @@ If you are not overriding the default root element, then don't worry and carry o
 #### How To Position Modal Dialogs Using Ember Tether
 
 - Install ember-tether as a dependency of **your ember app**.
-    
+
     `ember install ember-tether`
 
 - Specify the following properties on a `modal-dialog` component:
@@ -297,7 +298,7 @@ ember install:addon ember-modal-dialog
 
 ## Unit Tests
 
-When running unit tests on components that use ember-modal-dialog it is necessary to create and register the container for  ember-modal-dialog to wormhole itself into.  See this [example](tests/unit/components/component-that-uses-modal-dialog-test.js) for how to set this up in a unit test.
+When running unit tests on components that use ember-modal-dialog it is necessary to create and register the container for ember-modal-dialog to wormhole itself into.  See this [example](tests/unit/components/component-that-uses-modal-dialog-test.js) for how to set this up in a unit test.
 
 ## Building
 

addon/components/modal-dialog.js

@@ -19,8 +19,8 @@ export default Ember.Component.extend({
   destinationElementId: reads('modalService.destinationElementId'),
   hasEmberTether: reads('modalService.hasEmberTether'),
 
-  useEmberTether: computed('hasEmberTether', 'alignment', function() {
-    return this.get('hasEmberTether') && (this.get('alignment') !== 'none');
+  useEmberTether: computed('hasEmberTether', 'alignment', 'renderInPlace', function() {
+    return this.get('hasEmberTether') && (this.get('alignment') !== 'none') && !this.get('renderInPlace');
   }),
 
   'container-class': null, // set this from templates
@@ -47,6 +47,12 @@ export default Ember.Component.extend({
   }),
 
   alignment: 'center', // passed in
+  _alignmentNormalized: computed('alignment', 'renderInPlace', function() {
+    if (this.get('renderInPlace')) {
+      return 'none';
+    }
+    return this.get('alignment');
+  }),
   alignmentTarget: null, // element, css selector, or view instance... passed in
   _alignmentTargetNormalized: computed('alignmentTarget', function() {
     if (this.get('alignmentTarget')) {

addon/templates/components/modal-dialog.hbs

@@ -13,7 +13,7 @@
     {{/ember-tether}}
   {{else}}
     {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString alignmentClass renderInPlaceClass container-class"
-        alignment=alignment
+        alignment=_alignmentNormalized
         alignmentTarget=alignmentTarget
     }}
       {{yield}}

tests/acceptance/modal-dialogs-test.js

@@ -86,7 +86,7 @@ test('alignment target - selector', function(assert) {
     hasOverlay: false,
     tethered: true,
     whileOpen: function(){
-      assert.ok(Ember.$(`${dialogSelector}`).hasClass('ember-tether-target-attached-left'), 'has alignment class name');
+      assert.ok(Ember.$(dialogSelector).hasClass('ember-tether-target-attached-left'), 'has alignment class name');
     }
   });
 });
@@ -124,7 +124,7 @@ test('subclassed modal', function(assert) {
     closeSelector: overlaySelector,
     hasOverlay: true,
     whileOpen: function(){
-      assert.ok(Ember.$(`${dialogSelector}`).hasClass('my-cool-modal'), 'has provided containerClassNames');
+      assert.ok(Ember.$(dialogSelector).hasClass('my-cool-modal'), 'has provided containerClassNames');
     }
   });
 });
@@ -140,6 +140,9 @@ test('in place', function(assert) {
   var inPlaceSelector = [inPlaceRootSelector, inPlaceDialogSelector, ':contains(' + dialogText + ')'].join(' ');
   var inPlaceCloseButton = [inPlaceRootSelector, inPlaceDialogSelector, 'button'].join(' ');
   andThen(function() {
+    assert.equal(Ember.$(dialogSelector).css('position'), 'relative', 'not absolutely positioned');
+    assert.equal(Ember.$(dialogSelector).css('left'), 'auto', 'should not be positioned');
+    assert.equal(Ember.$(dialogSelector).css('margin-left'), '0px', 'should not be positioned');
     assert.isAbsent(defaultSelector);
     assert.isPresentOnce(inPlaceSelector);
   });

tests/acceptance/modal-dialogs-without-tether-test.js

@@ -100,7 +100,7 @@ test('alignment target - selector', function(assert) {
     hasOverlay: false,
     tethered: true,
     whileOpen: function(){
-      assert.ok(Ember.$(`${dialogSelector}`).hasClass('ember-modal-dialog-right'), 'has alignment class name');
+      assert.ok(Ember.$(dialogSelector).hasClass('ember-modal-dialog-right'), 'has alignment class name');
     }
   });
 });
@@ -138,7 +138,7 @@ test('subclassed modal', function(assert) {
     closeSelector: overlaySelector,
     hasOverlay: true,
     whileOpen: function(){
-      assert.ok(Ember.$(`${dialogSelector}`).hasClass('my-cool-modal'), 'has provided containerClassNames');
+      assert.ok(Ember.$(dialogSelector).hasClass('my-cool-modal'), 'has provided containerClassNames');
     }
   });
 });
@@ -154,6 +154,9 @@ test('in place', function(assert) {
   var inPlaceSelector = [inPlaceRootSelector, inPlaceDialogSelector, ':contains(' + dialogText + ')'].join(' ');
   var inPlaceCloseButton = [inPlaceRootSelector, inPlaceDialogSelector, 'button'].join(' ');
   andThen(function() {
+    assert.equal(Ember.$(dialogSelector).css('position'), 'relative', 'not absolutely positioned');
+    assert.equal(Ember.$(dialogSelector).css('left'), 'auto', 'should not be positioned (left)');
+    assert.equal(Ember.$(dialogSelector).css('margin-left'), '0px', 'should not be positioned (margin-left)');
     assert.isAbsent(defaultSelector);
     assert.isPresentOnce(inPlaceSelector);
   });

tests/dummy/app/templates/application.hbs

@@ -153,7 +153,7 @@
     I AM THE CONTAINER
     {{#if isShowingInPlace}}
       {{!-- BEGIN-SNIPPET in-place --}}
-      {{#modal-dialog close='toggleInPlace' renderInPlace=true alignment='none'}}
+      {{#modal-dialog close='toggleInPlace' renderInPlace=true}}
         <h1>Stop! Modal Time!</h1>
         <p>In Place</p>
         <button {{action 'toggleInPlace'}}>Close</button>