Merge pull request #37 from truenorth/material-loader

Loader component

addon/components/materialize-loader.js

@@ -0,0 +1,52 @@
+import Ember from 'ember';
+import layout from '../templates/components/materialize-loader';
+
+export default Ember.Component.extend({
+  layout: layout,
+  mode: 'indeterminate',
+  percent: 0,
+  size: 'big',
+  active: true,
+  color: null,
+  classNameBindings: ['isBarType:progress:preloader-wrapper', 'active:active', 'size'],
+
+  isBarType: function () {
+    return ['determinate', 'indeterminate'].indexOf(this.get('mode')) >= 0;
+  }.property('mode'),
+
+  isDeterminate: function () {
+    return ['determinate'].indexOf(this.get('mode'));
+  }.property('mode'),
+
+  barStyle: function () {
+    if (this.get('mode') === 'determinate') {
+      var pct = this.get('percent');
+      return `width: ${pct}%`;
+    }
+  }.property('mode', 'percent'),
+
+  barClassName: function () {
+    var mode = this.get('mode');
+    if (this.get('isBarType')) {
+      return mode;
+    }
+    else {
+      return null;
+    }
+  }.property('isBarType', 'mode'),
+
+  spinnerClassNames: function () {
+    if (!this.get('isBarType')) {
+      var color = this.get('color');
+      if (!color) {
+        return ['blue', 'red', 'green', 'yellow'].map((c) => (`spinner-layer spinner-${c}`));
+      }
+      else {
+        return [`spinner-layer spinner-${color}-only`];
+      }
+    }
+    else {
+      return [];
+    }
+  }.property('color', 'isBarType')
+});

addon/templates/components/materialize-input.hbs

@@ -1,9 +1,19 @@
 {{#if icon}}
     <i {{bind-attr class="icon :prefix"}}></i>
 {{/if}}
-{{input id=id value=value classNameBindings="validate:validate: errors.firstObject:invalid:valid" type=type
-        required=required pattern=pattern maxlength=maxlength readonly=readonly disabled=disabled
-        autocomplete=autocomplete}}
+{{input id=id
+  value=value
+  classNameBindings="validate:validate: errors.firstObject:invalid:valid"
+  type=type
+  required=required
+  pattern=pattern
+  maxlength=maxlength
+  readonly=readonly
+  disabled=disabled
+  autocomplete=autocomplete
+  step=step
+  min=min
+  max=max}}
 <label {{bind-attr for=id}}>{{label}}</label>
 <small class="red-text">
   {{#if errors}} {{errors.firstObject}} {{else}} &nbsp; {{/if}}

addon/templates/components/materialize-loader.hbs

@@ -0,0 +1,14 @@
+{{#if isBarType}}
+  <div class={{barClassName}} style={{barStyle}}></div>
+{{/if}}
+{{#each spinnerClassNames as |spinnerClassName|}}
+  <div class={{spinnerClassName}}>
+    <div class="circle-clipper left">
+      <div class="circle"></div>
+    </div><div class="gap-patch">
+      <div class="circle"></div>
+    </div><div class="circle-clipper right">
+      <div class="circle"></div>
+    </div>
+  </div>
+{{/each}}

app/components/materialize-loader.js

@@ -0,0 +1,3 @@
+import materializeLoader from 'ember-cli-materialize/components/materialize-loader';
+
+export default materializeLoader;

tests/dummy/app/controllers/loader.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  percent: 70
+});

tests/dummy/app/router.js

@@ -12,6 +12,7 @@ Router.map(function() {
   this.route("cards");
   this.route("collapsible");
   this.route("input");
+  this.route("loader");
   this.route("parallax");
 });
 

tests/dummy/app/styles/app.scss

@@ -54,6 +54,7 @@ span.badge {
   }
   &.default-value {
     float: none;
+    position: inherit;
   }
 }
 .intro {

tests/dummy/app/templates/index.hbs

@@ -30,6 +30,7 @@
   <h2 class="col s12 header">Usage</h2>
   <div class="section">
     <ul class="collection">
+
       {{#link-to 'badges' class="collection-item"}}
         Badges
         {{#materialize-badge class="new"}}1{{/materialize-badge}}
@@ -56,6 +57,10 @@
         Input{{#materialize-badge class="new"}}4{{/materialize-badge}}
       {{/link-to}}
 
+      {{#link-to 'loader' class="collection-item"}}
+        Loader{{#materialize-badge class="new"}}1{{/materialize-badge}}
+      {{/link-to}}
+
       {{#link-to 'parallax' class="collection-item"}}
         Parallax{{#materialize-badge class="new"}}1{{/materialize-badge}}
       {{/link-to}}

tests/dummy/app/templates/loader.hbs

@@ -0,0 +1,85 @@
+<div class="section index-banner">
+  <div class="container">
+    <div class="row">
+      <div class="col s12 m9">
+        <h1 class="header">Loader</h1>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class='container'>
+  <div class="section">
+    <div class="intro">
+      <h4 class="col s12 header">The component supports one option:</h4>
+      <ul>
+        <li>mode, default value <span class="default-value badge">indeterminate</span> - Loader mode (determinate, indeterminate, circular)</li>
+        <li>percent, default value <span class="default-value badge">0</span> - Percent progress (determinate loader only)</li>
+        <li>active, default value <span class="default-value badge">true</span> - Whether the animation should be active or not (indeterminate loaders only)</li>
+        <li>color, default value <span class="default-value badge">null</span> - Circular loader color (null, yellow, blue, green, red). Setting this to null (default) will result in the color rotating</li>
+        <li>size, default value <span class="default-value badge">big</span> - Circular loader size (small, big)</li>
+      </ul>
+    </div>
+  </div>
+
+  <!-- INDETERMINATE LOADER -->
+  <div class="section">
+    <h4 class="col s12 header">Indeterminate Loader</h4>
+    <div class="button-example">
+      {{materialize-loader}}
+
+      <pre class=" language-markup">
+        <code class=" col s8 language-markup">
+          <span>&#123;&#123;</span>materialize-loader<span>&#125;&#125;</span>
+        </code>
+      </pre>
+    </div>
+  </div>
+
+  <!-- DETERMINATE LOADER -->
+  <div class="section">
+    <h4 class="col s12 header">Determinate Loader</h4>
+    <div class="button-example">
+      <div class="row">
+        <div class="col s2">
+          {{materialize-input label="Percent" type="number" value=percent step=5 min=0 max=100}}
+        </div>
+        <div class="col s10">
+          {{materialize-loader mode="determinate" percent=percent}}
+        </div>
+      </div>
+
+      <pre class=" language-markup">
+        <code class=" col s12 language-markup">
+          <span>&#123;&#123;</span>materialize-loader mode="determinate"<span>&#125;&#125;</span>
+        </code>
+      </pre>
+    </div>
+  </div>
+
+  <!-- CIRCULAR DETERMINATE LOADER -->
+  <div class="section">
+    <h4 class="col s12 header">Circular Indeterminate Loader</h4>
+    <div class="button-example">
+      <div class="row">
+        <div class="col s2 center">{{materialize-loader mode="circular"}}</div>
+        <div class="col s2 center">{{materialize-loader mode="circular" size="small"}}</div>
+        <div class="col s2 center">{{materialize-loader mode="circular" color="blue"}}</div>
+        <div class="col s2 center">{{materialize-loader mode="circular" color="red"}}</div>
+        <div class="col s2 center">{{materialize-loader mode="circular" color="green"}}</div>
+        <div class="col s2 center">{{materialize-loader mode="circular" color="yellow"}}</div>
+      </div>
+
+      <pre class=" language-markup">
+        <code class=" col s12 language-markup">
+          <span>&#123;&#123;</span>materialize-loader mode="circular"<span>&#125;&#125;</span>
+          <span>&#123;&#123;</span>materialize-loader mode="circular" size="small"<span>&#125;&#125;</span>
+          <span>&#123;&#123;</span>materialize-loader mode="circular" color="blue"<span>&#125;&#125;</span>
+          <span>&#123;&#123;</span>materialize-loader mode="circular" color="red"<span>&#125;&#125;</span>
+          <span>&#123;&#123;</span>materialize-loader mode="circular" color="green"<span>&#125;&#125;</span>
+          <span>&#123;&#123;</span>materialize-loader mode="circular" color="yellow"<span>&#125;&#125;</span>
+        </code>
+      </pre>
+    </div>
+  </div>
+</div>

tests/unit/components/materialize-loader-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('materialize-loader', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});