feat(lib): track css computed position of absolute, relative or fixed

mcarlucci · Oct 30, 2018 · 0176239 · 0176239
1 parent 5599e03
commit 0176239
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -9,14 +9,23 @@
 ## Installation
 Include the following script before the closing `</body>` tag:
 ```html
-<script src="https://cdn.jsdelivr.net/npm/layercake-js/dist/layercake.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/layercake-js@1.0.2/dist/layercake.min.js"></script>
 ```
 
 ## Usage
-Add the `data-layercake-layer` html attribute to each html element you want to be managed by Layercake. Ex:
+Add the `data-layercake-layer` data attribute, as well as a `position` property of `absolute`, `relative` or `fixed` to each html element you want to be managed by Layercake.js.
 
+> Note: Elements with CSS computed properties of  `display: none;` or `visibility: hidden;` will not be tracked by Layercake.js.
+
+Example:
 ```html
+<style>
+  #popup {
+    position: absolute;
+  }
+</style>
+
 <div id="popup" data-layercake-layer>
-  Hi! I am a popup overlay managed by Layercake!
+  Hi! I am a popup overlay managed by Layercake.js!
 </div>
 ```
diff --git a/dist/layercake.es.js b/dist/layercake.es.js
@@ -1,6 +1,6 @@
 /**
   layercake-js: A deliciously automated z-index manager
-  @version v1.0.2
+  @version v1.1.0
   @link https://github.com/mcarlucci/layercake#readme
   @author Matt Carlucci <matthewcarlucci09@gmail.com> (mcarlucci.com)
   @license ISC
@@ -66,17 +66,15 @@ var observer = new MutationObserver(function (mutationList) {
           var child = _step2.value;
           var computedStyle = document.defaultView.getComputedStyle(child);
 
-          if (!child.hasAttribute("data-layercake-layer") || computedStyle.getPropertyValue("display") === 'none' || computedStyle.getPropertyValue("visibility") === 'hidden') {
-            return;
-          }
+          if (child.hasAttribute("data-layercake-layer") && ['absolute', 'fixed', 'relative'].includes(computedStyle.getPropertyValue("position")) && computedStyle.getPropertyValue("display") !== 'none' && computedStyle.getPropertyValue("visibility") !== 'hidden') {
+            if (highestZ > window.layerCake.zIndex) {
+              window.layerCake.zIndex = highestZ + 1;
+            } else {
+              window.layerCake.zIndex++;
+            }
 
-          if (highestZ > window.layerCake.zIndex) {
-            window.layerCake.zIndex = highestZ + 1;
-          } else {
-            window.layerCake.zIndex++;
+            child.style.zIndex = window.layerCake.zIndex;
           }
-
-          child.style.zIndex = window.layerCake.zIndex;
         }
       } catch (err) {
         _didIteratorError2 = true;

diff --git a/dist/layercake.js b/dist/layercake.js
@@ -1,6 +1,6 @@
 /**
   layercake-js: A deliciously automated z-index manager
-  @version v1.0.2
+  @version v1.1.0
   @link https://github.com/mcarlucci/layercake#readme
   @author Matt Carlucci <matthewcarlucci09@gmail.com> (mcarlucci.com)
   @license ISC
@@ -72,17 +72,15 @@
             var child = _step2.value;
             var computedStyle = document.defaultView.getComputedStyle(child);
 
-            if (!child.hasAttribute("data-layercake-layer") || computedStyle.getPropertyValue("display") === 'none' || computedStyle.getPropertyValue("visibility") === 'hidden') {
-              return;
-            }
+            if (child.hasAttribute("data-layercake-layer") && ['absolute', 'fixed', 'relative'].includes(computedStyle.getPropertyValue("position")) && computedStyle.getPropertyValue("display") !== 'none' && computedStyle.getPropertyValue("visibility") !== 'hidden') {
+              if (highestZ > window.layerCake.zIndex) {
+                window.layerCake.zIndex = highestZ + 1;
+              } else {
+                window.layerCake.zIndex++;
+              }
 
-            if (highestZ > window.layerCake.zIndex) {
-              window.layerCake.zIndex = highestZ + 1;
-            } else {
-              window.layerCake.zIndex++;
+              child.style.zIndex = window.layerCake.zIndex;
             }
-
-            child.style.zIndex = window.layerCake.zIndex;
           }
         } catch (err) {
           _didIteratorError2 = true;

diff --git a/dist/layercake.min.js b/dist/layercake.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "layercake-js",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A deliciously automated z-index manager",
   "main": "dist/layercake.js",
   "module": "dist/layercake.es.js",

diff --git a/src/layercake.js b/src/layercake.js
@@ -49,15 +49,17 @@ const observer = new MutationObserver(mutationList => {
   for (const mutation of mutationList) {
     for (const child of mutation.addedNodes) {
       let computedStyle = document.defaultView.getComputedStyle(child);
-      if (!child.hasAttribute("data-layercake-layer")
-          || computedStyle.getPropertyValue("display") === 'none'
-          || computedStyle.getPropertyValue("visibility") === 'hidden') { return; }
-      if (highestZ > window.layerCake.zIndex) {
-        window.layerCake.zIndex = highestZ + 1;
-      } else {
-        window.layerCake.zIndex++;
+      if (child.hasAttribute("data-layercake-layer")
+          && ['absolute', 'fixed', 'relative'].includes(computedStyle.getPropertyValue("position"))
+          && computedStyle.getPropertyValue("display") !== 'none'
+          && computedStyle.getPropertyValue("visibility") !== 'hidden') {
+        if (highestZ > window.layerCake.zIndex) {
+          window.layerCake.zIndex = highestZ + 1;
+        } else {
+          window.layerCake.zIndex++;
+        }
+        child.style.zIndex = window.layerCake.zIndex;
       }
-      child.style.zIndex = window.layerCake.zIndex;
     }
 
     for (const child of mutation.removedNodes) {