@spscommerce/positioning 5.10.5-ie → 5.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +1 -0
- package/lib/index.d.ts +4 -0
- package/lib/index.es.js +1063 -0
- package/lib/position-anchor.enum.d.ts +7 -0
- package/lib/position.enum.d.ts +18 -0
- package/lib/positioning-options.interface.d.ts +37 -0
- package/lib/positioning.service.d.ts +55 -0
- package/package.json +7 -7
- package/vite.config.js +1 -1
package/lib/index.cjs.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var j=Object.defineProperty,V=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var S=(e,i,r)=>i in e?j(e,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[i]=r,D=(e,i)=>{for(var r in i||(i={}))z.call(i,r)&&S(e,r,i[r]);if(C)for(var r of C(i))W.call(i,r)&&S(e,r,i[r]);return e},F=(e,i)=>V(e,G(i));Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var N=require("@spscommerce/utils");exports.Position=void 0;(function(e){e.TOP_LEFT="top left",e.TOP_MIDDLE="top middle",e.TOP_RIGHT="top right",e.RIGHT_TOP="right top",e.RIGHT_MIDDLE="right middle",e.RIGHT_BOTTOM="right bottom",e.BOTTOM_RIGHT="bottom right",e.BOTTOM_MIDDLE="bottom middle",e.BOTTOM_LEFT="bottom left",e.LEFT_BOTTOM="left bottom",e.LEFT_MIDDLE="left middle",e.LEFT_TOP="left top"})(exports.Position||(exports.Position={}));exports.PositionAnchor=void 0;(function(e){e.TOP_LEFT="top left",e.TOP_RIGHT="top right",e.BOTTOM_LEFT="bottom left",e.BOTTOM_RIGHT="bottom right"})(exports.PositionAnchor||(exports.PositionAnchor={}));const H={anchor:exports.PositionAnchor.TOP_LEFT,offsets:[],position:exports.Position.TOP_LEFT};(function(){if(typeof window!="object")return;if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype){"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});return}function e(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch{return null}}var i=function(t){for(var o=t,n=e(o);n;)o=n.ownerDocument,n=e(o);return o}(window.document),r=[],f=null,g=null;function b(t){this.time=t.time,this.target=t.target,this.rootBounds=m(t.rootBounds),this.boundingClientRect=m(t.boundingClientRect),this.intersectionRect=m(t.intersectionRect||w()),this.isIntersecting=!!t.intersectionRect;var o=this.boundingClientRect,n=o.width*o.height,c=this.intersectionRect,a=c.width*c.height;n?this.intersectionRatio=Number((a/n).toFixed(4)):this.intersectionRatio=this.isIntersecting?1:0}function l(t,o){var n=o||{};if(typeof t!="function")throw new Error("callback must be a function");if(n.root&&n.root.nodeType!=1&&n.root.nodeType!=9)throw new Error("root must be a Document or Element");this._checkForIntersections=d(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(n.rootMargin),this.thresholds=this._initThresholds(n.threshold),this.root=n.root||null,this.rootMargin=this._rootMarginValues.map(function(c){return c.value+c.unit}).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}l.prototype.THROTTLE_TIMEOUT=100,l.prototype.POLL_INTERVAL=null,l.prototype.USE_MUTATION_OBSERVER=!0,l._setupCrossOriginUpdater=function(){return f||(f=function(t,o){!t||!o?g=w():g=x(t,o),r.forEach(function(n){n._checkForIntersections()})}),f},l._resetCrossOriginUpdater=function(){f=null,g=null},l.prototype.observe=function(t){var o=this._observationTargets.some(function(n){return n.element==t});if(!o){if(!(t&&t.nodeType==1))throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(t.ownerDocument),this._checkForIntersections()}},l.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(o){return o.element!=t}),this._unmonitorIntersections(t.ownerDocument),this._observationTargets.length==0&&this._unregisterInstance()},l.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},l.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},l.prototype._initThresholds=function(t){var o=t||[0];return Array.isArray(o)||(o=[o]),o.sort().filter(function(n,c,a){if(typeof n!="number"||isNaN(n)||n<0||n>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return n!==a[c-1]})},l.prototype._parseRootMargin=function(t){var o=t||"0px",n=o.split(/\s+/).map(function(c){var a=/^(-?\d*\.?\d+)(px|%)$/.exec(c);if(!a)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(a[1]),unit:a[2]}});return n[1]=n[1]||n[0],n[2]=n[2]||n[0],n[3]=n[3]||n[1],n},l.prototype._monitorIntersections=function(t){var o=t.defaultView;if(!!o&&this._monitoringDocuments.indexOf(t)==-1){var n=this._checkForIntersections,c=null,a=null;this.POLL_INTERVAL?c=o.setInterval(n,this.POLL_INTERVAL):(u(o,"resize",n,!0),u(t,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in o&&(a=new o.MutationObserver(n),a.observe(t,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))),this._monitoringDocuments.push(t),this._monitoringUnsubscribes.push(function(){var O=t.defaultView;O&&(c&&O.clearInterval(c),p(O,"resize",n,!0)),p(t,"scroll",n,!0),a&&a.disconnect()});var E=this.root&&(this.root.ownerDocument||this.root)||i;if(t!=E){var y=e(t);y&&this._monitorIntersections(y.ownerDocument)}}},l.prototype._unmonitorIntersections=function(t){var o=this._monitoringDocuments.indexOf(t);if(o!=-1){var n=this.root&&(this.root.ownerDocument||this.root)||i,c=this._observationTargets.some(function(y){var O=y.element.ownerDocument;if(O==t)return!0;for(;O&&O!=n;){var R=e(O);if(O=R&&R.ownerDocument,O==t)return!0}return!1});if(!c){var a=this._monitoringUnsubscribes[o];if(this._monitoringDocuments.splice(o,1),this._monitoringUnsubscribes.splice(o,1),a(),t!=n){var E=e(t);E&&this._unmonitorIntersections(E.ownerDocument)}}}},l.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0,this._monitoringUnsubscribes.length=0;for(var o=0;o<t.length;o++)t[o]()},l.prototype._checkForIntersections=function(){if(!(!this.root&&f&&!g)){var t=this._rootIsInDom(),o=t?this._getRootRect():w();this._observationTargets.forEach(function(n){var c=n.element,a=T(c),E=this._rootContainsTarget(c),y=n.entry,O=t&&E&&this._computeTargetAndRootIntersection(c,a,o),R=null;this._rootContainsTarget(c)?(!f||this.root)&&(R=o):R=w();var L=n.entry=new b({time:_(),target:c,boundingClientRect:a,rootBounds:R,intersectionRect:O});y?t&&E?this._hasCrossedThreshold(y,L)&&this._queuedEntries.push(L):y&&y.isIntersecting&&this._queuedEntries.push(L):this._queuedEntries.push(L)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)}},l.prototype._computeTargetAndRootIntersection=function(t,o,n){if(window.getComputedStyle(t).display!="none"){for(var c=o,a=I(t),E=!1;!E&&a;){var y=null,O=a.nodeType==1?window.getComputedStyle(a):{};if(O.display=="none")return null;if(a==this.root||a.nodeType==9)if(E=!0,a==this.root||a==i)f&&!this.root?!g||g.width==0&&g.height==0?(a=null,y=null,c=null):y=g:y=n;else{var R=I(a),L=R&&T(R),k=R&&this._computeTargetAndRootIntersection(R,L,n);L&&k?(a=R,y=x(L,k)):(a=null,c=null)}else{var B=a.ownerDocument;a!=B.body&&a!=B.documentElement&&O.overflow!="visible"&&(y=T(a))}if(y&&(c=v(y,c)),!c)break;a=a&&I(a)}return c}},l.prototype._getRootRect=function(){var t;if(this.root&&!P(this.root))t=T(this.root);else{var o=P(this.root)?this.root:i,n=o.documentElement,c=o.body;t={top:0,left:0,right:n.clientWidth||c.clientWidth,width:n.clientWidth||c.clientWidth,bottom:n.clientHeight||c.clientHeight,height:n.clientHeight||c.clientHeight}}return this._expandRectByRootMargin(t)},l.prototype._expandRectByRootMargin=function(t){var o=this._rootMarginValues.map(function(c,a){return c.unit=="px"?c.value:c.value*(a%2?t.width:t.height)/100}),n={top:t.top-o[0],right:t.right+o[1],bottom:t.bottom+o[2],left:t.left-o[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},l.prototype._hasCrossedThreshold=function(t,o){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,c=o.isIntersecting?o.intersectionRatio||0:-1;if(n!==c)for(var a=0;a<this.thresholds.length;a++){var E=this.thresholds[a];if(E==n||E==c||E<n!=E<c)return!0}},l.prototype._rootIsInDom=function(){return!this.root||h(i,this.root)},l.prototype._rootContainsTarget=function(t){var o=this.root&&(this.root.ownerDocument||this.root)||i;return h(o,t)&&(!this.root||o==t.ownerDocument)},l.prototype._registerInstance=function(){r.indexOf(this)<0&&r.push(this)},l.prototype._unregisterInstance=function(){var t=r.indexOf(this);t!=-1&&r.splice(t,1)};function _(){return window.performance&&performance.now&&performance.now()}function d(t,o){var n=null;return function(){n||(n=setTimeout(function(){t(),n=null},o))}}function u(t,o,n,c){typeof t.addEventListener=="function"?t.addEventListener(o,n,c||!1):typeof t.attachEvent=="function"&&t.attachEvent("on"+o,n)}function p(t,o,n,c){typeof t.removeEventListener=="function"?t.removeEventListener(o,n,c||!1):typeof t.detatchEvent=="function"&&t.detatchEvent("on"+o,n)}function v(t,o){var n=Math.max(t.top,o.top),c=Math.min(t.bottom,o.bottom),a=Math.max(t.left,o.left),E=Math.min(t.right,o.right),y=E-a,O=c-n;return y>=0&&O>=0&&{top:n,bottom:c,left:a,right:E,width:y,height:O}||null}function T(t){var o;try{o=t.getBoundingClientRect()}catch{}return o?(o.width&&o.height||(o={top:o.top,right:o.right,bottom:o.bottom,left:o.left,width:o.right-o.left,height:o.bottom-o.top}),o):w()}function w(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function m(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function x(t,o){var n=o.top-t.top,c=o.left-t.left;return{top:n,left:c,height:o.height,width:o.width,bottom:n+o.height,right:c+o.width}}function h(t,o){for(var n=o;n;){if(n==t)return!0;n=I(n)}return!1}function I(t){var o=t.parentNode;return t.nodeType==9&&t!=i?e(t):(o&&o.assignedSlot&&(o=o.assignedSlot.parentNode),o&&o.nodeType==11&&o.host?o.host:o)}function P(t){return t&&t.nodeType===9}window.IntersectionObserver=l,window.IntersectionObserverEntry=b})();var U={exports:{}};(function(e){var i=Object.prototype.hasOwnProperty,r="~";function f(){}Object.create&&(f.prototype=Object.create(null),new f().__proto__||(r=!1));function g(d,u,p){this.fn=d,this.context=u,this.once=p||!1}function b(d,u,p,v,T){if(typeof p!="function")throw new TypeError("The listener must be a function");var w=new g(p,v||d,T),m=r?r+u:u;return d._events[m]?d._events[m].fn?d._events[m]=[d._events[m],w]:d._events[m].push(w):(d._events[m]=w,d._eventsCount++),d}function l(d,u){--d._eventsCount==0?d._events=new f:delete d._events[u]}function _(){this._events=new f,this._eventsCount=0}_.prototype.eventNames=function(){var u=[],p,v;if(this._eventsCount===0)return u;for(v in p=this._events)i.call(p,v)&&u.push(r?v.slice(1):v);return Object.getOwnPropertySymbols?u.concat(Object.getOwnPropertySymbols(p)):u},_.prototype.listeners=function(u){var p=r?r+u:u,v=this._events[p];if(!v)return[];if(v.fn)return[v.fn];for(var T=0,w=v.length,m=new Array(w);T<w;T++)m[T]=v[T].fn;return m},_.prototype.listenerCount=function(u){var p=r?r+u:u,v=this._events[p];return v?v.fn?1:v.length:0},_.prototype.emit=function(u,p,v,T,w,m){var x=r?r+u:u;if(!this._events[x])return!1;var h=this._events[x],I=arguments.length,P,t;if(h.fn){switch(h.once&&this.removeListener(u,h.fn,void 0,!0),I){case 1:return h.fn.call(h.context),!0;case 2:return h.fn.call(h.context,p),!0;case 3:return h.fn.call(h.context,p,v),!0;case 4:return h.fn.call(h.context,p,v,T),!0;case 5:return h.fn.call(h.context,p,v,T,w),!0;case 6:return h.fn.call(h.context,p,v,T,w,m),!0}for(t=1,P=new Array(I-1);t<I;t++)P[t-1]=arguments[t];h.fn.apply(h.context,P)}else{var o=h.length,n;for(t=0;t<o;t++)switch(h[t].once&&this.removeListener(u,h[t].fn,void 0,!0),I){case 1:h[t].fn.call(h[t].context);break;case 2:h[t].fn.call(h[t].context,p);break;case 3:h[t].fn.call(h[t].context,p,v);break;case 4:h[t].fn.call(h[t].context,p,v,T);break;default:if(!P)for(n=1,P=new Array(I-1);n<I;n++)P[n-1]=arguments[n];h[t].fn.apply(h[t].context,P)}}return!0},_.prototype.on=function(u,p,v){return b(this,u,p,v,!1)},_.prototype.once=function(u,p,v){return b(this,u,p,v,!0)},_.prototype.removeListener=function(u,p,v,T){var w=r?r+u:u;if(!this._events[w])return this;if(!p)return l(this,w),this;var m=this._events[w];if(m.fn)m.fn===p&&(!T||m.once)&&(!v||m.context===v)&&l(this,w);else{for(var x=0,h=[],I=m.length;x<I;x++)(m[x].fn!==p||T&&!m[x].once||v&&m[x].context!==v)&&h.push(m[x]);h.length?this._events[w]=h.length===1?h[0]:h:l(this,w)}return this},_.prototype.removeAllListeners=function(u){var p;return u?(p=r?r+u:u,this._events[p]&&l(this,p)):(this._events=new f,this._eventsCount=0),this},_.prototype.off=_.prototype.removeListener,_.prototype.addListener=_.prototype.on,_.prefixed=r,_.EventEmitter=_,e.exports=_})(U);var $=Object.defineProperty,q=Object.getOwnPropertyDescriptor,Y=(e,i,r,f)=>{for(var g=f>1?void 0:f?q(i,r):i,b=e.length-1,l;b>=0;b--)(l=e[b])&&(g=(f?l(i,r,g):l(g))||g);return f&&g&&$(i,r,g),g};const A=60,s=class{static on(e,i){s.events.on(e,i)}static off(e,i){s.events.off(e,i)}static once(e,i){s.events.once(e,i)}static checkCollisions(e,i){const r=i||Array.from(s.elements.keys()),f=e.getBoundingClientRect(),g=[];for(const b of r)if(b!==e){const l=b.getBoundingClientRect();l.left<=f.right&&l.right>=f.left&&l.top<=f.bottom&&l.bottom>=f.top&&g.push(b)}g.length&&s.onElementIntersection(e,g)}static isPositioned(e){return s.elements.has(e)}static getPositioningOptions(e){return s.elements.has(e)?s.elements.get(e):null}static position(e,i={}){const r=D(D({},H),i);let f=e;for(;f!==document.body;)if(f=f.parentElement,f.classList.contains("sps-focused-task")){r.scrollParent=f,s.registeredScrollParents.has(f)||(s.registeredScrollParents.add(f),f.addEventListener("scroll",s.update));break}if(e.style.visibility="hidden",s.elements.size===0&&(window.addEventListener("resize",s.update),window.addEventListener("scroll",s.update)),!r.relativeTo)throw new Error("You must provide an element for the relativeTo option to position an element.");s.elements.set(e,r),N.onNextTick(()=>{s.fixElementPosition(e),s.viewportObserver.observe(e),e.style.visibility="",s.checkCollisions(e)})}static release(e){if(s.elements.has(e)){s.clearStyles(e);const i=s.elements.get(e);i.scrollParent&&(i.scrollParent.removeEventListener("scroll",s.update),s.registeredScrollParents.delete(i.scrollParent)),s.elements.delete(e),s.elements.size===0&&(window.removeEventListener("resize",s.update),window.removeEventListener("scroll",s.update)),s.viewportObserver.unobserve(e)}}static releaseAll(){for(const e of s.elements.keys())s.release(e)}static refresh(e){s.elements.has(e)&&(s.clearStyles(e),s.fixElementPosition(e),s.checkCollisions(e))}static refreshAll(){for(const e of s.elements.keys())s.refresh(e)}static reposition(e,i){if(s.elements.has(e)){const r=s.elements.get(e);s.elements.set(e,Object.assign(r,i)),s.refresh(e)}}static onViewportIntersection(e){for(const i of e){const r=Object.keys(IntersectionObserverEntry.prototype).reduce((f,g)=>F(D({},f),{[g]:i[g]}),{});r.rootBounds=r.rootBounds||s.getRootBounds(),s.events.emit("viewportIntersection",Object.freeze(r))}}static onElementIntersection(e,i){s.events.emit("elementIntersection",{target:e,intersectingWith:i})}static getRootBounds(){const e=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=Math.max(document.documentElement.clientHeight,window.innerHeight||0);return{x:0,y:A,left:0,top:A,right:e,bottom:i,height:i-A,width:e}}static clearStyles(e){Object.assign(e.style,{position:"",width:"",top:"",left:"",right:"",bottom:"",visibility:"",zIndex:""})}static fixElementPosition(e,i){if(!this.elements.has(e))return;const r=i||this.elements.get(e),f=this.getRootBounds(),g=e.getBoundingClientRect(),b=r.relativeTo.getBoundingClientRect(),{width:l}=r.useRelativeTargetWidth?b:g;Object.assign(e.style,{minWidth:`${l}px`,position:"fixed",zIndex:r.zIndex||""});let _,d;const u=r.position.split(" "),p=r.offsets[0]||0,v=r.offsets[1]||0;switch(_=0,d=0,u[0]){case"top":_=b.top-g.height-p;break;case"left":d=b.left-l-p;break;case"right":d=b.right+p;break;case"bottom":_=b.bottom+p;break;default:throw new Error(`${r.position} is not a valid position`)}switch(u[1]){case"left":d=b.left-v;break;case"top":_=b.top-v;break;case"middle":u[0]==="top"||u[0]==="bottom"?d=b.left+b.width/2-l/2+v:(u[0]==="left"||u[0]==="right")&&(_=b.top+b.height/2-g.height/2+v);break;case"bottom":_=b.bottom-g.height+v;break;case"right":d=b.right-l+v;break;default:throw new Error(`${r.position} is not a valid position`)}const T=_+g.height,w=d+g.width,m=`${Math.round(_)}px`,x=`${Math.round(f.bottom-T)}px`,h=`${Math.round(d)}px`,I=`${Math.round(f.right-w)}px`;switch(r.anchor){case exports.PositionAnchor.TOP_LEFT:Object.assign(e.style,{top:m,bottom:"auto",left:h,right:"auto"});break;case exports.PositionAnchor.TOP_RIGHT:Object.assign(e.style,{top:m,bottom:"auto",left:"auto",right:I});break;case exports.PositionAnchor.BOTTOM_LEFT:Object.assign(e.style,{top:"auto",bottom:x,left:h,right:"auto"});break;case exports.PositionAnchor.BOTTOM_RIGHT:Object.assign(e.style,{top:"auto",bottom:x,left:"auto",right:I});break}}static update(e){const i=s.elements.entries(),r=[];for(const[f,g]of i)(!e||e.target===document||e.target===g.scrollParent||e.target===window)&&(s.fixElementPosition(f,g),s.checkCollisions(f,r),r.push(f))}on(e,i){s.on(e,i)}off(e,i){s.off(e,i)}once(e,i){s.once(e,i)}isPositioned(e){return s.isPositioned(e)}getPositioningOptions(e){return s.getPositioningOptions(e)}position(e,i={}){s.position(e,i)}release(e){s.release(e)}releaseAll(){s.releaseAll()}refresh(e){s.refresh(e)}refreshAll(){s.refreshAll()}reposition(e,i){s.reposition(e,i)}};let M=s;M.elements=new Map;M.registeredScrollParents=new Set;M.events=new U.exports.EventEmitter;M.viewportObserver=new IntersectionObserver(s.onViewportIntersection,{rootMargin:`-${A}px 0px 0px`,threshold:1});Y([N.lockedToAnimationFrames],M,"update",1);exports.DEFAULT_POSITIONING_OPTIONS=H;exports.PositioningService=M;
|
package/lib/index.d.ts
ADDED
package/lib/index.es.js
ADDED
|
@@ -0,0 +1,1063 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { onNextTick, lockedToAnimationFrames } from "@spscommerce/utils";
|
|
21
|
+
var Position;
|
|
22
|
+
(function(Position2) {
|
|
23
|
+
Position2["TOP_LEFT"] = "top left";
|
|
24
|
+
Position2["TOP_MIDDLE"] = "top middle";
|
|
25
|
+
Position2["TOP_RIGHT"] = "top right";
|
|
26
|
+
Position2["RIGHT_TOP"] = "right top";
|
|
27
|
+
Position2["RIGHT_MIDDLE"] = "right middle";
|
|
28
|
+
Position2["RIGHT_BOTTOM"] = "right bottom";
|
|
29
|
+
Position2["BOTTOM_RIGHT"] = "bottom right";
|
|
30
|
+
Position2["BOTTOM_MIDDLE"] = "bottom middle";
|
|
31
|
+
Position2["BOTTOM_LEFT"] = "bottom left";
|
|
32
|
+
Position2["LEFT_BOTTOM"] = "left bottom";
|
|
33
|
+
Position2["LEFT_MIDDLE"] = "left middle";
|
|
34
|
+
Position2["LEFT_TOP"] = "left top";
|
|
35
|
+
})(Position || (Position = {}));
|
|
36
|
+
var PositionAnchor;
|
|
37
|
+
(function(PositionAnchor2) {
|
|
38
|
+
PositionAnchor2["TOP_LEFT"] = "top left";
|
|
39
|
+
PositionAnchor2["TOP_RIGHT"] = "top right";
|
|
40
|
+
PositionAnchor2["BOTTOM_LEFT"] = "bottom left";
|
|
41
|
+
PositionAnchor2["BOTTOM_RIGHT"] = "bottom right";
|
|
42
|
+
})(PositionAnchor || (PositionAnchor = {}));
|
|
43
|
+
const DEFAULT_POSITIONING_OPTIONS = {
|
|
44
|
+
anchor: PositionAnchor.TOP_LEFT,
|
|
45
|
+
offsets: [],
|
|
46
|
+
position: Position.TOP_LEFT
|
|
47
|
+
};
|
|
48
|
+
(function() {
|
|
49
|
+
if (typeof window !== "object") {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
|
|
53
|
+
if (!("isIntersecting" in window.IntersectionObserverEntry.prototype)) {
|
|
54
|
+
Object.defineProperty(window.IntersectionObserverEntry.prototype, "isIntersecting", {
|
|
55
|
+
get: function() {
|
|
56
|
+
return this.intersectionRatio > 0;
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
function getFrameElement(doc) {
|
|
63
|
+
try {
|
|
64
|
+
return doc.defaultView && doc.defaultView.frameElement || null;
|
|
65
|
+
} catch (e) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
var document2 = function(startDoc) {
|
|
70
|
+
var doc = startDoc;
|
|
71
|
+
var frame = getFrameElement(doc);
|
|
72
|
+
while (frame) {
|
|
73
|
+
doc = frame.ownerDocument;
|
|
74
|
+
frame = getFrameElement(doc);
|
|
75
|
+
}
|
|
76
|
+
return doc;
|
|
77
|
+
}(window.document);
|
|
78
|
+
var registry = [];
|
|
79
|
+
var crossOriginUpdater = null;
|
|
80
|
+
var crossOriginRect = null;
|
|
81
|
+
function IntersectionObserverEntry2(entry) {
|
|
82
|
+
this.time = entry.time;
|
|
83
|
+
this.target = entry.target;
|
|
84
|
+
this.rootBounds = ensureDOMRect(entry.rootBounds);
|
|
85
|
+
this.boundingClientRect = ensureDOMRect(entry.boundingClientRect);
|
|
86
|
+
this.intersectionRect = ensureDOMRect(entry.intersectionRect || getEmptyRect());
|
|
87
|
+
this.isIntersecting = !!entry.intersectionRect;
|
|
88
|
+
var targetRect = this.boundingClientRect;
|
|
89
|
+
var targetArea = targetRect.width * targetRect.height;
|
|
90
|
+
var intersectionRect = this.intersectionRect;
|
|
91
|
+
var intersectionArea = intersectionRect.width * intersectionRect.height;
|
|
92
|
+
if (targetArea) {
|
|
93
|
+
this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
|
|
94
|
+
} else {
|
|
95
|
+
this.intersectionRatio = this.isIntersecting ? 1 : 0;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
function IntersectionObserver2(callback, opt_options) {
|
|
99
|
+
var options = opt_options || {};
|
|
100
|
+
if (typeof callback != "function") {
|
|
101
|
+
throw new Error("callback must be a function");
|
|
102
|
+
}
|
|
103
|
+
if (options.root && options.root.nodeType != 1 && options.root.nodeType != 9) {
|
|
104
|
+
throw new Error("root must be a Document or Element");
|
|
105
|
+
}
|
|
106
|
+
this._checkForIntersections = throttle(this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);
|
|
107
|
+
this._callback = callback;
|
|
108
|
+
this._observationTargets = [];
|
|
109
|
+
this._queuedEntries = [];
|
|
110
|
+
this._rootMarginValues = this._parseRootMargin(options.rootMargin);
|
|
111
|
+
this.thresholds = this._initThresholds(options.threshold);
|
|
112
|
+
this.root = options.root || null;
|
|
113
|
+
this.rootMargin = this._rootMarginValues.map(function(margin) {
|
|
114
|
+
return margin.value + margin.unit;
|
|
115
|
+
}).join(" ");
|
|
116
|
+
this._monitoringDocuments = [];
|
|
117
|
+
this._monitoringUnsubscribes = [];
|
|
118
|
+
}
|
|
119
|
+
IntersectionObserver2.prototype.THROTTLE_TIMEOUT = 100;
|
|
120
|
+
IntersectionObserver2.prototype.POLL_INTERVAL = null;
|
|
121
|
+
IntersectionObserver2.prototype.USE_MUTATION_OBSERVER = true;
|
|
122
|
+
IntersectionObserver2._setupCrossOriginUpdater = function() {
|
|
123
|
+
if (!crossOriginUpdater) {
|
|
124
|
+
crossOriginUpdater = function(boundingClientRect, intersectionRect) {
|
|
125
|
+
if (!boundingClientRect || !intersectionRect) {
|
|
126
|
+
crossOriginRect = getEmptyRect();
|
|
127
|
+
} else {
|
|
128
|
+
crossOriginRect = convertFromParentRect(boundingClientRect, intersectionRect);
|
|
129
|
+
}
|
|
130
|
+
registry.forEach(function(observer) {
|
|
131
|
+
observer._checkForIntersections();
|
|
132
|
+
});
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
return crossOriginUpdater;
|
|
136
|
+
};
|
|
137
|
+
IntersectionObserver2._resetCrossOriginUpdater = function() {
|
|
138
|
+
crossOriginUpdater = null;
|
|
139
|
+
crossOriginRect = null;
|
|
140
|
+
};
|
|
141
|
+
IntersectionObserver2.prototype.observe = function(target) {
|
|
142
|
+
var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
|
|
143
|
+
return item.element == target;
|
|
144
|
+
});
|
|
145
|
+
if (isTargetAlreadyObserved) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
if (!(target && target.nodeType == 1)) {
|
|
149
|
+
throw new Error("target must be an Element");
|
|
150
|
+
}
|
|
151
|
+
this._registerInstance();
|
|
152
|
+
this._observationTargets.push({ element: target, entry: null });
|
|
153
|
+
this._monitorIntersections(target.ownerDocument);
|
|
154
|
+
this._checkForIntersections();
|
|
155
|
+
};
|
|
156
|
+
IntersectionObserver2.prototype.unobserve = function(target) {
|
|
157
|
+
this._observationTargets = this._observationTargets.filter(function(item) {
|
|
158
|
+
return item.element != target;
|
|
159
|
+
});
|
|
160
|
+
this._unmonitorIntersections(target.ownerDocument);
|
|
161
|
+
if (this._observationTargets.length == 0) {
|
|
162
|
+
this._unregisterInstance();
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
IntersectionObserver2.prototype.disconnect = function() {
|
|
166
|
+
this._observationTargets = [];
|
|
167
|
+
this._unmonitorAllIntersections();
|
|
168
|
+
this._unregisterInstance();
|
|
169
|
+
};
|
|
170
|
+
IntersectionObserver2.prototype.takeRecords = function() {
|
|
171
|
+
var records = this._queuedEntries.slice();
|
|
172
|
+
this._queuedEntries = [];
|
|
173
|
+
return records;
|
|
174
|
+
};
|
|
175
|
+
IntersectionObserver2.prototype._initThresholds = function(opt_threshold) {
|
|
176
|
+
var threshold = opt_threshold || [0];
|
|
177
|
+
if (!Array.isArray(threshold))
|
|
178
|
+
threshold = [threshold];
|
|
179
|
+
return threshold.sort().filter(function(t, i, a) {
|
|
180
|
+
if (typeof t != "number" || isNaN(t) || t < 0 || t > 1) {
|
|
181
|
+
throw new Error("threshold must be a number between 0 and 1 inclusively");
|
|
182
|
+
}
|
|
183
|
+
return t !== a[i - 1];
|
|
184
|
+
});
|
|
185
|
+
};
|
|
186
|
+
IntersectionObserver2.prototype._parseRootMargin = function(opt_rootMargin) {
|
|
187
|
+
var marginString = opt_rootMargin || "0px";
|
|
188
|
+
var margins = marginString.split(/\s+/).map(function(margin) {
|
|
189
|
+
var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
|
|
190
|
+
if (!parts) {
|
|
191
|
+
throw new Error("rootMargin must be specified in pixels or percent");
|
|
192
|
+
}
|
|
193
|
+
return { value: parseFloat(parts[1]), unit: parts[2] };
|
|
194
|
+
});
|
|
195
|
+
margins[1] = margins[1] || margins[0];
|
|
196
|
+
margins[2] = margins[2] || margins[0];
|
|
197
|
+
margins[3] = margins[3] || margins[1];
|
|
198
|
+
return margins;
|
|
199
|
+
};
|
|
200
|
+
IntersectionObserver2.prototype._monitorIntersections = function(doc) {
|
|
201
|
+
var win = doc.defaultView;
|
|
202
|
+
if (!win) {
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
if (this._monitoringDocuments.indexOf(doc) != -1) {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
var callback = this._checkForIntersections;
|
|
209
|
+
var monitoringInterval = null;
|
|
210
|
+
var domObserver = null;
|
|
211
|
+
if (this.POLL_INTERVAL) {
|
|
212
|
+
monitoringInterval = win.setInterval(callback, this.POLL_INTERVAL);
|
|
213
|
+
} else {
|
|
214
|
+
addEvent(win, "resize", callback, true);
|
|
215
|
+
addEvent(doc, "scroll", callback, true);
|
|
216
|
+
if (this.USE_MUTATION_OBSERVER && "MutationObserver" in win) {
|
|
217
|
+
domObserver = new win.MutationObserver(callback);
|
|
218
|
+
domObserver.observe(doc, {
|
|
219
|
+
attributes: true,
|
|
220
|
+
childList: true,
|
|
221
|
+
characterData: true,
|
|
222
|
+
subtree: true
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
this._monitoringDocuments.push(doc);
|
|
227
|
+
this._monitoringUnsubscribes.push(function() {
|
|
228
|
+
var win2 = doc.defaultView;
|
|
229
|
+
if (win2) {
|
|
230
|
+
if (monitoringInterval) {
|
|
231
|
+
win2.clearInterval(monitoringInterval);
|
|
232
|
+
}
|
|
233
|
+
removeEvent(win2, "resize", callback, true);
|
|
234
|
+
}
|
|
235
|
+
removeEvent(doc, "scroll", callback, true);
|
|
236
|
+
if (domObserver) {
|
|
237
|
+
domObserver.disconnect();
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
var rootDoc = this.root && (this.root.ownerDocument || this.root) || document2;
|
|
241
|
+
if (doc != rootDoc) {
|
|
242
|
+
var frame = getFrameElement(doc);
|
|
243
|
+
if (frame) {
|
|
244
|
+
this._monitorIntersections(frame.ownerDocument);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
IntersectionObserver2.prototype._unmonitorIntersections = function(doc) {
|
|
249
|
+
var index = this._monitoringDocuments.indexOf(doc);
|
|
250
|
+
if (index == -1) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
var rootDoc = this.root && (this.root.ownerDocument || this.root) || document2;
|
|
254
|
+
var hasDependentTargets = this._observationTargets.some(function(item) {
|
|
255
|
+
var itemDoc = item.element.ownerDocument;
|
|
256
|
+
if (itemDoc == doc) {
|
|
257
|
+
return true;
|
|
258
|
+
}
|
|
259
|
+
while (itemDoc && itemDoc != rootDoc) {
|
|
260
|
+
var frame2 = getFrameElement(itemDoc);
|
|
261
|
+
itemDoc = frame2 && frame2.ownerDocument;
|
|
262
|
+
if (itemDoc == doc) {
|
|
263
|
+
return true;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
return false;
|
|
267
|
+
});
|
|
268
|
+
if (hasDependentTargets) {
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
var unsubscribe = this._monitoringUnsubscribes[index];
|
|
272
|
+
this._monitoringDocuments.splice(index, 1);
|
|
273
|
+
this._monitoringUnsubscribes.splice(index, 1);
|
|
274
|
+
unsubscribe();
|
|
275
|
+
if (doc != rootDoc) {
|
|
276
|
+
var frame = getFrameElement(doc);
|
|
277
|
+
if (frame) {
|
|
278
|
+
this._unmonitorIntersections(frame.ownerDocument);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
IntersectionObserver2.prototype._unmonitorAllIntersections = function() {
|
|
283
|
+
var unsubscribes = this._monitoringUnsubscribes.slice(0);
|
|
284
|
+
this._monitoringDocuments.length = 0;
|
|
285
|
+
this._monitoringUnsubscribes.length = 0;
|
|
286
|
+
for (var i = 0; i < unsubscribes.length; i++) {
|
|
287
|
+
unsubscribes[i]();
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
IntersectionObserver2.prototype._checkForIntersections = function() {
|
|
291
|
+
if (!this.root && crossOriginUpdater && !crossOriginRect) {
|
|
292
|
+
return;
|
|
293
|
+
}
|
|
294
|
+
var rootIsInDom = this._rootIsInDom();
|
|
295
|
+
var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
|
|
296
|
+
this._observationTargets.forEach(function(item) {
|
|
297
|
+
var target = item.element;
|
|
298
|
+
var targetRect = getBoundingClientRect(target);
|
|
299
|
+
var rootContainsTarget = this._rootContainsTarget(target);
|
|
300
|
+
var oldEntry = item.entry;
|
|
301
|
+
var intersectionRect = rootIsInDom && rootContainsTarget && this._computeTargetAndRootIntersection(target, targetRect, rootRect);
|
|
302
|
+
var rootBounds = null;
|
|
303
|
+
if (!this._rootContainsTarget(target)) {
|
|
304
|
+
rootBounds = getEmptyRect();
|
|
305
|
+
} else if (!crossOriginUpdater || this.root) {
|
|
306
|
+
rootBounds = rootRect;
|
|
307
|
+
}
|
|
308
|
+
var newEntry = item.entry = new IntersectionObserverEntry2({
|
|
309
|
+
time: now(),
|
|
310
|
+
target,
|
|
311
|
+
boundingClientRect: targetRect,
|
|
312
|
+
rootBounds,
|
|
313
|
+
intersectionRect
|
|
314
|
+
});
|
|
315
|
+
if (!oldEntry) {
|
|
316
|
+
this._queuedEntries.push(newEntry);
|
|
317
|
+
} else if (rootIsInDom && rootContainsTarget) {
|
|
318
|
+
if (this._hasCrossedThreshold(oldEntry, newEntry)) {
|
|
319
|
+
this._queuedEntries.push(newEntry);
|
|
320
|
+
}
|
|
321
|
+
} else {
|
|
322
|
+
if (oldEntry && oldEntry.isIntersecting) {
|
|
323
|
+
this._queuedEntries.push(newEntry);
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
}, this);
|
|
327
|
+
if (this._queuedEntries.length) {
|
|
328
|
+
this._callback(this.takeRecords(), this);
|
|
329
|
+
}
|
|
330
|
+
};
|
|
331
|
+
IntersectionObserver2.prototype._computeTargetAndRootIntersection = function(target, targetRect, rootRect) {
|
|
332
|
+
if (window.getComputedStyle(target).display == "none")
|
|
333
|
+
return;
|
|
334
|
+
var intersectionRect = targetRect;
|
|
335
|
+
var parent = getParentNode(target);
|
|
336
|
+
var atRoot = false;
|
|
337
|
+
while (!atRoot && parent) {
|
|
338
|
+
var parentRect = null;
|
|
339
|
+
var parentComputedStyle = parent.nodeType == 1 ? window.getComputedStyle(parent) : {};
|
|
340
|
+
if (parentComputedStyle.display == "none")
|
|
341
|
+
return null;
|
|
342
|
+
if (parent == this.root || parent.nodeType == 9) {
|
|
343
|
+
atRoot = true;
|
|
344
|
+
if (parent == this.root || parent == document2) {
|
|
345
|
+
if (crossOriginUpdater && !this.root) {
|
|
346
|
+
if (!crossOriginRect || crossOriginRect.width == 0 && crossOriginRect.height == 0) {
|
|
347
|
+
parent = null;
|
|
348
|
+
parentRect = null;
|
|
349
|
+
intersectionRect = null;
|
|
350
|
+
} else {
|
|
351
|
+
parentRect = crossOriginRect;
|
|
352
|
+
}
|
|
353
|
+
} else {
|
|
354
|
+
parentRect = rootRect;
|
|
355
|
+
}
|
|
356
|
+
} else {
|
|
357
|
+
var frame = getParentNode(parent);
|
|
358
|
+
var frameRect = frame && getBoundingClientRect(frame);
|
|
359
|
+
var frameIntersect = frame && this._computeTargetAndRootIntersection(frame, frameRect, rootRect);
|
|
360
|
+
if (frameRect && frameIntersect) {
|
|
361
|
+
parent = frame;
|
|
362
|
+
parentRect = convertFromParentRect(frameRect, frameIntersect);
|
|
363
|
+
} else {
|
|
364
|
+
parent = null;
|
|
365
|
+
intersectionRect = null;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
} else {
|
|
369
|
+
var doc = parent.ownerDocument;
|
|
370
|
+
if (parent != doc.body && parent != doc.documentElement && parentComputedStyle.overflow != "visible") {
|
|
371
|
+
parentRect = getBoundingClientRect(parent);
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
if (parentRect) {
|
|
375
|
+
intersectionRect = computeRectIntersection(parentRect, intersectionRect);
|
|
376
|
+
}
|
|
377
|
+
if (!intersectionRect)
|
|
378
|
+
break;
|
|
379
|
+
parent = parent && getParentNode(parent);
|
|
380
|
+
}
|
|
381
|
+
return intersectionRect;
|
|
382
|
+
};
|
|
383
|
+
IntersectionObserver2.prototype._getRootRect = function() {
|
|
384
|
+
var rootRect;
|
|
385
|
+
if (this.root && !isDoc(this.root)) {
|
|
386
|
+
rootRect = getBoundingClientRect(this.root);
|
|
387
|
+
} else {
|
|
388
|
+
var doc = isDoc(this.root) ? this.root : document2;
|
|
389
|
+
var html = doc.documentElement;
|
|
390
|
+
var body = doc.body;
|
|
391
|
+
rootRect = {
|
|
392
|
+
top: 0,
|
|
393
|
+
left: 0,
|
|
394
|
+
right: html.clientWidth || body.clientWidth,
|
|
395
|
+
width: html.clientWidth || body.clientWidth,
|
|
396
|
+
bottom: html.clientHeight || body.clientHeight,
|
|
397
|
+
height: html.clientHeight || body.clientHeight
|
|
398
|
+
};
|
|
399
|
+
}
|
|
400
|
+
return this._expandRectByRootMargin(rootRect);
|
|
401
|
+
};
|
|
402
|
+
IntersectionObserver2.prototype._expandRectByRootMargin = function(rect) {
|
|
403
|
+
var margins = this._rootMarginValues.map(function(margin, i) {
|
|
404
|
+
return margin.unit == "px" ? margin.value : margin.value * (i % 2 ? rect.width : rect.height) / 100;
|
|
405
|
+
});
|
|
406
|
+
var newRect = {
|
|
407
|
+
top: rect.top - margins[0],
|
|
408
|
+
right: rect.right + margins[1],
|
|
409
|
+
bottom: rect.bottom + margins[2],
|
|
410
|
+
left: rect.left - margins[3]
|
|
411
|
+
};
|
|
412
|
+
newRect.width = newRect.right - newRect.left;
|
|
413
|
+
newRect.height = newRect.bottom - newRect.top;
|
|
414
|
+
return newRect;
|
|
415
|
+
};
|
|
416
|
+
IntersectionObserver2.prototype._hasCrossedThreshold = function(oldEntry, newEntry) {
|
|
417
|
+
var oldRatio = oldEntry && oldEntry.isIntersecting ? oldEntry.intersectionRatio || 0 : -1;
|
|
418
|
+
var newRatio = newEntry.isIntersecting ? newEntry.intersectionRatio || 0 : -1;
|
|
419
|
+
if (oldRatio === newRatio)
|
|
420
|
+
return;
|
|
421
|
+
for (var i = 0; i < this.thresholds.length; i++) {
|
|
422
|
+
var threshold = this.thresholds[i];
|
|
423
|
+
if (threshold == oldRatio || threshold == newRatio || threshold < oldRatio !== threshold < newRatio) {
|
|
424
|
+
return true;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
};
|
|
428
|
+
IntersectionObserver2.prototype._rootIsInDom = function() {
|
|
429
|
+
return !this.root || containsDeep(document2, this.root);
|
|
430
|
+
};
|
|
431
|
+
IntersectionObserver2.prototype._rootContainsTarget = function(target) {
|
|
432
|
+
var rootDoc = this.root && (this.root.ownerDocument || this.root) || document2;
|
|
433
|
+
return containsDeep(rootDoc, target) && (!this.root || rootDoc == target.ownerDocument);
|
|
434
|
+
};
|
|
435
|
+
IntersectionObserver2.prototype._registerInstance = function() {
|
|
436
|
+
if (registry.indexOf(this) < 0) {
|
|
437
|
+
registry.push(this);
|
|
438
|
+
}
|
|
439
|
+
};
|
|
440
|
+
IntersectionObserver2.prototype._unregisterInstance = function() {
|
|
441
|
+
var index = registry.indexOf(this);
|
|
442
|
+
if (index != -1)
|
|
443
|
+
registry.splice(index, 1);
|
|
444
|
+
};
|
|
445
|
+
function now() {
|
|
446
|
+
return window.performance && performance.now && performance.now();
|
|
447
|
+
}
|
|
448
|
+
function throttle(fn, timeout) {
|
|
449
|
+
var timer = null;
|
|
450
|
+
return function() {
|
|
451
|
+
if (!timer) {
|
|
452
|
+
timer = setTimeout(function() {
|
|
453
|
+
fn();
|
|
454
|
+
timer = null;
|
|
455
|
+
}, timeout);
|
|
456
|
+
}
|
|
457
|
+
};
|
|
458
|
+
}
|
|
459
|
+
function addEvent(node, event, fn, opt_useCapture) {
|
|
460
|
+
if (typeof node.addEventListener == "function") {
|
|
461
|
+
node.addEventListener(event, fn, opt_useCapture || false);
|
|
462
|
+
} else if (typeof node.attachEvent == "function") {
|
|
463
|
+
node.attachEvent("on" + event, fn);
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
function removeEvent(node, event, fn, opt_useCapture) {
|
|
467
|
+
if (typeof node.removeEventListener == "function") {
|
|
468
|
+
node.removeEventListener(event, fn, opt_useCapture || false);
|
|
469
|
+
} else if (typeof node.detatchEvent == "function") {
|
|
470
|
+
node.detatchEvent("on" + event, fn);
|
|
471
|
+
}
|
|
472
|
+
}
|
|
473
|
+
function computeRectIntersection(rect1, rect2) {
|
|
474
|
+
var top = Math.max(rect1.top, rect2.top);
|
|
475
|
+
var bottom = Math.min(rect1.bottom, rect2.bottom);
|
|
476
|
+
var left = Math.max(rect1.left, rect2.left);
|
|
477
|
+
var right = Math.min(rect1.right, rect2.right);
|
|
478
|
+
var width = right - left;
|
|
479
|
+
var height = bottom - top;
|
|
480
|
+
return width >= 0 && height >= 0 && {
|
|
481
|
+
top,
|
|
482
|
+
bottom,
|
|
483
|
+
left,
|
|
484
|
+
right,
|
|
485
|
+
width,
|
|
486
|
+
height
|
|
487
|
+
} || null;
|
|
488
|
+
}
|
|
489
|
+
function getBoundingClientRect(el) {
|
|
490
|
+
var rect;
|
|
491
|
+
try {
|
|
492
|
+
rect = el.getBoundingClientRect();
|
|
493
|
+
} catch (err) {
|
|
494
|
+
}
|
|
495
|
+
if (!rect)
|
|
496
|
+
return getEmptyRect();
|
|
497
|
+
if (!(rect.width && rect.height)) {
|
|
498
|
+
rect = {
|
|
499
|
+
top: rect.top,
|
|
500
|
+
right: rect.right,
|
|
501
|
+
bottom: rect.bottom,
|
|
502
|
+
left: rect.left,
|
|
503
|
+
width: rect.right - rect.left,
|
|
504
|
+
height: rect.bottom - rect.top
|
|
505
|
+
};
|
|
506
|
+
}
|
|
507
|
+
return rect;
|
|
508
|
+
}
|
|
509
|
+
function getEmptyRect() {
|
|
510
|
+
return {
|
|
511
|
+
top: 0,
|
|
512
|
+
bottom: 0,
|
|
513
|
+
left: 0,
|
|
514
|
+
right: 0,
|
|
515
|
+
width: 0,
|
|
516
|
+
height: 0
|
|
517
|
+
};
|
|
518
|
+
}
|
|
519
|
+
function ensureDOMRect(rect) {
|
|
520
|
+
if (!rect || "x" in rect) {
|
|
521
|
+
return rect;
|
|
522
|
+
}
|
|
523
|
+
return {
|
|
524
|
+
top: rect.top,
|
|
525
|
+
y: rect.top,
|
|
526
|
+
bottom: rect.bottom,
|
|
527
|
+
left: rect.left,
|
|
528
|
+
x: rect.left,
|
|
529
|
+
right: rect.right,
|
|
530
|
+
width: rect.width,
|
|
531
|
+
height: rect.height
|
|
532
|
+
};
|
|
533
|
+
}
|
|
534
|
+
function convertFromParentRect(parentBoundingRect, parentIntersectionRect) {
|
|
535
|
+
var top = parentIntersectionRect.top - parentBoundingRect.top;
|
|
536
|
+
var left = parentIntersectionRect.left - parentBoundingRect.left;
|
|
537
|
+
return {
|
|
538
|
+
top,
|
|
539
|
+
left,
|
|
540
|
+
height: parentIntersectionRect.height,
|
|
541
|
+
width: parentIntersectionRect.width,
|
|
542
|
+
bottom: top + parentIntersectionRect.height,
|
|
543
|
+
right: left + parentIntersectionRect.width
|
|
544
|
+
};
|
|
545
|
+
}
|
|
546
|
+
function containsDeep(parent, child) {
|
|
547
|
+
var node = child;
|
|
548
|
+
while (node) {
|
|
549
|
+
if (node == parent)
|
|
550
|
+
return true;
|
|
551
|
+
node = getParentNode(node);
|
|
552
|
+
}
|
|
553
|
+
return false;
|
|
554
|
+
}
|
|
555
|
+
function getParentNode(node) {
|
|
556
|
+
var parent = node.parentNode;
|
|
557
|
+
if (node.nodeType == 9 && node != document2) {
|
|
558
|
+
return getFrameElement(node);
|
|
559
|
+
}
|
|
560
|
+
if (parent && parent.assignedSlot) {
|
|
561
|
+
parent = parent.assignedSlot.parentNode;
|
|
562
|
+
}
|
|
563
|
+
if (parent && parent.nodeType == 11 && parent.host) {
|
|
564
|
+
return parent.host;
|
|
565
|
+
}
|
|
566
|
+
return parent;
|
|
567
|
+
}
|
|
568
|
+
function isDoc(node) {
|
|
569
|
+
return node && node.nodeType === 9;
|
|
570
|
+
}
|
|
571
|
+
window.IntersectionObserver = IntersectionObserver2;
|
|
572
|
+
window.IntersectionObserverEntry = IntersectionObserverEntry2;
|
|
573
|
+
})();
|
|
574
|
+
var eventemitter3 = { exports: {} };
|
|
575
|
+
(function(module) {
|
|
576
|
+
var has = Object.prototype.hasOwnProperty, prefix = "~";
|
|
577
|
+
function Events() {
|
|
578
|
+
}
|
|
579
|
+
if (Object.create) {
|
|
580
|
+
Events.prototype = Object.create(null);
|
|
581
|
+
if (!new Events().__proto__)
|
|
582
|
+
prefix = false;
|
|
583
|
+
}
|
|
584
|
+
function EE(fn, context, once) {
|
|
585
|
+
this.fn = fn;
|
|
586
|
+
this.context = context;
|
|
587
|
+
this.once = once || false;
|
|
588
|
+
}
|
|
589
|
+
function addListener(emitter, event, fn, context, once) {
|
|
590
|
+
if (typeof fn !== "function") {
|
|
591
|
+
throw new TypeError("The listener must be a function");
|
|
592
|
+
}
|
|
593
|
+
var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
|
|
594
|
+
if (!emitter._events[evt])
|
|
595
|
+
emitter._events[evt] = listener, emitter._eventsCount++;
|
|
596
|
+
else if (!emitter._events[evt].fn)
|
|
597
|
+
emitter._events[evt].push(listener);
|
|
598
|
+
else
|
|
599
|
+
emitter._events[evt] = [emitter._events[evt], listener];
|
|
600
|
+
return emitter;
|
|
601
|
+
}
|
|
602
|
+
function clearEvent(emitter, evt) {
|
|
603
|
+
if (--emitter._eventsCount === 0)
|
|
604
|
+
emitter._events = new Events();
|
|
605
|
+
else
|
|
606
|
+
delete emitter._events[evt];
|
|
607
|
+
}
|
|
608
|
+
function EventEmitter() {
|
|
609
|
+
this._events = new Events();
|
|
610
|
+
this._eventsCount = 0;
|
|
611
|
+
}
|
|
612
|
+
EventEmitter.prototype.eventNames = function eventNames() {
|
|
613
|
+
var names = [], events, name;
|
|
614
|
+
if (this._eventsCount === 0)
|
|
615
|
+
return names;
|
|
616
|
+
for (name in events = this._events) {
|
|
617
|
+
if (has.call(events, name))
|
|
618
|
+
names.push(prefix ? name.slice(1) : name);
|
|
619
|
+
}
|
|
620
|
+
if (Object.getOwnPropertySymbols) {
|
|
621
|
+
return names.concat(Object.getOwnPropertySymbols(events));
|
|
622
|
+
}
|
|
623
|
+
return names;
|
|
624
|
+
};
|
|
625
|
+
EventEmitter.prototype.listeners = function listeners(event) {
|
|
626
|
+
var evt = prefix ? prefix + event : event, handlers = this._events[evt];
|
|
627
|
+
if (!handlers)
|
|
628
|
+
return [];
|
|
629
|
+
if (handlers.fn)
|
|
630
|
+
return [handlers.fn];
|
|
631
|
+
for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
|
|
632
|
+
ee[i] = handlers[i].fn;
|
|
633
|
+
}
|
|
634
|
+
return ee;
|
|
635
|
+
};
|
|
636
|
+
EventEmitter.prototype.listenerCount = function listenerCount(event) {
|
|
637
|
+
var evt = prefix ? prefix + event : event, listeners = this._events[evt];
|
|
638
|
+
if (!listeners)
|
|
639
|
+
return 0;
|
|
640
|
+
if (listeners.fn)
|
|
641
|
+
return 1;
|
|
642
|
+
return listeners.length;
|
|
643
|
+
};
|
|
644
|
+
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
|
|
645
|
+
var evt = prefix ? prefix + event : event;
|
|
646
|
+
if (!this._events[evt])
|
|
647
|
+
return false;
|
|
648
|
+
var listeners = this._events[evt], len = arguments.length, args, i;
|
|
649
|
+
if (listeners.fn) {
|
|
650
|
+
if (listeners.once)
|
|
651
|
+
this.removeListener(event, listeners.fn, void 0, true);
|
|
652
|
+
switch (len) {
|
|
653
|
+
case 1:
|
|
654
|
+
return listeners.fn.call(listeners.context), true;
|
|
655
|
+
case 2:
|
|
656
|
+
return listeners.fn.call(listeners.context, a1), true;
|
|
657
|
+
case 3:
|
|
658
|
+
return listeners.fn.call(listeners.context, a1, a2), true;
|
|
659
|
+
case 4:
|
|
660
|
+
return listeners.fn.call(listeners.context, a1, a2, a3), true;
|
|
661
|
+
case 5:
|
|
662
|
+
return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
|
|
663
|
+
case 6:
|
|
664
|
+
return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
|
|
665
|
+
}
|
|
666
|
+
for (i = 1, args = new Array(len - 1); i < len; i++) {
|
|
667
|
+
args[i - 1] = arguments[i];
|
|
668
|
+
}
|
|
669
|
+
listeners.fn.apply(listeners.context, args);
|
|
670
|
+
} else {
|
|
671
|
+
var length = listeners.length, j;
|
|
672
|
+
for (i = 0; i < length; i++) {
|
|
673
|
+
if (listeners[i].once)
|
|
674
|
+
this.removeListener(event, listeners[i].fn, void 0, true);
|
|
675
|
+
switch (len) {
|
|
676
|
+
case 1:
|
|
677
|
+
listeners[i].fn.call(listeners[i].context);
|
|
678
|
+
break;
|
|
679
|
+
case 2:
|
|
680
|
+
listeners[i].fn.call(listeners[i].context, a1);
|
|
681
|
+
break;
|
|
682
|
+
case 3:
|
|
683
|
+
listeners[i].fn.call(listeners[i].context, a1, a2);
|
|
684
|
+
break;
|
|
685
|
+
case 4:
|
|
686
|
+
listeners[i].fn.call(listeners[i].context, a1, a2, a3);
|
|
687
|
+
break;
|
|
688
|
+
default:
|
|
689
|
+
if (!args)
|
|
690
|
+
for (j = 1, args = new Array(len - 1); j < len; j++) {
|
|
691
|
+
args[j - 1] = arguments[j];
|
|
692
|
+
}
|
|
693
|
+
listeners[i].fn.apply(listeners[i].context, args);
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
return true;
|
|
698
|
+
};
|
|
699
|
+
EventEmitter.prototype.on = function on(event, fn, context) {
|
|
700
|
+
return addListener(this, event, fn, context, false);
|
|
701
|
+
};
|
|
702
|
+
EventEmitter.prototype.once = function once(event, fn, context) {
|
|
703
|
+
return addListener(this, event, fn, context, true);
|
|
704
|
+
};
|
|
705
|
+
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
|
|
706
|
+
var evt = prefix ? prefix + event : event;
|
|
707
|
+
if (!this._events[evt])
|
|
708
|
+
return this;
|
|
709
|
+
if (!fn) {
|
|
710
|
+
clearEvent(this, evt);
|
|
711
|
+
return this;
|
|
712
|
+
}
|
|
713
|
+
var listeners = this._events[evt];
|
|
714
|
+
if (listeners.fn) {
|
|
715
|
+
if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
|
|
716
|
+
clearEvent(this, evt);
|
|
717
|
+
}
|
|
718
|
+
} else {
|
|
719
|
+
for (var i = 0, events = [], length = listeners.length; i < length; i++) {
|
|
720
|
+
if (listeners[i].fn !== fn || once && !listeners[i].once || context && listeners[i].context !== context) {
|
|
721
|
+
events.push(listeners[i]);
|
|
722
|
+
}
|
|
723
|
+
}
|
|
724
|
+
if (events.length)
|
|
725
|
+
this._events[evt] = events.length === 1 ? events[0] : events;
|
|
726
|
+
else
|
|
727
|
+
clearEvent(this, evt);
|
|
728
|
+
}
|
|
729
|
+
return this;
|
|
730
|
+
};
|
|
731
|
+
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
|
|
732
|
+
var evt;
|
|
733
|
+
if (event) {
|
|
734
|
+
evt = prefix ? prefix + event : event;
|
|
735
|
+
if (this._events[evt])
|
|
736
|
+
clearEvent(this, evt);
|
|
737
|
+
} else {
|
|
738
|
+
this._events = new Events();
|
|
739
|
+
this._eventsCount = 0;
|
|
740
|
+
}
|
|
741
|
+
return this;
|
|
742
|
+
};
|
|
743
|
+
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
|
|
744
|
+
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
|
|
745
|
+
EventEmitter.prefixed = prefix;
|
|
746
|
+
EventEmitter.EventEmitter = EventEmitter;
|
|
747
|
+
{
|
|
748
|
+
module.exports = EventEmitter;
|
|
749
|
+
}
|
|
750
|
+
})(eventemitter3);
|
|
751
|
+
var __defProp2 = Object.defineProperty;
|
|
752
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
753
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
754
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
755
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
756
|
+
if (decorator = decorators[i])
|
|
757
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
758
|
+
if (kind && result)
|
|
759
|
+
__defProp2(target, key, result);
|
|
760
|
+
return result;
|
|
761
|
+
};
|
|
762
|
+
const NAVBAR_HEIGHT = 60;
|
|
763
|
+
const _PositioningService = class {
|
|
764
|
+
static on(eventName, handler) {
|
|
765
|
+
_PositioningService.events.on(eventName, handler);
|
|
766
|
+
}
|
|
767
|
+
static off(eventName, handler) {
|
|
768
|
+
_PositioningService.events.off(eventName, handler);
|
|
769
|
+
}
|
|
770
|
+
static once(eventName, handler) {
|
|
771
|
+
_PositioningService.events.once(eventName, handler);
|
|
772
|
+
}
|
|
773
|
+
static checkCollisions(element, otherElements) {
|
|
774
|
+
const otherElementsList = otherElements || Array.from(_PositioningService.elements.keys());
|
|
775
|
+
const bounds = element.getBoundingClientRect();
|
|
776
|
+
const collisions = [];
|
|
777
|
+
for (const otherElement of otherElementsList) {
|
|
778
|
+
if (otherElement !== element) {
|
|
779
|
+
const otherBounds = otherElement.getBoundingClientRect();
|
|
780
|
+
if (otherBounds.left <= bounds.right && otherBounds.right >= bounds.left && otherBounds.top <= bounds.bottom && otherBounds.bottom >= bounds.top) {
|
|
781
|
+
collisions.push(otherElement);
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
if (collisions.length) {
|
|
786
|
+
_PositioningService.onElementIntersection(element, collisions);
|
|
787
|
+
}
|
|
788
|
+
}
|
|
789
|
+
static isPositioned(element) {
|
|
790
|
+
return _PositioningService.elements.has(element);
|
|
791
|
+
}
|
|
792
|
+
static getPositioningOptions(element) {
|
|
793
|
+
if (_PositioningService.elements.has(element)) {
|
|
794
|
+
return _PositioningService.elements.get(element);
|
|
795
|
+
}
|
|
796
|
+
return null;
|
|
797
|
+
}
|
|
798
|
+
static position(element, options = {}) {
|
|
799
|
+
const opts = __spreadValues(__spreadValues({}, DEFAULT_POSITIONING_OPTIONS), options);
|
|
800
|
+
let e = element;
|
|
801
|
+
while (e !== document.body) {
|
|
802
|
+
e = e.parentElement;
|
|
803
|
+
if (e.classList.contains("sps-focused-task")) {
|
|
804
|
+
opts.scrollParent = e;
|
|
805
|
+
if (!_PositioningService.registeredScrollParents.has(e)) {
|
|
806
|
+
_PositioningService.registeredScrollParents.add(e);
|
|
807
|
+
e.addEventListener("scroll", _PositioningService.update);
|
|
808
|
+
}
|
|
809
|
+
break;
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
element.style.visibility = "hidden";
|
|
813
|
+
if (_PositioningService.elements.size === 0) {
|
|
814
|
+
window.addEventListener("resize", _PositioningService.update);
|
|
815
|
+
window.addEventListener("scroll", _PositioningService.update);
|
|
816
|
+
}
|
|
817
|
+
if (!opts.relativeTo) {
|
|
818
|
+
throw new Error("You must provide an element for the relativeTo option to position an element.");
|
|
819
|
+
}
|
|
820
|
+
_PositioningService.elements.set(element, opts);
|
|
821
|
+
onNextTick(() => {
|
|
822
|
+
_PositioningService.fixElementPosition(element);
|
|
823
|
+
_PositioningService.viewportObserver.observe(element);
|
|
824
|
+
element.style.visibility = "";
|
|
825
|
+
_PositioningService.checkCollisions(element);
|
|
826
|
+
});
|
|
827
|
+
}
|
|
828
|
+
static release(element) {
|
|
829
|
+
if (_PositioningService.elements.has(element)) {
|
|
830
|
+
_PositioningService.clearStyles(element);
|
|
831
|
+
const options = _PositioningService.elements.get(element);
|
|
832
|
+
if (options.scrollParent) {
|
|
833
|
+
options.scrollParent.removeEventListener("scroll", _PositioningService.update);
|
|
834
|
+
_PositioningService.registeredScrollParents.delete(options.scrollParent);
|
|
835
|
+
}
|
|
836
|
+
_PositioningService.elements.delete(element);
|
|
837
|
+
if (_PositioningService.elements.size === 0) {
|
|
838
|
+
window.removeEventListener("resize", _PositioningService.update);
|
|
839
|
+
window.removeEventListener("scroll", _PositioningService.update);
|
|
840
|
+
}
|
|
841
|
+
_PositioningService.viewportObserver.unobserve(element);
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
static releaseAll() {
|
|
845
|
+
for (const element of _PositioningService.elements.keys()) {
|
|
846
|
+
_PositioningService.release(element);
|
|
847
|
+
}
|
|
848
|
+
}
|
|
849
|
+
static refresh(element) {
|
|
850
|
+
if (_PositioningService.elements.has(element)) {
|
|
851
|
+
_PositioningService.clearStyles(element);
|
|
852
|
+
_PositioningService.fixElementPosition(element);
|
|
853
|
+
_PositioningService.checkCollisions(element);
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
static refreshAll() {
|
|
857
|
+
for (const element of _PositioningService.elements.keys()) {
|
|
858
|
+
_PositioningService.refresh(element);
|
|
859
|
+
}
|
|
860
|
+
}
|
|
861
|
+
static reposition(element, newOptions) {
|
|
862
|
+
if (_PositioningService.elements.has(element)) {
|
|
863
|
+
const options = _PositioningService.elements.get(element);
|
|
864
|
+
_PositioningService.elements.set(element, Object.assign(options, newOptions));
|
|
865
|
+
_PositioningService.refresh(element);
|
|
866
|
+
}
|
|
867
|
+
}
|
|
868
|
+
static onViewportIntersection(entries) {
|
|
869
|
+
for (const entry of entries) {
|
|
870
|
+
const entryCopy = Object.keys(IntersectionObserverEntry.prototype).reduce((copy, key) => __spreadProps(__spreadValues({}, copy), {
|
|
871
|
+
[key]: entry[key]
|
|
872
|
+
}), {});
|
|
873
|
+
entryCopy.rootBounds = entryCopy.rootBounds || _PositioningService.getRootBounds();
|
|
874
|
+
_PositioningService.events.emit("viewportIntersection", Object.freeze(entryCopy));
|
|
875
|
+
}
|
|
876
|
+
}
|
|
877
|
+
static onElementIntersection(target, intersectingWith) {
|
|
878
|
+
_PositioningService.events.emit("elementIntersection", { target, intersectingWith });
|
|
879
|
+
}
|
|
880
|
+
static getRootBounds() {
|
|
881
|
+
const rootWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
|
882
|
+
const rootHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
|
883
|
+
return {
|
|
884
|
+
x: 0,
|
|
885
|
+
y: NAVBAR_HEIGHT,
|
|
886
|
+
left: 0,
|
|
887
|
+
top: NAVBAR_HEIGHT,
|
|
888
|
+
right: rootWidth,
|
|
889
|
+
bottom: rootHeight,
|
|
890
|
+
height: rootHeight - NAVBAR_HEIGHT,
|
|
891
|
+
width: rootWidth
|
|
892
|
+
};
|
|
893
|
+
}
|
|
894
|
+
static clearStyles(element) {
|
|
895
|
+
Object.assign(element.style, {
|
|
896
|
+
position: "",
|
|
897
|
+
width: "",
|
|
898
|
+
top: "",
|
|
899
|
+
left: "",
|
|
900
|
+
right: "",
|
|
901
|
+
bottom: "",
|
|
902
|
+
visibility: "",
|
|
903
|
+
zIndex: ""
|
|
904
|
+
});
|
|
905
|
+
}
|
|
906
|
+
static fixElementPosition(element, options) {
|
|
907
|
+
if (!this.elements.has(element)) {
|
|
908
|
+
return;
|
|
909
|
+
}
|
|
910
|
+
const opts = options || this.elements.get(element);
|
|
911
|
+
const rootBounds = this.getRootBounds();
|
|
912
|
+
const positionedElementBounds = element.getBoundingClientRect();
|
|
913
|
+
const relativeTargetBounds = opts.relativeTo.getBoundingClientRect();
|
|
914
|
+
const { width } = opts.useRelativeTargetWidth ? relativeTargetBounds : positionedElementBounds;
|
|
915
|
+
Object.assign(element.style, {
|
|
916
|
+
minWidth: `${width}px`,
|
|
917
|
+
position: "fixed",
|
|
918
|
+
zIndex: opts.zIndex || ""
|
|
919
|
+
});
|
|
920
|
+
let top;
|
|
921
|
+
let left;
|
|
922
|
+
const positionRelativeToTarget = opts.position.split(" ");
|
|
923
|
+
const offsetA = opts.offsets[0] || 0;
|
|
924
|
+
const offsetB = opts.offsets[1] || 0;
|
|
925
|
+
top = 0;
|
|
926
|
+
left = 0;
|
|
927
|
+
switch (positionRelativeToTarget[0]) {
|
|
928
|
+
case "top":
|
|
929
|
+
top = relativeTargetBounds.top - positionedElementBounds.height - offsetA;
|
|
930
|
+
break;
|
|
931
|
+
case "left":
|
|
932
|
+
left = relativeTargetBounds.left - width - offsetA;
|
|
933
|
+
break;
|
|
934
|
+
case "right":
|
|
935
|
+
left = relativeTargetBounds.right + offsetA;
|
|
936
|
+
break;
|
|
937
|
+
case "bottom":
|
|
938
|
+
top = relativeTargetBounds.bottom + offsetA;
|
|
939
|
+
break;
|
|
940
|
+
default:
|
|
941
|
+
throw new Error(`${opts.position} is not a valid position`);
|
|
942
|
+
}
|
|
943
|
+
switch (positionRelativeToTarget[1]) {
|
|
944
|
+
case "left":
|
|
945
|
+
left = relativeTargetBounds.left - offsetB;
|
|
946
|
+
break;
|
|
947
|
+
case "top":
|
|
948
|
+
top = relativeTargetBounds.top - offsetB;
|
|
949
|
+
break;
|
|
950
|
+
case "middle":
|
|
951
|
+
if (positionRelativeToTarget[0] === "top" || positionRelativeToTarget[0] === "bottom") {
|
|
952
|
+
left = relativeTargetBounds.left + relativeTargetBounds.width / 2 - width / 2 + offsetB;
|
|
953
|
+
} else if (positionRelativeToTarget[0] === "left" || positionRelativeToTarget[0] === "right") {
|
|
954
|
+
top = relativeTargetBounds.top + relativeTargetBounds.height / 2 - positionedElementBounds.height / 2 + offsetB;
|
|
955
|
+
}
|
|
956
|
+
break;
|
|
957
|
+
case "bottom":
|
|
958
|
+
top = relativeTargetBounds.bottom - positionedElementBounds.height + offsetB;
|
|
959
|
+
break;
|
|
960
|
+
case "right":
|
|
961
|
+
left = relativeTargetBounds.right - width + offsetB;
|
|
962
|
+
break;
|
|
963
|
+
default:
|
|
964
|
+
throw new Error(`${opts.position} is not a valid position`);
|
|
965
|
+
}
|
|
966
|
+
const bottom = top + positionedElementBounds.height;
|
|
967
|
+
const right = left + positionedElementBounds.width;
|
|
968
|
+
const topPx = `${Math.round(top)}px`;
|
|
969
|
+
const bottomPx = `${Math.round(rootBounds.bottom - bottom)}px`;
|
|
970
|
+
const leftPx = `${Math.round(left)}px`;
|
|
971
|
+
const rightPx = `${Math.round(rootBounds.right - right)}px`;
|
|
972
|
+
switch (opts.anchor) {
|
|
973
|
+
case PositionAnchor.TOP_LEFT:
|
|
974
|
+
Object.assign(element.style, {
|
|
975
|
+
top: topPx,
|
|
976
|
+
bottom: "auto",
|
|
977
|
+
left: leftPx,
|
|
978
|
+
right: "auto"
|
|
979
|
+
});
|
|
980
|
+
break;
|
|
981
|
+
case PositionAnchor.TOP_RIGHT:
|
|
982
|
+
Object.assign(element.style, {
|
|
983
|
+
top: topPx,
|
|
984
|
+
bottom: "auto",
|
|
985
|
+
left: "auto",
|
|
986
|
+
right: rightPx
|
|
987
|
+
});
|
|
988
|
+
break;
|
|
989
|
+
case PositionAnchor.BOTTOM_LEFT:
|
|
990
|
+
Object.assign(element.style, {
|
|
991
|
+
top: "auto",
|
|
992
|
+
bottom: bottomPx,
|
|
993
|
+
left: leftPx,
|
|
994
|
+
right: "auto"
|
|
995
|
+
});
|
|
996
|
+
break;
|
|
997
|
+
case PositionAnchor.BOTTOM_RIGHT:
|
|
998
|
+
Object.assign(element.style, {
|
|
999
|
+
top: "auto",
|
|
1000
|
+
bottom: bottomPx,
|
|
1001
|
+
left: "auto",
|
|
1002
|
+
right: rightPx
|
|
1003
|
+
});
|
|
1004
|
+
break;
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
static update(event) {
|
|
1008
|
+
const elements = _PositioningService.elements.entries();
|
|
1009
|
+
const updatedElements = [];
|
|
1010
|
+
for (const [element, options] of elements) {
|
|
1011
|
+
if (!event || event.target === document || event.target === options.scrollParent || event.target === window) {
|
|
1012
|
+
_PositioningService.fixElementPosition(element, options);
|
|
1013
|
+
_PositioningService.checkCollisions(element, updatedElements);
|
|
1014
|
+
updatedElements.push(element);
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
on(eventName, handler) {
|
|
1019
|
+
_PositioningService.on(eventName, handler);
|
|
1020
|
+
}
|
|
1021
|
+
off(eventName, handler) {
|
|
1022
|
+
_PositioningService.off(eventName, handler);
|
|
1023
|
+
}
|
|
1024
|
+
once(eventName, handler) {
|
|
1025
|
+
_PositioningService.once(eventName, handler);
|
|
1026
|
+
}
|
|
1027
|
+
isPositioned(element) {
|
|
1028
|
+
return _PositioningService.isPositioned(element);
|
|
1029
|
+
}
|
|
1030
|
+
getPositioningOptions(element) {
|
|
1031
|
+
return _PositioningService.getPositioningOptions(element);
|
|
1032
|
+
}
|
|
1033
|
+
position(element, options = {}) {
|
|
1034
|
+
_PositioningService.position(element, options);
|
|
1035
|
+
}
|
|
1036
|
+
release(element) {
|
|
1037
|
+
_PositioningService.release(element);
|
|
1038
|
+
}
|
|
1039
|
+
releaseAll() {
|
|
1040
|
+
_PositioningService.releaseAll();
|
|
1041
|
+
}
|
|
1042
|
+
refresh(element) {
|
|
1043
|
+
_PositioningService.refresh(element);
|
|
1044
|
+
}
|
|
1045
|
+
refreshAll() {
|
|
1046
|
+
_PositioningService.refreshAll();
|
|
1047
|
+
}
|
|
1048
|
+
reposition(element, newOptions) {
|
|
1049
|
+
_PositioningService.reposition(element, newOptions);
|
|
1050
|
+
}
|
|
1051
|
+
};
|
|
1052
|
+
let PositioningService = _PositioningService;
|
|
1053
|
+
PositioningService.elements = new Map();
|
|
1054
|
+
PositioningService.registeredScrollParents = new Set();
|
|
1055
|
+
PositioningService.events = new eventemitter3.exports.EventEmitter();
|
|
1056
|
+
PositioningService.viewportObserver = new IntersectionObserver(_PositioningService.onViewportIntersection, {
|
|
1057
|
+
rootMargin: `-${NAVBAR_HEIGHT}px 0px 0px`,
|
|
1058
|
+
threshold: 1
|
|
1059
|
+
});
|
|
1060
|
+
__decorateClass([
|
|
1061
|
+
lockedToAnimationFrames
|
|
1062
|
+
], PositioningService, "update", 1);
|
|
1063
|
+
export { DEFAULT_POSITIONING_OPTIONS, Position, PositionAnchor, PositioningService };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* These are the possibilities for the `position` option of
|
|
3
|
+
* `PositioningOptions` when using `relativeTo`.
|
|
4
|
+
*/
|
|
5
|
+
export declare enum Position {
|
|
6
|
+
TOP_LEFT = "top left",
|
|
7
|
+
TOP_MIDDLE = "top middle",
|
|
8
|
+
TOP_RIGHT = "top right",
|
|
9
|
+
RIGHT_TOP = "right top",
|
|
10
|
+
RIGHT_MIDDLE = "right middle",
|
|
11
|
+
RIGHT_BOTTOM = "right bottom",
|
|
12
|
+
BOTTOM_RIGHT = "bottom right",
|
|
13
|
+
BOTTOM_MIDDLE = "bottom middle",
|
|
14
|
+
BOTTOM_LEFT = "bottom left",
|
|
15
|
+
LEFT_BOTTOM = "left bottom",
|
|
16
|
+
LEFT_MIDDLE = "left middle",
|
|
17
|
+
LEFT_TOP = "left top"
|
|
18
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Position } from "./position.enum";
|
|
2
|
+
import { PositionAnchor } from "./position-anchor.enum";
|
|
3
|
+
/** Options that can be passed to `position()` method. */
|
|
4
|
+
export interface PositioningOptions {
|
|
5
|
+
/** Indicates which point on the positioned element it should be positioned by. */
|
|
6
|
+
anchor?: PositionAnchor;
|
|
7
|
+
/**
|
|
8
|
+
* An array of pixel offsets. Each offset is applied
|
|
9
|
+
* to the corresponding term in `position`. So to continue the above example of
|
|
10
|
+
* `"bottom left"`, if the offsets are `[-7, 9]`, the element will be placed at
|
|
11
|
+
* the bottom of the `relativeTo` element minus 7 pixels, and at the left of it
|
|
12
|
+
* plus 9 pixels. (NB: The values will be converted to rem.)
|
|
13
|
+
*/
|
|
14
|
+
offsets?: number[];
|
|
15
|
+
/**
|
|
16
|
+
* When using `relativeTo`, this describes the positioning relationship between
|
|
17
|
+
* the two elements. For example, if it's `"bottom left"`, the positioned element
|
|
18
|
+
* will be placed at the bottom left of the `relativeTo` element.
|
|
19
|
+
*/
|
|
20
|
+
position?: Position;
|
|
21
|
+
/**
|
|
22
|
+
* Normally, an element positioned by the service will simply have its current
|
|
23
|
+
* position on the page locked in place. Instead you can have it positioned
|
|
24
|
+
* relative to another element.
|
|
25
|
+
*/
|
|
26
|
+
relativeTo?: HTMLElement;
|
|
27
|
+
/**
|
|
28
|
+
* The width of the positioned element will be set to the width of the element
|
|
29
|
+
* provided to the relativeTo option, rather than its own natural width.
|
|
30
|
+
*/
|
|
31
|
+
useRelativeTargetWidth?: boolean;
|
|
32
|
+
/** Specify a z-index override for the positioned element. */
|
|
33
|
+
zIndex?: number;
|
|
34
|
+
/** The element's ancestor that scrolls, if it's not the window itself */
|
|
35
|
+
scrollParent?: HTMLElement;
|
|
36
|
+
}
|
|
37
|
+
export declare const DEFAULT_POSITIONING_OPTIONS: PositioningOptions;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import "intersection-observer";
|
|
2
|
+
import type { PositioningOptions } from "./positioning-options.interface";
|
|
3
|
+
/**
|
|
4
|
+
* This class follows a singleton pattern where you can create an instance by calling
|
|
5
|
+
* `new PositioningService()` if you wish, but all instance methods pass through to
|
|
6
|
+
* static methods, so there's really only one set of elements being positioned that's
|
|
7
|
+
* shared between all instances and static usages of PositioningService.
|
|
8
|
+
*/
|
|
9
|
+
export declare class PositioningService {
|
|
10
|
+
static elements: Map<HTMLElement, PositioningOptions>;
|
|
11
|
+
private static registeredScrollParents;
|
|
12
|
+
private static events;
|
|
13
|
+
private static viewportObserver;
|
|
14
|
+
static on(eventName: any, handler: any): void;
|
|
15
|
+
static off(eventName: any, handler: any): void;
|
|
16
|
+
static once(eventName: any, handler: any): void;
|
|
17
|
+
static checkCollisions(element: HTMLElement, otherElements?: HTMLElement[]): void;
|
|
18
|
+
/**
|
|
19
|
+
* Returns `true` if the element is currently being positioned by the service
|
|
20
|
+
* and `false` otherwise.
|
|
21
|
+
*/
|
|
22
|
+
static isPositioned(element: HTMLElement): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Returns the options currently beinng used for positioning the element,
|
|
25
|
+
* if it is indeed being positioned by the service.
|
|
26
|
+
*/
|
|
27
|
+
static getPositioningOptions(element: HTMLElement): PositioningOptions;
|
|
28
|
+
/** PositioningService will start controlling the position of the given element. */
|
|
29
|
+
static position(element: HTMLElement, options?: PositioningOptions): void;
|
|
30
|
+
/** PositioningService will stop controlling the position of the given element. */
|
|
31
|
+
static release(element: HTMLElement): void;
|
|
32
|
+
static releaseAll(): void;
|
|
33
|
+
/** PositioningService will refresh the positioning of the given element */
|
|
34
|
+
static refresh(element: HTMLElement): void;
|
|
35
|
+
static refreshAll(): void;
|
|
36
|
+
/** Update the positioning options of a currently positioned element */
|
|
37
|
+
static reposition(element: HTMLElement, newOptions: PositioningOptions): void;
|
|
38
|
+
private static onViewportIntersection;
|
|
39
|
+
private static onElementIntersection;
|
|
40
|
+
private static getRootBounds;
|
|
41
|
+
private static clearStyles;
|
|
42
|
+
private static fixElementPosition;
|
|
43
|
+
private static update;
|
|
44
|
+
on(eventName: any, handler: any): void;
|
|
45
|
+
off(eventName: any, handler: any): void;
|
|
46
|
+
once(eventName: any, handler: any): void;
|
|
47
|
+
isPositioned(element: HTMLElement): boolean;
|
|
48
|
+
getPositioningOptions(element: HTMLElement): PositioningOptions;
|
|
49
|
+
position(element: HTMLElement, options?: PositioningOptions): void;
|
|
50
|
+
release(element: HTMLElement): void;
|
|
51
|
+
releaseAll(): void;
|
|
52
|
+
refresh(element: HTMLElement): void;
|
|
53
|
+
refreshAll(): void;
|
|
54
|
+
reposition(element: HTMLElement, newOptions: PositioningOptions): void;
|
|
55
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/positioning",
|
|
3
3
|
"description": "Service for positioning dropdown/popup elements.",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.11.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/positioning",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"access": "public"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
|
-
"@spscommerce/utils": "5.
|
|
16
|
+
"@spscommerce/utils": "5.11.0"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@spscommerce/utils": "5.
|
|
19
|
+
"@spscommerce/utils": "5.11.0",
|
|
20
20
|
"raf-stub": "^2.0.2"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
@@ -24,12 +24,12 @@
|
|
|
24
24
|
"intersection-observer": "0.12.0"
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
|
-
"build": "pnpm run build:
|
|
28
|
-
"build:
|
|
29
|
-
"build:js": "rollup -c rollup.config.js",
|
|
27
|
+
"build": "pnpm run build:js && pnpm run build:types",
|
|
28
|
+
"build:js": "vite build",
|
|
30
29
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
|
|
31
30
|
"watch": "vite build --watch",
|
|
32
31
|
"clean": "git clean -fdX",
|
|
33
32
|
"pub": "pnpm pack && node ../../scripts/publish-package.js"
|
|
34
|
-
}
|
|
33
|
+
},
|
|
34
|
+
"readme": "[//]: # \"START_AUTOGENERATED\"\n\n## [@spscommerce/positioning](https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/positioning#readme)\n\n\n\n\n\nService for positioning dropdown/popup elements. \n \n ### Installation \n \n ```shell\nnpm install --save @spscommerce/positioning\n```\n\n#### Peer Dependencies\n\n<div class=\"row\">\n <div class=\"col-5\"> \n <table class=\"sps-table\">\n <thead class=\"sps-table__head\">\n <tr class=\"sps-table__row\">\n <th class=\"sps-table__header\">\n <span class=\"sps-table__header-cell-body\"> \n Package\n </span>\n </th>\n <th class=\"sps-table__header text-right\">\n <span class=\"sps-table__header-cell-body\"> \n Version\n </span>\n </th>\n </tr>\n </thead>\n <tbody class=\"sps-table__body\">\n <tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/utils#readme\">@spscommerce/utils</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"git://github.com/primus/eventemitter3.git\">eventemitter3</a></td><td class=\"sps-table__cell text-right\">^3.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"git@github.com:w3c/IntersectionObserver.git\">intersection-observer</a></td><td class=\"sps-table__cell text-right\">^0.5.1</td></tr>\n </tbody>\n </table>\n </div>\n <div class=\"col-7\">\n \n </div>\n</div>\n\n[//]: # \"END_AUTOGENERATED\"\n"
|
|
35
35
|
}
|
package/vite.config.js
CHANGED
|
@@ -7,7 +7,7 @@ import pkg from './package.json';
|
|
|
7
7
|
export default defineConfig({
|
|
8
8
|
build: {
|
|
9
9
|
lib: {
|
|
10
|
-
entry: path.resolve(__dirname, '
|
|
10
|
+
entry: path.resolve(__dirname, 'src/index.ts'),
|
|
11
11
|
formats: ['es', 'cjs'],
|
|
12
12
|
fileName: (format) => `index.${format}.js`,
|
|
13
13
|
},
|