mirrors/mdBook
2
0
Fork 0
mirror of https://github.com/rust-lang/mdBook.git synced 2026-07-22 02:07:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add possibility to "zoom out" using the escape key

Browse Source
This commit is contained in:
Guillaume Gomez
2026-05-26 18:10:36 +02:00
parent 6a7ef4d1c3
commit 73d6edfcaf
2 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
crates/mdbook-html/front-end/js/book.js
View File

@@ -658,6 +658,12 @@ aria-label="Show hidden lines"></button>';
})();
(function chapterNavigation() {
function zoomOutImages() {
for (const elem of Array.from(document.querySelectorAll('input.checkbox-img'))) {
elem.checked = false;
}
}
document.addEventListener('keydown', function(e) {
if (e.altKey ||
e.ctrlKey ||
@@ -724,6 +730,9 @@ aria-label="Show hidden lines"></button>';
e.preventDefault();
showHelp();
break;
case 'Escape':
zoomOutImages();
break;
}
// Rest of the keys are only active when the Shift key is not pressed

27
tests/gui/image-zoom.goml
View File

@@ -11,17 +11,36 @@ define-function: (
},
)
define-function: (
"check-image-zoomed-in",
[],
block {
// The image wrapper should now be displayed and have a "zoom-out" cursor.
assert-css: (".checkbox-label > .img-wrapper", {"display": "flex", "cursor": "zoom-out"})
// Same for the image it contains.
assert-css: (
".checkbox-label > .img-wrapper img",
{"display": "block", "cursor": "zoom-out"},
)
},
)
go-to: |DOC_PATH| + "basic/index.html"
call-function: ("check-image-not-zoomed-in", {})
// We click on the image to "zoom in".
click: ".checkbox-label > img"
// The image wrapper should now be displayed and have a "zoom-out" cursor.
assert-css: (".checkbox-label > .img-wrapper", {"display": "flex", "cursor": "zoom-out"})
// Same for the image it contains.
assert-css: (".checkbox-label > .img-wrapper img", {"display": "block", "cursor": "zoom-out"})
call-function: ("check-image-zoomed-in", {})
// We click on the wrapper to "zoom out".
click: ".checkbox-label > img"
// We check that everything is back to the previous state.
call-function: ("check-image-not-zoomed-in", {})
// We test that the "escape" key also hides the "zoomed in" image.
// We click on the image to "zoom in".
click: ".checkbox-label > img"
call-function: ("check-image-zoomed-in", {})
press-key: "Escape"
// We check that everything is back to the previous state.
call-function: ("check-image-not-zoomed-in", {})