mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
86 lines
3.3 KiB
JavaScript
86 lines
3.3 KiB
JavaScript
import OptionsTab from "./options_tab.js";
|
|
|
|
const TPL = `
|
|
<style>
|
|
.options-section .disabled-field {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
|
|
<div class="options-section">
|
|
<h4>Images</h4>
|
|
|
|
<div class="form-group">
|
|
<input id="download-images-automatically" type="checkbox" name="download-images-automatically">
|
|
<label for="download-images-automatically">Download images automatically for offline use.</label>
|
|
<p>(pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline)</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input id="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
|
|
<label for="image-compresion-enabled">Enable image compression</label>
|
|
</div>
|
|
|
|
<div id="image-compression-enabled-wraper">
|
|
<div class="form-group">
|
|
<label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
|
|
<input class="form-control" id="image-max-width-height" type="number" min="1">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="image-jpeg-quality">JPEG quality (10 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
|
|
<input class="form-control" id="image-jpeg-quality" min="10" max="100" type="number">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
export default class ImageOptions extends OptionsTab {
|
|
get tabTitle() { return "Images" }
|
|
|
|
lazyRender() {
|
|
this.$widget = $(TPL);
|
|
|
|
this.$imageMaxWidthHeight = this.$widget.find("#image-max-width-height");
|
|
this.$imageJpegQuality = this.$widget.find("#image-jpeg-quality");
|
|
|
|
this.$imageMaxWidthHeight.on('change', () =>
|
|
this.updateOption('imageMaxWidthHeight', this.$imageMaxWidthHeight.val()));
|
|
|
|
this.$imageJpegQuality.on('change', () =>
|
|
this.updateOption('imageJpegQuality', this.$imageJpegQuality.val()));
|
|
|
|
this.$downloadImagesAutomatically = this.$widget.find("#download-images-automatically");
|
|
|
|
this.$downloadImagesAutomatically.on("change", () =>
|
|
this.updateCheckboxOption('downloadImagesAutomatically', this.$downloadImagesAutomatically));
|
|
|
|
this.$enableImageCompression = this.$widget.find("#image-compresion-enabled");
|
|
this.$imageCompressionWrapper = this.$widget.find("#image-compression-enabled-wraper");
|
|
|
|
this.$enableImageCompression.on("change", () => {
|
|
this.updateCheckboxOption('compressImages', this.$enableImageCompression);
|
|
this.setImageCompression();
|
|
});
|
|
}
|
|
|
|
optionsLoaded(options) {
|
|
this.$imageMaxWidthHeight.val(options.imageMaxWidthHeight);
|
|
this.$imageJpegQuality.val(options.imageJpegQuality);
|
|
|
|
this.setCheckboxState(this.$downloadImagesAutomatically, options.downloadImagesAutomatically);
|
|
this.setCheckboxState(this.$enableImageCompression, options.compressImages);
|
|
|
|
this.setImageCompression();
|
|
}
|
|
|
|
setImageCompression() {
|
|
if (this.$enableImageCompression.prop("checked")) {
|
|
this.$imageCompressionWrapper.removeClass("disabled-field");
|
|
} else {
|
|
this.$imageCompressionWrapper.addClass("disabled-field");
|
|
}
|
|
}
|
|
}
|