diff --git a/src/js/settings.js b/src/js/settings.js
index e8b163e..5cc9735 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -40,21 +40,21 @@ transparent 76%,transparent\
)';
var updateSubframeDemo = function() {
- var demo = $('#subframe-color-demo');
- var color = $('#subframe-color').val();
+ var demo = uDom('#subframe-color-demo');
+ var color = uDom('#subframe-color').val();
demo.css('border-color', color);
var re = new RegExp('\{\{color\}\}', 'g');
demo.css('background-image', subframeDemoBackgroundImage.replace(re, color));
- demo.css('opacity', (parseInt($('#subframe-opacity').val(), 10) / 100).toFixed(1));
+ demo.css('opacity', (parseInt(uDom('#subframe-opacity').val(), 10) / 100).toFixed(1));
};
var onSubframeColorChanged = function() {
- var color = $('#subframe-color').val();
+ var color = uDom('#subframe-color').val();
if ( color === '' ) {
- $('#subframe-color').val(color);
+ uDom('#subframe-color').val(color);
}
changeUserSettings('subframeColor', color);
- var opacity = parseInt($('#subframe-opacity').val(), 10);
+ var opacity = parseInt(uDom('#subframe-opacity').val(), 10);
if ( Number.isNaN(opacity) ) {
opacity = 100;
}
@@ -83,42 +83,42 @@ function prepareToDie() {
var installEventHandlers = function() {
// `data-range` allows to add/remove bool properties without
// changing code.
- $('input[data-range="bool"]').on('change', function() {
+ uDom('input[data-range="bool"]').on('change', function() {
changeUserSettings(this.id, this.checked);
});
- $('input[name="displayTextSize"]').on('change', function(){
- changeUserSettings('displayTextSize', $(this).attr('value'));
+ uDom('input[name="displayTextSize"]').on('change', function(){
+ changeUserSettings('displayTextSize', this.value);
});
- $('#smart-auto-reload').on('change', function(){
+ uDom('#smart-auto-reload').on('change', function(){
changeUserSettings('smartAutoReload', this.value);
});
- $('#subframe-color').on('change', function(){ onSubframeColorChanged(); });
- $('#subframe-opacity').on('change', function(){ onSubframeColorChanged(); });
+ uDom('#subframe-color').on('change', function(){ onSubframeColorChanged(); });
+ uDom('#subframe-opacity').on('change', function(){ onSubframeColorChanged(); });
// https://github.com/gorhill/httpswitchboard/issues/197
- $(window).one('beforeunload', prepareToDie);
+ uDom(window).on('beforeunload', prepareToDie);
};
/******************************************************************************/
-$(function() {
+uDom.onLoad(function() {
var onUserSettingsReceived = function(userSettings) {
// Cache copy
cachedUserSettings = userSettings;
// `data-range` allows to add/remove bool properties without
// changing code.
- $('input[data-range="bool"]').each(function() {
- this.checked = userSettings[this.id] === true;
+ uDom('input[data-range="bool"]').toArray().forEach(function(elem) {
+ elem.checked = userSettings[elem.id] === true;
});
- $('input[name="displayTextSize"]').attr('checked', function(){
- return $(this).attr('value') === userSettings.displayTextSize;
- });
- $('#smart-auto-reload').val(userSettings.smartAutoReload);
- $('#subframe-color').val(userSettings.subframeColor);
- $('#subframe-opacity').val(userSettings.subframeOpacity);
+ uDom('input[name="displayTextSize"]').toArray().forEach(function(elem) {
+ elem.checked = elem.value === userSettings.displayTextSize;
+ });
+ uDom('#smart-auto-reload').val(userSettings.smartAutoReload);
+ uDom('#subframe-color').val(userSettings.subframeColor);
+ uDom('#subframe-opacity').val(userSettings.subframeOpacity);
updateSubframeDemo();
installEventHandlers();
diff --git a/src/settings.html b/src/settings.html
index e87585e..1669699 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -66,7 +66,6 @@ ul > li {
-