@contactstudio/mindbeui - npm Package Compare versions

Comparing version 0.0.64 to 0.0.65

dist/mindbeui.js

@@ -1,1 +0,1 @@
-(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";console.log("Mindbe UI"),function(){window&&document&&(document.addEventListener("DOMContentLoaded",()=>{n(),c()}),document.addEventListener("click",()=>{n(),c()}))}();async function n(){const e=document.querySelectorAll(".accordion .item");for(const t of e)t.onclick=()=>{const i=t.parentElement.querySelectorAll(".item:not([disabled])");for(const o of i)o!==t&&o.removeAttribute("open")}}function c(){const e=document.querySelectorAll("*[dropdown-trigger]");for(const t of e){const i=document.querySelector(`.dropdown[dropdown="${t.getAttribute("dropdown-trigger")}"]`);l({trigger:t,dropdown:i})}}function l({trigger:e,dropdown:t}){e.onclick=()=>{u(),f({dropdown:t}),r({trigger:e,dropdown:t}),a({trigger:e,dropdown:t}),d({trigger:e,dropdown:t})}}function u(){const e=document.querySelectorAll("*[dropdown]");for(const t of e)t.classList.remove("visible")}function f({dropdown:e}){if(e.classList.contains("visible")){e.classList.remove("visible");return}e.classList.add("visible")}function d({trigger:e,dropdown:t}){document.onclick=i=>{!e.contains(i.target)&&!t.contains(i.target)&&t.classList.remove("visible")}}function a({trigger:e,dropdown:t}){const i=t.querySelectorAll(".item");for(const o of i)o.onclick=()=>{r({trigger:e,dropdown:t}),!t.hasAttribute("static")&&t.classList.remove("visible")}}function r({trigger:e,dropdown:t}){const{top:i,left:o,right:p,height:m}=e.getBoundingClientRect(),{width:y,height:g}=t.getBoundingClientRect(),b=Math.abs(document.body.getBoundingClientRect().top),s=i+b;if(t.hasAttribute("dropend")){t.style.setProperty("top",`${s}px`),t.style.setProperty("left",`${p}px`);return}if(t.hasAttribute("dropstart")){t.style.setProperty("top",`${s}px`),t.style.setProperty("left",`${o-y}px`);return}if(t.hasAttribute("dropup")){t.style.setProperty("top",`${s-g}px`),t.style.setProperty("left",`${o}px`);return}t.style.setProperty("top",`${s+m}px`),t.style.setProperty("left",`${o}px`)}const v=""});
+(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";console.log("Mindbe UI");async function n(){const e=document.querySelectorAll(".accordion .item:not([disabled]");for(const t of e)t.onclick=()=>{const o=t.parentElement.querySelectorAll(".item:not([disabled])");for(const i of o)i!==t&&i.removeAttribute("open")}}function r(){const e=document.querySelectorAll("*[dropdown-trigger]");for(const t of e){const o=document.querySelector(`.dropdown[dropdown="${t.getAttribute("dropdown-trigger")}"]`);y({trigger:t,dropdown:o})}}function y({trigger:e,dropdown:t}){e.onclick=()=>{b({dropdown:t}),w({dropdown:t}),c({trigger:e,dropdown:t}),window.onresize=()=>{c({trigger:e,dropdown:t})},document.onscroll=()=>{c({trigger:e,dropdown:t})},v({dropdown:t}),A({trigger:e,dropdown:t})}}function b({dropdown:e}){const t=document.querySelectorAll("*[dropdown]");for(const o of t)e!==o&&s({dropdown:o})}function w({dropdown:e}){e.classList.toggle("visible"),e.classList.contains("visible")||l()}function A({trigger:e,dropdown:t}){document.onclick=o=>{!e.contains(o.target)&&!t.contains(o.target)&&s({dropdown:t})}}function v({dropdown:e}){const t=e.querySelectorAll(".item");for(const o of t)o.onclick=()=>{e.hasAttribute("static")||s({dropdown:e})}}function c({trigger:e,dropdown:t}){const{top:o,bottom:i,left:D,right:E}=e.getBoundingClientRect(),{width:d,height:u}=t.getBoundingClientRect(),{width:T,height:L,top:f,left:g}=document.body.getBoundingClientRect(),m=E-g,k=D-g,a=i-f,x=o-f,p=m+d>T,h=a+u>L;h||t.style.setProperty("top",`${a}px`),h&&t.style.setProperty("top",`${x-u}px`),p||t.style.setProperty("left",`${k}px`),p&&t.style.setProperty("left",`${m-d}px`)}function s({dropdown:e}){e.classList.remove("visible"),l()}function l(){window.onresize=()=>{},document.onscroll=()=>{}}(function(){window&&document&&(document.addEventListener("DOMContentLoaded",()=>{n(),r()}),document.addEventListener("click",()=>{n(),r()}))})();const q=""});

package.json

 {
   "name": "@contactstudio/mindbeui",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "dist/mindbeui.js",

src/index.js

 console.log("Mindbe UI");
 
-(function init() {
-  if (window && document) {
-    document.addEventListener("DOMContentLoaded", () => {
-      Accordion();
-      Dropdown();
-    });
-    document.addEventListener("click", () => {
-      Accordion();
-      Dropdown();
-    });
-  }
-})();
-
 async function Accordion() {
-  const items = document.querySelectorAll(".accordion .item");
+  const items = document.querySelectorAll(".accordion .item:not([disabled]");
 
@@ -48,6 +35,14 @@ for (const item of items) {
   trigger.onclick = () => {
-    hideAllDropdown();
+    hideAllDropdown({ dropdown });
     toggleDropdown({ dropdown });
     setPositionDropdown({ trigger, dropdown });
-    addHideEventDropdownItems({ trigger, dropdown });
+
+    window.onresize = () => {
+      setPositionDropdown({ trigger, dropdown });
+    };
+    document.onscroll = () => {
+      setPositionDropdown({ trigger, dropdown });
+    };
+
+    addHideEventDropdownItems({ dropdown });
     addHideEventDropdown({ trigger, dropdown });
@@ -57,7 +52,8 @@ };
 
-function hideAllDropdown() {
+function hideAllDropdown({ dropdown }) {
   const dropdowns = document.querySelectorAll("*[dropdown]");
 
-  for (const dropdown of dropdowns) {
-    dropdown.classList.remove("visible");
+  for (const mydropdown of dropdowns) {
+    if (dropdown === mydropdown) continue;
+    hideDropdownAndResetWindowEvents({ dropdown: mydropdown });
   }
@@ -67,8 +63,4 @@ }
 function toggleDropdown({ dropdown }) {
-  if (dropdown.classList.contains("visible")) {
-    dropdown.classList.remove("visible");
-    return;
-  }
-
-  dropdown.classList.add("visible");
+  dropdown.classList.toggle("visible");
+  if (!dropdown.classList.contains("visible")) resetWindowEvents();
 }
@@ -82,3 +74,3 @@
     if (isOutsideClick) {
-      dropdown.classList.remove("visible");
+      hideDropdownAndResetWindowEvents({ dropdown });
     }
@@ -88,3 +80,3 @@ };
 
-function addHideEventDropdownItems({ trigger, dropdown }) {
+function addHideEventDropdownItems({ dropdown }) {
   const items = dropdown.querySelectorAll(".item");
@@ -94,5 +86,4 @@
     item.onclick = () => {
-      setPositionDropdown({ trigger, dropdown });
       if (dropdown.hasAttribute("static")) return;
-      dropdown.classList.remove("visible");
+      hideDropdownAndResetWindowEvents({ dropdown });
     };
@@ -103,25 +94,62 @@ }
 function setPositionDropdown({ trigger, dropdown }) {
-  const { top, left, right, height } = trigger.getBoundingClientRect();
-  const { width, height: heightDrop } = dropdown.getBoundingClientRect();
-  const bodyScrollTop = Math.abs(document.body.getBoundingClientRect().top);
-  const triggerScrollTop = top + bodyScrollTop;
+  const {
+    top: topTrigger,
+    bottom: bottomTrigger,
+    left: leftTrigger,
+    right: rightTrigger,
+  } = trigger.getBoundingClientRect();
 
-  if (dropdown.hasAttribute("dropend")) {
-    dropdown.style.setProperty("top", `${triggerScrollTop}px`);
-    dropdown.style.setProperty("left", `${right}px`);
-    return;
+  const { width: widthDrop, height: heightDrop } =
+    dropdown.getBoundingClientRect();
+
+  const {
+    width: totalWidth,
+    height: totalHeight,
+    top: scrollTop,
+    left: scrollLeft,
+  } = document.body.getBoundingClientRect();
+
+  const absoluteRightTrigger = rightTrigger - scrollLeft;
+  const absoluteLeftTrigger = leftTrigger - scrollLeft;
+  const absoluteBottomTrigger = bottomTrigger - scrollTop;
+  const absoluteTopTrigger = topTrigger - scrollTop;
+
+  const rightExceeded = absoluteRightTrigger + widthDrop > totalWidth;
+  const bottomExceeded = absoluteBottomTrigger + heightDrop > totalHeight;
+
+  if (!bottomExceeded) {
+    dropdown.style.setProperty("top", `${absoluteBottomTrigger}px`);
   }
-  if (dropdown.hasAttribute("dropstart")) {
-    dropdown.style.setProperty("top", `${triggerScrollTop}px`);
-    dropdown.style.setProperty("left", `${left - width}px`);
-    return;
+  if (bottomExceeded) {
+    dropdown.style.setProperty("top", `${absoluteTopTrigger - heightDrop}px`);
   }
-  if (dropdown.hasAttribute("dropup")) {
-    dropdown.style.setProperty("top", `${triggerScrollTop - heightDrop}px`);
-    dropdown.style.setProperty("left", `${left}px`);
-    return;
+  if (!rightExceeded) {
+    dropdown.style.setProperty("left", `${absoluteLeftTrigger}px`);
   }
+  if (rightExceeded) {
+    dropdown.style.setProperty("left", `${absoluteRightTrigger - widthDrop}px`);
+  }
+}
 
-  dropdown.style.setProperty("top", `${triggerScrollTop + height}px`);
-  dropdown.style.setProperty("left", `${left}px`);
+function hideDropdownAndResetWindowEvents({ dropdown }) {
+  dropdown.classList.remove("visible");
+  resetWindowEvents();
 }
+
+function resetWindowEvents() {
+  window.onresize = () => {};
+  document.onscroll = () => {};
+}
+
+(function init() {
+  if (window && document) {
+    document.addEventListener("DOMContentLoaded", () => {
+      Accordion();
+      Dropdown();
+    });
+    document.addEventListener("click", () => {
+      Accordion();
+      Dropdown();
+    });
+  }
+})();

No alert changes

Improved metrics

Total package byte prevSize

52688

increased by4.42%

Lines of code

217

increased by13.61%

Worsened metrics

Number of package files

23

decreased by-4.17%

No dependency changes