[MS] Implements FileControlsZoom

client/src/views/viewers/ImageViewer.vue

@@ -18,6 +18,15 @@
           :icon="resize"
           @click="resetZoom"
         />
+        <file-controls-input
+          class="zoom-level-input"
+          v-model="zoomLevelString"
+          @on-submitted-value="onChange"
+          :restrict-change="validateZoomLevel"
+          suffix="%"
+          @keydown.up.prevent="zoomIn"
+          @keydown.down.prevent="zoomOut"
+        />
         <file-controls-button
           :icon="add"
           @click="zoomIn"
@@ -29,8 +38,8 @@
 
 <script setup lang="ts">
 import { add, remove, resize } from 'ionicons/icons';
-import { computed, onMounted, ref } from 'vue';
-import { FileControls, FileControlsButton } from '@/components/viewers';
+import { computed, onMounted, ref, watch } from 'vue';
+import { FileControls, FileControlsButton, FileControlsInput } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo, imageViewerUtils } from '@/views/viewers/utils';
 
@@ -43,9 +52,10 @@ const viewerConfig = ref({
 });
 
 const src = ref('');
+const zoomLevelString = ref(viewerConfig.value.zoomLevel.toString());
+
 const zoomLevel = computed(() => {
   const level = viewerConfig.value.zoomLevel;
-  console.log('Setting zoom level to', level);
   if (level < 5 || level > 500) {
     return;
   }
@@ -56,6 +66,10 @@ onMounted(async () => {
   src.value = URL.createObjectURL(new Blob([props.contentInfo.data], { type: props.contentInfo.mimeType }));
 });
 
+watch(() => viewerConfig.value.zoomLevel, (newZoomLevel) => {
+  zoomLevelString.value = newZoomLevel.toString();
+});
+
 function zoomOut(): void {
   viewerConfig.value = imageViewerUtils.zoomOut(viewerConfig.value);
 }
@@ -67,6 +81,18 @@ function resetZoom(): void {
 function zoomIn(): void {
   viewerConfig.value = imageViewerUtils.zoomIn(viewerConfig.value);
 }
+
+function onChange(value: string): void {
+  viewerConfig.value.zoomLevel = parseInt(value);
+}
+
+async function validateZoomLevel(value: string): Promise<string> {
+  const level = parseInt(value);
+  if (level < 5 || level > 500) {
+    return '';
+  }
+  return value;
+}
 </script>
 
 <style scoped lang="scss">
@@ -76,4 +102,8 @@ img {
   max-width: 100%;
   max-height: 100%;
 }
+
+.zoom-level-input {
+  width: 4rem;
+}
 </style>