Skip to content

Commit 91a4cf2

Browse files
arakilian0arakilian0
committed
Add Editor action and event handlers
1 parent e7dcd50 commit 91a4cf2

File tree

3 files changed

+145
-63
lines changed

3 files changed

+145
-63
lines changed

‎src/index2.html‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
<body>
1717
<!-- Header Component -->
1818
<!-- The header is displayed on every Section/Page -->
19-
<header>
19+
<header id="header">
2020
<!-- Dynamically load the title through JS -->
2121
<!-- Give user option to rename extension -->
22-
<a>SnipX</a>
22+
<a id="header_title">SnipX</a>
2323
<div>
2424
<!-- Load State and Theme Icons dynamically through JS -->
2525
<span id="state_button" class="material-icons">...</span>
@@ -32,9 +32,29 @@
3232
<!-- Dynamically displayed through JS -->
3333

3434
<!-- Editor Page -->
35-
<section id="editor_page">
36-
<h1>Editor</h1>
37-
</section>
35+
<div id="editor_page_container">
36+
<div id="editor_page">
37+
<div id="editor_menu">
38+
<div id="editor_actions">
39+
<select value="css" id="editor_type">
40+
<option value="css">css</option>
41+
<option value="js">js</option>
42+
</select>
43+
<div>
44+
<span id="editor_render" class="material-icons">...</span>
45+
<span id="editor_lock" class="material-icons">...</span>
46+
</div>
47+
<a id="editor_taburl">...</a>
48+
</div>
49+
<div id="editor_events">
50+
<a id="editor_clear">Clear</a>
51+
<a id="editor_save">Save</a>
52+
</div>
53+
</div>
54+
</div>
55+
<textarea id="editor_css">/* CSS Editor */</textarea>
56+
<textarea id="editor_js">// JS Editor</textarea>
57+
</div>
3858

3959
<!-- Settings Page -->
4060
<section id="settings_page">

‎src/main.js‎

Lines changed: 90 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ const stateButton = document.getElementById('state_button')
33
const themeButton = document.getElementById('theme_button')
44
const settingsButton = document.getElementById('settings_button')
55

6+
// Editor Actions
7+
const editorType = document.getElementById('editor_type')
8+
const editorCSS = document.getElementById('editor_css')
9+
const editorJS = document.getElementById('editor_js')
10+
611
// Snipx Pages
712
const editorPage = document.getElementById('editor_page')
813
const settingsPage = document.getElementById('settings_page')
@@ -47,6 +52,8 @@ Object.entries(defaultStorage).forEach(([key, value]) => {
4752

4853
// Load UI using values in localStorage
4954
window.addEventListener('load', (e) => {
55+
// HEADER LOAD
56+
// .................................
5057
// Update STATE render
5158
switch(localStorage.getItem('SnipxIsActive')) {
5259
case 'true': stateButton.innerText = 'toggle_on'; break
@@ -62,53 +69,90 @@ window.addEventListener('load', (e) => {
6269
case 'editor': editorPage.style.display = 'flex'; break
6370
case 'settings': settingsPage.style.display = 'flex'; break
6471
}
65-
}, false)
66-
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
72+
// EDITOR LOAD
73+
// ................................
74+
// Update EDITOR render
75+
switch(localStorage.getItem('SnipxEditor')) {
76+
case 'css':
77+
// console.log(editorType.childNodes)
78+
editorType.childNodes.forEach(n => {
79+
if(n.nodeName === 'OPTION' && n.value === 'css') {
80+
n.setAttribute('selected', null)
81+
editorCSS.style.display = 'flex'
82+
}
83+
})
7584
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
85+
case 'js':
86+
editorType.childNodes.forEach(n => {
87+
if(n.nodeName === 'OPTION' && n.value === 'js') {
88+
n.setAttribute('selected', null)
89+
editorJS.style.display = 'flex'
90+
}
91+
})
9092
break
91-
case 'light':
92-
localStorage.setItem('SnipxTheme', 'dark')
93-
themeButton.innerText = 'light_mode'
94-
// Load dark theme
95-
break
9693
}
94+
// HEADER UPDATE
95+
// .................................
96+
// Load Event Listeners towards the end of the file
97+
// STATE
98+
stateButton.addEventListener('click', (e) => {
99+
switch(localStorage.getItem('SnipxIsActive')) {
100+
case 'true':
101+
localStorage.setItem('SnipxIsActive', 'false')
102+
stateButton.innerText = 'toggle_off'
103+
// Remove all rendered snippets from the browser
104+
break
105+
case 'false':
106+
localStorage.setItem('SnipxIsActive', 'true')
107+
stateButton.innerText = 'toggle_on'
108+
// Render all snippets to the browser
109+
break
110+
}
111+
}, false)
112+
// THEME
113+
themeButton.addEventListener('click', (e) => {
114+
switch(localStorage.getItem('SnipxTheme')) {
115+
case 'dark':
116+
localStorage.setItem('SnipxTheme', 'light')
117+
themeButton.innerText = 'dark_mode'
118+
// Load light theme
119+
break
120+
case 'light':
121+
localStorage.setItem('SnipxTheme', 'dark')
122+
themeButton.innerText = 'light_mode'
123+
// Load dark theme
124+
break
125+
}
126+
}, false)
127+
// SETTINGS
128+
settingsButton.addEventListener('click', (e) => {
129+
switch(localStorage.getItem('SnipxPage')) {
130+
// Load editor page
131+
case 'editor':
132+
localStorage.setItem('SnipxPage', 'settings')
133+
editorPage.style.display = 'none'
134+
editorCSS.style.display = 'none'
135+
editorJS.style.display = 'none'
136+
settingsPage.style.display = 'flex'
137+
break
138+
// Load settings page
139+
case 'settings':
140+
localStorage.setItem('SnipxPage', 'editor')
141+
switch(localStorage.getItem('SnipxEditor')) {
142+
case 'css': editorCSS.style.display = 'block'; break
143+
case 'js': editorJS.style.display = 'block'; break
144+
}
145+
settingsPage.style.display = 'none'
146+
editorPage.style.display = 'flex'
147+
break
148+
}
149+
}, false)
150+
// Editor UPDATE
151+
// .................................
152+
// TYPE
153+
editorType.addEventListener('change', (e) => {
154+
localStorage.setItem('SnipxEditor', editorType.value)
155+
// Change editor type
156+
}, false)
97157
}, 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-
}
114-
}, false)
158+

‎src/style.css‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
background: inherit;
1212
list-style-type: none;
1313
}
14-
14+
.material-icons {
15+
color: white;
16+
}
1517
/* Custom properties */
1618
:root {
1719
--width: 480px;
@@ -20,7 +22,7 @@
2022
/* set font variables here */
2123

2224
/* set dark theme variables here */
23-
--color-dark1: green;
25+
--color-dark1: gray;
2426
}
2527

2628
/* Main Styles */
@@ -31,23 +33,39 @@ body {
3133
}
3234

3335
/* Header */
34-
header, header div {
36+
#header,
37+
#header div,
38+
#editor_menu,
39+
#editor_actions {
3540
display: flex;
3641
align-items: center;
3742
}
38-
header {
39-
background: yellow;
43+
#header,
44+
#editor_menu {
4045
justify-content: space-between;
4146
}
42-
header a {
43-
font-size: 20px;
44-
color: red;
47+
#header {
48+
background: black;
4549
}
46-
header div {
47-
justify-content: center;
50+
#header_title {
51+
font-size: 20px;
52+
color: blue;
4853
}
49-
5054
/* Sections */
51-
section {
55+
section,
56+
textarea {
5257
display: none;
58+
}
59+
#editor_menu {
60+
width: 100%;
61+
background: red;
62+
}
63+
#editor_actions {
64+
outline: 1px solid lime;
65+
}
66+
#editor_events {
67+
outline: 1px solid lime;
68+
}
69+
#editor_page {
70+
/* display: block !important; */
5371
}

0 commit comments

Comments
 (0)