Merge pull request #165 from truenorth/modal-fixed-footer

Configurable default values

Author: mike-north

README.md

@@ -35,6 +35,9 @@ $ ember serve
 ```
 
 ### Configuration
+
+#### Style
+
 Using **SASS** makes configuring the color scheme simple. Just make sure you import `components/color` and `components/variables` before `materialize` like the example below.
 
 ```scss
@@ -49,6 +52,25 @@ $primary-color: color("pink", "lighten-2");
 ```
 See the materialize docs on sass variables [here](http://materializecss.com/color.html).
 
+#### Defaults
+
+Some of the library's defaults can be set via your **config/environment.js** file
+
+```javascript
+module.exports = function(/* environment, appConfig */) {
+  var ENV = {
+    materializeDefaults: {
+      modalIsFooterFixed: false,
+      buttonIconPosition: 'left',
+      loaderSize:         'big',
+      loaderMode:         'indeterminate',
+      modalContainerId:   'materialize-modal-root-element'
+    },
+    ...
+  };
+}
+
+```
 
 ## Installation
 

addon/components/md-btn.js

@@ -1,15 +1,18 @@
 import Ember from 'ember';
+import UsesSettings from '../mixins/uses-settings';
 import layout from '../templates/components/md-btn';
 import computed from 'ember-new-computed';
 
-export default Ember.Component.extend({
+const { computed: { oneWay } } = Ember;
+
+export default Ember.Component.extend(UsesSettings, {
   layout: layout,
   tagName: 'a',
   classNameBindings: ['btn:waves-effect', 'isFlat::waves-light', 'isDisabled:disabled:waves-effect', 'buttonClass'],
   attributeBindings: ['isDisabled:disabled'],
   text: null,
   icon: null,
-  iconPosition: 'left',
+  iconPosition: oneWay('_mdSettings.buttonIconPosition'),
   buttonType: null,
   actionArg: null,
   isFlat: Ember.computed.equal('buttonType', 'flat'),

addon/components/md-loader.js

@@ -1,15 +1,18 @@
 import Ember from 'ember';
+import UsesSettings from '../mixins/uses-settings';
 import layout from '../templates/components/md-loader';
 import computed from 'ember-new-computed';
 
-export default Ember.Component.extend({
+const { computed: { oneWay } } = Ember;
+
+export default Ember.Component.extend(UsesSettings, {
   layout: layout,
 
   classNameBindings: ['isBarType:progress:preloader-wrapper', 'active:active', 'size'],
 
-  mode: 'indeterminate',
+  mode: oneWay('_mdSettings.loaderMode'),
   percent: 0,
-  size: 'big',
+  size: oneWay('_mdSettings.loaderSize'),
   active: true,
   color: null,
 

addon/components/md-modal-container.js

@@ -1,7 +1,10 @@
 import Ember from 'ember';
+import UsesSettings from '../mixins/uses-settings';
 import layout from '../templates/components/md-modal-container';
 
-export default Ember.Component.extend({
-  modalContainerId: 'materialize-modal-root-element',
+const { computed: { oneWay } } = Ember;
+
+export default Ember.Component.extend(UsesSettings, {
+  modalContainerId: oneWay('_mdSettings.modalContainerId'),
   layout: layout
 });

addon/components/md-modal.js

@@ -1,21 +1,40 @@
+import Ember from 'ember';
+import UsesSettings from '../mixins/uses-settings';
 import YappModal from 'ember-modal-dialog/components/modal-dialog';
 import layout from '../templates/components/md-modal';
 import computed from 'ember-new-computed';
 
-export default YappModal.extend({
+const { computed: { oneWay } } = Ember;
+
+export default YappModal.extend(UsesSettings, {
   layout: layout,
 
-  destinationElementId: "materialize-modal-root-element",
+  destinationElementId: oneWay('_mdSettings.modalContainerId'),
+
   acceptsKeyResponder: true,
   overlayId: 'lean-modal',
   attributeBindings: ['style:inlineStyle'],
+  concatenatedProperties: ['modalClassNames'],
 
   inlineStyle: computed({
     get() {
       return 'z-index: 1000;';
     }
   }),
 
+  isFooterFixed: oneWay('_mdSettings.modalIsFooterFixed'),
+
+  modalClassNames: ['modal', 'show'],
+  _modalClassString: computed('modalClassNames.@each', 'isFooterFixed', {
+    get() {
+      let names = this.get('modalClassNames');
+      if (this.get('isFooterFixed')) {
+        names.push('modal-fixed-footer');
+      }
+      return names.join(' ');
+    }
+  }),
+
   didInsertElement() {
     this._super(...arguments);
     this.becomeKeyResponder();

addon/mixins/uses-settings.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+import computed from 'ember-new-computed';
+
+export default Ember.Mixin.create({
+  _mdSettings: computed({
+    get() {
+      return this.get('container').lookup('service:materialize-settings');
+    }
+  })
+});

addon/services/md-settings.js

@@ -0,0 +1,30 @@
+import Ember from 'ember';
+
+const { keys, getWithDefault, set, computed: { oneWay } } = Ember;
+const { classify } = Ember.String;
+
+export default Ember.Service.extend({
+  // Footer
+  modalIsFooterFixed: oneWay('defaultModalIsFooterFixed'),
+  // Button
+  buttonIconPosition: oneWay('defaultButtonIconPosition'),
+  // Loader
+  loaderSize: oneWay('defaultLoaderSize'),
+  loaderMode: oneWay('defaultLoaderMode'),
+  // Modal
+  modalContainerId: oneWay('defaultModalContainerId'),
+
+  init() {
+    this._super(...arguments);
+    this._setDefaults();
+  },
+
+  _setDefaults() {
+    const defaults = getWithDefault(this, 'materializeDefaults', {});
+    keys(defaults).map(key => {
+      const classifiedKey = classify(key);
+      const defaultKey = `default${classifiedKey}`;
+      return set(this, defaultKey, defaults[key]);
+    });
+  }
+});

addon/templates/components/md-modal.hbs

@@ -5,7 +5,7 @@
   {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString container-class"
                                 alignment=alignment
                                 alignmentTarget=alignmentTarget}}
-  <div class="modal show" style="display: block; opacity: 1; top: 10%;">
+  <div {{bind-attr class=_modalClassString}} style="display: block; opacity: 1; top: 10%;">
     {{yield}}
   </div>
   {{/ember-modal-dialog-positioned-container}}

app/initializers/md-settings.js

@@ -0,0 +1,15 @@
+import config from '../config/environment';
+import MaterializeSettings from 'ember-cli-materialize/services/md-settings';
+
+export function initialize(container, application) {
+  const { materializeDefaults } = config;
+
+  application.register('config:materialize', materializeDefaults, { instantiate: false });
+  application.register('service:materialize-settings', MaterializeSettings);
+  application.inject('service:materialize-settings', 'materializeDefaults', 'config:materialize');
+}
+
+export default {
+  name: 'md-settings',
+  initialize: initialize
+};

app/services/md-settings.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-materialize/services/md-settings';