@lrnwebcomponents/absolute-position-behavior - npm Package Compare versions

Comparing version 2.0.10 to 2.1.0

absolute-position-behavior.amd.js

@@ -1,2 +0,2 @@
-define(["exports","./node_modules/@polymer/polymer/polymer-element.js","./lib/absolute-position-state-manager.js"],function(_exports,_polymerElement,_absolutePositionStateManager){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.AbsolutePositionBehavior=void 0;function _templateObject_7c77ceb06a8211e98dbb453196bb7d63(){var data=babelHelpers.taggedTemplateLiteral(["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"]);_templateObject_7c77ceb06a8211e98dbb453196bb7d63=function _templateObject_7c77ceb06a8211e98dbb453196bb7d63(){return data};return data}/**
+define(["exports","./node_modules/@polymer/polymer/polymer-element.js","./lib/absolute-position-state-manager.js"],function(_exports,_polymerElement,_absolutePositionStateManager){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.AbsolutePositionBehavior=void 0;function _templateObject_8105416081c011e982224906d291fc8b(){var data=babelHelpers.taggedTemplateLiteral(["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"]);_templateObject_8105416081c011e982224906d291fc8b=function _templateObject_8105416081c011e982224906d291fc8b(){return data};return data}/**
  * `absolute-position-behavior`
@@ -13,27 +13,35 @@ * `Abstracting the positioning behavior from paper-tooltip to be resusable in other elements`
    * life cycle, element is afixed to the DOM
-   */value:function connectedCallback(){babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior.prototype),"connectedCallback",this).call(this)}/**
+   */value:function connectedCallback(){babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior.prototype),"connectedCallback",this).call(this);var root=this;root.__observe=!1;root.__manager=window.AbsolutePositionStateManager.requestAvailability();if(!1!==root.auto)root.setPosition()}/**
    * life cycle, element is ready
-   */},{key:"ready",value:function ready(){babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior.prototype),"ready",this).call(this);var root=this;root.__observe=!1;root.__manager=window.AbsolutePositionStateManager.requestAvailability();if(!0===root.auto){root.setPosition()}}},{key:"setPosition",value:function setPosition(){var root=this;root.__observe=!0;root.__manager.loadElement(root)}},{key:"unsetPosition",value:function unsetPosition(){var root=this;root.__observe=!1;root.__manager.unloadElement(root)}},{key:"updatePosition",value:function updatePosition(){var root=this;if(!0===root.__observe){root.__manager.updatePosition(root)}}/**
+   */},{key:"ready",value:function ready(){babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior.prototype),"ready",this).call(this)}/**
+   * Registers the element with AbsolutePositionStateManager
+   */},{key:"setPosition",value:function setPosition(){var root=this;root.__observe=!0;root.__manager.loadElement(root)}/**
+   * Unregisters the element with AbsolutePositionStateManager
+   */},{key:"unsetPosition",value:function unsetPosition(){var root=this;root.__observe=!1;root.__manager.unloadElement(root)}/**
+   * Updates  the element's position
+   */},{key:"updatePosition",value:function updatePosition(){var root=this;if(!0===root.__observe){root.__manager.positionElement(root)}}/**
    * life cycle, element is removed from the DOM
    */},{key:"disconnectedCallback",value:function disconnectedCallback(){this.unsetPosition();babelHelpers.get(babelHelpers.getPrototypeOf(AbsolutePositionBehavior.prototype),"disconnectedCallback",this).call(this)}}],[{key:"template",// render function
-get:function get(){return(0,_polymerElement.html)(_templateObject_7c77ceb06a8211e98dbb453196bb7d63())}// properties available to the custom element for data binding
+get:function get(){return(0,_polymerElement.html)(_templateObject_8105416081c011e982224906d291fc8b())}// properties available to the custom element for data binding
 },{key:"properties",get:function get(){return{/**
    * Element is positioned from connected to disconnected?
    * Otherwise setPosition and unsetPosition must be called manually.
-   */auto:{type:Boolean,value:!1},/**
+   */auto:{type:"Boolean",value:!1},/**
    * If true, no parts of the tooltip will ever be shown offscreen.
-   */fitToVisibleBounds:{type:Boolean,value:!1,observer:"updatePosition"},/**
+   */fitToVisibleBounds:{type:"Boolean",value:!1,observer:"updatePosition"},/**
    * 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,observer:"updatePosition"},/**
+   */for:{type:"String",observer:"updatePosition",reflectToAttribute:!0},/**
    * The spacing between the top of the tooltip and the element it is
    * anchored to.
-   */offset:{type:Number,value:0},/**
+   */offset:{type:"Number",value:0,observer:"updatePosition"},/**
    * Positions the tooltip to the top, right, bottom, left of its content.
-   */position:{type:String,value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
+   */position:{type:"String",value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
    * The actual target element
-   */target:{type:Object,observer:"updatePosition"}}}/**
+   */target:{type:"Object",observer:"updatePosition"},/**
+   * The element's style
+   */__positions:{type:"Object"}}}/**
    * Store the tag name to make it easier to obtain directly.
    * @notice function name must be here for tooling to operate correctly
    */},{key:"tag",get:function get(){return"absolute-position-behavior"}}]);return AbsolutePositionBehavior}(_polymerElement.PolymerElement);_exports.AbsolutePositionBehavior=AbsolutePositionBehavior;window.customElements.define(AbsolutePositionBehavior.tag,AbsolutePositionBehavior)});

absolute-position-behavior.es6.js

@@ -28,16 +28,18 @@ /**
    * Otherwise setPosition and unsetPosition must be called manually.
-   */auto:{type:Boolean,value:!1},/**
+   */auto:{type:"Boolean",value:!1},/**
    * If true, no parts of the tooltip will ever be shown offscreen.
-   */fitToVisibleBounds:{type:Boolean,value:!1,observer:"updatePosition"},/**
+   */fitToVisibleBounds:{type:"Boolean",value:!1,observer:"updatePosition"},/**
    * 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,observer:"updatePosition"},/**
+   */for:{type:"String",observer:"updatePosition",reflectToAttribute:!0},/**
    * The spacing between the top of the tooltip and the element it is
    * anchored to.
-   */offset:{type:Number,value:0},/**
+   */offset:{type:"Number",value:0,observer:"updatePosition"},/**
    * Positions the tooltip to the top, right, bottom, left of its content.
-   */position:{type:String,value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
+   */position:{type:"String",value:"bottom",observer:"updatePosition",reflectToAttribute:!0},/**
    * The actual target element
-   */target:{type:Object,observer:"updatePosition"}}}/**
+   */target:{type:"Object",observer:"updatePosition"},/**
+   * The element's style
+   */__positions:{type:"Object"}}}/**
    * Store the tag name to make it easier to obtain directly.
@@ -47,6 +49,12 @@ * @notice function name must be here for tooling to operate correctly
    * life cycle, element is afixed to the DOM
-   */connectedCallback(){super.connectedCallback()}/**
+   */connectedCallback(){super.connectedCallback();let root=this;root.__observe=!1;root.__manager=window.AbsolutePositionStateManager.requestAvailability();if(!1!==root.auto)root.setPosition()}/**
    * life cycle, element is ready
-   */ready(){super.ready();let root=this;root.__observe=!1;root.__manager=window.AbsolutePositionStateManager.requestAvailability();if(!0===root.auto){root.setPosition()}}setPosition(){let root=this;root.__observe=!0;root.__manager.loadElement(root)}unsetPosition(){let root=this;root.__observe=!1;root.__manager.unloadElement(root)}updatePosition(){let root=this;if(!0===root.__observe){root.__manager.updatePosition(root)}}/**
+   */ready(){super.ready()}/**
+   * Registers the element with AbsolutePositionStateManager
+   */setPosition(){let root=this;root.__observe=!0;root.__manager.loadElement(root)}/**
+   * Unregisters the element with AbsolutePositionStateManager
+   */unsetPosition(){let root=this;root.__observe=!1;root.__manager.unloadElement(root)}/**
+   * Updates  the element's position
+   */updatePosition(){let root=this;if(!0===root.__observe){root.__manager.positionElement(root)}}/**
    * life cycle, element is removed from the DOM
    */disconnectedCallback(){this.unsetPosition();super.disconnectedCallback()}}window.customElements.define(AbsolutePositionBehavior.tag,AbsolutePositionBehavior);export{AbsolutePositionBehavior};

absolute-position-behavior.js

@@ -44,3 +44,3 @@ /**
       auto: {
-        type: Boolean,
+        type: "Boolean",
         value: false
@@ -52,3 +52,3 @@ },
       fitToVisibleBounds: {
-        type: Boolean,
+        type: "Boolean",
         value: false,
@@ -63,4 +63,5 @@ observer: "updatePosition"
       for: {
-        type: String,
-        observer: "updatePosition"
+        type: "String",
+        observer: "updatePosition",
+        reflectToAttribute: true
       },
@@ -72,4 +73,5 @@ /**
       offset: {
-        type: Number,
-        value: 0
+        type: "Number",
+        value: 0,
+        observer: "updatePosition"
       },
@@ -80,3 +82,3 @@ /**
       position: {
-        type: String,
+        type: "String",
         value: "bottom",
@@ -90,4 +92,10 @@ observer: "updatePosition",
       target: {
-        type: Object,
+        type: "Object",
         observer: "updatePosition"
+      },
+      /**
+       * The element's style
+       */
+      __positions: {
+        type: "Object"
       }
@@ -110,2 +118,6 @@ };
     super.connectedCallback();
+    let root = this;
+    root.__observe = false;
+    root.__manager = window.AbsolutePositionStateManager.requestAvailability();
+    if (root.auto !== false) root.setPosition();
   }
@@ -118,10 +130,6 @@
     super.ready();
-    let root = this;
-    root.__observe = false;
-    root.__manager = window.AbsolutePositionStateManager.requestAvailability();
-    if (root.auto === true) {
-      root.setPosition();
-    }
   }
-
+  /**
+   * Registers the element with AbsolutePositionStateManager
+   */
   setPosition() {
@@ -133,2 +141,5 @@ let root = this;
 
+  /**
+   * Unregisters the element with AbsolutePositionStateManager
+   */
   unsetPosition() {
@@ -140,6 +151,9 @@ let root = this;
 
+  /**
+   * Updates  the element's position
+   */
   updatePosition() {
     let root = this;
     if (root.__observe === true) {
-      root.__manager.updatePosition(root);
+      root.__manager.positionElement(root);
     }
@@ -146,0 +160,0 @@ }

absolute-position-behavior.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/iron-resizable-behavior/iron-resizable-behavior.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],t):t((e=e||self).AbsolutePositionBehavior={},e.polymerElement_js)}(this,function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function i(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?l(e):t}function c(e,t,n){return(c="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=s(e)););return e}(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}})(e,t,n||e)}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){return window.AbsolutePositionStateManager.instance||(window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager"),document.body.appendChild(window.AbsolutePositionStateManager.instance)),window.AbsolutePositionStateManager.instance};var f=function(e){function o(){var e;n(this,o);l(e=u(this,s(o).call(this)));return window.AbsolutePositionStateManager.instance?e:(window.AbsolutePositionStateManager.instance=l(e),u(e,l(e)))}return r(o,t.PolymerElement),i(o,null,[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{elements:{type:Array,value:[]}}}}]),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this)}},{key:"loadElement",value:function(e){this.__on=void 0!==this.__on&&this.__on,this.elements.push(e),this.updatePosition(e),this.__on||this.addEventListeners(),this.__on=!0}},{key:"unloadElement",value:function(e){this.elements.filter(function(t){return t===e}),this.__on=this.elements>0,this.__on||this.removeEventListeners()}},{key:"addEventListeners",value:function(){var e=this;e.__timeout=!1,e.updateElements(),document.addEventListener("load",e.updateElements()),window.addEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer=new MutationObserver(function(t){e.updateElements()}),e.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0})}},{key:"findTarget",value:function(e){var t,n=this.parentNode;if(e.target)t=e.target;else if(e.for)t=n.querySelector("#"+e.for);else{var o=e.shadowRoot;t=n.nodeType==Node.DOCUMENT_FRAGMENT_NODE?o.host:n}return t}},{key:"removeEventListeners",value:function(){var e=this;document.removeEventListener("load",e.updateElements()),window.removeEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer&&e.__observer.disconnect()}},{key:"updateElements",value:function(){var e=this;e.elements.forEach(function(t){e.updatePosition(t)})}},{key:"updatePosition",value:function(e){var t=this.findTarget(e);if(t&&e.offsetParent){var n,o,i=e.offset,r=e.offsetParent.getBoundingClientRect(),s=t.getBoundingClientRect(),a=e.getBoundingClientRect(),l=(s.width-a.width)/2,u=(s.height-a.height)/2;switch(e.position){case"top":n=s.left+l,o=s.top-a.height-i;break;case"bottom":n=s.left+l,o=s.top+s.height+i;break;case"left":n=s.left-a.width-i,o=s.top+u;break;case"right":n=s.left+s.width+i,o=s.top+u}e.style.position="absolute",e.fitToVisibleBounds?(r.left+n+a.width>window.innerWidth?(e.style.right="0px",e.style.left="auto"):(e.style.left=Math.max(0,n)+"px",e.style.right="auto"),r.top+o+a.height>window.innerHeight?(e.style.bottom=r.height-s.top+i+"px",e.style.top="auto"):(e.style.top=Math.max(-r.top,o)+"px",e.style.bottom="auto")):(e.style.left=n+"px",e.style.top=o+"px")}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}]),o}();function p(){var e,t,n=(e=["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return p=function(){return n},n}window.customElements.define(f.tag,f);var d=function(e){function o(){return n(this,o),u(this,s(o).apply(this,arguments))}return r(o,t.PolymerElement),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this)}},{key:"ready",value:function(){c(s(o.prototype),"ready",this).call(this);this.__observe=!1,this.__manager=window.AbsolutePositionStateManager.requestAvailability(),!0===this.auto&&this.setPosition()}},{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.updatePosition(this)}},{key:"disconnectedCallback",value:function(){this.unsetPosition(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}],[{key:"template",get:function(){return t.html(p())}},{key:"properties",get:function(){return{auto:{type:Boolean,value:!1},fitToVisibleBounds:{type:Boolean,value:!1,observer:"updatePosition"},for:{type:String,observer:"updatePosition"},offset:{type:Number,value:0},position:{type:String,value:"bottom",observer:"updatePosition",reflectToAttribute:!0},target:{type:Object,observer:"updatePosition"}}}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),o}();window.customElements.define(d.tag,d),e.AbsolutePositionBehavior=d,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/iron-resizable-behavior/iron-resizable-behavior.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],t):t((e=e||self).AbsolutePositionBehavior={},e.polymerElement_js)}(this,function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function i(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?l(e):t}function c(e,t,n){return(c="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=s(e)););return e}(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}})(e,t,n||e)}window.AbsolutePositionStateManager=window.AbsolutePositionStateManager||{},window.AbsolutePositionStateManager.requestAvailability=function(){return window.AbsolutePositionStateManager.instance||(window.AbsolutePositionStateManager.instance=document.createElement("absolute-position-state-manager"),document.body.appendChild(window.AbsolutePositionStateManager.instance)),window.AbsolutePositionStateManager.instance};var f=function(e){function o(){var e;n(this,o);l(e=u(this,s(o).call(this)));return window.AbsolutePositionStateManager.instance?e:(window.AbsolutePositionStateManager.instance=l(e),u(e,l(e)))}return r(o,t.PolymerElement),i(o,null,[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{els:{type:Array,value:[]}}}}]),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this)}},{key:"loadElement",value:function(e){this.__on=void 0!==this.__on&&this.__on,this.els.push(e),this.positionElement(e),this.__on||this.addEventListeners(),this.__on=!0}},{key:"unloadElement",value:function(e){this.els.filter(function(e){return e==e}),this.__on=this.els>0,this.__on||this.removeEventListeners()}},{key:"addEventListeners",value:function(){var e=this;e.__timeout=!1,e.updateElements(),document.addEventListener("load",e.updateElements()),window.addEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer=new MutationObserver(function(t){e.checkMutations(t)}),e.__observer.observe(document,{attributes:!0,childList:!0,subtree:!0,characterData:!0})}},{key:"checkMutations",value:function(e){var t=this,n=!1;e.forEach(function(e){n||(n=n||!("attributes"===e.type&&"style"===e.attributeName&&t.els.includes(e.target)))}),n&&this.updateElements()}},{key:"findTarget",value:function(e){for(var t="#"+e.for,n=1===document.querySelectorAll(t).length?document.querySelector(t):null,o=e.target||n,i=e;void 0!==e.for&&null===o&&null!==i&&i!==document;)11===(i=i.parentNode).nodeType&&(i=i.host),o=i?i.querySelector(t):null;return o}},{key:"removeEventListeners",value:function(){var e=this;document.removeEventListener("load",e.updateElements()),window.removeEventListener("resize",function(){clearTimeout(e.__timeout),e.__timeout=setTimeout(e.updateElements(),250)}),e.__observer&&e.__observer.disconnect()}},{key:"updateElements",value:function(){var e=this;e.els.forEach(function(t){e.positionElement(t)})}},{key:"positionElement",value:function(e){var t=this.findTarget(e);if(t&&e.offsetParent){var n,o,i,r,s=e.offset,a=e.offsetParent.getBoundingClientRect(),l=t.getBoundingClientRect(),u=e.getBoundingClientRect(),c=(l.width-u.width)/2,f=(l.height-u.height)/2;switch(e.position){case"top":n=l.left+c,o=l.top-u.height-s;break;case"bottom":n=l.left+c,o=l.top+l.height+s;break;case"left":n=l.left-u.width-s,o=l.top+f;break;case"right":n=l.left+l.width+s,o=l.top+f}e.style.position="absolute",i=n+"px",r=o+"px",e.fitToVisibleBounds&&(n-s<a.left||u.width>a.width?i=a.left+"px":u.right>a.right&&(i=l.right-u.width+"px"),o-s<a.top||u.height>a.height?r=a.top+"px":u.bottom>a.bottom&&(i=l.bottom-u.height+"px")),e.style.left=i,e.style.top=r,e.__positions={self:u,parent:a,target:l}}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}]),o}();function p(){var e,t,n=(e=["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return p=function(){return n},n}window.customElements.define(f.tag,f);var d=function(e){function o(){return n(this,o),u(this,s(o).apply(this,arguments))}return r(o,t.PolymerElement),i(o,[{key:"connectedCallback",value:function(){c(s(o.prototype),"connectedCallback",this).call(this);this.__observe=!1,this.__manager=window.AbsolutePositionStateManager.requestAvailability(),!1!==this.auto&&this.setPosition()}},{key:"ready",value:function(){c(s(o.prototype),"ready",this).call(this)}},{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(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}],[{key:"template",get:function(){return t.html(p())}},{key:"properties",get:function(){return{auto:{type:"Boolean",value:!1},fitToVisibleBounds:{type:"Boolean",value:!1,observer:"updatePosition"},for:{type:"String",observer:"updatePosition",reflectToAttribute:!0},offset:{type:"Number",value:0,observer:"updatePosition"},position:{type:"String",value:"bottom",observer:"updatePosition",reflectToAttribute:!0},target:{type:"Object",observer:"updatePosition"},__positions:{type:"Object"}}}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),o}();window.customElements.define(d.tag,d),e.AbsolutePositionBehavior=d,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=absolute-position-behavior.umd.js.map

gulpfile.js

@@ -65,4 +65,8 @@ const gulp = require("gulp");
   // properties available to the custom element for data binding
-  static get properties() {
-    return ${props};
+    static get properties() {
+    let props = ${props};
+    if (super.properties) {
+      props = Object.assign(props, super.properties);
+    }
+    return props;
   }`;
@@ -69,0 +73,0 @@ }

lib/absolute-position-state-manager.js

@@ -10,3 +10,3 @@ /**
 window.AbsolutePositionStateManager = window.AbsolutePositionStateManager || {};
-// request if this exists. This helps invoke the element existing in the dom
+// request if this exists. This helps invoke the el existing in the dom
 // as well as that there is only one of them. That way we can ensure everything
@@ -44,3 +44,3 @@ // is rendered through the same modal
 
-  // properties available to the custom element for data binding
+  // properties available to the custom el for data binding
   static get properties() {
@@ -51,3 +51,3 @@ return {
        */
-      elements: {
+      els: {
         type: Array,
@@ -60,3 +60,3 @@ value: []
   /**
-   * Makes sure there is a utility ready and listening for elements.
+   * Makes sure there is a utility ready and listening for els.
    */
@@ -75,4 +75,4 @@ constructor() {
   /**
-   * life cycle, element is afixed to the DOM
-   * Makes sure there is a utility ready and listening for elements.
+   * life cycle, el is afixed to the DOM
+   * Makes sure there is a utility ready and listening for els.
    */
@@ -84,3 +84,3 @@ connectedCallback() {
   /**
-   * Loads element into array
+   * Loads el into array
    */
@@ -90,4 +90,4 @@ loadElement(el) {
     root.__on = root.__on !== undefined ? root.__on : false;
-    root.elements.push(el);
-    root.updatePosition(el);
+    root.els.push(el);
+    root.positionElement(el);
     if (!root.__on) root.addEventListeners();
@@ -98,8 +98,8 @@ root.__on = true;
   /**
-   * Unloads element from array
+   * Unloads el from array
    */
   unloadElement(el) {
     let root = this;
-    root.elements.filter(element => element === el);
-    root.__on = root.elements > 0;
+    root.els.filter(el => el === el);
+    root.__on = root.els > 0;
     if (!root.__on) root.removeEventListeners();
@@ -121,3 +121,3 @@ }
     root.__observer = new MutationObserver(function(mutations) {
-      root.updateElements();
+      root.checkMutations(mutations);
     });
@@ -133,21 +133,57 @@ root.__observer.observe(document, {
   /**
-   * Returns the target element that this tooltip is anchored to. It is
-   * either the element given by the `for` attribute, or the immediate parent
-   * of the tooltip.
+   * Checks if there are any chances other than to
+   * the element's position and updates accordioning.
+   * This is needed so that positioning the elements
+   * doesn't trigger an infinite loop of updates.
    *
-   * @type {Node}
+   * @param {array} mutation records
+   * @return {void}
    */
+  checkMutations(mutations) {
+    let update = false;
+
+    mutations.forEach(mutation => {
+      if (update) return;
+      update =
+        update ||
+        !(
+          mutation.type === "attributes" &&
+          mutation.attributeName === "style" &&
+          this.els.includes(mutation.target)
+        );
+    });
+    if (update) this.updateElements();
+  }
+
+  /**
+   * Returns the target el that this el is anchored to. It is
+   * either the el given by the `for` attribute, or the immediate parent
+   * of the el.
+   *
+   * @param {object} element using absolute-position behavior
+   * @return {object} target element for positioning
+   */
   findTarget(el) {
-    let target;
-    let parentNode = this.parentNode;
-    if (el.target) {
-      target = el.target;
-    } else if (el.for) {
-      target = parentNode.querySelector("#" + el.for);
-    } else {
-      let ownerRoot = el.shadowRoot;
-      target =
-        parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE
-          ? ownerRoot.host
-          : parentNode;
+    let selector = "#" + el.for,
+      docQuery =
+        document.querySelectorAll(selector).length === 1
+          ? document.querySelector(selector)
+          : null,
+      target = el.target || docQuery,
+      ancestor = el;
+
+    /**
+     * Use `target` object if specified.
+     * If not, query the document for elements with the id specified in the `for` attribute.
+     * If there is more than one element that matches, find the closest matching element.
+     */
+    while (
+      el.for !== undefined &&
+      target === null &&
+      ancestor !== null &&
+      ancestor !== document
+    ) {
+      ancestor = ancestor.parentNode;
+      if (ancestor.nodeType === 11) ancestor = ancestor.host;
+      target = ancestor ? ancestor.querySelector(selector) : null;
     }
@@ -159,2 +195,3 @@ return target;
    * Removes event listeners
+   * @return {void}
    */
@@ -174,8 +211,9 @@ removeEventListeners() {
   /**
-   * stops all other players on the page
+   * Updates position for all elements on the page.
+   * @return {void}
    */
   updateElements() {
     let root = this;
-    root.elements.forEach(element => {
-      root.updatePosition(element);
+    root.els.forEach(el => {
+      root.positionElement(el);
     });
@@ -185,68 +223,77 @@ }
   /**
+   * Gets an updated position based on target.
+   * @param {object} the element using absolute-position behavior
    * @return {void}
    */
-  updatePosition(element) {
-    let target = this.findTarget(element);
-    if (!target || !element.offsetParent) return;
-    var offset = element.offset;
-    var parentRect = element.offsetParent.getBoundingClientRect();
-    var targetRect = target.getBoundingClientRect();
-    var elementRect = element.getBoundingClientRect();
-    var horizontalCenterOffset = (targetRect.width - elementRect.width) / 2;
-    var verticalCenterOffset = (targetRect.height - elementRect.height) / 2;
-    //var targetLeft = targetRect.left - parentRect.left;
-    //var targetTop = targetRect.top - parentRect.top;
-    var tooltipLeft, tooltipTop;
-    switch (element.position) {
+  positionElement(el) {
+    let target = this.findTarget(el);
+    if (!target || !el.offsetParent) return;
+    let offset = el.offset,
+      parentRect = el.offsetParent.getBoundingClientRect(),
+      targetRect = target.getBoundingClientRect(),
+      elRect = el.getBoundingClientRect(),
+      centerOffset = (targetRect.width - elRect.width) / 2,
+      middleOffset = (targetRect.height - elRect.height) / 2,
+      elLeft,
+      elTop,
+      styleLeft,
+      styleRight,
+      styleTop,
+      styleBottom;
+    switch (el.position) {
       case "top":
-        tooltipLeft = targetRect.left + horizontalCenterOffset;
-        tooltipTop = targetRect.top - elementRect.height - offset;
+        elLeft = targetRect.left + centerOffset;
+        elTop = targetRect.top - elRect.height - offset;
         break;
       case "bottom":
-        tooltipLeft = targetRect.left + horizontalCenterOffset;
-        tooltipTop = targetRect.top + targetRect.height + offset;
+        elLeft = targetRect.left + centerOffset;
+        elTop = targetRect.top + targetRect.height + offset;
         break;
       case "left":
-        tooltipLeft = targetRect.left - elementRect.width - offset;
-        tooltipTop = targetRect.top + verticalCenterOffset;
+        elLeft = targetRect.left - elRect.width - offset;
+        elTop = targetRect.top + middleOffset;
         break;
       case "right":
-        tooltipLeft = targetRect.left + targetRect.width + offset;
-        tooltipTop = targetRect.top + verticalCenterOffset;
+        elLeft = targetRect.left + targetRect.width + offset;
+        elTop = targetRect.top + middleOffset;
         break;
     }
-    element.style.position = "absolute";
+    el.style.position = "absolute";
     // TODO(noms): This should use IronFitBehavior if possible.
-    if (element.fitToVisibleBounds) {
-      // Clip the left/right side
+    styleLeft = elLeft + "px";
+    styleTop = elTop + "px";
+    if (el.fitToVisibleBounds) {
+      /// if the left side is off-screen
       if (
-        parentRect.left + tooltipLeft + elementRect.width >
-        window.innerWidth
+        elLeft - offset < parentRect.left ||
+        elRect.width > parentRect.width
       ) {
-        element.style.right = "0px";
-        element.style.left = "auto";
-      } else {
-        element.style.left = Math.max(0, tooltipLeft) + "px";
-        element.style.right = "auto";
+        styleLeft = parentRect.left + "px";
+        /// if the right side is off-screen
+      } else if (elRect.right > parentRect.right) {
+        styleLeft = targetRect.right - elRect.width + "px";
       }
-      // Clip the top/bottom side.
+      //if the top is off screen
       if (
-        parentRect.top + tooltipTop + elementRect.height >
-        window.innerHeight
+        elTop - offset < parentRect.top ||
+        elRect.height > parentRect.height
       ) {
-        element.style.bottom =
-          parentRect.height - targetRect.top + offset + "px";
-        element.style.top = "auto";
-      } else {
-        element.style.top = Math.max(-parentRect.top, tooltipTop) + "px";
-        element.style.bottom = "auto";
+        styleTop = parentRect.top + "px";
+        // if the bottom is off screen
+      } else if (elRect.bottom > parentRect.bottom) {
+        styleLeft = targetRect.bottom - elRect.height + "px";
       }
-    } else {
-      element.style.left = tooltipLeft + "px";
-      element.style.top = tooltipTop + "px";
     }
+    el.style.left = styleLeft;
+    el.style.top = styleTop;
+    //provide positions for el and target (in case furthor positioning adjustments are needed)
+    el.__positions = {
+      self: elRect,
+      parent: parentRect,
+      target: targetRect
+    };
   }
 
   /**
-   * life cycle, element is removed from the DOM
+   * life cycle, el is removed from the DOM
    */
@@ -253,0 +300,0 @@ disconnectedCallback() {

package.json

@@ -19,3 +19,3 @@ {
   },
-  "version": "2.0.10",
+  "version": "2.1.0",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -50,3 +50,3 @@ "repository": {
     "@polymer/iron-demo-helpers": "^3.1.0",
-    "@webcomponents/webcomponentsjs": "^2.2.9",
+    "@webcomponents/webcomponentsjs": "2.2.10",
     "concurrently": "4.1.0",
@@ -56,3 +56,3 @@ "gulp-babel": "8.0.0",
     "lodash": "4.17.11",
-    "polymer-cli": "1.9.8",
+    "polymer-cli": "1.9.9",
     "wct-browser-legacy": "1.0.2",
@@ -69,3 +69,3 @@ "web-animations-js": "2.3.1"
   ],
-  "gitHead": "8571f08ce381877be732c2b5407233bcc3c58d99"
+  "gitHead": "38a0c3ad00e8447837037bde2dc1172273a3a311"
 }

src/absolute-position-behavior-properties.json

@@ -7,3 +7,3 @@ {
   "auto": {
-    "type": Boolean,
+    "type": "Boolean",
     "value": false
@@ -15,3 +15,3 @@ },
   "fitToVisibleBounds": {
-    "type": Boolean,
+    "type": "Boolean",
     "value": false,
@@ -26,4 +26,5 @@ "observer": "updatePosition"
   "for": {
-    "type": String,
-    "observer": "updatePosition"
+    "type": "String",
+    "observer": "updatePosition",
+    "reflectToAttribute": true
   },
@@ -35,4 +36,5 @@ /**
   "offset": {
-    "type": Number,
-    "value": 0
+    "type": "Number",
+    "value": 0,
+    "observer": "updatePosition"
   },
@@ -43,3 +45,3 @@ /**
   "position": {
-    "type": String,
+    "type": "String",
     "value": "bottom",
@@ -53,5 +55,11 @@ "observer": "updatePosition",
   "target": {
-    "type": Object,
+    "type": "Object",
     "observer": "updatePosition"
+  },
+  /**
+   * The element's style
+   */
+  "__positions": {
+    "type": "Object"
   }
 }

src/absolute-position-behavior.js

@@ -35,2 +35,6 @@ /**
     super.connectedCallback();
+    let root = this;
+    root.__observe = false;
+    root.__manager = window.AbsolutePositionStateManager.requestAvailability();
+    if (root.auto !== false) root.setPosition();
   }
@@ -43,10 +47,6 @@
     super.ready();
-    let root = this;
-    root.__observe = false;
-    root.__manager = window.AbsolutePositionStateManager.requestAvailability();
-    if (root.auto === true) {
-      root.setPosition();
-    }
   }
-
+  /**
+   * Registers the element with AbsolutePositionStateManager
+   */
   setPosition() {
@@ -58,2 +58,5 @@ let root = this;
 
+  /**
+   * Unregisters the element with AbsolutePositionStateManager
+   */
   unsetPosition() {
@@ -65,6 +68,9 @@ let root = this;
 
+  /**
+   * Updates  the element's position
+   */
   updatePosition() {
     let root = this;
     if (root.__observe === true) {
-      root.__manager.updatePosition(root);
+      root.__manager.positionElement(root);
     }
@@ -71,0 +77,0 @@ }

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

355531

increased by1.58%

Lines of code

9253

increased by1.4%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes