keeptrack-css 1.0.0

package/keepTrack.min.js

@@ -0,0 +1 @@
+!function(t,e){"function"==typeof define&&define.amd?define([],function(){return e(t)}):"object"==typeof exports?module.exports=e(t):t.KeepTrack=e(t)}("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,function(t){const e={scrollbarWidth:!0,scrollbarHeight:!1,debounceTime:250,poll:!1,detectSticky:!1,stickyTopDynamic:!1,onChange:null};function n(t,e){let n;return function(...o){clearTimeout(n),n=setTimeout(()=>{requestAnimationFrame(()=>t.apply(this,o))},e)}}function o(e){let n=e.parentElement;for(;n&&n!==document.documentElement;){if("contents"!==t.getComputedStyle(n).display)return n;n=n.parentElement}return document.documentElement}function r(e){const n=e.style.getPropertyValue("position"),o=e.style.getPropertyPriority("position"),r=e.style.getPropertyValue("top"),i=e.style.getPropertyPriority("top");e.style.setProperty("position","static","important"),e.style.setProperty("top","auto","important");const c=e.getBoundingClientRect().top+t.scrollY;return n?e.style.setProperty("position",n,o||""):e.style.removeProperty("position"),r?e.style.setProperty("top",r,i||""):e.style.removeProperty("top"),c}function i(e){if(e===document.documentElement)return 0;const n=t.getComputedStyle(e);return"sticky"===n.position||"fixed"===n.position?r(e):e.getBoundingClientRect().top+t.scrollY}function c(e,n,r){const i=t.getComputedStyle(e),c=i.top.trim();if(!c)return null;if("auto"===c)return null;if(c.endsWith("%")){const t=parseFloat(c);return isNaN(t)?null:o(e).getBoundingClientRect().height*(t/100)}if(c.endsWith("rem")){const e=parseFloat(c);if(isNaN(e))return null;const n=parseFloat(t.getComputedStyle(document.documentElement).fontSize);return isNaN(n)?null:e*n}if(c.endsWith("em")){const t=parseFloat(c);if(isNaN(t))return null;const e=parseFloat(i.fontSize);return isNaN(e)?null:t*e}if(c.includes("(")){if("function"==typeof e.computedStyleMap)try{const t=e.computedStyleMap().get("top");if(t){if("function"==typeof t.to){const e=t.to("px");if(e&&"number"==typeof e.value)return e.value}if("px"===t.unit&&"number"==typeof t.value)return t.value}}catch(t){}return function(e,n,r,i){const c=o(e);r&&r.add(c);const s=i(c);s.style.top=n;const a=t.getComputedStyle(s).top,l=parseFloat(a);return isNaN(l)?null:l}(e,c,n,r)}const s=parseFloat(c);return isNaN(s)?null:s}function s(t,e){const n=e||t.id;n&&document.documentElement.style.removeProperty(`--${n}-stuck`),t.style.removeProperty("--stuck"),t.removeAttribute("data-keeptrack-stuck")}return function(a){const l={};let u,d,p,f,m,y,g,h,k=!1,v=[];const b=new Set,{getTopMeasurer:E,topMeasurers:P}=function(){const t=new WeakMap;return{getTopMeasurer:function(e){let n=t.get(e);return n||(n=document.createElement("div"),n.style.position="absolute",n.style.left="0",n.style.width="0",n.style.height="0",n.style.margin="0",n.style.padding="0",n.style.border="0",n.style.visibility="hidden",n.style.pointerEvents="none",e.appendChild(n),t.set(e,n)),n},topMeasurers:t}}(),S=new WeakMap,A=new WeakMap;let N,C,w,T,M=new WeakMap,L=new WeakMap,W=!1;const F=new Set;function x(t){if(M.has(t))return M.get(t);const e=t.getAttribute("data-keeptrack");if(!e)return null;const n=e.split(",").map(t=>t.trim()).filter(Boolean),o=t.id||!1,r=t.getAttribute("data-keeptrack-target-parent"),i=function(t,e){if(!e)return!1;const n=parseInt(e,10);if(!isNaN(n)&&n>0){let e=t;for(let t=0;t<n;t++){if(!e.parentElement)return!1;e=e.parentElement}return e}try{return t.closest(e)||document.querySelector(e)||!1}catch(t){return!1}}(t,r),c={types:n,id:o,target:i};return M.set(t,c),c}function q(){M=new WeakMap}function B(){L=new WeakMap}function $(t){if(u&&u.stickyTopDynamic)return c(t,F,E);if(L.has(t))return L.get(t);const e=c(t,F,E);return L.set(t,e),e}function R(){if(u.scrollbarWidth){const e=t.innerWidth-document.documentElement.clientWidth+"px";e!==N&&(N=e,document.documentElement.style.setProperty("--scrollbar-width",e))}if(u.scrollbarHeight){const e=t.innerHeight-document.documentElement.clientHeight+"px";e!==C&&(C=e,document.documentElement.style.setProperty("--scrollbar-height",e))}}function O(t,e){const n=e||A.get(t)||M.get(t);if(n){const{types:e,id:o,target:r}=n;for(const n of e){const e=o?`--${o}-${n}`:`--${n}`;r?r.style.removeProperty(e):o?document.documentElement.style.removeProperty(e):t.style.removeProperty(e)}}s(t,n&&n.id?n.id:void 0),S.delete(t),M.delete(t),A.delete(t)}function z(e){const n=x(e);if(!n||!n.types||0===n.types.length)return void(A.has(e)&&O(e));const{types:o,id:r,target:i}=n,c=A.get(e);!c||function(t,e){if(t===e)return!0;if(!t||!e||t.length!==e.length)return!1;for(let n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}(c.types,o)&&c.id===r&&c.target===i||O(e,c);const s=t.getComputedStyle(e);S.has(e)||S.set(e,{});const a=S.get(e);for(const t of o){const n=s.getPropertyValue(t);if(a[t]===n)continue;a[t]=n;const o=r?`--${r}-${t}`:`--${t}`;i?i.style.setProperty(o,n):r?document.documentElement.style.setProperty(o,n):e.style.setProperty(o,n),u.onChange&&u.onChange(e,t,n)}A.set(e,{types:o,id:r,target:i})}function H(e){return"sticky"===t.getComputedStyle(e).position}function K(){W=!1,clearTimeout(T),V()}function V(){if(W)return;let t=0,e=!1;for(const n of v)if(n.hasAttribute("data-keeptrack-scroll-padding")){if(u.detectSticky&&H(n)&&!n.hasAttribute("data-keeptrack-stuck"))continue;e=!0,t+=n.getBoundingClientRect().height}if(!e)return void(w&&(document.documentElement.style.removeProperty("scroll-padding-top"),w=void 0));const n=`${t}px`;n!==w&&(w=n,document.documentElement.style.setProperty("scroll-padding-top",n))}function Y(){for(const t of v){if(!t.hasAttribute("data-keeptrack")&&!t.hasAttribute("data-keeptrack-scroll-padding"))continue;const e=x(t)||{};if(void 0===e.isSticky&&(e.isSticky=H(t)),!e.isSticky)continue;const n=t.getBoundingClientRect(),o=$(t);if(null===o)continue;const r=Math.abs(n.top-o)<1.5;if(r===t.hasAttribute("data-keeptrack-stuck"))continue;r?t.setAttribute("data-keeptrack-stuck",""):t.removeAttribute("data-keeptrack-stuck");const i=t.id,c=r?"1":"0";i?document.documentElement.style.setProperty(`--${i}-stuck`,c):t.style.setProperty("--stuck",c),u.onChange&&u.onChange(t,"stuck",c)}}function I(e){const n=e.getBoundingClientRect().top+t.scrollY,c=[];for(const t of v){if(!t.hasAttribute("data-keeptrack-scroll-padding"))continue;const e=H(t),n=t.getBoundingClientRect().height;if(!e){c.push({sticky:!1,height:n});continue}const s=$(t);if(null===s)continue;const a=r(t),l=o(t),u=i(l)+l.offsetHeight;c.push({sticky:!0,height:n,stickyTop:s,minScroll:a-s,maxScroll:u-n-s})}let s=0,a=!1;for(let t=0;t<5;t++){const t=n-s;let e=0,o=!1;for(const n of c)n.sticky?t>=n.minScroll&&t<=n.maxScroll&&(o=!0,e+=n.height):(o=!0,e+=n.height);if(e===s){s=e,a=o;break}s=e,a=o}if(a){const t=`${s}px`;w=t,document.documentElement.style.setProperty("scroll-padding-top",t)}else w&&(document.documentElement.style.removeProperty("scroll-padding-top"),w=void 0);W=!0,clearTimeout(T),"onscrollend"in t&&t.addEventListener("scrollend",K,{once:!0});const l=t.scrollY;requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.scrollY===l&&K()})}),T=setTimeout(K,5e3)}function D(){const t=Array.from(document.querySelectorAll("[data-keeptrack], [data-keeptrack-scroll-padding]")),e=new Set(t);for(const t of v)e.has(t)||(p&&p.unobserve(t),O(t));if(p)for(const e of t)b.has(e)||p.observe(e);v=t,b.clear();for(const e of t)b.add(e)}return l.init=function(o){if(l.destroy(),u=Object.assign({},e,o||{}),!document.body)return void("loading"===document.readyState&&document.addEventListener("DOMContentLoaded",()=>{l.init(o)},{once:!0}));d=n(()=>{R(),q(),B()},u.debounceTime),t.addEventListener("resize",d),p="undefined"!=typeof ResizeObserver?new ResizeObserver(t=>{for(const e of t)z(e.target);V()}):null;const r=n(()=>{q(),B(),D(),v.forEach(t=>z(t)),V()},u.debounceTime);if(f=new MutationObserver(t=>{let e=!1;for(const n of t){if("attributes"===n.type){const t=n.target;if("data-keeptrack"===n.attributeName)t.hasAttribute("data-keeptrack")||O(t),e=!0;else if("data-keeptrack-scroll-padding"===n.attributeName)t.hasAttribute("data-keeptrack-scroll-padding")||s(t),e=!0;else if("id"===n.attributeName){const o=n.oldValue;o&&o!==t.id&&t.hasAttribute("data-keeptrack-scroll-padding")&&!t.hasAttribute("data-keeptrack")&&s(t,o),t.hasAttribute("data-keeptrack")&&(O(t),q(),z(t),V()),e=!0}else t.hasAttribute("data-keeptrack")&&(O(t),q(),z(t),V());continue}if(!e)for(const t of n.addedNodes)if(1===t.nodeType&&(t.matches("[data-keeptrack]")||t.matches("[data-keeptrack-scroll-padding]")||t.querySelector("[data-keeptrack]")||t.querySelector("[data-keeptrack-scroll-padding]"))){e=!0;break}if(!e)for(const t of n.removedNodes)if(1===t.nodeType&&(t.matches("[data-keeptrack]")||t.matches("[data-keeptrack-scroll-padding]")||t.querySelector("[data-keeptrack]")||t.querySelector("[data-keeptrack-scroll-padding]"))){e=!0;break}}e&&r()}),f.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:["data-keeptrack","data-keeptrack-target-parent","data-keeptrack-scroll-padding","id"]}),u.detectSticky&&(y=function(){k||(k=!0,requestAnimationFrame(()=>{Y(),V(),k=!1}))},t.addEventListener("scroll",y,{passive:!0})),g=function(t){if(t.defaultPrevented||0!==t.button||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey)return;const e=t.target&&1===t.target.nodeType?t.target:t.target&&t.target.parentElement;if(!e||!e.closest)return;const n=e.closest('a[href^="#"]');if(!n)return;const o=n.getAttribute("href").slice(1);if(!o)return;const r=document.getElementById(o);r&&I(r)},document.addEventListener("click",g),h=function(){const e=t.location.hash?t.location.hash.slice(1):"";if(!e)return;const n=document.getElementById(e);n&&I(n)},t.addEventListener("hashchange",h),t.addEventListener("popstate",h),u.poll&&function t(){v.forEach(t=>z(t)),V(),m=requestAnimationFrame(t)}(),R(),D(),v.forEach(t=>z(t)),u.detectSticky&&Y(),V(),t.location.hash&&t.location.hash.length>1){const e=document.getElementById(t.location.hash.slice(1));e&&I(e)}},l.observe=function(t){b.has(t)||(v.push(t),b.add(t),p&&p.observe(t),z(t),V())},l.unobserve=function(t){if(!b.has(t))return;O(t),b.delete(t);const e=v.indexOf(t);-1!==e&&v.splice(e,1),p&&p.unobserve(t),V()},l.recalculate=function(){R(),B(),v.forEach(t=>z(t)),u.detectSticky&&Y(),V()},l.destroy=function(){d&&(t.removeEventListener("resize",d),d=null),y&&(t.removeEventListener("scroll",y),y=null),g&&(document.removeEventListener("click",g),g=null),h&&(t.removeEventListener("hashchange",h),t.removeEventListener("popstate",h),h=null),p&&(p.disconnect(),p=null),f&&(f.disconnect(),f=null),m&&(cancelAnimationFrame(m),m=null),t.removeEventListener("scrollend",K),v.forEach(O),N&&(document.documentElement.style.removeProperty("--scrollbar-width"),N=void 0),C&&(document.documentElement.style.removeProperty("--scrollbar-height"),C=void 0),w&&(document.documentElement.style.removeProperty("scroll-padding-top"),w=void 0),v=[],b.clear(),k=!1,W=!1,clearTimeout(T);for(const t of F){const e=P.get(t);e&&e.parentNode&&e.parentNode.removeChild(e),P.delete(t)}F.clear(),L=new WeakMap},l.init(a),l}});

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "keeptrack-css",
+  "version": "1.0.0",
+  "description": "Read computed CSS property values from elements and expose them as CSS custom properties (variables)",
+  "main": "keepTrack.js",
+  "module": "keepTrack.esm.js",
+  "files": [
+    "keepTrack.js",
+    "keepTrack.min.js",
+    "keepTrack.esm.js"
+  ],
+  "scripts": {
+    "build": "node build.js"
+  },
+  "keywords": [
+    "css",
+    "css-variables",
+    "custom-properties",
+    "computed-style",
+    "resize-observer",
+    "sticky",
+    "scroll-padding",
+    "scrollbar"
+  ],
+  "author": "Robin Poort",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robinpoort/KeepTrack-CSS.git"
+  },
+  "bugs": {
+    "url": "https://github.com/robinpoort/KeepTrack-CSS/issues"
+  },
+  "homepage": "https://github.com/robinpoort/KeepTrack-CSS#readme",
+  "devDependencies": {
+    "terser": "^5.37.0"
+  }
+}