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

Generalize setting page helpers

parent 2a9b3de1
......@@ -6,32 +6,113 @@
'use strict';
var sharedFunctions = {};
var vent = {};
window.onload = function () {
let controls = {
securityLevel: document.querySelector('[data-setting-id="security_level"]')
};
let controls = document.querySelectorAll('[data-setting-id]');
controls.securityLevel.addEventListener('change', function ({ target }) {
for (var index = 0, control; control = controls[index]; index++) {
control.addEventListener('change', handleSettingChange);
}
};
let previousValue, currentValue;
function handleSettingChange ({ target }) {
previousValue = target.getAttribute('data-previous-value') || null;
currentValue = target.value;
let settingId, previousValue, currentValue;
sharedFunctions.applySetting({
id: 'security_level',
value: currentValue
});
settingId = target.getAttribute('data-setting-id');
previousValue = target.getAttribute('data-previous-value') || null;
currentValue = target.value;
sharedFunctions.settingAltered({
settingId: 'security_level',
previousValue: previousValue,
currentValue: currentValue
});
applySetting({
id: settingId,
value: currentValue
});
target.setAttribute('data-previous-value', currentValue);
vent.emit('setting:altered', {
settingId: settingId,
previousValue: previousValue,
currentValue: currentValue
});
target.setAttribute('data-previous-value', currentValue);
}
/**
* Applies a collection of settings to the user interface.
*
* @param {Object} settings A collection of application setting objects.
*/
function applySettings (settings) {
let settingIds = Object.keys(settings);
settingIds.forEach(function (settingId) {
let setting = settings[settingId];
applySetting(setting);
});
}
/**
* Applies a given setting to the user interface.
*
* @param {Object} setting An application setting object.
*/
function applySetting (setting) {
let settingElements, activatableElements, hideableElements;
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);
}
}
/**
* Applies a given localization to marked document elements.
* https://bugzilla.mozilla.org/show_bug.cgi?id=787351
*
* @param {Object} l10n A localization object.
* @private
*/
function applyL10n (l10n) {
let l10nKeys = Object.keys(l10n);
l10nKeys.forEach(function (l10nKey) {
let elements = document.querySelectorAll('[data-l10n-id="' + l10nKey + '"]');
for (let element of elements) {
element.textContent = l10n[l10nKey];
}
});
}
......@@ -15,99 +15,21 @@
*/
self.port.once('worker:initialized', function (initialState) {
applyL10n(initialState.l10n);
exportFunction(handlePageEvent, vent, {defineAs: 'emit'});
applySettings(initialState.settings);
applyL10n(initialState.l10n);
});
/**
* Fires once a setting has been fetched.
*
* @param {Object} setting The fetched application setting.
* @param {Setting} setting The fetched application setting.
*/
self.port.on('setting:fetched', function (setting) {
applySetting(setting);
});
/**
* Applies a given localization to marked document elements.
* https://bugzilla.mozilla.org/show_bug.cgi?id=787351
*
* @param {Object} l10n A localization object.
* @private
*/
function applyL10n (l10n) {
let l10nKeys = Object.keys(l10n);
l10nKeys.forEach(function (l10nKey) {
let elements = document.querySelectorAll('[data-l10n-id="' + l10nKey + '"]');
for (let element of elements) {
element.textContent = l10n[l10nKey];
}
});
}
/**
* Applies a collection of settings to the user interface.
*
* @param {Object} settings A collection of application setting objects.
* @private
*/
function applySettings (settings) {
let settingIds = Object.keys(settings);
settingIds.forEach(function (settingId) {
let setting = settings[settingId];
applySetting(setting);
});
}
/**
* Applies a given setting to the user interface.
*
* @param {Setting} setting An application setting object.
* @private
*/
function applySetting (setting) {
let settingElements, activatableElements, hideableElements;
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);
}
}
/**
* Fetch setting event emitter.
*
......@@ -128,5 +50,15 @@ function settingAltered (settingAlteration) {
self.port.emit('setting:altered', settingAlteration);
}
exportFunction(applySetting, sharedFunctions, {defineAs: 'applySetting'});
exportFunction(settingAltered, sharedFunctions, {defineAs: 'settingAltered'});
/**
* Handles events emitted by pages.
*
* @property {String} eventId The event identifier.
* @property {Object} payload The event payload.
*/
function handlePageEvent (eventId, payload) {
switch (eventId) {
case 'setting:altered': settingAltered(payload);
}
}
......@@ -67,7 +67,6 @@ exports.initialize = function () {
pageMod.PageMod({
include: SETTINGS_URI,
contentScriptFile: self.data.url('content-scripts/settings.js'),
contentScriptWhen: 'ready',
onAttach: startListening
});
};
......
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