Skip to content

Commit cfc9bbe

Browse files
committed
Small refact
1 parent c51d07f commit cfc9bbe

File tree

3 files changed

+51
-85
lines changed

3 files changed

+51
-85
lines changed

src/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
"name": "Web Activity Time Tracker",
55
"short_name": "Web Time Tracker",
6-
"version": "1.1.0",
6+
"version": "1.1.3",
77
"minimum_chrome_version": "26",
88

99
"description": "Track and limit time your activity in the browser.",

src/scripts/settings.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ function loadSettings() {
9090
function checkPermissions() {
9191
chrome.permissions.contains({
9292
permissions: ['tabs'],
93-
origins: ["http://*/*", "https://*/*"]
93+
origins: ["https://www.youtube.com/*"]
9494
}, function (result) {
9595
if (result) {
9696
setUIForAnyPermission();

src/scripts/ui.js

Lines changed: 49 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,10 @@ class UI {
4040
createTotalBlock(totalTime) {
4141
var totalElement = document.getElementById('total');
4242

43-
var spanTitle = document.createElement('span');
44-
spanTitle.classList.add('span-total');
45-
spanTitle.innerHTML = 'Total';
43+
var spanTitle = this.createElement('span', ['span-total'], 'Total');
44+
var spanTime = this.createElement('span', ['span-time'], convertSummaryTimeToString(totalTime));
4645

47-
var spanTime = document.createElement('span');
48-
spanTime.classList.add('span-time');
49-
spanTime.innerHTML = convertSummaryTimeToString(totalTime);
50-
51-
totalElement.appendChild(spanTitle);
52-
totalElement.appendChild(spanTime);
46+
totalElement = this.appendChild(totalElement, [spanTitle, spanTime]);
5347
}
5448

5549
fillEmptyBlock(elementName) {
@@ -158,53 +152,32 @@ class UI {
158152
divForImg.classList.add('block-img');
159153
divForImg.appendChild(img);
160154

161-
var spanUrl = document.createElement('span');
162-
spanUrl.classList.add('span-url');
163-
spanUrl.innerText = tab.url;
155+
var spanUrl = this.createElement('span', ['span-url'], tab.url);
164156

165157
if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
166158
if (restrictionList !== undefined && restrictionList.length > 0) {
167159
var item = restrictionList.find(x => isDomainEquals(x.domain, tab.url));
168160
if (item !== undefined) {
169-
var divLimit = document.createElement('div');
170-
divLimit.classList.add('tooltip', 'inline-block');
171-
var limitIcon = document.createElement('img');
161+
var divLimit = this.createElement('div', ['tooltip', 'inline-block']);
162+
var limitIcon = this.createElement('img', ['margin-left-5', 'tooltip']);
172163
limitIcon.height = 15;
173-
limitIcon.classList.add('margin-left-5', 'tooltip');
174164
limitIcon.src = '/icons/limit.png';
175-
var tooltip = document.createElement('span');
176-
tooltip.classList.add('tooltiptext');
177-
tooltip.innerText = "Dayly limit is " + convertShortSummaryTimeToLongString(item.time);
178-
divLimit.appendChild(limitIcon);
179-
divLimit.appendChild(tooltip);
165+
var tooltip = this.createElement('span', ['tooltiptext'], "Dayly limit is " + convertShortSummaryTimeToLongString(item.time));
166+
divLimit = this.appendChild(divLimit, [limitIcon, tooltip]);
180167
spanUrl.appendChild(divLimit);
181168
}
182169
}
183170
}
184171

185-
var spanVisits = document.createElement('span');
186-
spanVisits.classList.add('span-visits', 'tooltip', 'visits');
187-
spanVisits.innerText = counter !== undefined ? counter : 0;
188-
189-
var visitsTooltip = document.createElement('span');
190-
visitsTooltip.classList.add('tooltiptext');
191-
visitsTooltip.innerText = 'Count of visits';
172+
var spanVisits = this.createElement('span', ['span-visits', 'tooltip', 'visits'], counter !== undefined ? counter : 0);
173+
var visitsTooltip = this.createElement('span', ['tooltiptext'], 'Count of visits');
192174

193175
spanVisits.appendChild(visitsTooltip);
194176

195-
var spanPercentage = document.createElement('span');
196-
spanPercentage.classList.add('span-percentage');
197-
spanPercentage.innerText = getPercentage(summaryTime);
177+
var spanPercentage = this.createElement('span', ['span-percentage'], getPercentage(summaryTime));
178+
var spanTime = this.createElement('span', ['span-time'], convertSummaryTimeToString(summaryTime));
198179

199-
var spanTime = document.createElement('span');
200-
spanTime.classList.add('span-time');
201-
spanTime.innerText = convertSummaryTimeToString(summaryTime);
202-
203-
div.appendChild(divForImg);
204-
div.appendChild(spanUrl);
205-
div.appendChild(spanVisits);
206-
div.appendChild(spanPercentage);
207-
div.appendChild(spanTime);
180+
div = this.appendChild(div, [divForImg, spanUrl, spanVisits, spanPercentage, spanTime]);
208181
if (blockName !== undefined)
209182
document.getElementById(blockName).appendChild(div);
210183
else
@@ -213,10 +186,8 @@ class UI {
213186

214187
addExpander() {
215188
if (document.getElementById('expander') === null) {
216-
var div = document.createElement('div');
189+
var div = this.createElement('div', ['expander'], 'Show all');
217190
div.id = 'expander';
218-
div.innerText = 'Show all';
219-
div.classList.add('expander');
220191
div.addEventListener('click', function () {
221192
ui.expand();
222193
});
@@ -234,10 +205,8 @@ class UI {
234205
var barChart = document.createElement('div');
235206
barChart.id = 'barChart';
236207

237-
var from = document.createElement('span');
238-
from.innerHTML = 'From';
239-
var to = document.createElement('span');
240-
to.innerHTML = 'To';
208+
var from = this.createElement('span', null, 'From');
209+
var to = this.createElement('span', null,'To');
241210

242211
var dateNow = new Date();
243212
var calendarFirst = document.createElement('input');
@@ -255,11 +224,7 @@ class UI {
255224
var tableForDaysBlock = document.createElement('div');
256225
tableForDaysBlock.id = 'tableForDaysBlock';
257226

258-
div.appendChild(barChart);
259-
div.appendChild(from);
260-
div.appendChild(calendarFirst);
261-
div.appendChild(to);
262-
div.appendChild(calendarTwo);
227+
div = this.appendChild(div, [barChart, from, calendarFirst, to, calendarTwo]);
263228

264229
div.append(tableForDaysBlock);
265230

@@ -287,47 +252,29 @@ class UI {
287252
var daysForBarChart = this.fillDaysForBarChart(days, allDays);
288253
this.drawBarChart(daysForBarChart);
289254

290-
var header = document.createElement('div');
291-
header.classList.add('table-header');
292-
293-
var headerTitleDate = document.createElement('span');
294-
headerTitleDate.innerHTML = 'Day';
295-
headerTitleDate.classList.add('header-title-day');
296-
var headerTitleTime = document.createElement('span');
297-
headerTitleTime.innerHTML = 'Summary time';
298-
headerTitleTime.classList.add('header-title-time');
255+
var header = this.createElement('div', ['table-header']);
299256

300-
header.appendChild(headerTitleDate);
301-
header.appendChild(headerTitleTime);
257+
var headerTitleDate = this.createElement('span', ['header-title-day'], 'Day');
258+
var headerTitleTime = this.createElement('span', ['header-title-time'], 'Summary time');
302259

260+
header = this.appendChild(header, [headerTitleDate, headerTitleTime]);
303261
parent.appendChild(header);
304262

305263
for (var i = 0; i < days.length; i++) {
306-
var check = document.createElement('input');
264+
var check = this.createElement('input', ['toggle']);
307265
check.type = 'checkbox';
308266
check.id = days[i].date;
309-
check.classList.add('toggle');
310267

311-
var label = document.createElement('label');
268+
var label = this.createElement('label', ['day-block', 'lbl-toggle']);
312269
label.setAttribute('for', days[i].date);
313-
label.classList.add('day-block');
314-
label.classList.add('lbl-toggle');
315-
var span = document.createElement('span');
316-
span.classList.add('day');
317-
span.innerHTML = days[i].date;
318-
var spanTime = document.createElement('span');
319-
spanTime.classList.add('day-time');
320-
spanTime.innerHTML = convertSummaryTimeToString(days[i].total);
321-
322-
label.appendChild(span);
323-
label.appendChild(spanTime);
324-
325-
parent.appendChild(check);
326-
parent.appendChild(label);
327-
328-
var div = document.createElement('div');
270+
var span = this.createElement('span', ['day'], days[i].date);
271+
var spanTime = this.createElement('span', ['day-time'], convertSummaryTimeToString(days[i].total));
272+
273+
label = this.appendChild(label, [span, spanTime]);
274+
parent = this.appendChild(parent, [check, label]);
275+
276+
var div = this.createElement('div', ['collapsible-content'], convertSummaryTimeToString(days[i].total));
329277
div.id = days[i].date + '_block';
330-
div.classList.add('collapsible-content');
331278
parent.appendChild(div);
332279

333280
document.getElementById(days[i].date).addEventListener('click', function () {
@@ -360,4 +307,23 @@ class UI {
360307

361308
return resultList;
362309
}
310+
311+
createElement(type, css, innerText){
312+
var element = document.createElement(type);
313+
if (css !== undefined && css !== null){
314+
for (let i=0; i<=css.length; i++)
315+
element.classList.add(css[i]);
316+
}
317+
if (innerText !== undefined)
318+
element.innerHTML = innerText;
319+
320+
return element;
321+
}
322+
323+
appendChild(element, children){
324+
for (let i=0; i<children.length; i++)
325+
element.appendChild(children[i]);
326+
327+
return element;
328+
}
363329
}

0 commit comments

Comments
 (0)