WordPress.org
Get WordPress

Plugin Directory

Changeset 2651890


Ignore:
Timestamp:
01/02/2022 07:16:49 PM (4 years ago)
Author:
aurelienpierre
Message:

Make the browser scroll on the full-height carousel and exhibition to center it exactly in the viewport.

Location:
photographers-galleries/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

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

    r2597568 r2651890  
    329329}
    330330
     331function scroll_to_view(elem) {
     332  // Ensure bloody browser scrolled for real to display the elem in viewport
     333  if (elem.offsetHeight <= window.innerHeight && elem.offsetHeight > 0.8 * window.innerHeight) {
     334    var bounding = elem.getBoundingClientRect();
     335    let padding = Math.max((window.innerHeight - elem.offsetHeight) / 2.0, 20.);
     336    window.scroll(window.scrollX, -padding + window.scrollY + bounding.top);
     337  }
     338}
     339
    331340window.addEventListener('scroll', function (event) {
    332341  if(isScrolling) clearTimeout(isScrolling);
    … …  
    337346    for (i = 0; i < carousels.length; i++) {
    338347      var elem = carousels[i];
    339       if (isInViewport(elem)) elem.focus({ preventScroll: true });
     348      if (isInViewport(elem))
     349      {
     350        elem.focus({ preventScroll: false });
     351        scroll_to_view(elem);
     352      }
    340353      else elem.blur();
    341354    }
    342355    for (i = 0; i < exhibitions.length; i++) {
    343356      var elem = exhibitions[i];
    344       if (isInViewport(elem)) elem.focus({ preventScroll: true });
     357      if (isInViewport(elem))
     358      {
     359        elem.focus({ preventScroll: false });
     360        scroll_to_view(elem);
     361      }
    345362      else elem.blur();
    346363    }
    347   }, 100);
     364  }, 200);
    348365}, { passive: true });

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

    r2597568 r2651890  
    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>=-.2*window.innerHeight&&bounding.left>=-.2*window.innerWidth&&bounding.bottom<=1.2*window.innerHeight&&bounding.right<=1.2*window.innerWidth};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:!0}):elem.blur()}for(i=0;i<exhibitions.length;i++){var elem=exhibitions[i];isInViewport(elem)?elem.focus({preventScroll:!0}):elem.blur()}}),100)}),{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(),result;return bounding.top>=-.2*window.innerHeight&&bounding.left>=-.2*window.innerWidth&&bounding.bottom<=1.2*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});

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

    r2615771 r2651890  
    99 * @license   GPL-2.0+
    1010 * @link      https://wordpress.org/plugins/photographers-galleries/
    11  * @copyright 2016-2021 Aurélien Pierre
     11 * @copyright 2016-2022 Aurélien Pierre
    1212 *
    1313 * @wordpress-plugin
    … …  
    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.0
     17 * Version:     1.1.2
    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.0');
    46   wp_register_script('pg-js', plugin_dir_url( __FILE__ ).'js/pg-script.min.js', array(), '1.1.0', true);
     45  wp_register_style('pg-css', plugin_dir_url( __FILE__ ).'css/pg-style.min.css', array(), '1.1.2');
     46  wp_register_script('pg-js', plugin_dir_url( __FILE__ ).'js/pg-script.min.js', array(), '1.1.2', true);
    4747}
    4848

  • photographers-galleries/trunk/readme.txt

    r2615771 r2651890  
    44Tags: gallery, html5, carousel, pictures, responsive, jetpack, photo, taxonomy, exif
    55Requires at least: 3.6
    6 Tested up to: 5.8.1
     6Tested up to: 5.8.2
     7Requires PHP: 7.4
    78Stable tag: trunk
    89License: GPLv2 or later
    … …  
    257258== Changelog ==
    258259
     260= 1.1.2 =
     261
     262Make the browser scroll on the full-height carousel and exhibition to center it exactly in the viewport.
     263
     264From now on, releases will get even version numbers (x.0, x.2, x.4) and odd numbers will be for development versions (x.1, x.3, x.5).
     265This will help cache and CDN invalidation based on versioning for people testing development versions.
     266
     267Happy New Year !
     268
    259269= 1.1.0 =
    260270
Note: See TracChangeset for help on using the changeset viewer.