horizontally.min.js

/*
*
* 	Horizontally.js v1.0 
*	https://github.com/MatthewBleUK/horizontally.js
*
*	@license released under GPL-3.0 for open source personal use. 
*	For commercial use please see the readme.
*
*   Copyright 2022 - Created by Matthew Bleathman
*
*/


!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).horizontally=t()}(this,(function(){"use strict";var e={sections:[],currentSection:"",currentIndex:"",nextSection:"",previousSection:"",isScrolling:!1,currentLeftPos:0,xTouchPos:0,yTouchPos:0},t={wrapper:"#horizontally",speed:200,arrowButtons:!0,pageSelector:!0},n={};
function o(e){for(let[t,o]of Object.entries(e))n[t]="wrapper"!=t?o:document.querySelector(o);if(null==n.wrapper||null==n.wrapper||"object"!=typeof n.wrapper)throw new Error("Incorrect wrapper. Please check for spelling mistakes or take a look at the documentation example.")}
function r(){if(e.currentSection=function(){let t,o=n.wrapper.getBoundingClientRect(),r=Math.abs(o.x);return e.sections.forEach((n=>{const o=n.offsetLeft,i=n.clientWidth,c=e.sections.length;r>o-i/c+1&&(t=n)})),t}(),e.currentIndex=e.sections.findIndex((t=>t===e.currentSection)),e.nextSection=e.currentIndex===e.sections.length-1?e.sections[0]:e.sections[e.currentIndex+1],e.previousSection=0===e.currentIndex?e.sections[e.sections.length-1]:e.sections[e.currentIndex-1],1==n.pageSelector){(t=document.querySelectorAll("#page-selector ul li")).forEach((e=>{e.classList.remove("active")})),t[e.currentIndex].classList.add("active")}var t}
function i(t){t.preventDefault();const n=this.getAttribute("data-index");p(e.sections[n])}
function c(){setTimeout((()=>{p(e.currentSection)}),500)}
function s(t){const n=function(e){return e.touches}(t)[0];e.xTouchPos=n.clientX,e.yTouchPos=n.clientY}
function l(t){if(!e.xTouchPos||!e.yTouchPos)return;const n=t.touches[0].clientX,o=t.touches[0].clientY,r=e.xTouchPos-n,i=e.yTouchPos-o;Math.abs(r)>Math.abs(i)?r>0?d():a():i>0?d():a(),e.xTouchPos=0,e.yTouchPos=0}
function u(t){e.isScrolling||(t.deltaY>50||t.deltaY<-50)&&(function(e){if(e.deltaY>0)return!0}(t)?d():a())}
function a(){p(e.previousSection)}function d(){p(e.nextSection)}
function p(t){if(!e.isScrolling){e.isScrolling=!0;const o=t.offsetLeft;n.wrapper.style.transform=`translate3d(-${o}px, 0px, 0px)`,setTimeout((()=>{e.isScrolling=!1,r()}),n.speed+50)}}return function(p){o(t),o(p),function(){const t=document.querySelectorAll(".section");if(!(t.length>0))throw new Error("Could not find correct section class. Please check for spelling mistakes or take a look at the documentation example.");e.sections.push(...t)}(),n.wrapper.style.transition=String(n.speed)+"ms",document.addEventListener("touchstart",s,!1),document.addEventListener("touchmove",l,!1),document.addEventListener("mousewheel",u,!1),document.addEventListener("DOMMouseScroll",u,!1),window.addEventListener("resize",c),n.arrowButtons&&function(){n.wrapper.insertAdjacentHTML("afterend",'<div id="fixed-arrows">\n\t\t<button class="arrow left">\n\t\t\t<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg" version="1.1">\n\t\t\t\t<polyline points="30 10 10 30 30 50" stroke="white" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round" shape-rendering="geometricPrecision"></polyline>\n\t\t\t</svg>\n\t\t</button>\n\t\n\n\t\t<button class="arrow right">\n\t\t\t<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg" version="1.1">\n\t\t\t\t<polyline points="10 10 30 30 10 50" stroke="white" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round" shape-rendering="geometricPrecision"></polyline>\n\t\t\t</svg>\n\t\t</button>\n\t</div>');const e=document.querySelector(".arrow.left"),t=document.querySelector(".arrow.right");e.addEventListener("click",a),t.addEventListener("click",d)}(),n.pageSelector&&function(){let t="";var o,r;e.sections.forEach(((e,n)=>{t+=`<li ${0==n?'class="active"':""} data-index="${n}"><span></span></li>`})),n.wrapper.insertAdjacentHTML("afterend",'<div id="page-selector"><ul>'+t+"</ul></div>"),o=document.querySelectorAll("#page-selector ul li"),r=i,o.forEach((e=>{e.addEventListener("click",r)}))}(),r()}}));