Skip to content

Commit a154ca1

Browse files
authored
Merge pull request #446 from upfluence/oc/DRA-1514
LIB-REMOVAL: removed upf-slider & ion rangeslider lib
2 parents 72d60ca + d03669d commit a154ca1

File tree

11 files changed

+52
-178
lines changed

11 files changed

+52
-178
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,19 @@
1515
{{did-insert this.initializeSliderInput}}
1616
/>
1717
<div
18-
class="upf-tooltip oss-slider__tooltip {{unless this.displayTooltip 'oss-slider__tooltip--hidden'}}"
18+
class="upf-tooltip oss-slider__tooltip
19+
{{unless this.displayTooltip 'oss-slider__tooltip--hidden'}}
20+
{{if (eq @displayInputValue false) 'oss-slider__tooltip__without_input'}}"
1921
style={{this.tooltipPositionStyle}}
2022
{{did-insert this.initializeTooltip}}
2123
>
22-
<span>{{concat this.currentRangeValue (if (eq @unit "percentage") "%")}}</span>
24+
<span>
25+
{{#if @tooltipLabel}}
26+
{{@tooltipLabel}}
27+
{{else}}
28+
{{concat this.currentRangeValue (if (eq @unit "percentage") "%")}}
29+
{{/if}}
30+
</span>
2331
</div>
2432
</div>
2533
{{#if @displayInputValue}}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,16 @@ export default {
7878
defaultValue: { summary: '50' }
7979
}
8080
},
81+
82+
tooltiplabel: {
83+
control: 'text',
84+
description: 'Specific tooltip label for the slider handle',
85+
defaultValue: `Value : ${defaultArgs.defaultValue}%`,
86+
table: {
87+
type: { summary: 'string' },
88+
defaultValue: { summary: '50' }
89+
}
90+
},
8191
onChange: {
8292
type: { required: true },
8393
description: 'Method called every time the input / range is updated',
@@ -105,6 +115,7 @@ const defaultArgs = {
105115
step: 1,
106116
defaultValue: undefined,
107117
displayInputValue: false,
118+
tooltipLabel: `Value of ${defaultArgs.value}`,
108119
unit: 'percentage',
109120
disabled: false,
110121
onChange: action('onChange')
@@ -116,6 +127,7 @@ const Template = (args) => ({
116127
@min={{this.min}}
117128
@max={{this.max}}
118129
@step={{this.step}}
130+
@tooltipLabel={{this.tooltipLabel}}
119131
@defaultValue={{this.defaultValue}}
120132
@displayInputValue={{this.displayInputValue}}
121133
@unit={{this.unit}}

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface SliderComponentArgs {
1313
min?: number;
1414
max?: number;
1515
step?: number;
16+
tooltipLabel?: string;
1617
inputOptions?: { max?: number; min?: number };
1718
onChange(value: number | null): void;
1819
}
@@ -72,8 +73,19 @@ export default class SliderComponent extends Component<SliderComponentArgs> {
7273

7374
@action
7475
onRangeChange(event: InputEvent): void {
75-
const value = (event.target as HTMLInputElement).value;
76-
this.args.onChange(parseFloat(value));
76+
const value = parseFloat((event.target as HTMLInputElement).value);
77+
const max = this.args.inputOptions?.max ?? this.sliderOptions.max;
78+
const min = this.args.inputOptions?.min ?? this.sliderOptions.min;
79+
80+
if (value > max) {
81+
(event.target as HTMLInputElement).value = String(max);
82+
this.args.onChange(max);
83+
} else if (value < min) {
84+
(event.target as HTMLInputElement).value = String(min);
85+
this.args.onChange(min);
86+
} else {
87+
this.args.onChange(value);
88+
}
7789
}
7890

7991
@action

addon/components/upf-slider.js

Lines changed: 0 additions & 71 deletions
This file was deleted.

app/components/upf-slider.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

app/styles/base/_slider.less

Lines changed: 5 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.oss-slider {
22
&__range-container {
33
flex: 1;
4-
54
.oss-slider__tooltip {
65
text-align: center;
6+
white-space: nowrap;
77
left: var(--tooltip-left-position);
88
top: 30px;
99
transition: opacity 300ms;
@@ -17,6 +17,10 @@
1717
&--hidden {
1818
opacity: 0;
1919
}
20+
21+
&__without_input {
22+
top: 12px;
23+
}
2024
}
2125
}
2226

@@ -118,66 +122,3 @@
118122
}
119123
}
120124
}
121-
122-
.upf-slider {
123-
display: flex;
124-
align-items: baseline;
125-
justify-content: space-evenly;
126-
127-
.min-max-value {
128-
min-width: 20px;
129-
}
130-
131-
.min-value {
132-
text-align: right;
133-
}
134-
135-
.irs-handle {
136-
transition: background-color 0.3s ease;
137-
}
138-
139-
.irs--round {
140-
height: 7px;
141-
width: 100%;
142-
margin-right: 15px;
143-
margin-left: 15px;
144-
145-
.irs-line,
146-
.irs-bar {
147-
height: 7px;
148-
top: 0px;
149-
background-color: @field-background-color;
150-
}
151-
152-
.irs-handle {
153-
border: none;
154-
top: -6px;
155-
width: 18px;
156-
height: 18px;
157-
box-shadow: none;
158-
background-color: @upf-primary-rock-blue;
159-
}
160-
161-
.irs-single {
162-
opacity: 0;
163-
top: -42px;
164-
padding: 8px 10px;
165-
background-color: black;
166-
transition: opacity 0.3s ease;
167-
168-
.fa {
169-
.font-weight-semibold;
170-
}
171-
172-
&:before {
173-
border-top-color: black;
174-
}
175-
}
176-
177-
&:hover {
178-
.irs-single {
179-
opacity: 1;
180-
}
181-
}
182-
}
183-
}

app/templates/components/upf-slider.hbs

Lines changed: 0 additions & 19 deletions
This file was deleted.

index.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ module.exports = {
3131
this._super.included.apply(this, arguments);
3232

3333
this.import('vendor/bootstrap/bootstrap.min.js');
34-
this.import('vendor/ion-rangeslider/js/ion.rangeSlider.min.js');
35-
this.import('vendor/ion-rangeslider/css/ion.rangeSlider.min.css');
3634
},
3735

3836
treeForPublic() {
@@ -69,10 +67,7 @@ module.exports = {
6967
treeForVendor(tree) {
7068
const trees = [tree];
7169

72-
trees.push(
73-
new Funnel(this._resolvePackagePath('bootstrap/dist/js'), { destDir: 'bootstrap' }),
74-
new Funnel(this._resolvePackagePath('ion-rangeslider'), { destDir: 'ion-rangeslider' })
75-
);
70+
trees.push(new Funnel(this._resolvePackagePath('bootstrap/dist/js'), { destDir: 'bootstrap' }));
7671

7772
return mergeTrees(trees.filter(Boolean), { overwrite: true });
7873
},

package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@
5353
"ember-intl": "^6.4.0",
5454
"ember-named-blocks-polyfill": "^0.2.4",
5555
"ember-truth-helpers": "^3.1.1",
56-
"ion-rangeslider": "^2.3.1",
5756
"money-formatter": "^0.1.4",
5857
"resolve": "^1.22.8"
5958
},

pnpm-lock.yaml

Lines changed: 1 addition & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

tests/integration/components/o-s-s/slider-test.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,15 @@ module('Integration | Component | o-s-s/slider', function (hooks) {
3838
assert.dom('.oss-slider__number-input input').isDisabled();
3939
});
4040

41+
test('it renders with a specific tooltip label when specified', async function (assert) {
42+
this.tooltipLabel = 'this is a specific tooltip label';
43+
await render(
44+
hbs`<OSS::Slider @value={{this.value}} @tooltipLabel={{this.tooltipLabel}} @displayInputValue={{this.displayInputValue}} @unit={{this.unit}} @disabled={{true}} @onChange={{this.onChange}} />`
45+
);
46+
47+
assert.dom('.oss-slider__tooltip').hasText(this.tooltipLabel);
48+
});
49+
4150
module('for the slider width', () => {
4251
test('it renders it properly', async function (assert) {
4352
await render(

0 commit comments

Comments
 (0)