diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index f42544f..6cb6d14 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -21,7 +21,8 @@ export default defineConfig({ zenModeEnabled: true, zenModeCloseButtonPosition: "top-right", zenModeShowSwitchInHeader: true, - zenModeShowHeader: true, + zenModeShowSwitchInHeaderMobile: false, + zenModeShowHeader: false, zenModeShowSidebar: false, zenModeShowTableOfContents: false, zenModeShowFooter: false, diff --git a/packages/starlight-view-modes/components/DeactivationButtons.astro b/packages/starlight-view-modes/components/DeactivationButtons.astro index e60f277..cdaef0b 100644 --- a/packages/starlight-view-modes/components/DeactivationButtons.astro +++ b/packages/starlight-view-modes/components/DeactivationButtons.astro @@ -120,9 +120,9 @@ const zenModePositionStateMachine = new ZenModePositionStateMachine(config, zenModeOff); zenModePositionStateMachine.updatePosition(); - - // (config.zenModeCloseButtonPosition === 'top-right' || config.zenModeCloseButtonPosition === 'bottom-right') ? zenModeOff?.style.setProperty('right', '1rem') : zenModeOff?.style.setProperty('left', '1rem'); - // (config.zenModeCloseButtonPosition === 'top-right' || config.zenModeCloseButtonPosition === 'top-left') ? zenModeOff?.style.setProperty('top', '1rem') : zenModeOff?.style.setProperty('bottom', '1rem'); + window.addEventListener('resize', () => { + zenModePositionStateMachine.updatePosition(); + }); }); \ No newline at end of file diff --git a/packages/starlight-view-modes/components/HeaderButtons.astro b/packages/starlight-view-modes/components/HeaderButtons.astro index 13ea47d..2c914b9 100644 --- a/packages/starlight-view-modes/components/HeaderButtons.astro +++ b/packages/starlight-view-modes/components/HeaderButtons.astro @@ -3,7 +3,7 @@ --starlight-view-modes-animation-duration: 300ms; } - :is(#view-modes-zen-mode-off-header, #view-modes-zen-mode-off-header-mobile) { + #view-modes-zen-mode-off-header { width: 32px; /* height: 32px; */ color: var(--sl-color-text-accent); @@ -46,7 +46,7 @@ } } - body.view-modes-zen-mode :is(#view-modes-zen-mode-off-header, #view-modes-zen-mode-off-header-mobile) > svg { + body.view-modes-zen-mode #view-modes-zen-mode-off-header > svg { transform: rotate(180deg); } @@ -60,7 +60,6 @@ if (config.zenModeShowSwitchInHeader) { const zenMode = sessionStorage.getItem('viewModesZenMode') === 'true'; var headerRightGroup = document.getElementsByClassName('right-group')[0]; - var mobilePreferencesGroup = document.getElementsByClassName('mobile-preferences')[0]; var zenModeOffElementHeader = document.createElement("a"); zenModeOffElementHeader.id = "view-modes-zen-mode-off-header"; @@ -85,39 +84,11 @@ - `; - - - var zenModeOffElementHeaderMobile = document.createElement("a"); - zenModeOffElementHeaderMobile.id = "view-modes-zen-mode-off-header-mobile"; - zenModeOffElementHeaderMobile.title = zenMode ? 'Deactivate Zen Mode' : 'Activate Zen Mode'; - zenModeOffElementHeaderMobile.innerHTML = ` - - - - - - - - - - - - - - `; + `; headerRightGroup?.appendChild(zenModeOffElementHeader); - mobilePreferencesGroup?.appendChild(zenModeOffElementHeaderMobile); const zenModeOffHeader = document.getElementById('view-modes-zen-mode-off-header'); - const zenModeOffHeaderMobile = document.getElementById('view-modes-zen-mode-off-header-mobile'); zenModeOffHeader?.addEventListener('click', () => { if (document.body.classList.contains('view-modes-zen-mode')) { @@ -127,15 +98,6 @@ activateZenMode(); } }); - - zenModeOffHeaderMobile?.addEventListener('click', () => { - if (document.body.classList.contains('view-modes-zen-mode')) { - deactivateZenMode(); - } - else { - activateZenMode(); - } - }); } }); diff --git a/packages/starlight-view-modes/components/MobileViewModes.astro b/packages/starlight-view-modes/components/MobileViewModes.astro index 793675b..47c6f94 100644 --- a/packages/starlight-view-modes/components/MobileViewModes.astro +++ b/packages/starlight-view-modes/components/MobileViewModes.astro @@ -1,110 +1,107 @@ ---- -// import config from 'virtual:starlight-view-modes-config' -// import { onMount } from 'astro:events' ---- - - - - - - - - diff --git a/packages/starlight-view-modes/index.ts b/packages/starlight-view-modes/index.ts index d9ec939..870a51f 100644 --- a/packages/starlight-view-modes/index.ts +++ b/packages/starlight-view-modes/index.ts @@ -34,6 +34,14 @@ const starlightViewModesConfigSchema = z */ zenModeShowSwitchInHeader: z.boolean().default(true), + /** + * This option can enable or disable a button in the header of mobile devices that will switch into Zen Mode or back from Zen Mode. + * + * @type {boolean} + * @default true + */ + zenModeShowSwitchInHeaderMobile: z.boolean().default(true), + /** * Indicates if the header should be shown if the user is actively in Zen mode. * diff --git a/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js b/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js index 04ff7d8..2ff0eac 100644 --- a/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js +++ b/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js @@ -21,6 +21,8 @@ export class ZenModePositionStateMachine { // Wenn Header angezeigt wird, soll der Button immer unten fixiert sein // Wenn Sidebar angezeigt wird, soll der Button immer rechts fixiert sein this.setBottomRightPosition(); + } else if (!window.matchMedia("(min-width: 50rem)").matches) { + this.setBottomPosition(); } else { // Ansonsten normale Positionierungslogik basierend auf der Schaltfläche this.setDynamicPosition(); @@ -33,8 +35,10 @@ export class ZenModePositionStateMachine { this.config.zenModeCloseButtonPosition === "bottom-right" ) { this.zenModeOff?.style.setProperty("right", "1rem"); + this.zenModeOff?.style.removeProperty("left"); } else { this.zenModeOff?.style.setProperty("left", "1rem"); + this.zenModeOff?.style.removeProperty("right"); } if ( @@ -42,8 +46,10 @@ export class ZenModePositionStateMachine { this.config.zenModeCloseButtonPosition === "top-left" ) { this.zenModeOff?.style.setProperty("top", "1rem"); + this.zenModeOff?.style.removeProperty("bottom"); } else { this.zenModeOff?.style.setProperty("bottom", "1rem"); + this.zenModeOff?.style.removeProperty("top"); } } diff --git a/packages/starlight-view-modes/overrides/PageSidebar.astro b/packages/starlight-view-modes/overrides/PageSidebar.astro index 0b5fe66..110d0d7 100644 --- a/packages/starlight-view-modes/overrides/PageSidebar.astro +++ b/packages/starlight-view-modes/overrides/PageSidebar.astro @@ -6,6 +6,7 @@ import TableOfContents from 'virtual:starlight/components/TableOfContents'; import ViewModes from '../components/ViewModes.astro'; import DeactivationButtons from '../components/DeactivationButtons.astro'; import HeaderButtons from '../components/HeaderButtons.astro'; +import MobileViewModes from '../components/MobileViewModes.astro'; --- { @@ -20,6 +21,7 @@ import HeaderButtons from '../components/HeaderButtons.astro'; + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ab5cff..751fe1a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -46,7 +46,7 @@ importers: version: 0.23.4(astro@4.9.3) astro: specifier: ^4.8.7 - version: 4.9.3(sass@1.77.4)(typescript@5.4.2) + version: 4.9.3(sass@1.77.4) sass: specifier: ^1.77.4 version: 1.77.4 @@ -148,7 +148,7 @@ packages: '@astrojs/markdown-remark': 5.1.0 '@mdx-js/mdx': 3.0.1 acorn: 8.11.3 - astro: 4.9.3(sass@1.77.4)(typescript@5.4.2) + astro: 4.9.3(sass@1.77.4) es-module-lexer: 1.5.3 estree-util-visit: 2.0.0 github-slugger: 2.0.0 @@ -187,7 +187,7 @@ packages: '@pagefind/default-ui': 1.1.0 '@types/hast': 3.0.4 '@types/mdast': 4.0.4 - astro: 4.9.3(sass@1.77.4)(typescript@5.4.2) + astro: 4.9.3(sass@1.77.4) astro-expressive-code: 0.35.3(astro@4.9.3) bcp-47: 2.1.0 hast-util-from-html: 2.0.1 @@ -1547,10 +1547,10 @@ packages: peerDependencies: astro: ^4.0.0-beta || ^3.3.0 dependencies: - astro: 4.9.3(sass@1.77.4)(typescript@5.4.2) + astro: 4.9.3(sass@1.77.4) rehype-expressive-code: 0.35.3 - /astro@4.9.3(sass@1.77.4)(typescript@5.4.2): + /astro@4.9.3(sass@1.77.4): resolution: {integrity: sha512-LhiKZMee56GI7+zIt15bXZVX4JSnj4syTrQdkYNgE+Y0udMad0x8RgJGzc2NMOK31e6w/SL+NFSvnt/d1kgs5w==} engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} hasBin: true @@ -1609,7 +1609,7 @@ packages: shiki: 1.6.2 string-width: 7.1.0 strip-ansi: 7.1.0 - tsconfck: 3.1.0(typescript@5.4.2) + tsconfck: 3.1.0 unist-util-visit: 5.0.0 vfile: 6.0.1 vite: 5.2.12(sass@1.77.4) @@ -1925,6 +1925,7 @@ packages: /color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} + requiresBuild: true dependencies: color-name: 1.1.4 @@ -1933,9 +1934,11 @@ packages: /color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + requiresBuild: true /color-string@1.9.1: resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} + requiresBuild: true dependencies: color-name: 1.1.4 simple-swizzle: 0.2.2 @@ -1943,6 +1946,7 @@ packages: /color@4.2.3: resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==} engines: {node: '>=12.5.0'} + requiresBuild: true dependencies: color-convert: 2.0.1 color-string: 1.9.1 @@ -2011,6 +2015,7 @@ packages: /detect-libc@2.0.3: resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==} engines: {node: '>=8'} + requiresBuild: true /deterministic-object-hash@2.0.2: resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==} @@ -2596,6 +2601,7 @@ packages: /is-arrayish@0.3.2: resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} + requiresBuild: true /is-binary-path@2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} @@ -4014,6 +4020,7 @@ packages: /simple-swizzle@0.2.2: resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} + requiresBuild: true dependencies: is-arrayish: 0.3.2 @@ -4229,7 +4236,7 @@ packages: /trough@2.2.0: resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} - /tsconfck@3.1.0(typescript@5.4.2): + /tsconfck@3.1.0: resolution: {integrity: sha512-CMjc5zMnyAjcS9sPLytrbFmj89st2g+JYtY/c02ug4Q+CZaAtCgbyviI0n1YvjZE/pzoc6FbNsINS13DOL1B9w==} engines: {node: ^18 || >=20} hasBin: true @@ -4238,8 +4245,6 @@ packages: peerDependenciesMeta: typescript: optional: true - dependencies: - typescript: 5.4.2 /tsconfck@3.1.0(typescript@5.4.5): resolution: {integrity: sha512-CMjc5zMnyAjcS9sPLytrbFmj89st2g+JYtY/c02ug4Q+CZaAtCgbyviI0n1YvjZE/pzoc6FbNsINS13DOL1B9w==} @@ -4283,6 +4288,7 @@ packages: resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==} engines: {node: '>=14.17'} hasBin: true + dev: true /typescript@5.4.5: resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}