From 0296d3ce68b4ac41b8b5fb9b02effd3e189d8e0d Mon Sep 17 00:00:00 2001 From: Mike North Date: Wed, 1 Apr 2015 17:07:33 -0700 Subject: [PATCH] Material loader component --- addon/components/materialize-input.js | 1 + addon/components/materialize-loader.js | 52 ++++++++++++ .../components/materialize-input.hbs | 16 +++- .../components/materialize-loader.hbs | 14 +++ app/components/materialize-loader.js | 3 + tests/dummy/app/controllers/loader.js | 5 ++ tests/dummy/app/router.js | 1 + tests/dummy/app/styles/app.scss | 1 + tests/dummy/app/templates/index.hbs | 1 + tests/dummy/app/templates/loader.hbs | 85 +++++++++++++++++++ .../components/materialize-loader-test.js | 21 +++++ 11 files changed, 197 insertions(+), 3 deletions(-) create mode 100644 addon/components/materialize-loader.js create mode 100644 addon/templates/components/materialize-loader.hbs create mode 100644 app/components/materialize-loader.js create mode 100644 tests/dummy/app/controllers/loader.js create mode 100644 tests/dummy/app/templates/loader.hbs create mode 100644 tests/unit/components/materialize-loader-test.js diff --git a/addon/components/materialize-input.js b/addon/components/materialize-input.js index 15b6b5e6..f0a14e04 100644 --- a/addon/components/materialize-input.js +++ b/addon/components/materialize-input.js @@ -4,6 +4,7 @@ import layout from '../templates/components/materialize-input'; export default MaterializeInputField.extend({ layout: layout, + type: 'text', didInsertElement: function() { this._super(); // make sure the label moves when a value is bound. diff --git a/addon/components/materialize-loader.js b/addon/components/materialize-loader.js new file mode 100644 index 00000000..7ab0a4c9 --- /dev/null +++ b/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') +}); diff --git a/addon/templates/components/materialize-input.hbs b/addon/templates/components/materialize-input.hbs index 9e5717a9..1c167a97 100644 --- a/addon/templates/components/materialize-input.hbs +++ b/addon/templates/components/materialize-input.hbs @@ -1,9 +1,19 @@ {{#if icon}} {{/if}} -{{input id=id value=value classNameBindings="validate:validate: errors.firstObject:invalid:valid" type="text" - 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}} {{#if errors}} {{errors.firstObject}} {{else}}   {{/if}} diff --git a/addon/templates/components/materialize-loader.hbs b/addon/templates/components/materialize-loader.hbs new file mode 100644 index 00000000..c864f3be --- /dev/null +++ b/addon/templates/components/materialize-loader.hbs @@ -0,0 +1,14 @@ +{{#if isBarType}} +
+{{/if}} +{{#each spinnerClassNames as |spinnerClassName|}} +
+
+
+
+
+
+
+
+
+{{/each}} \ No newline at end of file diff --git a/app/components/materialize-loader.js b/app/components/materialize-loader.js new file mode 100644 index 00000000..1c29810e --- /dev/null +++ b/app/components/materialize-loader.js @@ -0,0 +1,3 @@ +import materializeLoader from 'ember-cli-materialize/components/materialize-loader'; + +export default materializeLoader; diff --git a/tests/dummy/app/controllers/loader.js b/tests/dummy/app/controllers/loader.js new file mode 100644 index 00000000..3a9b0824 --- /dev/null +++ b/tests/dummy/app/controllers/loader.js @@ -0,0 +1,5 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ + percent: 70 +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 5bd70d4a..88cac4e8 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -11,6 +11,7 @@ Router.map(function() { this.route("cards"); this.route("collapsible"); this.route("input"); + this.route("loader"); this.route("parallax"); }); diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 87038d15..56f0cdf1 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -54,6 +54,7 @@ span.badge { } &.default-value { float: none; + position: inherit; } } .intro { diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index b89f03c7..382981f8 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -35,6 +35,7 @@ {{#link-to 'cards' class="collection-item"}}Cards1{{/link-to}} {{#link-to 'collapsible' class="collection-item"}}Collapsible1{{/link-to}} {{#link-to 'input' class="collection-item"}}Input4{{/link-to}} + {{#link-to 'loader' class="collection-item"}}Loader1{{/link-to}} {{#link-to 'parallax' class="collection-item"}}Parallax1{{/link-to}} diff --git a/tests/dummy/app/templates/loader.hbs b/tests/dummy/app/templates/loader.hbs new file mode 100644 index 00000000..48d1bd32 --- /dev/null +++ b/tests/dummy/app/templates/loader.hbs @@ -0,0 +1,85 @@ +
+
+
+
+

Loader

+
+
+
+
+ +
+
+
+

The component supports one option:

+
    +
  • mode, default value indeterminate - Loader mode (determinate, indeterminate, circular)
    • +
  • percent, default value 0 - Percent progress (determinate loader only)
    • +
  • active, default value true - Whether the animation should be active or not (indeterminate loaders only)
    • +
  • color, default value null - Circular loader color (null, yellow, blue, green, red). Setting this to null (default) will result in the color rotating
    • +
  • size, default value big - Circular loader size (small, big)
    • +
+
+
+ + +
+

Indeterminate Loader

+
+ {{materialize-loader}} + + 
+        
+          {{materialize-loader}}
+        
+
+
+
+ + +
+

Determinate Loader

+
+
+
+ {{materialize-input label="Percent" type="number" value=percent step=5 min=0 max=100}} +
+
+ {{materialize-loader mode="determinate" percent=percent}} +
+
+ + 
+        
+          {{materialize-loader mode="determinate"}}
+        
+
+
+
+ + +
+

Circular Indeterminate Loader

+
+
+
{{materialize-loader mode="circular"}}
+
{{materialize-loader mode="circular" size="small"}}
+
{{materialize-loader mode="circular" color="blue"}}
+
{{materialize-loader mode="circular" color="red"}}
+
{{materialize-loader mode="circular" color="green"}}
+
{{materialize-loader mode="circular" color="yellow"}}
+
+ + 
+        
+          {{materialize-loader mode="circular"}}
+          {{materialize-loader mode="circular" size="small"}}
+          {{materialize-loader mode="circular" color="blue"}}
+          {{materialize-loader mode="circular" color="red"}}
+          {{materialize-loader mode="circular" color="green"}}
+          {{materialize-loader mode="circular" color="yellow"}}
+        
+
+
+
+
diff --git a/tests/unit/components/materialize-loader-test.js b/tests/unit/components/materialize-loader-test.js new file mode 100644 index 00000000..86fec234 --- /dev/null +++ b/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'); +});