gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

added possibility to zoom into images using mousewheel

Browse Source
This commit is contained in:
zadam 2021-03-15 22:24:56 +01:00
parent 5b72b577b8
commit 0bc91da0bb
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
libraries/wheel-zoom.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
src/public/app/services/library_loader.js
View File

@ -53,6 +53,10 @@ const KATEX = {
css: [ "libraries/katex/katex.min.css" ] css: [ "libraries/katex/katex.min.css" ]
}; };
const WHEEL_ZOOM = {
js: [ "libraries/wheel-zoom.min.js"]
};
async function requireLibrary(library) { async function requireLibrary(library) {
if (library.css) { if (library.css) {
library.css.map(cssUrl => requireCss(cssUrl)); library.css.map(cssUrl => requireCss(cssUrl));
@ -101,5 +105,6 @@ export default {
LINK_MAP, LINK_MAP,
PRINT_THIS, PRINT_THIS,
CALENDAR_WIDGET, CALENDAR_WIDGET,
KATEX KATEX,
WHEEL_ZOOM
} }

29
src/public/app/widgets/type_widgets/image.js
View File

@ -1,6 +1,7 @@
import utils from "../../services/utils.js"; import utils from "../../services/utils.js";
import toastService from "../../services/toast.js"; import toastService from "../../services/toast.js";
import TypeWidget from "./type_widget.js"; import TypeWidget from "./type_widget.js";
import libraryLoader from "../../services/library_loader.js";
const TPL = ` const TPL = `
<div class="note-detail-image note-detail-printable"> <div class="note-detail-image note-detail-printable">
@ -10,13 +11,25 @@ const TPL = `
} }
.note-detail-image { .note-detail-image {
text-align: center;
height: 100%; height: 100%;
overflow: auto; }
.note-detail-image-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
justify-content: center;
} }
.note-detail-image-view { .note-detail-image-view {
max-width: 100%; display: block;
width: auto;
height: auto;
align-self: center;
flex-shrink: 0;
} }
</style> </style>
@ -32,7 +45,15 @@ class ImageTypeWidget extends TypeWidget {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized(); this.contentSized();
this.$imageWrapper = this.$widget.find('.note-detail-image-wrapper'); this.$imageWrapper = this.$widget.find('.note-detail-image-wrapper');
this.$imageView = this.$widget.find('.note-detail-image-view'); this.$imageView = this.$widget.find('.note-detail-image-view')
.attr("id", "image-view-" + utils.randomString(10));
libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
WZoom.create('#' + this.$imageView.attr("id"), {
maxScale: 10,
zoomOnClick: false
});
});
} }
async doRefresh(note) { async doRefresh(note) {