@lrnwebcomponents/absolute-position-behavior
Advanced tools
@lrnwebcomponents/absolute-position-behavior - npm Package Compare versions
Comparing version 3.0.7 to 4.0.0
@@ -13,111 +13,113 @@ /** | ||
| return class extends SuperClass { | ||
| //styles function | ||
| static get styles() { | ||
| return [ | ||
| css` | ||
| :host { | ||
| display: inline-block; | ||
| z-index: 99999999999; | ||
| position: absolute; | ||
| } | ||
| //styles function | ||
| static get styles() { | ||
| return [ | ||
| css` | ||
| :host { | ||
| display: inline-block; | ||
| z-index: 99999999999; | ||
| position: absolute; | ||
| } | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
| ` | ||
| ]; | ||
| } | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
| `, | ||
| ]; | ||
| } | ||
| // render function | ||
| render() { | ||
| return html` | ||
| // render function | ||
| render() { | ||
| return html` <slot></slot>`; | ||
| } | ||
| <slot></slot>`; | ||
| } | ||
| // properties available to the custom element for data binding | ||
| static get properties() { | ||
| return { | ||
| ...super.properties, | ||
| // properties available to the custom element for data binding | ||
| static get properties() { | ||
| return { | ||
| ...super.properties, | ||
| /** | ||
| * Element is positioned from connected to disconnected? | ||
| * Otherwise setPosition and unsetPosition must be called manually. | ||
| */ | ||
| "auto": { | ||
| "type": Boolean, | ||
| "attribute": "auto" | ||
| }, | ||
| /** | ||
| * If true, no parts of the tooltip will ever be shown offscreen. | ||
| */ | ||
| "fitToVisibleBounds": { | ||
| "type": Boolean, | ||
| "attribute": "fit-to-visible-bounds" | ||
| }, | ||
| /** | ||
| * If true, no parts of the tooltip will ever be shown offscreen. | ||
| */ | ||
| "hidden": { | ||
| "type": Boolean, | ||
| "reflect": true, | ||
| "attribute": "hidden" | ||
| }, | ||
| /** | ||
| * The id of the element that the tooltip is anchored to. This element | ||
| * must be a sibling of the tooltip. If this property is not set, | ||
| * then the tooltip will be centered to the parent node containing it. | ||
| */ | ||
| "for": { | ||
| "type": String, | ||
| "attribute": "for", | ||
| "reflect": true | ||
| }, | ||
| /** | ||
| * The spacing between the top of the tooltip and the element it is | ||
| * anchored to. | ||
| */ | ||
| "offset": { | ||
| "type": Number, | ||
| "attribute": "offset" | ||
| }, | ||
| /** | ||
| * Positions the tooltip to the top, right, bottom, left of its content. | ||
| */ | ||
| "position": { | ||
| "type": String, | ||
| "attribute": "position", | ||
| "reflect": true | ||
| }, | ||
| /** | ||
| * Aligns at the start, or end fo target. Default is centered. | ||
| */ | ||
| "positionAlign": { | ||
| "type": String, | ||
| "attribute": "position-align", | ||
| "reflect": true | ||
| }, | ||
| "justify": { | ||
| "type": Boolean, | ||
| "reflect": true, | ||
| "attribute": "justify" | ||
| }, | ||
| /** | ||
| * The actual target element | ||
| */ | ||
| "target": { | ||
| "type": Object | ||
| }, | ||
| /** | ||
| * The element's style | ||
| */ | ||
| "__positions": { | ||
| "type": Object | ||
| } | ||
| } | ||
| ; | ||
| } | ||
| /** | ||
| * Element is positioned from connected to disconnected? | ||
| * Otherwise setPosition and unsetPosition must be called manually. | ||
| */ | ||
| auto: { | ||
| type: Boolean, | ||
| attribute: "auto", | ||
| }, | ||
| /** | ||
| * If true, no parts of the tooltip will ever be shown offscreen. | ||
| */ | ||
| fitToVisibleBounds: { | ||
| type: Boolean, | ||
| attribute: "fit-to-visible-bounds", | ||
| }, | ||
| /** | ||
| * If true, no parts of the tooltip will ever be shown offscreen. | ||
| */ | ||
| hidden: { | ||
| type: Boolean, | ||
| reflect: true, | ||
| attribute: "hidden", | ||
| }, | ||
| /** | ||
| * The id of the element that the tooltip is anchored to. This element | ||
| * must be a sibling of the tooltip. If this property is not set, | ||
| * then the tooltip will be centered to the parent node containing it. | ||
| */ | ||
| for: { | ||
| type: String, | ||
| attribute: "for", | ||
| reflect: true, | ||
| }, | ||
| /** | ||
| * The spacing between the top of the tooltip and the element it is | ||
| * anchored to. | ||
| */ | ||
| offset: { | ||
| type: Number, | ||
| attribute: "offset", | ||
| }, | ||
| /** | ||
| * Stays on screen while target is on screen | ||
| */ | ||
| sticky: { | ||
| type: Boolean, | ||
| attribute: "sticky", | ||
| reflect: true, | ||
| }, | ||
| /** | ||
| * Positions the tooltip to the top, right, bottom, left of its content. | ||
| */ | ||
| position: { | ||
| type: String, | ||
| attribute: "position", | ||
| reflect: true, | ||
| }, | ||
| /** | ||
| * Aligns at the start, or end fo target. Default is centered. | ||
| */ | ||
| positionAlign: { | ||
| type: String, | ||
| attribute: "position-align", | ||
| reflect: true, | ||
| }, | ||
| justify: { | ||
| type: Boolean, | ||
| reflect: true, | ||
| attribute: "justify", | ||
| }, | ||
| /** | ||
| * The actual target element | ||
| */ | ||
| target: { | ||
| type: Object, | ||
| }, | ||
| /** | ||
| * The element's style | ||
| */ | ||
| __positions: { | ||
| type: Object, | ||
| }, | ||
| }; | ||
| } | ||
@@ -140,2 +142,3 @@ /** | ||
| this.target = null; | ||
| this.sticky = false; | ||
| this.hidden = false; | ||
@@ -147,2 +150,3 @@ this.__positions = {}; | ||
| updated(changedProperties) { | ||
| let updatePosition = false; | ||
| if (this.shadowRoot && !this.hidden) { | ||
@@ -152,10 +156,19 @@ changedProperties.forEach((oldValue, propName) => { | ||
| if (propName === "auto" && !this.auto) this.unsetPosition(); | ||
| if (propName === "fitToVisibleBounds") this.updatePosition(); | ||
| if (propName === "for") this.updatePosition(); | ||
| if (propName === "offset") this.updatePosition(); | ||
| if (propName === "position") this.updatePosition(); | ||
| if (propName === "positionAlign") this.updatePosition(); | ||
| if (propName === "target") this.updatePosition(); | ||
| if (propName === "hidden") this.updatePosition(); | ||
| if ( | ||
| [ | ||
| "fitToVisibleBounds", | ||
| "for", | ||
| "offset", | ||
| "position", | ||
| "justify", | ||
| "positionAlign", | ||
| "target", | ||
| "hidden", | ||
| "sticky", | ||
| ].includes(propName) && | ||
| this[propName] !== oldValue | ||
| ) | ||
| updatePosition = true; | ||
| }); | ||
| if (updatePosition) this.updatePosition(); | ||
| } | ||
@@ -191,3 +204,8 @@ } | ||
| updatePosition() { | ||
| if (this.__observe === true) { | ||
| if (!this.hidden && this.auto && this.__observe == false) { | ||
| window.AbsolutePositionStateManager.requestAvailability().loadElement( | ||
| this | ||
| ); | ||
| } | ||
| if (!this.auto || this.__observe === true) { | ||
| window.AbsolutePositionStateManager.requestAvailability().positionElement( | ||
@@ -194,0 +212,0 @@ this |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit")):"function"==typeof define&&define.amd?define(["exports","lit"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).AbsolutePositionBehavior={},t.lit)}(this,(function(t,e){"use strict";function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function o(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?n(Object(o),!0).forEach((function(e){u(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function s(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t}function u(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function f(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function p(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=l(t);if(e){var i=l(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return f(this,n)}}function d(t,e,n){return(d="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var o=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=l(t)););return t}(t,e);if(o){var i=Object.getOwnPropertyDescriptor(o,e);return i.get?i.get.call(n):i.value}})(t,e,n||t)}function h(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){if(!window.AbsolutePositionStateManager.instance){window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager");var t=window.AbsolutePositionStateManager.instance;document.body.appendChild(t)}return window.AbsolutePositionStateManager.instance};var b,y,v=function(t){a(n,t);var e=p(n);function n(){var t;return i(this,n),(t=e.call(this)).elements=[],t.__timeout=!1,t.__observer=new MutationObserver((function(e){return t.checkMutations(e)})),t}return s(n,[{key:"loadElement",value:function(t){this.elements.length<1&&(this.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.updateElements(),document.addEventListener("load",this.updateElements),window.addEventListener("resize",this._handleResize)),this.elements.push(t),t.style.top=0,t.style.left=0,this.positionElement(t)}},{key:"unloadElement",value:function(t){this.elements.filter((function(e){return e===t})),this.elements.length<1&&this.removeEventListeners()}},{key:"_handleResize",value:function(){this.__timeout&&clearTimeout(this.__timeout),this.__timeout=setTimeout(window.AbsolutePositionStateManager.instance.updateElements(),250)}},{key:"checkMutations",value:function(t){var e=this,n=!1;t.forEach((function(t){n||(n=n||!("attributes"===t.type&&"style"===t.attributeName&&e.elements.includes(t.target)))})),n&&this.updateElements()}},{key:"findTarget",value:function(t){for(var e="#"+t.for,n=t.target,o=t;t.for&&!n&&o&&o.parentNode&&o!==document;)n=(o=o.parentNode)?o.querySelector(e):void 0,11===o.nodeType&&(o=o.host),n=!n&&o?o.querySelector(e):n;return n}},{key:"removeEventListeners",value:function(){this.__observer&&this.__observer.disconnect&&this.__observer.disconnect(),document.removeEventListener("load",this.updateElements),window.removeEventListener("resize",this._handleResize)}},{key:"updateElements",value:function(){var t=this;this.elements.forEach((function(e){return t.positionElement(e)}))}},{key:"_getParentNode",value:function(t){var e=t.parentNode;return null!=e&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&(e=e.host),e}},{key:"positionElement",value:function(t){t.position||(t.position="bottom");var e=this.findTarget(t),n=t.offsetParent,o=!e||e.getBoundingClientRect();if(e&&n){t.justify&&(t.style.width="".concat(o.width,"px"));var i=parseFloat(t.offset),r=document.body.getBoundingClientRect(),s=n.getBoundingClientRect(),u=t.getBoundingClientRect(),a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"!==e&&"right"!==e},l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"===e||"top"===e},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a(t.position),n=function(t){return parseFloat(t.replace("px",""))},i=e?n(t.style.left)-u.left:n(t.style.top)-u.top,s=e?"left":"top",l=function(t){return e?t.width:t.height},c=i+l(r)-l(u),f=i;return"end"===t.positionAlign?f+=o[s]-l(u)+l(o):"start"===t.positionAlign?f+=o[s]:f+=o[s]-l(u)/2+l(o)/2,t.fitToVisibleBounds?Math.max(i,Math.min(c,f))+"px":f+"px"},f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return parseFloat(t.replace("px",""))},r=a(e)?n(t.style.top)-u.top:n(t.style.left)-u.left,s="visible"==window.getComputedStyle(t,null).overflowY?Math.max(u.height,t.scrollHeight):u.height,l="visible"==window.getComputedStyle(t,null).overflowX?Math.max(u.width,t.scrollWidth):u.width;return"top"===e?o.top+r-s-i+"px":"left"===e?o.left+r-l-i+"px":o[e]+r+i+"px"},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return a(e)?u.height+i:u.width+i};return l(e)?o[e]-r[e]>n:r[e]-o[e]>n},d=!1!==t.fitToVisibleBounds&&!p(t.position),h={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};t.style.position="absolute",d&&p(h[t.position][0])?t.position=h[t.position][0]:d&&p(h[t.position][1])?t.position=h[t.position][1]:d&&p(h[t.position][2])?t.position=h[t.position][2]:(t.style.top=a(t.position)?f():c(),t.style.left=a(t.position)?c():f(),t.__positions={self:u,parent:s,target:o})}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),d(l(n.prototype),"disconnectedCallback",this).call(this)}}],[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{elements:{type:Array},__observer:{type:Object},__timeout:{type:Object}}}}]),n}(e.LitElement);window.customElements.define(v.tag,v);var g=function(t){return function(t){a(r,t);var n=p(r);function r(){var t;return i(this,r),(t=n.call(this)).auto=!1,t.fitToVisibleBounds=!1,t.for=null,t.offset=0,t.position="bottom",t.target=null,t.__positions={},t.__observe=!1,t.__manager=window.AbsolutePositionStateManager.requestAvailability(),t}return s(r,[{key:"render",value:function(){return e.html(b||(b=h(["\n\n<slot></slot>"])))}},{key:"updated",value:function(t){var e=this;t.forEach((function(t,n){"auto"===n&&e.auto&&e.setPosition(),"auto"!==n||e.auto||e.unsetPosition(),"fitToVisibleBounds"===n&&e.updatePosition(),"for"===n&&e.updatePosition(),"offset"===n&&e.updatePosition(),"position"===n&&e.updatePosition(),"justify"===n&&e.updatePosition(),"positionAlign"===n&&e.updatePosition(),"target"===n&&e.updatePosition(),"hidden"===n&&e.updatePosition()}))}},{key:"setPosition",value:function(){this.__observe=!0,this.__manager.loadElement(this)}},{key:"unsetPosition",value:function(){this.__observe=!1,this.__manager.unloadElement(this)}},{key:"updatePosition",value:function(){!0===this.__observe&&this.__manager.positionElement(this)}},{key:"disconnectedCallback",value:function(){this.unsetPosition(),d(l(r.prototype),"disconnectedCallback",this).call(this)}}],[{key:"styles",get:function(){return[e.css(y||(y=h(["\n:host {\n display: inline-block;\n z-index: 99999999999;\n position: absolute;\n}\n\n:host([hidden]) {\n display: none;\n}\n "])))]}},{key:"properties",get:function(){return o(o({},d(l(r),"properties",this)),{},{auto:{type:Boolean,attribute:"auto"},fitToVisibleBounds:{type:Boolean,attribute:"fit-to-visible-bounds"},hidden:{type:Boolean,reflect:!0,attribute:"hidden"},for:{type:String,attribute:"for",reflect:!0},offset:{type:Number,attribute:"offset"},position:{type:String,attribute:"position",reflect:!0},positionAlign:{type:String,attribute:"position-align",reflect:!0},justify:{type:Boolean,reflect:!0,attribute:"justify"},target:{type:Object},__positions:{type:Object}})}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),r}(t)},m=function(t){a(n,t);var e=p(n);function n(){return i(this,n),e.apply(this,arguments)}return n}(g(e.LitElement));window.customElements.define(m.tag,m),t.AbsolutePositionBehavior=m,t.AbsolutePositionBehaviorClass=g,Object.defineProperty(t,"__esModule",{value:!0})})); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit")):"function"==typeof define&&define.amd?define(["exports","lit"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).AbsolutePositionBehavior={},t.lit)}(this,(function(t,e){"use strict";function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function o(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?n(Object(o),!0).forEach((function(e){l(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function s(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t}function l(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function f(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function p(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=a(t);if(e){var i=a(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return f(this,n)}}function h(t,e,n){return(h="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var o=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=a(t)););return t}(t,e);if(o){var i=Object.getOwnPropertyDescriptor(o,e);return i.get?i.get.call(n):i.value}})(t,e,n||t)}function d(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){if(!window.AbsolutePositionStateManager.instance){window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager");var t=window.AbsolutePositionStateManager.instance;document.body.appendChild(t)}return window.AbsolutePositionStateManager.instance};var y,b,v=function(t){u(n,t);var e=p(n);function n(){var t;return i(this,n),(t=e.call(this)).elements=[],t.__timeout=!1,t.__observer=new MutationObserver((function(e){return t.checkMutations(e)})),t}return s(n,[{key:"loadElement",value:function(t){this.elements.length<1&&(this.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.updateElements(),document.addEventListener("load",this.updateElements),window.addEventListener("resize",this._handleResize)),this.elements.push(t),t.style.top=0,t.style.left=0,this.positionElement(t)}},{key:"unloadElement",value:function(t){this.elements.filter((function(e){return e===t})),this.elements.length<1&&this.removeEventListeners()}},{key:"_handleScroll",value:function(){this.__timeout2&&clearTimeout(this.__timeout2),this.__timeout2=setTimeout(window.AbsolutePositionStateManager.instance.updateStickyElements(),1e3)}},{key:"_handleResize",value:function(){this.__timeout&&clearTimeout(this.__timeout),this.__timeout=setTimeout(window.AbsolutePositionStateManager.instance.updateElements(),250)}},{key:"checkMutations",value:function(t){var e=this,n=!1;t.forEach((function(t){n||(n=n||!("attributes"===t.type&&"style"===t.attributeName&&e.elements.includes(t.target)))})),n&&this.updateElements()}},{key:"findTarget",value:function(t){for(var e="#"+t.for,n=t.target,o=t;t.for&&!n&&o&&o.parentNode&&o!==document;)n=(o=o.parentNode)?o.querySelector(e):void 0,11===o.nodeType&&(o=o.host),n=!n&&o?o.querySelector(e):n;return n}},{key:"removeEventListeners",value:function(){this.__observer&&this.__observer.disconnect&&this.__observer.disconnect(),document.removeEventListener("load",this.updateElements),window.removeEventListener("resize",this._handleResize),this.__watchSticky&&window.removeEventListener("scroll",this._handleScroll)}},{key:"updateElements",value:function(){var t=this;this.elements.forEach((function(e){return t.positionElement(e)})),this.loadSticky()}},{key:"updateStickyElements",value:function(){var t=this;this.elements.forEach((function(e){e.sticky&&t.positionElement(e)}))}},{key:"loadSticky",value:function(){!this.__watchSticky&&this.elements.filter((function(t){return t.sticky})).length>0?(this.__watchSticky=!0,window.addEventListener("scroll",this._handleScroll)):this.__watchSticky&&this.elements.filter((function(t){return t.sticky})).length<1&&(window.removeEventListener("scroll",this._handleScroll),this.__watchSticky=!1)}},{key:"_getParentNode",value:function(t){var e=t.parentNode;return null!=e&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&(e=e.host),e}},{key:"positionElement",value:function(t){t.position||(t.position="bottom"),t.style.top||(t.style.top="0px"),t.style.left||(t.style.left="0px");var e=this.findTarget(t),n=t.offsetParent,o=!e||e.getBoundingClientRect();if(e&&n){t.justify&&(t.style.width="".concat(o.width,"px"));var i=parseFloat(t.offset),r=document.body.getBoundingClientRect(),s=n.getBoundingClientRect(),l=t.getBoundingClientRect(),u=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"!==e&&"right"!==e},a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position;return"left"===e||"top"===e},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:u(t.position),n=function(t){return parseFloat(t.replace("px",""))},i=e?n(t.style.left)-l.left:n(t.style.top)-l.top,s=e?"left":"top",a=function(t){return e?t.width:t.height},c=i+a(r)-a(l),f=i;return"end"===t.positionAlign?f+=o[s]-a(l)+a(o):"start"===t.positionAlign?f+=o[s]:f+=o[s]-a(l)/2+a(o)/2,t.fitToVisibleBounds?Math.max(i,Math.min(c,f)):f},f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return parseFloat(t.replace("px",""))},r=u(e)?n(t.style.top)-l.top:n(t.style.left)-l.left,s="visible"==window.getComputedStyle(t,null).overflowY?Math.max(l.height,t.scrollHeight):l.height,a="visible"==window.getComputedStyle(t,null).overflowX?Math.max(l.width,t.scrollWidth):l.width;return"top"===e?o.top+r-s-i:"left"===e?o.left+r-a-i:o[e]+r+i},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.position,n=function(t){return u(e)?l.height+i:l.width+i};return a(e)?o[e]-r[e]>n:r[e]-o[e]>n},h=!1!==t.fitToVisibleBounds&&!p(t.position),d={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};t.style.position="absolute",h&&p(d[t.position][0])?t.position=d[t.position][0]:h&&p(d[t.position][1])?t.position=d[t.position][1]:h&&p(d[t.position][2])&&(t.position=d[t.position][2]);var y=u(t.position)?f():c(),b=u(t.position)?c():f();if(t.sticky){var v=window.pageYOffset||(document.documentElement||document.body.parentNode||document.body).scrollTop,g=window.innerHeight,m=0===l.height&&t.children&&t.children[0]?t.children[0].offsetHeight:l.height,w=o.top-l.height<0&&o.top+o.height>20+m,_=o.top+o.height+l.height>g&&o.top<g-m;"top"===t.position&&w&&(y=v-n.offsetTop+(m-l.height)),"bottom"===t.position&&_&&(y=v+g-n.offsetTop-m)}t.style.top=y+"px",t.style.left=b+"px",t.__positions={self:l,parent:s,target:o}}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),h(a(n.prototype),"disconnectedCallback",this).call(this)}}],[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{elements:{type:Array},__observer:{type:Object},__timeout:{type:Object},__timeout2:{type:Object}}}}]),n}(e.LitElement);window.customElements.define(v.tag,v);var g=function(t){return function(t){u(r,t);var n=p(r);function r(){var t;return i(this,r),(t=n.call(this)).auto=!1,t.fitToVisibleBounds=!1,t.for=null,t.offset=0,t.position="bottom",t.target=null,t.sticky=!1,t.hidden=!1,t.__positions={},t.__observe=!1,t}return s(r,[{key:"render",value:function(){return e.html(y||(y=d(["\n\n<slot></slot>"])))}},{key:"updated",value:function(t){var e=this,n=!1;this.shadowRoot&&!this.hidden&&(t.forEach((function(t,o){"auto"===o&&e.auto&&e.setPosition(),"auto"!==o||e.auto||e.unsetPosition(),["fitToVisibleBounds","for","offset","position","justify","positionAlign","target","hidden","sticky"].includes(o)&&e[o]!==t&&(n=!0)})),n&&this.updatePosition())}},{key:"setPosition",value:function(){this.__observe=!0,window.AbsolutePositionStateManager.requestAvailability().loadElement(this)}},{key:"unsetPosition",value:function(){this.__observe=!1,window.AbsolutePositionStateManager.requestAvailability().unloadElement(this)}},{key:"updatePosition",value:function(){!this.hidden&&this.auto&&0==this.__observe&&window.AbsolutePositionStateManager.requestAvailability().loadElement(this),this.auto&&!0!==this.__observe||window.AbsolutePositionStateManager.requestAvailability().positionElement(this)}},{key:"disconnectedCallback",value:function(){this.unsetPosition(),h(a(r.prototype),"disconnectedCallback",this).call(this)}}],[{key:"styles",get:function(){return[e.css(b||(b=d(["\n:host {\n display: inline-block;\n z-index: 99999999999;\n position: absolute;\n}\n\n:host([hidden]) {\n display: none;\n}\n "])))]}},{key:"properties",get:function(){return o(o({},h(a(r),"properties",this)),{},{auto:{type:Boolean,attribute:"auto"},fitToVisibleBounds:{type:Boolean,attribute:"fit-to-visible-bounds"},hidden:{type:Boolean,reflect:!0,attribute:"hidden"},for:{type:String,attribute:"for",reflect:!0},offset:{type:Number,attribute:"offset"},sticky:{type:Boolean,attribute:"sticky",reflect:!0},position:{type:String,attribute:"position",reflect:!0},positionAlign:{type:String,attribute:"position-align",reflect:!0},justify:{type:Boolean,reflect:!0,attribute:"justify"},target:{type:Object},__positions:{type:Object}})}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),r}(t)},m=function(t){u(n,t);var e=p(n);function n(){return i(this,n),e.apply(this,arguments)}return n}(g(e.LitElement));window.customElements.define(m.tag,m),t.AbsolutePositionBehavior=m,t.AbsolutePositionBehaviorClass=g,Object.defineProperty(t,"__esModule",{value:!0})})); |
@@ -19,3 +19,3 @@ { | ||
| "end": { | ||
| "line": 201, | ||
| "line": 225, | ||
| "column": 1 | ||
@@ -49,7 +49,7 @@ } | ||
| "start": { | ||
| "line": 75, | ||
| "line": 81, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 92, | ||
| "line": 98, | ||
| "column": 3 | ||
@@ -74,7 +74,7 @@ } | ||
| "start": { | ||
| "line": 98, | ||
| "line": 104, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 101, | ||
| "line": 107, | ||
| "column": 3 | ||
@@ -94,2 +94,22 @@ } | ||
| { | ||
| "name": "_handleScroll", | ||
| "description": "handles resize event", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "start": { | ||
| "line": 112, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 118, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| } | ||
| }, | ||
| { | ||
| "name": "_handleResize", | ||
@@ -100,7 +120,7 @@ "description": "handles resize event", | ||
| "start": { | ||
| "line": 106, | ||
| "line": 123, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 112, | ||
| "line": 129, | ||
| "column": 3 | ||
@@ -121,7 +141,7 @@ } | ||
| "start": { | ||
| "line": 123, | ||
| "line": 140, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 137, | ||
| "line": 154, | ||
| "column": 3 | ||
@@ -146,7 +166,7 @@ } | ||
| "start": { | ||
| "line": 151, | ||
| "line": 168, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 169, | ||
| "line": 186, | ||
| "column": 3 | ||
@@ -172,7 +192,7 @@ } | ||
| "start": { | ||
| "line": 175, | ||
| "line": 192, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 180, | ||
| "line": 199, | ||
| "column": 3 | ||
@@ -193,7 +213,7 @@ } | ||
| "start": { | ||
| "line": 186, | ||
| "line": 205, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 188, | ||
| "line": 208, | ||
| "column": 3 | ||
@@ -209,2 +229,42 @@ } | ||
| { | ||
| "name": "updateStickyElements", | ||
| "description": "Updates position for all elements on page.", | ||
| "privacy": "public", | ||
| "sourceRange": { | ||
| "start": { | ||
| "line": 213, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 217, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| } | ||
| }, | ||
| { | ||
| "name": "loadSticky", | ||
| "description": "Only listen for scrolling if there is a sticky element", | ||
| "privacy": "public", | ||
| "sourceRange": { | ||
| "start": { | ||
| "line": 223, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 238, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| } | ||
| }, | ||
| { | ||
| "name": "_getParentNode", | ||
@@ -215,7 +275,7 @@ "description": "", | ||
| "start": { | ||
| "line": 190, | ||
| "line": 240, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 200, | ||
| "line": 250, | ||
| "column": 3 | ||
@@ -237,7 +297,7 @@ } | ||
| "start": { | ||
| "line": 207, | ||
| "line": 257, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 304, | ||
| "line": 383, | ||
| "column": 3 | ||
@@ -262,7 +322,7 @@ } | ||
| "start": { | ||
| "line": 309, | ||
| "line": 388, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 312, | ||
| "line": 391, | ||
| "column": 3 | ||
@@ -287,3 +347,3 @@ } | ||
| "end": { | ||
| "line": 313, | ||
| "line": 392, | ||
| "column": 1 | ||
@@ -325,7 +385,7 @@ } | ||
| "start": { | ||
| "line": 143, | ||
| "line": 152, | ||
| "column": 4 | ||
| }, | ||
| "end": { | ||
| "line": 157, | ||
| "line": 176, | ||
| "column": 5 | ||
@@ -350,7 +410,7 @@ } | ||
| "start": { | ||
| "line": 163, | ||
| "line": 182, | ||
| "column": 4 | ||
| }, | ||
| "end": { | ||
| "line": 168, | ||
| "line": 187, | ||
| "column": 5 | ||
@@ -371,7 +431,7 @@ } | ||
| "start": { | ||
| "line": 174, | ||
| "line": 193, | ||
| "column": 4 | ||
| }, | ||
| "end": { | ||
| "line": 179, | ||
| "line": 198, | ||
| "column": 5 | ||
@@ -392,7 +452,7 @@ } | ||
| "start": { | ||
| "line": 185, | ||
| "line": 204, | ||
| "column": 4 | ||
| }, | ||
| "end": { | ||
| "line": 191, | ||
| "line": 215, | ||
| "column": 5 | ||
@@ -413,7 +473,7 @@ } | ||
| "start": { | ||
| "line": 196, | ||
| "line": 220, | ||
| "column": 4 | ||
| }, | ||
| "end": { | ||
| "line": 199, | ||
| "line": 223, | ||
| "column": 5 | ||
@@ -438,3 +498,3 @@ } | ||
| "end": { | ||
| "line": 200, | ||
| "line": 224, | ||
| "column": 3 | ||
@@ -466,7 +526,7 @@ } | ||
| "start": { | ||
| "line": 209, | ||
| "line": 233, | ||
| "column": 0 | ||
| }, | ||
| "end": { | ||
| "line": 211, | ||
| "line": 235, | ||
| "column": 4 | ||
@@ -473,0 +533,0 @@ } |
@@ -57,2 +57,8 @@ /** | ||
| }, | ||
| /** | ||
| * resize timeout | ||
| */ | ||
| __timeout2: { | ||
| type: Object, | ||
| }, | ||
| }; | ||
@@ -108,2 +114,13 @@ } | ||
| */ | ||
| _handleScroll() { | ||
| if (this.__timeout2) clearTimeout(this.__timeout2); | ||
| this.__timeout2 = setTimeout( | ||
| window.AbsolutePositionStateManager.instance.updateStickyElements(), | ||
| 1000 | ||
| ); | ||
| } | ||
| /** | ||
| * handles resize event | ||
| */ | ||
| _handleResize() { | ||
@@ -183,2 +200,4 @@ if (this.__timeout) clearTimeout(this.__timeout); | ||
| window.removeEventListener("resize", this._handleResize); | ||
| if (this.__watchSticky) | ||
| window.removeEventListener("scroll", this._handleScroll); | ||
| } | ||
@@ -192,4 +211,35 @@ | ||
| this.elements.forEach((element) => this.positionElement(element)); | ||
| this.loadSticky(); | ||
| } | ||
| /** | ||
| * Updates position for all elements on page. | ||
| * @return {void} | ||
| */ | ||
| updateStickyElements() { | ||
| this.elements.forEach((element) => { | ||
| if (element.sticky) this.positionElement(element); | ||
| }); | ||
| } | ||
| /** | ||
| * Only listen for scrolling if there is a sticky element | ||
| * @return {void} | ||
| */ | ||
| loadSticky() { | ||
| //only have event listeners when there are elements using manager | ||
| if ( | ||
| !this.__watchSticky && | ||
| this.elements.filter((el) => el.sticky).length > 0 | ||
| ) { | ||
| this.__watchSticky = true; | ||
| window.addEventListener("scroll", this._handleScroll); | ||
| } else if ( | ||
| this.__watchSticky && | ||
| this.elements.filter((el) => el.sticky).length < 1 | ||
| ) { | ||
| window.removeEventListener("scroll", this._handleScroll); | ||
| this.__watchSticky = false; | ||
| } | ||
| } | ||
| _getParentNode(node) { | ||
@@ -216,2 +266,4 @@ let parent = node.parentNode; | ||
| } | ||
| if (!el.style.top) el.style.top = "0px"; | ||
| if (!el.style.left) el.style.left = "0px"; | ||
| let target = this.findTarget(el), | ||
@@ -243,3 +295,4 @@ parent = el.offsetParent, | ||
| max = min + distance(w) - distance(e), | ||
| align = min; | ||
| align = min, | ||
| bounds; | ||
| if (el.positionAlign === "end") { | ||
@@ -252,8 +305,11 @@ align += t[startAt] - distance(e) + distance(t); | ||
| } | ||
| return el.fitToVisibleBounds | ||
| ? Math.max(min, Math.min(max, align)) + "px" | ||
| : align + "px"; //if element size > parent, align where parent begins | ||
| bounds = el.fitToVisibleBounds | ||
| ? Math.max(min, Math.min(max, align)) | ||
| : align; //if element size > parent, align where parent begins | ||
| return bounds; | ||
| }, | ||
| getCoord = (pos = el.position) => { | ||
| let pxToNum = (px) => parseFloat(px.replace("px", "")), | ||
| let coord, | ||
| pxToNum = (px) => parseFloat(px.replace("px", "")), | ||
| adjust = vertical(pos) | ||
@@ -270,7 +326,9 @@ ? pxToNum(el.style.top) - e.top | ||
| : e.width; | ||
| return pos === "top" | ||
| ? t.top + adjust - eh - offset + "px" | ||
| : pos === "left" | ||
| ? t.left + adjust - ew - offset + "px" | ||
| : t[pos] + adjust + offset + "px"; | ||
| coord = | ||
| pos === "top" | ||
| ? t.top + adjust - eh - offset | ||
| : pos === "left" | ||
| ? t.left + adjust - ew - offset | ||
| : t[pos] + adjust + offset; | ||
| return coord; | ||
| }, | ||
@@ -303,12 +361,33 @@ isFit = (pos = el.position) => { | ||
| el.position = flipData[el.position][2]; | ||
| } else { | ||
| el.style.top = vertical(el.position) ? getCoord() : setAlign(); | ||
| el.style.left = vertical(el.position) ? setAlign() : getCoord(); | ||
| //provide positions for element and target (in case furthor positioning adjustments are needed) | ||
| el.__positions = { | ||
| self: e, | ||
| parent: p, | ||
| target: t, | ||
| }; | ||
| } | ||
| let tt = vertical(el.position) ? getCoord() : setAlign(), | ||
| ll = vertical(el.position) ? setAlign() : getCoord(); | ||
| if (el.sticky) { | ||
| let scrollTop = | ||
| window.pageYOffset || | ||
| ( | ||
| document.documentElement || | ||
| document.body.parentNode || | ||
| document.body | ||
| ).scrollTop, | ||
| maxH = window.innerHeight, | ||
| eheight = | ||
| e.height === 0 && el.children && el.children[0] | ||
| ? el.children[0].offsetHeight | ||
| : e.height, | ||
| stickyT = t.top - e.height < 0 && t.top + t.height > 20 + eheight, | ||
| stickyB = t.top + t.height + e.height > maxH && t.top < maxH - eheight; | ||
| if (el.position === "top" && stickyT) | ||
| tt = scrollTop - parent.offsetTop + (eheight - e.height); | ||
| if (el.position === "bottom" && stickyB) | ||
| tt = scrollTop + maxH - parent.offsetTop - eheight; | ||
| } | ||
| el.style.top = tt + "px"; | ||
| el.style.left = ll + "px"; | ||
| //provide positions for element and target (in case furthor positioning adjustments are needed) | ||
| el.__positions = { | ||
| self: e, | ||
| parent: p, | ||
| target: t, | ||
| }; | ||
| } | ||
@@ -315,0 +394,0 @@ |
@@ -183,2 +183,9 @@ "use strict"; | ||
| }, | ||
| /** | ||
| * resize timeout | ||
| */ | ||
| __timeout2: { | ||
| type: Object, | ||
| }, | ||
| }; | ||
@@ -254,2 +261,15 @@ }, | ||
| { | ||
| key: "_handleScroll", | ||
| value: function _handleScroll() { | ||
| if (this.__timeout2) clearTimeout(this.__timeout2); | ||
| this.__timeout2 = setTimeout( | ||
| window.AbsolutePositionStateManager.instance.updateStickyElements(), | ||
| 1000 | ||
| ); | ||
| }, | ||
| /** | ||
| * handles resize event | ||
| */ | ||
| }, | ||
| { | ||
| key: "_handleResize", | ||
@@ -339,2 +359,4 @@ value: function _handleResize() { | ||
| window.removeEventListener("resize", this._handleResize); | ||
| if (this.__watchSticky) | ||
| window.removeEventListener("scroll", this._handleScroll); | ||
| }, | ||
@@ -354,5 +376,47 @@ /** | ||
| }); | ||
| this.loadSticky(); | ||
| }, | ||
| /** | ||
| * Updates position for all elements on page. | ||
| * @return {void} | ||
| */ | ||
| }, | ||
| { | ||
| key: "updateStickyElements", | ||
| value: function updateStickyElements() { | ||
| var _this4 = this; | ||
| this.elements.forEach(function (element) { | ||
| if (element.sticky) _this4.positionElement(element); | ||
| }); | ||
| }, | ||
| /** | ||
| * Only listen for scrolling if there is a sticky element | ||
| * @return {void} | ||
| */ | ||
| }, | ||
| { | ||
| key: "loadSticky", | ||
| value: function loadSticky() { | ||
| //only have event listeners when there are elements using manager | ||
| if ( | ||
| !this.__watchSticky && | ||
| this.elements.filter(function (el) { | ||
| return el.sticky; | ||
| }).length > 0 | ||
| ) { | ||
| this.__watchSticky = true; | ||
| window.addEventListener("scroll", this._handleScroll); | ||
| } else if ( | ||
| this.__watchSticky && | ||
| this.elements.filter(function (el) { | ||
| return el.sticky; | ||
| }).length < 1 | ||
| ) { | ||
| window.removeEventListener("scroll", this._handleScroll); | ||
| this.__watchSticky = false; | ||
| } | ||
| }, | ||
| }, | ||
| { | ||
| key: "_getParentNode", | ||
@@ -385,2 +449,4 @@ value: function _getParentNode(node) { | ||
| if (!el.style.top) el.style.top = "0px"; | ||
| if (!el.style.left) el.style.left = "0px"; | ||
| var target = this.findTarget(el), | ||
@@ -434,3 +500,4 @@ parent = el.offsetParent, | ||
| max = min + distance(w) - distance(e), | ||
| align = min; | ||
| align = min, | ||
| bounds; | ||
@@ -445,5 +512,7 @@ if (el.positionAlign === "end") { | ||
| return el.fitToVisibleBounds | ||
| ? Math.max(min, Math.min(max, align)) + "px" | ||
| : align + "px"; //if element size > parent, align where parent begins | ||
| bounds = el.fitToVisibleBounds | ||
| ? Math.max(min, Math.min(max, align)) | ||
| : align; //if element size > parent, align where parent begins | ||
| return bounds; | ||
| }, | ||
@@ -456,3 +525,4 @@ getCoord = function getCoord() { | ||
| var pxToNum = function pxToNum(px) { | ||
| var coord, | ||
| pxToNum = function pxToNum(px) { | ||
| return parseFloat(px.replace("px", "")); | ||
@@ -472,7 +542,9 @@ }, | ||
| return pos === "top" | ||
| ? t.top + adjust - eh - offset + "px" | ||
| : pos === "left" | ||
| ? t.left + adjust - ew - offset + "px" | ||
| : t[pos] + adjust + offset + "px"; | ||
| coord = | ||
| pos === "top" | ||
| ? t.top + adjust - eh - offset | ||
| : pos === "left" | ||
| ? t.left + adjust - ew - offset | ||
| : t[pos] + adjust + offset; | ||
| return coord; | ||
| }, | ||
@@ -514,12 +586,37 @@ isFit = function isFit() { | ||
| el.position = flipData[el.position][2]; | ||
| } else { | ||
| el.style.top = vertical(el.position) ? getCoord() : setAlign(); | ||
| el.style.left = vertical(el.position) ? setAlign() : getCoord(); //provide positions for element and target (in case furthor positioning adjustments are needed) | ||
| } | ||
| el.__positions = { | ||
| self: e, | ||
| parent: p, | ||
| target: t, | ||
| }; | ||
| var tt = vertical(el.position) ? getCoord() : setAlign(), | ||
| ll = vertical(el.position) ? setAlign() : getCoord(); | ||
| if (el.sticky) { | ||
| var scrollTop = | ||
| window.pageYOffset || | ||
| ( | ||
| document.documentElement || | ||
| document.body.parentNode || | ||
| document.body | ||
| ).scrollTop, | ||
| maxH = window.innerHeight, | ||
| eheight = | ||
| e.height === 0 && el.children && el.children[0] | ||
| ? el.children[0].offsetHeight | ||
| : e.height, | ||
| stickyT = t.top - e.height < 0 && t.top + t.height > 20 + eheight, | ||
| stickyB = | ||
| t.top + t.height + e.height > maxH && t.top < maxH - eheight; | ||
| if (el.position === "top" && stickyT) | ||
| tt = scrollTop - parent.offsetTop + (eheight - e.height); | ||
| if (el.position === "bottom" && stickyB) | ||
| tt = scrollTop + maxH - parent.offsetTop - eheight; | ||
| } | ||
| el.style.top = tt + "px"; | ||
| el.style.left = ll + "px"; //provide positions for element and target (in case furthor positioning adjustments are needed) | ||
| el.__positions = { | ||
| self: e, | ||
| parent: p, | ||
| target: t, | ||
| }; | ||
| }, | ||
@@ -526,0 +623,0 @@ /** |
@@ -20,3 +20,3 @@ { | ||
| }, | ||
| "version": "3.0.7", | ||
| "version": "4.0.0", | ||
| "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements", | ||
@@ -38,5 +38,5 @@ "repository": { | ||
| "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs", | ||
| "test": "web-test-runner \"test/**/*.test.js\" --node-resolve", | ||
| "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch", | ||
| "test:browsers": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit" | ||
| "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs", | ||
| "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --watch", | ||
| "test:browsers": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium firefox webkit" | ||
| }, | ||
@@ -51,5 +51,10 @@ "author": { | ||
| "devDependencies": { | ||
| "@lrnwebcomponents/deduping-fix": "^3.0.0", | ||
| "@lrnwebcomponents/deduping-fix": "^4.0.0", | ||
| "@open-wc/testing": "2.5.33", | ||
| "@polymer/iron-component-page": "github:PolymerElements/iron-component-page", | ||
| "@polymer/iron-demo-helpers": "3.1.0", | ||
| "@web/test-runner": "0.13.5", | ||
| "@web/test-runner-commands": "0.4.5", | ||
| "@web/test-runner-playwright": "0.8.6", | ||
| "@web/test-runner-puppeteer": "0.10.0", | ||
| "@webcomponents/webcomponentsjs": "2.5.0", | ||
@@ -61,8 +66,3 @@ "concurrently": "5.3.0", | ||
| "wct-browser-legacy": "1.0.2", | ||
| "web-animations-js": "2.3.2", | ||
| "@open-wc/testing": "2.5.33", | ||
| "@web/test-runner": "0.13.5", | ||
| "@web/test-runner-commands": "0.4.5", | ||
| "@web/test-runner-playwright": "0.8.6", | ||
| "@web/test-runner-puppeteer": "0.10.0" | ||
| "web-animations-js": "2.3.2" | ||
| }, | ||
@@ -76,3 +76,4 @@ "private": false, | ||
| "html" | ||
| ] | ||
| ], | ||
| "gitHead": "e877f54ece91fb0b2f7aba62f9f9fd15060600f2" | ||
| } |
@@ -44,2 +44,10 @@ { | ||
| /** | ||
| * Stays on screen while target is on screen | ||
| */ | ||
| "sticky": { | ||
| "type": "Boolean", | ||
| "attribute": "sticky", | ||
| "reflect": true | ||
| }, | ||
| /** | ||
| * Positions the tooltip to the top, right, bottom, left of its content. | ||
@@ -46,0 +54,0 @@ */ |
@@ -31,2 +31,3 @@ /** | ||
| this.target = null; | ||
| this.sticky = false; | ||
| this.hidden = false; | ||
@@ -38,2 +39,3 @@ this.__positions = {}; | ||
| updated(changedProperties) { | ||
| let updatePosition = false; | ||
| if (this.shadowRoot && !this.hidden) { | ||
@@ -43,10 +45,19 @@ changedProperties.forEach((oldValue, propName) => { | ||
| if (propName === "auto" && !this.auto) this.unsetPosition(); | ||
| if (propName === "fitToVisibleBounds") this.updatePosition(); | ||
| if (propName === "for") this.updatePosition(); | ||
| if (propName === "offset") this.updatePosition(); | ||
| if (propName === "position") this.updatePosition(); | ||
| if (propName === "positionAlign") this.updatePosition(); | ||
| if (propName === "target") this.updatePosition(); | ||
| if (propName === "hidden") this.updatePosition(); | ||
| if ( | ||
| [ | ||
| "fitToVisibleBounds", | ||
| "for", | ||
| "offset", | ||
| "position", | ||
| "justify", | ||
| "positionAlign", | ||
| "target", | ||
| "hidden", | ||
| "sticky", | ||
| ].includes(propName) && | ||
| this[propName] !== oldValue | ||
| ) | ||
| updatePosition = true; | ||
| }); | ||
| if (updatePosition) this.updatePosition(); | ||
| } | ||
@@ -82,3 +93,8 @@ } | ||
| updatePosition() { | ||
| if (this.__observe === true) { | ||
| if (!this.hidden && this.auto && this.__observe == false) { | ||
| window.AbsolutePositionStateManager.requestAvailability().loadElement( | ||
| this | ||
| ); | ||
| } | ||
| if (!this.auto || this.__observe === true) { | ||
| window.AbsolutePositionStateManager.requestAvailability().positionElement( | ||
@@ -85,0 +101,0 @@ this |
@@ -165,2 +165,3 @@ "use strict"; | ||
| _this.target = null; | ||
| _this.sticky = false; | ||
| _this.__positions = {}; | ||
@@ -178,14 +179,24 @@ _this.__observe = false; | ||
| var updatePosition = false; | ||
| changedProperties.forEach(function (oldValue, propName) { | ||
| if (propName === "auto" && _this2.auto) _this2.setPosition(); | ||
| if (propName === "auto" && !_this2.auto) _this2.unsetPosition(); | ||
| if (propName === "fitToVisibleBounds") _this2.updatePosition(); | ||
| if (propName === "for") _this2.updatePosition(); | ||
| if (propName === "offset") _this2.updatePosition(); | ||
| if (propName === "position") _this2.updatePosition(); | ||
| if (propName === "justify") _this2.updatePosition(); | ||
| if (propName === "positionAlign") _this2.updatePosition(); | ||
| if (propName === "target") _this2.updatePosition(); | ||
| if (propName === "hidden") _this2.updatePosition(); | ||
| if ( | ||
| [ | ||
| "fitToVisibleBounds", | ||
| "for", | ||
| "offset", | ||
| "position", | ||
| "justify", | ||
| "positionAlign", | ||
| "target", | ||
| "hidden", | ||
| "sticky", | ||
| ].includes(propName) && | ||
| _this2[propName] !== oldValue | ||
| ) | ||
| updatePosition = true; | ||
| }); | ||
| if (updatePosition) console.log(changedProperties, this.target); | ||
| if (updatePosition) this.updatePosition(); | ||
| }, | ||
@@ -224,3 +235,3 @@ /** | ||
| value: function updatePosition() { | ||
| if (this.__observe === true) { | ||
| if (!this.auto || this.__observe === true) { | ||
| this.__manager.positionElement(this); | ||
@@ -227,0 +238,0 @@ } |
@@ -10,3 +10,3 @@ import { | ||
| import { setViewport } from "@web/test-runner-commands"; | ||
| import "../src/absolute-position-behavior.js"; | ||
| import "../absolute-position-behavior.js"; | ||
@@ -13,0 +13,0 @@ /* |
@@ -6,10 +6,5 @@ { | ||
| "name": "absolute-position-behavior", | ||
| "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n * `justify` {`boolean`} - \n\n * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n * `fit-to-visible-bounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n * `target` - The actual target element\n\n * `__positions` - The element's style\n\nProperties:\n\n * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `positionAlign` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n * `justify` {`boolean`} - \n\n * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n * `fitToVisibleBounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n * `target` - The actual target element\n\n * `__positions` - The element's style\n\n * `__observe` {`boolean`} - \n\n * `__manager` - ", | ||
| "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nAttributes:\n\n * `position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n * `justify` {`boolean`} - \n\n * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n * `fit-to-visible-bounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n * `target` - The actual target element\n\n * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `__positions` - The element's style\n\nProperties:\n\n * `positionAlign` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\n * `justify` {`boolean`} - \n\n * `auto` {`boolean`} - Element is positioned from connected to disconnected?\nOtherwise setPosition and unsetPosition must be called manually.\n\n * `fitToVisibleBounds` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `for` {`string`} - The id of the element that the tooltip is anchored to. This element\nmust be a sibling of the tooltip. If this property is not set,\nthen the tooltip will be centered to the parent node containing it.\n\n * `offset` {`number`} - The spacing between the top of the tooltip and the element it is\nanchored to.\n\n * `position` {`string`} - Positions the tooltip to the top, right, bottom, left of its content.\n\n * `target` - The actual target element\n\n * `sticky` {`boolean`} - Stays on screen while target is on screen\n\n * `hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\n * `__positions` - The element's style\n\n * `__observe` {`boolean`} - ", | ||
| "attributes": [ | ||
| { | ||
| "name": "hidden", | ||
| "description": "`hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\nProperty: hidden", | ||
| "valueSet": "v" | ||
| }, | ||
| { | ||
| "name": "position-align", | ||
@@ -50,2 +45,12 @@ "description": "`position-align` {`string`} - Aligns at the start, or end fo target. Default is centered.\n\nProperty: positionAlign" | ||
| { | ||
| "name": "sticky", | ||
| "description": "`sticky` {`boolean`} - Stays on screen while target is on screen\n\nProperty: sticky\n\nDefault: false", | ||
| "valueSet": "v" | ||
| }, | ||
| { | ||
| "name": "hidden", | ||
| "description": "`hidden` {`boolean`} - If true, no parts of the tooltip will ever be shown offscreen.\n\nProperty: hidden\n\nDefault: false", | ||
| "valueSet": "v" | ||
| }, | ||
| { | ||
| "name": "__positions", | ||
@@ -58,5 +63,9 @@ "description": "`__positions` - The element's style\n\nProperty: __positions\n\nDefault: [object Object]" | ||
| "name": "absolute-position-state-manager", | ||
| "description": "`absolute-position-state-manager`\nmanages state of multiple absolute-positioned elements on a page\n\nAttributes:\n\n * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n * `__timeout` - resize timeout\n\n * `__observer` - mutation observer\n\nProperties:\n\n * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n * `__timeout` - resize timeout\n\n * `__observer` - mutation observer", | ||
| "description": "`absolute-position-state-manager`\nmanages state of multiple absolute-positioned elements on a page\n\nAttributes:\n\n * `__timeout2` - resize timeout\n\n * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n * `__timeout` - resize timeout\n\n * `__observer` - mutation observer\n\nProperties:\n\n * `__timeout2` - resize timeout\n\n * `elements` {`any[]`} - Stores an array of all elements using manager.\n\n * `__timeout` - resize timeout\n\n * `__observer` - mutation observer", | ||
| "attributes": [ | ||
| { | ||
| "name": "__timeout2", | ||
| "description": "`__timeout2` - resize timeout\n\nProperty: __timeout2" | ||
| }, | ||
| { | ||
| "name": "elements", | ||
@@ -77,3 +86,3 @@ "description": "`elements` {`any[]`} - Stores an array of all elements using manager.\n\nProperty: elements\n\nDefault: " | ||
| "name": "absolute-position-behavior", | ||
| "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nProperties:\n\n * `auto` {`boolean`} - \n\n * `fitToVisibleBounds` {`boolean`} - \n\n * `for` - \n\n * `offset` {`number`} - \n\n * `position` {`string`} - \n\n * `target` - \n\n * `__positions` - \n\n * `__observe` {`boolean`} - \n\n * `__manager` - ", | ||
| "description": "`absolute-position-behavior`\nabstracts absolute positioning behavior to be resusable in other elements\n\nProperties:\n\n * `auto` {`boolean`} - \n\n * `fitToVisibleBounds` {`boolean`} - \n\n * `for` - \n\n * `offset` {`number`} - \n\n * `position` {`string`} - \n\n * `target` - \n\n * `sticky` {`boolean`} - \n\n * `hidden` {`boolean`} - \n\n * `__positions` - \n\n * `__observe` {`boolean`} - ", | ||
| "attributes": [] | ||
@@ -80,0 +89,0 @@ } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.79%
139297
- Lines of code
- increased by11.81%
2830
No dependency changes