Skip to content

Commit

Permalink
basic presentation enabling functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@trueberryless
trueberryless committed Jun 15, 2024
1 parent e047e87 commit 0d5a20f
Show file tree
Hide file tree
Showing 9 changed files with 360 additions and 115 deletions.
6 changes: 4 additions & 2 deletions docs/astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
],
Expand Down
29 changes: 13 additions & 16 deletions packages/starlight-view-modes/components/DeactivationButtons.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
Expand Down Expand Up @@ -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 = `
<svg width="24" height="24" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.6665 66.6665H630" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
<path d="M300 350L343.097 306.903C354.207 295.792 359.763 290.237 366.667 290.237C373.57 290.237 379.127 295.792 390.237 306.903L409.763 326.429C415.768 332.434 429.15 344.74 433 347.5" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
<path d="M400 700V566.667" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
<path d="M333.333 733.333L400 700" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
<path d="M466.667 733.333L400 700" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
<mask id="mask0_528_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="646" y="172" width="53" height="97">
<path d="M647.885 215.778C646.281 213.789 646.435 210.911 648.242 209.104L683.723 173.623C686.873 170.473 692.258 172.704 692.258 177.158L692.258 235.961C692.258 236.319 692.297 236.676 692.373 237.026L697.995 262.827C699.118 267.981 692.529 271.136 689.218 267.03L647.885 215.778Z" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_528_2)">
<path d="M667.333 67V200.333" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
</g>
<path d="M133.333 66.6665V350C133.333 452.136 133.333 503.206 166.807 534.936C181.595 548.954 200.364 556.779 226 561.147M666.667 333.333V350C666.667 452.136 666.667 503.206 633.193 534.936C599.72 566.666 545.843 566.666 438.097 566.666H361.903C353.803 566.666 346.006 566.666 338.5 566.653" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
<path d="M85 715.68L715.68 84.9999" stroke="currentColor" stroke-width="50" stroke-linecap="round"/>
<svg width="24" height="24" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_531_2)">
<path d="M250 18.75C250 8.39466 258.407 -0.0731739 268.733 0.702651C316.495 4.29108 362.368 21.5428 400.782 50.5891C444.196 83.4159 475.711 129.514 490.541 181.882C505.371 234.251 502.706 290.028 482.95 340.744C463.194 391.459 427.427 434.342 381.081 462.88C334.735 491.417 280.342 504.051 226.162 498.861C171.982 493.671 120.976 470.942 80.8905 434.125C40.8046 397.308 13.8288 348.415 4.05982 294.871C-4.58405 247.494 0.661715 198.766 18.9584 154.502C22.9142 144.932 34.2602 141.237 43.5069 145.898V145.898C52.7536 150.56 56.3863 161.811 52.5575 171.433C37.8633 208.359 33.7728 248.798 40.9508 288.141C49.2544 333.653 72.1839 375.212 106.257 406.506C140.33 437.801 183.685 457.12 229.738 461.532C275.79 465.943 322.025 455.205 361.419 430.948C400.813 406.691 431.215 370.24 448.007 327.132C464.8 284.024 467.065 236.613 454.46 192.1C441.854 147.587 415.067 108.404 378.165 80.5007C346.265 56.3801 308.314 41.8284 268.727 38.3265C258.412 37.4141 250 29.1053 250 18.75V18.75Z" fill="currentColor"/>
<path d="M250 93.7504C250 83.3948 258.419 74.8961 268.715 76.0035C295.097 78.841 320.575 87.6517 343.173 101.866C371.081 119.419 393.462 144.498 407.739 174.215C422.016 203.931 427.609 237.077 423.873 269.833C420.136 302.589 407.223 333.623 386.62 359.361C366.018 385.099 338.564 404.494 307.42 415.312C276.277 426.129 242.712 427.929 210.59 420.505C178.468 413.08 149.097 396.733 125.86 373.346C107.043 354.408 92.8676 331.477 84.3227 306.357C80.9879 296.553 87.4372 286.478 97.5415 284.21V284.21C107.646 281.943 117.555 288.362 121.175 298.065C127.987 316.321 138.628 332.991 152.462 346.914C170.72 365.29 193.797 378.134 219.035 383.967C244.273 389.801 270.646 388.386 295.116 379.887C319.585 371.388 341.156 356.149 357.344 335.926C373.532 315.704 383.678 291.32 386.613 265.583C389.549 239.846 385.155 213.804 373.937 190.455C362.719 167.106 345.134 147.401 323.207 133.61C306.593 123.159 287.997 116.426 268.693 113.777C258.433 112.369 250 104.106 250 93.7504V93.7504Z" fill="currentColor"/>
<!-- <path d="M250 168.75C250 158.395 258.467 149.822 268.641 151.753C285.876 155.023 302.063 162.794 315.486 174.425C333.666 190.178 345.559 211.957 348.982 235.768C352.406 259.579 347.131 283.827 334.125 304.064C324.523 319.006 311.181 331.022 295.566 339.016C286.348 343.734 275.808 337.895 272.891 327.959V327.959C269.974 318.023 275.914 307.81 284.544 302.086C291.702 297.338 297.862 291.129 302.578 283.79C310.707 271.142 314.004 255.987 311.864 241.105C309.724 226.223 302.291 212.611 290.929 202.766C284.336 197.053 276.676 192.83 268.47 190.292C258.578 187.231 250 179.105 250 168.75V168.75Z" fill="currentColor"/> -->
</g>
</svg>
`;

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');
Expand All @@ -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();
});
});
</script>
Expand Down
68 changes: 56 additions & 12 deletions packages/starlight-view-modes/components/HeaderButtons.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}

Expand All @@ -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);
}
</style>


<script>
import config from 'virtual:starlight-view-modes-config';
import { activateZenMode, deactivateZenMode } from '../libs/SharedMethods';
import { activateZenMode, deactivateZenMode, activatePresentationMode, deactivatePresentationMode } from '../libs/SharedMethods';

document.addEventListener('DOMContentLoaded', () => {
if (config.zenModeShowSwitchInHeader || config.presentationModeShowSwitchInHeader) {
var headerRightGroup = document.getElementsByClassName('right-group')[0];

var modeElementsHeader = document.createElement("div");
modeElementsHeader.id = "view-modes-header-div";
modeElementsHeader.innerHTML = `<span></span>`;
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 = `
<span></span>
<svg fill="currentColor" height="16" width="16" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<g>
Expand All @@ -83,7 +96,7 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h
</svg>
`;

headerRightGroup?.appendChild(zenModeOffElementHeader);
headerDiv?.appendChild(zenModeOffElementHeader);

const zenModeOffHeader = document.getElementById('view-modes-zen-mode-off-header');

Expand All @@ -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 = `
<svg width="16" height="16" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_531_2)">
<path d="M250 18.75C250 8.39466 258.407 -0.0731739 268.733 0.702651C316.495 4.29108 362.368 21.5428 400.782 50.5891C444.196 83.4159 475.711 129.514 490.541 181.882C505.371 234.251 502.706 290.028 482.95 340.744C463.194 391.459 427.427 434.342 381.081 462.88C334.735 491.417 280.342 504.051 226.162 498.861C171.982 493.671 120.976 470.942 80.8905 434.125C40.8046 397.308 13.8288 348.415 4.05982 294.871C-4.58405 247.494 0.661715 198.766 18.9584 154.502C22.9142 144.932 34.2602 141.237 43.5069 145.898V145.898C52.7536 150.56 56.3863 161.811 52.5575 171.433C37.8633 208.359 33.7728 248.798 40.9508 288.141C49.2544 333.653 72.1839 375.212 106.257 406.506C140.33 437.801 183.685 457.12 229.738 461.532C275.79 465.943 322.025 455.205 361.419 430.948C400.813 406.691 431.215 370.24 448.007 327.132C464.8 284.024 467.065 236.613 454.46 192.1C441.854 147.587 415.067 108.404 378.165 80.5007C346.265 56.3801 308.314 41.8284 268.727 38.3265C258.412 37.4141 250 29.1053 250 18.75V18.75Z" fill="currentColor"/>
<path d="M250 93.7504C250 83.3948 258.419 74.8961 268.715 76.0035C295.097 78.841 320.575 87.6517 343.173 101.866C371.081 119.419 393.462 144.498 407.739 174.215C422.016 203.931 427.609 237.077 423.873 269.833C420.136 302.589 407.223 333.623 386.62 359.361C366.018 385.099 338.564 404.494 307.42 415.312C276.277 426.129 242.712 427.929 210.59 420.505C178.468 413.08 149.097 396.733 125.86 373.346C107.043 354.408 92.8676 331.477 84.3227 306.357C80.9879 296.553 87.4372 286.478 97.5415 284.21V284.21C107.646 281.943 117.555 288.362 121.175 298.065C127.987 316.321 138.628 332.991 152.462 346.914C170.72 365.29 193.797 378.134 219.035 383.967C244.273 389.801 270.646 388.386 295.116 379.887C319.585 371.388 341.156 356.149 357.344 335.926C373.532 315.704 383.678 291.32 386.613 265.583C389.549 239.846 385.155 213.804 373.937 190.455C362.719 167.106 345.134 147.401 323.207 133.61C306.593 123.159 287.997 116.426 268.693 113.777C258.433 112.369 250 104.106 250 93.7504V93.7504Z" fill="currentColor"/>
<!-- <path d="M250 168.75C250 158.395 258.467 149.822 268.641 151.753C285.876 155.023 302.063 162.794 315.486 174.425C333.666 190.178 345.559 211.957 348.982 235.768C352.406 259.579 347.131 283.827 334.125 304.064C324.523 319.006 311.181 331.022 295.566 339.016C286.348 343.734 275.808 337.895 272.891 327.959V327.959C269.974 318.023 275.914 307.81 284.544 302.086C291.702 297.338 297.862 291.129 302.578 283.79C310.707 271.142 314.004 255.987 311.864 241.105C309.724 226.223 302.291 212.611 290.929 202.766C284.336 197.053 276.676 192.83 268.47 190.292C258.578 187.231 250 179.105 250 168.75V168.75Z" fill="currentColor"/> -->
</g>
</svg>
`;

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();
}
});
}
});
</script>

Loading

0 comments on commit 0d5a20f

Please sign in to comment.