1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
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));
}
|
