Implement setting label attributes

chrome/css/settings.css

@@ -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;
 }
 

chrome/js/settings.js

@@ -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'));
+        });
+    }
 };
 
 /**

chrome/settings.html

@@ -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>