Merge pull request #39 from Metacor/master

Added a 'Zoom Ratio' option to 'Settings'

background.js

@@ -183,11 +183,12 @@ function set_default_settings(){
             qr: true,
             exit: true,
             about: true,
+            zoom_ratio: 0.1, // 0.1 is +/- 10% Zoom, 0.5 is +/- 50% Zoom, etc...
             notification_gravity: "top", // top, bottom
             notification_position: "right", // left, right
             toolbar_position: "bottom", // top, bottom
             default_theme: "blurred", // dark, light, blurred
             hide_all_at_start: false, // hide all toolbar buttons at start
         }
     });
-}
+}

js/app.js

@@ -323,6 +323,9 @@ function init(settings) {
 
     BACKGROUND_TYPE = settings.settings.default_theme;
 
+    // checks the zoom setting - if it's nulled, then the default is set to 0.1 (10%)
+    settings.settings.zoom_ratio == null ? settings.settings.zoom_ratio = 0.1 : zoomSetting = settings.settings.zoom_ratio;
+    zoomSetting = settings.settings.zoom_ratio;
 
     let imgElement = document.getElementsByTagName('img')[0]; // get img element
     // if img element is found
@@ -344,6 +347,7 @@ function init(settings) {
             title: false,
             keyboard: false,
             backdrop: false, // prevent exit when click backdrop
+            zoomRatio: zoomSetting,
             toolbar: {
                 next: false,
                 prev: false,
@@ -1520,7 +1524,6 @@ function init(settings) {
         });
 
 
-        // change zoom
 
         let lightTheme = `
         transition: all 0.5s ease;

js/lib/viewer.min.js

@@ -1425,11 +1425,11 @@
                     break;
 
                 case 'zoom-in':
-                    this.zoom(0.1, true);
+                    this.zoom(options.zoomRatio, true);
                     break;
 
                 case 'zoom-out':
-                    this.zoom(-0.1, true);
+                    this.zoom(-options.zoomRatio, true);
                     break;
 
                 case 'one-to-one':

pages/css/settings.css

@@ -240,7 +240,7 @@ body {
   display: none;
 }
 
-select {
+select, #zoom-ratio {
   border          : 1px solid #dcdcdccc;
   background-color: transparent;
   color           : white;
@@ -250,6 +250,11 @@ select {
   font-size       : 12px;
 }
 
+#zoom-ratio {
+  box-sizing: border-box;
+  padding-left: 7px;
+}
+
 select option {
   background-color: white;
   padding         : 10px;

pages/js/settings.js

@@ -7,12 +7,14 @@ let currentSettings = () => {
     });
     let toolbar_position = document.querySelector('#toolbar-position').value;
     let default_theme = document.querySelector('#default-theme').value;
+    let zoom_ratio = document.querySelector('#zoom-ratio').value;
     // split notification position
     let notification_position_array = document.querySelector('#toast-position').value.split('-'); // for example: top-right
     settings['notification_gravity'] = notification_position_array[0];
     settings['notification_position'] = notification_position_array[1];
     settings['toolbar_position'] = toolbar_position;
     settings['default_theme'] = default_theme;
+    settings['zoom_ratio'] = zoom_ratio;
 
     return settings;
 }
@@ -61,6 +63,8 @@ window.addEventListener('load', () => {
         let notification_position = settings.settings.notification_position;
         // get toolbar_position
         let toolbar_position = settings.settings.toolbar_position;
+        // get zoom_ratio
+        let zoom_ratio = settings.settings.zoom_ratio;
 
 
         // update notif value with storage settings
@@ -69,6 +73,8 @@ window.addEventListener('load', () => {
         document.querySelector('#toolbar-position').value = toolbar_position;
         // update default theme
         document.querySelector('#default-theme').value = default_theme;
+        // update zoom ratio
+        document.querySelector('#zoom-ratio').value = zoom_ratio;
 
         try {
             for (let setting in settings.settings) {

pages/settings.html

@@ -44,6 +44,13 @@
                 </td>
             </tr>
 
+            <tr>
+                <td class="label">Zoom Ratio</td>
+                <td>
+                    <input type="number" step="0.01" name="zoom-ratio" id="zoom-ratio">
+                </td>
+            </tr>
+
             <tr>
                 <td class="label">Hide all tools at start</td>
                 <td class="togglebtn">
@@ -445,4 +452,4 @@
     <script src="js/settings.js"></script>
 </body>
 
-</html>
+</html>