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 | Copyright JS Foundation and other contributors |
[MIT](https://jquery.org/license/) [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/) - [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 | - [Pickr v1.7.0](https://github.com/Simonwep/pickr/tree/1.7.0) | Copyright (c) 2018 - 2020 Simon Reinisch |
[MIT](https://github.com/popperjs/popper.js/blob/master/LICENSE.md) [MIT](https://github.com/Simonwep/pickr/blob/master/LICENSE)
- [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)
- [Font Awesome v5.12.0](https://github.com/FortAwesome/Font-Awesome/tree/5.12.0) | Copyright (c) @fontawesome | - [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) [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": { "popup_html_configs_head_title": {
"message": "", "message": "",
"description": "not needed, only to prevent exceptions" "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; 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({ $('#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, "pageLength": 10,
"language": { "language": {
"url": getDataTableTranslation() "url": getDataTableTranslation()
@ -132,13 +143,13 @@ function importGlobalLog(evt) {
/** /**
* Load only when document is ready * Load only when document is ready
*/ */
$(document).ready(function(){ (function () {
setText(); setText();
getLog(); getLog();
$('#reset_log_btn').on("click", resetGlobalLog); document.getElementById('reset_log_btn').onclick = resetGlobalLog;
$('#export_log_btn').on("click", exportGlobalLog); document.getElementById('export_log_btn').onclick = exportGlobalLog;
$('#importLog').on("change", importGlobalLog); document.getElementById('importLog').onchange = importGlobalLog;
}); })();
/** /**
* Translate a string with the i18n API. * Translate a string with the i18n API.
@ -156,17 +167,17 @@ function translate(string)
function setText() function setText()
{ {
document.title = translate('log_html_page_title'); document.title = translate('log_html_page_title');
$('#page_title').text(translate('log_html_page_title')); document.getElementById('page_title').textContent = translate('log_html_page_title');
$('#reset_log_btn').text(translate('log_html_reset_button')) document.getElementById('reset_log_btn').textContent = translate('log_html_reset_button');
.prop('title', translate('log_html_reset_button_title')); document.getElementById('reset_log_btn').setAttribute('title', translate('log_html_reset_button_title'));
$('#head_1').text(translate('log_html_table_head_1')); document.getElementById('head_1').textContent = translate('log_html_table_head_1');
$('#head_2').text(translate('log_html_table_head_2')); document.getElementById('head_2').textContent = translate('log_html_table_head_2');
$('#head_3').text(translate('log_html_table_head_3')); document.getElementById('head_3').textContent = translate('log_html_table_head_3');
$('#head_4').text(translate('log_html_table_head_4')); document.getElementById('head_4').textContent = translate('log_html_table_head_4');
$('#export_log_btn_text').text(translate('log_html_export_button')); document.getElementById('export_log_btn_text').textContent = translate('log_html_export_button');
$('#export_log_btn').prop('title', translate('log_html_export_button_title')); document.getElementById('export_log_btn').setAttribute('title', translate('log_html_export_button_title'));
$('#import_log_btn_text').text(translate('log_html_import_button')); document.getElementById('import_log_btn_text').textContent = translate('log_html_import_button');
$('#importLog').prop('title', translate('log_html_import_button_title')); document.getElementById('importLog').setAttribute('title', translate('log_html_import_button_title'));
} }
function handleError(error) { function handleError(error) {

View File

@ -18,28 +18,47 @@
var settings = []; 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 * Load only when document is ready
*/ */
$(document).ready(function(){ (function () {
pickr.on('init', () => {
getData();
setText(); setText();
$("#badged-color-picker").colorpicker({ document.getElementById('reset_settings_btn').onclick = reset;
format: "hex" document.getElementById('export_settings_btn').onclick = exportSettings;
}); document.getElementById('importSettings').onchange = importSettings;
$('#reset_settings_btn').on("click", reset); document.getElementById('save_settings_btn').onclick = save;
$('#export_settings_btn').on("click", exportSettings);
$('#importSettings').on("change", importSettings);
$('#save_settings_btn').on("click", save);
}); });
})();
/** /**
* Reset everything. * Reset everything.
* Set everthing to the default values. * Set everthing to the default values.
*/ */
function reset() function reset() {
{
browser.runtime.sendMessage({ browser.runtime.sendMessage({
function: "initSettings", function: "initSettings",
params: [] params: []
@ -59,13 +78,12 @@ function reset()
/** /**
* Saves the settings. * Saves the settings.
*/ */
function save() function save() {
{ saveData("badged_color", pickr.getColor().toHEXA().toString())
saveData("badged_color", $('input[name=badged_color]').val()) .then(() => saveData("ruleURL", document.querySelector('input[name=ruleURL]').value))
.then(() => saveData("ruleURL", $('input[name=ruleURL]').val())) .then(() => saveData("hashURL", document.querySelector('input[name=hashURL]').value))
.then(() => saveData("hashURL", $('input[name=hashURL]').val())) .then(() => saveData("types", document.querySelector('input[name=types]').value))
.then(() => saveData("types", $('input[name=types]').val())) .then(() => saveData("logLimit", Math.max(0, Math.min(5000, document.querySelector('input[name=logLimit]').value))))
.then(() => saveData("logLimit", Math.max(0, Math.min(5000, $('input[name=logLimit]').val()))))
.then(() => browser.runtime.sendMessage({ .then(() => browser.runtime.sendMessage({
function: "setBadgedStatus", function: "setBadgedStatus",
params: [] params: []
@ -86,26 +104,31 @@ function save()
* @param {string} string Name of the attribute used for localization * @param {string} string Name of the attribute used for localization
* @param {string[]} placeholders Array of placeholders * @param {string[]} placeholders Array of placeholders
*/ */
function translate(string, ...placeholders) function translate(string, ...placeholders) {
{
return browser.i18n.getMessage(string, placeholders); return browser.i18n.getMessage(string, placeholders);
} }
/** /**
* Get the data. * Get the data.
*/ */
function getData() function getData() {
{ browser.runtime.sendMessage({
loadData("badged_color") function: "getData",
.then(() => loadData("ruleURL")) params: ["badged_color"]
}).then(data => {
settings["badged_color"] = data.response;
pickr.setColor(data.response, false);
}).catch(handleError);
loadData("ruleURL")
.then(() => loadData("hashURL")) .then(() => loadData("hashURL"))
.then(() => loadData("types")) .then(() => loadData("types"))
.then(() => loadData("logLimit")) .then(() => loadData("logLimit"))
.then(logData => { .then(logData => {
if(logData.response === undefined || logData.response === -1) { if (logData.response === undefined) {
$('#logLimit_label').text(translate('setting_log_limit_label', "∞")); document.getElementById('logLimit_label').textContent = translate('setting_log_limit_label', "0");
} else { } 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); }).catch(handleError);
@ -140,7 +163,10 @@ async function loadData(name) {
params: [name] params: [name]
}).then(data => { }).then(data => {
settings[name] = data.response; 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); resolve(data);
}, handleError); }, handleError);
}); });
@ -168,31 +194,30 @@ async function saveData(key, data) {
/** /**
* Set the text for the UI. * Set the text for the UI.
*/ */
function setText() function setText() {
{
document.title = translate('settings_html_page_title'); document.title = translate('settings_html_page_title');
$('#page_title').text(translate('settings_html_page_title')); document.getElementById('page_title').textContent = translate('settings_html_page_title');
$('#badged_color_label').text(translate('badged_color_label')); document.getElementById('badged_color_label').textContent = translate('badged_color_label');
$('#reset_settings_btn').text(translate('setting_html_reset_button')) document.getElementById('reset_settings_btn').textContent = translate('setting_html_reset_button');
.prop('title', translate('setting_html_reset_button_title')); document.getElementById('reset_settings_btn').setAttribute('title', translate('setting_html_reset_button_title'));
$('#rule_url_label').text(translate('setting_rule_url_label')); document.getElementById('rule_url_label').textContent = translate('setting_rule_url_label');
$('#hash_url_label').text(translate('setting_hash_url_label')); document.getElementById('hash_url_label').textContent = translate('setting_hash_url_label');
$('#types_label').html(translate('setting_types_label')); document.getElementById('types_label').innerHTML = translate('setting_types_label');
$('#save_settings_btn').text(translate('settings_html_save_button')) document.getElementById('save_settings_btn').textContent = translate('settings_html_save_button');
.prop('title', translate('settings_html_save_button_title')); document.getElementById('save_settings_btn').setAttribute('title', translate('settings_html_save_button_title'));
injectText("context_menu_enabled", "context_menu_enabled"); 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"); injectText("local_hosts_skipping", "local_hosts_skipping");
$('#export_settings_btn_text').text(translate('setting_html_export_button')); document.getElementById('export_settings_btn_text').textContent = translate('setting_html_export_button');
$('#export_settings_btn').prop('title', translate('setting_html_export_button_title')); document.getElementById('export_settings_btn').setAttribute('title', translate('setting_html_export_button_title'));
$('#import_settings_btn_text').text(translate('setting_html_import_button')); document.getElementById('import_settings_btn_text').textContent = translate('setting_html_import_button');
$('#importSettings').prop('title', translate('setting_html_import_button_title')); document.getElementById('importSettings').setAttribute('title', translate('setting_html_import_button_title'));
injectText("referral_marketing_enabled", "referral_marketing_enabled"); injectText("referral_marketing_enabled", "referral_marketing_enabled");
injectText("domain_blocking_enabled", "domain_blocking_enabled"); injectText("domain_blocking_enabled", "domain_blocking_enabled");
$('#ping_blocking_enabled').html(translate('ping_blocking_enabled')) document.getElementById('ping_blocking_enabled').innerHTML = translate('ping_blocking_enabled');
.prop('title', translate('ping_blocking_enabled_title')); document.getElementById('ping_blocking_enabled').setAttribute('title', translate('ping_blocking_enabled_title'));
$('#eTag_filtering_enabled').html(translate('eTag_filtering_enabled')) document.getElementById('eTag_filtering_enabled').innerHTML = translate('eTag_filtering_enabled');
.prop('title', translate('eTag_filtering_enabled_title')) 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} id HTML id
* @param {string} storageID storage internal id * @param {string} storageID storage internal id
*/ */
function changeSwitchButton(id, storageID) function changeSwitchButton(id, storageID) {
{ let element = document.getElementById(id);
let element = $('#'+id);
element.on('change', function(){ element.onchange = function () {
browser.runtime.sendMessage({ browser.runtime.sendMessage({
function: "setData", function: "setData",
params: [storageID, element.is(':checked')] params: [storageID, element.checked]
}).then((data) => { }).then(() => {
if (storageID === "globalStatus") { if (storageID === "globalStatus") {
browser.runtime.sendMessage({ browser.runtime.sendMessage({
function: "changeIcon", function: "changeIcon",
@ -274,7 +298,7 @@ function changeSwitchButton(id, storageID)
params: [] params: []
}).catch(handleError); }).catch(handleError);
}).catch(handleError); }).catch(handleError);
}); };
setSwitchButton(id, storageID); setSwitchButton(id, storageID);
} }
@ -285,10 +309,9 @@ function changeSwitchButton(id, storageID)
* @param {string} attribute Name of the attribute used for localization * @param {string} attribute Name of the attribute used for localization
* @param {string} tooltip * @param {string} tooltip
*/ */
function injectText(id, attribute, tooltip = "") function injectText(id, attribute, tooltip = "") {
{ let object = document.getElementById(id);
let object = $('#'+id); object.textContent = translate(attribute);
object.text(translate(attribute));
/* /*
This function will throw an error if no translation This function will throw an error if no translation
@ -296,9 +319,8 @@ function injectText(id, attribute, tooltip = "")
*/ */
tooltip = translate(attribute + "_title"); tooltip = translate(attribute + "_title");
if(tooltip !== "") if (tooltip !== "") {
{ object.setAttribute('title', tooltip);
object.prop('title', tooltip);
} }
} }
@ -307,8 +329,7 @@ function injectText(id, attribute, tooltip = "")
* @param {string} id HTML id * @param {string} id HTML id
* @param {string} varname js internal variable name * @param {string} varname js internal variable name
*/ */
function setSwitchButton(id, varname) function setSwitchButton(id, varname) {
{ let element = document.getElementById(id);
let element = $('#'+id); element.checked = settings[varname];
element.prop('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" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/switchButtons.css"> <link rel="stylesheet" type="text/css" href="../css/switchButtons.css">
<link rel="stylesheet" type="text/css" href="../css/core.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> <style>
td { td {
word-wrap: break-word; word-wrap: break-word;
@ -92,10 +92,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<br /> <br />
<label id="badged_color_label"></label><br /> <label id="badged_color_label"></label><br />
<div id="badged-color-picker" class="input-group"> <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> </div>
<br /> <br />
<br /> <br />
@ -178,10 +174,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<script src="../browser-polyfill.js"></script> <script src="../browser-polyfill.js"></script>
<script src="../external_js/jquery-3.4.1.min.js"></script> <script src="../external_js/pickr.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="../core_js/settings.js"></script> <script src="../core_js/settings.js"></script>
<script src="../core_js/write_version.js"></script> <script src="../core_js/write_version.js"></script>
</body> </body>