|
1
|
|
|
import noUiSlider from 'nouislider'; |
|
2
|
|
|
|
|
3
|
|
|
const observerConfig = { |
|
4
|
|
|
attributes: false, |
|
5
|
|
|
characterData: false, |
|
6
|
|
|
childList: true, |
|
7
|
|
|
subtree: true |
|
8
|
|
|
}; |
|
9
|
|
|
|
|
10
|
|
|
const mountRangeField = (rangefield) => { |
|
11
|
|
|
let fieldName = rangefield.getAttribute('data-settings'); |
|
12
|
|
|
let input = document.body.querySelectorAll(`input[name=${fieldName}]`)[0]; |
|
13
|
|
|
let settings = window[fieldName]; |
|
14
|
|
|
if (!Array.isArray(settings['start'])) { |
|
15
|
|
|
settings['start'] = [settings['start']]; |
|
16
|
|
|
} |
|
17
|
|
|
if (input.hasAttribute('value')) { |
|
18
|
|
|
let values = input.getAttribute('value').split(','); |
|
19
|
|
|
if (values.length === settings['start'].length) { |
|
20
|
|
|
settings['start'] = values; |
|
21
|
|
|
} |
|
22
|
|
|
} |
|
23
|
|
|
noUiSlider.create(rangefield, settings); |
|
24
|
|
|
|
|
25
|
|
|
rangefield.noUiSlider.on('update', function () { |
|
26
|
|
|
let description = document.body.getElementsByClassName(`${fieldName}-range-description`)[0]; |
|
27
|
|
|
let value = rangefield.noUiSlider.get(); |
|
28
|
|
|
if (!Array.isArray(value)) { |
|
29
|
|
|
value = [value]; |
|
30
|
|
|
} |
|
31
|
|
|
input.setAttribute('value', value.join(',')); |
|
32
|
|
|
description.innerHTML = value.join(' '); |
|
33
|
|
|
}); |
|
34
|
|
|
} |
|
35
|
|
|
|
|
36
|
|
|
const mount = () => { |
|
37
|
|
|
// If things change and we haven't painted our UiSlider yet, go for it |
|
38
|
|
|
if (document.body.getElementsByClassName('noUi-target').length === 0) { |
|
39
|
|
|
const ranges = document.body.querySelectorAll('div[data-range=rangefield]'); |
|
40
|
|
|
ranges.forEach(mountRangeField); |
|
41
|
|
|
} |
|
42
|
|
|
} |
|
43
|
|
|
|
|
44
|
|
|
|
|
45
|
|
|
const onMutation = () => mount(); |
|
46
|
|
|
|
|
47
|
|
|
const observerFactory = callback => new MutationObserver(callback); |
|
|
|
|
|
|
48
|
|
|
|
|
49
|
|
|
const loadRangeSlider = (createObserver = observerFactory) => { |
|
50
|
|
|
mount(); //mount any elements in the dom on load |
|
51
|
|
|
createObserver(onMutation).observe(document.body, observerConfig); |
|
52
|
|
|
}; |
|
53
|
|
|
|
|
54
|
|
|
export default loadRangeSlider; |
|
55
|
|
|
|
Firesphere /
silverstripe-rangefield
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.