-
Notifications
You must be signed in to change notification settings - Fork 51
/
range-slider.js
124 lines (106 loc) · 2.97 KB
/
range-slider.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import Ember from 'ember';
import noUiSlider from 'noUiSlider';
const {
on,
run,
isEmpty,
computed,
observer
} = Ember;
export default Ember.Component.extend({
slider: null,
start: undefined,
step: undefined,
margin: undefined,
limit: undefined,
pips: undefined,
animate: true,
snap: false,
connect: false,
orientation: 'horizontal',
direction: 'ltr',
behaviour: 'tap',
min: 0,
max: 100,
range: computed('min', 'max', function() {
return {
min: this.get('min'),
max: this.get('max')
};
}),
formatTo(value) { return value; },
formatFrom(value) { return value; },
format: computed('formatTo', 'formatFrom', function() {
return {
to: this.get('formatTo'),
from: this.get('formatFrom')
};
}),
setup: on('didInsertElement', function() {
let $this = this.$().get(0);
let properties = this.getProperties(
'start', 'step', 'margin',
'limit', 'range', 'connect',
'orientation', 'direction',
'behaviour', 'animate', 'snap',
'pips', 'format'
);
let sliderEvents = Ember.A(['change', 'set', 'slide', 'update', 'start', 'end']);
noUiSlider.create($this, properties);
let slider = $this.noUiSlider;
this.set('slider', slider);
sliderEvents.forEach(event => {
if (!isEmpty(this.get(`on-${event}`))) {
slider.on(event, () => {
run(this, function() {
let val = this.get("slider").get();
this.sendAction(`on-${event}`, val);
});
});
}
});
/** DEPRECATED AND WILL BE REMOVED BEFORE 1.0 **/
slider.on('change', () => {
run(this, function () {
let val = this.get("slider").get();
this.sendDeprecatedAction("change", val);
});
});
if (!isEmpty(this.get('slide'))) {
slider.on('slide', () => {
run(this, function () {
let val = this.get("slider").get();
this.sendDeprecatedAction('slide', val);
});
});
}
}),
teardown: on('willDestroyElement', function() {
var slider = this.get('slider');
slider.off('change');
slider.off('slide');
slider.off('set');
slider.off('update');
slider.off('start');
slider.off('end');
slider.destroy();
}),
setVal: observer('start', function() {
let slider = this.get('slider');
if (slider) {
var val = this.get('start');
slider.set(val);
}
}),
/**
* Perform a naive check to see if the deprecated action name exists in our
* attrs and then log a deprecation warning and trigger the old action.
*/
sendDeprecatedAction(action, value) {
var actionName = this.get(`attrs.${action}`);
if(!isEmpty(actionName)) {
Ember.Logger.warn(`DEPRECATION (ember-cli-nouislider): "${action}" action is deprecated in favor of "on-${action}". Support for "${action}" will be dropped in 1.0`);
this.sendAction(action, value);
}
}
});