Microsoft is acquiring GitHub. Decentraleyes is leaving GitHub. Welcome to its new home!

To participate, please register, or sign in with an existing GitLab.com, Bitbucket, or GitHub account.

Past contributions on GitHub? Be sure to reclaim your Comments, Issues, and Pull Requests.

Commit ffb25f61 authored by Thomas Rientjes's avatar Thomas Rientjes

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>
......
Markdown is supported
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