Skip to content

Commit e7dcd50

Browse files
arakilian0arakilian0
committed
Update index2 version
1 parent 788a779 commit e7dcd50

File tree

3 files changed

+81
-23
lines changed

3 files changed

+81
-23
lines changed

‎src/index2.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,41 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Document</title>
5+
<title>SnipX</title>
6+
<!-- SnipX Imports -->
67
<link rel="stylesheet" href="style.css">
8+
<script defer src="main.js"></script>
9+
<!-- Google Fonts Imports -->
10+
<!-- Material Icons and Readex Pro Font -->
711
<link rel="preconnect" href="https://fonts.googleapis.com">
812
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
913
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
1014
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@500&display=swap">
11-
<script defer src="main.js"></script>
1215
</head>
1316
<body>
17+
<!-- Header Component -->
18+
<!-- The header is displayed on every Section/Page -->
1419
<header>
20+
<!-- Dynamically load the title through JS -->
21+
<!-- Give user option to rename extension -->
1522
<a>SnipX</a>
1623
<div>
24+
<!-- Load State and Theme Icons dynamically through JS -->
1725
<span id="state_button" class="material-icons">...</span>
1826
<span id="theme_button" class="material-icons">...</span>
1927
<span id="settings_button" class="material-icons">account_circle</span>
2028
</div>
2129
</header>
2230

31+
<!-- Both Sections/Pages are Hidden by default -->
32+
<!-- Dynamically displayed through JS -->
33+
34+
<!-- Editor Page -->
2335
<section id="editor_page">
2436
<h1>Editor</h1>
2537
</section>
2638

39+
<!-- Settings Page -->
2740
<section id="settings_page">
2841
<h1>Settings</h1>
2942
</section>

‎src/main.js‎

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,20 @@ chrome.tabs.query({
2222
active: true,
2323
currentWindow: true
2424
}, ([currentTab]) => {
25+
// Create an array out of the 'currentTab.url'
2526
let array = currentTab.url.split('')
2627
let newArray = []
28+
// We stop counting 'slashCount' after 3 because we know the
29+
// base domain always lives within 3 slashes: 'https:[/][/]google.com[/]'
2730
let slashCount = 0
31+
// Loop through the entire url
2832
for(let i = 0; i <= array.length; i++) {
29-
newArray.push(array[i])
3033
if(array[i] === '/') slashCount++
3134
if(slashCount === 3) break
35+
// Push valid characters into 'newArray'
36+
newArray.push(array[i])
3237
}
3338
let currentTabURL = newArray.join('')
34-
currentTabURL = currentTabURL.substr(0, currentTabURL.length - 1)
3539
// Insert URL directly into localStorage
3640
localStorage.setItem('SnipxTabURL', currentTabURL)
3741
})
@@ -44,29 +48,67 @@ Object.entries(defaultStorage).forEach(([key, value]) => {
4448
// Load UI using values in localStorage
4549
window.addEventListener('load', (e) => {
4650
// Update STATE render
47-
if(localStorage.getItem('SnipxIsActive') === 'true') {
48-
stateButton.innerText = 'toggle_on'
49-
}
50-
if(localStorage.getItem('SnipxIsActive') === 'false') {
51-
stateButton.innerText = 'toggle_off'
51+
switch(localStorage.getItem('SnipxIsActive')) {
52+
case 'true': stateButton.innerText = 'toggle_on'; break
53+
case 'false': stateButton.innerText = 'toggle_off'; break
5254
}
5355
// Update THEME render
54-
if(localStorage.getItem('SnipxTheme') === 'dark') {
55-
// Display light mode icon
56-
themeButton.innerText = 'light_mode'
57-
// Load dark mode theme
58-
}
59-
if(localStorage.getItem('SnipxTheme') === 'light') {
60-
// Display dark mode icon
61-
themeButton.innerText = 'dark_mode'
62-
// Load light mode theme
56+
switch(localStorage.getItem('SnipxTheme')) {
57+
case 'dark': themeButton.innerText = 'light_mode'; break
58+
case 'light': themeButton.innerText = 'dark_mode'; break
6359
}
6460
// Update SECTION render
65-
if(localStorage.getItem('SnipxPage') === 'editor') {
66-
editorPage.style.display = 'flex'
67-
}
68-
if(localStorage.getItem('SnipxPage') === 'settings') {
69-
settingsPage.style.display = 'flex'
61+
switch(localStorage.getItem('SnipxPage')) {
62+
case 'editor': editorPage.style.display = 'flex'; break
63+
case 'settings': settingsPage.style.display = 'flex'; break
7064
}
65+
}, false)
7166

67+
// Load Event Listeners towards the end of the file
68+
// STATE
69+
stateButton.addEventListener('click', (e) => {
70+
switch(localStorage.getItem('SnipxIsActive')) {
71+
case 'true':
72+
localStorage.setItem('SnipxIsActive', 'false')
73+
stateButton.innerText = 'toggle_off'
74+
// Remove all rendered snippets from the browser
75+
break
76+
case 'false':
77+
localStorage.setItem('SnipxIsActive', 'true')
78+
stateButton.innerText = 'toggle_on'
79+
// Render all snippets to the browser
80+
break
81+
}
82+
}, false)
83+
// THEME
84+
themeButton.addEventListener('click', (e) => {
85+
switch(localStorage.getItem('SnipxTheme')) {
86+
case 'dark':
87+
localStorage.setItem('SnipxTheme', 'light')
88+
themeButton.innerText = 'dark_mode'
89+
// Load light theme
90+
break
91+
case 'light':
92+
localStorage.setItem('SnipxTheme', 'dark')
93+
themeButton.innerText = 'light_mode'
94+
// Load dark theme
95+
break
96+
}
97+
}, false)
98+
// SETTINGS
99+
settingsButton.addEventListener('click', (e) => {
100+
switch(localStorage.getItem('SnipxPage')) {
101+
// Load editor page
102+
case 'editor':
103+
localStorage.setItem('SnipxPage', 'settings')
104+
editorPage.style.display = 'none'
105+
settingsPage.style.display = 'flex'
106+
break
107+
// Load settings page
108+
case 'settings':
109+
localStorage.setItem('SnipxPage', 'editor')
110+
settingsPage.style.display = 'none'
111+
editorPage.style.display = 'flex'
112+
break
113+
}
72114
}, false)

‎src/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
--width: 480px;
1818
--height: 580px;
1919

20+
/* set font variables here */
21+
22+
/* set dark theme variables here */
2023
--color-dark1: green;
2124
}
2225

0 commit comments

Comments
 (0)