add zoom in/zoom out

app/components/viewer/document/index.hbs

 <div class="d-flex">
+  {{#if this.thumbnails_visible}}
     <Viewer::Thumbnails
       @pages={{@pages}}
       @onDblClick={{this.onThumbnailDblClick}} />
+  {{/if}}
+  <Viewer::ThumbnailsSwitch
+    @onThumbnailsToggle={{this.onThumbnailsToggle}}
+    @thumbnails_visible={{this.thumbnails_visible}} />
   <Viewer::Pages
     @pages={{@pages}}
-    @scroll_to_page={{this.scroll_to_page}} />
+    @scroll_to_page={{this.scroll_to_page}}
+    @onZoomIn={{this.onZoomIn}}
+    @onZoomOut={{this.onZoomOut}}
+    @onZoomFit={{this.onZoomFit}}
+    @zoom_factor={{this.zoom_factor}} />
 </div>
\ No newline at end of file

app/components/viewer/document/index.js

@@ -5,9 +5,35 @@ import { action } from '@ember/object';
 
 export default class ViewerDocumentComponent extends Component {
   @tracked scroll_to_page;
+  @tracked thumbnails_visible = true;
+  @tracked zoom_factor = 100;
 
   @action
   onThumbnailDblClick(page) {
     this.scroll_to_page = page;
   }
+
+  @action
+  onThumbnailsToggle() {
+    this.thumbnails_visible = !this.thumbnails_visible;
+  }
+
+  @action
+  onZoomIn() {
+    if (this.zoom_factor < 300) {
+      this.zoom_factor += 10;
+    }
+  }
+
+  @action
+  onZoomOut() {
+    if (this.zoom_factor > 20) {
+      this.zoom_factor -= 10;
+    }
+  }
+
+  @action
+  onZoomFit() {
+    this.zoom_factor = 100;
+  }
 }
\ No newline at end of file

app/components/viewer/index.hbs

@@ -20,6 +20,8 @@
     @hint={{@hint}} />
 
   <Viewer::Document
-    @pages={{this.pages}} />
+    @pages={{this.pages}}
+    @thumbnails_visible={{this.thumbnails_visible}}
+    @onThumbnailsToggle={{this.onThumbnailsToggle}} />
 
 </div>

app/components/viewer/page.hbs

 <div
   class="page d-flex flex-column align-items-center"
-  {{scrollIntoView page=@page scroll_to_page=@scroll_to_page}}>
+  {{scrollIntoView page=@page scroll_to_page=@scroll_to_page}}
+  {{zoomFactor @zoom_factor}}>
 
   {{#if @page.svg_image}}
     {{{@page.svg_image}}}

app/components/viewer/pages.hbs

-<div
-  class="d-flex flex-column pages"
+<div class="d-flex flex-column pages"
   {{adjust_element_height}}>
     {{#each @pages as |page|}}
       <Viewer::Page
         @page={{page}}
-      @scroll_to_page={{@scroll_to_page}} />
+        @scroll_to_page={{@scroll_to_page}}
+        @zoom_factor={{@zoom_factor}} />
     {{/each}}
+    <Viewer::Zoom
+      @onZoomIn={{@onZoomIn}}
+      @onZoomOut={{@onZoomOut}}
+      @onZoomFit={{@onZoomFit}} />
 </div>

app/components/viewer/thumbnails_switch.hbs

+<div class="thumbnails-switch" {{on "click" @onThumbnailsToggle}}>
+  {{#if @thumbnails_visible}}
+    <i class="bi bi-arrow-left-square fs-5"></i>
+  {{else}}
+    <i class="bi bi-arrow-right-square fs-5"></i>
+  {{/if}}
+</div>
\ No newline at end of file

app/components/viewer/zoom.hbs

+<div class="zoom d-flex justify-content-center">
+  <div>
+    <i class="bi bi-zoom-in px-1" {{on "click" @onZoomIn}}></i>
+  </div>
+  <div>
+    <i class="bi bi-zoom-out px-1" {{on "click" @onZoomOut}}></i>
+  </div>
+  <div class="px-1" {{on "click" @onZoomFit}}>
+    Fit
+  </div>
+</div>
\ No newline at end of file

app/modifiers/adjust_element_height.js

@@ -55,15 +55,6 @@ export default class AdjustElementHeightModifier extends Modifier {
     height += parseInt(styles.marginTop);
     height += parseInt(styles.marginBottom);
 
-    if (element_id) {
-      console.log(`ID=${element_id}: height=${styles.height}`);
-      console.log(`ID=${element_id}: marginTop=${styles.marginTop}`);
-      console.log(`ID=${element_id}: marginBottom=${styles.marginBottom}`);
-    } else {
-      console.log(`element_class=${element_class}: height=${styles.height}`);
-      console.log(`element_class=${element_class}: marginTop=${styles.marginTop}`);
-      console.log(`element_class=${element_class}: marginBottom=${styles.marginBottom}`);
-    }
     return height;
   }
 

app/modifiers/zoom_factor.js

+import Modifier from 'ember-modifier';
+
+
+export default class ZoomFactorModifier extends Modifier {
+  didReceiveArguments() {
+    let zoom_factor = this.args.positional[0];
+
+    this.element.style.width = `${zoom_factor}%`;
+  }
+
+}
\ No newline at end of file

app/styles/app.scss

@@ -10,6 +10,7 @@
 @import "./preferences.scss";
 @import "./ui_select.scss";
 @import "./context_menu.scss";
+@import "./zoom.scss";
 
 
 body {

app/styles/document_version.scss

@@ -12,10 +12,20 @@
   }
 }
 
+.thumbnails-switch {
+  background-color: #666;
+  color: white;
+}
+
 .pages {
   overflow: scroll;
+  position: relative;
   width: 100%;
+  background-color: #666;
+
   .page {
+    margin: auto;
+    color: white;
     img {
       width: 100%;
     }

app/styles/zoom.scss

+.zoom {
+  position: sticky;
+  bottom: 0;
+  background-color: #d4d4d47d;
+  padding: 0.5rem;
+  width: 40%;
+  margin: auto;
+}
\ No newline at end of file