diff --git a/README.md b/README.md
index 1bbed341..535506cc 100644
--- a/README.md
+++ b/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
diff --git a/addon/components/modal-dialog.js b/addon/components/modal-dialog.js
index 627848a5..285f0086 100644
--- a/addon/components/modal-dialog.js
+++ b/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')) {
diff --git a/addon/templates/components/modal-dialog.hbs b/addon/templates/components/modal-dialog.hbs
index d1c6443a..f11dea2e 100644
--- a/addon/templates/components/modal-dialog.hbs
+++ b/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}}
diff --git a/tests/acceptance/modal-dialogs-test.js b/tests/acceptance/modal-dialogs-test.js
index f5923bb4..b773b8dd 100644
--- a/tests/acceptance/modal-dialogs-test.js
+++ b/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);
});
diff --git a/tests/acceptance/modal-dialogs-without-tether-test.js b/tests/acceptance/modal-dialogs-without-tether-test.js
index 8ccdf873..ab4ae18a 100644
--- a/tests/acceptance/modal-dialogs-without-tether-test.js
+++ b/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);
});
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index cc930e8c..34cdd418 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/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}}