From f9baf702c305fea66136f1d5e44c10c48f23a1ab Mon Sep 17 00:00:00 2001 From: Luca Venturi Date: Tue, 29 Dec 2020 00:36:43 +0100 Subject: [PATCH 1/3] Adds debounceMulti() and uses it to keep showing the toolbars during mouse activity --- src/jquery.nanogallery2.core.js | 423 +++++++++++++++++--------------- 1 file changed, 230 insertions(+), 193 deletions(-) diff --git a/src/jquery.nanogallery2.core.js b/src/jquery.nanogallery2.core.js index 3310898d..ebb88e86 100644 --- a/src/jquery.nanogallery2.core.js +++ b/src/jquery.nanogallery2.core.js @@ -494,7 +494,7 @@ todo: this.albumTagList = []; // list of all the tags of the items contained in the current album this.albumTagListSel = []; // list of currently selected tags (only for albums) this.exif = { exposure: '', flash: '', focallength: '', fstop: '', iso: '', model: '', time: '', location: ''}; - this.deleted = false; // item is deleted -> do not display anymore + this.deleted = false; // item is deleted -> do not display anymore this.rotationAngle = 0; // image display rotation angle } @@ -1350,9 +1350,9 @@ todo: userID : '', photoset : '', album: '', - blockList : 'scrapbook|profil|auto backup', + blockList : 'scrapbook|profil|auto backup', tagBlockList: '', - allowList : '', + allowList : '', albumList : '', albumList2 : null, RTL : false, @@ -1363,18 +1363,18 @@ todo: breadcrumbOnlyCurrentLevel : true, breadcrumbHideIcons : true, theme : 'nGY2', - galleryTheme : 'dark', + galleryTheme : 'dark', viewerTheme : 'dark', items : null, itemsBaseURL : '', thumbnailSelectable : false, dataProvider: '', - allowHTMLinData: false, - locationHash : true, - slideshowDelay : 3000, - slideshowAutoStart : false, - - debugMode: false, + allowHTMLinData: false, + locationHash : true, + slideshowDelay : 3000, + slideshowAutoStart : false, + + debugMode: false, titleTranslationMap: null, galleryDisplayMoreStep : 2, @@ -1401,31 +1401,31 @@ todo: galleryL1DisplayTransition : null, galleryDisplayTransitionDuration : 1000, galleryL1DisplayTransitionDuration : null, - galleryResizeAnimation : false, - galleryRenderDelay : 10, - + galleryResizeAnimation : false, + galleryRenderDelay : 10, + thumbnailCrop : true, - thumbnailL1Crop : null, - thumbnailCropScaleFactor : 1.5, - thumbnailLevelUp : false, - thumbnailAlignment : 'fillWidth', + thumbnailL1Crop : null, + thumbnailCropScaleFactor : 1.5, + thumbnailLevelUp : false, + thumbnailAlignment : 'fillWidth', thumbnailWidth : 300, - thumbnailL1Width : null, + thumbnailL1Width : null, thumbnailHeight : 200, thumbnailL1Height : null, thumbnailBaseGridHeight : 0, - thumbnailL1BaseGridHeight : null, + thumbnailL1BaseGridHeight : null, thumbnailGutterWidth : 2, - thumbnailL1GutterWidth : null, + thumbnailL1GutterWidth : null, thumbnailGutterHeight : 2, - thumbnailL1GutterHeight : null, + thumbnailL1GutterHeight : null, thumbnailBorderVertical : 2, - thumbnailL1BorderVertical : null, + thumbnailL1BorderVertical : null, thumbnailBorderHorizontal : 2, - thumbnailL1BorderHorizontal : null, - thumbnailFeaturedKeyword : '*featured', - thumbnailAlbumDisplayImage : false, - thumbnailHoverEffect2 : 'toolsAppear', + thumbnailL1BorderHorizontal : null, + thumbnailFeaturedKeyword : '*featured', + thumbnailAlbumDisplayImage : false, + thumbnailHoverEffect2 : 'toolsAppear', thumbnailBuildInit2 : '', thumbnailStacks : 0, thumbnailL1Stacks : null, @@ -1448,43 +1448,43 @@ todo: thumbnailSliderDelay: 2000, galleryBuildInit2 : '', portable : false, - eventsDebounceDelay: 10, - + eventsDebounceDelay: 10, + touchAnimation : false, - touchAnimationL1 : undefined, - touchAutoOpenDelay : 0, - - thumbnailLabel : { - position : 'overImage', + touchAnimationL1 : undefined, + touchAutoOpenDelay : 0, + + thumbnailLabel : { + position : 'overImage', align: 'center', - valign: 'bottom', - display : true, - displayDescription : false, + valign: 'bottom', + display : true, + displayDescription : false, titleMaxLength : 0, - titleMultiLine : false, + titleMultiLine : false, descriptionMaxLength : 0, - descriptionMultiLine : false, - hideIcons : true, - title : '' - }, - - thumbnailToolbarImage : { topLeft: 'select', topRight : 'featured' }, - thumbnailToolbarAlbum : { topLeft: 'select', topRight : 'counter' }, + descriptionMultiLine : false, + hideIcons : true, + title : '' + }, + + thumbnailToolbarImage : { topLeft: 'select', topRight : 'featured' }, + thumbnailToolbarAlbum : { topLeft: 'select', topRight : 'counter' }, thumbnailDisplayOrder : '', thumbnailL1DisplayOrder : null, thumbnailDisplayInterval : 15, thumbnailDisplayByRow: false, thumbnailDisplayByCol: false, - thumbnailL1DisplayInterval : null, + thumbnailL1DisplayInterval : null, thumbnailDisplayTransition : 'fadeIn', - thumbnailL1DisplayTransition : null, + thumbnailL1DisplayTransition : null, thumbnailDisplayTransitionEasing : 'easeOutQuart', - thumbnailL1DisplayTransitionEasing : null, + thumbnailL1DisplayTransitionEasing : null, thumbnailDisplayTransitionDuration: 240, - thumbnailL1DisplayTransitionDuration: null, + thumbnailL1DisplayTransitionDuration: null, thumbnailOpenInLightox : true, - thumbnailOpenOriginal : false, - + thumbnailOpenOriginal : false, + lightboxStandalone: false, viewer : 'internal', viewerFullscreen: false, @@ -1511,19 +1511,19 @@ todo: viewerGalleryTWidth: 40, viewerGalleryTHeight: 40, - breakpointSizeSM : 480, - breakpointSizeME : 992, - breakpointSizeLA : 1200, + breakpointSizeSM : 480, + breakpointSizeME : 992, + breakpointSizeLA : 1200, breakpointSizeXL : 1800, - - fnThumbnailInit : null, - fnThumbnailHoverInit : null, - fnThumbnailHover : null, - fnThumbnailHoverOut : null, + + fnThumbnailInit : null, + fnThumbnailHoverInit : null, + fnThumbnailHover : null, + fnThumbnailHoverOut : null, fnThumbnailDisplayEffect : null, fnViewerInfo : null, - fnImgToolbarCustInit : null, - fnImgToolbarCustDisplay : null, + fnImgToolbarCustInit : null, + fnImgToolbarCustDisplay : null, fnImgToolbarCustClick : null, fnProcessData : null, fnThumbnailSelection : null, @@ -1531,13 +1531,13 @@ todo: fnGalleryRenderEnd : null, fnGalleryObjectModelBuilt : null, fnGalleryLayoutApplied : null, - fnThumbnailClicked : null, - fnShoppingCartUpdated : null, - fnThumbnailToolCustAction : null, - fnThumbnailOpen : null, + fnThumbnailClicked : null, + fnShoppingCartUpdated : null, + fnThumbnailToolCustAction : null, + fnThumbnailOpen : null, fnImgDisplayed : null, - fnPopupMediaInfo : null, - + fnPopupMediaInfo : null, + i18n : { 'breadcrumbHome' : 'Galleries', 'breadcrumbHome_FR' : 'Galeries', 'thumbnailImageTitle' : '', 'thumbnailAlbumTitle' : '', @@ -1578,7 +1578,7 @@ todo: thumbnailCustomTool10: 'T10', thumbnailAlbumUp: '', paginationNext: '', - paginationPrevious: '', + paginationPrevious: '', galleryMoreButton: '   ', buttonClose: '', viewerPrevious: '', @@ -1596,8 +1596,8 @@ todo: viewerZoomOut: '', viewerLinkOriginal: '', viewerInfo: '', - viewerShare: '', - viewerRotateLeft: '', + viewerShare: '', + viewerRotateLeft: '', viewerRotateRight: '', viewerShoppingcart: '', user: '', @@ -2041,7 +2041,7 @@ todo: if( G.$E.scrollableParent !== null ) { G.$E.scrollableParent.off('scroll.nanogallery2.' + G.baseEltID); } - G.GOM.firstDisplay = true; + G.GOM.firstDisplay = true; }; /** @@ -2122,7 +2122,7 @@ todo: // author: underscore.js - http://underscorejs.org/docs/underscore.html // Returns a function, that, when invoked, will only be triggered at most once during a given window of time. // Normally, the throttled function will run as much as it can, without ever going more than once per wait duration; - // but if you’d like to disable the execution on the leading edge, pass {leading: false}. + // but if you?d like to disable the execution on the leading edge, pass {leading: false}. // To disable execution on the trailing edge, ditto. var throttle = function(func, wait, options) { var context, args, result; @@ -2179,7 +2179,32 @@ todo: // timeout = requestTimeout(delayed, threshold || 100); }; } - + + // Version of debounce that can reschedule the timeout; func needs to return how many ms to reschedule + // For example, we do not want to hide the toolbar after 4 seconds, but 4 seconds after the last mouse activity + var debounceMulti = function (func, threshold) { + var timeout; + return function debounced () { + let obj = this + + function execDelayed(additionalDelay) { + if (timeout) + clearTimeout(timeout); + timeout = setTimeout(delayed, additionalDelay || 100); + } + + function delayed () { + let additionalDelay = func.apply(obj); // If some events require to postpone the action + + if (additionalDelay && additionalDelay>0) + execDelayed(additionalDelay); + else + timeout = null; + } + + execDelayed(threshold); + }; + } // Double requestAnimationFrame window.ng_draf = function (cb) { @@ -2542,18 +2567,18 @@ todo: firstDisplay : true, firstDisplayTime : 0, // in conjunction with galleryRenderDelay navigationBar : { // content of the navigation bar (for breadcrumb, filter tags and next/previous pagination) - displayed: false, + displayed: false, $newContent: '' }, cache : { // cached data - viewport: null, + viewport: null, containerOffset: null, areaWidth: 100 // available area width }, nbSelected : 0, // number of selected items pagination : { currentPage: 0 }, // pagination data - panThreshold: 60, // threshold value (in pixels) to block horizontal pan/swipe - panYOnly: false, // threshold value reach -> definitively block horizontal pan until end of pan + panThreshold: 60, // threshold value (in pixels) to block horizontal pan/swipe + panYOnly: false, // threshold value reach -> definitively block horizontal pan until end of pan lastFullRow : -1, // number of the last row without holes lastDisplayedIdx: -1, // used to display the counter of not displayed items displayInterval : { from: 0, len: 0 }, @@ -2638,7 +2663,7 @@ todo: posY: 0, userFactor: 1, // user zoom factor (applied to the baseZoom factor) isZooming: false - }, + }, padding: { H: 0, V: 0 }, // padding for the image window: { lastWidth: 0, lastHeight: 0 }, $viewer: null, @@ -2796,9 +2821,9 @@ todo: hammertime: null, // hammer.js manager swipePosX: 0, // current horizontal swip position panPosX: 0, // position for manual pan - panPosY: 0, - panThreshold: 60, // threshold value (in pixels) to block vertical pan - panXOnly: false, // threshold value reach -> definitively block vertical pan until end of pan + panPosY: 0, + panThreshold: 60, // threshold value (in pixels) to block vertical pan + panXOnly: false, // threshold value reach -> definitively block vertical pan until end of pan singletapTime: 0, viewerTheme: '', timeImgChanged: 0, @@ -2924,17 +2949,17 @@ todo: // Color schemes - lightbox G.viewerTheme_dark = { - background: '#000', - barBackground: 'rgba(4, 4, 4, 0.2)', - barBorder: '0px solid #111', - barColor: '#fff', + background: '#000', + barBackground: 'rgba(4, 4, 4, 0.2)', + barBorder: '0px solid #111', + barColor: '#fff', barDescriptionColor: '#ccc' }; G.viewerTheme_light = { - background: '#f8f8f8', - barBackground: 'rgba(4, 4, 4, 0.7)', - barBorder: '0px solid #111', - barColor: '#fff', + background: '#f8f8f8', + barBackground: 'rgba(4, 4, 4, 0.7)', + barBorder: '0px solid #111', + barColor: '#fff', barDescriptionColor: '#ccc' }; @@ -3551,7 +3576,7 @@ todo: function paginationNextPage() { // var aIdx = G.GOM.albumIdx; var n1 = 0; - ThumbnailHoverOutAll(); + ThumbnailHoverOutAll(); // pagination - max lines per page mode if( G.galleryMaxRows.Get() > 0 ) { @@ -3582,8 +3607,8 @@ todo: // var aIdx=G.$E.conTnBottom.data('galleryIdx'), // var aIdx = G.GOM.albumIdx; var n1 = 0; - - ThumbnailHoverOutAll(); + + ThumbnailHoverOutAll(); // pagination - max lines per page mode if( G.galleryMaxRows.Get() > 0 ) { @@ -3724,7 +3749,7 @@ todo: GalleryRenderPart1( albumIdx ); } G.O.galleryRenderDelay = 0; - + } else { var hideNavigationBar = false; @@ -5916,7 +5941,7 @@ todo: } // build initialization - var inits = G.tn.buildInit.get(); + var inits = G.tn.buildInit.get(); for( var j = 0; j < inits.length; j++) { switch( inits[j].property ) { // CSS Transform @@ -5934,9 +5959,9 @@ todo: case 'blur': case 'brightness': case 'grayscale': - case 'sepia': - case 'contrast': - case 'opacity': + case 'sepia': + case 'contrast': + case 'opacity': case 'saturate': item.CSSFilterSet(inits[j].element, inits[j].property, inits[j].value); item.CSSFilterApply(inits[j].element); @@ -5949,7 +5974,7 @@ todo: } // hover - var effects = G.tn.hoverEffects.get(); + var effects = G.tn.hoverEffects.get(); for( var j = 0; j < effects.length; j++) { if( effects[j].firstKeyframe === true ) { switch( effects[j].type ) { @@ -5967,9 +5992,9 @@ todo: case 'brightness': case 'grayscale': case 'sepia': - case 'contrast': - case 'opacity': - case 'saturate': + case 'contrast': + case 'opacity': + case 'saturate': item.CSSFilterSet(effects[j].element, effects[j].type, effects[j].from); item.CSSFilterApply(effects[j].element); break; @@ -6436,7 +6461,7 @@ debugger; if( fu !== null ) { typeof fu == 'function' ? fu(newItem, 'api', item) : window[fu](newItem, 'api', item); } - + AlbumPostProcess(albumID); }); @@ -6951,11 +6976,11 @@ debugger; } } - if( G.O.fnThumbnailDisplayEffect !== '' ) { - G.tn.opt.lN.displayTransition = 'CUSTOM'; - G.tn.opt.l1.displayTransition = 'CUSTOM'; - } - if( G.O.fnThumbnailL1DisplayEffect !== '' ) { + if( G.O.fnThumbnailDisplayEffect !== '' ) { + G.tn.opt.lN.displayTransition = 'CUSTOM'; + G.tn.opt.l1.displayTransition = 'CUSTOM'; + } + if( G.O.fnThumbnailL1DisplayEffect !== '' ) { G.tn.opt.l1.displayTransition = 'CUSTOM'; } @@ -7900,7 +7925,7 @@ debugger; }; } - // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel + // requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijdel // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // MIT license @@ -7934,15 +7959,15 @@ debugger; this.splice(i, 1); } } - }; - - // IE11 for startsWith - // thanks to @lichtamberg - https://github.com/lichtamberg - if (!String.prototype.startsWith) { - String.prototype.startsWith = function(searchString, position) { - position = position || 0; - return this.indexOf(searchString, position) === position; - }; + }; + + // IE11 for startsWith + // thanks to @lichtamberg - https://github.com/lichtamberg + if (!String.prototype.startsWith) { + String.prototype.startsWith = function(searchString, position) { + position = position || 0; + return this.indexOf(searchString, position) === position; + }; } } @@ -8009,16 +8034,16 @@ debugger; if( G.I[idx].downloadURL != undefined && G.I[idx].downloadURL != '' ) { url = G.I[idx].downloadURL; } - - var a = document.createElement('a'); - a.href = url; + + var a = document.createElement('a'); + a.href = url; // a.download = url.split('.').pop(); a.download = url.split('/').pop(); a.target = '_blank'; - a.style.display = 'none'; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); + a.style.display = 'none'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); } @@ -8047,8 +8072,8 @@ debugger; var fu=G.O.fnShoppingCartUpdated; if( fu !== null ) { - typeof fu == 'function' ? fu(G.shoppingCart, G.I[idx], source) : window[fu](G.shoppingCart, G.I[idx], source); - } + typeof fu == 'function' ? fu(G.shoppingCart, G.I[idx], source) : window[fu](G.shoppingCart, G.I[idx], source); + } TriggerCustomEvent('shoppingCartUpdated'); } } @@ -8092,7 +8117,7 @@ debugger; ThumbnailSelectionSetIcon( item ); - // called when the selection status of an item changed + // called when the selection status of an item changed var fu=G.O.fnThumbnailSelection; if( fu !== null ) { typeof fu == 'function' ? fu(item.$elt, item, G.I) : window[fu](item.$elt, item, G.I); @@ -8408,7 +8433,7 @@ debugger; var vimg = new VImg(ngy2ItemIdx); G.VOM.items.push(vimg); items.push(G.I[ngy2ItemIdx]); - //TODO -> danger? -> pourquoi reconstruire la liste si déjà ouvert (back/forward) + //TODO -> danger? -> pourquoi reconstruire la liste si d?j? ouvert (back/forward) var l = G.I.length; for( let idx = ngy2ItemIdx+1; idx < l ; idx++) { let item = G.I[idx]; @@ -8435,7 +8460,7 @@ debugger; cnt++; } - // opens media with external viewer + // opens media with external viewer var fu = G.O.fnThumbnailOpen; if( fu !== null ) { typeof fu == 'function' ? fu(items) : window[fu](items); @@ -8503,7 +8528,7 @@ debugger; G.VOM.zoom.userFactor = 3; } } - function ViewerZoomMin() { + function ViewerZoomMin() { if( G.VOM.zoom.userFactor < 0.2 ) { G.VOM.zoom.userFactor = 0.2; @@ -8605,7 +8630,7 @@ debugger; else { // set the pan position of each media container ViewerMediaPanX( G.VOM.swipePosX ); - $img.children().eq(1)[0].style[G.CSStransformName]= 'translate(0px, 0px) rotate('+ item.rotationAngle +'deg)'; + $img.children().eq(1)[0].style[G.CSStransformName]= 'translate(0px, 0px) rotate('+ item.rotationAngle +'deg)'; } } @@ -8619,9 +8644,9 @@ debugger; } posX += G.VOM.zoom.posX; - posY += G.VOM.zoom.posY; - - // imageContainer.children().eq(1)[0].style[G.CSStransformName]= 'translate('+ posX + 'px, '+ posY + 'px)'; + posY += G.VOM.zoom.posY; + + // imageContainer.children().eq(1)[0].style[G.CSStransformName]= 'translate('+ posX + 'px, '+ posY + 'px)'; imageContainer.children().eq(1)[0].style[G.CSStransformName]= 'translate('+ posX + 'px, '+ posY + 'px) rotate('+ G.VOM.content.current.NGY2Item().rotationAngle +'deg)'; @@ -9182,23 +9207,33 @@ debugger; // Hide toolbars on user inactivity function ViewerToolsHide() { if( G.VOM.viewerDisplayed ) { - G.VOM.toolbarsDisplayed = false; - ViewerToolsOpacity(0); + let elapsedSinceLastUnHide = G.VOM.lastUnhideTime ? Date.now()-G.VOM.lastUnhideTime : G.O.viewerHideToolsDelay; + + if (elapsedSinceLastUnHide>=G.O.viewerHideToolsDelay) { // Hide + G.VOM.toolbarsDisplayed = false; + ViewerToolsOpacity(0); + + return -1; + } + else { // Postpone a bit + return G.O.viewerHideToolsDelay - elapsedSinceLastUnHide; + } } } - + function ViewerToolsUnHide() { - if( G.VOM.viewerDisplayed ) { + if( G.VOM.viewerDisplayed ) { + G.VOM.lastUnhideTime = Date.now(); G.VOM.toolbarsDisplayed = true; ViewerToolsOpacity(1); - G.VOM.toolsHide(); // re-init delay before hide tools+gallery + G.VOM.toolsHide(); // re-init delay before hide tools+gallery } } function ViewerToolsOpacity( op ) { - if( G.VOM.$toolbar != null ) { - G.VOM.$toolbar.css('opacity', op); - } + if( G.VOM.$toolbar != null ) { + G.VOM.$toolbar.css('opacity', op); + } if( G.VOM.$toolbarTL != null ) { G.VOM.$toolbarTL.css('opacity', op); } @@ -9292,16 +9327,16 @@ debugger; case 'linkOriginal': StopPropagationPreventDefault(e); OpenOriginal( G.VOM.content.current.NGY2Item() ); - break; - case 'rotateLeft': - StopPropagationPreventDefault(e); - ViewerImageRotate(-90); - break; - case 'rotateRight': - StopPropagationPreventDefault(e); - ViewerImageRotate(90); break; - case 'shoppingcart': + case 'rotateLeft': + StopPropagationPreventDefault(e); + ViewerImageRotate(-90); + break; + case 'rotateRight': + StopPropagationPreventDefault(e); + ViewerImageRotate(90); + break; + case 'shoppingcart': StopPropagationPreventDefault(e); AddToCart( G.VOM.items[G.VOM.content.current.vIdx].ngy2ItemIdx, 'lightbox'); break; @@ -9309,23 +9344,23 @@ debugger; // custom button var fu = G.O.fnImgToolbarCustClick; - if( ngy2action.indexOf('custom') == 0 && fu !== null ) { + if( ngy2action.indexOf('custom') == 0 && fu !== null ) { typeof fu == 'function' ? fu(ngy2action, $this, G.VOM.content.current.NGY2Item() ) : window[fu](ngy2action, $this, G.VOM.content.current.NGY2Item() ); - } - } - - // rotate displayed image - function ViewerImageRotate( angle ) { - var item = G.VOM.content.current.NGY2Item(); - if( item.mediaKind == 'img' ) { - item.rotationAngle += angle; - item.rotationAngle = item.rotationAngle % 360; - if( item.rotationAngle < 0 ) { - item.rotationAngle += 360; - } - ViewerMediaPanX( 0 ); - ViewerMediaSetPosAndZoomOne( G.VOM.content.current, true ); - } + } + } + + // rotate displayed image + function ViewerImageRotate( angle ) { + var item = G.VOM.content.current.NGY2Item(); + if( item.mediaKind == 'img' ) { + item.rotationAngle += angle; + item.rotationAngle = item.rotationAngle % 360; + if( item.rotationAngle < 0 ) { + item.rotationAngle += 360; + } + ViewerMediaPanX( 0 ); + ViewerMediaSetPosAndZoomOne( G.VOM.content.current, true ); + } } @@ -9334,9 +9369,9 @@ debugger; var content = '
' + ng2item.title + '
'; content += '
' + ng2item.description + '
'; - if( ng2item.author != '' ) { + if( ng2item.author != '' ) { content += '
' + G.O.icons.user + ' ' + ng2item.author + '
'; - } + } if( ng2item.exif.model != '' ) { content += '
' + G.O.icons.config + ' ' + ng2item.exif.model + '
'; } @@ -9458,7 +9493,7 @@ debugger; // custom button if( e.indexOf('custom') == 0 ) { var t = ''; - // content to display from custom script + // content to display from custom script var fu = G.O.fnImgToolbarCustInit; if( fu !== null ) { typeof fu == 'function' ? fu(e) : window[fu](e); @@ -9563,9 +9598,9 @@ debugger; // custom elements var $cu = G.VOM.$viewer.find('.ngy2CustomBtn'); var fu = G.O.fnImgToolbarCustDisplay; - if( $cu.length > 0 && fu !== null ) { + if( $cu.length > 0 && fu !== null ) { typeof fu == 'function' ? fu($cu, item) : window[fu]($cu, item); - } + } // set event handlers again ViewerToolsOn(); @@ -9585,8 +9620,8 @@ debugger; G.VOM.content.current.$media[0].style[G.CSStransformName] = 'translate(' + posX + 'px, 0px)'; // }); - var itemPrevious = G.VOM.content.previous.NGY2Item(); - var itemNext = G.VOM.content.next.NGY2Item(); + var itemPrevious = G.VOM.content.previous.NGY2Item(); + var itemNext = G.VOM.content.next.NGY2Item(); // next/previous media if( G.O.imageTransition.startsWith('SWIPE') ) { @@ -9601,7 +9636,7 @@ debugger; if( G.O.imageTransition == 'SWIPE' ) { sc = 1; } if( posX > 0 ) { - let dir = G.VOM.window.lastWidth; + let dir = G.VOM.window.lastWidth; if( itemPrevious.mediaTransition() ) { // window.ng_draf( function() { G.VOM.content.previous.$media[0].style[G.CSStransformName] = 'translate(' + (-dir + posX) + 'px, 0px) scale(' + sc + ')'; @@ -9897,7 +9932,7 @@ debugger; ViewerSetMediaVisibility(G.VOM.content.previous, 0); if( nextItem.mediaKind == 'img' ) { G.VOM.ImageLoader.loadImage(VieweImgSizeRetrieved, nextItem); - } + } else { ViewerMediaCenterNotImg( G.VOM.content.next.$media ); } @@ -9960,13 +9995,13 @@ debugger; ViewerSetMediaVisibility(G.VOM.content.current, 1); G.VOM.zoom.userFactor = 1; } - - if( G.VOM.content.next.NGY2Item() == item ) { // next media - G.VOM.content.next.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader - } - if( G.VOM.content.previous.NGY2Item() == item ) { // previous media - G.VOM.content.previous.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader - } + + if( G.VOM.content.next.NGY2Item() == item ) { // next media + G.VOM.content.next.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader + } + if( G.VOM.content.previous.NGY2Item() == item ) { // previous media + G.VOM.content.previous.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader + } ViewerMediaSetPosAndZoom(); @@ -9982,7 +10017,7 @@ debugger; if( item.mediaKind == 'img' && item.imageWidth == 0 ) { // do not display image if width is unknown (--> callback will set the width when know) // setting opacity to 0 is not enough -> it is mandatory to change also the visibility to hidden to avoid responds to events (click/touch) - // $media.children().css({ opacity: 0, visibility: 'hidden' }); + // $media.children().css({ opacity: 0, visibility: 'hidden' }); $media.children().eq(1).css({ opacity: 0, visibility: 'hidden' }); // hide media // $media.css({ opacity: 0, visibility: 'hidden' }); return; @@ -9995,7 +10030,7 @@ debugger; } else { // $media.css({ opacity: opacity, visibility: 'visible' }); - $media.children().css({ opacity: opacity, visibility: 'visible' }); // display media + $media.children().css({ opacity: opacity, visibility: 'visible' }); // display media } } @@ -10384,13 +10419,13 @@ debugger; // PAN on gallery (pagination) G.GOM.hammertime.on('pan', function(ev) { if( !G.VOM.viewerDisplayed ) { - if( G.O.paginationSwipe && G.layout.support.rows && G.galleryDisplayMode.Get() == 'PAGINATION' ) { - if( Math.abs(ev.deltaY) > G.GOM.panThreshold ) { - G.GOM.panYOnly = true; - } + if( G.O.paginationSwipe && G.layout.support.rows && G.galleryDisplayMode.Get() == 'PAGINATION' ) { + if( Math.abs(ev.deltaY) > G.GOM.panThreshold ) { + G.GOM.panYOnly = true; + } if( !G.GOM.panYOnly ) { - G.$E.conTn.css( G.CSStransformName , 'translate('+(ev.deltaX)+'px,0px)'); - } + G.$E.conTn.css( G.CSStransformName , 'translate('+(ev.deltaX)+'px,0px)'); + } } } }); @@ -10405,8 +10440,8 @@ debugger; if( ev.deltaX < -50 ) { paginationNextPage(); return; - } - } + } + } G.GOM.panYOnly = false; G.$E.conTn.css( G.CSStransformName , 'translate(0px,0px)'); // pX=0; @@ -10495,7 +10530,7 @@ debugger; } // lightbox: hide tools/gallery after defined delay - G.VOM.toolsHide = debounce( ViewerToolsHide, G.O.viewerHideToolsDelay, false ); + G.VOM.toolsHide = debounceMulti( ViewerToolsHide, G.O.viewerHideToolsDelay, false ); // Keyboard management jQuery(document).keyup(function(e) { @@ -10556,6 +10591,8 @@ debugger; // mouse move -> unhide lightbox toolbars jQuery(window).bind('mousemove', function(e){ if( G.VOM.viewerDisplayed ) { + // While the user moves the mouse, we want the toolbar to stay visible + G.VOM.lastUnhideTime = Date.now(); if( G.VOM.toolbarsDisplayed == false ) { G.VOM.singletapTime = new Date().getTime(); // to avoid conflict with SINGLETAP event debounce( ViewerToolsUnHide, 100, false )(); From 70cf22b0e1a819033300ea95bce9bdfb4454fb35 Mon Sep 17 00:00:00 2001 From: Luca Venturi Date: Tue, 29 Dec 2020 00:38:47 +0100 Subject: [PATCH 2/3] Adds preventHidingCallback(), to allow keeping the toolbars open based on the result of a callback --- src/jquery.nanogallery2.core.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/jquery.nanogallery2.core.js b/src/jquery.nanogallery2.core.js index ebb88e86..e754979e 100644 --- a/src/jquery.nanogallery2.core.js +++ b/src/jquery.nanogallery2.core.js @@ -1501,7 +1501,8 @@ todo: align : 'center', autoMinimize : 0, standard : 'minimizeButton,label', - minimized : 'minimizeButton,label,infoButton,shareButton,fullscreenButton' + minimized : 'minimizeButton,label,infoButton,shareButton,fullscreenButton', + preventHidingCallback: null }, viewerTools : { topLeft : 'pageCounter,playPauseButton', @@ -9209,6 +9210,9 @@ debugger; if( G.VOM.viewerDisplayed ) { let elapsedSinceLastUnHide = G.VOM.lastUnhideTime ? Date.now()-G.VOM.lastUnhideTime : G.O.viewerHideToolsDelay; + if (G.O.viewerToolbar.preventHidingCallback && G.O.viewerToolbar.preventHidingCallback()) + return Math.min(1000, G.O.viewerHideToolsDelay); + if (elapsedSinceLastUnHide>=G.O.viewerHideToolsDelay) { // Hide G.VOM.toolbarsDisplayed = false; ViewerToolsOpacity(0); From 1b8b4d770bb9efe0c62b336211d9b26dc2504fd0 Mon Sep 17 00:00:00 2001 From: Luca Venturi Date: Tue, 29 Dec 2020 00:58:58 +0100 Subject: [PATCH 3/3] Compilation fix --- src/jquery.nanogallery2.core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jquery.nanogallery2.core.js b/src/jquery.nanogallery2.core.js index e754979e..1f4a0fc2 100644 --- a/src/jquery.nanogallery2.core.js +++ b/src/jquery.nanogallery2.core.js @@ -10534,7 +10534,7 @@ debugger; } // lightbox: hide tools/gallery after defined delay - G.VOM.toolsHide = debounceMulti( ViewerToolsHide, G.O.viewerHideToolsDelay, false ); + G.VOM.toolsHide = debounceMulti( ViewerToolsHide, G.O.viewerHideToolsDelay); // Keyboard management jQuery(document).keyup(function(e) {