Removed even more jQuery dependencies

This commit is contained in:
Kevin Röbert 2020-06-06 00:02:03 +02:00
parent 08b62c0d94
commit da5fb0b3c0
9 changed files with 174 additions and 158 deletions

View File

@ -93,9 +93,7 @@ We use some third-party scripts in our add-on. The authors and licenses are list
Copyright JS Foundation and other contributors |
[MIT](https://jquery.org/license/)
- [DataTables v1.10.20](https://github.com/DataTables/DataTables/tree/master) | Copyright (c) 2008-2015 SpryMedia Limited | [MIT](https://datatables.net/license/)
- [Popper.js v1.16.0](https://github.com/popperjs/popper.js/tree/v1.16.0) | Copyright (c) 2016 Federico Zivolo and contributors |
[MIT](https://github.com/popperjs/popper.js/blob/master/LICENSE.md)
- [Bootstrap Colorpicker v3.2.0](https://github.com/itsjavi/bootstrap-colorpicker/tree/3.2.0) | Copyright (c) 2017 Javi Aguilar |
[MIT](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/LICENSE)
- [Pickr v1.7.0](https://github.com/Simonwep/pickr/tree/1.7.0) | Copyright (c) 2018 - 2020 Simon Reinisch |
[MIT](https://github.com/Simonwep/pickr/blob/master/LICENSE)
- [Font Awesome v5.12.0](https://github.com/FortAwesome/Font-Awesome/tree/5.12.0) | Copyright (c) @fontawesome |
[Font Awesome Free License](https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt)

View File

@ -370,5 +370,9 @@
"popup_html_configs_head_title": {
"message": "",
"description": "not needed, only to prevent exceptions"
},
"context_menu_enabled_title": {
"message": "",
"description": "not needed, only to prevent exceptions"
}
}

View File

@ -52,21 +52,32 @@ function getLog()
return b.timestamp - a.timestamp;
});
const length = Object.keys(log.log).length;
let row;
if(length !== 0)
{
for(let i=0; i<length;i++)
{
row = "<tr>" +
"<td>"+log.log[i].before+"</td>" +
"<td>"+log.log[i].after+"</td>" +
"<td>"+log.log[i].rule+"</td>" +
"<td>"+toDate(log.log[i].timestamp)+"</td>";
$('#tbody').append(row);
}
}
$('#logTable').DataTable({
"data": log.log,
"columns": [
{
"data": "before",
"type": "string"
},
{
"data": "after",
"type": "string"
},
{
"data": "rule",
"type": "string"
},
{
"data": "timestamp",
"type": "date"
}
],
"columnDefs": [
{
targets: 3,
render: toDate
}
],
"pageLength": 10,
"language": {
"url": getDataTableTranslation()
@ -132,13 +143,13 @@ function importGlobalLog(evt) {
/**
* Load only when document is ready
*/
$(document).ready(function(){
(function () {
setText();
getLog();
$('#reset_log_btn').on("click", resetGlobalLog);
$('#export_log_btn').on("click", exportGlobalLog);
$('#importLog').on("change", importGlobalLog);
});
document.getElementById('reset_log_btn').onclick = resetGlobalLog;
document.getElementById('export_log_btn').onclick = exportGlobalLog;
document.getElementById('importLog').onchange = importGlobalLog;
})();
/**
* Translate a string with the i18n API.
@ -156,17 +167,17 @@ function translate(string)
function setText()
{
document.title = translate('log_html_page_title');
$('#page_title').text(translate('log_html_page_title'));
$('#reset_log_btn').text(translate('log_html_reset_button'))
.prop('title', translate('log_html_reset_button_title'));
$('#head_1').text(translate('log_html_table_head_1'));
$('#head_2').text(translate('log_html_table_head_2'));
$('#head_3').text(translate('log_html_table_head_3'));
$('#head_4').text(translate('log_html_table_head_4'));
$('#export_log_btn_text').text(translate('log_html_export_button'));
$('#export_log_btn').prop('title', translate('log_html_export_button_title'));
$('#import_log_btn_text').text(translate('log_html_import_button'));
$('#importLog').prop('title', translate('log_html_import_button_title'));
document.getElementById('page_title').textContent = translate('log_html_page_title');
document.getElementById('reset_log_btn').textContent = translate('log_html_reset_button');
document.getElementById('reset_log_btn').setAttribute('title', translate('log_html_reset_button_title'));
document.getElementById('head_1').textContent = translate('log_html_table_head_1');
document.getElementById('head_2').textContent = translate('log_html_table_head_2');
document.getElementById('head_3').textContent = translate('log_html_table_head_3');
document.getElementById('head_4').textContent = translate('log_html_table_head_4');
document.getElementById('export_log_btn_text').textContent = translate('log_html_export_button');
document.getElementById('export_log_btn').setAttribute('title', translate('log_html_export_button_title'));
document.getElementById('import_log_btn_text').textContent = translate('log_html_import_button');
document.getElementById('importLog').setAttribute('title', translate('log_html_import_button_title'));
}
function handleError(error) {

View File

@ -18,28 +18,47 @@
var settings = [];
getData();
const pickr = Pickr.create({
el: '#badged-color-picker',
theme: 'nano',
components: {
preview: true,
opacity: true,
hue: true,
default: '#FFA500',
comparison: false,
interaction: {
hex: true,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
/**
* Load only when document is ready
*/
$(document).ready(function(){
(function () {
pickr.on('init', () => {
getData();
setText();
$("#badged-color-picker").colorpicker({
format: "hex"
});
$('#reset_settings_btn').on("click", reset);
$('#export_settings_btn').on("click", exportSettings);
$('#importSettings').on("change", importSettings);
$('#save_settings_btn').on("click", save);
document.getElementById('reset_settings_btn').onclick = reset;
document.getElementById('export_settings_btn').onclick = exportSettings;
document.getElementById('importSettings').onchange = importSettings;
document.getElementById('save_settings_btn').onclick = save;
});
})();
/**
* Reset everything.
* Set everthing to the default values.
*/
function reset()
{
function reset() {
browser.runtime.sendMessage({
function: "initSettings",
params: []
@ -59,13 +78,12 @@ function reset()
/**
* Saves the settings.
*/
function save()
{
saveData("badged_color", $('input[name=badged_color]').val())
.then(() => saveData("ruleURL", $('input[name=ruleURL]').val()))
.then(() => saveData("hashURL", $('input[name=hashURL]').val()))
.then(() => saveData("types", $('input[name=types]').val()))
.then(() => saveData("logLimit", Math.max(0, Math.min(5000, $('input[name=logLimit]').val()))))
function save() {
saveData("badged_color", pickr.getColor().toHEXA().toString())
.then(() => saveData("ruleURL", document.querySelector('input[name=ruleURL]').value))
.then(() => saveData("hashURL", document.querySelector('input[name=hashURL]').value))
.then(() => saveData("types", document.querySelector('input[name=types]').value))
.then(() => saveData("logLimit", Math.max(0, Math.min(5000, document.querySelector('input[name=logLimit]').value))))
.then(() => browser.runtime.sendMessage({
function: "setBadgedStatus",
params: []
@ -86,26 +104,31 @@ function save()
* @param {string} string Name of the attribute used for localization
* @param {string[]} placeholders Array of placeholders
*/
function translate(string, ...placeholders)
{
function translate(string, ...placeholders) {
return browser.i18n.getMessage(string, placeholders);
}
/**
* Get the data.
*/
function getData()
{
loadData("badged_color")
.then(() => loadData("ruleURL"))
function getData() {
browser.runtime.sendMessage({
function: "getData",
params: ["badged_color"]
}).then(data => {
settings["badged_color"] = data.response;
pickr.setColor(data.response, false);
}).catch(handleError);
loadData("ruleURL")
.then(() => loadData("hashURL"))
.then(() => loadData("types"))
.then(() => loadData("logLimit"))
.then(logData => {
if(logData.response === undefined || logData.response === -1) {
$('#logLimit_label').text(translate('setting_log_limit_label', "∞"));
if (logData.response === undefined) {
document.getElementById('logLimit_label').textContent = translate('setting_log_limit_label', "0");
} else {
$('#logLimit_label').text(translate('setting_log_limit_label', logData.response));
document.getElementById('logLimit_label').textContent = translate('setting_log_limit_label', logData.response);
}
}).catch(handleError);
@ -140,7 +163,10 @@ async function loadData(name) {
params: [name]
}).then(data => {
settings[name] = data.response;
$('input[name='+name+']').val(data.response);
if (document.querySelector('input[id=' + name + ']') == null) {
console.debug(name)
}
document.querySelector('input[id=' + name + ']').value = data.response;
resolve(data);
}, handleError);
});
@ -168,31 +194,30 @@ async function saveData(key, data) {
/**
* Set the text for the UI.
*/
function setText()
{
function setText() {
document.title = translate('settings_html_page_title');
$('#page_title').text(translate('settings_html_page_title'));
$('#badged_color_label').text(translate('badged_color_label'));
$('#reset_settings_btn').text(translate('setting_html_reset_button'))
.prop('title', translate('setting_html_reset_button_title'));
$('#rule_url_label').text(translate('setting_rule_url_label'));
$('#hash_url_label').text(translate('setting_hash_url_label'));
$('#types_label').html(translate('setting_types_label'));
$('#save_settings_btn').text(translate('settings_html_save_button'))
.prop('title', translate('settings_html_save_button_title'));
document.getElementById('page_title').textContent = translate('settings_html_page_title');
document.getElementById('badged_color_label').textContent = translate('badged_color_label');
document.getElementById('reset_settings_btn').textContent = translate('setting_html_reset_button');
document.getElementById('reset_settings_btn').setAttribute('title', translate('setting_html_reset_button_title'));
document.getElementById('rule_url_label').textContent = translate('setting_rule_url_label');
document.getElementById('hash_url_label').textContent = translate('setting_hash_url_label');
document.getElementById('types_label').innerHTML = translate('setting_types_label');
document.getElementById('save_settings_btn').textContent = translate('settings_html_save_button');
document.getElementById('save_settings_btn').setAttribute('title', translate('settings_html_save_button_title'));
injectText("context_menu_enabled", "context_menu_enabled");
$('#history_listener_enabled').html(translate('history_listener_enabled'));
document.getElementById('history_listener_enabled').innerHTML = translate('history_listener_enabled');
injectText("local_hosts_skipping", "local_hosts_skipping");
$('#export_settings_btn_text').text(translate('setting_html_export_button'));
$('#export_settings_btn').prop('title', translate('setting_html_export_button_title'));
$('#import_settings_btn_text').text(translate('setting_html_import_button'));
$('#importSettings').prop('title', translate('setting_html_import_button_title'));
document.getElementById('export_settings_btn_text').textContent = translate('setting_html_export_button');
document.getElementById('export_settings_btn').setAttribute('title', translate('setting_html_export_button_title'));
document.getElementById('import_settings_btn_text').textContent = translate('setting_html_import_button');
document.getElementById('importSettings').setAttribute('title', translate('setting_html_import_button_title'));
injectText("referral_marketing_enabled", "referral_marketing_enabled");
injectText("domain_blocking_enabled", "domain_blocking_enabled");
$('#ping_blocking_enabled').html(translate('ping_blocking_enabled'))
.prop('title', translate('ping_blocking_enabled_title'));
$('#eTag_filtering_enabled').html(translate('eTag_filtering_enabled'))
.prop('title', translate('eTag_filtering_enabled_title'))
document.getElementById('ping_blocking_enabled').innerHTML = translate('ping_blocking_enabled');
document.getElementById('ping_blocking_enabled').setAttribute('title', translate('ping_blocking_enabled_title'));
document.getElementById('eTag_filtering_enabled').innerHTML = translate('eTag_filtering_enabled');
document.getElementById('eTag_filtering_enabled').setAttribute('title', translate('eTag_filtering_enabled_title'));
}
/**
@ -253,15 +278,14 @@ function handleError(error) {
* @param {string} id HTML id
* @param {string} storageID storage internal id
*/
function changeSwitchButton(id, storageID)
{
let element = $('#'+id);
function changeSwitchButton(id, storageID) {
let element = document.getElementById(id);
element.on('change', function(){
element.onchange = function () {
browser.runtime.sendMessage({
function: "setData",
params: [storageID, element.is(':checked')]
}).then((data) => {
params: [storageID, element.checked]
}).then(() => {
if (storageID === "globalStatus") {
browser.runtime.sendMessage({
function: "changeIcon",
@ -274,7 +298,7 @@ function changeSwitchButton(id, storageID)
params: []
}).catch(handleError);
}).catch(handleError);
});
};
setSwitchButton(id, storageID);
}
@ -285,10 +309,9 @@ function changeSwitchButton(id, storageID)
* @param {string} attribute Name of the attribute used for localization
* @param {string} tooltip
*/
function injectText(id, attribute, tooltip = "")
{
let object = $('#'+id);
object.text(translate(attribute));
function injectText(id, attribute, tooltip = "") {
let object = document.getElementById(id);
object.textContent = translate(attribute);
/*
This function will throw an error if no translation
@ -296,9 +319,8 @@ function injectText(id, attribute, tooltip = "")
*/
tooltip = translate(attribute + "_title");
if(tooltip !== "")
{
object.prop('title', tooltip);
if (tooltip !== "") {
object.setAttribute('title', tooltip);
}
}
@ -307,8 +329,7 @@ function injectText(id, attribute, tooltip = "")
* @param {string} id HTML id
* @param {string} varname js internal variable name
*/
function setSwitchButton(id, varname)
{
let element = $('#'+id);
element.prop('checked', settings[varname]);
function setSwitchButton(id, varname) {
let element = document.getElementById(id);
element.checked = settings[varname];
}

File diff suppressed because one or more lines are too long

1
css/pickr.nano.min.css vendored Normal file

File diff suppressed because one or more lines are too long

3
external_js/pickr.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -31,7 +31,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/switchButtons.css">
<link rel="stylesheet" type="text/css" href="../css/core.css">
<link rel="stylesheet" href="../css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="../css/pickr.nano.min.css">
<style>
td {
word-wrap: break-word;
@ -92,10 +92,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<br />
<label id="badged_color_label"></label><br />
<div id="badged-color-picker" class="input-group">
<input type="text" class="form-control input-lg" value="" name="badged_color" id="badged_color">
<span class="input-group-append">
<span class="input-group-text colorpicker-input-addon"><i></i></span>
</span>
</div>
<br />
<br />
@ -178,10 +174,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Optional JavaScript -->
<script src="../browser-polyfill.js"></script>
<script src="../external_js/jquery-3.4.1.min.js"></script>
<script src="../external_js/popper.min.js"></script>
<script src="../external_js/bootstrap.min.js"></script>
<script src="../external_js/bootstrap-colorpicker.min.js"></script>
<script src="../external_js/pickr.min.js"></script>
<script src="../core_js/settings.js"></script>
<script src="../core_js/write_version.js"></script>
</body>