Skip to content

Commit dc976b9

Browse files
abhijithvijayanabhijithvijayan
committed
history UI + implementation(barebone)
1 parent c1faa43 commit dc976b9

File tree

12 files changed

+352
-46
lines changed

12 files changed

+352
-46
lines changed

‎src/assets/delete.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/history.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/history.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>History: Kutt</title>
9+
<link rel="stylesheet" href="css/history.css" />
10+
</head>
11+
12+
<body>
13+
<section id="history">
14+
<div class="container history__content--holder">
15+
<div class="table__content--holder">
16+
<h2 class="table__content--title">Recent shortened links.</h2>
17+
<table class="table__content--wrapper" id="URL_table">
18+
<thead class="table__content--head">
19+
<tr class="table__head--holder">
20+
<th class="table__head--longURL">
21+
Original URL
22+
</th>
23+
<th class="table__head--shortURL">
24+
Short URL
25+
</th>
26+
</tr>
27+
</thead>
28+
<tbody class="table__content--body">
29+
<tr class="table__body--holder">
30+
<td class="table__body--original">
31+
<a href="#" class="table__body--originalURL" target="_blank" rel="noopener">https://google.com</a>
32+
</td>
33+
<td class="table__body--shortened">
34+
<div class="table__body--shortenBody">
35+
<button class="table__body--copyBtn" title="Copy">
36+
<img id="" class="selectDisable icon__img" src="assets/copy.svg" alt="copy" />
37+
</button>
38+
<a href="#" class="table__body--shortenURL" target="_blank" rel="noopener">https://kutt.it/abc</a>
39+
</div>
40+
</td>
41+
<td class="table__body--functionBtns">
42+
<div class="table__body--btnHolder">
43+
<button class="table__body--qrcode" title="QR Code">
44+
<img id="" class="selectDisable icon__img" src="assets/qrcode.svg" alt="QR Code" />
45+
</button>
46+
<button class="table__body--delete" title="Delete">
47+
<img id="" class="selectDisable icon__img" src="assets/delete.svg" alt="Delete" />
48+
</button>
49+
</div>
50+
</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
</div>
55+
</div>
56+
</section>
57+
58+
<script src="js/history.js"></script>
59+
</body>
60+
61+
</html>

‎src/popup.html‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,52 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<title>Kutt</title>
9-
<link rel="stylesheet" href="css/popup.css" />
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Kutt</title>
9+
<link rel="stylesheet" href="css/popup.css" />
1010
</head>
1111

1212
<body>
13-
<section id="home">
14-
<div class="container">
15-
<nav class="navbar">
16-
<ul class="navbar__main">
17-
<li class="logo__content--holder">
18-
<img class="main__logo selectDisable" src="assets/logo.png">
19-
</li>
20-
<li class="options__content-holder" id="options__content-holder" title="Options">
21-
<a href="options.html" target="_blank" rel="noopener">
22-
<img class="settings__logo selectDisable" src="assets/settings.svg"></a>
23-
</li>
24-
</ul>
25-
</nav>
26-
<div class="content__holder">
27-
<div class="url__content--holder text-center">
28-
<h4 id="url__content-inner">Shortening...</h4>
29-
<ul class="buttons__content--holder d-none">
30-
<li class="copy__content--holder" id="button__copy--holder" title="Copy">
31-
<img id="button__copy" class="selectDisable" src="assets/copy.svg" alt="copy" />
32-
</li>
33-
<li class="qrbtn__content--holder" id="button__qrcode--holder" title="QR code">
34-
<img id="button__qrcode" class="selectDisable" src="assets/qrcode.svg" alt="QR Code" />
35-
</li>
36-
</ul>
13+
<section id="home">
14+
<div class="container">
15+
<nav class="navbar">
16+
<ul class="navbar__main">
17+
<li class="logo__content--holder">
18+
<img class="main__logo selectDisable" src="assets/logo.png">
19+
</li>
20+
<li class="options__content-holder" id="options__content-holder" title="History">
21+
<a href="history.html" target="_blank" rel="noopener">
22+
<img class="settings__logo selectDisable" src="assets/history.svg"></a>
23+
</li>
24+
<li class="options__content-holder" id="options__content-holder" title="Options">
25+
<a href="options.html" target="_blank" rel="noopener">
26+
<img class="settings__logo selectDisable" src="assets/settings.svg"></a>
27+
</li>
28+
</ul>
29+
</nav>
30+
<div class="content__holder">
31+
<div class="url__content--holder text-center">
32+
<h4 id="url__content-inner">Shortening...</h4>
33+
<ul class="buttons__content--holder d-none">
34+
<li class="copy__content--holder" id="button__copy--holder" title="Copy">
35+
<img id="button__copy" class="selectDisable" src="assets/copy.svg" alt="copy" />
36+
</li>
37+
<li class="qrbtn__content--holder" id="button__qrcode--holder" title="QR code">
38+
<img id="button__qrcode" class="selectDisable" src="assets/qrcode.svg" alt="QR Code" />
39+
</li>
40+
</ul>
41+
</div>
42+
<p class="copy__alert text-center d-none">Copied!!!</p>
43+
<div class="qrcode__content--holder text-center d-none">
44+
<img id="qr_code" src="#" alt="QRCode" />
45+
</div>
46+
</div>
3747
</div>
38-
<p class="copy__alert text-center d-none">Copied!!!</p>
39-
<div class="qrcode__content--holder text-center d-none">
40-
<img id="qr_code" src="#" alt="QRCode" />
41-
</div>
42-
</div>
43-
</div>
44-
</section>
48+
</section>
4549

46-
<script src="js/popup.js"></script>
50+
<script src="js/popup.js"></script>
4751
</body>
4852

4953
</html>

‎src/scripts/background.js‎

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

4+
let count = 0, sample = [];
5+
46
// Shorten url
57
async function getShortURL(API_key, URLtoShorten, password) {
68
const kutt = new Kutt();
@@ -30,11 +32,34 @@ async function getShortURL(API_key, URLtoShorten, password) {
3032

3133
// Calling function
3234
browser.runtime.onMessage.addListener(async (request, sender, response) => {
33-
if (request.msg == 'start') {
35+
// get the url shorten request from popup.js
36+
if (request.msg === 'start') {
3437
// consume the promise
3538
return getShortURL(request.API_key, request.pageUrl, request.password)
3639
.then(shortLink => {
3740
return shortLink;
3841
});
3942
}
43+
// store urls to history
44+
if (request.msg === 'store') {
45+
// get the object
46+
console.log(request.URLs);
47+
console.log(count);
48+
// sample.push(request.URLs);
49+
if (count >= 3) {
50+
// delete first element
51+
sample.shift();
52+
--count;
53+
browser.storage.local.set({ count: count });
54+
}
55+
if (count < 3) {
56+
sample.push(request.URLs);
57+
browser.storage.local.set({ URL_array: sample, count: ++count });
58+
console.log(sample);
59+
}
60+
// store upto 10
61+
// console.log(count);
62+
}
63+
64+
4065
});

‎src/scripts/history.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import browser from 'webextension-polyfill';
2+
3+
// get longURL, shortURL
4+
browser.storage.local.get(['URL_array', 'count']).then(result => {
5+
console.log(result.URL_array);
6+
});
7+
8+
// update DOM
9+
10+
// copy button
11+
12+
// QR code gen
13+
14+
// clear all history

‎src/scripts/options.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ let saveData = () => {
2222
let password = document.getElementById('password--value').value;
2323

2424
// store value locally
25-
browser.storage.local.set({ key: API_KEY, pwd: password }).then(() => { });
25+
browser.storage.local.set({ key: API_KEY, pwd: password });
2626

2727
// Saved Alert
2828
let element = document.querySelector('.saved__alert');

‎src/scripts/popup.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import browser from 'webextension-polyfill';
22
import QRCode from 'qrcode';
33

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

67
document.addEventListener('DOMContentLoaded', () => {
78

89
// 1. Initialize
910
browser.tabs.query({ 'active': true, 'lastFocusedWindow': true }).then(tabs => {
1011

1112
let longUrl, start, qrcode__src = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';
12-
let API_key, password;
13+
let API_key, password, URLs;
1314

1415
longUrl = tabs[0].url;
1516
start = longUrl.substr(0, 4);
@@ -60,6 +61,15 @@ document.addEventListener('DOMContentLoaded', () => {
6061
// fetch qrcode from http://goqr.me
6162
document.getElementById('qr_code').src = `${qrcode__src}${shortUrl}`;
6263
});
64+
// 4. Add to history
65+
URLs = {
66+
longUrl: `${longUrl}`,
67+
shortUrl: `${shortUrl}`
68+
};
69+
// pass the object
70+
browser.storage.local.get(['count']).then(result => {
71+
browser.runtime.sendMessage({ msg: 'store', URLs: URLs, count: result.count });
72+
});
6373
}
6474
else {
6575
updateContent('Invalid Response!');

‎src/styles/_reset.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ ul {
1515
list-style-type: none;
1616
}
1717

18-
*{
18+
* {
1919
margin: 0;
2020
padding: 0;
2121
border: 0;

‎src/styles/_variables.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,14 @@ $font-weight-bold: 600;
3939
}
4040

4141
.selectDisable {
42-
-webkit-user-select: none;
43-
-khtml-user-select: none;
44-
-moz-user-select: none;
45-
-o-user-select: none;
4642
user-select: none;
4743
}
4844

4945
body {
5046
font-family: $font-nunito;
47+
}
48+
49+
.icon__img {
50+
width: 12px;
51+
height: 12px;
5152
}

0 commit comments

Comments
 (0)