Commit 35eae8d3 authored by Thomas Rientjes's avatar Thomas Rientjes
Browse files

Add display logic to settings page elements

parent dbc8e126
......@@ -34,6 +34,7 @@ a {
*/
[data-active="true"] {
color: #000 !important;
font-weight: 500;
}
......@@ -88,13 +89,10 @@ a {
}
.slider-legend-item {
color: #999;
width: 85px;
}
.selected {
font-weight: 500;
}
.text-left {
text-align: left;
}
......
......@@ -4,7 +4,7 @@
class SettingAlteration {
/**
* Creates a setting alteration model.
* Creates a setting alteration.
*
* @param {String} settingId - The identifier of the altered setting.
* @param {String} previousValue - The previous value of the altered setting.
......
......@@ -6,14 +6,32 @@
'use strict';
var sharedFunctions = {};
window.onload = function () {
var controls = {
let controls = {
securityLevel: document.querySelector('[data-setting-id="security_level"]')
};
controls.securityLevel.addEventListener('change', function () {
controls.securityLevel.addEventListener('change', function ({ target }) {
let previousValue, currentValue;
previousValue = target.getAttribute('data-previous-value') || '';
currentValue = target.value;
sharedFunctions.applySetting({
id: 'security_level',
value: currentValue
});
sharedFunctions.settingAltered({
settingId: 'security_level',
previousValue: previousValue,
currentValue: currentValue
});
// TODO
target.setAttribute('data-previous-value', currentValue);
});
}
......@@ -33,14 +33,14 @@
<input class="slider-input" type="range" max="2" value="0" data-setting-id="security_level">
<div class="slider-legend">
<div class="slider-legend-item text-left" data-l10n-id="standard_label"></div>
<div class="slider-legend-item text-center" data-l10n-id="safer_label"></div>
<div class="slider-legend-item text-right" data-l10n-id="safest_label"></div>
<div class="slider-legend-item text-left" data-active-if="security_level:0" data-l10n-id="standard_label"></div>
<div class="slider-legend-item text-center" data-active-if="security_level:1" data-l10n-id="safer_label"></div>
<div class="slider-legend-item text-right" data-active-if="security_level:2" data-l10n-id="safest_label"></div>
</div>
</div>
<div class="settings-item notice" data-hidden="false">
<div class="settings-item notice" data-visible-if="security_level:0">
<div class="notice-body">
<div data-l10n-id="standard_description"></div>
......@@ -48,7 +48,7 @@
</div>
<div class="settings-item notice" data-hidden="true">
<div class="settings-item notice" data-visible-if="security_level:1">
<div class="notice-body">
......@@ -65,7 +65,7 @@
</div>
<div class="settings-item notice" data-hidden="true">
<div class="settings-item notice" data-visible-if="security_level:2">
<div class="notice-body">
......
......@@ -74,14 +74,38 @@ function applySettings (settings) {
*/
function applySetting (setting) {
let elements = document.querySelectorAll('[data-setting-id="' + setting.id + '"]');
let settingElements, activatableElements, hideableElements;
for (let element of elements) {
settingElements = document.querySelectorAll('[data-setting-id="' + setting.id + '"]');
activatableElements = document.querySelectorAll('[data-active-if^=' + setting.id + ']');
hideableElements = document.querySelectorAll('[data-visible-if^=' + setting.id + ']');
for (let element of settingElements) {
element.setAttribute('readonly', 'readonly');
element.value = setting.value;
element.removeAttribute('readonly');
}
for (let element of activatableElements) {
let activationCondition, activityState;
activationCondition = element.getAttribute('data-active-if');
activityState = (activationCondition === (setting.id + ':' + setting.value));
element.setAttribute('data-active', activityState);
}
for (let element of hideableElements) {
let visibilityCondition, visibilityState;
visibilityCondition = element.getAttribute('data-visible-if');
visibilityState = (visibilityCondition === (setting.id + ':' + setting.value));
element.setAttribute('data-hidden', !visibilityState);
}
}
/**
......@@ -103,3 +127,6 @@ function fetchSetting (settingId) {
function settingAltered (settingAlteration) {
self.port.emit('setting:altered', settingAlteration);
}
exportFunction(applySetting, sharedFunctions, {defineAs: 'applySetting'});
exportFunction(settingAltered, sharedFunctions, {defineAs: 'settingAltered'});
......@@ -4,7 +4,7 @@
class Setting {
/**
* Creates a setting model.
* Creates a setting.
*
* @param {String} id - The setting identifier.
* @param {String} value - The value of the setting.
......
......@@ -109,11 +109,11 @@ function startListening (worker) {
worker.port.emit('setting:fetched', fetchedSetting);
});
worker.port.on('setting:altered', function (settingId, newValue) {
worker.port.on('setting:altered', function (settingAlteration) {
settings[settingId] = newValue;
settings[settingAlteration.settingId] = settingAlteration.currentValue;
var persistedSetting = new Setting(settingId, newValue);
var persistedSetting = new Setting(settingAlteration.settingId, settingAlteration.currentValue);
worker.port.emit('setting:persisted', persistedSetting);
});
}
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