From 405b958deb4428b2aca0568c7ecf00225fbd0de8 Mon Sep 17 00:00:00 2001 From: Hiers Date: Tue, 5 Jul 2022 22:01:21 +0100 Subject: [PATCH 1/5] First draft of image fit. --- public/js/reader.js | 26 ++++++++++++++++++++++++++ src/views/reader.html.ecr | 21 ++++++++++++++++----- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/public/js/reader.js b/public/js/reader.js index fa66b77..6cacf78 100644 --- a/public/js/reader.js +++ b/public/js/reader.js @@ -14,6 +14,7 @@ const readerComponent = () => { margin: 30, preloadLookahead: 3, enableRightToLeft: false, + fitType: 'vert', /** * Initialize the component by fetching the page dimensions @@ -65,6 +66,10 @@ const readerComponent = () => { this.preloadImage(this.items[idx - 1].url); } + const savedFitType = localStorage.getItem('fitType'); + if(savedFitType){ + this.fitType = savedFitType; + } const savedFlipAnimation = localStorage.getItem('enableFlipAnimation'); this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true'; @@ -301,6 +306,21 @@ const readerComponent = () => { }); }); }, + /** + * Changes how the view should fit to the screen or if it should use the image's real size + * + * @param {string} fitType - ver, horz and real for fitting to height, width, + * and showing real size, respectively + */ + setFit(fitType){ + if (fitType === 'vert'){ + document.styleSheets[0].rules[21].style.maxWidth = '100%'; + } else if(fitType === 'horz'){ + document.styleSheets[0].rules[21].style.maxWidth = '100%'; + } else if (fitType === 'real'){ + document.styleSheets[0].rules[21].style.maxWidth = ''; + } + }, /** * Marks progress as 100% and jumps to the next entry * @@ -335,6 +355,12 @@ const readerComponent = () => { this.toPage(this.selectedIndex); }, + fitChanged(){ + this.fitType = $('#fit-select').val(); + this.setFit(this.fitType); + localStorage.setItem('fitType', this.fitType); + }, + preloadLookaheadChanged() { localStorage.setItem('preloadLookahead', this.preloadLookahead); }, diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr index 19e2b19..6e4fc8a 100644 --- a/src/views/reader.html.ecr +++ b/src/views/reader.html.ecr @@ -40,18 +40,18 @@ <%- end -%> -
+
@@ -94,6 +94,17 @@
+
+ +
+ +
+
+
From db5e99b3f0a202029c1862da6013eaf356102d0e Mon Sep 17 00:00:00 2001 From: Hiers Date: Tue, 5 Jul 2022 22:24:31 +0100 Subject: [PATCH 2/5] Fix in reader.html.ecr. --- src/views/reader.html.ecr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr index 6e4fc8a..dacd222 100644 --- a/src/views/reader.html.ecr +++ b/src/views/reader.html.ecr @@ -48,7 +48,7 @@ 'uk-animation-slide-right': flipAnimation === 'right' }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="clickImage($event)" :style="` width:${fitType === 'horz' ? '100vw' : 'auto'}; - height:${mode === 'vert' ? '100vh' : 'auto'}; + height:${fitType === 'vert' ? '100vh' : 'auto'}; margin-bottom:0; max-width:${fitType === 'horz' ? '100%' : ''}; max-height:${fitType === 'vert' ? '100%' : ''}; From 6ddbe8d43657867bf663d209fe1d8e027f25c6f1 Mon Sep 17 00:00:00 2001 From: Hiers Date: Thu, 7 Jul 2022 08:55:54 +0100 Subject: [PATCH 3/5] Changed setFit function to not have redundant ifs and a better comment explaining what it does. --- public/js/reader.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/public/js/reader.js b/public/js/reader.js index 6cacf78..df92b4f 100644 --- a/public/js/reader.js +++ b/public/js/reader.js @@ -307,18 +307,16 @@ const readerComponent = () => { }); }, /** - * Changes how the view should fit to the screen or if it should use the image's real size + * Sets the image to not be restricted to the size of its container if it's not being scaled * * @param {string} fitType - ver, horz and real for fitting to height, width, * and showing real size, respectively */ setFit(fitType){ - if (fitType === 'vert'){ - document.styleSheets[0].rules[21].style.maxWidth = '100%'; - } else if(fitType === 'horz'){ - document.styleSheets[0].rules[21].style.maxWidth = '100%'; - } else if (fitType === 'real'){ + if (fitType === 'real'){ document.styleSheets[0].rules[21].style.maxWidth = ''; + } else { + document.styleSheets[0].rules[21].style.maxWidth = '100%'; } }, /** From 624283643ccc19551db3c19cbb1c9bbedcb8b377 Mon Sep 17 00:00:00 2001 From: Hiers Date: Wed, 13 Jul 2022 14:20:43 +0100 Subject: [PATCH 4/5] Fixed right flip panel not being all the way on the right; changed real image size option to not be hard coded. --- public/js/reader.js | 17 ++--------------- src/views/reader.html.ecr | 8 ++++---- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/public/js/reader.js b/public/js/reader.js index df92b4f..63cef7f 100644 --- a/public/js/reader.js +++ b/public/js/reader.js @@ -67,8 +67,9 @@ const readerComponent = () => { } const savedFitType = localStorage.getItem('fitType'); - if(savedFitType){ + if (savedFitType) { this.fitType = savedFitType; + $('#fit-select').val(savedFitType); } const savedFlipAnimation = localStorage.getItem('enableFlipAnimation'); this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true'; @@ -306,19 +307,6 @@ const readerComponent = () => { }); }); }, - /** - * Sets the image to not be restricted to the size of its container if it's not being scaled - * - * @param {string} fitType - ver, horz and real for fitting to height, width, - * and showing real size, respectively - */ - setFit(fitType){ - if (fitType === 'real'){ - document.styleSheets[0].rules[21].style.maxWidth = ''; - } else { - document.styleSheets[0].rules[21].style.maxWidth = '100%'; - } - }, /** * Marks progress as 100% and jumps to the next entry * @@ -355,7 +343,6 @@ const readerComponent = () => { fitChanged(){ this.fitType = $('#fit-select').val(); - this.setFit(this.fitType); localStorage.setItem('fitType', this.fitType); }, diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr index dacd222..f1e7236 100644 --- a/src/views/reader.html.ecr +++ b/src/views/reader.html.ecr @@ -19,7 +19,7 @@
+ :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}" style="width: fit-content;">