diff --git a/flyonui.js b/flyonui.js index 97f12bb..a5789dd 100644 --- a/flyonui.js +++ b/flyonui.js @@ -179,7 +179,7 @@ Object.defineProperty(t,"__esModule",{value:!0}),t.stringToBoolean=t.menuSearchH * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html) * Copyright 2024 Preline Labs Ltd. */ -var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const n=i(806),o=s(i(287));class l extends o.default{constructor(e,t={}){super(e,t),this.isScrollingDown=!1,this.lastScrollTop=0;const i=e.getAttribute("data-scrollspy-options"),s=i?JSON.parse(i):{},n=Object.assign(Object.assign({},s),t);this.ignoreScrollUp=void 0!==n.ignoreScrollUp&&n.ignoreScrollUp,this.links=this.el.querySelectorAll("[href]"),this.sections=[],this.scrollableId=this.el.getAttribute("data-scrollspy-scrollable-parent"),this.scrollable=this.scrollableId?document.querySelector(this.scrollableId):document,this.onLinkClickListener=[],this.init()}scrollableScroll(e){const t=this.scrollable instanceof HTMLElement?this.scrollable.scrollTop:window.scrollY;this.isScrollingDown=t>this.lastScrollTop,this.lastScrollTop=t<=0?0:t,Array.from(this.sections).forEach(t=>{if(!t.getAttribute("id"))return!1;this.update(e,t)})}init(){this.createCollection(window.$hsScrollspyCollection,this),this.links.forEach(e=>{this.sections.push(this.scrollable.querySelector(e.getAttribute("href")))}),this.onScrollableScrollListener=e=>this.scrollableScroll(e),this.scrollable.addEventListener("scroll",this.onScrollableScrollListener),this.links.forEach(e=>{this.onLinkClickListener.push({el:e,fn:t=>this.linkClick(t,e)}),e.addEventListener("click",this.onLinkClickListener.find(t=>t.el===e).fn)})}determineScrollDirection(e){const t=this.el.querySelector("a.active");if(!t)return!0;const i=Array.from(this.links).indexOf(t),s=Array.from(this.links).indexOf(e);return-1===s||s>i}linkClick(e,t){e.preventDefault();const i=t.getAttribute("href");if(!i||"javascript:;"===i)return;(i?document.querySelector(i):null)&&(this.isScrollingDown=this.determineScrollDirection(t),this.scrollTo(t))}update(e,t){const i=parseInt((0,n.getClassProperty)(this.el,"--scrollspy-offset","0")),s=parseInt((0,n.getClassProperty)(t,"--scrollspy-offset"))||i,o=e.target===document?0:parseInt(String(e.target.getBoundingClientRect().top)),l=parseInt(String(t.getBoundingClientRect().top))-s-o,r=t.offsetHeight;if(this.ignoreScrollUp||this.isScrollingDown?l<=0&&l+r>0:l<=0&&le.classList.remove("active"));const e=this.el.querySelector(`[href="#${t.getAttribute("id")}"]`);if(e){e.classList.add("active");const t=e.closest("[data-scrollspy-group]");if(t){const e=t.querySelector("[href]");e&&e.classList.add("active")}}this.fireEvent("afterScroll",e),(0,n.dispatch)("afterScroll.scrollspy",e,this.el)}}scrollTo(e){const t=e.getAttribute("href"),i=document.querySelector(t),s=parseInt((0,n.getClassProperty)(this.el,"--scrollspy-offset","0")),o=parseInt((0,n.getClassProperty)(i,"--scrollspy-offset"))||s,l=this.scrollable===document?0:this.scrollable.offsetTop,r=i.offsetTop-o-l,a=this.scrollable===document?window:this.scrollable,h=()=>{window.history.replaceState(null,null,e.getAttribute("href")),"scrollTo"in a&&a.scrollTo({top:r,left:0,behavior:"smooth"})},d=this.fireEvent("beforeScroll",this.el);(0,n.dispatch)("beforeScroll.scrollspy",this.el,this.el),d instanceof Promise?d.then(()=>h()):h()}destroy(){this.el.querySelector("[href].active").classList.remove("active"),this.scrollable.removeEventListener("scroll",this.onScrollableScrollListener),this.onLinkClickListener.length&&this.onLinkClickListener.forEach(({el:e,fn:t})=>{e.removeEventListener("click",t)}),window.$hsScrollspyCollection=window.$hsScrollspyCollection.filter(({element:e})=>e.el!==this.el)}static getInstance(e,t=!1){const i=window.$hsScrollspyCollection.find(t=>t.element.el===("string"==typeof e?document.querySelector(e):e));return i?t?i:i.element.el:null}static autoInit(){window.$hsScrollspyCollection||(window.$hsScrollspyCollection=[]),window.$hsScrollspyCollection&&(window.$hsScrollspyCollection=window.$hsScrollspyCollection.filter(({element:e})=>document.contains(e.el))),document.querySelectorAll("[data-scrollspy]:not(.--prevent-on-load-init)").forEach(e=>{window.$hsScrollspyCollection.find(t=>{var i;return(null===(i=null==t?void 0:t.element)||void 0===i?void 0:i.el)===e})||new l(e)})}}window.addEventListener("load",()=>{l.autoInit()}),"undefined"!=typeof window&&(window.HSScrollspy=l),t.default=l},917:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BREAKPOINTS=t.COMBO_BOX_ACCESSIBILITY_KEY_SET=t.SELECT_ACCESSIBILITY_KEY_SET=t.TABS_ACCESSIBILITY_KEY_SET=t.OVERLAY_ACCESSIBILITY_KEY_SET=t.DROPDOWN_ACCESSIBILITY_KEY_SET=t.POSITIONS=void 0,t.POSITIONS={auto:"auto","auto-start":"auto-start","auto-end":"auto-end",top:"top","top-start":"top-start","top-end":"top-end",bottom:"bottom","bottom-start":"bottom-start","bottom-end":"bottom-end",right:"right","right-start":"right-start","right-end":"right-end",left:"left","left-start":"left-start","left-end":"left-end"},t.DROPDOWN_ACCESSIBILITY_KEY_SET=["Escape","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Home","End","Enter"],t.OVERLAY_ACCESSIBILITY_KEY_SET=["Escape","Tab"],t.TABS_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End"],t.SELECT_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End","Escape","Enter","Space","Tab"],t.COMBO_BOX_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End","Escape","Enter"],t.BREAKPOINTS={xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536}},944:function(e,t,i){ +var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const n=i(806),o=s(i(287));class l extends o.default{constructor(e,t={}){super(e,t),this.isScrollingDown=!1,this.lastScrollTop=0;const i=e.getAttribute("data-scrollspy-options"),s=i?JSON.parse(i):{},n=Object.assign(Object.assign({},s),t);this.ignoreScrollUp=void 0!==n.ignoreScrollUp&&n.ignoreScrollUp,this.links=this.el.querySelectorAll("[href]"),this.sections=[],this.scrollableId=this.el.getAttribute("data-scrollspy-scrollable-parent"),this.scrollable=this.scrollableId?document.querySelector(this.scrollableId):document,this.onLinkClickListener=[],this.init()}scrollableScroll(e){const t=this.scrollable instanceof HTMLElement?this.scrollable.scrollTop:window.scrollY;this.isScrollingDown=t>this.lastScrollTop,this.lastScrollTop=t<=0?0:t,Array.from(this.sections).forEach(t=>{if(!t.getAttribute("id"))return!1;this.update(e,t)})}init(){this.createCollection(window.$hsScrollspyCollection,this),this.links.forEach(e=>{this.sections.push(this.scrollable.querySelector(e.getAttribute("href")))}),this.onScrollableScrollListener=e=>this.scrollableScroll(e),this.scrollable.addEventListener("scroll",this.onScrollableScrollListener),this.links.forEach(e=>{this.onLinkClickListener.push({el:e,fn:t=>this.linkClick(t,e)}),e.addEventListener("click",this.onLinkClickListener.find(t=>t.el===e).fn)})}determineScrollDirection(e){const t=this.el.querySelector("a.active");if(!t)return!0;const i=Array.from(this.links).indexOf(t),s=Array.from(this.links).indexOf(e);return-1===s||s>i}linkClick(e,t){e.preventDefault();const i=t.getAttribute("href");if(!i||"javascript:;"===i)return;(i?document.querySelector(i):null)&&(this.isScrollingDown=this.determineScrollDirection(t),this.scrollTo(t))}update(e,t){const i=parseInt((0,n.getClassProperty)(this.el,"--scrollspy-offset","0")),s=parseInt((0,n.getClassProperty)(t,"--scrollspy-offset"))||i,o=e.target===document?0:parseInt(String(e.target.getBoundingClientRect().top)),l=parseInt(String(t.getBoundingClientRect().top))-s-o,r=t.offsetHeight;if(this.ignoreScrollUp||this.isScrollingDown?l<=0&&l+r>0:l<=0&&le.classList.remove("active"));const e=this.el.querySelector(`[href="#${t.getAttribute("id")}"]`);if(e){e.classList.add("active");const t=e.closest("[data-scrollspy-group]");if(t){const e=t.querySelector("[href]");e&&e.classList.add("active")}}this.fireEvent("afterScroll",e),(0,n.dispatch)("afterScroll.scrollspy",e,this.el)}}scrollTo(e){const t=e.getAttribute("href"),i=document.querySelector(t),s=parseInt((0,n.getClassProperty)(this.el,"--scrollspy-offset","0")),o=parseInt((0,n.getClassProperty)(i,"--scrollspy-offset"))||s,l=(0,n.stringToBoolean)((0,n.getClassProperty)(this.el,"--scrollspy-replace-history","true")||"true"),r=this.scrollable===document?0:this.scrollable.offsetTop,a=i.offsetTop-o-r,h=this.scrollable===document?window:this.scrollable,d=()=>{l&&(console.log("=== replacing history ==="),window.history.replaceState(null,null,e.getAttribute("href"))),"scrollTo"in h&&h.scrollTo({top:a,left:0,behavior:"smooth"})},c=this.fireEvent("beforeScroll",this.el);(0,n.dispatch)("beforeScroll.scrollspy",this.el,this.el),c instanceof Promise?c.then(()=>d()):d()}destroy(){this.el.querySelector("[href].active").classList.remove("active"),this.scrollable.removeEventListener("scroll",this.onScrollableScrollListener),this.onLinkClickListener.length&&this.onLinkClickListener.forEach(({el:e,fn:t})=>{e.removeEventListener("click",t)}),window.$hsScrollspyCollection=window.$hsScrollspyCollection.filter(({element:e})=>e.el!==this.el)}static getInstance(e,t=!1){const i=window.$hsScrollspyCollection.find(t=>t.element.el===("string"==typeof e?document.querySelector(e):e));return i?t?i:i.element.el:null}static autoInit(){window.$hsScrollspyCollection||(window.$hsScrollspyCollection=[]),window.$hsScrollspyCollection&&(window.$hsScrollspyCollection=window.$hsScrollspyCollection.filter(({element:e})=>document.contains(e.el))),document.querySelectorAll("[data-scrollspy]:not(.--prevent-on-load-init)").forEach(e=>{window.$hsScrollspyCollection.find(t=>{var i;return(null===(i=null==t?void 0:t.element)||void 0===i?void 0:i.el)===e})||new l(e)})}}window.addEventListener("load",()=>{l.autoInit()}),"undefined"!=typeof window&&(window.HSScrollspy=l),t.default=l},917:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BREAKPOINTS=t.COMBO_BOX_ACCESSIBILITY_KEY_SET=t.SELECT_ACCESSIBILITY_KEY_SET=t.TABS_ACCESSIBILITY_KEY_SET=t.OVERLAY_ACCESSIBILITY_KEY_SET=t.DROPDOWN_ACCESSIBILITY_KEY_SET=t.POSITIONS=void 0,t.POSITIONS={auto:"auto","auto-start":"auto-start","auto-end":"auto-end",top:"top","top-start":"top-start","top-end":"top-end",bottom:"bottom","bottom-start":"bottom-start","bottom-end":"bottom-end",right:"right","right-start":"right-start","right-end":"right-end",left:"left","left-start":"left-start","left-end":"left-end"},t.DROPDOWN_ACCESSIBILITY_KEY_SET=["Escape","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Home","End","Enter"],t.OVERLAY_ACCESSIBILITY_KEY_SET=["Escape","Tab"],t.TABS_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End"],t.SELECT_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End","Escape","Enter","Space","Tab"],t.COMBO_BOX_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End","Escape","Enter"],t.BREAKPOINTS={xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536}},944:function(e,t,i){ /* * HSTabs * @version: 3.2.3 diff --git a/src/js/plugins/scrollspy/index.ts b/src/js/plugins/scrollspy/index.ts index ecad644..beb0472 100644 --- a/src/js/plugins/scrollspy/index.ts +++ b/src/js/plugins/scrollspy/index.ts @@ -6,7 +6,7 @@ * Copyright 2024 Preline Labs Ltd. */ -import { getClassProperty, dispatch } from '../../utils' +import { getClassProperty, dispatch, stringToBoolean } from '../../utils' import { IScrollspy, IScrollspyOptions } from './interfaces' @@ -160,11 +160,15 @@ class HSScrollspy extends HSBasePlugin implements IScrollspy const target: HTMLElement = document.querySelector(targetId) const globalOffset = parseInt(getClassProperty(this.el, '--scrollspy-offset', '0')) const userOffset = parseInt(getClassProperty(target, '--scrollspy-offset')) || globalOffset + const replaceHistory = stringToBoolean(getClassProperty(this.el, '--scrollspy-replace-history', 'true') || 'true') const scrollableParentOffset = this.scrollable === document ? 0 : (this.scrollable as HTMLElement).offsetTop const topOffset = target.offsetTop - userOffset - scrollableParentOffset const view = this.scrollable === document ? window : this.scrollable const scrollFn = () => { - window.history.replaceState(null, null, link.getAttribute('href')) + if (replaceHistory){ + console.log('=== replacing history ===') + window.history.replaceState(null, null, link.getAttribute('href')) + } if ('scrollTo' in view) { view.scrollTo({