diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 2a7b5a2..986ac2f 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -27,8 +27,10 @@ export default defineConfig({ zenModeShowFooter: true, zenModeShowSwitchInHeader: true, zenModeShowSwitchInHeaderMobile: true, - presentationModeEnabled: false, - presentationModeControlButtonPosition: "middle-right", + presentationModeEnabled: true, + presentationModeCloseButtonPosition: "bottom-right", + presentationModeShowSwitchInHeader: true, + presentationModeShowSwitchInHeaderMobile: true, }), starlightImageZoom(), ], diff --git a/packages/starlight-view-modes/components/DeactivationButtons.astro b/packages/starlight-view-modes/components/DeactivationButtons.astro index bcf1484..b04b6d0 100644 --- a/packages/starlight-view-modes/components/DeactivationButtons.astro +++ b/packages/starlight-view-modes/components/DeactivationButtons.astro @@ -31,7 +31,7 @@ transform: translateY(0.1em); } -body:not(.view-modes-zen-mode) :is(#view-modes-zen-mode-off) { +body:not(.view-modes-zen-mode) #view-modes-zen-mode-off { display: none; } @@ -48,6 +48,7 @@ body.view-modes-zen-mode :is(#view-modes-zen-mode-off, #view-modes-presentation- import config from 'virtual:starlight-view-modes-config'; import { deactivateZenMode, deactivatePresentationMode } from '../libs/SharedMethods'; import { ZenModePositionStateMachine } from '../libs/ZenModePositionStateMachine'; + import { PresentationModePositionStateMachine } from '../libs/PresentationModePositionStateMachine'; document.addEventListener('DOMContentLoaded', () => { var body = document.body; @@ -78,25 +79,17 @@ body.view-modes-zen-mode :is(#view-modes-zen-mode-off, #view-modes-presentation- var presentationModeOffElement = document.createElement("a"); presentationModeOffElement.id = "view-modes-presentation-mode-off"; presentationModeOffElement.innerHTML = ` - - - - - - - - - - - - - - + + + + + + `; body.insertBefore(zenModeOffElement, body.firstChild); - // body.insertBefore(presentationModeOffElement, body.firstChild); + body.insertBefore(presentationModeOffElement, body.firstChild); const zenModeOff = document.getElementById('view-modes-zen-mode-off'); const presentationModeOff = document.getElementById('view-modes-presentation-mode-off'); @@ -112,8 +105,12 @@ body.view-modes-zen-mode :is(#view-modes-zen-mode-off, #view-modes-presentation- const zenModePositionStateMachine = new ZenModePositionStateMachine(config, zenModeOff); zenModePositionStateMachine.updatePosition(); + const presentationModePositionStateMachine = new PresentationModePositionStateMachine(config, presentationModeOff); + presentationModePositionStateMachine.updatePosition(); + window.addEventListener('resize', () => { zenModePositionStateMachine.updatePosition(); + presentationModePositionStateMachine.updatePosition(); }); }); diff --git a/packages/starlight-view-modes/components/HeaderButtons.astro b/packages/starlight-view-modes/components/HeaderButtons.astro index 337eff6..4ba12c7 100644 --- a/packages/starlight-view-modes/components/HeaderButtons.astro +++ b/packages/starlight-view-modes/components/HeaderButtons.astro @@ -3,22 +3,20 @@ --starlight-view-modes-animation-duration: 300ms; } -#view-modes-zen-mode-off-header { - width: 32px; - /* height: 32px; */ +#view-modes-header-div { color: var(--sl-color-text-accent); display: flex; justify-content: center; align-items: center; gap: 1rem; - align-items: center; + } -#view-modes-zen-mode-off-header::before { +#view-modes-header-div::before { content: ""; height: 2rem; border-inline-end: 1px solid var(--sl-color-gray-5); } -#view-modes-zen-mode-off-header > span { +#view-modes-header-div > span { position: absolute; width: 1px; height: 1px; @@ -29,13 +27,16 @@ white-space: nowrap; border-width: 0; } -#view-modes-zen-mode-off-header > svg { +:is(#view-modes-zen-mode-off-header, #view-modes-presentation-mode-off-header) > svg { font-size: var(--sl-icon-size, 1em); width: 1em; height: 1em; transition: transform var(--starlight-view-modes-animation-duration) cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + justify-content: center; + align-items: center; } -#view-modes-zen-mode-off-header > svg:hover { +:is(#view-modes-zen-mode-off-header, #view-modes-presentation-mode-off-header) > svg:hover { opacity: 0.66; } @@ -46,23 +47,35 @@ body.view-modes-zen-mode #view-modes-zen-mode-off-header > svg { body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:hover { transform: rotate(180deg); } + +#view-modes-presentation-mode-off-header > svg:hover { + transform: rotate(180deg); +} `; + headerRightGroup?.appendChild(modeElementsHeader); + } + if (config.zenModeShowSwitchInHeader) { const zenMode = sessionStorage.getItem('viewModesZenMode') === 'true'; - var headerRightGroup = document.getElementsByClassName('right-group')[0]; + var headerDiv = document.getElementById('view-modes-header-div'); var zenModeOffElementHeader = document.createElement("a"); zenModeOffElementHeader.id = "view-modes-zen-mode-off-header"; zenModeOffElementHeader.title = zenMode ? 'Deactivate Zen Mode' : 'Activate Zen Mode'; zenModeOffElementHeader.innerHTML = ` - @@ -83,7 +96,7 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h `; - headerRightGroup?.appendChild(zenModeOffElementHeader); + headerDiv?.appendChild(zenModeOffElementHeader); const zenModeOffHeader = document.getElementById('view-modes-zen-mode-off-header'); @@ -96,6 +109,37 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h } }); } + + if (config.presentationModeShowSwitchInHeader) { + const presentationMode = sessionStorage.getItem('viewModesPresentationMode') === 'true'; + var headerDiv = document.getElementById('view-modes-header-div'); + + var presentationModeOffElementHeader = document.createElement("a"); + presentationModeOffElementHeader.id = "view-modes-presentation-mode-off-header"; + presentationModeOffElementHeader.title = presentationMode ? 'Deactivate Presentation Mode' : 'Activate Presentation Mode'; + presentationModeOffElementHeader.innerHTML = ` + + + + + + + + `; + + headerDiv?.appendChild(presentationModeOffElementHeader); + + const presentationModeOffHeader = document.getElementById('view-modes-presentation-mode-off-header'); + + presentationModeOffHeader?.addEventListener('click', () => { + if (document.body.classList.contains('view-modes-presentation-mode')) { + deactivatePresentationMode(); + } + else { + activatePresentationMode(); + } + }); + } }); \ No newline at end of file diff --git a/packages/starlight-view-modes/components/MobileViewModes.astro b/packages/starlight-view-modes/components/MobileViewModes.astro index 9119358..6e3ef22 100644 --- a/packages/starlight-view-modes/components/MobileViewModes.astro +++ b/packages/starlight-view-modes/components/MobileViewModes.astro @@ -3,22 +3,20 @@ --starlight-view-modes-animation-duration: 300ms; } -#view-modes-zen-mode-off-header-mobile { - width: 32px; - /* height: 32px; */ +#view-modes-header-div-mobile { color: var(--sl-color-text-accent); display: flex; justify-content: center; align-items: center; gap: 1rem; - align-items: center; + } -#view-modes-zen-mode-off-header-mobile::before { +#view-modes-header-div-mobile::before { content: ""; height: 2rem; border-inline-end: 1px solid var(--sl-color-gray-5); } -#view-modes-zen-mode-off-header-mobile > span { +#view-modes-header-div-mobile > span { position: absolute; width: 1px; height: 1px; @@ -29,72 +27,123 @@ white-space: nowrap; border-width: 0; } -#view-modes-zen-mode-off-header-mobile > svg { +:is(#view-modes-zen-mode-off-header-mobile, #view-modes-presentation-mode-off-header-mobile) > svg { font-size: var(--sl-icon-size, 1em); width: 1em; height: 1em; transition: transform var(--starlight-view-modes-animation-duration) cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + justify-content: center; + align-items: center; } -#view-modes-zen-mode-off-header-mobile > svg:hover { +:is(#view-modes-zen-mode-off-header-mobile, #view-modes-presentation-mode-off-header-mobile) > svg:hover { opacity: 0.66; } body.view-modes-zen-mode #view-modes-zen-mode-off-header-mobile > svg { transform: rotate(180deg); } - +body.view-modes-presentation-mode #view-modes-presentation-mode-off-header-mobile > svg { + transform: rotate(180deg); +} + + + \ No newline at end of file diff --git a/packages/starlight-view-modes/components/ViewModes.astro b/packages/starlight-view-modes/components/ViewModes.astro index dff9d75..b4bef32 100644 --- a/packages/starlight-view-modes/components/ViewModes.astro +++ b/packages/starlight-view-modes/components/ViewModes.astro @@ -26,15 +26,14 @@
  • - - - - - - - - - Activate Presentation Mode + + + + + + + + Activate Presentation Mode
    • @@ -142,18 +141,26 @@ body.view-modes-zen-mode.view-modes-zen-mode-footer-disabled footer { padding-left: 0.25rem; } -body.view-modes-zen-mode-table-of-contents-disabled :is(#view-modes-zen-mode-on, #view-modes-presentation-mode-on):hover > svg { +body.view-modes-zen-mode-table-of-contents-disabled #view-modes-zen-mode-on:hover > svg { + transform: rotate(180deg) translateY(-0.15em); +} + +body.view-modes-zen-mode.view-modes-zen-mode-table-of-contents-enabled #view-modes-zen-mode-on > svg { transform: rotate(180deg) translateY(-0.15em); } -body.view-modes-zen-mode.view-modes-zen-mode-table-of-contents-enabled :is(#view-modes-zen-mode-on, #view-modes-presentation-mode-on) > svg { +body.view-modes-presentation-mode-table-of-contents-disabled #view-modes-presentation-mode-on:hover > svg { + transform: rotate(180deg) translateY(-0.15em); +} + +body.view-modes-presentation-mode.view-modes-zen-mode-table-of-contents-enabled #view-modes-presentation-mode-on > svg { transform: rotate(180deg) translateY(-0.15em); }