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

Comparing version 2.1.7 to 2.2.0

absolute-position-behavior.es6.js

@@ -5,3 +5,3 @@ /**
  */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { LitElement, html, css } from "lit-element/lit-element.js";
 import "./lib/absolute-position-state-manager";
@@ -11,3 +11,3 @@
  * `absolute-position-behavior`
- * `Abstracting the positioning behavior from paper-tooltip to be resusable in other elements`
+ * abstracts absolute positioning behavior to be resusable in other elements
  *
@@ -18,13 +18,12 @@ * @microcopy - language worth noting:
  * @customElement
- * @polymer
- * @demo demo/index.html
+ * @demo ./demo/index.html
  */
-class AbsolutePositionBehavior extends PolymerElement {
+class AbsolutePositionBehavior extends LitElement {
   
-  // render function
-  static get template() {
-    return html`
-<style>:host {
+  //styles function
+  static get styles() {
+    return  [
+      css`
+:host {
   display: inline-block;
-  position: absolute;
 }
@@ -35,3 +34,9 @@
 }
-</style>
+      `
+    ];
+  }
+  // render function
+  render() {
+    return html`
+
 <slot></slot>`;
@@ -42,3 +47,6 @@ }
     static get properties() {
-    let props = {
+    return {
+  
+  ...super.properties,
+  
   /**
@@ -49,4 +57,3 @@ * Element is positioned from connected to disconnected?
   "auto": {
-    "type": Boolean,
-    "value": false
+    "type": Boolean
   },
@@ -58,4 +65,3 @@ /**
     "type": Boolean,
-    "value": false,
-    "observer": "updatePosition"
+    "attribute": "fit-to-visible-bounds"
   },
@@ -69,4 +75,3 @@ /**
     "type": String,
-    "observer": "updatePosition",
-    "reflectToAttribute": true
+    "reflect": true
   },
@@ -78,5 +83,3 @@ /**
   "offset": {
-    "type": Number,
-    "value": 0,
-    "observer": "updatePosition"
+    "type": Number
   },
@@ -88,5 +91,3 @@ /**
     "type": String,
-    "value": "bottom",
-    "observer": "updatePosition",
-    "reflectToAttribute": true
+    "reflect": true
   },
@@ -97,4 +98,3 @@ /**
   "target": {
-    "type": Object,
-    "observer": "updatePosition"
+    "type": Object
   },
@@ -109,10 +109,6 @@ /**
 ;
-    if (super.properties) {
-      props = Object.assign(props, super.properties);
-    }
-    return props;
   }
 
   /**
-   * Store the tag name to make it easier to obtain directly.
+   * Store tag name to make it easier to obtain directly.
    * @notice function name must be here for tooling to operate correctly
@@ -124,52 +120,56 @@ */
 
-  /**
-   * life cycle, element is afixed to the DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    let root = this;
-    root.__observe = false;
-    root.__manager = window.AbsolutePositionStateManager.requestAvailability();
-    if (root.auto !== false) root.setPosition();
+  constructor() {
+    super();
+    this.auto = false;
+    this.fitToVisibleBounds = false;
+    this.for = null;
+    this.offset = 0;
+    this.position = "bottom";
+    this.target = null;
+    this.__positions = {};
+    this.__observe = false;
+    this.__manager = window.AbsolutePositionStateManager.requestAvailability();
   }
 
-  /**
-   * life cycle, element is ready
-   * @returns {void}
-   */
-  ready() {
-    super.ready();
+  updated(changedProperties) {
+    changedProperties.forEach((oldValue, propName) => {
+      if (propName === "auto" && this.auto) this.setPosition();
+      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 === "target") this.updatePosition();
+    });
   }
+
   /**
-   * Registers the element with AbsolutePositionStateManager
+   * Registers element with AbsolutePositionStateManager
    * @returns {void}
    */
   setPosition() {
-    let root = this;
-    root.__observe = true;
-    root.__manager.loadElement(root);
+    this.__observe = true;
+    this.__manager.loadElement(this);
   }
 
   /**
-   * Unregisters the element with AbsolutePositionStateManager
+   * Unregisters element with AbsolutePositionStateManager
    * @returns {void}
    */
   unsetPosition() {
-    let root = this;
-    root.__observe = false;
-    root.__manager.unloadElement(root);
+    this.__observe = false;
+    this.__manager.unloadElement(this);
   }
 
   /**
-   * Updates  the element's position
+   * Updates  element's position
    * @returns {void}
    */
   updatePosition() {
-    let root = this;
-    if (root.__observe === true) {
-      root.__manager.positionElement(root);
+    if (this.__observe === true) {
+      this.__manager.positionElement(this);
     }
   }
   /**
-   * life cycle, element is removed from the DOM
+   * life cycle, element is removed from DOM
    * @returns {void}
@@ -176,0 +176,0 @@ */

absolute-position-behavior.js

@@ -5,3 +5,3 @@ /**
  */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { LitElement, html, css } from "lit-element/lit-element.js";
 import "./lib/absolute-position-state-manager";
@@ -11,3 +11,3 @@
  * `absolute-position-behavior`
- * `Abstracting the positioning behavior from paper-tooltip to be resusable in other elements`
+ * abstracts absolute positioning behavior to be resusable in other elements
  *
@@ -18,13 +18,11 @@ * @microcopy - language worth noting:
  * @customElement
- * @polymer
- * @demo demo/index.html
+ * @demo ./demo/index.html
  */
-class AbsolutePositionBehavior extends PolymerElement {
-  // render function
-  static get template() {
-    return html`
-      <style>
+class AbsolutePositionBehavior extends LitElement {
+  //styles function
+  static get styles() {
+    return [
+      css`
         :host {
           display: inline-block;
-          position: absolute;
         }
@@ -35,3 +33,8 @@
         }
-      </style>
+      `
+    ];
+  }
+  // render function
+  render() {
+    return html`
       <slot></slot>
@@ -43,3 +46,5 @@ `;
   static get properties() {
-    let props = {
+    return {
+      ...super.properties,
+
       /**
@@ -50,4 +55,3 @@ * Element is positioned from connected to disconnected?
       auto: {
-        type: Boolean,
-        value: false
+        type: Boolean
       },
@@ -59,4 +63,3 @@ /**
         type: Boolean,
-        value: false,
-        observer: "updatePosition"
+        attribute: "fit-to-visible-bounds"
       },
@@ -70,4 +73,3 @@ /**
         type: String,
-        observer: "updatePosition",
-        reflectToAttribute: true
+        reflect: true
       },
@@ -79,5 +81,3 @@ /**
       offset: {
-        type: Number,
-        value: 0,
-        observer: "updatePosition"
+        type: Number
       },
@@ -89,5 +89,3 @@ /**
         type: String,
-        value: "bottom",
-        observer: "updatePosition",
-        reflectToAttribute: true
+        reflect: true
       },
@@ -98,4 +96,3 @@ /**
       target: {
-        type: Object,
-        observer: "updatePosition"
+        type: Object
       },
@@ -109,10 +106,6 @@ /**
     };
-    if (super.properties) {
-      props = Object.assign(props, super.properties);
-    }
-    return props;
   }
 
   /**
-   * Store the tag name to make it easier to obtain directly.
+   * Store tag name to make it easier to obtain directly.
    * @notice function name must be here for tooling to operate correctly
@@ -124,52 +117,56 @@ */
 
-  /**
-   * life cycle, element is afixed to the DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    let root = this;
-    root.__observe = false;
-    root.__manager = window.AbsolutePositionStateManager.requestAvailability();
-    if (root.auto !== false) root.setPosition();
+  constructor() {
+    super();
+    this.auto = false;
+    this.fitToVisibleBounds = false;
+    this.for = null;
+    this.offset = 0;
+    this.position = "bottom";
+    this.target = null;
+    this.__positions = {};
+    this.__observe = false;
+    this.__manager = window.AbsolutePositionStateManager.requestAvailability();
   }
 
-  /**
-   * life cycle, element is ready
-   * @returns {void}
-   */
-  ready() {
-    super.ready();
+  updated(changedProperties) {
+    changedProperties.forEach((oldValue, propName) => {
+      if (propName === "auto" && this.auto) this.setPosition();
+      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 === "target") this.updatePosition();
+    });
   }
+
   /**
-   * Registers the element with AbsolutePositionStateManager
+   * Registers element with AbsolutePositionStateManager
    * @returns {void}
    */
   setPosition() {
-    let root = this;
-    root.__observe = true;
-    root.__manager.loadElement(root);
+    this.__observe = true;
+    this.__manager.loadElement(this);
   }
 
   /**
-   * Unregisters the element with AbsolutePositionStateManager
+   * Unregisters element with AbsolutePositionStateManager
    * @returns {void}
    */
   unsetPosition() {
-    let root = this;
-    root.__observe = false;
-    root.__manager.unloadElement(root);
+    this.__observe = false;
+    this.__manager.unloadElement(this);
   }
 
   /**
-   * Updates  the element's position
+   * Updates  element's position
    * @returns {void}
    */
   updatePosition() {
-    let root = this;
-    if (root.__observe === true) {
-      root.__manager.positionElement(root);
+    if (this.__observe === true) {
+      this.__manager.positionElement(this);
     }
   }
   /**
-   * life cycle, element is removed from the DOM
+   * life cycle, element is removed from DOM
    * @returns {void}
@@ -176,0 +173,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 u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?u(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 p=function(e){function o(){var e;n(this,o);u(e=l(this,s(o).call(this)));return window.AbsolutePositionStateManager.instance?e:(window.AbsolutePositionStateManager.instance=u(e),l(e,u(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=e.offset,o=e.offsetParent.getBoundingClientRect(),i=t.getBoundingClientRect(),r=e.getBoundingClientRect(),s=function(e){return"left"!==e&&"right"!==e},a=function(){var t=s(e.position)?"left":"top",n=s(e.position)?"right":"bottom",a=function(t){return s(e.position)?t.width:t.height},u=i[t]-a(r)/2+a(i)/2,l=o[t],c=o[n]-a(r);return e.fitToVisibleBounds?Math.max(l,Math.min(c,u))+"px":u+"px"},u=function(){return"top"===e.position?i.top-r.height-n+"px":"left"===e.position?i.left-r.width-n+"px":i[e.position]+n+"px"},l=function(e){var t=s(e)?r.height+n:r.width+n;return function(e){return"left"===e||"top"===e}(e)?i[e]-o[e]>t:o[e]-i[e]>t},c=!1!==e.fitToVisibleBounds&&!l(e.position),p={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};c&&l(p[e.position][0])?e.position=p[e.position][0]:c&&l(p[e.position][1])?e.position=p[e.position][1]:c&&l(p[e.position][2])?e.position=p[e.position][2]:(e.style.position="absolute",e.style.top=s(e.position)?u():a(),e.style.left=s(e.position)?a():u(),e.__positions={self:r,parent:o,target:i})}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),c(s(o.prototype),"disconnectedCallback",this).call(this)}}]),o}();function f(){var e,t,n=(e=["\n<style>:host {\n  display: inline-block;\n  position: absolute;\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 f=function(){return n},n}window.customElements.define(p.tag,p);var d=function(e){function o(){return n(this,o),l(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(f())}},{key:"properties",get:function(){var e={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}};return c(s(o),"properties",this)&&(e=Object.assign(e,c(s(o),"properties",this))),e}},{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(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit-element/lit-element.js"),require("@polymer/iron-resizable-behavior/iron-resizable-behavior.js")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js","@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],e):e((t=t||self).AbsolutePositionBehavior={},t.litElement_js)}(this,function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(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 i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(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&&a(t,e)}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function l(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 c(t,e,n){return(c="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=u(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 f(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 p=function(t){function o(){var t;return n(this,o),(t=l(this,u(o).call(this))).elements=[],t.__timeout=!1,t.__observer=new MutationObserver(function(e){return t.checkMutations(e)}),t}return s(o,e.LitElement),i(o,null,[{key:"tag",get:function(){return"absolute-position-state-manager"}},{key:"properties",get:function(){return{elements:{type:Array},__observer:{type:Object},__timeout:{type:Object}}}}]),i(o,[{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),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=1===document.querySelectorAll(e).length?document.querySelector(e):null,o=t.target||n,i=t;void 0!==t.for&&null===o&&null!==i&&i!==document;)11===(i=i.parentNode).nodeType&&(i=i.host),o=i?i.querySelector(e):null;return o}},{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:"positionElement",value:function(t){var e=this.findTarget(t);if(e&&t.offsetParent){var n=t.offset,o=t.offsetParent.getBoundingClientRect(),i=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=function(t){return"left"!==t&&"right"!==t},u=function(){var e=s(t.position)?"left":"top",n=s(t.position)?"right":"bottom",u=function(e){return s(t.position)?e.width:e.height},a=i[e]-u(r)/2+u(i)/2,l=o[e],c=o[n]-u(r);return t.fitToVisibleBounds?Math.max(l,Math.min(c,a))+"px":a+"px"},a=function(){return"top"===t.position?i.top-r.height-n+"px":"left"===t.position?i.left-r.width-n+"px":i[t.position]+n+"px"},l=function(t){var e=s(t)?r.height+n:r.width+n;return function(t){return"left"===t||"top"===t}(t)?i[t]-o[t]>e:o[t]-i[t]>e},c=!1!==t.fitToVisibleBounds&&!l(t.position),f={top:["bottom","left","right"],left:["right","top","bottom"],bottom:["top","right","left"],right:["left","bottom","top"]};c&&l(f[t.position][0])?t.position=f[t.position][0]:c&&l(f[t.position][1])?t.position=f[t.position][1]:c&&l(f[t.position][2])?t.position=f[t.position][2]:(t.style.position="absolute",t.style.top=s(t.position)?a():u(),t.style.left=s(t.position)?u():a(),t.__positions={self:r,parent:o,target:i})}}},{key:"disconnectedCallback",value:function(){this.removeEventListeners(),c(u(o.prototype),"disconnectedCallback",this).call(this)}}]),o}();function d(){var t=f(["\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n      "]);return d=function(){return t},t}function h(){var t=f(["\n\n<slot></slot>"]);return h=function(){return t},t}window.customElements.define(p.tag,p);var b=function(t){function o(){var t;return n(this,o),(t=l(this,u(o).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(o,e.LitElement),i(o,[{key:"render",value:function(){return e.html(h())}}],[{key:"styles",get:function(){return[e.css(d())]}},{key:"properties",get:function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){r(t,e,n[e])})}return t}({},c(u(o),"properties",this),{auto:{type:Boolean},fitToVisibleBounds:{type:Boolean,attribute:"fit-to-visible-bounds"},for:{type:String,reflect:!0},offset:{type:Number},position:{type:String,reflect:!0},target:{type:Object},__positions:{type:Object}})}},{key:"tag",get:function(){return"absolute-position-behavior"}}]),i(o,[{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(),"target"===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(),c(u(o.prototype),"disconnectedCallback",this).call(this)}}]),o}();window.customElements.define(b.tag,b),t.AbsolutePositionBehavior=b,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=absolute-position-behavior.umd.js.map

gulpfile.js

@@ -40,5 +40,12 @@ const gulp = require("gulp");
           );
-          let props = `${rawprops}`;
-          props = props.replace(/\"type\": \"(\w+)\"/g, '"type": $1');
-          let cssResult = "<style>";
+          let props = `${rawprops}`,
+            comma = props
+              .replace(/\/\*[\s\S]*?\*\//g, "")
+              .replace(/\/\/.*/g, "")
+              .replace(/[\{\s\n\}]/g, "");
+          (props = props.replace(/\"type\": \"(\w+)\"/g, '"type": $1')),
+            (superprops =
+              comma === "" ? `...super.properties` : `...super.properties,`);
+          props = props.replace(/\{([\s\n]*)/, `{$1$1${superprops}$1$1`);
+          let cssResult = "";
           if (
@@ -57,9 +64,46 @@ packageJson.wcfactory.useSass &&
           }
-          cssResult += "</style>";
+          let styleRegex = /\/\*[\s]*LIST SHARED STYLES BELOW[\s]*((?:(?:\w+)[\s,]*)*)\*\//g,
+            styleArray =
+              cssResult.match(styleRegex) &&
+              cssResult.match(styleRegex).length > 0
+                ? cssResult
+                    .match(styleRegex)[0]
+                    .replace(styleRegex, "$1")
+                    .match(/(\w+)[\s,]*/g)
+                : [];
+          sharedStyles =
+            styleArray && styleArray.length > 0
+              ? styleArray.map(style =>
+                  style.replace(
+                    /(\w+)[\s,]*/g,
+                    `
+        $1`
+                  )
+                )
+              : ``;
           cssResult = stripCssComments(cssResult).trim();
-          return `
+          let litResult =
+              packageJson.wcfactory.customElementClass !== "LitElement"
+                ? ``
+                : `
+  //styles function
+  static get styles() {
+    return  [${sharedStyles ? `${sharedStyles},` : ``}
+      css\`
+${cssResult}
+      \`
+    ];
+  }`,
+            styleResult =
+              packageJson.wcfactory.customElementClass !== "LitElement"
+                ? `<style>
+${cssResult}
+        </style>`
+                : ``;
+
+          return `${litResult}
   // render function
-  static get template() {
+  render() {
     return html\`
-${cssResult}
+${styleResult}
 ${html}\`;
@@ -70,7 +114,3 @@ }
     static get properties() {
-    let props = ${props};
-    if (super.properties) {
-      props = Object.assign(props, super.properties);
-    }
-    return props;
+    return ${props};
   }`;
@@ -77,0 +117,0 @@ }

lib/absolute-position-state-manager.js

@@ -5,3 +5,3 @@ /**
  */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { LitElement } from "lit-element/lit-element.js";
 import "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
@@ -11,5 +11,5 @@
 window.AbsolutePositionStateManager = window.AbsolutePositionStateManager || {};
-// request if this exists. This helps invoke the el existing in the dom
+// request if this exists. This helps invoke element existing in dom
 // as well as that there is only one of them. That way we can ensure everything
-// is rendered through the same modal
+// is rendered through same modal
 window.AbsolutePositionStateManager.requestAvailability = () => {
@@ -20,3 +20,4 @@ if (!window.AbsolutePositionStateManager.instance) {
     );
-    document.body.appendChild(window.AbsolutePositionStateManager.instance);
+    let instance = window.AbsolutePositionStateManager.instance;
+    document.body.appendChild(instance);
   }
@@ -27,16 +28,12 @@ return window.AbsolutePositionStateManager.instance;
  * `absolute-position-state-manager`
- * `A utility that manages the state of multiple a11y-media-players on a single page.`
+ * manages state of multiple absolute-positioned elements on a page
  *
- * @microcopy - language worth noting:
- *  -
- *
  * @customElement
  * @polymer
  */
-class AbsolutePositionStateManager extends PolymerElement {
+class AbsolutePositionStateManager extends LitElement {
   /* REQUIRED FOR TOOLING DO NOT TOUCH */
 
   /**
-   * Store the tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
+   * Store tag name to make it easier to obtain directly.
    */
@@ -47,11 +44,22 @@ static get tag() {
 
-  // properties available to the custom el for data binding
+  // properties available to custom element for data binding
   static get properties() {
     return {
       /**
-       * Stores an array of all the players on the page.
+       * Stores an array of all elements using manager.
        */
-      els: {
-        type: Array,
-        value: []
+      elements: {
+        type: Array
+      },
+      /**
+       * mutation observer
+       */
+      __observer: {
+        type: Object
+      },
+      /**
+       * resize timeout
+       */
+      __timeout: {
+        type: Object
       }
@@ -62,66 +70,52 @@ };
   /**
-   * Makes sure there is a utility ready and listening for els.
+   * Makes sure there is a utility ready and listening for elements.
    */
   constructor() {
     super();
-    let root = this;
-
-    // sets the instance to the current instance
-    if (!window.AbsolutePositionStateManager.instance) {
-      window.AbsolutePositionStateManager.instance = this;
-      return this;
-    }
+    this.elements = [];
+    this.__timeout = false;
+    this.__observer = new MutationObserver(mutations =>
+      this.checkMutations(mutations)
+    );
   }
 
   /**
-   * life cycle, el is afixed to the DOM
-   * Makes sure there is a utility ready and listening for els.
+   * Loads element into array
+   * @param {object} element to be added
    */
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  /**
-   * Loads el into array
-   */
   loadElement(el) {
-    let root = this;
-    root.__on = root.__on !== undefined ? root.__on : false;
-    root.els.push(el);
-    root.positionElement(el);
-    if (!root.__on) root.addEventListeners();
-    root.__on = true;
+    //only have event listeners when there are elements using manager
+    if (this.elements.length < 1) {
+      this.__observer.observe(document, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+      this.updateElements();
+      document.addEventListener("load", this.updateElements);
+      window.addEventListener("resize", this._handleResize);
+    }
+    this.elements.push(el);
+    this.positionElement(el);
   }
 
   /**
-   * Unloads el from array
+   * Unloads element from array
+   * @param {object} element to be removed
    */
   unloadElement(el) {
-    let root = this;
-    root.els.filter(el => el === el);
-    root.__on = root.els > 0;
-    if (!root.__on) root.removeEventListeners();
+    this.elements.filter(element => element === el);
+    if (this.elements.length < 1) this.removeEventListeners();
   }
 
   /**
-   * Adds event listeners
+   * handles resize event
    */
-  addEventListeners() {
-    let root = this;
-    root.__timeout = false;
-    root.updateElements();
-    document.addEventListener("load", root.updateElements());
-    window.addEventListener("resize", function() {
-      clearTimeout(root.__timeout);
-      root.__timeout = setTimeout(root.updateElements(), 250);
-    });
-    root.__observer = new MutationObserver(function(mutations) {
-      root.checkMutations(mutations);
-    });
-    root.__observer.observe(document, {
-      attributes: true,
-      childList: true,
-      subtree: true,
-      characterData: true
-    });
+  _handleResize() {
+    if (this.__timeout) clearTimeout(this.__timeout);
+    this.__timeout = setTimeout(
+      window.AbsolutePositionStateManager.instance.updateElements(),
+      250
+    );
   }
@@ -131,4 +125,4 @@
    * Checks if there are any chances other than to
-   * the element's position and updates accordioning.
-   * This is needed so that positioning the elements
+   * element's position and updates accordioning.
+   * This is needed so that positioning elements
    * doesn't trigger an infinite loop of updates.
@@ -149,3 +143,3 @@ *
           mutation.attributeName === "style" &&
-          this.els.includes(mutation.target)
+          this.elements.includes(mutation.target)
         );
@@ -157,6 +151,10 @@ });
   /**
-   * 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.
+   * Returns target element that this element is anchored to. It is
+   * either element given by `for` attribute, or immediate parent
+   * of element.
    *
+   * Uses `target` object if specified.
+   * If not, queries document for elements with id specified in `for` attribute.
+   * If there is more than one element that matches, gets closest matching element.
+   *
    * @param {object} element using absolute-position behavior
@@ -174,7 +172,2 @@ * @return {object} target element for positioning
 
-    /**
-     * 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 (
@@ -198,22 +191,14 @@ el.for !== undefined &&
   removeEventListeners() {
-    let root = this;
-    document.removeEventListener("load", root.updateElements());
-    window.removeEventListener("resize", function() {
-      clearTimeout(root.__timeout);
-      root.__timeout = setTimeout(root.updateElements(), 250);
-    });
-    if (root.__observer) {
-      root.__observer.disconnect();
-    }
+    if (this.__observer && this.__observer.disconnect)
+      this.__observer.disconnect();
+    document.removeEventListener("load", this.updateElements);
+    window.removeEventListener("resize", this._handleResize);
   }
 
   /**
-   * Updates position for all elements on the page.
+   * Updates position for all elements on page.
    * @return {void}
    */
   updateElements() {
-    let root = this;
-    root.els.forEach(el => {
-      root.positionElement(el);
-    });
+    this.elements.forEach(element => this.positionElement(element));
   }
@@ -223,3 +208,3 @@
    * Gets an updated position based on target.
-   * @param {object} the element using absolute-position behavior
+   * @param {object} element using absolute-position behavior
    * @return {void}
@@ -234,21 +219,16 @@ */
       elRect = el.getBoundingClientRect(),
-      /**
-       * place the element before the vertically?
-       * @param {string} position as in "top", "left", "right", or "bottom"
-       */
       vertical = position => {
+        //place element before vertically?
         return position !== "left" && position !== "right";
       },
-      /**
-       * place the element before the target?
-       */
       before = position => {
+        //place element before target?
         return position === "left" || position === "top";
       },
       /**
-       * fits the element within the parent's boundaries;
-       * if element is larget than the parent,
-       * it will be aligned where parent begins
+       * ;
+       *
        */
       fitToBounds = () => {
+        //fits element within parent's boundaries
         let pos1 = vertical(el.position) ? "left" : "top",
@@ -260,13 +240,11 @@ pos2 = vertical(el.position) ? "right" : "bottom",
           coord =
-            targetRect[pos1] - getRect(elRect) / 2 + getRect(targetRect) / 2, //works for left
+            targetRect[pos1] - getRect(elRect) / 2 + getRect(targetRect) / 2,
           min = parentRect[pos1],
           max = parentRect[pos2] - getRect(elRect);
         return el.fitToVisibleBounds
-          ? Math.max(min, Math.min(max, coord)) + "px" //Math.max(min, Math.min(max, coord)) + "px"
-          : coord + "px";
+          ? Math.max(min, Math.min(max, coord)) + "px"
+          : coord + "px"; //if element size > parent, align where parent begins
       },
-      /**
-       * adds or subtracts the offset from the target based on a given postion
-       */
       getCoord = () => {
+        //adds or subtracts offset from target based on position
         return el.position === "top"
@@ -278,8 +256,4 @@ ? targetRect.top - elRect.height - offset + "px"
       },
-      /**
-       * determines if there is room for the element between
-       * the parent and target in a given position;
-       * if no room in any position it will return the original position
-       */
       isFit = position => {
+        //determines if room for element between parent and target
         let size = vertical(position)
@@ -290,3 +264,3 @@ ? elRect.height + offset
           ? targetRect[position] - parentRect[position] > size
-          : parentRect[position] - targetRect[position] > size;
+          : parentRect[position] - targetRect[position] > size; //if no room, return original position
       };
@@ -301,3 +275,3 @@ let flip = el.fitToVisibleBounds !== false && !isFit(el.position),
     /*
-     * fits the element according to specified postion,
+     * fits element according to specified postion,
      * or finds an alternative position that fits
@@ -315,3 +289,3 @@ */
       el.style.left = vertical(el.position) ? fitToBounds() : getCoord();
-      //provide positions for el and target (in case furthor positioning adjustments are needed)
+      //provide positions for element and target (in case furthor positioning adjustments are needed)
       el.__positions = {
@@ -326,3 +300,3 @@ self: elRect,
   /**
-   * life cycle, el is removed from the DOM
+   * life cycle, element is removed from DOM
    */
@@ -329,0 +303,0 @@ disconnectedCallback() {

package.json

@@ -5,3 +5,3 @@ {
     "className": "AbsolutePositionBehavior",
-    "customElementClass": "PolymerElement",
+    "customElementClass": "LitElement",
     "elementName": "absolute-position-behavior",
@@ -20,3 +20,3 @@ "generator-wcfactory-version": "0.7.1",
   },
-  "version": "2.1.7",
+  "version": "2.2.0",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -44,3 +44,4 @@ "repository": {
   "dependencies": {
-    "@polymer/polymer": "^3.2.0"
+    "@polymer/iron-resizable-behavior": "^3.0.0",
+    "lit-element": "^2.2.1"
   },
@@ -68,3 +69,3 @@ "devDependencies": {
   ],
-  "gitHead": "bc02a82db422479c2a4e9079618f99161a6a6a80"
+  "gitHead": "d8dfc961c1e93dbe8c38b40c82e288af057d6477"
 }

src/absolute-position-behavior-properties.json

@@ -7,4 +7,3 @@ {
   "auto": {
-    "type": Boolean,
-    "value": false
+    "type": "Boolean"
   },
@@ -15,5 +14,4 @@ /**
   "fitToVisibleBounds": {
-    "type": Boolean,
-    "value": false,
-    "observer": "updatePosition"
+    "type": "Boolean",
+    "attribute": "fit-to-visible-bounds"
   },
@@ -26,5 +24,4 @@ /**
   "for": {
-    "type": String,
-    "observer": "updatePosition",
-    "reflectToAttribute": true
+    "type": "String",
+    "reflect": true
   },
@@ -36,5 +33,3 @@ /**
   "offset": {
-    "type": Number,
-    "value": 0,
-    "observer": "updatePosition"
+    "type": "Number"
   },
@@ -45,6 +40,4 @@ /**
   "position": {
-    "type": String,
-    "value": "bottom",
-    "observer": "updatePosition",
-    "reflectToAttribute": true
+    "type": "String",
+    "reflect": true
   },
@@ -55,4 +48,3 @@ /**
   "target": {
-    "type": Object,
-    "observer": "updatePosition"
+    "type": "Object"
   },
@@ -63,4 +55,4 @@ /**
   "__positions": {
-    "type": Object
+    "type": "Object"
   }
 }

src/absolute-position-behavior.js

@@ -5,3 +5,3 @@ /**
  */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { LitElement, html, css } from "lit-element/lit-element.js";
 import "./lib/absolute-position-state-manager";
@@ -11,3 +11,3 @@
  * `absolute-position-behavior`
- * `Abstracting the positioning behavior from paper-tooltip to be resusable in other elements`
+ * abstracts absolute positioning behavior to be resusable in other elements
  *
@@ -18,10 +18,9 @@ * @microcopy - language worth noting:
  * @customElement
- * @polymer
- * @demo demo/index.html
+ * @demo ./demo/index.html
  */
-class AbsolutePositionBehavior extends PolymerElement {
+class AbsolutePositionBehavior extends LitElement {
   /* REQUIRED FOR TOOLING DO NOT TOUCH */
 
   /**
-   * Store the tag name to make it easier to obtain directly.
+   * Store tag name to make it easier to obtain directly.
    * @notice function name must be here for tooling to operate correctly
@@ -33,52 +32,56 @@ */
 
-  /**
-   * life cycle, element is afixed to the DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    let root = this;
-    root.__observe = false;
-    root.__manager = window.AbsolutePositionStateManager.requestAvailability();
-    if (root.auto !== false) root.setPosition();
+  constructor() {
+    super();
+    this.auto = false;
+    this.fitToVisibleBounds = false;
+    this.for = null;
+    this.offset = 0;
+    this.position = "bottom";
+    this.target = null;
+    this.__positions = {};
+    this.__observe = false;
+    this.__manager = window.AbsolutePositionStateManager.requestAvailability();
   }
 
-  /**
-   * life cycle, element is ready
-   * @returns {void}
-   */
-  ready() {
-    super.ready();
+  updated(changedProperties) {
+    changedProperties.forEach((oldValue, propName) => {
+      if (propName === "auto" && this.auto) this.setPosition();
+      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 === "target") this.updatePosition();
+    });
   }
+
   /**
-   * Registers the element with AbsolutePositionStateManager
+   * Registers element with AbsolutePositionStateManager
    * @returns {void}
    */
   setPosition() {
-    let root = this;
-    root.__observe = true;
-    root.__manager.loadElement(root);
+    this.__observe = true;
+    this.__manager.loadElement(this);
   }
 
   /**
-   * Unregisters the element with AbsolutePositionStateManager
+   * Unregisters element with AbsolutePositionStateManager
    * @returns {void}
    */
   unsetPosition() {
-    let root = this;
-    root.__observe = false;
-    root.__manager.unloadElement(root);
+    this.__observe = false;
+    this.__manager.unloadElement(this);
   }
 
   /**
-   * Updates  the element's position
+   * Updates  element's position
    * @returns {void}
    */
   updatePosition() {
-    let root = this;
-    if (root.__observe === true) {
-      root.__manager.positionElement(root);
+    if (this.__observe === true) {
+      this.__manager.positionElement(this);
     }
   }
   /**
-   * life cycle, element is removed from the DOM
+   * life cycle, element is removed from DOM
    * @returns {void}
@@ -85,0 +88,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

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

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

Worsened metrics

Total package byte prevSize

152927

decreased by-56.98%

Dependency count

2

increased by100%

Lines of code

3322

decreased by-63.49%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@polymer/iron-resizable-behavior@^3.0.0

• + Addedlit-element@^2.2.1

• + Added@polymer/iron-resizable-behavior@3.0.1(transitive)

• + Addedlit-element@2.5.1(transitive)

• + Addedlit-html@1.4.1(transitive)

• - Removed@polymer/polymer@^3.2.0