fixes #644

adopted-ember-addons · Feb 14, 2017 · 4d363ff · 4d363ff
1 parent eecc6de
commit 4d363ff
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 22 deletions.
diff --git a/addon/components/paper-slider.js b/addon/components/paper-slider.js
@@ -48,10 +48,6 @@ export default Component.extend(FocusableMixin, ColorMixin, {
       .on('panend', run.bind(this, this._dragEnd));
   },
 
-  trackContainer: computed(function() {
-    return this.$('.md-track-container');
-  }),
-
   activeTrackStyle: computed('percent', function() {
     let percent = this.get('percent') || 0;
     return htmlSafe(`width: ${percent * 100}%`);
@@ -74,7 +70,8 @@ export default Component.extend(FocusableMixin, ColorMixin, {
   }),
 
   positionToPercent(x) {
-    return Math.max(0, Math.min(1, (x - this.get('sliderDimensions.left')) / this.get('sliderDimensions.width')));
+    let { left, width } = this.sliderDimensions();
+    return Math.max(0, Math.min(1, (x - left) / width));
   },
 
   percentToValue(x) {
@@ -98,16 +95,19 @@ export default Component.extend(FocusableMixin, ColorMixin, {
   dragging: false,
   enabled: computed.not('disabled'),
 
-  sliderDimensions: computed(function() {
-    return this.get('trackContainer')[0].getBoundingClientRect();
-  }),
+  sliderDimensions() {
+    return this.$('.md-track-container').get(0).getBoundingClientRect();
+  },
+
+  click(event) {
+    this.setValueFromEvent(event);
+  },
 
   setValueFromEvent(event) {
-    // let exactVal = this.percentToValue(this.positionToPercent(event.deltaX || event.clientX));
     let exactVal = this.percentToValue(this.positionToPercent(event.clientX || event.srcEvent.clientX));
     let closestVal = this.minMaxValidator(this.stepValidator(exactVal));
 
-    this.set('value', closestVal);
+    this.sendAction('onChange', closestVal);
   },
 
   _dragStart(event) {
@@ -119,8 +119,6 @@ export default Component.extend(FocusableMixin, ColorMixin, {
     this.set('dragging', true);
     this.$().focus();
 
-    this.get('sliderDimensions');
-
     this.setValueFromEvent(event);
   },
 
@@ -163,7 +161,7 @@ export default Component.extend(FocusableMixin, ColorMixin, {
 
       newValue = this.get('value') + changeAmount;
 
-      this.set('value', this.minMaxValidator(newValue));
+      this.sendAction('onChange', this.minMaxValidator(newValue))
 
       event.preventDefault();
       event.stopPropagation();

diff --git a/tests/dummy/app/templates/demo/slider.hbs b/tests/dummy/app/templates/demo/slider.hbs
@@ -15,19 +15,19 @@
 
       <div class="layout layout-align-center-center slider-container">
         <span>R</span>
-        {{paper-slider class="flex" min='0' max='255' value=color.red}}
+        {{paper-slider class="flex" min=0 max=255 value=color.red onChange=(action (mut color.red))}}
         {{paper-input type="number" value=color.red onChange=null}}
       </div>
 
       <div class="layout layout-align-center-center slider-container">
         <span>G</span>
-        {{paper-slider class="flex md-accent" min='0' max='255' value=color.green}}
+        {{paper-slider class="flex md-accent" min=0 max=255 value=color.green onChange=(action (mut color.green))}}
         {{paper-input type="number" value=color.green onChange=null}}
       </div>
 
       <div class="layout layout-align-center-center slider-container">
         <span>B</span>
-        {{paper-slider class="flex md-primary" min='0' max='255' value=color.blue}}
+        {{paper-slider class="flex md-primary" min=0 max=255 value=color.blue onChange=(action (mut color.blue))}}
         {{paper-input type="number" value=color.blue onChange=null}}
       </div>
 
@@ -36,33 +36,33 @@
         <div flex=10 class="layout flex-10 layout-align-center-center">
           <span>default</span>
         </div>
-        {{paper-slider class="flex" discrete=true value=rating1 step='1' min='1' max='5'}}
+        {{paper-slider class="flex" discrete=true value=rating1 step=1 min=1 max=5 onChange=(action (mut rating1))}}
       </div>
       <div class="layout layout-align-center-center slider-container">
         <div flex=10 class="layout flex-10 layout-align-center-center">
           <span>md-warn</span>
         </div>
-        {{paper-slider class="flex" warn=true discrete=true value=rating2 step="1" min="1" max="5"}}
+        {{paper-slider class="flex" warn=true discrete=true value=rating2 step=1 min=1 max=5 onChange=(action (mut rating2))}}
       </div>
       <div class="layout layout-align-center-center slider-container">
         <div flex=10 class="layout flex-10 layout-align-center-center">
           <span>md-primary</span>
         </div>
-        {{paper-slider class="flex" primary=true discrete=true value=rating3 step="1" min="1" max="5"}}
+        {{paper-slider class="flex" primary=true discrete=true value=rating3 step=1 min=1 max=5 onChange=(action (mut rating3))}}
       </div>
 
       <h2>Disabled</h2>
       <div class="layout layout-align-center-center slider-container">
         {{paper-icon icon="brightness-low"}}
-        {{paper-slider class="flex" value=disabled1 disabled=isSliderDisabled}}
+        {{paper-slider class="flex" value=disabled1 disabled=isSliderDisabled onChange=(action (mut disabled1))}}
         {{paper-input type="number" value=disabled1 onChange=(action (mut disabled1))}}
       </div>
       {{paper-checkbox value=isSliderDisabled onChange=(action (mut isSliderDisabled))}}
       {{paper-slider value=disabled2 disabled=true}}
 
       <h2>Disabled, Discrete</h2>
-      {{paper-slider value=discreteDisabled1 disabled=true step="3" discrete=true min="0" max="10"}}
-      {{paper-slider value=discreteDisabled2 disabled=true step="10" discrete=true}}
+      {{paper-slider value=discreteDisabled1 disabled=true discrete=true step=3 min=0 max=10}}
+      {{paper-slider value=discreteDisabled2 disabled=true discrete=true step=10}}
       {{! END-SNIPPET }}
 
       <h3>Template</h3>