Introduced overlay-class and container-class attributes.

README.md

@@ -73,8 +73,10 @@ Property              | Purpose
 --------------------- | -------------
 `hasOverlay`          | `true|false` (default: `true`)
 `translucentOverlay`  | `true|false` (default: `false`)
-`overlayClassNames`   | CSS class names to append to overlay divs. **NOTE:** does **not** replace the default overlay class (default: `'ember-modal-overlay'`)
-`containerClassNames` | CSS class names to append to container divs. **NOTE:** does **not** replace the default container class (default: `'ember-modal-dialog'`)
+`overlay-class`       | CSS class name(s) to append to overlay divs. Set this from template.`)
+`overlayClassNames`   | CSS class names to append to overlay divs. This is a concatenated property, so it does **not** replace the default overlay class (default: `'ember-modal-overlay'`. If you subclass this component, you may define this in your subclass.)
+`container-class`     | CSS class name(s) to append to container divs. Set this from template.`)
+`containerClassNames` | CSS class names to append to container divs. This is a concatenated property, so it does **not** replace the default overlay class (default: `'ember-modal-dialog'`. If you subclass this component, you may define this in your subclass.)
 `alignment`           | `top|right|left|bottom|center|none` (for use with `alignmentTarget`)
 `alignmentTarget`     | Element selector, element, or Ember View reference for modal position (for use with `alignment`)
 `close`               | The action handler for the dialog's `close` action

addon/components/modal-dialog.js

@@ -2,28 +2,25 @@ import Ember from 'ember';
 import template from '../templates/components/modal-dialog';
 
 var computed = Ember.computed;
+var computedJoin = function(prop) {
+  return computed(prop, function(){
+    return this.get(prop).join(' ');
+  });
+};
 
 export default Ember.Component.extend({
   tagName: '', // modal-dialog is itself tagless. positioned-container provides
                // the container div
   layout: template,
 
- /* containerClassNames should be additive, functioning similarly to a
-  * "concatenatedProperty" even for values set from a template. Combining
-  * the setter below with the concatenatedProperties declaration
-  * accomplishes this.
-  */
-  containerClassNames: Ember.computed('_containerClassNames.[]', function(key, val){
-    if (arguments.length > 1) {
-      Ember.A(this.get('_containerClassNames')).pushObject(val);
-    }
-    return this.get('_containerClassNames');
-  }),
-  _containerClassNames: Ember.computed(function(){
-    return ['ember-modal-dialog'];
-  }),
+  "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
+  overlayClassNames: ['ember-modal-overlay'], // set this in a subclass definition
+  overlayClassNamesString: computedJoin('overlayClassNames'),
 
-  overlayClassNames: ['ember-modal-overlay'],
   concatenatedProperties: ['containerClassNames', 'overlayClassNames'],
 
   destinationElementId: null, // injected
@@ -33,20 +30,6 @@ export default Ember.Component.extend({
   hasOverlay: true,
   translucentOverlay: false,
 
-  overlayClassNamesString: computed('overlayClassNames.[]', 'translucentOverlay', function() {
-    var overlayClassNames = this.get('overlayClassNames');
-    var cns = [];
-    if (this.get('translucentOverlay')) {
-      cns.push('translucent');
-    }
-    if (overlayClassNames) {
-      cns.push(this.get('overlayClassNames').join(' '));
-    }
-    if (cns) {
-      return cns.join(' ');
-    }
-  }),
-
   actions: {
     close: function() {
       this.sendAction('close');

addon/components/positioned-container.js

@@ -16,14 +16,6 @@ export default Ember.Component.extend({
     }
     return this.get('alignment') === 'center';
   }),
-  containerClassNamesString: computed('containerClassNames.[]', function() {
-    // var containerClassNames = this.get('containerClassNames');
-    var containerClassNames = Ember.makeArray(this.get('containerClassNames'));
-    if (containerClassNames) {
-      return containerClassNames.join(' ');
-    }
-  }),
-  classNameBindings: ['containerClassNamesString'],
 
   didGetPositioned: observer('isPositioned', on('didInsertElement', function() {
     if (this._state !== 'inDOM') { return; }

addon/templates/components/modal-dialog.hbs

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

examples/custom-styles.hbs

@@ -1,6 +1,6 @@
 {{#modal-dialog alignment='none'
-                containerClassNames='custom-styles-modal-container'
-                overlayClassNames='custom-styles-modal' }}
+                container-class='custom-styles-modal-container'
+                overlay-class='custom-styles-modal' }}
   <h1>Stop! Modal Time!</h1>
   <p>Custom Styles</p>
 {{/modal-dialog}}

examples/subclass.hbs

@@ -0,0 +1,8 @@
+<button {{action 'toggleSubclassed'}}>Do It</button>
+
+{{#my-cool-modal-dialog close='toggleSubclassed'
+                translucentOverlay=true}}
+  <h1>Stop! Modal Time!</h1>
+  <p>Via Subclass</p>
+  <button {{action 'toggleSubclassed'}}>Close</button>
+{{/my-cool-modal-dialog}}

examples/subclass.js

@@ -0,0 +1,6 @@
+import Component from 'ember-modal-dialog/components/modal-dialog';
+
+export default Component.extend({
+  translucentOverlay: true, // override default of false
+  containerClassNames: 'my-cool-modal'
+});

tests/acceptance/modal-dialogs-test.js

@@ -101,7 +101,8 @@ test('opening and closing modals', function(assert) {
     closeSelector: overlaySelector,
     hasOverlay: true,
     whileOpen: function(){
-      assert.ok(Ember.$(`${modalRootElementSelector} ${dialogSelector}`).hasClass('custom-styles-modal-container'), 'has provided containerClassNames');
+      assert.ok(Ember.$(`${modalRootElementSelector} ${overlaySelector}`).hasClass('custom-styles-modal'), 'has provided overlay-class');
+      assert.ok(Ember.$(`${modalRootElementSelector} ${dialogSelector}`).hasClass('custom-styles-modal-container'), 'has provided container-class');
     }
   });
   assert.dialogOpensAndCloses({
@@ -131,4 +132,14 @@ test('opening and closing modals', function(assert) {
     closeSelector: dialogCloseButton,
     hasOverlay: false
   });
+
+  assert.dialogOpensAndCloses({
+    openSelector: '#example-subclass button',
+    dialogText: 'Via Subclass',
+    closeSelector: dialogCloseButton,
+    hasOverlay: true,
+    whileOpen: function(){
+      assert.ok(Ember.$(`${modalRootElementSelector} ${dialogSelector}`).hasClass('my-cool-modal'), 'has provided containerClassNames');
+    }
+  });
 });

tests/dummy/app/components/my-cool-modal-dialog.js

@@ -0,0 +1,7 @@
+import Component from 'ember-modal-dialog/components/modal-dialog';
+
+export default Component.extend({
+  translucentOverlay: true, // override default of false
+  containerClassNames: 'my-cool-modal',
+  destinationElementId: 'modal-overlays'
+});

tests/dummy/app/styles/app.scss

@@ -41,3 +41,6 @@ h2 {
   padding: 0 0 8px 0;
   margin: 0;
 }
+.my-cool-modal {
+  border-radius: 100px;
+}

tests/dummy/app/templates/application.hbs

@@ -37,8 +37,8 @@
   {{#if isShowingCustomStyles}}
     {{#modal-dialog close='toggleCustomStyles'
                     alignment='none'
-                    containerClassNames=customContainerClassNames
-                    overlayClassNames='custom-styles-modal' }}
+                    container-class=customContainerClassNames
+                    overlay-class='custom-styles-modal' }}
       <h1>Stop! Modal Time!</h1>
       <p>Custom Styles</p>
       <button {{action 'toggleCustomStyles'}}>Close</button>
@@ -106,3 +106,18 @@
     {{/modal-dialog}}
   {{/if}}
 </div>
+
+<div class='example' id='example-subclass'>
+  <h2>Via Subclass</h2>
+  <button {{action 'toggleSubclassed'}}>Do It</button>
+  {{code-snippet name='subclass.js'}}
+  {{code-snippet name='subclass.hbs'}}
+  {{#if isShowingSubclassed}}
+    {{#my-cool-modal-dialog close='toggleSubclassed'
+                    translucentOverlay=true}}
+      <h1>Stop! Modal Time!</h1>
+      <p>Via Subclass</p>
+      <button {{action 'toggleSubclassed'}}>Close</button>
+    {{/my-cool-modal-dialog}}
+  {{/if}}
+</div>