@spscommerce/positioning 5.18.2 → 5.18.3-ie
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/dist/out-tsc/index.d.ts +4 -0
- package/dist/out-tsc/index.js +5 -0
- package/dist/out-tsc/index.js.map +1 -0
- package/dist/out-tsc/position-anchor.enum.d.ts +7 -0
- package/dist/out-tsc/position-anchor.enum.js +9 -0
- package/dist/out-tsc/position-anchor.enum.js.map +1 -0
- package/dist/out-tsc/position.enum.d.ts +18 -0
- package/dist/out-tsc/position.enum.js +20 -0
- package/dist/out-tsc/position.enum.js.map +1 -0
- package/dist/out-tsc/positioning-options.interface.d.ts +37 -0
- package/dist/out-tsc/positioning-options.interface.js +8 -0
- package/dist/out-tsc/positioning-options.interface.js.map +1 -0
- package/dist/out-tsc/positioning.service.d.ts +55 -0
- package/dist/out-tsc/positioning.service.js +466 -0
- package/dist/out-tsc/positioning.service.js.map +1 -0
- package/lib/index.cjs.js +1857 -1
- package/lib/index.es.js +1762 -973
- package/package.json +7 -7
- package/vite.config.js +1 -1
package/lib/index.cjs.js
CHANGED
|
@@ -1 +1,1857 @@
|
|
|
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;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var utils = require('@spscommerce/utils');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* These are the possibilities for the `position` option of
|
|
9
|
+
* `PositioningOptions` when using `relativeTo`.
|
|
10
|
+
*/
|
|
11
|
+
exports.Position = void 0;
|
|
12
|
+
(function (Position) {
|
|
13
|
+
Position["TOP_LEFT"] = "top left";
|
|
14
|
+
Position["TOP_MIDDLE"] = "top middle";
|
|
15
|
+
Position["TOP_RIGHT"] = "top right";
|
|
16
|
+
Position["RIGHT_TOP"] = "right top";
|
|
17
|
+
Position["RIGHT_MIDDLE"] = "right middle";
|
|
18
|
+
Position["RIGHT_BOTTOM"] = "right bottom";
|
|
19
|
+
Position["BOTTOM_RIGHT"] = "bottom right";
|
|
20
|
+
Position["BOTTOM_MIDDLE"] = "bottom middle";
|
|
21
|
+
Position["BOTTOM_LEFT"] = "bottom left";
|
|
22
|
+
Position["LEFT_BOTTOM"] = "left bottom";
|
|
23
|
+
Position["LEFT_MIDDLE"] = "left middle";
|
|
24
|
+
Position["LEFT_TOP"] = "left top";
|
|
25
|
+
})(exports.Position || (exports.Position = {}));
|
|
26
|
+
|
|
27
|
+
/** Indicates which point on a positioned element it should be positioned by. */
|
|
28
|
+
exports.PositionAnchor = void 0;
|
|
29
|
+
(function (PositionAnchor) {
|
|
30
|
+
PositionAnchor["TOP_LEFT"] = "top left";
|
|
31
|
+
PositionAnchor["TOP_RIGHT"] = "top right";
|
|
32
|
+
PositionAnchor["BOTTOM_LEFT"] = "bottom left";
|
|
33
|
+
PositionAnchor["BOTTOM_RIGHT"] = "bottom right";
|
|
34
|
+
})(exports.PositionAnchor || (exports.PositionAnchor = {}));
|
|
35
|
+
|
|
36
|
+
var DEFAULT_POSITIONING_OPTIONS = {
|
|
37
|
+
anchor: exports.PositionAnchor.TOP_LEFT,
|
|
38
|
+
offsets: [],
|
|
39
|
+
position: exports.Position.TOP_LEFT,
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Copyright 2016 Google Inc. All Rights Reserved.
|
|
44
|
+
*
|
|
45
|
+
* Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
|
|
46
|
+
*
|
|
47
|
+
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
|
|
48
|
+
*
|
|
49
|
+
*/
|
|
50
|
+
(function() {
|
|
51
|
+
|
|
52
|
+
// Exit early if we're not running in a browser.
|
|
53
|
+
if (typeof window !== 'object') {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Exit early if all IntersectionObserver and IntersectionObserverEntry
|
|
58
|
+
// features are natively supported.
|
|
59
|
+
if ('IntersectionObserver' in window &&
|
|
60
|
+
'IntersectionObserverEntry' in window &&
|
|
61
|
+
'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
|
|
62
|
+
|
|
63
|
+
// Minimal polyfill for Edge 15's lack of `isIntersecting`
|
|
64
|
+
// See: https://github.com/w3c/IntersectionObserver/issues/211
|
|
65
|
+
if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
|
|
66
|
+
Object.defineProperty(window.IntersectionObserverEntry.prototype,
|
|
67
|
+
'isIntersecting', {
|
|
68
|
+
get: function () {
|
|
69
|
+
return this.intersectionRatio > 0;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Returns the embedding frame element, if any.
|
|
78
|
+
* @param {!Document} doc
|
|
79
|
+
* @return {!Element}
|
|
80
|
+
*/
|
|
81
|
+
function getFrameElement(doc) {
|
|
82
|
+
try {
|
|
83
|
+
return doc.defaultView && doc.defaultView.frameElement || null;
|
|
84
|
+
} catch (e) {
|
|
85
|
+
// Ignore the error.
|
|
86
|
+
return null;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* A local reference to the root document.
|
|
92
|
+
*/
|
|
93
|
+
var document = (function(startDoc) {
|
|
94
|
+
var doc = startDoc;
|
|
95
|
+
var frame = getFrameElement(doc);
|
|
96
|
+
while (frame) {
|
|
97
|
+
doc = frame.ownerDocument;
|
|
98
|
+
frame = getFrameElement(doc);
|
|
99
|
+
}
|
|
100
|
+
return doc;
|
|
101
|
+
})(window.document);
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* An IntersectionObserver registry. This registry exists to hold a strong
|
|
105
|
+
* reference to IntersectionObserver instances currently observing a target
|
|
106
|
+
* element. Without this registry, instances without another reference may be
|
|
107
|
+
* garbage collected.
|
|
108
|
+
*/
|
|
109
|
+
var registry = [];
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* The signal updater for cross-origin intersection. When not null, it means
|
|
113
|
+
* that the polyfill is configured to work in a cross-origin mode.
|
|
114
|
+
* @type {function(DOMRect|ClientRect, DOMRect|ClientRect)}
|
|
115
|
+
*/
|
|
116
|
+
var crossOriginUpdater = null;
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* The current cross-origin intersection. Only used in the cross-origin mode.
|
|
120
|
+
* @type {DOMRect|ClientRect}
|
|
121
|
+
*/
|
|
122
|
+
var crossOriginRect = null;
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Creates the global IntersectionObserverEntry constructor.
|
|
127
|
+
* https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
|
|
128
|
+
* @param {Object} entry A dictionary of instance properties.
|
|
129
|
+
* @constructor
|
|
130
|
+
*/
|
|
131
|
+
function IntersectionObserverEntry(entry) {
|
|
132
|
+
this.time = entry.time;
|
|
133
|
+
this.target = entry.target;
|
|
134
|
+
this.rootBounds = ensureDOMRect(entry.rootBounds);
|
|
135
|
+
this.boundingClientRect = ensureDOMRect(entry.boundingClientRect);
|
|
136
|
+
this.intersectionRect = ensureDOMRect(entry.intersectionRect || getEmptyRect());
|
|
137
|
+
this.isIntersecting = !!entry.intersectionRect;
|
|
138
|
+
|
|
139
|
+
// Calculates the intersection ratio.
|
|
140
|
+
var targetRect = this.boundingClientRect;
|
|
141
|
+
var targetArea = targetRect.width * targetRect.height;
|
|
142
|
+
var intersectionRect = this.intersectionRect;
|
|
143
|
+
var intersectionArea = intersectionRect.width * intersectionRect.height;
|
|
144
|
+
|
|
145
|
+
// Sets intersection ratio.
|
|
146
|
+
if (targetArea) {
|
|
147
|
+
// Round the intersection ratio to avoid floating point math issues:
|
|
148
|
+
// https://github.com/w3c/IntersectionObserver/issues/324
|
|
149
|
+
this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
|
|
150
|
+
} else {
|
|
151
|
+
// If area is zero and is intersecting, sets to 1, otherwise to 0
|
|
152
|
+
this.intersectionRatio = this.isIntersecting ? 1 : 0;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* Creates the global IntersectionObserver constructor.
|
|
159
|
+
* https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
|
|
160
|
+
* @param {Function} callback The function to be invoked after intersection
|
|
161
|
+
* changes have queued. The function is not invoked if the queue has
|
|
162
|
+
* been emptied by calling the `takeRecords` method.
|
|
163
|
+
* @param {Object=} opt_options Optional configuration options.
|
|
164
|
+
* @constructor
|
|
165
|
+
*/
|
|
166
|
+
function IntersectionObserver(callback, opt_options) {
|
|
167
|
+
|
|
168
|
+
var options = opt_options || {};
|
|
169
|
+
|
|
170
|
+
if (typeof callback != 'function') {
|
|
171
|
+
throw new Error('callback must be a function');
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
if (
|
|
175
|
+
options.root &&
|
|
176
|
+
options.root.nodeType != 1 &&
|
|
177
|
+
options.root.nodeType != 9
|
|
178
|
+
) {
|
|
179
|
+
throw new Error('root must be a Document or Element');
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// Binds and throttles `this._checkForIntersections`.
|
|
183
|
+
this._checkForIntersections = throttle(
|
|
184
|
+
this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);
|
|
185
|
+
|
|
186
|
+
// Private properties.
|
|
187
|
+
this._callback = callback;
|
|
188
|
+
this._observationTargets = [];
|
|
189
|
+
this._queuedEntries = [];
|
|
190
|
+
this._rootMarginValues = this._parseRootMargin(options.rootMargin);
|
|
191
|
+
|
|
192
|
+
// Public properties.
|
|
193
|
+
this.thresholds = this._initThresholds(options.threshold);
|
|
194
|
+
this.root = options.root || null;
|
|
195
|
+
this.rootMargin = this._rootMarginValues.map(function(margin) {
|
|
196
|
+
return margin.value + margin.unit;
|
|
197
|
+
}).join(' ');
|
|
198
|
+
|
|
199
|
+
/** @private @const {!Array<!Document>} */
|
|
200
|
+
this._monitoringDocuments = [];
|
|
201
|
+
/** @private @const {!Array<function()>} */
|
|
202
|
+
this._monitoringUnsubscribes = [];
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
/**
|
|
207
|
+
* The minimum interval within which the document will be checked for
|
|
208
|
+
* intersection changes.
|
|
209
|
+
*/
|
|
210
|
+
IntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* The frequency in which the polyfill polls for intersection changes.
|
|
215
|
+
* this can be updated on a per instance basis and must be set prior to
|
|
216
|
+
* calling `observe` on the first target.
|
|
217
|
+
*/
|
|
218
|
+
IntersectionObserver.prototype.POLL_INTERVAL = null;
|
|
219
|
+
|
|
220
|
+
/**
|
|
221
|
+
* Use a mutation observer on the root element
|
|
222
|
+
* to detect intersection changes.
|
|
223
|
+
*/
|
|
224
|
+
IntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* Sets up the polyfill in the cross-origin mode. The result is the
|
|
229
|
+
* updater function that accepts two arguments: `boundingClientRect` and
|
|
230
|
+
* `intersectionRect` - just as these fields would be available to the
|
|
231
|
+
* parent via `IntersectionObserverEntry`. This function should be called
|
|
232
|
+
* each time the iframe receives intersection information from the parent
|
|
233
|
+
* window, e.g. via messaging.
|
|
234
|
+
* @return {function(DOMRect|ClientRect, DOMRect|ClientRect)}
|
|
235
|
+
*/
|
|
236
|
+
IntersectionObserver._setupCrossOriginUpdater = function() {
|
|
237
|
+
if (!crossOriginUpdater) {
|
|
238
|
+
/**
|
|
239
|
+
* @param {DOMRect|ClientRect} boundingClientRect
|
|
240
|
+
* @param {DOMRect|ClientRect} intersectionRect
|
|
241
|
+
*/
|
|
242
|
+
crossOriginUpdater = function(boundingClientRect, intersectionRect) {
|
|
243
|
+
if (!boundingClientRect || !intersectionRect) {
|
|
244
|
+
crossOriginRect = getEmptyRect();
|
|
245
|
+
} else {
|
|
246
|
+
crossOriginRect = convertFromParentRect(boundingClientRect, intersectionRect);
|
|
247
|
+
}
|
|
248
|
+
registry.forEach(function(observer) {
|
|
249
|
+
observer._checkForIntersections();
|
|
250
|
+
});
|
|
251
|
+
};
|
|
252
|
+
}
|
|
253
|
+
return crossOriginUpdater;
|
|
254
|
+
};
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
/**
|
|
258
|
+
* Resets the cross-origin mode.
|
|
259
|
+
*/
|
|
260
|
+
IntersectionObserver._resetCrossOriginUpdater = function() {
|
|
261
|
+
crossOriginUpdater = null;
|
|
262
|
+
crossOriginRect = null;
|
|
263
|
+
};
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* Starts observing a target element for intersection changes based on
|
|
268
|
+
* the thresholds values.
|
|
269
|
+
* @param {Element} target The DOM element to observe.
|
|
270
|
+
*/
|
|
271
|
+
IntersectionObserver.prototype.observe = function(target) {
|
|
272
|
+
var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
|
|
273
|
+
return item.element == target;
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
if (isTargetAlreadyObserved) {
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
if (!(target && target.nodeType == 1)) {
|
|
281
|
+
throw new Error('target must be an Element');
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
this._registerInstance();
|
|
285
|
+
this._observationTargets.push({element: target, entry: null});
|
|
286
|
+
this._monitorIntersections(target.ownerDocument);
|
|
287
|
+
this._checkForIntersections();
|
|
288
|
+
};
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
/**
|
|
292
|
+
* Stops observing a target element for intersection changes.
|
|
293
|
+
* @param {Element} target The DOM element to observe.
|
|
294
|
+
*/
|
|
295
|
+
IntersectionObserver.prototype.unobserve = function(target) {
|
|
296
|
+
this._observationTargets =
|
|
297
|
+
this._observationTargets.filter(function(item) {
|
|
298
|
+
return item.element != target;
|
|
299
|
+
});
|
|
300
|
+
this._unmonitorIntersections(target.ownerDocument);
|
|
301
|
+
if (this._observationTargets.length == 0) {
|
|
302
|
+
this._unregisterInstance();
|
|
303
|
+
}
|
|
304
|
+
};
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
/**
|
|
308
|
+
* Stops observing all target elements for intersection changes.
|
|
309
|
+
*/
|
|
310
|
+
IntersectionObserver.prototype.disconnect = function() {
|
|
311
|
+
this._observationTargets = [];
|
|
312
|
+
this._unmonitorAllIntersections();
|
|
313
|
+
this._unregisterInstance();
|
|
314
|
+
};
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
/**
|
|
318
|
+
* Returns any queue entries that have not yet been reported to the
|
|
319
|
+
* callback and clears the queue. This can be used in conjunction with the
|
|
320
|
+
* callback to obtain the absolute most up-to-date intersection information.
|
|
321
|
+
* @return {Array} The currently queued entries.
|
|
322
|
+
*/
|
|
323
|
+
IntersectionObserver.prototype.takeRecords = function() {
|
|
324
|
+
var records = this._queuedEntries.slice();
|
|
325
|
+
this._queuedEntries = [];
|
|
326
|
+
return records;
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
/**
|
|
331
|
+
* Accepts the threshold value from the user configuration object and
|
|
332
|
+
* returns a sorted array of unique threshold values. If a value is not
|
|
333
|
+
* between 0 and 1 and error is thrown.
|
|
334
|
+
* @private
|
|
335
|
+
* @param {Array|number=} opt_threshold An optional threshold value or
|
|
336
|
+
* a list of threshold values, defaulting to [0].
|
|
337
|
+
* @return {Array} A sorted list of unique and valid threshold values.
|
|
338
|
+
*/
|
|
339
|
+
IntersectionObserver.prototype._initThresholds = function(opt_threshold) {
|
|
340
|
+
var threshold = opt_threshold || [0];
|
|
341
|
+
if (!Array.isArray(threshold)) threshold = [threshold];
|
|
342
|
+
|
|
343
|
+
return threshold.sort().filter(function(t, i, a) {
|
|
344
|
+
if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {
|
|
345
|
+
throw new Error('threshold must be a number between 0 and 1 inclusively');
|
|
346
|
+
}
|
|
347
|
+
return t !== a[i - 1];
|
|
348
|
+
});
|
|
349
|
+
};
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
/**
|
|
353
|
+
* Accepts the rootMargin value from the user configuration object
|
|
354
|
+
* and returns an array of the four margin values as an object containing
|
|
355
|
+
* the value and unit properties. If any of the values are not properly
|
|
356
|
+
* formatted or use a unit other than px or %, and error is thrown.
|
|
357
|
+
* @private
|
|
358
|
+
* @param {string=} opt_rootMargin An optional rootMargin value,
|
|
359
|
+
* defaulting to '0px'.
|
|
360
|
+
* @return {Array<Object>} An array of margin objects with the keys
|
|
361
|
+
* value and unit.
|
|
362
|
+
*/
|
|
363
|
+
IntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {
|
|
364
|
+
var marginString = opt_rootMargin || '0px';
|
|
365
|
+
var margins = marginString.split(/\s+/).map(function(margin) {
|
|
366
|
+
var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
|
|
367
|
+
if (!parts) {
|
|
368
|
+
throw new Error('rootMargin must be specified in pixels or percent');
|
|
369
|
+
}
|
|
370
|
+
return {value: parseFloat(parts[1]), unit: parts[2]};
|
|
371
|
+
});
|
|
372
|
+
|
|
373
|
+
// Handles shorthand.
|
|
374
|
+
margins[1] = margins[1] || margins[0];
|
|
375
|
+
margins[2] = margins[2] || margins[0];
|
|
376
|
+
margins[3] = margins[3] || margins[1];
|
|
377
|
+
|
|
378
|
+
return margins;
|
|
379
|
+
};
|
|
380
|
+
|
|
381
|
+
|
|
382
|
+
/**
|
|
383
|
+
* Starts polling for intersection changes if the polling is not already
|
|
384
|
+
* happening, and if the page's visibility state is visible.
|
|
385
|
+
* @param {!Document} doc
|
|
386
|
+
* @private
|
|
387
|
+
*/
|
|
388
|
+
IntersectionObserver.prototype._monitorIntersections = function(doc) {
|
|
389
|
+
var win = doc.defaultView;
|
|
390
|
+
if (!win) {
|
|
391
|
+
// Already destroyed.
|
|
392
|
+
return;
|
|
393
|
+
}
|
|
394
|
+
if (this._monitoringDocuments.indexOf(doc) != -1) {
|
|
395
|
+
// Already monitoring.
|
|
396
|
+
return;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
// Private state for monitoring.
|
|
400
|
+
var callback = this._checkForIntersections;
|
|
401
|
+
var monitoringInterval = null;
|
|
402
|
+
var domObserver = null;
|
|
403
|
+
|
|
404
|
+
// If a poll interval is set, use polling instead of listening to
|
|
405
|
+
// resize and scroll events or DOM mutations.
|
|
406
|
+
if (this.POLL_INTERVAL) {
|
|
407
|
+
monitoringInterval = win.setInterval(callback, this.POLL_INTERVAL);
|
|
408
|
+
} else {
|
|
409
|
+
addEvent(win, 'resize', callback, true);
|
|
410
|
+
addEvent(doc, 'scroll', callback, true);
|
|
411
|
+
if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in win) {
|
|
412
|
+
domObserver = new win.MutationObserver(callback);
|
|
413
|
+
domObserver.observe(doc, {
|
|
414
|
+
attributes: true,
|
|
415
|
+
childList: true,
|
|
416
|
+
characterData: true,
|
|
417
|
+
subtree: true
|
|
418
|
+
});
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
this._monitoringDocuments.push(doc);
|
|
423
|
+
this._monitoringUnsubscribes.push(function() {
|
|
424
|
+
// Get the window object again. When a friendly iframe is destroyed, it
|
|
425
|
+
// will be null.
|
|
426
|
+
var win = doc.defaultView;
|
|
427
|
+
|
|
428
|
+
if (win) {
|
|
429
|
+
if (monitoringInterval) {
|
|
430
|
+
win.clearInterval(monitoringInterval);
|
|
431
|
+
}
|
|
432
|
+
removeEvent(win, 'resize', callback, true);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
removeEvent(doc, 'scroll', callback, true);
|
|
436
|
+
if (domObserver) {
|
|
437
|
+
domObserver.disconnect();
|
|
438
|
+
}
|
|
439
|
+
});
|
|
440
|
+
|
|
441
|
+
// Also monitor the parent.
|
|
442
|
+
var rootDoc =
|
|
443
|
+
(this.root && (this.root.ownerDocument || this.root)) || document;
|
|
444
|
+
if (doc != rootDoc) {
|
|
445
|
+
var frame = getFrameElement(doc);
|
|
446
|
+
if (frame) {
|
|
447
|
+
this._monitorIntersections(frame.ownerDocument);
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
};
|
|
451
|
+
|
|
452
|
+
|
|
453
|
+
/**
|
|
454
|
+
* Stops polling for intersection changes.
|
|
455
|
+
* @param {!Document} doc
|
|
456
|
+
* @private
|
|
457
|
+
*/
|
|
458
|
+
IntersectionObserver.prototype._unmonitorIntersections = function(doc) {
|
|
459
|
+
var index = this._monitoringDocuments.indexOf(doc);
|
|
460
|
+
if (index == -1) {
|
|
461
|
+
return;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
var rootDoc =
|
|
465
|
+
(this.root && (this.root.ownerDocument || this.root)) || document;
|
|
466
|
+
|
|
467
|
+
// Check if any dependent targets are still remaining.
|
|
468
|
+
var hasDependentTargets =
|
|
469
|
+
this._observationTargets.some(function(item) {
|
|
470
|
+
var itemDoc = item.element.ownerDocument;
|
|
471
|
+
// Target is in this context.
|
|
472
|
+
if (itemDoc == doc) {
|
|
473
|
+
return true;
|
|
474
|
+
}
|
|
475
|
+
// Target is nested in this context.
|
|
476
|
+
while (itemDoc && itemDoc != rootDoc) {
|
|
477
|
+
var frame = getFrameElement(itemDoc);
|
|
478
|
+
itemDoc = frame && frame.ownerDocument;
|
|
479
|
+
if (itemDoc == doc) {
|
|
480
|
+
return true;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
return false;
|
|
484
|
+
});
|
|
485
|
+
if (hasDependentTargets) {
|
|
486
|
+
return;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
// Unsubscribe.
|
|
490
|
+
var unsubscribe = this._monitoringUnsubscribes[index];
|
|
491
|
+
this._monitoringDocuments.splice(index, 1);
|
|
492
|
+
this._monitoringUnsubscribes.splice(index, 1);
|
|
493
|
+
unsubscribe();
|
|
494
|
+
|
|
495
|
+
// Also unmonitor the parent.
|
|
496
|
+
if (doc != rootDoc) {
|
|
497
|
+
var frame = getFrameElement(doc);
|
|
498
|
+
if (frame) {
|
|
499
|
+
this._unmonitorIntersections(frame.ownerDocument);
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
};
|
|
503
|
+
|
|
504
|
+
|
|
505
|
+
/**
|
|
506
|
+
* Stops polling for intersection changes.
|
|
507
|
+
* @param {!Document} doc
|
|
508
|
+
* @private
|
|
509
|
+
*/
|
|
510
|
+
IntersectionObserver.prototype._unmonitorAllIntersections = function() {
|
|
511
|
+
var unsubscribes = this._monitoringUnsubscribes.slice(0);
|
|
512
|
+
this._monitoringDocuments.length = 0;
|
|
513
|
+
this._monitoringUnsubscribes.length = 0;
|
|
514
|
+
for (var i = 0; i < unsubscribes.length; i++) {
|
|
515
|
+
unsubscribes[i]();
|
|
516
|
+
}
|
|
517
|
+
};
|
|
518
|
+
|
|
519
|
+
|
|
520
|
+
/**
|
|
521
|
+
* Scans each observation target for intersection changes and adds them
|
|
522
|
+
* to the internal entries queue. If new entries are found, it
|
|
523
|
+
* schedules the callback to be invoked.
|
|
524
|
+
* @private
|
|
525
|
+
*/
|
|
526
|
+
IntersectionObserver.prototype._checkForIntersections = function() {
|
|
527
|
+
if (!this.root && crossOriginUpdater && !crossOriginRect) {
|
|
528
|
+
// Cross origin monitoring, but no initial data available yet.
|
|
529
|
+
return;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
var rootIsInDom = this._rootIsInDom();
|
|
533
|
+
var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
|
|
534
|
+
|
|
535
|
+
this._observationTargets.forEach(function(item) {
|
|
536
|
+
var target = item.element;
|
|
537
|
+
var targetRect = getBoundingClientRect(target);
|
|
538
|
+
var rootContainsTarget = this._rootContainsTarget(target);
|
|
539
|
+
var oldEntry = item.entry;
|
|
540
|
+
var intersectionRect = rootIsInDom && rootContainsTarget &&
|
|
541
|
+
this._computeTargetAndRootIntersection(target, targetRect, rootRect);
|
|
542
|
+
|
|
543
|
+
var rootBounds = null;
|
|
544
|
+
if (!this._rootContainsTarget(target)) {
|
|
545
|
+
rootBounds = getEmptyRect();
|
|
546
|
+
} else if (!crossOriginUpdater || this.root) {
|
|
547
|
+
rootBounds = rootRect;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
var newEntry = item.entry = new IntersectionObserverEntry({
|
|
551
|
+
time: now(),
|
|
552
|
+
target: target,
|
|
553
|
+
boundingClientRect: targetRect,
|
|
554
|
+
rootBounds: rootBounds,
|
|
555
|
+
intersectionRect: intersectionRect
|
|
556
|
+
});
|
|
557
|
+
|
|
558
|
+
if (!oldEntry) {
|
|
559
|
+
this._queuedEntries.push(newEntry);
|
|
560
|
+
} else if (rootIsInDom && rootContainsTarget) {
|
|
561
|
+
// If the new entry intersection ratio has crossed any of the
|
|
562
|
+
// thresholds, add a new entry.
|
|
563
|
+
if (this._hasCrossedThreshold(oldEntry, newEntry)) {
|
|
564
|
+
this._queuedEntries.push(newEntry);
|
|
565
|
+
}
|
|
566
|
+
} else {
|
|
567
|
+
// If the root is not in the DOM or target is not contained within
|
|
568
|
+
// root but the previous entry for this target had an intersection,
|
|
569
|
+
// add a new record indicating removal.
|
|
570
|
+
if (oldEntry && oldEntry.isIntersecting) {
|
|
571
|
+
this._queuedEntries.push(newEntry);
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
}, this);
|
|
575
|
+
|
|
576
|
+
if (this._queuedEntries.length) {
|
|
577
|
+
this._callback(this.takeRecords(), this);
|
|
578
|
+
}
|
|
579
|
+
};
|
|
580
|
+
|
|
581
|
+
|
|
582
|
+
/**
|
|
583
|
+
* Accepts a target and root rect computes the intersection between then
|
|
584
|
+
* following the algorithm in the spec.
|
|
585
|
+
* TODO(philipwalton): at this time clip-path is not considered.
|
|
586
|
+
* https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
|
|
587
|
+
* @param {Element} target The target DOM element
|
|
588
|
+
* @param {Object} targetRect The bounding rect of the target.
|
|
589
|
+
* @param {Object} rootRect The bounding rect of the root after being
|
|
590
|
+
* expanded by the rootMargin value.
|
|
591
|
+
* @return {?Object} The final intersection rect object or undefined if no
|
|
592
|
+
* intersection is found.
|
|
593
|
+
* @private
|
|
594
|
+
*/
|
|
595
|
+
IntersectionObserver.prototype._computeTargetAndRootIntersection =
|
|
596
|
+
function(target, targetRect, rootRect) {
|
|
597
|
+
// If the element isn't displayed, an intersection can't happen.
|
|
598
|
+
if (window.getComputedStyle(target).display == 'none') return;
|
|
599
|
+
|
|
600
|
+
var intersectionRect = targetRect;
|
|
601
|
+
var parent = getParentNode(target);
|
|
602
|
+
var atRoot = false;
|
|
603
|
+
|
|
604
|
+
while (!atRoot && parent) {
|
|
605
|
+
var parentRect = null;
|
|
606
|
+
var parentComputedStyle = parent.nodeType == 1 ?
|
|
607
|
+
window.getComputedStyle(parent) : {};
|
|
608
|
+
|
|
609
|
+
// If the parent isn't displayed, an intersection can't happen.
|
|
610
|
+
if (parentComputedStyle.display == 'none') return null;
|
|
611
|
+
|
|
612
|
+
if (parent == this.root || parent.nodeType == /* DOCUMENT */ 9) {
|
|
613
|
+
atRoot = true;
|
|
614
|
+
if (parent == this.root || parent == document) {
|
|
615
|
+
if (crossOriginUpdater && !this.root) {
|
|
616
|
+
if (!crossOriginRect ||
|
|
617
|
+
crossOriginRect.width == 0 && crossOriginRect.height == 0) {
|
|
618
|
+
// A 0-size cross-origin intersection means no-intersection.
|
|
619
|
+
parent = null;
|
|
620
|
+
parentRect = null;
|
|
621
|
+
intersectionRect = null;
|
|
622
|
+
} else {
|
|
623
|
+
parentRect = crossOriginRect;
|
|
624
|
+
}
|
|
625
|
+
} else {
|
|
626
|
+
parentRect = rootRect;
|
|
627
|
+
}
|
|
628
|
+
} else {
|
|
629
|
+
// Check if there's a frame that can be navigated to.
|
|
630
|
+
var frame = getParentNode(parent);
|
|
631
|
+
var frameRect = frame && getBoundingClientRect(frame);
|
|
632
|
+
var frameIntersect =
|
|
633
|
+
frame &&
|
|
634
|
+
this._computeTargetAndRootIntersection(frame, frameRect, rootRect);
|
|
635
|
+
if (frameRect && frameIntersect) {
|
|
636
|
+
parent = frame;
|
|
637
|
+
parentRect = convertFromParentRect(frameRect, frameIntersect);
|
|
638
|
+
} else {
|
|
639
|
+
parent = null;
|
|
640
|
+
intersectionRect = null;
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
} else {
|
|
644
|
+
// If the element has a non-visible overflow, and it's not the <body>
|
|
645
|
+
// or <html> element, update the intersection rect.
|
|
646
|
+
// Note: <body> and <html> cannot be clipped to a rect that's not also
|
|
647
|
+
// the document rect, so no need to compute a new intersection.
|
|
648
|
+
var doc = parent.ownerDocument;
|
|
649
|
+
if (parent != doc.body &&
|
|
650
|
+
parent != doc.documentElement &&
|
|
651
|
+
parentComputedStyle.overflow != 'visible') {
|
|
652
|
+
parentRect = getBoundingClientRect(parent);
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
// If either of the above conditionals set a new parentRect,
|
|
657
|
+
// calculate new intersection data.
|
|
658
|
+
if (parentRect) {
|
|
659
|
+
intersectionRect = computeRectIntersection(parentRect, intersectionRect);
|
|
660
|
+
}
|
|
661
|
+
if (!intersectionRect) break;
|
|
662
|
+
parent = parent && getParentNode(parent);
|
|
663
|
+
}
|
|
664
|
+
return intersectionRect;
|
|
665
|
+
};
|
|
666
|
+
|
|
667
|
+
|
|
668
|
+
/**
|
|
669
|
+
* Returns the root rect after being expanded by the rootMargin value.
|
|
670
|
+
* @return {ClientRect} The expanded root rect.
|
|
671
|
+
* @private
|
|
672
|
+
*/
|
|
673
|
+
IntersectionObserver.prototype._getRootRect = function() {
|
|
674
|
+
var rootRect;
|
|
675
|
+
if (this.root && !isDoc(this.root)) {
|
|
676
|
+
rootRect = getBoundingClientRect(this.root);
|
|
677
|
+
} else {
|
|
678
|
+
// Use <html>/<body> instead of window since scroll bars affect size.
|
|
679
|
+
var doc = isDoc(this.root) ? this.root : document;
|
|
680
|
+
var html = doc.documentElement;
|
|
681
|
+
var body = doc.body;
|
|
682
|
+
rootRect = {
|
|
683
|
+
top: 0,
|
|
684
|
+
left: 0,
|
|
685
|
+
right: html.clientWidth || body.clientWidth,
|
|
686
|
+
width: html.clientWidth || body.clientWidth,
|
|
687
|
+
bottom: html.clientHeight || body.clientHeight,
|
|
688
|
+
height: html.clientHeight || body.clientHeight
|
|
689
|
+
};
|
|
690
|
+
}
|
|
691
|
+
return this._expandRectByRootMargin(rootRect);
|
|
692
|
+
};
|
|
693
|
+
|
|
694
|
+
|
|
695
|
+
/**
|
|
696
|
+
* Accepts a rect and expands it by the rootMargin value.
|
|
697
|
+
* @param {DOMRect|ClientRect} rect The rect object to expand.
|
|
698
|
+
* @return {ClientRect} The expanded rect.
|
|
699
|
+
* @private
|
|
700
|
+
*/
|
|
701
|
+
IntersectionObserver.prototype._expandRectByRootMargin = function(rect) {
|
|
702
|
+
var margins = this._rootMarginValues.map(function(margin, i) {
|
|
703
|
+
return margin.unit == 'px' ? margin.value :
|
|
704
|
+
margin.value * (i % 2 ? rect.width : rect.height) / 100;
|
|
705
|
+
});
|
|
706
|
+
var newRect = {
|
|
707
|
+
top: rect.top - margins[0],
|
|
708
|
+
right: rect.right + margins[1],
|
|
709
|
+
bottom: rect.bottom + margins[2],
|
|
710
|
+
left: rect.left - margins[3]
|
|
711
|
+
};
|
|
712
|
+
newRect.width = newRect.right - newRect.left;
|
|
713
|
+
newRect.height = newRect.bottom - newRect.top;
|
|
714
|
+
|
|
715
|
+
return newRect;
|
|
716
|
+
};
|
|
717
|
+
|
|
718
|
+
|
|
719
|
+
/**
|
|
720
|
+
* Accepts an old and new entry and returns true if at least one of the
|
|
721
|
+
* threshold values has been crossed.
|
|
722
|
+
* @param {?IntersectionObserverEntry} oldEntry The previous entry for a
|
|
723
|
+
* particular target element or null if no previous entry exists.
|
|
724
|
+
* @param {IntersectionObserverEntry} newEntry The current entry for a
|
|
725
|
+
* particular target element.
|
|
726
|
+
* @return {boolean} Returns true if a any threshold has been crossed.
|
|
727
|
+
* @private
|
|
728
|
+
*/
|
|
729
|
+
IntersectionObserver.prototype._hasCrossedThreshold =
|
|
730
|
+
function(oldEntry, newEntry) {
|
|
731
|
+
|
|
732
|
+
// To make comparing easier, an entry that has a ratio of 0
|
|
733
|
+
// but does not actually intersect is given a value of -1
|
|
734
|
+
var oldRatio = oldEntry && oldEntry.isIntersecting ?
|
|
735
|
+
oldEntry.intersectionRatio || 0 : -1;
|
|
736
|
+
var newRatio = newEntry.isIntersecting ?
|
|
737
|
+
newEntry.intersectionRatio || 0 : -1;
|
|
738
|
+
|
|
739
|
+
// Ignore unchanged ratios
|
|
740
|
+
if (oldRatio === newRatio) return;
|
|
741
|
+
|
|
742
|
+
for (var i = 0; i < this.thresholds.length; i++) {
|
|
743
|
+
var threshold = this.thresholds[i];
|
|
744
|
+
|
|
745
|
+
// Return true if an entry matches a threshold or if the new ratio
|
|
746
|
+
// and the old ratio are on the opposite sides of a threshold.
|
|
747
|
+
if (threshold == oldRatio || threshold == newRatio ||
|
|
748
|
+
threshold < oldRatio !== threshold < newRatio) {
|
|
749
|
+
return true;
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
};
|
|
753
|
+
|
|
754
|
+
|
|
755
|
+
/**
|
|
756
|
+
* Returns whether or not the root element is an element and is in the DOM.
|
|
757
|
+
* @return {boolean} True if the root element is an element and is in the DOM.
|
|
758
|
+
* @private
|
|
759
|
+
*/
|
|
760
|
+
IntersectionObserver.prototype._rootIsInDom = function() {
|
|
761
|
+
return !this.root || containsDeep(document, this.root);
|
|
762
|
+
};
|
|
763
|
+
|
|
764
|
+
|
|
765
|
+
/**
|
|
766
|
+
* Returns whether or not the target element is a child of root.
|
|
767
|
+
* @param {Element} target The target element to check.
|
|
768
|
+
* @return {boolean} True if the target element is a child of root.
|
|
769
|
+
* @private
|
|
770
|
+
*/
|
|
771
|
+
IntersectionObserver.prototype._rootContainsTarget = function(target) {
|
|
772
|
+
var rootDoc =
|
|
773
|
+
(this.root && (this.root.ownerDocument || this.root)) || document;
|
|
774
|
+
return (
|
|
775
|
+
containsDeep(rootDoc, target) &&
|
|
776
|
+
(!this.root || rootDoc == target.ownerDocument)
|
|
777
|
+
);
|
|
778
|
+
};
|
|
779
|
+
|
|
780
|
+
|
|
781
|
+
/**
|
|
782
|
+
* Adds the instance to the global IntersectionObserver registry if it isn't
|
|
783
|
+
* already present.
|
|
784
|
+
* @private
|
|
785
|
+
*/
|
|
786
|
+
IntersectionObserver.prototype._registerInstance = function() {
|
|
787
|
+
if (registry.indexOf(this) < 0) {
|
|
788
|
+
registry.push(this);
|
|
789
|
+
}
|
|
790
|
+
};
|
|
791
|
+
|
|
792
|
+
|
|
793
|
+
/**
|
|
794
|
+
* Removes the instance from the global IntersectionObserver registry.
|
|
795
|
+
* @private
|
|
796
|
+
*/
|
|
797
|
+
IntersectionObserver.prototype._unregisterInstance = function() {
|
|
798
|
+
var index = registry.indexOf(this);
|
|
799
|
+
if (index != -1) registry.splice(index, 1);
|
|
800
|
+
};
|
|
801
|
+
|
|
802
|
+
|
|
803
|
+
/**
|
|
804
|
+
* Returns the result of the performance.now() method or null in browsers
|
|
805
|
+
* that don't support the API.
|
|
806
|
+
* @return {number} The elapsed time since the page was requested.
|
|
807
|
+
*/
|
|
808
|
+
function now() {
|
|
809
|
+
return window.performance && performance.now && performance.now();
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
|
|
813
|
+
/**
|
|
814
|
+
* Throttles a function and delays its execution, so it's only called at most
|
|
815
|
+
* once within a given time period.
|
|
816
|
+
* @param {Function} fn The function to throttle.
|
|
817
|
+
* @param {number} timeout The amount of time that must pass before the
|
|
818
|
+
* function can be called again.
|
|
819
|
+
* @return {Function} The throttled function.
|
|
820
|
+
*/
|
|
821
|
+
function throttle(fn, timeout) {
|
|
822
|
+
var timer = null;
|
|
823
|
+
return function () {
|
|
824
|
+
if (!timer) {
|
|
825
|
+
timer = setTimeout(function() {
|
|
826
|
+
fn();
|
|
827
|
+
timer = null;
|
|
828
|
+
}, timeout);
|
|
829
|
+
}
|
|
830
|
+
};
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
|
|
834
|
+
/**
|
|
835
|
+
* Adds an event handler to a DOM node ensuring cross-browser compatibility.
|
|
836
|
+
* @param {Node} node The DOM node to add the event handler to.
|
|
837
|
+
* @param {string} event The event name.
|
|
838
|
+
* @param {Function} fn The event handler to add.
|
|
839
|
+
* @param {boolean} opt_useCapture Optionally adds the even to the capture
|
|
840
|
+
* phase. Note: this only works in modern browsers.
|
|
841
|
+
*/
|
|
842
|
+
function addEvent(node, event, fn, opt_useCapture) {
|
|
843
|
+
if (typeof node.addEventListener == 'function') {
|
|
844
|
+
node.addEventListener(event, fn, opt_useCapture || false);
|
|
845
|
+
}
|
|
846
|
+
else if (typeof node.attachEvent == 'function') {
|
|
847
|
+
node.attachEvent('on' + event, fn);
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
|
|
852
|
+
/**
|
|
853
|
+
* Removes a previously added event handler from a DOM node.
|
|
854
|
+
* @param {Node} node The DOM node to remove the event handler from.
|
|
855
|
+
* @param {string} event The event name.
|
|
856
|
+
* @param {Function} fn The event handler to remove.
|
|
857
|
+
* @param {boolean} opt_useCapture If the event handler was added with this
|
|
858
|
+
* flag set to true, it should be set to true here in order to remove it.
|
|
859
|
+
*/
|
|
860
|
+
function removeEvent(node, event, fn, opt_useCapture) {
|
|
861
|
+
if (typeof node.removeEventListener == 'function') {
|
|
862
|
+
node.removeEventListener(event, fn, opt_useCapture || false);
|
|
863
|
+
}
|
|
864
|
+
else if (typeof node.detatchEvent == 'function') {
|
|
865
|
+
node.detatchEvent('on' + event, fn);
|
|
866
|
+
}
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
|
|
870
|
+
/**
|
|
871
|
+
* Returns the intersection between two rect objects.
|
|
872
|
+
* @param {Object} rect1 The first rect.
|
|
873
|
+
* @param {Object} rect2 The second rect.
|
|
874
|
+
* @return {?Object|?ClientRect} The intersection rect or undefined if no
|
|
875
|
+
* intersection is found.
|
|
876
|
+
*/
|
|
877
|
+
function computeRectIntersection(rect1, rect2) {
|
|
878
|
+
var top = Math.max(rect1.top, rect2.top);
|
|
879
|
+
var bottom = Math.min(rect1.bottom, rect2.bottom);
|
|
880
|
+
var left = Math.max(rect1.left, rect2.left);
|
|
881
|
+
var right = Math.min(rect1.right, rect2.right);
|
|
882
|
+
var width = right - left;
|
|
883
|
+
var height = bottom - top;
|
|
884
|
+
|
|
885
|
+
return (width >= 0 && height >= 0) && {
|
|
886
|
+
top: top,
|
|
887
|
+
bottom: bottom,
|
|
888
|
+
left: left,
|
|
889
|
+
right: right,
|
|
890
|
+
width: width,
|
|
891
|
+
height: height
|
|
892
|
+
} || null;
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
|
|
896
|
+
/**
|
|
897
|
+
* Shims the native getBoundingClientRect for compatibility with older IE.
|
|
898
|
+
* @param {Element} el The element whose bounding rect to get.
|
|
899
|
+
* @return {DOMRect|ClientRect} The (possibly shimmed) rect of the element.
|
|
900
|
+
*/
|
|
901
|
+
function getBoundingClientRect(el) {
|
|
902
|
+
var rect;
|
|
903
|
+
|
|
904
|
+
try {
|
|
905
|
+
rect = el.getBoundingClientRect();
|
|
906
|
+
} catch (err) {
|
|
907
|
+
// Ignore Windows 7 IE11 "Unspecified error"
|
|
908
|
+
// https://github.com/w3c/IntersectionObserver/pull/205
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
if (!rect) return getEmptyRect();
|
|
912
|
+
|
|
913
|
+
// Older IE
|
|
914
|
+
if (!(rect.width && rect.height)) {
|
|
915
|
+
rect = {
|
|
916
|
+
top: rect.top,
|
|
917
|
+
right: rect.right,
|
|
918
|
+
bottom: rect.bottom,
|
|
919
|
+
left: rect.left,
|
|
920
|
+
width: rect.right - rect.left,
|
|
921
|
+
height: rect.bottom - rect.top
|
|
922
|
+
};
|
|
923
|
+
}
|
|
924
|
+
return rect;
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
|
|
928
|
+
/**
|
|
929
|
+
* Returns an empty rect object. An empty rect is returned when an element
|
|
930
|
+
* is not in the DOM.
|
|
931
|
+
* @return {ClientRect} The empty rect.
|
|
932
|
+
*/
|
|
933
|
+
function getEmptyRect() {
|
|
934
|
+
return {
|
|
935
|
+
top: 0,
|
|
936
|
+
bottom: 0,
|
|
937
|
+
left: 0,
|
|
938
|
+
right: 0,
|
|
939
|
+
width: 0,
|
|
940
|
+
height: 0
|
|
941
|
+
};
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
|
|
945
|
+
/**
|
|
946
|
+
* Ensure that the result has all of the necessary fields of the DOMRect.
|
|
947
|
+
* Specifically this ensures that `x` and `y` fields are set.
|
|
948
|
+
*
|
|
949
|
+
* @param {?DOMRect|?ClientRect} rect
|
|
950
|
+
* @return {?DOMRect}
|
|
951
|
+
*/
|
|
952
|
+
function ensureDOMRect(rect) {
|
|
953
|
+
// A `DOMRect` object has `x` and `y` fields.
|
|
954
|
+
if (!rect || 'x' in rect) {
|
|
955
|
+
return rect;
|
|
956
|
+
}
|
|
957
|
+
// A IE's `ClientRect` type does not have `x` and `y`. The same is the case
|
|
958
|
+
// for internally calculated Rect objects. For the purposes of
|
|
959
|
+
// `IntersectionObserver`, it's sufficient to simply mirror `left` and `top`
|
|
960
|
+
// for these fields.
|
|
961
|
+
return {
|
|
962
|
+
top: rect.top,
|
|
963
|
+
y: rect.top,
|
|
964
|
+
bottom: rect.bottom,
|
|
965
|
+
left: rect.left,
|
|
966
|
+
x: rect.left,
|
|
967
|
+
right: rect.right,
|
|
968
|
+
width: rect.width,
|
|
969
|
+
height: rect.height
|
|
970
|
+
};
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
|
|
974
|
+
/**
|
|
975
|
+
* Inverts the intersection and bounding rect from the parent (frame) BCR to
|
|
976
|
+
* the local BCR space.
|
|
977
|
+
* @param {DOMRect|ClientRect} parentBoundingRect The parent's bound client rect.
|
|
978
|
+
* @param {DOMRect|ClientRect} parentIntersectionRect The parent's own intersection rect.
|
|
979
|
+
* @return {ClientRect} The local root bounding rect for the parent's children.
|
|
980
|
+
*/
|
|
981
|
+
function convertFromParentRect(parentBoundingRect, parentIntersectionRect) {
|
|
982
|
+
var top = parentIntersectionRect.top - parentBoundingRect.top;
|
|
983
|
+
var left = parentIntersectionRect.left - parentBoundingRect.left;
|
|
984
|
+
return {
|
|
985
|
+
top: top,
|
|
986
|
+
left: left,
|
|
987
|
+
height: parentIntersectionRect.height,
|
|
988
|
+
width: parentIntersectionRect.width,
|
|
989
|
+
bottom: top + parentIntersectionRect.height,
|
|
990
|
+
right: left + parentIntersectionRect.width
|
|
991
|
+
};
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
|
|
995
|
+
/**
|
|
996
|
+
* Checks to see if a parent element contains a child element (including inside
|
|
997
|
+
* shadow DOM).
|
|
998
|
+
* @param {Node} parent The parent element.
|
|
999
|
+
* @param {Node} child The child element.
|
|
1000
|
+
* @return {boolean} True if the parent node contains the child node.
|
|
1001
|
+
*/
|
|
1002
|
+
function containsDeep(parent, child) {
|
|
1003
|
+
var node = child;
|
|
1004
|
+
while (node) {
|
|
1005
|
+
if (node == parent) return true;
|
|
1006
|
+
|
|
1007
|
+
node = getParentNode(node);
|
|
1008
|
+
}
|
|
1009
|
+
return false;
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
|
|
1013
|
+
/**
|
|
1014
|
+
* Gets the parent node of an element or its host element if the parent node
|
|
1015
|
+
* is a shadow root.
|
|
1016
|
+
* @param {Node} node The node whose parent to get.
|
|
1017
|
+
* @return {Node|null} The parent node or null if no parent exists.
|
|
1018
|
+
*/
|
|
1019
|
+
function getParentNode(node) {
|
|
1020
|
+
var parent = node.parentNode;
|
|
1021
|
+
|
|
1022
|
+
if (node.nodeType == /* DOCUMENT */ 9 && node != document) {
|
|
1023
|
+
// If this node is a document node, look for the embedding frame.
|
|
1024
|
+
return getFrameElement(node);
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
// If the parent has element that is assigned through shadow root slot
|
|
1028
|
+
if (parent && parent.assignedSlot) {
|
|
1029
|
+
parent = parent.assignedSlot.parentNode;
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
if (parent && parent.nodeType == 11 && parent.host) {
|
|
1033
|
+
// If the parent is a shadow root, return the host element.
|
|
1034
|
+
return parent.host;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
return parent;
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1040
|
+
/**
|
|
1041
|
+
* Returns true if `node` is a Document.
|
|
1042
|
+
* @param {!Node} node
|
|
1043
|
+
* @returns {boolean}
|
|
1044
|
+
*/
|
|
1045
|
+
function isDoc(node) {
|
|
1046
|
+
return node && node.nodeType === 9;
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
|
|
1050
|
+
// Exposes the constructors globally.
|
|
1051
|
+
window.IntersectionObserver = IntersectionObserver;
|
|
1052
|
+
window.IntersectionObserverEntry = IntersectionObserverEntry;
|
|
1053
|
+
|
|
1054
|
+
}());
|
|
1055
|
+
|
|
1056
|
+
var eventemitter3 = {exports: {}};
|
|
1057
|
+
|
|
1058
|
+
(function (module) {
|
|
1059
|
+
|
|
1060
|
+
var has = Object.prototype.hasOwnProperty
|
|
1061
|
+
, prefix = '~';
|
|
1062
|
+
|
|
1063
|
+
/**
|
|
1064
|
+
* Constructor to create a storage for our `EE` objects.
|
|
1065
|
+
* An `Events` instance is a plain object whose properties are event names.
|
|
1066
|
+
*
|
|
1067
|
+
* @constructor
|
|
1068
|
+
* @private
|
|
1069
|
+
*/
|
|
1070
|
+
function Events() {}
|
|
1071
|
+
|
|
1072
|
+
//
|
|
1073
|
+
// We try to not inherit from `Object.prototype`. In some engines creating an
|
|
1074
|
+
// instance in this way is faster than calling `Object.create(null)` directly.
|
|
1075
|
+
// If `Object.create(null)` is not supported we prefix the event names with a
|
|
1076
|
+
// character to make sure that the built-in object properties are not
|
|
1077
|
+
// overridden or used as an attack vector.
|
|
1078
|
+
//
|
|
1079
|
+
if (Object.create) {
|
|
1080
|
+
Events.prototype = Object.create(null);
|
|
1081
|
+
|
|
1082
|
+
//
|
|
1083
|
+
// This hack is needed because the `__proto__` property is still inherited in
|
|
1084
|
+
// some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
|
|
1085
|
+
//
|
|
1086
|
+
if (!new Events().__proto__) prefix = false;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
/**
|
|
1090
|
+
* Representation of a single event listener.
|
|
1091
|
+
*
|
|
1092
|
+
* @param {Function} fn The listener function.
|
|
1093
|
+
* @param {*} context The context to invoke the listener with.
|
|
1094
|
+
* @param {Boolean} [once=false] Specify if the listener is a one-time listener.
|
|
1095
|
+
* @constructor
|
|
1096
|
+
* @private
|
|
1097
|
+
*/
|
|
1098
|
+
function EE(fn, context, once) {
|
|
1099
|
+
this.fn = fn;
|
|
1100
|
+
this.context = context;
|
|
1101
|
+
this.once = once || false;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
/**
|
|
1105
|
+
* Add a listener for a given event.
|
|
1106
|
+
*
|
|
1107
|
+
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
|
|
1108
|
+
* @param {(String|Symbol)} event The event name.
|
|
1109
|
+
* @param {Function} fn The listener function.
|
|
1110
|
+
* @param {*} context The context to invoke the listener with.
|
|
1111
|
+
* @param {Boolean} once Specify if the listener is a one-time listener.
|
|
1112
|
+
* @returns {EventEmitter}
|
|
1113
|
+
* @private
|
|
1114
|
+
*/
|
|
1115
|
+
function addListener(emitter, event, fn, context, once) {
|
|
1116
|
+
if (typeof fn !== 'function') {
|
|
1117
|
+
throw new TypeError('The listener must be a function');
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
var listener = new EE(fn, context || emitter, once)
|
|
1121
|
+
, evt = prefix ? prefix + event : event;
|
|
1122
|
+
|
|
1123
|
+
if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
|
|
1124
|
+
else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
|
|
1125
|
+
else emitter._events[evt] = [emitter._events[evt], listener];
|
|
1126
|
+
|
|
1127
|
+
return emitter;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
/**
|
|
1131
|
+
* Clear event by name.
|
|
1132
|
+
*
|
|
1133
|
+
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
|
|
1134
|
+
* @param {(String|Symbol)} evt The Event name.
|
|
1135
|
+
* @private
|
|
1136
|
+
*/
|
|
1137
|
+
function clearEvent(emitter, evt) {
|
|
1138
|
+
if (--emitter._eventsCount === 0) emitter._events = new Events();
|
|
1139
|
+
else delete emitter._events[evt];
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
/**
|
|
1143
|
+
* Minimal `EventEmitter` interface that is molded against the Node.js
|
|
1144
|
+
* `EventEmitter` interface.
|
|
1145
|
+
*
|
|
1146
|
+
* @constructor
|
|
1147
|
+
* @public
|
|
1148
|
+
*/
|
|
1149
|
+
function EventEmitter() {
|
|
1150
|
+
this._events = new Events();
|
|
1151
|
+
this._eventsCount = 0;
|
|
1152
|
+
}
|
|
1153
|
+
|
|
1154
|
+
/**
|
|
1155
|
+
* Return an array listing the events for which the emitter has registered
|
|
1156
|
+
* listeners.
|
|
1157
|
+
*
|
|
1158
|
+
* @returns {Array}
|
|
1159
|
+
* @public
|
|
1160
|
+
*/
|
|
1161
|
+
EventEmitter.prototype.eventNames = function eventNames() {
|
|
1162
|
+
var names = []
|
|
1163
|
+
, events
|
|
1164
|
+
, name;
|
|
1165
|
+
|
|
1166
|
+
if (this._eventsCount === 0) return names;
|
|
1167
|
+
|
|
1168
|
+
for (name in (events = this._events)) {
|
|
1169
|
+
if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
if (Object.getOwnPropertySymbols) {
|
|
1173
|
+
return names.concat(Object.getOwnPropertySymbols(events));
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
return names;
|
|
1177
|
+
};
|
|
1178
|
+
|
|
1179
|
+
/**
|
|
1180
|
+
* Return the listeners registered for a given event.
|
|
1181
|
+
*
|
|
1182
|
+
* @param {(String|Symbol)} event The event name.
|
|
1183
|
+
* @returns {Array} The registered listeners.
|
|
1184
|
+
* @public
|
|
1185
|
+
*/
|
|
1186
|
+
EventEmitter.prototype.listeners = function listeners(event) {
|
|
1187
|
+
var evt = prefix ? prefix + event : event
|
|
1188
|
+
, handlers = this._events[evt];
|
|
1189
|
+
|
|
1190
|
+
if (!handlers) return [];
|
|
1191
|
+
if (handlers.fn) return [handlers.fn];
|
|
1192
|
+
|
|
1193
|
+
for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
|
|
1194
|
+
ee[i] = handlers[i].fn;
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
return ee;
|
|
1198
|
+
};
|
|
1199
|
+
|
|
1200
|
+
/**
|
|
1201
|
+
* Return the number of listeners listening to a given event.
|
|
1202
|
+
*
|
|
1203
|
+
* @param {(String|Symbol)} event The event name.
|
|
1204
|
+
* @returns {Number} The number of listeners.
|
|
1205
|
+
* @public
|
|
1206
|
+
*/
|
|
1207
|
+
EventEmitter.prototype.listenerCount = function listenerCount(event) {
|
|
1208
|
+
var evt = prefix ? prefix + event : event
|
|
1209
|
+
, listeners = this._events[evt];
|
|
1210
|
+
|
|
1211
|
+
if (!listeners) return 0;
|
|
1212
|
+
if (listeners.fn) return 1;
|
|
1213
|
+
return listeners.length;
|
|
1214
|
+
};
|
|
1215
|
+
|
|
1216
|
+
/**
|
|
1217
|
+
* Calls each of the listeners registered for a given event.
|
|
1218
|
+
*
|
|
1219
|
+
* @param {(String|Symbol)} event The event name.
|
|
1220
|
+
* @returns {Boolean} `true` if the event had listeners, else `false`.
|
|
1221
|
+
* @public
|
|
1222
|
+
*/
|
|
1223
|
+
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
|
|
1224
|
+
var evt = prefix ? prefix + event : event;
|
|
1225
|
+
|
|
1226
|
+
if (!this._events[evt]) return false;
|
|
1227
|
+
|
|
1228
|
+
var listeners = this._events[evt]
|
|
1229
|
+
, len = arguments.length
|
|
1230
|
+
, args
|
|
1231
|
+
, i;
|
|
1232
|
+
|
|
1233
|
+
if (listeners.fn) {
|
|
1234
|
+
if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);
|
|
1235
|
+
|
|
1236
|
+
switch (len) {
|
|
1237
|
+
case 1: return listeners.fn.call(listeners.context), true;
|
|
1238
|
+
case 2: return listeners.fn.call(listeners.context, a1), true;
|
|
1239
|
+
case 3: return listeners.fn.call(listeners.context, a1, a2), true;
|
|
1240
|
+
case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
|
|
1241
|
+
case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
|
|
1242
|
+
case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
for (i = 1, args = new Array(len -1); i < len; i++) {
|
|
1246
|
+
args[i - 1] = arguments[i];
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1249
|
+
listeners.fn.apply(listeners.context, args);
|
|
1250
|
+
} else {
|
|
1251
|
+
var length = listeners.length
|
|
1252
|
+
, j;
|
|
1253
|
+
|
|
1254
|
+
for (i = 0; i < length; i++) {
|
|
1255
|
+
if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);
|
|
1256
|
+
|
|
1257
|
+
switch (len) {
|
|
1258
|
+
case 1: listeners[i].fn.call(listeners[i].context); break;
|
|
1259
|
+
case 2: listeners[i].fn.call(listeners[i].context, a1); break;
|
|
1260
|
+
case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
|
|
1261
|
+
case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
|
|
1262
|
+
default:
|
|
1263
|
+
if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
|
|
1264
|
+
args[j - 1] = arguments[j];
|
|
1265
|
+
}
|
|
1266
|
+
|
|
1267
|
+
listeners[i].fn.apply(listeners[i].context, args);
|
|
1268
|
+
}
|
|
1269
|
+
}
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
return true;
|
|
1273
|
+
};
|
|
1274
|
+
|
|
1275
|
+
/**
|
|
1276
|
+
* Add a listener for a given event.
|
|
1277
|
+
*
|
|
1278
|
+
* @param {(String|Symbol)} event The event name.
|
|
1279
|
+
* @param {Function} fn The listener function.
|
|
1280
|
+
* @param {*} [context=this] The context to invoke the listener with.
|
|
1281
|
+
* @returns {EventEmitter} `this`.
|
|
1282
|
+
* @public
|
|
1283
|
+
*/
|
|
1284
|
+
EventEmitter.prototype.on = function on(event, fn, context) {
|
|
1285
|
+
return addListener(this, event, fn, context, false);
|
|
1286
|
+
};
|
|
1287
|
+
|
|
1288
|
+
/**
|
|
1289
|
+
* Add a one-time listener for a given event.
|
|
1290
|
+
*
|
|
1291
|
+
* @param {(String|Symbol)} event The event name.
|
|
1292
|
+
* @param {Function} fn The listener function.
|
|
1293
|
+
* @param {*} [context=this] The context to invoke the listener with.
|
|
1294
|
+
* @returns {EventEmitter} `this`.
|
|
1295
|
+
* @public
|
|
1296
|
+
*/
|
|
1297
|
+
EventEmitter.prototype.once = function once(event, fn, context) {
|
|
1298
|
+
return addListener(this, event, fn, context, true);
|
|
1299
|
+
};
|
|
1300
|
+
|
|
1301
|
+
/**
|
|
1302
|
+
* Remove the listeners of a given event.
|
|
1303
|
+
*
|
|
1304
|
+
* @param {(String|Symbol)} event The event name.
|
|
1305
|
+
* @param {Function} fn Only remove the listeners that match this function.
|
|
1306
|
+
* @param {*} context Only remove the listeners that have this context.
|
|
1307
|
+
* @param {Boolean} once Only remove one-time listeners.
|
|
1308
|
+
* @returns {EventEmitter} `this`.
|
|
1309
|
+
* @public
|
|
1310
|
+
*/
|
|
1311
|
+
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
|
|
1312
|
+
var evt = prefix ? prefix + event : event;
|
|
1313
|
+
|
|
1314
|
+
if (!this._events[evt]) return this;
|
|
1315
|
+
if (!fn) {
|
|
1316
|
+
clearEvent(this, evt);
|
|
1317
|
+
return this;
|
|
1318
|
+
}
|
|
1319
|
+
|
|
1320
|
+
var listeners = this._events[evt];
|
|
1321
|
+
|
|
1322
|
+
if (listeners.fn) {
|
|
1323
|
+
if (
|
|
1324
|
+
listeners.fn === fn &&
|
|
1325
|
+
(!once || listeners.once) &&
|
|
1326
|
+
(!context || listeners.context === context)
|
|
1327
|
+
) {
|
|
1328
|
+
clearEvent(this, evt);
|
|
1329
|
+
}
|
|
1330
|
+
} else {
|
|
1331
|
+
for (var i = 0, events = [], length = listeners.length; i < length; i++) {
|
|
1332
|
+
if (
|
|
1333
|
+
listeners[i].fn !== fn ||
|
|
1334
|
+
(once && !listeners[i].once) ||
|
|
1335
|
+
(context && listeners[i].context !== context)
|
|
1336
|
+
) {
|
|
1337
|
+
events.push(listeners[i]);
|
|
1338
|
+
}
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
//
|
|
1342
|
+
// Reset the array, or remove it completely if we have no more listeners.
|
|
1343
|
+
//
|
|
1344
|
+
if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
|
|
1345
|
+
else clearEvent(this, evt);
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
return this;
|
|
1349
|
+
};
|
|
1350
|
+
|
|
1351
|
+
/**
|
|
1352
|
+
* Remove all listeners, or those of the specified event.
|
|
1353
|
+
*
|
|
1354
|
+
* @param {(String|Symbol)} [event] The event name.
|
|
1355
|
+
* @returns {EventEmitter} `this`.
|
|
1356
|
+
* @public
|
|
1357
|
+
*/
|
|
1358
|
+
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
|
|
1359
|
+
var evt;
|
|
1360
|
+
|
|
1361
|
+
if (event) {
|
|
1362
|
+
evt = prefix ? prefix + event : event;
|
|
1363
|
+
if (this._events[evt]) clearEvent(this, evt);
|
|
1364
|
+
} else {
|
|
1365
|
+
this._events = new Events();
|
|
1366
|
+
this._eventsCount = 0;
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1369
|
+
return this;
|
|
1370
|
+
};
|
|
1371
|
+
|
|
1372
|
+
//
|
|
1373
|
+
// Alias methods names because people roll like that.
|
|
1374
|
+
//
|
|
1375
|
+
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
|
|
1376
|
+
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
|
|
1377
|
+
|
|
1378
|
+
//
|
|
1379
|
+
// Expose the prefix.
|
|
1380
|
+
//
|
|
1381
|
+
EventEmitter.prefixed = prefix;
|
|
1382
|
+
|
|
1383
|
+
//
|
|
1384
|
+
// Allow `EventEmitter` to be imported as module namespace.
|
|
1385
|
+
//
|
|
1386
|
+
EventEmitter.EventEmitter = EventEmitter;
|
|
1387
|
+
|
|
1388
|
+
//
|
|
1389
|
+
// Expose the module.
|
|
1390
|
+
//
|
|
1391
|
+
{
|
|
1392
|
+
module.exports = EventEmitter;
|
|
1393
|
+
}
|
|
1394
|
+
}(eventemitter3));
|
|
1395
|
+
|
|
1396
|
+
var __assign = (undefined && undefined.__assign) || function () {
|
|
1397
|
+
__assign = Object.assign || function(t) {
|
|
1398
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
1399
|
+
s = arguments[i];
|
|
1400
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
1401
|
+
t[p] = s[p];
|
|
1402
|
+
}
|
|
1403
|
+
return t;
|
|
1404
|
+
};
|
|
1405
|
+
return __assign.apply(this, arguments);
|
|
1406
|
+
};
|
|
1407
|
+
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1408
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
1409
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
1410
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
1411
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
1412
|
+
};
|
|
1413
|
+
var __metadata = (undefined && undefined.__metadata) || function (k, v) {
|
|
1414
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
1415
|
+
};
|
|
1416
|
+
var __values = (undefined && undefined.__values) || function(o) {
|
|
1417
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
1418
|
+
if (m) return m.call(o);
|
|
1419
|
+
if (o && typeof o.length === "number") return {
|
|
1420
|
+
next: function () {
|
|
1421
|
+
if (o && i >= o.length) o = void 0;
|
|
1422
|
+
return { value: o && o[i++], done: !o };
|
|
1423
|
+
}
|
|
1424
|
+
};
|
|
1425
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
1426
|
+
};
|
|
1427
|
+
var __read = (undefined && undefined.__read) || function (o, n) {
|
|
1428
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
1429
|
+
if (!m) return o;
|
|
1430
|
+
var i = m.call(o), r, ar = [], e;
|
|
1431
|
+
try {
|
|
1432
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
1433
|
+
}
|
|
1434
|
+
catch (error) { e = { error: error }; }
|
|
1435
|
+
finally {
|
|
1436
|
+
try {
|
|
1437
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
1438
|
+
}
|
|
1439
|
+
finally { if (e) throw e.error; }
|
|
1440
|
+
}
|
|
1441
|
+
return ar;
|
|
1442
|
+
};
|
|
1443
|
+
var NAVBAR_HEIGHT = 60;
|
|
1444
|
+
/**
|
|
1445
|
+
* This class follows a singleton pattern where you can create an instance by calling
|
|
1446
|
+
* `new PositioningService()` if you wish, but all instance methods pass through to
|
|
1447
|
+
* static methods, so there's really only one set of elements being positioned that's
|
|
1448
|
+
* shared between all instances and static usages of PositioningService.
|
|
1449
|
+
*/
|
|
1450
|
+
var PositioningService = /** @class */ (function () {
|
|
1451
|
+
function PositioningService() {
|
|
1452
|
+
}
|
|
1453
|
+
PositioningService.on = function (eventName, handler) {
|
|
1454
|
+
PositioningService.events.on(eventName, handler);
|
|
1455
|
+
};
|
|
1456
|
+
PositioningService.off = function (eventName, handler) {
|
|
1457
|
+
PositioningService.events.off(eventName, handler);
|
|
1458
|
+
};
|
|
1459
|
+
PositioningService.once = function (eventName, handler) {
|
|
1460
|
+
PositioningService.events.once(eventName, handler);
|
|
1461
|
+
};
|
|
1462
|
+
PositioningService.checkCollisions = function (element, otherElements) {
|
|
1463
|
+
var e_1, _a;
|
|
1464
|
+
var otherElementsList = otherElements || Array.from(PositioningService.elements.keys());
|
|
1465
|
+
var bounds = element.getBoundingClientRect();
|
|
1466
|
+
var collisions = [];
|
|
1467
|
+
try {
|
|
1468
|
+
for (var otherElementsList_1 = __values(otherElementsList), otherElementsList_1_1 = otherElementsList_1.next(); !otherElementsList_1_1.done; otherElementsList_1_1 = otherElementsList_1.next()) {
|
|
1469
|
+
var otherElement = otherElementsList_1_1.value;
|
|
1470
|
+
if (otherElement !== element) {
|
|
1471
|
+
var otherBounds = otherElement.getBoundingClientRect();
|
|
1472
|
+
if (otherBounds.left <= bounds.right
|
|
1473
|
+
&& otherBounds.right >= bounds.left
|
|
1474
|
+
&& otherBounds.top <= bounds.bottom
|
|
1475
|
+
&& otherBounds.bottom >= bounds.top) {
|
|
1476
|
+
collisions.push(otherElement);
|
|
1477
|
+
}
|
|
1478
|
+
}
|
|
1479
|
+
}
|
|
1480
|
+
}
|
|
1481
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
1482
|
+
finally {
|
|
1483
|
+
try {
|
|
1484
|
+
if (otherElementsList_1_1 && !otherElementsList_1_1.done && (_a = otherElementsList_1.return)) _a.call(otherElementsList_1);
|
|
1485
|
+
}
|
|
1486
|
+
finally { if (e_1) throw e_1.error; }
|
|
1487
|
+
}
|
|
1488
|
+
if (collisions.length) {
|
|
1489
|
+
PositioningService.onElementIntersection(element, collisions);
|
|
1490
|
+
}
|
|
1491
|
+
};
|
|
1492
|
+
/**
|
|
1493
|
+
* Returns `true` if the element is currently being positioned by the service
|
|
1494
|
+
* and `false` otherwise.
|
|
1495
|
+
*/
|
|
1496
|
+
PositioningService.isPositioned = function (element) {
|
|
1497
|
+
return PositioningService.elements.has(element);
|
|
1498
|
+
};
|
|
1499
|
+
/**
|
|
1500
|
+
* Returns the options currently beinng used for positioning the element,
|
|
1501
|
+
* if it is indeed being positioned by the service.
|
|
1502
|
+
*/
|
|
1503
|
+
PositioningService.getPositioningOptions = function (element) {
|
|
1504
|
+
if (PositioningService.elements.has(element)) {
|
|
1505
|
+
return PositioningService.elements.get(element);
|
|
1506
|
+
}
|
|
1507
|
+
return null;
|
|
1508
|
+
};
|
|
1509
|
+
/** PositioningService will start controlling the position of the given element. */
|
|
1510
|
+
PositioningService.position = function (element, options) {
|
|
1511
|
+
if (options === void 0) { options = {}; }
|
|
1512
|
+
var opts = __assign(__assign({}, DEFAULT_POSITIONING_OPTIONS), options);
|
|
1513
|
+
var e = element;
|
|
1514
|
+
while (e !== document.body) {
|
|
1515
|
+
e = e.parentElement;
|
|
1516
|
+
if (e.classList.contains("sps-focused-task")) {
|
|
1517
|
+
opts.scrollParent = e;
|
|
1518
|
+
if (!PositioningService.registeredScrollParents.has(e)) {
|
|
1519
|
+
PositioningService.registeredScrollParents.add(e);
|
|
1520
|
+
e.addEventListener("scroll", PositioningService.update);
|
|
1521
|
+
}
|
|
1522
|
+
break;
|
|
1523
|
+
}
|
|
1524
|
+
}
|
|
1525
|
+
// eslint-disable-next-line no-param-reassign
|
|
1526
|
+
element.style.visibility = "hidden";
|
|
1527
|
+
if (PositioningService.elements.size === 0) {
|
|
1528
|
+
window.addEventListener("resize", PositioningService.update);
|
|
1529
|
+
window.addEventListener("scroll", PositioningService.update);
|
|
1530
|
+
}
|
|
1531
|
+
if (!opts.relativeTo) {
|
|
1532
|
+
throw new Error("You must provide an element for the relativeTo option to position an element.");
|
|
1533
|
+
}
|
|
1534
|
+
PositioningService.elements.set(element, opts);
|
|
1535
|
+
utils.onNextTick(function () {
|
|
1536
|
+
PositioningService.fixElementPosition(element);
|
|
1537
|
+
PositioningService.viewportObserver.observe(element);
|
|
1538
|
+
// eslint-disable-next-line no-param-reassign
|
|
1539
|
+
element.style.visibility = "";
|
|
1540
|
+
PositioningService.checkCollisions(element);
|
|
1541
|
+
});
|
|
1542
|
+
};
|
|
1543
|
+
/** PositioningService will stop controlling the position of the given element. */
|
|
1544
|
+
PositioningService.release = function (element) {
|
|
1545
|
+
if (PositioningService.elements.has(element)) {
|
|
1546
|
+
PositioningService.clearStyles(element);
|
|
1547
|
+
var options = PositioningService.elements.get(element);
|
|
1548
|
+
if (options.scrollParent) {
|
|
1549
|
+
options.scrollParent.removeEventListener("scroll", PositioningService.update);
|
|
1550
|
+
PositioningService.registeredScrollParents.delete(options.scrollParent);
|
|
1551
|
+
}
|
|
1552
|
+
PositioningService.elements.delete(element);
|
|
1553
|
+
if (PositioningService.elements.size === 0) {
|
|
1554
|
+
window.removeEventListener("resize", PositioningService.update);
|
|
1555
|
+
window.removeEventListener("scroll", PositioningService.update);
|
|
1556
|
+
}
|
|
1557
|
+
PositioningService.viewportObserver.unobserve(element);
|
|
1558
|
+
}
|
|
1559
|
+
};
|
|
1560
|
+
PositioningService.releaseAll = function () {
|
|
1561
|
+
var e_2, _a;
|
|
1562
|
+
try {
|
|
1563
|
+
for (var _b = __values(PositioningService.elements.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
1564
|
+
var element = _c.value;
|
|
1565
|
+
PositioningService.release(element);
|
|
1566
|
+
}
|
|
1567
|
+
}
|
|
1568
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
1569
|
+
finally {
|
|
1570
|
+
try {
|
|
1571
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
1572
|
+
}
|
|
1573
|
+
finally { if (e_2) throw e_2.error; }
|
|
1574
|
+
}
|
|
1575
|
+
};
|
|
1576
|
+
/** PositioningService will refresh the positioning of the given element */
|
|
1577
|
+
PositioningService.refresh = function (element) {
|
|
1578
|
+
if (PositioningService.elements.has(element)) {
|
|
1579
|
+
PositioningService.clearStyles(element);
|
|
1580
|
+
PositioningService.fixElementPosition(element);
|
|
1581
|
+
PositioningService.checkCollisions(element);
|
|
1582
|
+
}
|
|
1583
|
+
};
|
|
1584
|
+
PositioningService.refreshAll = function () {
|
|
1585
|
+
var e_3, _a;
|
|
1586
|
+
try {
|
|
1587
|
+
for (var _b = __values(PositioningService.elements.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
1588
|
+
var element = _c.value;
|
|
1589
|
+
PositioningService.refresh(element);
|
|
1590
|
+
}
|
|
1591
|
+
}
|
|
1592
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
1593
|
+
finally {
|
|
1594
|
+
try {
|
|
1595
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
1596
|
+
}
|
|
1597
|
+
finally { if (e_3) throw e_3.error; }
|
|
1598
|
+
}
|
|
1599
|
+
};
|
|
1600
|
+
/** Update the positioning options of a currently positioned element */
|
|
1601
|
+
PositioningService.reposition = function (element, newOptions) {
|
|
1602
|
+
if (PositioningService.elements.has(element)) {
|
|
1603
|
+
var options = PositioningService.elements.get(element);
|
|
1604
|
+
PositioningService.elements.set(element, Object.assign(options, newOptions));
|
|
1605
|
+
PositioningService.refresh(element);
|
|
1606
|
+
}
|
|
1607
|
+
};
|
|
1608
|
+
PositioningService.onViewportIntersection = function (entries) {
|
|
1609
|
+
var e_4, _a;
|
|
1610
|
+
var _loop_1 = function (entry) {
|
|
1611
|
+
/*
|
|
1612
|
+
* This is how you make a copy of an IntersectionObserverEntry that
|
|
1613
|
+
* you can modify; it's read-only and incompatible with simply using
|
|
1614
|
+
* destructuring or Object.assign. Before sending it out we make the
|
|
1615
|
+
* copy read-only by passing it to Object.freeze
|
|
1616
|
+
*/
|
|
1617
|
+
var entryCopy = Object.keys(IntersectionObserverEntry.prototype).reduce(function (copy, key) {
|
|
1618
|
+
var _a;
|
|
1619
|
+
return (__assign(__assign({}, copy), (_a = {}, _a[key] = entry[key], _a)));
|
|
1620
|
+
}, {});
|
|
1621
|
+
entryCopy.rootBounds = entryCopy.rootBounds || PositioningService.getRootBounds();
|
|
1622
|
+
PositioningService.events.emit("viewportIntersection", Object.freeze(entryCopy));
|
|
1623
|
+
};
|
|
1624
|
+
try {
|
|
1625
|
+
for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
|
|
1626
|
+
var entry = entries_1_1.value;
|
|
1627
|
+
_loop_1(entry);
|
|
1628
|
+
}
|
|
1629
|
+
}
|
|
1630
|
+
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
|
1631
|
+
finally {
|
|
1632
|
+
try {
|
|
1633
|
+
if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
|
|
1634
|
+
}
|
|
1635
|
+
finally { if (e_4) throw e_4.error; }
|
|
1636
|
+
}
|
|
1637
|
+
};
|
|
1638
|
+
PositioningService.onElementIntersection = function (target, intersectingWith) {
|
|
1639
|
+
PositioningService.events.emit("elementIntersection", { target: target, intersectingWith: intersectingWith });
|
|
1640
|
+
};
|
|
1641
|
+
PositioningService.getRootBounds = function () {
|
|
1642
|
+
var rootWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
|
1643
|
+
var rootHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
|
1644
|
+
return {
|
|
1645
|
+
x: 0,
|
|
1646
|
+
y: NAVBAR_HEIGHT,
|
|
1647
|
+
left: 0,
|
|
1648
|
+
top: NAVBAR_HEIGHT,
|
|
1649
|
+
right: rootWidth,
|
|
1650
|
+
bottom: rootHeight,
|
|
1651
|
+
height: rootHeight - NAVBAR_HEIGHT,
|
|
1652
|
+
width: rootWidth,
|
|
1653
|
+
};
|
|
1654
|
+
};
|
|
1655
|
+
PositioningService.clearStyles = function (element) {
|
|
1656
|
+
Object.assign(element.style, {
|
|
1657
|
+
position: "",
|
|
1658
|
+
width: "",
|
|
1659
|
+
top: "",
|
|
1660
|
+
left: "",
|
|
1661
|
+
right: "",
|
|
1662
|
+
bottom: "",
|
|
1663
|
+
visibility: "",
|
|
1664
|
+
zIndex: "",
|
|
1665
|
+
});
|
|
1666
|
+
};
|
|
1667
|
+
PositioningService.fixElementPosition = function (element, options) {
|
|
1668
|
+
if (!this.elements.has(element)) {
|
|
1669
|
+
return;
|
|
1670
|
+
}
|
|
1671
|
+
var opts = options || this.elements.get(element);
|
|
1672
|
+
var rootBounds = this.getRootBounds();
|
|
1673
|
+
var positionedElementBounds = element.getBoundingClientRect();
|
|
1674
|
+
var relativeTargetBounds = opts.relativeTo.getBoundingClientRect();
|
|
1675
|
+
var width = (opts.useRelativeTargetWidth
|
|
1676
|
+
? relativeTargetBounds
|
|
1677
|
+
: positionedElementBounds).width;
|
|
1678
|
+
Object.assign(element.style, {
|
|
1679
|
+
minWidth: width + "px",
|
|
1680
|
+
position: "fixed",
|
|
1681
|
+
zIndex: opts.zIndex || "",
|
|
1682
|
+
});
|
|
1683
|
+
var top;
|
|
1684
|
+
var left;
|
|
1685
|
+
var positionRelativeToTarget = opts.position.split(" ");
|
|
1686
|
+
var offsetA = opts.offsets[0] || 0;
|
|
1687
|
+
var offsetB = opts.offsets[1] || 0;
|
|
1688
|
+
top = 0;
|
|
1689
|
+
left = 0;
|
|
1690
|
+
switch (positionRelativeToTarget[0]) {
|
|
1691
|
+
case "top":
|
|
1692
|
+
top = relativeTargetBounds.top - positionedElementBounds.height - offsetA;
|
|
1693
|
+
break;
|
|
1694
|
+
case "left":
|
|
1695
|
+
left = relativeTargetBounds.left - width - offsetA;
|
|
1696
|
+
break;
|
|
1697
|
+
case "right":
|
|
1698
|
+
left = relativeTargetBounds.right + offsetA;
|
|
1699
|
+
break;
|
|
1700
|
+
case "bottom":
|
|
1701
|
+
top = relativeTargetBounds.bottom + offsetA;
|
|
1702
|
+
break;
|
|
1703
|
+
default:
|
|
1704
|
+
throw new Error(opts.position + " is not a valid position");
|
|
1705
|
+
}
|
|
1706
|
+
switch (positionRelativeToTarget[1]) {
|
|
1707
|
+
case "left":
|
|
1708
|
+
left = relativeTargetBounds.left - offsetB;
|
|
1709
|
+
break;
|
|
1710
|
+
case "top":
|
|
1711
|
+
top = relativeTargetBounds.top - offsetB;
|
|
1712
|
+
break;
|
|
1713
|
+
case "middle":
|
|
1714
|
+
if (positionRelativeToTarget[0] === "top"
|
|
1715
|
+
|| positionRelativeToTarget[0] === "bottom") {
|
|
1716
|
+
left = relativeTargetBounds.left
|
|
1717
|
+
+ (relativeTargetBounds.width / 2)
|
|
1718
|
+
- (width / 2)
|
|
1719
|
+
+ offsetB;
|
|
1720
|
+
}
|
|
1721
|
+
else if (positionRelativeToTarget[0] === "left"
|
|
1722
|
+
|| positionRelativeToTarget[0] === "right") {
|
|
1723
|
+
top = relativeTargetBounds.top
|
|
1724
|
+
+ (relativeTargetBounds.height / 2)
|
|
1725
|
+
- (positionedElementBounds.height / 2)
|
|
1726
|
+
+ offsetB;
|
|
1727
|
+
}
|
|
1728
|
+
break;
|
|
1729
|
+
case "bottom":
|
|
1730
|
+
top = relativeTargetBounds.bottom - positionedElementBounds.height + offsetB;
|
|
1731
|
+
break;
|
|
1732
|
+
case "right":
|
|
1733
|
+
left = relativeTargetBounds.right - width + offsetB;
|
|
1734
|
+
break;
|
|
1735
|
+
default:
|
|
1736
|
+
throw new Error(opts.position + " is not a valid position");
|
|
1737
|
+
}
|
|
1738
|
+
var bottom = top + positionedElementBounds.height;
|
|
1739
|
+
var right = left + positionedElementBounds.width;
|
|
1740
|
+
var topPx = Math.round(top) + "px";
|
|
1741
|
+
var bottomPx = Math.round(rootBounds.bottom - bottom) + "px";
|
|
1742
|
+
var leftPx = Math.round(left) + "px";
|
|
1743
|
+
var rightPx = Math.round(rootBounds.right - right) + "px";
|
|
1744
|
+
switch (opts.anchor) {
|
|
1745
|
+
case exports.PositionAnchor.TOP_LEFT:
|
|
1746
|
+
Object.assign(element.style, {
|
|
1747
|
+
top: topPx,
|
|
1748
|
+
bottom: "auto",
|
|
1749
|
+
left: leftPx,
|
|
1750
|
+
right: "auto",
|
|
1751
|
+
});
|
|
1752
|
+
break;
|
|
1753
|
+
case exports.PositionAnchor.TOP_RIGHT:
|
|
1754
|
+
Object.assign(element.style, {
|
|
1755
|
+
top: topPx,
|
|
1756
|
+
bottom: "auto",
|
|
1757
|
+
left: "auto",
|
|
1758
|
+
right: rightPx,
|
|
1759
|
+
});
|
|
1760
|
+
break;
|
|
1761
|
+
case exports.PositionAnchor.BOTTOM_LEFT:
|
|
1762
|
+
Object.assign(element.style, {
|
|
1763
|
+
top: "auto",
|
|
1764
|
+
bottom: bottomPx,
|
|
1765
|
+
left: leftPx,
|
|
1766
|
+
right: "auto",
|
|
1767
|
+
});
|
|
1768
|
+
break;
|
|
1769
|
+
case exports.PositionAnchor.BOTTOM_RIGHT:
|
|
1770
|
+
Object.assign(element.style, {
|
|
1771
|
+
top: "auto",
|
|
1772
|
+
bottom: bottomPx,
|
|
1773
|
+
left: "auto",
|
|
1774
|
+
right: rightPx,
|
|
1775
|
+
});
|
|
1776
|
+
break;
|
|
1777
|
+
// no default
|
|
1778
|
+
}
|
|
1779
|
+
};
|
|
1780
|
+
PositioningService.update = function (event) {
|
|
1781
|
+
var e_5, _a;
|
|
1782
|
+
var elements = PositioningService.elements.entries();
|
|
1783
|
+
var updatedElements = [];
|
|
1784
|
+
try {
|
|
1785
|
+
for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
|
|
1786
|
+
var _b = __read(elements_1_1.value, 2), element = _b[0], options = _b[1];
|
|
1787
|
+
if (!event
|
|
1788
|
+
|| event.target === document
|
|
1789
|
+
|| event.target === options.scrollParent
|
|
1790
|
+
|| event.target === window) {
|
|
1791
|
+
PositioningService.fixElementPosition(element, options);
|
|
1792
|
+
PositioningService.checkCollisions(element, updatedElements);
|
|
1793
|
+
updatedElements.push(element);
|
|
1794
|
+
}
|
|
1795
|
+
}
|
|
1796
|
+
}
|
|
1797
|
+
catch (e_5_1) { e_5 = { error: e_5_1 }; }
|
|
1798
|
+
finally {
|
|
1799
|
+
try {
|
|
1800
|
+
if (elements_1_1 && !elements_1_1.done && (_a = elements_1.return)) _a.call(elements_1);
|
|
1801
|
+
}
|
|
1802
|
+
finally { if (e_5) throw e_5.error; }
|
|
1803
|
+
}
|
|
1804
|
+
};
|
|
1805
|
+
/* eslint class-methods-use-this: "off" */
|
|
1806
|
+
PositioningService.prototype.on = function (eventName, handler) {
|
|
1807
|
+
PositioningService.on(eventName, handler);
|
|
1808
|
+
};
|
|
1809
|
+
PositioningService.prototype.off = function (eventName, handler) {
|
|
1810
|
+
PositioningService.off(eventName, handler);
|
|
1811
|
+
};
|
|
1812
|
+
PositioningService.prototype.once = function (eventName, handler) {
|
|
1813
|
+
PositioningService.once(eventName, handler);
|
|
1814
|
+
};
|
|
1815
|
+
PositioningService.prototype.isPositioned = function (element) {
|
|
1816
|
+
return PositioningService.isPositioned(element);
|
|
1817
|
+
};
|
|
1818
|
+
PositioningService.prototype.getPositioningOptions = function (element) {
|
|
1819
|
+
return PositioningService.getPositioningOptions(element);
|
|
1820
|
+
};
|
|
1821
|
+
PositioningService.prototype.position = function (element, options) {
|
|
1822
|
+
if (options === void 0) { options = {}; }
|
|
1823
|
+
PositioningService.position(element, options);
|
|
1824
|
+
};
|
|
1825
|
+
PositioningService.prototype.release = function (element) {
|
|
1826
|
+
PositioningService.release(element);
|
|
1827
|
+
};
|
|
1828
|
+
PositioningService.prototype.releaseAll = function () {
|
|
1829
|
+
PositioningService.releaseAll();
|
|
1830
|
+
};
|
|
1831
|
+
PositioningService.prototype.refresh = function (element) {
|
|
1832
|
+
PositioningService.refresh(element);
|
|
1833
|
+
};
|
|
1834
|
+
PositioningService.prototype.refreshAll = function () {
|
|
1835
|
+
PositioningService.refreshAll();
|
|
1836
|
+
};
|
|
1837
|
+
PositioningService.prototype.reposition = function (element, newOptions) {
|
|
1838
|
+
PositioningService.reposition(element, newOptions);
|
|
1839
|
+
};
|
|
1840
|
+
PositioningService.elements = new Map();
|
|
1841
|
+
PositioningService.registeredScrollParents = new Set();
|
|
1842
|
+
PositioningService.events = new eventemitter3.exports.EventEmitter();
|
|
1843
|
+
PositioningService.viewportObserver = new IntersectionObserver(PositioningService.onViewportIntersection, {
|
|
1844
|
+
rootMargin: "-" + NAVBAR_HEIGHT + "px 0px 0px",
|
|
1845
|
+
threshold: 1,
|
|
1846
|
+
});
|
|
1847
|
+
__decorate([
|
|
1848
|
+
utils.lockedToAnimationFrames,
|
|
1849
|
+
__metadata("design:type", Function),
|
|
1850
|
+
__metadata("design:paramtypes", [Event]),
|
|
1851
|
+
__metadata("design:returntype", void 0)
|
|
1852
|
+
], PositioningService, "update", null);
|
|
1853
|
+
return PositioningService;
|
|
1854
|
+
}());
|
|
1855
|
+
|
|
1856
|
+
exports.DEFAULT_POSITIONING_OPTIONS = DEFAULT_POSITIONING_OPTIONS;
|
|
1857
|
+
exports.PositioningService = PositioningService;
|