Accords-Library-Archive
/
astro.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove turbo

This commit is contained in:
DrMint 2023-09-22 13:24:48 +02:00
parent 04caf4c60b
commit 8234208102
8 changed files with 72 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/js/turbo.es2017-umd.js
View File

File diff suppressed because one or more lines are too long

50
src/pages/_components/AppLayout/components/MenuPanel.astro
View File

@ -29,7 +29,11 @@ const { isReduced = false } = Astro.props;
<p id="title" class:list={{ hidden: isReduced }}>Accord’s Library</p>
<div id="buttons" class:list={["when-js", { reduced: isReduced }]}>
<ReduceToggleButton icon={isReduced ? "material-symbols:chevron-right": "material-symbols:chevron-left"} />
<ReduceToggleButton
icon={isReduced
? "material-symbols:chevron-right"
: "material-symbols:chevron-left"}
/>
<ThemeToggleButton />
</div>
@ -203,28 +207,24 @@ const { isReduced = false } = Astro.props;
<script>
import tippy, { createSingleton } from "tippy.js";
import { onLoad } from "utils/turbo";
onLoad(() => {
createSingleton(
tippy("#menu-panel > .when-reduced > [data-tippy-template]", {
content: (reference) => {
const templateQuery = reference.getAttribute("data-tippy-template")!;
const template = reference.querySelector(templateQuery)!;
const container = document.createElement("div");
container.append(template.cloneNode(true));
container.style.fontSize = "90%";
return container;
},
}),
{
allowHTML: true,
placement: "right",
delay: 250,
moveTransition: "transform 0.2s ease",
maxWidth: "18rem",
inertia: true,
}
);
});
createSingleton(
tippy("#menu-panel > .when-reduced > [data-tippy-template]", {
content: (reference) => {
const templateQuery = reference.getAttribute("data-tippy-template")!;
const template = reference.querySelector(templateQuery)!;
const container = document.createElement("div");
container.append(template.cloneNode(true));
container.style.fontSize = "90%";
return container;
},
}),
{
allowHTML: true,
placement: "right",
delay: 250,
moveTransition: "transform 0.2s ease",
maxWidth: "18rem",
inertia: true,
}
);
</script>

39
src/pages/_components/AppLayout/components/Navbar.astro
View File

@ -70,28 +70,25 @@ const { title, showSubPanel } = Astro.props;
<script>
import { Elementos } from "utils/Elementos";
import { observable } from "utils/micro-observables";
import { onLoad } from "utils/turbo";
onLoad(() => {
const isMenuPanelOpened = observable(false);
const menuPanel = new Elementos("#menu-panel");
const menuPanelToggle = new Elementos("#toggle-menu-panel");
const isMenuPanelOpened = observable(false);
const menuPanel = new Elementos("#menu-panel");
const menuPanelToggle = new Elementos("#toggle-menu-panel");
menuPanelToggle.onClick(() => {
isMenuPanelOpened.update((current) => !current);
isSubPanelOpened.set(false);
});
menuPanel.setClass("opened", isMenuPanelOpened);
menuPanelToggle.setClass("on", isMenuPanelOpened);
const isSubPanelOpened = observable(false);
const subPanel = new Elementos("#sub-panel");
const subPanelToggle = new Elementos("#toggle-sub-panel");
subPanelToggle.onClick(() => {
isSubPanelOpened.update((current) => !current);
isMenuPanelOpened.set(false);
});
subPanel.setClass("opened", isSubPanelOpened);
subPanelToggle.setClass("on", isSubPanelOpened);
menuPanelToggle.onClick(() => {
isMenuPanelOpened.update((current) => !current);
isSubPanelOpened.set(false);
});
menuPanel.setClass("opened", isMenuPanelOpened);
menuPanelToggle.setClass("on", isMenuPanelOpened);
const isSubPanelOpened = observable(false);
const subPanel = new Elementos("#sub-panel");
const subPanelToggle = new Elementos("#toggle-sub-panel");
subPanelToggle.onClick(() => {
isSubPanelOpened.update((current) => !current);
isMenuPanelOpened.set(false);
});
subPanel.setClass("opened", isSubPanelOpened);
subPanelToggle.setClass("on", isSubPanelOpened);
</script>

24
src/pages/_components/AppLayout/components/ReduceToggleButton.astro
View File

@ -24,22 +24,18 @@ const { icon } = Astro.props;
import { Elementos } from "utils/Elementos";
import { CookieNames } from "utils/cookies";
import { observableWithPersistence } from "utils/micro-observables";
import { onLoad } from "utils/turbo";
onLoad(() => {
const toggleReducedButton = new Elementos("#reduce-toggle");
const menuPanel = new Elementos("#menu-panel");
const toggleReducedButton = new Elementos("#reduce-toggle");
const menuPanel = new Elementos("#menu-panel");
const isReduced = observableWithPersistence(
CookieNames.MENU_PANEL_REDUCED,
false
);
const isReduced = observableWithPersistence(
CookieNames.MENU_PANEL_REDUCED,
false
);
toggleReducedButton.onClick(() => {
isReduced.update((oldValue) => !oldValue);
Turbo.cache.clear();
});
menuPanel.setClass("reduced", isReduced);
toggleReducedButton.onClick(() => {
isReduced.update((oldValue) => !oldValue);
});
menuPanel.setClass("reduced", isReduced);
</script>

47
src/pages/_components/AppLayout/components/ThemeToggleButton.astro
View File

@ -50,38 +50,29 @@ const themeColors = parseCookie<string>(
import { Elementos } from "utils/Elementos";
import { CookieNames } from "utils/cookies";
import { observableWithPersistence } from "utils/micro-observables";
import { onLoad } from "utils/turbo";
onLoad(() => {
const body = new Elementos("body");
const themeToggleButton = new Elementos("#theme-toggle");
const body = new Elementos("body");
const themeToggleButton = new Elementos("#theme-toggle");
const themeColor = observableWithPersistence(
CookieNames.THEME_COLOR,
"theme-color-light"
);
const themeColor = observableWithPersistence(
CookieNames.THEME_COLOR,
"theme-color-light"
);
const isDarkMode = themeColor.select(
(value) => value === "theme-color-dark"
);
const isDarkMode = themeColor.select((value) => value === "theme-color-dark");
themeToggleButton.onClick(() => {
themeColor.update((oldValue) =>
oldValue === "theme-color-light"
? "theme-color-dark"
: "theme-color-light"
);
Turbo.cache.clear();
});
themeToggleButton.setClass(
{ ifFalse: "light", ifTrue: "dark" },
isDarkMode
);
body.setClass(
{ ifFalse: "theme-color-light", ifTrue: "theme-color-dark" },
isDarkMode
themeToggleButton.onClick(() => {
themeColor.update((oldValue) =>
oldValue === "theme-color-light"
? "theme-color-dark"
: "theme-color-light"
);
});
themeToggleButton.setClass({ ifFalse: "light", ifTrue: "dark" }, isDarkMode);
body.setClass(
{ ifFalse: "theme-color-light", ifTrue: "theme-color-dark" },
isDarkMode
);
</script>

19
src/pages/_components/Html.astro
View File

@ -22,7 +22,6 @@ const themeColors = parseCookie(
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
<script is:inline src="/js/turbo.es2017-umd.js" async defer></script>
<link href="/css/sanitize.min.css" rel="stylesheet" />
<link href="/css/tippy.css" rel="stylesheet" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@ -43,10 +42,6 @@ const themeColors = parseCookie(
</body>
</html>
<script>
Turbo.setProgressBarDelay(0);
</script>
{
/* ------------------------------------------- CSS -------------------------------------------- */
}
@ -389,20 +384,6 @@ const themeColors = parseCookie(
}
}
.turbo-progress-bar {
position: fixed;
display: block;
top: 0;
left: 0;
height: 5px;
background-color: #b07751;
z-index: 2147483647;
transition:
width 1000ms ease-out,
opacity 500ms 500ms ease-in;
transform: translate3d(0, 0, 0);
}
.when-no-js {
display: none;
}

7
src/typings/turbo.d.ts vendored
View File

@ -1,7 +0,0 @@
// https://turbo.hotwired.dev/reference/drive
declare namespace Turbo {
const cache: {
clear: () => void;
};
const setProgressBarDelay: (delayInMs: number) => void;
}

2
src/utils/turbo.ts
View File

@ -1,2 +0,0 @@
export const onLoad = (callback: () => void) =>
document.documentElement.addEventListener("turbo:load", callback);