Skip to content

Commit 12a5d05

Browse files
Jaredk3ntJaredk3nt
committed
Adding dark mod, adding ability to open urls in new tabs
1 parent 7672a26 commit 12a5d05

File tree

6 files changed

+116
-54
lines changed

6 files changed

+116
-54
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>StartOS</title>
77
<link rel="stylesheet" href="styles.css" />
88
</head>
9-
<body class="vapor">
9+
<body class="dark">
1010
<div class="toolbar">
1111
<div class="toolbar-section">
1212
<div class="menu-button">

‎src/utils/config.js

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,51 +19,55 @@ function saveConfig() {
1919
}
2020

2121
function updateConfig() {
22-
const wallpaper = document.getElementById("wallpaper-input").value;
22+
const wallpaper = document.getElementById('wallpaper-input').value;
2323
const internalWebpages = document
24-
.getElementById("internal-webpages-input")
25-
.classList.contains("active");
24+
.getElementById('internal-webpages-input')
25+
.classList.contains('active');
26+
const newTab = document
27+
.getElementById('tab-webpages-input')
28+
.classList.contains('active');
2629
config = {
2730
...config,
2831
wallpaper,
2932
internalWebpages,
33+
newTab
3034
};
3135
applyConfig();
3236
saveConfig();
3337
Object.keys(windows).forEach(redrawWindow);
3438
}
3539

3640
function loadWallpaper() {
37-
const el = document.getElementById("desktop");
41+
const el = document.getElementById('desktop');
3842
if (config.wallpaper) {
3943
if (
4044
// TODO: replace conditions with regex
41-
config.wallpaper.startsWith("http") ||
42-
config.wallpaper.startsWith("https")
45+
config.wallpaper.startsWith('http') ||
46+
config.wallpaper.startsWith('https')
4347
) {
44-
el.style["background-image"] = `url("${config.wallpaper}")`;
48+
el.style['background-image'] = `url("${config.wallpaper}")`;
4549
}
4650

4751
if (
48-
config.wallpaper.startsWith("rgb") ||
49-
config.wallpaper.startsWith("rgba") ||
50-
config.wallpaper.startsWith("#")
52+
config.wallpaper.startsWith('rgb') ||
53+
config.wallpaper.startsWith('rgba') ||
54+
config.wallpaper.startsWith('#')
5155
) {
52-
el.style["background-color"] = config.wallpaper;
56+
el.style['background-color'] = config.wallpaper;
5357
}
5458
} else {
55-
el.style["background-color"] = null;
56-
el.style["background-image"] = null;
59+
el.style['background-color'] = null;
60+
el.style['background-image'] = null;
5761
}
5862
}
5963

60-
function toggleInternalWebpagesButton() {
61-
const el = document.getElementById("internal-webpages-input");
62-
if (el.classList.contains("active")) {
63-
el.innerText = "External";
64-
return el.classList.remove("active");
64+
function toggleButton(id, labels) {
65+
const el = document.getElementById(id);
66+
if (el.classList.contains('active')) {
67+
el.innerText = labels[1];
68+
return el.classList.remove('active');
6569
}
6670

67-
el.innerText = "Internal";
68-
el.classList.add("active");
71+
el.innerText = labels[0];
72+
el.classList.add('active');
6973
}

‎src/utils/dragable.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,34 @@ function enableDragable(handle, target, container) {
99
const containerRect = containerEl.getBoundingClientRect();
1010

1111
switch (e.type) {
12-
case "mousedown":
12+
case 'mousedown':
1313
xOffset = e.clientX - rect.left + containerRect.left;
1414
yOffset = e.clientY - rect.top;
1515
break;
16-
case "touchstart":
16+
case 'touchstart':
1717
xOffset = e.targetTouches[0].clientX - rect.left + containerRect.left;
1818
yOffset = e.targetTouches[0].clientY - rect.top; //+ containerRect.top;
1919
break;
2020
default:
2121
break;
2222
}
2323

24-
el.style.position = "absolute";
24+
el.style.position = 'absolute';
2525
// el.classList.add('active-window'); // TODO: handle window stacking
26-
window.addEventListener("mousemove", drag, true);
27-
window.addEventListener("touchmove", drag, true);
26+
window.addEventListener('mousemove', drag, true);
27+
window.addEventListener('touchmove', drag, true);
2828
window.onmouseup = dragEnd;
2929
}
3030

3131
function drag(e) {
3232
let x;
3333
let y;
3434
switch (e.type) {
35-
case "mousemove":
35+
case 'mousemove':
3636
x = e.clientX - xOffset;
3737
y = e.clientY - yOffset;
3838
break;
39-
case "touchmove":
39+
case 'touchmove':
4040
x = e.targetTouches[0].clientX - xOffset;
4141
y = e.targetTouches[0].clientY - yOffset;
4242
break;
@@ -49,12 +49,12 @@ function enableDragable(handle, target, container) {
4949
const containerEl = document.getElementById(container);
5050
const containerRect = containerEl.getBoundingClientRect();
5151

52-
if (x < containerRect.left) x = containerRect.left;
53-
if (y < containerRect.top) y = containerRect.top;
5452
if (x > containerRect.right - rect.width)
5553
x = containerRect.right - rect.width;
5654
if (y > containerRect.bottom - rect.height)
5755
y = containerRect.bottom - rect.height;
56+
if (x < containerRect.left) x = containerRect.left;
57+
if (y < containerRect.top) y = containerRect.top;
5858

5959
if (windows[target]) {
6060
windows[target].location = { x, y };
@@ -66,8 +66,8 @@ function enableDragable(handle, target, container) {
6666
}
6767

6868
function dragEnd() {
69-
window.removeEventListener("mousemove", drag, true);
70-
window.removeEventListener("touchmove", drag, true);
69+
window.removeEventListener('mousemove', drag, true);
70+
window.removeEventListener('touchmove', drag, true);
7171
window.onmouseup = null;
7272
}
7373

@@ -89,13 +89,13 @@ function enableDragable(handle, target, container) {
8989
const el = document.getElementById(target);
9090
// el.removeEventListener("resize", handleResize);
9191
const handleEl = document.getElementById(handle);
92-
handleEl.removeEventListener("mousedown", dragStart, true);
93-
handleEl.removeEventListener("touchstart", dragStart, true);
92+
handleEl.removeEventListener('mousedown', dragStart, true);
93+
handleEl.removeEventListener('touchstart', dragStart, true);
9494
}
9595

9696
const handleEl = document.getElementById(handle);
97-
handleEl.addEventListener("mousedown", dragStart, true);
98-
handleEl.addEventListener("touchstart", dragStart, true);
97+
handleEl.addEventListener('mousedown', dragStart, true);
98+
handleEl.addEventListener('touchstart', dragStart, true);
9999

100100
const el = document.getElementById(target);
101101
new ResizeObserver(handleResize).observe(el);

‎src/utils/windows.js

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,21 +62,7 @@ function loadWindows() {
6262
return acc;
6363
}, zIndex);
6464

65-
Object.keys(windows).forEach((w) => {
66-
if (windows[w].bookmarks && Array.isArray(windows[w].bookmarks)) {
67-
return createBookmarkWindow(w);
68-
}
69-
switch (windows[w].type) {
70-
case 'note':
71-
return createNoteWindow(w);
72-
case 'image':
73-
return createImageWindow(w);
74-
case 'video':
75-
return createVideoWindow(w);
76-
default:
77-
return createWebpageWindow(w);
78-
}
79-
});
65+
Object.keys(windows).forEach(drawWindow);
8066
}
8167

8268
function saveWindows() {
@@ -90,10 +76,23 @@ function redrawWindow(id) {
9076
windows[id].cleanup();
9177
}
9278
document.getElementById(id).remove();
79+
drawWindow(id);
80+
}
81+
82+
function drawWindow(id) {
9383
if (windows[id].bookmarks && Array.isArray(windows[id].bookmarks)) {
9484
return createBookmarkWindow(id);
9585
}
96-
return createWebpageWindow(id);
86+
switch (windows[id].type) {
87+
case 'note':
88+
return createNoteWindow(id);
89+
case 'image':
90+
return createImageWindow(id);
91+
case 'video':
92+
return createVideoWindow(id);
93+
default:
94+
return createWebpageWindow(id);
95+
}
9796
}
9897

9998
function updateNoteText(id) {

‎src/windows.js

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,19 +185,40 @@ function createConfigWindow() {
185185
<button
186186
id="internal-webpages-input"
187187
class="button ${config.internalWebpages ? 'active' : ''}"
188-
onclick="toggleInternalWebpagesButton()"
188+
onclick="toggleButton('internal-webpages-input', ['Internal', 'External'])"
189189
>
190190
${config.internalWebpages ? 'Interal' : 'External'}
191191
</button>
192192
</div>
193193
194+
<div class="input-field">
195+
<label>Display Webpages In a New Tab?</label>
196+
<button
197+
id="tab-webpages-input"
198+
class="button ${config.newTab ? 'active' : ''}"
199+
onclick="toggleButton('tab-webpages-input', ['New Tab', 'Same Window'])"
200+
>
201+
${config.newTab ? 'New Tab' : 'Same Window'}
202+
</button>
203+
</div>
204+
205+
206+
194207
<div class="button-field">
195208
<button class="button" onclick="updateConfig()">SAVE</button>
196209
</div>
197210
</div>`
198211
);
199212
}
200213

214+
/* <div class="input-field">
215+
<label>Theme</label>
216+
<select id="theme-input" name="theme-input">
217+
<option value="default">Default</option>
218+
<option value="dark">Dark</option>
219+
</select>
220+
</div> */
221+
201222
function createBookmarkWindow(id, options = {}) {
202223
createWindow(
203224
id,
@@ -232,7 +253,7 @@ function bookmarkContent(id, bookmarks) {
232253
<div class="flex-end">
233254
<button class="close-button" onclick='removeBookmark("${id}", "${idx}")'></button>
234255
</div>
235-
<a href="${b.href}">
256+
<a href="${b.href}" ${config.newTab ? 'target="_blank"': ''}>
236257
<div class="bookmark-icon"></div>
237258
<p class="bookmark-title">${b.label}</p>
238259
</a>

‎styles.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,32 @@
88
--window-border: 1px solid black;
99
--window-shadow: 4px 4px rgba(0, 0, 0, 0.3);
1010

11+
--input-bg: white;
12+
1113
--hover-bg: rgba(0, 0, 0, 0.1);
1214

1315
--font-color: black;
1416
--font-invert-color: white;
1517
--font-family: "Alata", sans-serif;
1618
}
1719

20+
body.dark {
21+
--default-bg: #40b4c4;
22+
23+
--window-bg: #383a3b;
24+
--window-toolbar-bg: var(--window-bg);
25+
--window-border: 1px solid black;
26+
--window-shadow: 4px 4px rgba(0, 0, 0, 0.3);
27+
28+
--input-bg: var(--window-bg);
29+
30+
--hover-bg: rgba(0, 0, 0, 0.1);
31+
32+
--font-color: white;
33+
--font-invert-color: black;
34+
--font-family: "Alata", sans-serif;
35+
}
36+
1837
body.vapor {
1938
--default-bg: #9b94ff;
2039

@@ -75,6 +94,7 @@ body {
7594
margin: 0px;
7695
font-weight: 400;
7796
margin-right: 8px;
97+
color: var(--font-color);
7898
}
7999

80100
.toolbar-button {
@@ -96,6 +116,7 @@ body {
96116

97117
#toolbar-time {
98118
border-left: var(--window-border);
119+
color: var(--font-color);
99120
}
100121
#toolbar-time:hover {
101122
cursor: default;
@@ -129,6 +150,7 @@ body {
129150

130151
.window-toolbar-title {
131152
font-size: 14px;
153+
color: var(--font-color);
132154
}
133155

134156
.window-toolbar-lines {
@@ -211,6 +233,7 @@ body {
211233

212234
.bookmark a {
213235
text-decoration: none;
236+
color: var(--font-color);
214237
}
215238

216239
.bookmark .close-button {
@@ -259,6 +282,7 @@ body {
259282
.toolbar-text {
260283
font-size: 11px;
261284
margin: 0px;
285+
color: var(--font-color);
262286
}
263287

264288
.padded-content {
@@ -270,13 +294,18 @@ body {
270294
display: flex;
271295
justify-content: space-between;
272296
margin-bottom: 4px;
297+
color: var(--font-color);
273298
}
274299
.input-field label {
275300
font-size: 13px;
301+
color: var(--font-color);
276302
}
277303
.input-field input {
278304
width: 70%;
279305
border: var(--window-border);
306+
background-color: var(--input-bg);
307+
color: var(--font-color);
308+
padding: .25em;
280309
}
281310

282311
.button-field {
@@ -294,6 +323,10 @@ body {
294323
padding: 4px 8px;
295324
min-width: 70px;
296325
margin-left: 8px;
326+
color: var(--font-color);
327+
}
328+
.button:active {
329+
background-color: rgba(0, 0, 0, 0.1);
297330
}
298331
.button.active {
299332
background-color: var(--font-color);
@@ -323,12 +356,16 @@ body {
323356
height: 100%;
324357
padding: 1em;
325358
overflow: auto;
359+
background-color: var(--input-bg);
360+
border: none;
361+
color: var(--font-color);
326362
}
327363

328364
.menu-button {
329365
position: relative;
330366
display: flex;
331367
align-items: center;
368+
color: var(--font-color);
332369
}
333370

334371
.menu {
@@ -350,6 +387,7 @@ body {
350387
.menu li {
351388
padding: 4px 8px;
352389
font-size: 12px;
390+
color: var(--font-color);
353391
}
354392

355393
.menu li:hover {

0 commit comments

Comments
 (0)