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 35eae8d3 authored by Thomas Rientjes's avatar Thomas Rientjes

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