Skip to content

Commit 0542497

Browse files
XengShiXengShi
authored
Merge pull request #47 from raphaelritz/main
Bug fixes and new features for shortcuts.
2 parents e05f6c3 + 78861f7 commit 0542497

File tree

3 files changed

+274
-68
lines changed

3 files changed

+274
-68
lines changed

‎index.html

+15-1
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,21 @@
188188
<!---End of centerDiv--->
189189

190190
<!-- ------shortcuts------------------ -->
191-
<div class="shortcutsContainer" id="shortcutsContainer"></div>
191+
<div id="shortcuts-section">
192+
<div class="unfoldContainer">
193+
<button id="unfoldShortcutsBtn">
194+
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="220 -710 520 710" width="20px">
195+
<path d="M480-525 316-361q-11 11-25.5 11T265-361q-11-11-11-25.5t11-25.5l190-190q11-11 25-11t25 11l190 190q11 11 11 25t-11 25q-11 11-25.5 11T644-362L480-525Z"/>
196+
</svg>
197+
</button>
198+
</div>
199+
<div class="wrapper">
200+
<div id="flexMonitor"></div>
201+
<div id="defaultMonitor"></div>
202+
<div class="shortcutsContainer" id="shortcutsContainer"></div>
203+
</div>
204+
</div>
205+
192206

193207
<!-- --------end of shortcuts------------------ -->
194208

‎script.js

+127-39
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ const radioButtons = document.querySelectorAll('.colorPlate');
206206
const themeStorageKey = 'selectedTheme';
207207

208208
const applySelectedTheme = (colorValue) => {
209-
if (colorValue != "blue") {
209+
if (colorValue !== "blue") {
210210
document.documentElement.style.setProperty('--bg-color-blue', `var(--bg-color-${colorValue})`);
211211
document.documentElement.style.setProperty('--accentLightTint-blue', `var(--accentLightTint-${colorValue})`);
212212
document.documentElement.style.setProperty('--darkerColor-blue', `var(--darkerColor-${colorValue})`);
@@ -306,6 +306,7 @@ const overviewPage = document.getElementById("overviewPage");
306306
const shortcutEditPage = document.getElementById("shortcutEditPage");
307307

308308
function pageReset() {
309+
optCont.scrollTop = 0;
309310
overviewPage.style.transform = "translateX(0)";
310311
overviewPage.style.opacity = "1";
311312
overviewPage.style.display = "block";
@@ -315,39 +316,53 @@ function pageReset() {
315316
}
316317

317318
const closeMenuBar = () => {
319+
requestAnimationFrame(() => {
320+
optCont.style.opacity = "0"
321+
optCont.style.transform = "translateX(100%)"
322+
});
318323
setTimeout(() => {
319-
menuBar.style.opacity = 0
320-
menuCont.style.transform = "translateX(100%)"
324+
requestAnimationFrame(() => {
325+
menuBar.style.opacity = "0"
326+
menuCont.style.transform = "translateX(100%)"
327+
});
321328
}, 14);
322-
setTimeout(() => {
323-
optCont.style.opacity = 1
324-
optCont.style.transform = "translateX(100%)"
325-
}, 7);
326329
setTimeout(() => {
327330
menuBar.style.display = "none";
328331
}, 555);
329332
}
330-
menuButton.addEventListener("click", () => {
331-
if (menuBar.style.display === 'none' || menuBar.style.display === '') {
333+
334+
const openMenuBar = () => {
335+
setTimeout(() => {
332336
menuBar.style.display = "block";
333-
pageReset()
334-
setTimeout(() => {
335-
menuBar.style.opacity = 1
337+
pageReset();
338+
});
339+
setTimeout(() => {
340+
requestAnimationFrame(() => {
341+
menuBar.style.opacity = "1"
336342
menuCont.style.transform = "translateX(0px)"
337-
}, 7);
338-
setTimeout(() => {
339-
optCont.style.opacity = 1
343+
});
344+
}, 7);
345+
setTimeout(() => {
346+
requestAnimationFrame(() => {
347+
optCont.style.opacity = "1"
340348
optCont.style.transform = "translateX(0px)"
341-
}, 11);
349+
});
350+
}, 11);
351+
}
352+
353+
menuButton.addEventListener("click", () => {
354+
if (menuBar.style.display === 'none' || menuBar.style.display === '') {
355+
openMenuBar();
342356
} else {
343-
menuBar.style.display = "none";
357+
closeMenuBar();
358+
}
359+
});
360+
361+
// ----------Hiding Menu Bar--------
362+
menuBar.addEventListener("click", (event) => {
363+
if (event.target === menuBar) {
364+
closeMenuBar()
344365
}
345-
// ----------Hiding Menu Bar--------
346-
menuBar.addEventListener("click", (event) => {
347-
if (event.target === menuBar) {
348-
closeMenuBar()
349-
}
350-
});
351366
});
352367

353368
// Hiding Menu Bar when user click on close button --------
@@ -362,15 +377,19 @@ document.addEventListener("DOMContentLoaded", function () {
362377
/* ------ Constants ------ */
363378

364379
// maximum number of shortcuts allowed
365-
const MAX_SHORTCUTS_ALLOWED = 20;
380+
const MAX_SHORTCUTS_ALLOWED = 50;
366381

367382
// minimum number of shortcuts allowed
368383
const MIN_SHORTCUTS_ALLOWED = 1;
369384

370-
// The placeholder shortcut info
371-
const PLACEHOLDER_SHORTCUT_NAME = "Placeholder";
385+
// The new shortcut placeholder info
386+
const PLACEHOLDER_SHORTCUT_NAME = "New shortcut";
372387
const PLACEHOLDER_SHORTCUT_URL = "https://github.com/XengShi/materialYouNewTab";
373388

389+
// The placeholder for an empty shortcut
390+
const SHORTCUT_NAME_PLACEHOLDER = "Shortcut Name";
391+
const SHORTCUT_URL_PLACEHOLDER = "Shortcut URL";
392+
374393
const SHORTCUT_PRESET_NAMES = ["Youtube", "Gmail", "Telegram", "WhatsApp", "Instagram", "Twitter"];
375394
const SHORTCUT_PRESET_URLS_AND_LOGOS = new Map([["youtube.com", `
376395
<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
@@ -434,10 +453,9 @@ document.addEventListener("DOMContentLoaded", function () {
434453
}`;
435454

436455

437-
438456
/* ------ Element selectors ------ */
439457

440-
const shortcuts = document.getElementById("shortcutsContainer");
458+
const shortcuts = document.getElementById("shortcuts-section");
441459
const aiToolsCont = document.getElementById("aiToolsCont");
442460
const shortcutsCheckbox = document.getElementById("shortcutsCheckbox");
443461
const shortcutEditField = document.getElementById("shortcutEditField");
@@ -452,7 +470,9 @@ document.addEventListener("DOMContentLoaded", function () {
452470
const newShortcutButton = document.getElementById("newShortcutButton");
453471
const resetShortcutsButton = document.getElementById("resetButton");
454472
const iconStyle = document.getElementById("iconStyle");
455-
473+
const flexMonitor = document.getElementById("flexMonitor"); // monitors whether shortcuts have flex-wrap flexed
474+
const defaultHeight = document.getElementById("defaultMonitor").clientHeight; // used to compare to previous element
475+
const unfoldShortcutsButton = document.getElementById("unfoldShortcutsBtn");
456476

457477
/* ------ Helper functions for saving and loading states ------ */
458478

@@ -579,9 +599,11 @@ document.addEventListener("DOMContentLoaded", function () {
579599

580600
const shortcutName = document.createElement("input");
581601
shortcutName.className = "shortcutName";
602+
shortcutName.placeholder = SHORTCUT_NAME_PLACEHOLDER;
582603
shortcutName.value = name;
583604
const shortcutUrl = document.createElement("input");
584605
shortcutUrl.className = "URL";
606+
shortcutUrl.placeholder = SHORTCUT_URL_PLACEHOLDER;
585607
shortcutUrl.value = url;
586608

587609
attachEventListenersToInputs([shortcutName, shortcutUrl]);
@@ -816,7 +838,6 @@ document.addEventListener("DOMContentLoaded", function () {
816838
for (const url of urls) {
817839
const img = new Image();
818840
img.referrerPolicy = "no-referrer"; // Don't send referrer data
819-
img.crossOrigin = "anonymous"; // Don't send credentials
820841
img.src = url;
821842

822843
img.onload = () => {
@@ -933,19 +954,67 @@ document.addEventListener("DOMContentLoaded", function () {
933954

934955
resetShortcutsButton.addEventListener("click", () => resetShortcuts());
935956

957+
// Create a ResizeObserver to watch the height changes of the shortcut container and see if it is wrapped
958+
new ResizeObserver(e => {
959+
if (shortcutsContainer.classList.contains("showBackground")) {
960+
openShortcutDrawer()
961+
}
962+
const height = e[0].contentRect.height;
963+
if (height === defaultHeight) {
964+
setTimeout(() => {
965+
unfoldShortcutsButton.style.display = "none";
966+
});
967+
} else {
968+
setTimeout(() => {
969+
unfoldShortcutsButton.style.display = "block";
970+
});
971+
}
972+
}).observe(flexMonitor);
973+
974+
975+
/* ------ Page Transitions & Animations ------ */
936976

937-
/* ------ Page Transitions ------ */
977+
/**
978+
* This function sets the state of the shortcut drawer to open.
979+
*
980+
* This means it can be used both to open and to update the shortcut drawer.
981+
*/
982+
function openShortcutDrawer() {
983+
const translationDistance = flexMonitor.clientHeight - defaultHeight;
984+
requestAnimationFrame(() => {
985+
shortcutsContainer.style.transform = `translateY(-${translationDistance}px)`;
986+
shortcutsContainer.classList.add("showBackground");
987+
unfoldShortcutsButton.style.transform = "rotate(180deg)";
988+
unfoldShortcutsButton.closest(".unfoldContainer").style.transform = `translateY(-${translationDistance}px)`;
989+
});
990+
}
991+
992+
/**
993+
* This function closes the shortcut drawer
994+
*/
995+
function resetShortcutDrawer() {
996+
requestAnimationFrame(() => {
997+
shortcutsContainer.style.transform = "translateY(0)";
998+
shortcutsContainer.classList.remove("showBackground");
999+
unfoldShortcutsButton.style.transform = "rotate(0)";
1000+
unfoldShortcutsButton.closest(".unfoldContainer").style.transform = "translateY(0)";
1001+
});
1002+
}
9381003

9391004
// When clicked, open new page by sliding it in from the right.
9401005
shortcutEditButton.onclick = () => {
941-
shortcutEditPage.style.display = "block"
9421006
setTimeout(() => {
1007+
shortcutEditPage.style.display = "block"
1008+
});
1009+
requestAnimationFrame(() => {
9431010
overviewPage.style.transform = "translateX(-120%)"
9441011
overviewPage.style.opacity = "0"
9451012
});
9461013
setTimeout(() => {
947-
shortcutEditPage.style.transform = "translateX(0)"
948-
shortcutEditPage.style.opacity = "1"
1014+
requestAnimationFrame(() => {
1015+
shortcutEditPage.style.transform = "translateX(0)"
1016+
shortcutEditPage.style.opacity = "1"
1017+
});
9491018
}, 50);
9501019
setTimeout(() => {
9511020
overviewPage.style.display = "none";
@@ -954,20 +1023,39 @@ document.addEventListener("DOMContentLoaded", function () {
9541023

9551024
// Close page by sliding it away to the right.
9561025
backButton.onclick = () => {
957-
overviewPage.style.display = "block"
958-
setTimeout(() => {
959-
overviewPage.style.transform = "translateX(0)";
960-
overviewPage.style.opacity = "1";
961-
}, 50);
9621026
setTimeout(() => {
1027+
overviewPage.style.display = "block"
1028+
});
1029+
requestAnimationFrame(() => {
9631030
shortcutEditPage.style.transform = "translateX(120%)";
9641031
shortcutEditPage.style.opacity = "0";
9651032
});
1033+
setTimeout(() => {
1034+
requestAnimationFrame(() => {
1035+
overviewPage.style.transform = "translateX(0)";
1036+
overviewPage.style.opacity = "1";
1037+
});
1038+
}, 50);
9661039
setTimeout(() => {
9671040
shortcutEditPage.style.display = "none";
9681041
}, 650);
9691042
}
9701043

1044+
// Shift up shortcuts
1045+
unfoldShortcutsButton.onclick = (e) => {
1046+
if (!shortcutsContainer.classList.contains("showBackground")) {
1047+
e.stopPropagation();
1048+
openShortcutDrawer();
1049+
}
1050+
}
1051+
1052+
document.addEventListener('click', function (event) {
1053+
// Check if the clicked element is not the shortcut container, yet the container is unfolded
1054+
if (shortcutsContainer.classList.contains("showBackground") && !shortcutsContainer.contains(event.target)) {
1055+
resetShortcutDrawer();
1056+
}
1057+
});
1058+
9711059

9721060
/* ------ Loading ------ */
9731061

0 commit comments

Comments
 (0)