summaryrefslogtreecommitdiffstats
path: root/src/scripts/log.js
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/scripts/log.js151
1 files changed, 151 insertions, 0 deletions
diff --git a/src/scripts/log.js b/src/scripts/log.js
new file mode 100644
index 0000000..5641fa8
--- /dev/null
+++ b/src/scripts/log.js
@@ -0,0 +1,151 @@
+'use strict';
+
+// ----------------- Internationalization ------------------
+document.querySelectorAll('[data-i18n]').forEach(node => {
+ let [text, attr] = node.dataset.i18n.split('|');
+ text = chrome.i18n.getMessage(text);
+ attr ? node[attr] = text : node.appendChild(document.createTextNode(text));
+});
+// ----------------- /Internationalization -----------------
+
+document.addEventListener('keyup', evt => {
+ if (evt.keyCode === 27) {
+ // We either came from /options.html or were opened as a new tab from popup.html (in that case, do nothing)
+ history.back();
+ }
+});
+
+// ----------------- Spinner -------------------------------
+const spinner = document.querySelector('.spinner');
+function hideSpinner() {
+
+ spinner.classList.remove('on');
+ setTimeout(() => { spinner.style.display = 'none'; }, 600);
+}
+
+function showSpinner() {
+
+ spinner.style.display = 'flex';
+ spinner.classList.add('on');
+}
+// ----------------- /spinner ------------------------------
+
+// ----- global
+let logger;
+const onOff = document.querySelector('#onOff');
+const logSize = document.querySelector('#logSize');
+
+chrome.runtime.getBackgroundPage(bg => {
+
+ logger = bg.getLog();
+ onOff.checked = logger.active;
+ logSize.value = logger.size;
+ renderMatchedLog(); // log content will be shown if there are any, regardless of onOff
+ renderUnmatchedLog(); // log content will be shown if there are any, regardless of onOff
+ hideSpinner();
+});
+
+onOff.addEventListener('change', (e) => {
+
+ logger.active = onOff.checked;
+ logger.updateStorage();
+});
+
+logSize.addEventListener('change', (e) => {
+
+ logSize.value = logSize.value*1 || logger.size; // defaults on bad number entry
+ if (logger.size !== logSize.value) { // update on change
+ logger.size = logSize.value;
+ logger.updateStorage();
+ }
+});
+
+document.querySelectorAll('button').forEach(item => item.addEventListener('click', process));
+
+function process () {
+
+ switch (this.dataset.i18n) {
+
+ case 'back': location.href = '/options.html'; break;
+ case 'refresh':
+ renderMatchedLog();
+ renderUnmatchedLog();
+ break;
+ case 'clear':
+ logger.clear();
+ renderMatchedLog();
+ renderUnmatchedLog();
+ break;
+ }
+}
+
+function renderMatchedLog() {
+
+ // ----- templates & containers
+ const docfrag = document.createDocumentFragment();
+ const tr = document.querySelector('tr.matchedtemplate');
+ const tbody = tr.parentNode.nextElementSibling;
+ tbody.textContent = ''; // clearing the content
+
+ const forAll = chrome.i18n.getMessage('forAll');
+ const NA = chrome.i18n.getMessage('notApplicable');
+
+ logger.matchedList.forEach(item => {
+
+ const pattern = item.matchedPattern ?
+ (item.matchedPattern === 'all' ? forAll : item.matchedPattern) : 'No matches';
+
+ // Build a row for this log entry by cloning the tr containing 7 td
+ const row = tr.cloneNode(true);
+ row.className = item.matchedPattern ? 'success' : 'secondary'; // this will rest class .tamplate as well
+ const td = row.children;
+
+ const a = td[0].children[0];
+ a.href = item.url;
+ a.textContent = item.url;
+
+ td[1].textContent = item.title || NA;
+ td[2].style.backgroundColor = item.color || 'blue';
+ td[3].textContent = item.address || NA;
+ td[4].textContent = pattern;
+ td[5].textContent = item.whiteBlack || NA;
+ td[6].textContent = formatInt(item.timestamp);
+
+ docfrag.appendChild(row);
+ });
+
+ tbody.appendChild(docfrag);
+}
+
+function renderUnmatchedLog() {
+
+ // ----- templates & containers
+ const docfrag = document.createDocumentFragment();
+ const tr = document.querySelector('tr.unmatchedtemplate');
+ const tbody = tr.parentNode.nextElementSibling;
+ tbody.textContent = ''; // clearing the content
+
+ logger.unmatchedList.forEach(item => {
+ // Build a row for this log entry by cloning the tr containing 2 td
+ const row = tr.cloneNode(true);
+ const td = row.children;
+ const a = td[0].children[0];
+
+ a.href = item.url;
+ a.textContent = item.url;
+ td[1].textContent = formatInt(item.timestamp);
+
+ docfrag.appendChild(row);
+ });
+
+ tbody.appendChild(docfrag);
+}
+
+function formatInt(d) {
+ // International format based on user locale
+ // you can delete the other function if you like this
+ // you can adjust the content via the object properties
+ return new Intl.DateTimeFormat(navigator.language,
+ {weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
+ hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false}).format(new Date(d));
+}