mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-21 07:00:37 +03:00
Rene Haas
1 line
12 KiB
JavaScript
1 line
12 KiB
JavaScript
const t=Node.ELEMENT_NODE,{toString:n,hasOwnProperty:e}=Object.prototype,o=t=>null==t?""+t:n.call(t).replace(/^\[object (.+)\]$/,"$1").toLowerCase();function r(t){return"number"==typeof t}function i(t){return"string"==typeof t}function s(t){return"function"==typeof t}function c(t){return void 0===t}function l(t){return null===t}function a(t){return Array.isArray(t)}function d(t){return"object"==typeof t&&!a(t)&&!l(t)}function u(t){const n=!!t&&t.length,e=r(n)&&n>-1&&n%1==0;return!!(a(t)||!s(t)&&e)&&(!(n>0&&d(t))||n-1 in t)}function v(t){if(!t||!d(t)||"object"!==o(t))return!1;let n;const r=t.constructor,i=r&&r.prototype,s=e.call(t,"constructor"),l=i&&e.call(i,"isPrototypeOf");if(r&&!s&&!l)return!1;for(n in t);return c(n)||e.call(t,n)}function f(t,n,e,o){if(c(o))return e?e[t]:n;e&&(e[t]=o)}const h=(t,n)=>{t&&t.removeAttribute(n)};function w(t,n){return f("scrollLeft",0,t,n)}function b(t,n){return f("scrollTop",0,t,n)}const p=/[^\x20\t\r\n\f]+/g,_=(t,n)=>{((t,n,e)=>{let o,r=0,s=!1;if(t&&i(n)){const i=n.match(p)||[];for(s=i.length>0;o=i[r++];)s=!!e(t.classList,o)&&s}})(t,n,(t,n)=>t.add(n))};function g(t,n){if(u(t))for(let e=0;e<t.length&&!1!==n(t[e],e,t);e++);else t&&g(Object.keys(t),e=>n(t[e],e,t));return t}const m=(t,n,e)=>(e||i(n)||!u(n)?t.push(n):Array.prototype.push.apply(t,n),t),y=t=>{if(Array.from)return Array.from(t);const n=[];return g(t,t=>{m(n,t)}),n},x=(t,n)=>{const e=t=>t&&t(n);t instanceof Set?t.forEach(e):g(t,e)},z=Element.prototype,O=(n,e)=>{if(function(n){const e=window.Element;return!!n&&(e?n instanceof e:n.nodeType===t)}(n)){return(z.matches||z.msMatchesSelector).call(n,e)}return!1},S=t=>t?y(t.childNodes):[],j=(t,n,e)=>{if(e){let o,r=n;t&&(u(e)?(o=document.createDocumentFragment(),g(e,t=>{t===r&&(r=t.previousSibling),o.appendChild(t)})):o=e,n&&(r?r!==n&&(r=r.nextSibling):r=t.firstChild),t.insertBefore(o,r))}},A=(t,n)=>{j(t,null,n)},M=(t,n)=>{j(t,t&&t.firstChild,n)},$=t=>{if(u(t))g(y(t),t=>$(t));else if(t){const e=(n=t)?n.parentElement:null;e&&e.removeChild(t)}var n},k=t=>{const n=document.createElement("div");return t&&function(t,n,e){if(c(e))return t?t.getAttribute(n):null;t&&t.setAttribute(n,e)}(n,"class",t),n},L=t=>{const n=k();return n.innerHTML=t.trim(),g(S(n),t=>$(t))},T={w:0,h:0},q=()=>({w:window.innerWidth,h:window.innerHeight}),P=t=>t?{w:t.offsetWidth,h:t.offsetHeight}:T;let C;const F=t=>t.split(" "),I=(t,n,e,o)=>{g(F(n),n=>{t.removeEventListener(n,e,o)})},N=(t,n,e,o)=>{const r=(()=>{if(void 0===C){C=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){C=!0}}))}catch(t){}}return C})(),i=r&&o&&o.o||!1,s=o&&o.s||!1,c=o&&o.u||!1,l=[],a=r?{passive:i,capture:s}:s;return g(F(n),n=>{const o=c?r=>{t.removeEventListener(n,o,s),e&&e(r)}:e;m(l,I.bind(null,t,n,o,s)),t.addEventListener(n,o,a)}),x.bind(0,l)},V=t=>t.stopPropagation(),B=t=>t.preventDefault(),E=(t,n,e)=>{if(t&&n){let o=!0;return g(e,e=>{t[e]!==n[e]&&(o=!1)}),o}return!1},Y=(t,n)=>E(t,n,["w","h"]),G=(t,n)=>E(t,n,["x","y"]),J=(t,n)=>E(t,n,["t","r","b","l"]),K=(t,n)=>Object.prototype.hasOwnProperty.call(t,n),R=t=>t?Object.keys(t):[];function U(t,n,e,o,r,i,c){const d=[n,e,o,r,i,c];return"object"==typeof t&&!l(t)||s(t)||(t={}),g(d,n=>{g(R(n),e=>{const o=n[e];if(t===o)return!0;const r=a(o);if(o&&(v(o)||r)){const n=t[e];let i=n;r&&!a(n)?i=[]:r||v(n)||(i={}),t[e]=U(i,o)}else t[e]=o})}),t}function W(t){for(const n in t)return!1;return!0}const X={animationiterationcount:1,columncount:1,fillopacity:1,flexgrow:1,flexshrink:1,fontweight:1,lineheight:1,opacity:1,order:1,orphans:1,widows:1,zindex:1,zoom:1},D=(t,n)=>{const e=n?parseFloat(t):parseInt(t,10);return Number.isNaN(e)?0:e},H=(t,n,e)=>null!=n?n.getPropertyValue(e):t.style[e],Q=(t,n,e)=>{try{t&&void 0!==t.style[n]&&(t.style[n]=((t,n)=>!X[t.toLowerCase()]&&r(n)?n+"px":n)(n,e))}catch(o){}};function Z(t,n){const e=i(n);if(a(n)||e){let o=e?"":{};if(t){const r=window.getComputedStyle(t,null);o=e?H(t,r,n):n.reduce((n,e)=>(n[e]=H(t,r,e),n),o)}return o}g(R(n),e=>Q(t,e,n[e]))}const tt={x:0,y:0},nt=t=>{const n=t?(t=>t.getBoundingClientRect())(t):0;return n?{x:n.left+window.pageYOffset,y:n.top+window.pageXOffset}:tt},et=(t,n)=>{const{v:e,p:o}=n||{};let r,i=o;return(n,o)=>{const s=i,c=t(o,i,r),l=n||(e?!e(s,c):s!==c);return l&&(i=c,r=s),{_:i,g:r,m:l}}},ot=t=>t.charAt(0).toUpperCase()+t.slice(1),rt=["-webkit-","-moz-","-o-","-ms-"],it=["WebKit","Moz","O","MS","webkit","moz","o","ms"],st={},ct={},lt=t=>{let n=ct[t];if(K(ct,t))return n;const e=ot(t),o=k().style;return g(rt,r=>{const i=r.replace(/-/g,""),s=[t,r+t,i+e,ot(i)+e];return n=s.find(t=>void 0!==o[t]),!n}),ct[t]=n,n},at=t=>{let n=st[t]||window[t];return K(st,t)||(g(it,e=>(n=n||window[e+ot(t)],!n)),st[t]=n),n},dt=(at("MutationObserver"),at("IntersectionObserver")),ut=at("ResizeObserver"),vt=at("cancelAnimationFrame"),ft=at("requestAnimationFrame");var ht=function(t){var n={exports:{}};return t(n,n.exports),n.exports}((function(t){function n(){return t.exports=n=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},n.apply(this,arguments)}t.exports=n}));const{stringify:wt}=JSON,bt=["__TPL_","_TYPE__"],pt=["boolean","number","string","array","object","function","null"].reduce((t,n)=>(t[n]=bt[0]+n+bt[1],t),{}),_t=(t,n,e,r,s)=>{const l={},d=ht({},t);return g(R(n).filter(n=>K(t,n)),u=>{const f=c(e[u])?{}:e[u],h=t[u],w=n[u],b=v(w),p=s?s+".":"";if(b&&v(h)){const t=_t(h,w,f,r,p+u);l[u]=t.O,d[u]=t.S,g([d,l],t=>{W(t[u])&&delete t[u]})}else if(!b){let t=!1;const n=[],e=[],s=o(h);if(g(a(w)?w:[w],o=>{let r;g(pt,(t,n)=>{t===o&&(r=n)});const c=void 0===r;if(c&&i(h)){const e=o.split(" ");t=!!e.find(t=>t===h),m(n,e)}else t=pt[s]===o;return m(e,c?pt.string:r),!t}),t){(a(h)||v(h)?wt(h)!==wt(f):h!==f)&&(l[u]=h)}else r&&console.warn(`The option "${p}${u}" wasn't set, because it doesn't accept the type [ ${s.toUpperCase()} ] with the value of "${h}".\r\nAccepted types are: [ ${e.join(", ").toUpperCase()} ].\r\n${n.length>0?`\r\nValid strings are: [ ${n.join(", ")} ].`:""}`);delete d[u]}}),{S:d,O:l}},gt=(t,n,e,o)=>_t(t,n,e||{},o||!1);let mt;const{abs:yt,round:xt}=Math,zt=(t,n)=>{A(t,n);const e=(o=n)?{w:o.clientWidth,h:o.clientHeight}:T;var o;const r=P(n);return{x:r.h-e.h,y:r.w-e.w}},Ot=t=>{let n=!1;_(t,"os-viewport-scrollbar-styled");try{n="none"===Z(t,"scrollbar-width")||"none"===window.getComputedStyle(t,"::-webkit-scrollbar").getPropertyValue("display")}catch(e){}return n},St=(t,n)=>{Z(t,{overflowX:"hidden",overflowY:"hidden",direction:"rtl"}),w(t,0);const e=nt(t),o=nt(n);w(t,-999);const r=nt(n);return{i:e.x===o.x,n:o.x!==r.x}},jt=(t,n)=>{_(t,"os-environment-flexbox-glue");const e=P(t),o=P(n),r=Y(o,e);_(t,"os-environment-flexbox-glue-max");const i=P(t),s=P(n),c=Y(s,i);return r&&c},At=()=>{const t=window.screen.deviceXDPI||0,n=window.screen.logicalXDPI||1;return window.devicePixelRatio||t/n},Mt=()=>{const{body:t}=document,n=L('<div class="os-environment"><div></div></div>')[0],e=n.firstChild,o=new Set,r=zt(t,n),i={x:0===r.x,y:0===r.y},s={j:!1,A:r,M:i,$:Ot(n),k:St(n,e),L:jt(n,e),T(t){o.add(t)},q(t){o.delete(t)}};if(h(n,"style"),h(n,"class"),$(n),!i.x||!i.y){let e=q(),i=At(),s=r;window.addEventListener("resize",()=>{if(o.size){const r=q(),c={w:r.w-e.w,h:r.h-e.h};if(0===c.w&&0===c.h)return;const l={w:yt(c.w),h:yt(c.h)},a={w:yt(xt(r.w/(e.w/100))),h:yt(xt(r.h/(e.h/100)))},d=At(),u=l.w>2&&l.h>2,v=!((t,n)=>{const e=yt(t),o=yt(n);return!(e===o||e+1===o||e-1===o)})(a.w,a.h),f=d!==i&&i>0;if(u&&v&&f){const e=mt.A=zt(t,n);$(n),s.x===e.x&&s.y===e.y||x(o),s=e}e=r,i=d}})}return s},$t=()=>(mt||(mt=Mt()),mt),kt=(t,n)=>t&&n.split(".").reduce((t,n)=>t&&K(t,n)?t[n]:void 0,t),Lt=(t,n,e)=>{const{P:o,C:r}=function t(n){const e={P:{},C:{}};return g(R(n),o=>{const r=n[o];if(a(r))e.P[o]=r[1],e.C[o]=r[0];else{const n=t(r);e.P[o]=n.P,e.C[o]=n.C}}),e}(t),i=U({},r,gt(n||{},o,null,!0).O),s=t=>{const{F:n,I:o}=t;e(!!n,t=>({_:kt(i,t),m:n||void 0!==kt(o,t)}))};return s({F:!0}),{C(t){if(t){const{O:n}=gt(t,o,i,!0);W(n)||(U(i,n),s({I:n}))}return i},N:t=>{s({F:t})}}},Tt={paddingAbsolute:[!1,pt.boolean],overflowBehavior:{x:["scroll","visible-hidden visible-scroll scroll hidden"],y:["scroll","visible-hidden visible-scroll scroll hidden"]}},qt=lt("margin-inline-end"),Pt=lt("border-inline-end"),Ct=(t,n)=>{const{host:e,padding:o,viewport:r,content:i}=t,s=[],c=$t(),l=c.M,a=c.$,d=(c.L,qt&&Pt||a||l.y,et(()=>((t,n)=>{const e=n||"",o=e+"-top",r=e+"-right",i=e+"-bottom",s=e+"-left",c=Z(t,[o,r,i,s]);return{t:D(c[o]),r:D(c[r]),b:D(c[i]),l:D(c[s])}})(e,"padding"),{v:J})),u=et(t=>({x:Math.max(0,Math.round(100*(t.V.w-t.B.w))/100),y:Math.max(0,Math.round(100*(t.V.h-t.B.h))/100)}),{v:G}),{C:v,N:f}=Lt(Tt,n,(t,n)=>{const{_:e,m:r}=n("paddingAbsolute"),{_:s,m:c}=d(t);if(r||c){const t={t:0,r:0,b:0,l:0};e||(t.t=-s.t,t.r=-(s.r+s.l),t.b=-(s.b+s.t),t.l=-s.l),Z(o,{top:t.t,left:t.l,"margin-right":t.r,"margin-bottom":t.b,"max-width":`calc(100% + ${-1*t.r}px)`})}const l=P(o),a=P(i),v=(f=i)?{w:f.scrollWidth,h:f.scrollHeight}:T;var f;const h=u(t,{V:v,B:{w:l.w+Math.max(0,a.w-v.w),h:l.h+Math.max(0,a.h-v.h)}}),{_:w,m:b}=h;console.log("overflowAmount",w),console.log("overflowAmountChanged",b)});return{C:v,N:f,Y:()=>{f()},G:(t,n)=>{const{m:e,_:o}=n;e&&Z(i,{height:o?"auto":"100%"})},J(){x(s)}}},Ft=t=>Z(t,"direction"),It=(t,n,e)=>{const{K:o=!1,R:r=!1}=e||{},s=$t().k,c=L('<div class="os-size-observer"><div class="os-size-observer-listener"></div></div>')[0],l=c.firstChild,a=t=>{if(o){const t="rtl"===Ft(c);w(c,t?s.n?-3333333:s.i?0:3333333:3333333),b(c,3333333)}n(i((t||{})._)?t:void 0)},d=[];let u=r?a:null;if(ut){const t=new ut(a);t.observe(l),m(d,()=>t.disconnect())}else{const t=L('<div class="os-size-observer-listener-item" dir="ltr"><div class="os-size-observer-listener-item"><div class="os-size-observer-listener-item-final"></div></div><div class="os-size-observer-listener-item"><div class="os-size-observer-listener-item-final" style="width: 200%; height: 200%"></div></div></div>');A(l,t),_(l,"os-size-observer-listener-scroll");const n=t[0],e=n.lastChild,o=n.firstChild,i=null==o?void 0:o.firstChild;let s,c=P(l),v=c,f=!1;const h=()=>{w(o,3333333),b(o,3333333),w(e,3333333),b(e,3333333)},p=()=>{s=0,f&&(c=v,a())},g=t=>(v=P(l),f=!t||!Y(v,c),t&&f&&!s?(vt(s),s=ft(p)):t||p(),h(),t&&(B(t),V(t)),!1);m(d,[N(o,"scroll",g),N(e,"scroll",g)]),Z(i,{width:3333333,height:3333333}),h(),u=r?()=>g():h}if(o){const t=et(()=>Ft(c));m(d,N(c,"scroll",n=>{const e=t(),{_:o,m:r}=e;return r&&(Z(l,"rtl"===o?{left:"auto",right:0}:{left:0,right:"auto"}),a(e)),B(n),V(n),!1}))}return u&&(_(c,"os-size-observer-appear"),m(d,N(c,"animationstart",u))),M(t,c),()=>{x(d),$(c)}},Nt=n=>{if(function(n){const e=window.HTMLElement;return!!n&&(e?n instanceof e:n.nodeType===t)}(n)){const t=O(n,"textarea")?k():n,e=k("os-padding"),o=k("os-viewport"),r=k("os-content");return A(e,o),A(o,r),A(r,S(n)),A(n,e),_(t,"os-host"),{target:n,host:t,padding:e,viewport:o,content:r}}const{host:e,padding:o,viewport:r,content:i}=n;return _(e,"os-host"),_(o,"os-padding"),_(r,"os-viewport"),_(i,"os-content"),n},Vt=(t,n,e)=>{const o=Nt(t),r=[],{host:i}=o;m(r,Ct(o));It(i,t=>{g(r,t?n=>{n.U&&n.U(t)}:t=>{t.Y&&t.Y()})},{R:!0,K:!0}),((t,n)=>{const e=L('<div class="os-trinsic-observer"></div>')[0],o=[],r=et(t=>0===t.h||t.isIntersecting||t.intersectionRatio>0,{p:!1});if(dt){const i=new dt(t=>{if(t&&t.length>0){const e=t.pop();if(e){const t=r(0,e);t.m&&n(!1,t)}}},{root:t});i.observe(e),m(o,()=>i.disconnect())}else m(o,It(e,()=>{const t=P(e),o=r(0,t);o.m&&n(!1,o)}));M(t,e)})(i,(t,n)=>{g(r,e=>{e.G&&e.G(t,n)})})};export default()=>[$t(),Vt(document.body),L(' <div class="os-host"> <div class="os-resize-observer-host"></div> <div class="os-padding"> <div class="os-viewport"> <div class="os-content"> fdfhdfgh </div> </div> </div> <div class="os-scrollbar os-scrollbar-horizontal"> <div class="os-scrollbar-track"> <div class="os-scrollbar-handle"></div> </div> </div> <div class="os-scrollbar os-scrollbar-vertical"> <div class="os-scrollbar-track"> <div class="os-scrollbar-handle"></div> </div> </div> <div class="os-scrollbar-corner"></div> </div>')]; |