From d051a607cba4e4b4f3054228b6604a0caafe571c Mon Sep 17 00:00:00 2001 From: Chris LoPresto Date: Tue, 28 Apr 2015 15:51:52 -0400 Subject: [PATCH] Add `renderInPlace` to render wormhole-less modals --- addon/components/modal-dialog.js | 11 +++++++++-- addon/templates/components/modal-dialog.hbs | 4 ++-- .../ember-modal-structure.scss | 4 ++++ examples/in-place.hbs | 4 ++++ package.json | 2 +- tests/acceptance/modal-dialogs-test.js | 18 ++++++++++++++++++ tests/dummy/app/controllers/application.js | 5 +++++ .../initializers/register-subclassed-modals.js | 12 ++++++++++++ tests/dummy/app/styles/app.scss | 6 ++++++ tests/dummy/app/templates/application.hbs | 16 ++++++++++++++++ 10 files changed, 77 insertions(+), 5 deletions(-) create mode 100644 examples/in-place.hbs create mode 100644 tests/dummy/app/initializers/register-subclassed-modals.js diff --git a/addon/components/modal-dialog.js b/addon/components/modal-dialog.js index 126982b1..c35607cd 100644 --- a/addon/components/modal-dialog.js +++ b/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() { diff --git a/addon/templates/components/modal-dialog.hbs b/addon/templates/components/modal-dialog.hbs index deb88ef9..0bb277d8 100644 --- a/addon/templates/components/modal-dialog.hbs +++ b/addon/templates/components/modal-dialog.hbs @@ -1,8 +1,8 @@ -{{#ember-wormhole to=destinationElementId}} +{{#ember-wormhole to=destinationElementId renderInPlace=renderInPlace}} {{#if hasOverlay}}
{{/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}} diff --git a/app/styles/ember-modal-dialog/ember-modal-structure.scss b/app/styles/ember-modal-dialog/ember-modal-structure.scss index dc586d49..36c75dee 100644 --- a/app/styles/ember-modal-dialog/ember-modal-structure.scss +++ b/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; + } } diff --git a/examples/in-place.hbs b/examples/in-place.hbs new file mode 100644 index 00000000..13bfa66f --- /dev/null +++ b/examples/in-place.hbs @@ -0,0 +1,4 @@ +{{#modal-dialog renderInPlace=true alignment='none'}} +

Stop! Modal Time!

+

In Place

+{{/modal-dialog}} diff --git a/package.json b/package.json index 08b4476f..4244b311 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "dependencies": { "ember-cli-babel": "4.1.0", "ember-cli-htmlbars": "^0.7.4", - "ember-wormhole": "0.2.1" + "ember-wormhole": "yapplabs/ember-wormhole#render-in-place" }, "keywords": [ "ember-addon" diff --git a/tests/acceptance/modal-dialogs-test.js b/tests/acceptance/modal-dialogs-test.js index a5a43c8a..cc4c0dd0 100644 --- a/tests/acceptance/modal-dialogs-test.js +++ b/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); + }); }); diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index 7278fa48..8358fa78 100644 --- a/tests/dummy/app/controllers/application.js +++ b/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'); diff --git a/tests/dummy/app/initializers/register-subclassed-modals.js b/tests/dummy/app/initializers/register-subclassed-modals.js new file mode 100644 index 00000000..d57383b7 --- /dev/null +++ b/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'); + }); + } +}; diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 4eb32ec6..93e19fd3 100644 --- a/tests/dummy/app/styles/app.scss +++ b/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; diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 1a637c49..77523a28 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -121,3 +121,19 @@ {{/my-cool-modal-dialog}} {{/if}} + +
+

In Place

+ + {{code-snippet name='in-place.hbs'}} +
+ I AM THE CONTAINER + {{#if isShowingInPlace}} + {{#modal-dialog close='toggleInPlace' renderInPlace=true alignment='none'}} +

Stop! Modal Time!

+

In Place

+ + {{/modal-dialog}} + {{/if}} +
+