PluginProbe
GutSlider – All in One Slider and Carousel Blocks for Gutenberg / 3.2.0
GutSlider – All in One Slider and Carousel Blocks for Gutenberg v3.2.0
3.2.0 3.1.0 3.0.0 2.13.2 2.13.1 2.13.0 trunk 1.0.0 2.1.0 2.10.0 2.10.1 2.11.0 2.11.1 2.11.2 2.11.3 2.11.4 2.12.0 2.2.1 2.2.2 2.3.0 2.4.0 2.5.1 2.5.3 2.5.4 2.5.5 All 57 releases
slider-blocks / build / blocks / before-after / frontend.js

frontend.js in GutSlider – All in One Slider and Carousel Blocks for Gutenberg 3.2.0, at build/blocks/before-after/frontend.js

1 lines 6.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 (()=>{"use strict";const e=()=>document.querySelectorAll(".wp-block-gutsliders-before-after").forEach((e=>{e.querySelectorAll(".gs-ba").forEach((e=>function(e,{live:t=!0,onChange:s}={}){const r=e?.querySelector(".gs-ba__handle");if(!e||!r)return()=>{};const n=e.ownerDocument,o=n.defaultView||window,a=["fade","toggle"].includes(e.dataset.compare)?e.dataset.compare:"slide",i="slide"===a&&"vertical"===e.dataset.orientation,l="slide"===a&&"hover"===e.dataset.mode,c="toggle"!==a&&"1"===e.dataset.handleOnly,u="toggle"!==a&&"1"===e.dataset.disabled,d=o.matchMedia?.("(prefers-reduced-motion: reduce)").matches,g=[],p=(e,t,s,r)=>{e.addEventListener(t,s,r),g.push((()=>e.removeEventListener(t,s,r)))},h=[[e.querySelector(".before-label"),"before"],[e.querySelector(".after-label"),"after"]].filter((([e])=>e)),b=()=>{if("slide"!==a||!h.length)return;const t=e.getBoundingClientRect();if(!t.width||!t.height)return;const s=i?t.height*f/100:t.width*f/100;h.forEach((([e,r])=>{const n=e.getBoundingClientRect(),o="before"===r?s<6+(i?n.bottom-t.top:n.right-t.left):s>(i?n.top-t.top:n.left-t.left)-6;e.classList.toggle("is-covered",o)}))};let f=50;const m=t=>{f=Math.min(100,Math.max(0,Number(t)||0)),e.style.setProperty("--gs-ba-pos",`${f}%`),e.style.setProperty("--gs-ba-o",String("fade"===a?f/100:1-f/100)),r.setAttribute("aria-valuenow",String(Math.round(f))),b()},v="toggle"===a?100:Number(e.dataset.position??50);m(v),e.gsCompare={set:m,get:()=>f};let w=null,y=!1;const E=()=>{w&&(o.cancelAnimationFrame(w),w=null)},L=()=>{y=!0,E(),e.classList.remove("is-autoplaying")},A=()=>s?.(Math.round(f));if("toggle"===a){const t=[...e.querySelectorAll(".gs-ba__toggle [data-show]")],s=e=>{m("after"===e?0:100),t.forEach((t=>t.setAttribute("aria-pressed",String(t.dataset.show===e))))};t.forEach((e=>p(e,"click",(()=>s(e.dataset.show))))),p(e,"click",(e=>{e.target.closest(".gs-ba__ui")||s(f>50?"after":"before")})),s("before")}const S=t=>{const s=e.getBoundingClientRect();return"fade"===a?(t.clientX-s.left-24)/Math.max(1,s.width-48)*100:i?(t.clientY-s.top)/s.height*100:(t.clientX-s.left)/s.width*100};let _=!1;const q=e=>{_&&m(S(e))},k=()=>{_&&(_=!1,e.classList.remove("is-dragging"),o.removeEventListener("pointermove",q),o.removeEventListener("pointerup",k),o.removeEventListener("pointercancel",k),A())};if(g.push(k),"toggle"===a||u||(p(c?r:e,"pointerdown",(t=>{0!==t.button||t.target.closest(".gs-ba__ui")||(L(),_=!0,e.classList.add("is-dragging"),m(S(t)),r.focus({preventScroll:!0}),o.addEventListener("pointermove",q),o.addEventListener("pointerup",k),o.addEventListener("pointercancel",k))})),l&&p(e,"pointermove",(e=>{_||"mouse"!==e.pointerType||e.target.closest(".gs-ba__ui")||(L(),m(S(e)))})),p(r,"keydown",(e=>{const t=i?["ArrowUp","ArrowLeft"]:["ArrowLeft","ArrowDown"],s={PageUp:f+10,PageDown:f-10,Home:0,End:100};let r=null;(i?["ArrowDown","ArrowRight"]:["ArrowRight","ArrowUp"]).includes(e.key)?r=f+5:t.includes(e.key)?r=f-5:e.key in s&&(r=s[e.key]),null!==r&&(e.preventDefault(),L(),m(r),A())}))),o.ResizeObserver){const t=new o.ResizeObserver((()=>b()));t.observe(e),g.push((()=>t.disconnect()))}const M=(e,t)=>{E();const s=o.performance.now(),r=n=>{const a=t?Math.min(1,(n-s)/t):n-s;e(a),w=!t||a<1?o.requestAnimationFrame(r):null};w=o.requestAnimationFrame(r)},I=t&&!d&&"slide"===a&&!u&&"1"===e.dataset.hint,C=t&&!d&&"toggle"!==a&&!u&&"1"===e.dataset.autoplay;if((I||C)&&o.IntersectionObserver){let t=!1;const s=new o.IntersectionObserver((([r])=>{if(y)s.disconnect();else if(r.isIntersecting){if(C){const t=f;e.classList.add("is-autoplaying"),M((e=>m(t+Math.sin(e/7e3*Math.PI*2)*Math.min(38,100-t,t))),0)}else if(!t){t=!0;const e=f;M((t=>m(e+14*Math.sin(t*Math.PI*2)*(1-.35*t))),1400),s.disconnect()}}else E()}),{threshold:.6});s.observe(e),g.push((()=>s.disconnect())),p(e,"pointerenter",(e=>"mouse"!==e.pointerType||!C||L()))}g.push(E);const O=[...e.querySelectorAll("video.gs-ba__video")];if(2===O.length){const[t,s]=O,r=e.querySelector(".gs-ba__play");let n=d;const a=()=>{Math.abs(s.currentTime-t.currentTime)>.15&&(s.currentTime=t.currentTime)},i=()=>O.forEach((e=>e.play().catch((()=>{})))),l=()=>O.forEach((e=>e.pause())),c=()=>{r?.setAttribute("aria-pressed",String(!t.paused)),r?.setAttribute("aria-label",t.paused?r.dataset.labelPlay:r.dataset.labelPause),e.classList.toggle("is-paused",t.paused)};if(p(t,"timeupdate",a),p(t,"seeked",a),p(t,"play",c),p(t,"pause",c),r&&p(r,"click",(()=>{n=!t.paused,n?l():i()})),d&&l(),o.IntersectionObserver){const t=new o.IntersectionObserver((([e])=>e.isIntersecting&&!n?i():l()),{threshold:.25});t.observe(e),g.push((()=>t.disconnect()))}c()}const P=e.querySelector(".gs-ba__fs");if(P){const t=!!e.requestFullscreen,s=()=>t?n.fullscreenElement===e:e.classList.contains("is-fullscreen"),r=()=>{const r=s();e.classList.toggle("is-fullscreen",r),P.setAttribute("aria-pressed",String(r)),P.setAttribute("aria-label",r?P.dataset.labelClose:P.dataset.labelOpen),n.documentElement.classList.toggle("gs-ba-has-fullscreen",r&&!t),b()};p(P,"click",(()=>{t?s()?n.exitFullscreen?.():e.requestFullscreen().catch((()=>{})):(e.classList.toggle("is-fullscreen"),r())})),t?p(n,"fullscreenchange",r):p(n,"keydown",(t=>{"Escape"===t.key&&s()&&(e.classList.remove("is-fullscreen"),r())}))}return p(e,"focusin",L),()=>{g.forEach((e=>e())),delete e.gsCompare}}(e))),(e=>{const t=e.querySelector(":scope > .gs-ba-carousel");if(!t||!window.Swiper)return;const s=[...e.querySelectorAll(":scope > .gs-ba-thumbs .gs-ba-thumbs__item")],r=new window.Swiper(t,{slidesPerView:1,spaceBetween:16,speed:500,allowTouchMove:!1,autoHeight:!t.querySelector(".gs-ba.has-ratio"),keyboard:{enabled:!0,onlyInViewport:!0},a11y:{enabled:!0},navigation:{prevEl:t.querySelector(".gs-ba-carousel__nav.is-prev"),nextEl:t.querySelector(".gs-ba-carousel__nav.is-next")}});s.forEach(((e,t)=>e.addEventListener("click",(()=>r.slideTo(t))))),r.on("slideChange",(()=>s.forEach(((e,t)=>{const s=t===r.activeIndex;e.classList.toggle("is-active",s),s?e.setAttribute("aria-current","true"):e.removeAttribute("aria-current")}))))})(e)}));"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()})();