WordPress.org
Get WordPress

Plugin Directory

Changeset 2652813


Ignore:
Timestamp:
01/04/2022 11:18:30 PM (4 years ago)
Author:
aurelienpierre
Message:

Improve the scroll capture

Location:
photographers-galleries/trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • photographers-galleries/trunk/css/pg-style.css

    r2615771 r2652813  
    3838.gallery figure.gallery-item a {
    3939  display: block;
     40}
     41
     42.gallery .wp-caption-text {
     43  line-height: 1.2em;
    4044}
    4145
    … …  
    6872  z-index: 10;
    6973  color: black;
    70   text-align: center;
     74  text-align: center;}
    7175}
    7276
    … …  
    233237  height: 100%;
    234238  padding: 0;
    235   margin: 0 10px;
     239  margin: 0 5px;
    236240  position: relative;
    237241  box-sizing: border-box;
    … …  
    268272  min-height: 150px;
    269273  width: auto;
    270   height: 90vh;
    271274  box-sizing: border-box;
    272275  border: none;
    273276  pointer-events: none;
     277}
     278
     279/* Image height :
     280 *   32 px : WP adminbar height
     281 *   1em : one line of text caption
     282 *   20 px : 2 × 10 px of carousel margins top/bottom
     283 */
     284
     285/* default */
     286.pg-carousel .gallery img {
     287  height: calc(100vh - 1.2em - 20px);
     288}
     289
     290.admin-bar .pg-carousel .gallery img {
     291  height: calc(100vh - 1.2em - 20px - 32px);
     292}
     293
     294/* no captions */
     295.pg-carousel.pg-no_caption .gallery img,
     296.pg-carousel.pg-hover_caption .gallery img {
     297  height: calc(100vh - 20px);
     298}
     299
     300.admin-bar .pg-carousel.pg-no_caption .gallery img,
     301.admin-bar .pg-carousel.pg-hover_caption .gallery img {
     302  height: calc(100vh - 20px - 32px);
    274303}
    275304

  • photographers-galleries/trunk/css/pg-style.min.css

    r2615771 r2652813  
    1 .gallery-columns-1{column-count:1}.gallery-columns-2{column-count:2}.gallery-columns-3{column-count:3}.gallery-columns-4{column-count:4}.gallery-columns-5{column-count:5}.gallery-columns-6{column-count:6}.gallery-columns-7{column-count:7}.gallery-columns-8{column-count:8}.gallery-columns-9{column-count:9}.gallery{column-gap:10px}.gallery figure{margin-bottom:10px;break-inside:avoid}.gallery figure.gallery-item a{display:block}.pg-align_caption .gallery{display:grid}.pg-no_caption .wp-caption-text{display:none;padding:0}.pg-carousel-wrapper .pg-no_caption img{height:calc(100vh - 50px)}.pg-hover_caption .wp-caption-text{position:absolute;bottom:0;left:0;right:0;display:none;background:rgba(255,255,255,.75);z-index:10;color:#000;text-align:center}.pg-hover_caption .gallery-item:active .wp-caption-text,.pg-hover_caption .gallery-item:focus .wp-caption-text,.pg-hover_caption .gallery-item:hover .wp-caption-text{display:block}.pg-hover_caption .gallery img{height:calc(100vh - 50px)}.pg-exhibition-wrapper{scroll-snap-align:start;scroll-snap-stop:always}.pg-carousel-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.pg-carousel .gallery figure.gallery-item,.pg-carousel .gallery figure.gallery-item .gallery-icon,.pg-carousel .gallery figure.gallery-item .gallery-icon img,.pg-carousel .gallery figure.gallery-item figcaption.wp-caption-text,.pg-exhibition .gallery figure.gallery-item,.pg-exhibition .gallery figure.gallery-item .gallery-icon,.pg-exhibition .gallery figure.gallery-item .gallery-icon img,.pg-exhibition .gallery figure.gallery-item figcaption.wp-caption-text{border:none}.pg-carousel .wp-caption-text,.pg-exhibition .wp-caption-text{text-align:right}.pg-carousel.pg-hover_caption .wp-caption-text,.pg-exhibition.pg-hover_caption .wp-caption-text{text-align:center}.pg-carousel-wrapper,.pg-exhibition-wrapper{box-sizing:border-box;display:block;width:100%;height:100%;overflow:hidden;position:relative}.pg-exhibition-wrapper{height:100vh}.pg-carousel,.pg-exhibition{width:100%;height:100%;display:block;overflow-x:scroll;overflow-y:visible;-ms-overflow-style:none;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom;padding:0;box-sizing:border-box;transition:transform .5s ease-out}.pg-carousel::-webkit-scrollbar,.pg-exhibition::-webkit-scrollbar{display:none}.pg-exhibition{padding:2em 1em}.pg-carousel header{position:absolute;font-size:1.1em;display:block;z-index:10;font-variant:small-caps;-moz-font-feature-settings:'smcp' on;-webkit-font-feature-settings:'smcp' on;-ms-font-feature-settings:'smcp' on;font-feature-settings:'smcp' on}.pg-carousel header{top:0;left:0;right:0;background:linear-gradient(to right,rgba(0,0,0,.9) 0,rgba(0,0,0,0)75%);padding:.5ex 1ex 1ex 1ex;color:#f2f2f2}.pg-carousel:active header,.pg-carousel:focus header,.pg-carousel:hover header{display:none}.pg-carousel .gallery{display:table;height:100%;width:100%;white-space:nowrap;position:relative;margin:10px -20px 10px -10px;padding:0;box-sizing:border-box;overflow:visible}.pg-exhibition .gallery,.pg-exhibition .gallery *{display:flex;justify-content:center;width:auto;height:auto;margin:0;padding:0;position:relative;box-sizing:border-box}.pg-exhibition.pg-no_caption .gallery .wp-caption-text{display:none}.pg-exhibition .gallery .wp-caption-text{text-align:right;line-height:2}.pg-exhibition .gallery{flex-direction:row;align-items:center;overflow:visible;height:100%;width:100%;max-width:100vw;max-height:100vh}.pg-carousel .gallery .gallery-item{display:inline-table;float:none;white-space:normal;width:auto;height:100%;padding:0;margin:0 10px;position:relative;box-sizing:border-box;border:none}.pg-exhibition .gallery .gallery-item{display:none;flex-direction:column;align-items:center;overflow:visible}.pg-exhibition-wrapper .gallery .gallery-icon{overflow:hidden}.pg-exhibition .gallery figure.active{display:flex}.pg-carousel .gallery .gallery-item:first-child{margin-left:0}.pg-carousel .gallery .gallery-item:last-child{margin-right:0}.pg-carousel .gallery img{max-height:100vh;max-width:none;min-width:150px;min-height:150px;width:auto;height:90vh;box-sizing:border-box;border:none;pointer-events:none}.pg-exhibition .gallery img{display:inline-flex;align-self:center;max-width:none;max-height:none;pointer-events:none}.pg-exhibition-wrapper .look-box,.pg-exhibition-wrapper .look-box-bright,.pg-exhibition-wrapper .look-box-dark,.pg-exhibition-wrapper .look-classic,.pg-exhibition-wrapper .look-modern{background:linear-gradient(180deg,#fff,rgba(0,0,0,.005)),radial-gradient(circle at center,#fff 0,rgba(255,255,255,.5) 50%,rgba(200,200,200,.67) 67%,rgba(200,200,200,.75) 75%,#fff 100%)}.pg-no_caption.look-box .pg-exhibition,.pg-no_caption.look-box-bright .pg-exhibition,.pg-no_caption.look-box-dark .pg-exhibition,.pg-no_caption.look-classic .pg-exhibition{padding:4em 2em}.pg-show_caption.look-box .pg-exhibition,.pg-show_caption.look-box-bright .pg-exhibition,.pg-show_caption.look-box-dark .pg-exhibition,.pg-show_caption.look-classic .pg-exhibition{padding:5em 2em}.pg-exhibition-wrapper .look-modern .gallery .gallery-icon{box-shadow:0 .5em 1em rgba(0,0,0,.25),0 1em 2em rgba(0,0,0,.25),0 .25em .5em rgba(0,0,0,.25)}.pg-exhibition-wrapper .look-classic .gallery figure.gallery-item .gallery-icon{padding:1em;background-color:#ededeb;border:.25em solid #333;box-shadow:0 .5em 1em rgba(0,0,0,.25),0 1em 2em rgba(0,0,0,.25),0 .25em .5em rgba(0,0,0,.25)}.pg-exhibition-wrapper .look-classic .gallery img{box-shadow:inset 0 2px 3px rgba(0,0,0,.1),inset 0 2px 2px rgba(0,0,0,.05);border-right:.1em solid #fcfcfa;border-left:.1em solid #fcfcfa;border-top:.1em solid #f2f2f0;border-bottom:.1em solid #fdfdfb;padding:.15em;background-color:#fff}.pg-exhibition-wrapper .look-box .gallery .gallery-icon,.pg-exhibition-wrapper .look-box-bright .gallery .gallery-icon,.pg-exhibition-wrapper .look-box-dark .gallery .gallery-icon{padding:1em;box-shadow:0 .5em 1em rgba(0,0,0,.25),0 1em 2em rgba(0,0,0,.25),0 .25em .5em rgba(0,0,0,.25),inset 0 .25em 1.5em 0 rgba(0,0,0,.75)}.pg-exhibition-wrapper .look-box .gallery img,.pg-exhibition-wrapper .look-box-bright .gallery img,.pg-exhibition-wrapper .look-box-dark .gallery img{box-shadow:0 .25em 1em rgba(0,0,0,.75)}.pg-exhibition-wrapper .look-box .gallery figure.gallery-item .gallery-icon{background-color:#777;border:.25em solid #666}.pg-exhibition-wrapper .look-box-dark .gallery figure.gallery-item .gallery-icon{background-color:#555;border:.25em solid #444}.pg-exhibition-wrapper .look-box-bright .gallery figure.gallery-item .gallery-icon{background-color:#999;border:.25em solid #888}.gallery-next,.gallery-prev{width:15%;height:100%;position:absolute;top:0;cursor:pointer;z-index:10}.gallery-prev{left:0}.gallery-next{right:0}.gallery-next span,.gallery-prev span{cursor:pointer;position:absolute;top:50%;text-align:center;padding:7px 2px;margin-top:-15px;font-size:15px;user-select:none;color:#333;font-weight:400;user-select:none;box-sizing:border-box;background-color:rgba(51,51,51,0)}.pg-exhibition .gallery-next span,.pg-exhibition .gallery-prev span{background-color:rgb(51,51,51,0)}.gallery-prev span{left:0;padding-right:10px;border-radius:0 19px 19px 0}.gallery-next span{right:0;padding-left:10px;border-radius:19px 0 0 19px}.gallery-next:hover span,.gallery-prev:hover span{opacity:80%}a.gallery-next:hover span,a.gallery-prev:hover span{background-color:rgba(0,0,0,1);opacity:80%;text-transform:none;text-decoration:none!important;color:#fff}
     1.gallery-columns-1{column-count:1}.gallery-columns-2{column-count:2}.gallery-columns-3{column-count:3}.gallery-columns-4{column-count:4}.gallery-columns-5{column-count:5}.gallery-columns-6{column-count:6}.gallery-columns-7{column-count:7}.gallery-columns-8{column-count:8}.gallery-columns-9{column-count:9}.gallery{column-gap:10px}.gallery figure{margin-bottom:10px;break-inside:avoid}.gallery figure.gallery-item a{display:block}.gallery .wp-caption-text{line-height:1.2em}.pg-align_caption .gallery{display:grid}.pg-no_caption .wp-caption-text{display:none;padding:0}.pg-carousel-wrapper .pg-no_caption img{height:calc(100vh - 50px)}.pg-hover_caption .wp-caption-text{position:absolute;bottom:0;left:0;right:0;display:none;background:rgba(255,255,255,.75);z-index:10;color:#000;text-align:center}.pg-hover_caption .gallery-item:active .wp-caption-text,.pg-hover_caption .gallery-item:focus .wp-caption-text{display:block}.pg-hover_caption .gallery img{height:calc(100vh - 50px)}.pg-exhibition-wrapper{scroll-snap-align:start;scroll-snap-stop:always}.pg-carousel-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.pg-carousel .gallery figure.gallery-item,.pg-carousel .gallery figure.gallery-item .gallery-icon,.pg-carousel .gallery figure.gallery-item .gallery-icon img,.pg-carousel .gallery figure.gallery-item figcaption.wp-caption-text,.pg-exhibition .gallery figure.gallery-item,.pg-exhibition .gallery figure.gallery-item .gallery-icon,.pg-exhibition .gallery figure.gallery-item .gallery-icon img,.pg-exhibition .gallery figure.gallery-item figcaption.wp-caption-text{border:none}.pg-carousel .wp-caption-text,.pg-exhibition .wp-caption-text{text-align:right}.pg-carousel.pg-hover_caption .wp-caption-text,.pg-exhibition.pg-hover_caption .wp-caption-text{text-align:center}.pg-carousel-wrapper,.pg-exhibition-wrapper{box-sizing:border-box;display:block;width:100%;height:100%;overflow:hidden;position:relative}.pg-exhibition-wrapper{height:100vh}.pg-carousel,.pg-exhibition{width:100%;height:100%;display:block;overflow-x:scroll;overflow-y:visible;-ms-overflow-style:none;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom;padding:0;box-sizing:border-box;transition:transform .5s ease-out}.pg-carousel::-webkit-scrollbar,.pg-exhibition::-webkit-scrollbar{display:none}.pg-exhibition{padding:2em 1em}.pg-carousel header{position:absolute;font-size:1.1em;display:block;z-index:10;font-variant:small-caps;-moz-font-feature-settings:'smcp' on;-webkit-font-feature-settings:'smcp' on;-ms-font-feature-settings:'smcp' on;font-feature-settings:'smcp' on}.pg-carousel header{top:0;left:0;right:0;background:linear-gradient(to right,rgba(0,0,0,.9) 0,rgba(0,0,0,0)75%);padding:.5ex 1ex 1ex 1ex;color:#f2f2f2}.pg-carousel:active header,.pg-carousel:focus header,.pg-carousel:hover header{display:none}.pg-carousel .gallery{display:table;height:100%;width:100%;white-space:nowrap;position:relative;margin:10px -20px 10px -10px;padding:0;box-sizing:border-box;overflow:visible}.pg-exhibition .gallery,.pg-exhibition .gallery *{display:flex;justify-content:center;width:auto;height:auto;margin:0;padding:0;position:relative;box-sizing:border-box}.pg-exhibition.pg-no_caption .gallery .wp-caption-text{display:none}.pg-exhibition .gallery .wp-caption-text{text-align:right;line-height:2}.pg-exhibition .gallery{flex-direction:row;align-items:center;overflow:visible;height:100%;width:100%;max-width:100vw;max-height:100vh}.pg-carousel .gallery .gallery-item{display:inline-table;float:none;white-space:normal;width:auto;height:100%;padding:0;margin:0 5px;position:relative;box-sizing:border-box;border:none}.pg-exhibition .gallery .gallery-item{display:none;flex-direction:column;align-items:center;overflow:visible}.pg-exhibition-wrapper .gallery .gallery-icon{overflow:hidden}.pg-exhibition .gallery figure.active{display:flex}.pg-carousel .gallery .gallery-item:first-child{margin-left:0}.pg-carousel .gallery .gallery-item:last-child{margin-right:0}.pg-carousel .gallery img{max-height:100vh;max-width:none;min-width:150px;min-height:150px;width:auto;box-sizing:border-box;border:none;pointer-events:none}.pg-carousel .gallery img{height:calc(100vh - 1.2em - 20px)}.admin-bar .pg-carousel .gallery img{height:calc(100vh - 1.2em - 20px - 32px)}.pg-carousel.pg-hover_caption .gallery img,.pg-carousel.pg-no_caption .gallery img{height:calc(100vh - 20px)}.admin-bar .pg-carousel.pg-hover_caption .gallery img,.admin-bar .pg-carousel.pg-no_caption .gallery img{height:calc(100vh - 20px - 32px)}.pg-exhibition .gallery img{display:inline-flex;align-self:center;max-width:none;max-height:none;pointer-events:none}.pg-exhibition-wrapper .look-box,.pg-exhibition-wrapper .look-box-bright,.pg-exhibition-wrapper .look-box-dark,.pg-exhibition-wrapper .look-classic,.pg-exhibition-wrapper .look-modern{background:linear-gradient(180deg,#fff,rgba(0,0,0,.005)),radial-gradient(circle at center,#fff 0,rgba(255,255,255,.5) 50%,rgba(200,200,200,.67) 67%,rgba(200,200,200,.75) 75%,#fff 100%)}.pg-no_caption.look-box .pg-exhibition,.pg-no_caption.look-box-bright .pg-exhibition,.pg-no_caption.look-box-dark .pg-exhibition,.pg-no_caption.look-classic .pg-exhibition{padding:4em 2em}.pg-show_caption.look-box .pg-exhibition,.pg-show_caption.look-box-bright .pg-exhibition,.pg-show_caption.look-box-dark .pg-exhibition,.pg-show_caption.look-classic .pg-exhibition{padding:5em 2em}.pg-exhibition-wrapper .look-modern .gallery .gallery-icon{box-shadow:0 .5em 1em rgba(0,0,0,.25),0 1em 2em rgba(0,0,0,.25),0 .25em .5em rgba(0,0,0,.25)}.pg-exhibition-wrapper .look-classic .gallery figure.gallery-item .gallery-icon{padding:1em;background-color:#ededeb;border:.25em solid #333;box-shadow:0 .5em 1em rgba(0,0,0,.25),0 1em 2em rgba(0,0,0,.25),0 .25em .5em rgba(0,0,0,.25)}.pg-exhibition-wrapper .look-classic .gallery img{box-shadow:inset 0 2px 3px rgba(0,0,0,.1),inset 0 2px 2px rgba(0,0,0,.05);border-right:.1em solid #fcfcfa;border-left:.1em solid #fcfcfa;border-top:.1em solid #f2f2f0;border-bottom:.1em solid #fdfdfb;padding:.15em;background-color:#fff}.pg-exhibition-wrapper .look-box .gallery .gallery-icon,.pg-exhibition-wrapper .look-box-bright .gallery .gallery-icon,.pg-exhibition-wrapper .look-box-dark .gallery .gallery-icon{padding:1em;box-shadow:0 .5em 1em rgba(0,0,0,.25),0 1em 2em rgba(0,0,0,.25),0 .25em .5em rgba(0,0,0,.25),inset 0 .25em 1.5em 0 rgba(0,0,0,.75)}.pg-exhibition-wrapper .look-box .gallery img,.pg-exhibition-wrapper .look-box-bright .gallery img,.pg-exhibition-wrapper .look-box-dark .gallery img{box-shadow:0 .25em 1em rgba(0,0,0,.75)}.pg-exhibition-wrapper .look-box .gallery figure.gallery-item .gallery-icon{background-color:#777;border:.25em solid #666}.pg-exhibition-wrapper .look-box-dark .gallery figure.gallery-item .gallery-icon{background-color:#555;border:.25em solid #444}.pg-exhibition-wrapper .look-box-bright .gallery figure.gallery-item .gallery-icon{background-color:#999;border:.25em solid #888}.gallery-next,.gallery-prev{width:15%;height:100%;position:absolute;top:0;cursor:pointer;z-index:10}.gallery-prev{left:0}.gallery-next{right:0}.gallery-next span,.gallery-prev span{cursor:pointer;position:absolute;top:50%;text-align:center;padding:7px 2px;margin-top:-15px;font-size:15px;user-select:none;color:#333;font-weight:400;user-select:none;box-sizing:border-box;background-color:rgba(51,51,51,0)}.pg-exhibition .gallery-next span,.pg-exhibition .gallery-prev span{background-color:rgb(51,51,51,0)}.gallery-prev span{left:0;padding-right:10px;border-radius:0 19px 19px 0}.gallery-next span{right:0;padding-left:10px;border-radius:19px 0 0 19px}.gallery-next:hover span,.gallery-prev:hover span{opacity:80%}a.gallery-next:hover span,a.gallery-prev:hover span{background-color:rgba(0,0,0,1);opacity:80%;text-transform:none;text-decoration:none!important;color:#fff}

  • photographers-galleries/trunk/js/pg-script.js

    r2652370 r2652813  
    318318  // from https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
    319319  var bounding = elem.getBoundingClientRect();
     320  var threshold = 0.1;
     321
     322  if (CaptureScroll) {
     323    // If the scroll is being captured, the image already fits perfectly in viewport
     324    // This means that, as soon as the view is moved, we need release the lock
     325    // otherwise the view sticks and it's super annoying
     326    threshold = 0.01;
     327  }
    320328
    321329  // if element does not perfectly fit in viewport, allow 20 % of safety margin in every direction
    322330  var result = (
    323     bounding.top >= -0.1 * window.innerHeight &&
     331    bounding.top >= -threshold * window.innerHeight &&
    324332    bounding.left >= -0.2 * window.innerWidth &&
    325     bounding.bottom <= 1.1 * window.innerHeight &&
     333    bounding.bottom <= (1. + threshold) * window.innerHeight &&
    326334    bounding.right <= 1.2 * window.innerWidth
    327335  );
    328336  return result;
    329337}
     338
     339/**
     340 * Declare a custom event to be triggered when Photographers Galleries forces a scroll
     341 * on the current carrousel or exhibition. This event can be listened to update the view,
     342 * for example to remove toolbars and menus and clear out the viewport
     343 **/
     344const PhotoGalleryEventCapture = new Event('PhotoGalleryCaptureScroll');
     345const PhotoGalleryEventRelease = new Event('PhotoGalleryReleaseScroll');
     346var CaptureScroll = false;
    330347
    331348function scroll_to_view(elem) {
    … …  
    333350  if (elem.offsetHeight <= window.innerHeight && elem.offsetHeight > 0.8 * window.innerHeight) {
    334351    var bounding = elem.getBoundingClientRect();
    335     let padding = Math.max((window.innerHeight - elem.offsetHeight) / 2.0, 20.);
     352    var padding = (window.innerHeight - elem.offsetHeight) / 2.0 + 5.0;
     353
     354    // Compensate for WP admin bar
     355    var adminBar = document.getElementById('wpadminbar');
     356    if (adminBar) padding += adminBar.offsetHeight / 2.0;
    336357    window.scroll(window.scrollX, -padding + window.scrollY + bounding.top);
     358
     359    // Dispatch our custom event
     360    window.dispatchEvent(PhotoGalleryEventCapture);
    337361  }
    338362}
    … …  
    343367    var carousels = document.getElementsByClassName('pg-carousel');
    344368    var exhibitions = document.getElementsByClassName('pg-exhibition');
     369
     370    var release = true;
    345371
    346372    for (i = 0; i < carousels.length; i++) {
    … …  
    350376        elem.focus({ preventScroll: false });
    351377        scroll_to_view(elem);
     378        release = false;
    352379      }
    353380      else elem.blur();
    … …  
    359386        elem.focus({ preventScroll: false });
    360387        scroll_to_view(elem);
     388        release = false;
    361389      }
    362390      else elem.blur();
    363391    }
     392
     393    if(release) window.dispatchEvent(PhotoGalleryEventRelease);
    364394  }, 200);
    365395}, { passive: true });
     396
     397
     398// Record the scroll capture state
     399window.addEventListener('PhotoGalleryCaptureScroll', function (event) {
     400  CaptureScroll = true;
     401}, { passive: true });
     402
     403window.addEventListener('PhotoGalleryReleaseScroll', function (event) {
     404  CaptureScroll = false;
     405}, { passive: true });

  • photographers-galleries/trunk/js/pg-script.min.js

    r2652370 r2652813  
    1 function Scroll(n,id){var matte=document.getElementById(id),current_position=matte.scrollLeft+matte.offsetWidth/2,images=matte.querySelectorAll("figure"),centers=[],widths=[];images.forEach((function(img){var half_width=img.offsetWidth/2;centers.push(img.offsetLeft+half_width),widths.push(half_width)}));for(var current_index=0,distance=9999999999,i=0;i<centers.length;i++){var current_distance=Math.abs(current_position-centers[i]);current_distance<distance&&(distance=current_distance,current_index=i)}(current_index+=n)<0&&(current_index=0),current_index>centers.length-1&&(current_index=centers.length-1);var position=centers[current_index]-matte.offsetWidth/2;matte.scroll({left:position,behavior:"smooth"})}var timer,scroll_timeout,resize_timeout;function updateArrows(event,id){clearTimeout(timer),timer=setTimeout((function(){var matte=document.getElementById(id),arrow_left=matte.getElementsByClassName("gallery-prev")[0],arrow_right=matte.getElementsByClassName("gallery-next")[0];0==matte.scrollLeft?arrow_left.style.display="none":arrow_left.style.display="block",matte.scrollLeft==matte.scrollLeftMax?arrow_right.style.display="none":arrow_right.style.display="block"}),300)}function removeArrows(matte){var arrow_left=matte.getElementsByClassName("gallery-prev")[0],arrow_right=matte.getElementsByClassName("gallery-next")[0];arrow_left.style.display="none",arrow_right.style.display="none"}function preload(matte,next_image){var img=next_image.querySelectorAll("img")[0];if(!("preloaded"in img.dataset&&"true"==img.dataset.preloaded)){delete img.dataset.sizes,img.classList.remove("lazyload","lazyloaded","lazyautosizes"),getComputedStyle(matte);var gallery=matte.getElementsByClassName("gallery")[0],maxHeight=Math.min(window.innerHeight,gallery.clientHeight),maxWidth=Math.min(window.innerWidth,gallery.clientWidth),ratio_view=maxWidth/maxHeight,ratio_img=img.width/img.height,ratio_ratios=ratio_view/ratio_img,final_height,final_width;ratio_ratios<1&&ratio_img<1?(final_height=maxWidth/ratio_img,final_width=maxWidth):ratio_ratios>1&&ratio_img<1?(final_height=maxHeight,final_width=maxHeight*ratio_img):ratio_ratios<1&&ratio_img>1?(final_height=maxWidth/ratio_img,final_width=maxWidth):ratio_ratios>1&&ratio_img>1?(final_height=maxHeight,final_width=maxHeight*ratio_img):1==ratio_img?(final_height=Math.min(maxHeight,maxWidth),final_width=Math.min(maxHeight,maxWidth)):(final_height=maxHeight,final_width=maxWidth),img.sizes=final_width+"px",img.style.width=final_width+"px",img.style.height=final_height+"px","srcset"in img.dataset&&(img.srcset=img.dataset.srcset),"src"in img.dataset&&(img.src=img.dataset.src),"origSrc"in img.dataset&&img.src!=img.dataset.origSrc&&(img.src=img.dataset.origSrc),img.loading="eager",img.setAttribute("data-preloaded","true")}}function salvageIndex(i,figures){var nb_figures=figures.length;return i<0?nb_figures-1:i>nb_figures-1?0:i}function ScrollInc(n,id){clearTimeout(scroll_timeout),scroll_timeout=setTimeout((function(){for(var matte=document.getElementById(id),figures=matte.querySelectorAll("figure"),nb_figures=figures.length,current_index=0,new_index=0,i=0;i<nb_figures;i++)figures[i].classList.contains("active")&&(current_index=i,figures[i].classList.remove("active"));var new_index;preload(matte,figures[new_index=salvageIndex(current_index+n,figures)]);var img=figures[new_index].querySelectorAll("img")[0];figures[new_index].classList.add("active"),0==n?(preload(matte,figures[salvageIndex(-1,figures)]),preload(matte,figures[salvageIndex(1,figures)]),1==nb_figures&&removeArrows(matte)):preload(matte,figures[salvageIndex(new_index+n,figures)])}),250)}window.addEventListener("resize",(function(){resize_timeout=setTimeout((function(){for(var mattes=document.getElementsByClassName("pg-exhibition"),j=0;j<mattes.length;j++){console.log("window resized, exhibitions reset");for(var figures=mattes[j].querySelectorAll("figure"),active_index=-1,i=0;i<figures.length;i++){var img=figures[i].querySelectorAll("img")[0];"preloaded"in img.dataset&&"true"==img.dataset.preloaded&&(img.setAttribute("data-preloaded","false"),img.loading="lazyload",img.sizes="",img.style.width="",img.style.height="",figures[i].classList.contains("active")&&(active_index=i))}active_index>-1&&(preload(matte,figures[active_index]),preload(matte,figures[salvageIndex(active_index-1,figures)]),preload(matte,figures[salvageIndex(active_index+1,figures)]))}}),500)}));var isScrolling=!1;function jumpScroll(event,id){var scrollX=0,line_to_pixel=1,line_height=1.5*parseFloat(getComputedStyle(event.currentTarget).fontSize);1==event.deltaMode&&(line_to_pixel=line_height),Math.abs(event.deltaY*line_to_pixel)<line_height&&event.preventDefault(),clearTimeout(isScrolling),scrollX+=event.deltaX,isScrolling=setTimeout((function(){var n;ScrollInc(scrollX<0?-1:scrollX>0?1:0,id),scrollX=0}),50)}var touchHandler=null;const time_threshold=80,distance_threshold=100;function swipeStart(event,id){var touchobj=event.changedTouches[0];touchHandler={container:document.getElementById(id),startX:touchobj.pageX,startY:touchobj.pageY,startTime:(new Date).getTime()},console.log(touchHandler)}function swipeEnd(event,id){var touchobj=event.changedTouches[0],matte=document.getElementById(id);if(!touchHandler)return;if(matte!=touchHandler.container)return;const distanceX=touchobj.pageX-touchHandler.startX,distanceY=touchobj.pageY-touchHandler.startY,duration=(new Date).getTime()-touchHandler.startTime;duration>80&&Math.abs(distanceX)>100&&Math.abs(distanceX)>Math.abs(distanceY)&&(distanceX<0?ScrollInc(1,id):distanceX>0&&ScrollInc(-1,id),console.log("swipeEnd")),touchHandler=null}var isInViewport=function(elem){var bounding=elem.getBoundingClientRect(),result;return bounding.top>=-.1*window.innerHeight&&bounding.left>=-.2*window.innerWidth&&bounding.bottom<=1.1*window.innerHeight&&bounding.right<=1.2*window.innerWidth};function scroll_to_view(elem){if(elem.offsetHeight<=window.innerHeight&&elem.offsetHeight>.8*window.innerHeight){var bounding=elem.getBoundingClientRect();let padding=Math.max((window.innerHeight-elem.offsetHeight)/2,20);window.scroll(window.scrollX,-padding+window.scrollY+bounding.top)}}window.addEventListener("scroll",(function(event){isScrolling&&clearTimeout(isScrolling),isScrolling=setTimeout((function(){var carousels=document.getElementsByClassName("pg-carousel"),exhibitions=document.getElementsByClassName("pg-exhibition");for(i=0;i<carousels.length;i++){var elem=carousels[i];isInViewport(elem)?(elem.focus({preventScroll:!1}),scroll_to_view(elem)):elem.blur()}for(i=0;i<exhibitions.length;i++){var elem=exhibitions[i];isInViewport(elem)?(elem.focus({preventScroll:!1}),scroll_to_view(elem)):elem.blur()}}),200)}),{passive:!0});
     1function Scroll(n,id){var matte=document.getElementById(id),current_position=matte.scrollLeft+matte.offsetWidth/2,images=matte.querySelectorAll("figure"),centers=[],widths=[];images.forEach((function(img){var half_width=img.offsetWidth/2;centers.push(img.offsetLeft+half_width),widths.push(half_width)}));for(var current_index=0,distance=9999999999,i=0;i<centers.length;i++){var current_distance=Math.abs(current_position-centers[i]);current_distance<distance&&(distance=current_distance,current_index=i)}(current_index+=n)<0&&(current_index=0),current_index>centers.length-1&&(current_index=centers.length-1);var position=centers[current_index]-matte.offsetWidth/2;matte.scroll({left:position,behavior:"smooth"})}var timer,scroll_timeout,resize_timeout;function updateArrows(event,id){clearTimeout(timer),timer=setTimeout((function(){var matte=document.getElementById(id),arrow_left=matte.getElementsByClassName("gallery-prev")[0],arrow_right=matte.getElementsByClassName("gallery-next")[0];0==matte.scrollLeft?arrow_left.style.display="none":arrow_left.style.display="block",matte.scrollLeft==matte.scrollLeftMax?arrow_right.style.display="none":arrow_right.style.display="block"}),300)}function removeArrows(matte){var arrow_left=matte.getElementsByClassName("gallery-prev")[0],arrow_right=matte.getElementsByClassName("gallery-next")[0];arrow_left.style.display="none",arrow_right.style.display="none"}function preload(matte,next_image){var img=next_image.querySelectorAll("img")[0];if(!("preloaded"in img.dataset&&"true"==img.dataset.preloaded)){delete img.dataset.sizes,img.classList.remove("lazyload","lazyloaded","lazyautosizes"),getComputedStyle(matte);var gallery=matte.getElementsByClassName("gallery")[0],maxHeight=Math.min(window.innerHeight,gallery.clientHeight),maxWidth=Math.min(window.innerWidth,gallery.clientWidth),ratio_view=maxWidth/maxHeight,ratio_img=img.width/img.height,ratio_ratios=ratio_view/ratio_img,final_height,final_width;ratio_ratios<1&&ratio_img<1?(final_height=maxWidth/ratio_img,final_width=maxWidth):ratio_ratios>1&&ratio_img<1?(final_height=maxHeight,final_width=maxHeight*ratio_img):ratio_ratios<1&&ratio_img>1?(final_height=maxWidth/ratio_img,final_width=maxWidth):ratio_ratios>1&&ratio_img>1?(final_height=maxHeight,final_width=maxHeight*ratio_img):1==ratio_img?(final_height=Math.min(maxHeight,maxWidth),final_width=Math.min(maxHeight,maxWidth)):(final_height=maxHeight,final_width=maxWidth),img.sizes=final_width+"px",img.style.width=final_width+"px",img.style.height=final_height+"px","srcset"in img.dataset&&(img.srcset=img.dataset.srcset),"src"in img.dataset&&(img.src=img.dataset.src),"origSrc"in img.dataset&&img.src!=img.dataset.origSrc&&(img.src=img.dataset.origSrc),img.loading="eager",img.setAttribute("data-preloaded","true")}}function salvageIndex(i,figures){var nb_figures=figures.length;return i<0?nb_figures-1:i>nb_figures-1?0:i}function ScrollInc(n,id){clearTimeout(scroll_timeout),scroll_timeout=setTimeout((function(){for(var matte=document.getElementById(id),figures=matte.querySelectorAll("figure"),nb_figures=figures.length,current_index=0,new_index=0,i=0;i<nb_figures;i++)figures[i].classList.contains("active")&&(current_index=i,figures[i].classList.remove("active"));var new_index;preload(matte,figures[new_index=salvageIndex(current_index+n,figures)]);var img=figures[new_index].querySelectorAll("img")[0];figures[new_index].classList.add("active"),0==n?(preload(matte,figures[salvageIndex(-1,figures)]),preload(matte,figures[salvageIndex(1,figures)]),1==nb_figures&&removeArrows(matte)):preload(matte,figures[salvageIndex(new_index+n,figures)])}),250)}window.addEventListener("resize",(function(){resize_timeout=setTimeout((function(){for(var mattes=document.getElementsByClassName("pg-exhibition"),j=0;j<mattes.length;j++){console.log("window resized, exhibitions reset");for(var figures=mattes[j].querySelectorAll("figure"),active_index=-1,i=0;i<figures.length;i++){var img=figures[i].querySelectorAll("img")[0];"preloaded"in img.dataset&&"true"==img.dataset.preloaded&&(img.setAttribute("data-preloaded","false"),img.loading="lazyload",img.sizes="",img.style.width="",img.style.height="",figures[i].classList.contains("active")&&(active_index=i))}active_index>-1&&(preload(matte,figures[active_index]),preload(matte,figures[salvageIndex(active_index-1,figures)]),preload(matte,figures[salvageIndex(active_index+1,figures)]))}}),500)}));var isScrolling=!1;function jumpScroll(event,id){var scrollX=0,line_to_pixel=1,line_height=1.5*parseFloat(getComputedStyle(event.currentTarget).fontSize);1==event.deltaMode&&(line_to_pixel=line_height),Math.abs(event.deltaY*line_to_pixel)<line_height&&event.preventDefault(),clearTimeout(isScrolling),scrollX+=event.deltaX,isScrolling=setTimeout((function(){var n;ScrollInc(scrollX<0?-1:scrollX>0?1:0,id),scrollX=0}),50)}var touchHandler=null;const time_threshold=80,distance_threshold=100;function swipeStart(event,id){var touchobj=event.changedTouches[0];touchHandler={container:document.getElementById(id),startX:touchobj.pageX,startY:touchobj.pageY,startTime:(new Date).getTime()},console.log(touchHandler)}function swipeEnd(event,id){var touchobj=event.changedTouches[0],matte=document.getElementById(id);if(!touchHandler)return;if(matte!=touchHandler.container)return;const distanceX=touchobj.pageX-touchHandler.startX,distanceY=touchobj.pageY-touchHandler.startY,duration=(new Date).getTime()-touchHandler.startTime;duration>80&&Math.abs(distanceX)>100&&Math.abs(distanceX)>Math.abs(distanceY)&&(distanceX<0?ScrollInc(1,id):distanceX>0&&ScrollInc(-1,id),console.log("swipeEnd")),touchHandler=null}var isInViewport=function(elem){var bounding=elem.getBoundingClientRect(),threshold=.1,result;return CaptureScroll&&(threshold=.01),bounding.top>=-threshold*window.innerHeight&&bounding.left>=-.2*window.innerWidth&&bounding.bottom<=(1+threshold)*window.innerHeight&&bounding.right<=1.2*window.innerWidth};const PhotoGalleryEventCapture=new Event("PhotoGalleryCaptureScroll"),PhotoGalleryEventRelease=new Event("PhotoGalleryReleaseScroll");var CaptureScroll=!1;function scroll_to_view(elem){if(elem.offsetHeight<=window.innerHeight&&elem.offsetHeight>.8*window.innerHeight){var bounding=elem.getBoundingClientRect(),padding=(window.innerHeight-elem.offsetHeight)/2+5,adminBar=document.getElementById("wpadminbar");adminBar&&(padding+=adminBar.offsetHeight/2),window.scroll(window.scrollX,-padding+window.scrollY+bounding.top),window.dispatchEvent(PhotoGalleryEventCapture)}}window.addEventListener("scroll",(function(event){isScrolling&&clearTimeout(isScrolling),isScrolling=setTimeout((function(){var carousels=document.getElementsByClassName("pg-carousel"),exhibitions=document.getElementsByClassName("pg-exhibition"),release=!0;for(i=0;i<carousels.length;i++){var elem=carousels[i];isInViewport(elem)?(elem.focus({preventScroll:!1}),scroll_to_view(elem),release=!1):elem.blur()}for(i=0;i<exhibitions.length;i++){var elem=exhibitions[i];isInViewport(elem)?(elem.focus({preventScroll:!1}),scroll_to_view(elem),release=!1):elem.blur()}release&&window.dispatchEvent(PhotoGalleryEventRelease)}),200)}),{passive:!0}),window.addEventListener("PhotoGalleryCaptureScroll",(function(event){CaptureScroll=!0}),{passive:!0}),window.addEventListener("PhotoGalleryReleaseScroll",(function(event){CaptureScroll=!1}),{passive:!0});

  • photographers-galleries/trunk/photographers-galleries.php

    r2652370 r2652813  
    1515 * Plugin URI:  https://wordpress.org/plugins/photographers-galleries/
    1616 * Description: Enhance your galleries with HTML5, metadata, dynamic galleries and add a lightweight carousel to display a sequence of pictures without distractions.
    17  * Version:     1.1.4
     17 * Version:     1.1.6
    1818 * Author:      Aurélien PIERRE
    1919 * Author URI:  https://photo.aurelienpierre.com
    … …  
    4343
    4444function register_pg_styles() {
    45   wp_register_style('pg-css', plugin_dir_url( __FILE__ ).'css/pg-style.min.css', array(), '1.1.4');
    46   wp_register_script('pg-js', plugin_dir_url( __FILE__ ).'js/pg-script.min.js', array(), '1.1.4', true);
     45  wp_register_style('pg-css', plugin_dir_url( __FILE__ ).'css/pg-style.min.css', array(), '1.1.6');
     46  wp_register_script('pg-js', plugin_dir_url( __FILE__ ).'js/pg-script.min.js', array(), '1.1.6', true);
    4747}
    4848

  • photographers-galleries/trunk/readme.txt

    r2652370 r2652813  
    258258== Changelog ==
    259259
     260= 1.1.6 =
     261
     262- Improve the scroll capture detection when carousels and exhibitions take focus,
     263- Size the carrousel's height accordingly to WP admin bar (if present) and captions,
     264- Auto-scroll on carousels and exhibitions depending on WP admin bar,
     265- Add 2 custom Javascript events for developers : `PhotoGalleryCaptureScroll` and `PhotoGalleryReleaseScroll`.
     266  The first gets fired when carousels and exhibitions take focus and force a scroll to fit them in viewport.
     267    The second gets fired when carousels and exhibitions loose focus. These can be listened to show/hide elements.
     268
    260269= 1.1.4 =
    261270
Note: See TracChangeset for help on using the changeset viewer.