Commit ffb25f61 authored by Thomas Rientjes's avatar Thomas Rientjes
Browse files

Implement setting label attributes

parent f953b15a
......@@ -88,7 +88,7 @@ a {
width: 100%;
}
.slider-legend-item {
.slider-label {
color: #999;
margin-bottom: -26px;
padding-bottom: 26px;
......@@ -96,11 +96,11 @@ a {
width: 85px;
}
.slider-legend-item:first-child {
.slider-label:first-child {
text-align: left;
}
.slider-legend-item:last-child {
.slider-label:last-child {
text-align: right;
}
......
......@@ -18,11 +18,28 @@ var vent = {};
*/
window.onload = function () {
let controls = document.querySelectorAll('[data-setting-id]');
let controls, labels;
controls = document.querySelectorAll('[data-setting-id]');
labels = document.querySelectorAll('[data-label-for]');
for (let index = 0, control; control = controls[index]; index++) {
control.addEventListener('change', handleSettingAlteration);
}
for (let index = 0, label; label = labels[index]; index++) {
let binding, settingElement;
binding = label.getAttribute('data-label-for').split(':');
settingElement = document.querySelector('[data-setting-id=' + binding[0] + ']');
label.addEventListener('click', function () {
settingElement.value = binding[1];
settingElement.dispatchEvent(new Event('change'));
});
}
};
/**
......
......@@ -32,9 +32,19 @@
<input class="slider-input" type="range" max="2" value="0" data-setting-id="security_level">
<div class="slider-legend">
<div class="slider-legend-item" data-active-if="security_level:0" data-l10n-id="standard_label" onclick="document.querySelector('[data-setting-id=security_level]').value = 0; document.querySelector('[data-setting-id=security_level]').dispatchEvent(new Event('change'));"></div>
<div class="slider-legend-item" data-active-if="security_level:1" data-l10n-id="safer_label" onclick="document.querySelector('[data-setting-id=security_level]').value = 1; document.querySelector('[data-setting-id=security_level]').dispatchEvent(new Event('change'));"></div>
<div class="slider-legend-item" data-active-if="security_level:2" data-l10n-id="safest_label" onclick="document.querySelector('[data-setting-id=security_level]').value = 2; document.querySelector('[data-setting-id=security_level]').dispatchEvent(new Event('change'));"></div>
<div class="slider-label" data-label-for="security_level:0">
<span data-active-if="security_level:0" data-l10n-id="standard_label"></span>
</div>
<div class="slider-label" data-label-for="security_level:1">
<span data-active-if="security_level:1" data-l10n-id="safer_label"></span>
</div>
<div class="slider-label" data-label-for="security_level:2">
<span data-active-if="security_level:2" data-l10n-id="safest_label"></span>
</div>
</div>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment