Merge pull request #446 from upfluence/oc/DRA-1514

LIB-REMOVAL: removed upf-slider & ion rangeslider lib

Author: OwenCoogan

addon/components/o-s-s/slider.hbs

@@ -15,11 +15,19 @@
       {{did-insert this.initializeSliderInput}}
     />
     <div
-      class="upf-tooltip oss-slider__tooltip {{unless this.displayTooltip 'oss-slider__tooltip--hidden'}}"
+      class="upf-tooltip oss-slider__tooltip
+        {{unless this.displayTooltip 'oss-slider__tooltip--hidden'}}
+        {{if (eq @displayInputValue false) 'oss-slider__tooltip__without_input'}}"
       style={{this.tooltipPositionStyle}}
       {{did-insert this.initializeTooltip}}
     >
-      <span>{{concat this.currentRangeValue (if (eq @unit "percentage") "%")}}</span>
+      <span>
+        {{#if @tooltipLabel}}
+          {{@tooltipLabel}}
+        {{else}}
+          {{concat this.currentRangeValue (if (eq @unit "percentage") "%")}}
+        {{/if}}
+      </span>
     </div>
   </div>
   {{#if @displayInputValue}}

addon/components/o-s-s/slider.stories.js

@@ -78,6 +78,16 @@ export default {
         defaultValue: { summary: '50' }
       }
     },
+
+    tooltiplabel: {
+      control: 'text',
+      description: 'Specific tooltip label for the slider handle',
+      defaultValue: `Value : ${defaultArgs.defaultValue}%`,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '50' }
+      }
+    },
     onChange: {
       type: { required: true },
       description: 'Method called every time the input / range is updated',
@@ -105,6 +115,7 @@ const defaultArgs = {
   step: 1,
   defaultValue: undefined,
   displayInputValue: false,
+  tooltipLabel: `Value of ${defaultArgs.value}`,
   unit: 'percentage',
   disabled: false,
   onChange: action('onChange')
@@ -116,6 +127,7 @@ const Template = (args) => ({
                  @min={{this.min}}
                  @max={{this.max}}
                  @step={{this.step}}
+                 @tooltipLabel={{this.tooltipLabel}}
                  @defaultValue={{this.defaultValue}}
                  @displayInputValue={{this.displayInputValue}}
                  @unit={{this.unit}}

addon/components/o-s-s/slider.ts

@@ -13,6 +13,7 @@ interface SliderComponentArgs {
   min?: number;
   max?: number;
   step?: number;
+  tooltipLabel?: string;
   inputOptions?: { max?: number; min?: number };
   onChange(value: number | null): void;
 }
@@ -72,8 +73,19 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
 
   @action
   onRangeChange(event: InputEvent): void {
-    const value = (event.target as HTMLInputElement).value;
-    this.args.onChange(parseFloat(value));
+    const value = parseFloat((event.target as HTMLInputElement).value);
+    const max = this.args.inputOptions?.max ?? this.sliderOptions.max;
+    const min = this.args.inputOptions?.min ?? this.sliderOptions.min;
+
+    if (value > max) {
+      (event.target as HTMLInputElement).value = String(max);
+      this.args.onChange(max);
+    } else if (value < min) {
+      (event.target as HTMLInputElement).value = String(min);
+      this.args.onChange(min);
+    } else {
+      this.args.onChange(value);
+    }
   }
 
   @action

addon/components/upf-slider.js

@@ -1,9 +1,9 @@
 .oss-slider {
   &__range-container {
     flex: 1;
-
     .oss-slider__tooltip {
       text-align: center;
+      white-space: nowrap;
       left: var(--tooltip-left-position);
       top: 30px;
       transition: opacity 300ms;
@@ -17,6 +17,10 @@
       &--hidden {
         opacity: 0;
       }
+
+      &__without_input {
+        top: 12px;
+      }
     }
   }
 
@@ -118,66 +122,3 @@
     }
   }
 }
-
-.upf-slider {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-evenly;
-
-  .min-max-value {
-    min-width: 20px;
-  }
-
-  .min-value {
-    text-align: right;
-  }
-
-  .irs-handle {
-    transition: background-color 0.3s ease;
-  }
-
-  .irs--round {
-    height: 7px;
-    width: 100%;
-    margin-right: 15px;
-    margin-left: 15px;
-
-    .irs-line,
-    .irs-bar {
-      height: 7px;
-      top: 0px;
-      background-color: @field-background-color;
-    }
-
-    .irs-handle {
-      border: none;
-      top: -6px;
-      width: 18px;
-      height: 18px;
-      box-shadow: none;
-      background-color: @upf-primary-rock-blue;
-    }
-
-    .irs-single {
-      opacity: 0;
-      top: -42px;
-      padding: 8px 10px;
-      background-color: black;
-      transition: opacity 0.3s ease;
-
-      .fa {
-        .font-weight-semibold;
-      }
-
-      &:before {
-        border-top-color: black;
-      }
-    }
-
-    &:hover {
-      .irs-single {
-        opacity: 1;
-      }
-    }
-  }
-}

app/components/upf-slider.js

@@ -31,8 +31,6 @@ module.exports = {
     this._super.included.apply(this, arguments);
 
     this.import('vendor/bootstrap/bootstrap.min.js');
-    this.import('vendor/ion-rangeslider/js/ion.rangeSlider.min.js');
-    this.import('vendor/ion-rangeslider/css/ion.rangeSlider.min.css');
   },
 
   treeForPublic() {
@@ -69,10 +67,7 @@ module.exports = {
   treeForVendor(tree) {
     const trees = [tree];
 
-    trees.push(
-      new Funnel(this._resolvePackagePath('bootstrap/dist/js'), { destDir: 'bootstrap' }),
-      new Funnel(this._resolvePackagePath('ion-rangeslider'), { destDir: 'ion-rangeslider' })
-    );
+    trees.push(new Funnel(this._resolvePackagePath('bootstrap/dist/js'), { destDir: 'bootstrap' }));
 
     return mergeTrees(trees.filter(Boolean), { overwrite: true });
   },

app/styles/base/_slider.less

@@ -53,7 +53,6 @@
     "ember-intl": "^6.4.0",
     "ember-named-blocks-polyfill": "^0.2.4",
     "ember-truth-helpers": "^3.1.1",
-    "ion-rangeslider": "^2.3.1",
     "money-formatter": "^0.1.4",
     "resolve": "^1.22.8"
   },

app/templates/components/upf-slider.hbs

@@ -38,6 +38,15 @@ module('Integration | Component | o-s-s/slider', function (hooks) {
     assert.dom('.oss-slider__number-input input').isDisabled();
   });
 
+  test('it renders with a specific tooltip label when specified', async function (assert) {
+    this.tooltipLabel = 'this is a specific tooltip label';
+    await render(
+      hbs`<OSS::Slider @value={{this.value}} @tooltipLabel={{this.tooltipLabel}} @displayInputValue={{this.displayInputValue}} @unit={{this.unit}} @disabled={{true}} @onChange={{this.onChange}} />`
+    );
+
+    assert.dom('.oss-slider__tooltip').hasText(this.tooltipLabel);
+  });
+
   module('for the slider width', () => {
     test('it renders it properly', async function (assert) {
       await render(