fix: neomo.js, readme.md (modal)

neomorphism · May 20, 2021 · af3930e · af3930e
1 parent 3f78c5f
commit af3930e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 52 deletions.
diff --git a/css/components/readme.md b/css/components/readme.md
@@ -571,9 +571,7 @@
  </head>
  <body class="neomo">
  <div class="dropdown-toggle">
- <button
- class="dropdown-toggle--button outset-neomo"
- >
+ <button class="dropdown-toggle--button outset-neomo">
  Toggle
  <i class="fa fa-caret-down"></i>
  </button>
@@ -721,16 +719,17 @@
  <body class="neomo">
  <div class="columns just-center">
  <div class="column size-10">
- <button class="modal-button outset-neomo">Outset MODAL</button>
+ <button data-modal-id="modal" class="modal-button outset-neomo">
+ MODAL Button
+ </button>
  </div>
- </div>
- <div class="modal">
- <div class="modal-content--md outset-neomo">
- <span class="modal-close">&times;</span>
- <p>You can insert any type of content with this modal class.</p>
+  <div data-modal-id="modal" class="modal">
+  <div class="modal-content--md outset-neomo">
+  <span class="modal-close">&times;</span>
+  <p>You can insert any type of content with this modal class.</p>
+ </div>
  </div>
  </div>
-
  <script type="text/javascript" src="/js/neomo.js"></script>
  </body>
 </html>
@@ -748,16 +747,17 @@
  <body class="neomo">
  <div class="columns just-center">
  <div class="column size-10">
- <button class="modal-button inset-neomo">Inset MODAL</button>
+ <button data-modal-id="modal" class="modal-button inset-neomo">
+ MODAL Button
+ </button>
  </div>
- </div>
- <div class="modal">
- <div class="modal-content--md inset-neomo">
- <span class="modal-close">&times;</span>
- <p>You can insert any type of content with this modal class.</p>
+  <div data-modal-id="modal" class="modal">
+  <div class="modal-content--md inset-neomo">
+  <span class="modal-close">&times;</span>
+  <p>You can insert any type of content with this modal class.</p>
+ </div>
  </div>
  </div>
-
  <script type="text/javascript" src="/js/neomo.js"></script>
  </body>
 </html>
@@ -1164,37 +1164,31 @@
  <body class="neomo">
  <div class="navbar" style="margin: 0 auto">
  <div>
- <button class="toggle-button">
- List1
- </button>
+ <button class="toggle-button">List1</button>
  <div class="toggle-content">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  </div>
  </div>
  <div>
- <button class="toggle-button">
- List2
- </button>
+ <button class="toggle-button">List2</button>
  <div class="toggle-content">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  </div>
  </div>
  <div>
- <button class="toggle-button">
- List3
- </button>
+ <button class="toggle-button">List3</button>
  <div class="toggle-content">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  </div>
  </div>
  </div>
- 
+
  <script type="text/javascript" src="/js/neomo.js"></script>
  </body>
 </html>
@@ -1213,10 +1207,7 @@
  </head>
 
  <body class="neomo">
- <div
- id="Toast"
- class="toast show outset-neomo alert"
- >
+ <div id="Toast" class="toast show outset-neomo alert">
  <div class="toast-header">
  <strong class="font-size-5">Neomo</strong>
  <small class="mr-2 ml-auto">12 mins ago</small>
@@ -1226,7 +1217,7 @@
  Hello, world! This is a toast message.
  </div>
  </div>
- 
+
  <script type="text/javascript" src="/js/neomo.js"></script>
  </body>
 </html>

diff --git a/js/neomo.js b/js/neomo.js
@@ -122,29 +122,34 @@ document.addEventListener("DOMContentLoaded", function () {
  /* label function end */
 
  /* Modal function start */
- var modals = document.getElementsByClassName("modal");
- var modal_btns = document.getElementsByClassName("modal-button");
- var modal_close = document.getElementsByClassName("modal-close");
- var modalArray = [];
-
- function Modal(num) {
- return function () {
- modal_btns[num].onclick = function () {
- modals[num].style.display = "block";
- };
- modal_close[num].onclick = function () {
- modals[num].style.display = "none";
- };
- };
+ const modals = document.querySelectorAll("[data-modal-id]");
+ function addModalEvent(modal, element) {
+  modals.forEach((btn) => {
+  // button
+ if (
+  btn.tagName === "BUTTON" &&
+  btn.getAttribute("data-modal-id") === modal
+ ) {
+ btn.onclick = function () {
+  element.style.display = "block";
+  };
+ return;
+ }
+ });
  }
 
  if (modals) {
- for (i = 0; i < modal_btns.length; i++) {
- modalArray[i] = Modal(i);
- }
- for (j = 0; j < modal_btns.length; j++) {
- modalArray[j]();
- }
+ modals.forEach((element) => {
+ const modal = element.getAttribute("data-modal-id");
+ const tag = element.tagName;
+ // modal content
+ if (tag === "DIV") {
+ element.getElementsByClassName("modal-close")[0].onclick = function () {
+ element.style.display = "none";
+ };
+ addModalEvent(modal, element);
+ }
+ });
  }
  /* Modal function end */