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

Comparing version 4.0.1 to 4.0.4

absolute-position-behavior.js

@@ -41,2 +41,10 @@ /**
         /**
+         * Element has absolututely positioned children, such as menus
+         * and tooltips that are allowed to overlap the target
+         */
+        allowOverlap: {
+          type: Boolean,
+          attribute: "allow-overlap",
+        },
+        /**
          * Element is positioned from connected to disconnected?
@@ -156,2 +164,3 @@ * Otherwise setPosition and unsetPosition must be called manually.
             [
+              "allowOverlap",
               "fitToVisibleBounds",
@@ -158,0 +167,0 @@ "for",

lib/absolute-position-state-manager.js

@@ -95,5 +95,7 @@ /**
     }
-    this.elements.push(el);
-    el.style.top = 0;
-    el.style.left = 0;
+    if (this.elements.filter((element) => element === el).length < 1) {
+      this.elements.push(el);
+      el.style.top = 0;
+      el.style.left = 0;
+    }
     this.positionElement(el);
@@ -107,3 +109,3 @@ }
   unloadElement(el) {
-    this.elements.filter((element) => element === el);
+    this.elements = this.elements.filter((element) => element !== el);
     if (this.elements.length < 1) this.removeEventListeners();
@@ -135,4 +137,4 @@ }
   /**
-   * Checks if there are any chances other than to
-   * element's position and updates accordioning.
+   * Checks if there are any changes other than to
+   * element's position and update accordioningly.
    * This is needed so that positioning elements
@@ -157,3 +159,9 @@ * doesn't trigger an infinite loop of updates.
     });
-    if (update) this.updateElements();
+    if (update) {
+      if (this.__timeout) clearTimeout(this.__timeout);
+      this.__timeout = setTimeout(
+        window.AbsolutePositionStateManager.instance.updateElements(),
+        250
+      );
+    }
   }
@@ -263,7 +271,11 @@
   positionElement(el) {
+    //set up element's default position
     if (!el.position) {
       el.position = "bottom";
     }
+    el.style.position = "absolute";
     if (!el.style.top) el.style.top = "0px";
     if (!el.style.left) el.style.left = "0px";
+
+    //continue only if there is a target and a parent
     let target = this.findTarget(el),
@@ -273,7 +285,13 @@ parent = el.offsetParent,
     if (!target || !parent) return;
+    //if justify is set, re-adjust element to
+    //target width before getting other dimensions
     if (el.justify) el.style.width = `${t.width}px`;
-    let offset = parseFloat(el.offset),
-      w = document.body.getBoundingClientRect(),
+    //get body, parent, and element dimensions
+    let w = document.body.getBoundingClientRect(),
       p = parent.getBoundingClientRect(),
       e = el.getBoundingClientRect(),
+      //optional offset property
+      offset = parseFloat(el.offset),
+      //converts a value in px to a float
+      pxToNum = (px) => parseFloat(px.replace("px", "")),
       //place element before vertically?
@@ -289,4 +307,3 @@ vertical = (pos = el.position) => pos !== "left" && pos !== "right",
         //fits element within parent's boundaries
-        let pxToNum = (px) => parseFloat(px.replace("px", "")),
-          min = v
+        let min = v
             ? pxToNum(el.style.left) - e.left
@@ -312,9 +329,11 @@ : pxToNum(el.style.top) - e.top,
       },
+      //gets coordinate for top ot left position
       getCoord = (pos = el.position) => {
         let coord,
-          pxToNum = (px) => parseFloat(px.replace("px", "")),
           adjust = vertical(pos)
             ? pxToNum(el.style.top) - e.top
             : pxToNum(el.style.left) - e.left,
+          //determine whether overflowed content should be part of height/width calculations
           eh =
+            !el.allowOverlap &&
             window.getComputedStyle(el, null).overflowY == "visible"
@@ -324,5 +343,8 @@ ? Math.max(e.height, el.scrollHeight)
           ew =
+            !el.allowOverlap &&
             window.getComputedStyle(el, null).overflowX == "visible"
               ? Math.max(e.width, el.scrollWidth)
               : e.width;
+        //calculate coordinate based on position property,
+        // offset property, and whether overflowed conent should overlap the target
         coord =
@@ -336,2 +358,3 @@ pos === "top"
       },
+      //determines if element fits on screen in the desired position
       isFit = (pos = el.position) => {
@@ -345,3 +368,5 @@ //determines if room for element between parent and target
       },
+      //should element's position flip to fit element within bounds
       flip = el.fitToVisibleBounds !== false && !isFit(el.position),
+      //if position needs to be flipped, order of preference for new position
       flipData = {
@@ -353,3 +378,2 @@ top: ["bottom", "left", "right"],
       };
-    el.style.position = "absolute";
     /*
@@ -366,4 +390,6 @@ * fits element according to specified postion,
     }
+    //get top and left positions
     let tt = vertical(el.position) ? getCoord() : setAlign(),
       ll = vertical(el.position) ? setAlign() : getCoord();
+    //if element is sticky, adjust top posiiton accordingly
     if (el.sticky) {
@@ -389,2 +415,3 @@ let scrollTop =
     }
+    //set top and left positions
     el.style.top = tt + "px";
@@ -391,0 +418,0 @@ el.style.left = ll + "px";

package.json

@@ -20,3 +20,3 @@ {
   },
-  "version": "4.0.1",
+  "version": "4.0.4",
   "description": "Abstracting the positioning behavior from paper-tooltip to be resusable in other elements",
@@ -74,3 +74,3 @@ "repository": {
   ],
-  "gitHead": "4056b357dd00c362ba23128a37a60153101b15b9"
+  "gitHead": "d4cd14c5c57b408201bf4fa8f41d714de8b88f11"
 }

src/absolute-position-behavior-properties.json

 {
   /**
+   * Element has absolututely positioned children, such as menus
+   * and tooltips that are allowed to overlap the target
+   */
+  "allowOverlap": {
+    "type": "Boolean",
+    "attribute": "allow-overlap"
+  },
+  /**
    * Element is positioned from connected to disconnected?
@@ -4,0 +12,0 @@ * Otherwise setPosition and unsetPosition must be called manually.

src/absolute-position-behavior.js

@@ -45,2 +45,3 @@ /**
             [
+              "allowOverlap",
               "fitToVisibleBounds",
@@ -47,0 +48,0 @@ "for",

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

Worsened metrics

Total package byte prevSize

128649

decreased by-7.71%

Number of package files

26

decreased by-3.7%

Lines of code

2355

decreased by-16.78%

No dependency changes