Add option to hide details and captions with full zoom

_locales/en/messages.json

@@ -347,6 +347,14 @@
         "message": "Changes the padding size for zoomed images. Padding determines how close the image can get to the edge of the viewing window",
         "description": "[options] Tooltip for adjust the zoomed image padding size option"
     },
+    "optFullZoomHidesDetailsCaptions": {
+        "message": "Full zoom key hides details and captions",
+        "description": "[options] Full zoom key hides details and captions option"
+    },
+    "optFullZoomHidesDetailsCaptionsTooltip": {
+        "message": "When pressing full zoom, details and captions will be hidden, allowing the image able to expand more vertically",
+        "description": "[options] Tooltip for full zoom key hides details and captions option"
+    },
     "optStatusBarOverlap": {
         "message": "Allow zoomed images to overlap the status bar",
         "description": "[options] Allow zoomed images to overlap the status bar option"

html/options.html

@@ -181,6 +181,14 @@ <h1 class="ten columns text-center" data-i18n="optTitle"></h1>
                                         </label>
                                     </li>
                                 </div>
+                                <div class="ttip" data-i18n-tooltip="optFullZoomHidesDetailsCaptionsTooltip">
+                                    <li class="field">
+                                        <label class="checkbox" for="chkFullZoomHidesDetailsCaptions">
+                                            <input type="checkbox" id="chkFullZoomHidesDetailsCaptions"><span></span>
+                                            <div style="display:inline" data-i18n="optFullZoomHidesDetailsCaptions"></div>
+                                        </label>
+                                    </li>
+                                </div>
                                 <div class="ttip" data-i18n-tooltip="optStatusBarOverlapTooltip">
                                     <li class="field">
                                         <label class="checkbox" for="chkStatusBarOverlap">

js/common.js

@@ -36,6 +36,7 @@ var factorySettings = {
     ambilightBackgroundOpacity : 0.9,
     disabledPlugins : [],
     imagePaddingSize : 10,
+    fullZoomHidesDetailsCaptions : false,
     statusBarOverlap : false,
     hScrollBarOverlap : false,
     centerImages : false,
@@ -147,6 +148,7 @@ function loadOptions() {
     options.ambilightBackgroundOpacity = options.hasOwnProperty('ambilightBackgroundOpacity') ? options.ambilightBackgroundOpacity : factorySettings.ambilightBackgroundOpacity;
     options.disabledPlugins = options.hasOwnProperty('disabledPlugins') ? options.disabledPlugins : factorySettings.disabledPlugins;
     options.imagePaddingSize = options.hasOwnProperty('imagePaddingSize') ? options.imagePaddingSize : factorySettings.imagePaddingSize;
+    options.fullZoomHidesDetailsCaptions = options.hasOwnProperty('fullZoomHidesDetailsCaptions') ? options.fullZoomHidesDetailsCaptions : factorySettings.fullZoomHidesDetailsCaptions;
     options.statusBarOverlap = options.hasOwnProperty('statusBarOverlap') ? options.statusBarOverlap : factorySettings.statusBarOverlap;
     options.hScrollBarOverlap = options.hasOwnProperty('hScrollBarOverlap') ? options.hScrollBarOverlap : factorySettings.hScrollBarOverlap;
     options.centerImages = options.hasOwnProperty('centerImages') ? options.centerImages : factorySettings.centerImages;

js/hoverzoom.js

@@ -404,11 +404,23 @@ var hoverZoom = {
                 if (hzBelow)
                     hzBelow.css('max-width', 0);
 
+                // hides caption and details to fill window more with image when fullZoomKey is pressed
+                const fullZoomKey = fullZoomKeyDown;
+                const hideDetailsandCaptions = options.fullZoomHidesDetailsCaptions;
+                const hzAboveHeight = (fullZoomKey && hideDetailsandCaptions) ? padding : hzAbove.height();
+                const hzBelowHeight = (fullZoomKey && hideDetailsandCaptions) ? padding : hzBelow.height();
+
+                // needed so height adjusts properly when fullZoomKey is released
+                if (!fullZoomKey && hideDetailsandCaptions) {
+                    if (hzAbove) hzAbove.show();
+                    if (hzBelow) hzBelow.show();
+                }
+
                 // this is looped 10x max just in case something goes wrong, to avoid freezing the process
                 let i = 0;
 
                 while (!viewerLocked && hz.hzViewer.height() > wndHeight - statusBarHeight - scrollBarHeight && i++ < 10) {
-                    imgFullSize.height(wndHeight - padding - statusBarHeight - scrollBarHeight - (hzAbove ? hzAbove.height() : 0) - (hzBelow ? hzBelow.height() : 0)).width('auto');
+                    imgFullSize.height(wndHeight - padding - statusBarHeight - scrollBarHeight - (hzAbove ? hzAboveHeight : 0) - (hzBelow ? hzBelowHeight : 0)).width('auto');
                 }
 
                 if (hzCaptionMiscellaneous) {
@@ -432,8 +444,8 @@ var hoverZoom = {
                         hzBelow.css('position', 'absolute');
                 }
 
-                // do not display caption nor details if img is too small
-                if (imgFullSize[0].clientWidth < 50) {
+                // do not display caption nor details if img is too small, or if full zoom key is pressed
+                if (imgFullSize[0].clientWidth < 50 || (fullZoomKey && hideDetailsandCaptions)) {
                     if (hzAbove) hzAbove.hide();
                     if (hzBelow) hzBelow.hide();
                 } else {
@@ -531,7 +543,7 @@ var hoverZoom = {
                 }
 
                 // horizontal position adjustment if full zoom
-                if (fullZoom) {
+                if (fullZoom || fullZoomKey) {
                     if (displayOnRight) {
                         position.left = Math.min(position.left, wndScrollLeft + wndWidth - hz.hzViewer.width() - padding - 2 * scrollBarWidth);
                     } else {
@@ -540,13 +552,16 @@ var hoverZoom = {
                 }
 
                 // vertical position adjustments
-                var maxTop = wndScrollTop + wndHeight - hz.hzViewer.height() - padding - statusBarHeight - scrollBarHeight;
+                const maxTop = wndScrollTop + wndHeight - hz.hzViewer.height() - padding - statusBarHeight - scrollBarHeight;
                 if (position.top > maxTop) {
                     position.top = maxTop;
                 }
                 if (position.top < wndScrollTop + padding) {
                     position.top = wndScrollTop + padding;
                 }
+                if (fullZoomKey && position.top == wndScrollTop + padding) {
+                    position.top = wndScrollTop + padding / 1.5;
+                }
 
                 if (options.ambilightEnabled) {
                     updateAmbilight();

js/options.js

@@ -108,6 +108,7 @@ function saveOptions(exportSettings = false) {
     options.ambilightHaloSize = $('#txtAmbilightHaloSize')[0].value / 100;
     options.ambilightBackgroundOpacity = $('#txtAmbilightBackgroundOpacity')[0].value / 100;
     options.imagePaddingSize = $('#txtImagePaddingSize')[0].value;
+    options.fullZoomHidesDetailsCaptions = $('#chkFullZoomHidesDetailsCaptions')[0].checked;
     options.statusBarOverlap = $('#chkStatusBarOverlap')[0].checked;
     options.hScrollBarOverlap = $('#chkHScrollBarOverlap')[0].checked;
     options.centerImages = $('#chkCenterImages')[0].checked;
@@ -227,6 +228,7 @@ function restoreOptions(optionsFromFactorySettings) {
     $('#txtAmbilightHaloSize').val(parseInt(options.ambilightHaloSize * 100));
     $('#rngAmbilightBackgroundOpacity').val(parseInt(options.ambilightBackgroundOpacity * 100));
     $('#txtAmbilightBackgroundOpacity').val(parseInt(options.ambilightBackgroundOpacity * 100));
+    $('#chkFullZoomHidesDetailsCaptions').trigger(options.fullZoomHidesDetailsCaptions ? 'gumby.check' : 'gumby.uncheck');
     $('#chkStatusBarOverlap').trigger(options.statusBarOverlap ? 'gumby.check' : 'gumby.uncheck');
     $('#chkHScrollBarOverlap').trigger(options.hScrollBarOverlap ? 'gumby.check' : 'gumby.uncheck');
     $('#chkCenterImages').trigger(options.centerImages ? 'gumby.check' : 'gumby.uncheck');