Skip to content

Commit 9f5ced2

Browse files
abhijithvijayanabhijithvijayan
committed
history page: clear, qrcode & fixes
1 parent 09b2726 commit 9f5ced2

File tree

7 files changed

+243
-71
lines changed

7 files changed

+243
-71
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@
5353
- Paste and Save this `Key` in extension's `options page` when asked.
5454

5555
<img width="250" src="https://i.imgur.com/fJasvmv.png" alt="image2" />
56+
57+
<hr />
5658

5759
## Screenshots
5860

‎src/history.html‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,30 +23,46 @@ <h2 class="table__content--title">Recent shortened links.</h2>
2323
<th class="table__head--shortURL">
2424
Short URL
2525
</th>
26+
<th class="table__head--clearAll">
27+
<ul class="table__list--clearAll">
28+
<li class="table__listItem--clear">
29+
<button class="table__clearAll--btn" id="table__clearAll--btn" title="Delete All">
30+
Clear All <img class="selectDisable icon__img" src="assets/delete.svg" alt="Delete All" />
31+
</button>
32+
</li>
33+
</ul>
34+
</th>
2635
</tr>
2736
</thead>
28-
<tbody class="table__content--body">
37+
<tbody class="table__content--body" id="delegation__element">
2938
<!-- TEMPLATE TO USE -->
3039
<!-- <tr class="table__body--holder">
3140
<td class="table__body--original">
3241
<a href="#" class="table__body--originalURL" target="_blank" rel="noopener">https://google.com</a>
3342
</td>
3443
<td class="table__body--shortened">
3544
<div class="table__body--shortenBody">
36-
<button class="table__body--copyBtn" title="Copy">
37-
<img id="" class="selectDisable icon__img" src="assets/copy.svg" alt="copy" />
38-
</button>
3945
<a href="#" class="table__body--shortenURL" target="_blank" rel="noopener">https://kutt.it/abc</a>
4046
</div>
4147
</td>
4248
<td class="table__body--functionBtns">
4349
<div class="table__body--btnHolder">
50+
<button class="table__body--copy" title="Copy">
51+
<img class="selectDisable icon__img" src="assets/copy.svg" alt="copy" />
52+
</button>
4453
<button class="table__body--qrcode" title="QR Code">
45-
<img id="" class="selectDisable icon__img" src="assets/qrcode.svg" alt="QR Code" />
46-
</button>
47-
<button class="table__body--delete" title="Delete">
48-
<img id="" class="selectDisable icon__img" src="assets/delete.svg" alt="Delete" />
49-
</button>
54+
<img class="selectDisable icon__img" src="assets/qrcode.svg" alt="QR Code" />
55+
</button>
56+
</div>
57+
<div class="table__qrcodePopup--div">
58+
<div class="table__qrcode--popup">
59+
<div class="table__qrcode--holder">
60+
<img id="table__qrcode" src="#" alt="QRCode" />
61+
</div>
62+
<div class="table__closebtn--holder">
63+
<button class="table__closebtn--inner">Close</button>
64+
</div>
65+
</div>
5066
</div>
5167
</td>
5268
</tr> -->

‎src/scripts/background.js‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Kutt from 'kutt';
22
import browser from 'webextension-polyfill';
33

4-
let count = 0, URLs_array = [];
4+
let URLs_array = [];
55

66
// Shorten url
77
async function getShortURL(API_key, URLtoShorten, password) {
@@ -42,20 +42,14 @@ browser.runtime.onMessage.addListener(async (request, sender, response) => {
4242
}
4343
// store urls to history
4444
if (request.msg === 'store') {
45-
// console.log(request.URLs);
46-
// console.log(count);
47-
if (count >= 10) {
45+
if (request.count >= 10) {
4846
// delete first element
4947
URLs_array.shift();
50-
--count;
51-
browser.storage.local.set({ count: count });
48+
browser.storage.local.set({ count: --request.count });
5249
}
53-
if (count < 10) {
50+
if (request.count < 10) {
5451
URLs_array.push(request.URLs);
55-
browser.storage.local.set({ URL_array: URLs_array, count: ++count });
56-
// console.log(URLs_array);
57-
}
52+
browser.storage.local.set({ URL_array: URLs_array, count: ++request.count });
53+
}
5854
}
59-
60-
6155
});

‎src/scripts/history.js‎

Lines changed: 80 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,94 @@
11
import browser from 'webextension-polyfill';
2+
import QRCode from 'qrcode';
23

34

45
// on page load
56
document.addEventListener('DOMContentLoaded', () => {
6-
let updatedHTML, html = '<tr class="table__body--holder"><td class="table__body--original"><a href="%longLink%" class="table__body--originalURL" target="_blank" rel="noopener">%longLink%</a></td><td class="table__body--shortened"><div class="table__body--shortenBody"><button class="table__body--copyBtn" title="Copy"><img id="" class="selectDisable icon__img" src="assets/copy.svg" alt="copy" /></button><a href="%shortLink%" class="table__body--shortenURL" target="_blank" rel="noopener">%shortLink%</a></div></td><td class="table__body--functionBtns"><div class="table__body--btnHolder"><button class="table__body--qrcode" title="QR Code"><img id="" class="selectDisable icon__img" src="assets/qrcode.svg" alt="QR Code" /></button><button class="table__body--delete" title="Delete"><img id="" class="selectDisable icon__img" src="assets/delete.svg" alt="Delete" /></button></div></td></tr>';
7+
let updatedHTML, html;
8+
html = '<tr class="table__body--holder" id="table__body-%num%"><td class="table__body--original"><a href="%longLink%" class="table__body--originalURL" target="_blank" rel="noopener">%longLink%</a></td><td class="table__body--shortened"><div class="table__body--shortenBody"><a href="%shortLink%" id="shortUrl-%num%" class="table__body--shortenURL" target="_blank" rel="noopener">%shortLink%</a></div></td><td class="table__body--functionBtns"><div class="table__body--btnHolder" id="btns-%num%"><button class="table__body--copy" id="copy-%num%" title="Copy"><img class="selectDisable icon__img" src="assets/copy.svg" alt="copy" /></button><button class="table__body--qrcode" id="qrcode-%num%" title="QR Code"><img class="selectDisable icon__img" src="assets/qrcode.svg" alt="QR Code" /></button></div></td></tr>';
79
// get longURL, shortURL
810
browser.storage.local.get(['URL_array', 'count']).then(result => {
9-
// console.log(result.URL_array);
1011
// update DOM
11-
for (let el of result.URL_array) {
12-
// Regular Expression Based Implementation
13-
updatedHTML = html.replace(/%longLink%/g, el.longUrl);
14-
updatedHTML = updatedHTML.replace(/%shortLink%/g, el.shortUrl);
15-
// inject to DOM
16-
document.querySelector('.table__content--body').insertAdjacentHTML('afterbegin', updatedHTML);
12+
if (result.count > 0) {
13+
let pass = 0;
14+
for (let el of result.URL_array) {
15+
// Regular Expression Based Implementation
16+
updatedHTML = html.replace(/%longLink%/g, el.longUrl);
17+
updatedHTML = updatedHTML.replace(/%num%/g, ++pass);
18+
updatedHTML = updatedHTML.replace(/%shortLink%/g, el.shortUrl);
19+
// inject to DOM
20+
document.getElementById('delegation__element').insertAdjacentHTML('afterbegin', updatedHTML);
21+
}
1722
}
1823
});
1924
});
2025

21-
// copy button
2226

23-
// QR code gen
27+
function buttonAction(type, id) {
28+
if (type === 'copy') {
29+
// copy button
30+
// 1. get url
31+
// 2, add to clipboard
32+
// 3. show tooltip
33+
// console.log('requested copying');
34+
}
35+
else if (type === 'qrcode') {
36+
// inject template
37+
let updatedHTML;
38+
let html = '<div class="table__qrcodePopup--div" id="qrcode__template"><div class="table__qrcode--popup"><div class="table__qrcode--holder"><img id="table__qrcode" src="%qrcodeLink%" alt="QRCode" /></div><div class="table__closebtn--holder"><button class="table__closebtn--inner" id="close__btn-%num%">Close</button></div></div></div>';
39+
// 1. get short link
40+
let shortUrl = document.getElementById(`shortUrl-${id}`).textContent;
41+
// 2. generate qrcode
42+
QRCode.toDataURL(shortUrl)
43+
.then(qrcodeURL => {
44+
// 3. display popup menu with link
45+
updatedHTML = html.replace('%qrcodeLink%', qrcodeURL);
46+
updatedHTML = updatedHTML.replace('%num%', id);
47+
document.getElementById(`btns-${id}`).insertAdjacentHTML('afterend', updatedHTML);
48+
})
49+
.catch(err => {
50+
// fetch qrcode from http://goqr.me
51+
let qrcode__src = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';
52+
updatedHTML = html.replace('%qrcodeLink%', `${qrcode__src}${shortUrl}`);
53+
document.getElementById(`btns-${id}`).insertAdjacentHTML('afterend', updatedHTML);
54+
});
55+
}
56+
else if (type === 'close__btn') {
57+
let el = document.getElementById('qrcode__template');
58+
el.parentNode.removeChild(el);
59+
}
60+
}
2461

25-
// clear all history
62+
63+
// Clear all history
64+
document.getElementById('table__clearAll--btn').addEventListener('click', () => {
65+
browser.storage.local.get(['count']).then(result => {
66+
let emptyArray = [];
67+
if (result.count > 0) {
68+
// empty array in storage and set count to 0
69+
let count = 0;
70+
browser.storage.local.set({ URL_array: emptyArray, count: count }).then(() => {
71+
// remove children
72+
let el = document.getElementById('delegation__element');
73+
el.parentNode.removeChild(el);
74+
});
75+
}
76+
});
77+
});
78+
79+
80+
// get the delegation id
81+
function getButtonDetails(e) {
82+
let eventId, splitId, type, id;
83+
eventId = e.target.id;
84+
if (eventId) {
85+
splitId = eventId.split('-');
86+
type = splitId[0];
87+
id = parseInt(splitId[1]);
88+
buttonAction(type, id);
89+
}
90+
}
91+
92+
93+
// Button Action (qrcode / copy)
94+
document.getElementById('delegation__element').addEventListener('click', getButtonDetails);

‎src/scripts/options.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,21 @@ document.addEventListener('DOMContentLoaded', () => {
2020
let saveData = () => {
2121
let API_KEY = document.getElementById('api__key--value').value;
2222
let password = document.getElementById('password--value').value;
23+
let emptyArray = [];
2324

2425
// store value locally
25-
browser.storage.local.set({ key: API_KEY, pwd: password });
26-
27-
// Saved Alert
28-
let element = document.querySelector('.saved__alert');
29-
element.classList.toggle('v-none');
30-
setTimeout(() => {
26+
browser.storage.local.set({ key: API_KEY, pwd: password, URL_array: emptyArray, count: 0 }).then(() => {
27+
// Saved Alert
28+
let element = document.querySelector('.saved__alert');
3129
element.classList.toggle('v-none');
32-
// close current tab
33-
browser.tabs.getCurrent().then((tabInfo) => {
34-
browser.tabs.remove(tabInfo.id);
35-
});
36-
}, 1250);
30+
setTimeout(() => {
31+
element.classList.toggle('v-none');
32+
// close current tab
33+
browser.tabs.getCurrent().then((tabInfo) => {
34+
browser.tabs.remove(tabInfo.id);
35+
});
36+
}, 1250);
37+
});
3738
};
3839

3940

‎src/scripts/popup.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import browser from 'webextension-polyfill';
22
import QRCode from 'qrcode';
33

44
let shortUrl;
5-
browser.storage.local.set({ count: 0 });
65

76
document.addEventListener('DOMContentLoaded', () => {
87

@@ -63,11 +62,11 @@ document.addEventListener('DOMContentLoaded', () => {
6362
});
6463
// 4. Add to history
6564
URLs = {
66-
longUrl: `${longUrl}`,
65+
longUrl: `${longUrl}`,
6766
shortUrl: `${shortUrl}`
6867
};
6968
// pass the object
70-
browser.storage.local.get(['count']).then(result => {
69+
browser.storage.local.get(['count']).then(result => {
7170
browser.runtime.sendMessage({ msg: 'store', URLs: URLs, count: result.count });
7271
});
7372
}

0 commit comments

Comments
 (0)