Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collapsable side panels #10

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

Collapsable side panels #10

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b4789c8
[UPDATE] additional work
Judimax Aug 21, 2024
361f40f
[UPDATE] additional work
Judimax Aug 21, 2024
2a715ca
[UPDATE] additional work
Judimax Aug 21, 2024
db4f49d
[UPDATE] additional work
Judimax Aug 21, 2024
9b533e2
[UPDATE] additional work
Judimax Aug 21, 2024
e974959
[UPDATE] additional work
Judimax Aug 21, 2024
67b61fc
[UPDATE] additional work
Judimax Aug 22, 2024
347cc71
[UPDATE] additional work
Judimax Aug 22, 2024
aed7460
[UPDATE] additional work
Judimax Aug 22, 2024
e7b895b
[UPDATE] additional work
Judimax Aug 22, 2024
f1c8263
[UPDATE] additional work
Judimax Sep 16, 2024
b7e2a87
[UPDATE] side bars when collapsed dont scroll, tablet nav bar resizes…
Judimax Sep 18, 2024
91e363f
[UPDATE] configuration options to enable toggle for the main and righ…
Judimax Sep 18, 2024
2bb64fa
[UPDATE] linting
Judimax Sep 18, 2024
1ef6310
[UPDATE] linting
Judimax Sep 18, 2024
c070c22
[UPDATE] additional work
Judimax Oct 2, 2024
41eb74a
[UPDATE] additional work
Judimax Oct 2, 2024
d38abe7
[UPDATE] additional work
Judimax Oct 2, 2024
7e64a05
[UPDATE] additional work
Judimax Oct 2, 2024
b207a5b
[UPDATE] additional work
Judimax Oct 2, 2024
154ded2
[UPDATE] additional work
Judimax Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 15 additions & 16 deletions packages/starlight-view-modes/components/HeaderButtons.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
justify-content: center;
align-items: center;
gap: 1rem;

}
#view-modes-header-div::before {
content: "";
Expand Down Expand Up @@ -53,15 +53,15 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h
}
</style>


<script>
import config from 'virtual:starlight-view-modes-config';
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>`;
Expand All @@ -76,7 +76,7 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h
zenModeOffElementHeader.id = "view-modes-zen-mode-off-header";
zenModeOffElementHeader.title = zenMode ? 'Deactivate Zen Mode' : 'Activate Zen Mode';
zenModeOffElementHeader.innerHTML = `
<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"
<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>
<g>
Expand All @@ -94,22 +94,22 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h
</g>
</g>
</svg>
`;
`;

headerDiv?.appendChild(zenModeOffElementHeader);

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

zenModeOffHeader?.addEventListener('click', () => {
if (document.body.classList.contains('view-modes-zen-mode')) {
deactivateZenMode();
deactivateZenMode();
}
else {
activateZenMode();
activateZenMode();
}
});
}

if (config.presentationModeShowSwitchInHeader) {
const presentationMode = sessionStorage.getItem('viewModesPresentationMode') === 'true';
var headerDiv = document.getElementById('view-modes-header-div');
Expand All @@ -125,21 +125,20 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h
<!-- <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();
deactivatePresentationMode();
}
else {
activatePresentationMode();
activatePresentationMode();
}
});
}
});
</script>

35 changes: 17 additions & 18 deletions packages/starlight-view-modes/components/MobileViewModes.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
justify-content: center;
align-items: center;
gap: 1rem;

}
#view-modes-header-div-mobile::before {
content: "";
Expand Down Expand Up @@ -49,15 +49,15 @@ body.view-modes-presentation-mode #view-modes-presentation-mode-off-header-mobil
}
</style>


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

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

var modeElementsHeader = document.createElement("div");
modeElementsHeader.id = "view-modes-header-div-mobile";
modeElementsHeader.innerHTML = `<span></span>`;
Expand All @@ -72,7 +72,7 @@ body.view-modes-presentation-mode #view-modes-presentation-mode-off-header-mobil
zenModeOffElementHeader.id = "view-modes-zen-mode-off-header-mobile";
zenModeOffElementHeader.title = zenMode ? 'Deactivate Zen Mode' : 'Activate Zen Mode';
zenModeOffElementHeader.innerHTML = `
<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"
<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>
<g>
Expand All @@ -90,26 +90,26 @@ body.view-modes-presentation-mode #view-modes-presentation-mode-off-header-mobil
</g>
</g>
</svg>
`;
`;

headerDiv?.appendChild(zenModeOffElementHeader);

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

zenModeOffHeader?.addEventListener('click', () => {
if (document.body.classList.contains('view-modes-zen-mode')) {
deactivateZenMode();
deactivateZenMode();
}
else {
deactivateAllModes();
activateZenMode();
activateZenMode();
}

document.getElementsByTagName('starlight-menu-button')[0]?.setAttribute('aria-expanded', String(false));
document.body.toggleAttribute('data-mobile-menu-expanded', false);
});
}

if (config.presentationModeShowSwitchInHeader) {
const presentationMode = sessionStorage.getItem('viewModesPresentationMode') === 'true';
var headerDiv = document.getElementById('view-modes-header-div-mobile');
Expand All @@ -125,25 +125,24 @@ body.view-modes-presentation-mode #view-modes-presentation-mode-off-header-mobil
<!-- <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-mobile');

presentationModeOffHeader?.addEventListener('click', () => {
if (document.body.classList.contains('view-modes-presentation-mode')) {
deactivatePresentationMode();
deactivatePresentationMode();
}
else {
deactivateAllModes();
activatePresentationMode();
activatePresentationMode();
}

document.getElementsByTagName('starlight-menu-button')[0]?.setAttribute('aria-expanded', String(false));
document.body.toggleAttribute('data-mobile-menu-expanded', false);
});
}
});
</script>

Loading