finalized first part

thisisddzin · Sep 22, 2019 · b45a670 · b45a670
commit b45a670
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <script src="../liq-modal.js"></script>
+
+  <style>
+      .content {
+          background: white;
+          padding: 20px;
+      }
+  </style>
+</head>
+<body>
+  <div id="my-modal">
+    <div class="content">
+        First modal, content here.
+    </div>
+  </div>
+
+
+  <div id="my-modal-2">
+    <div class="content">
+        Second modal, content here.
+    </div>
+  </div>
+
+
+  <div id="my-modal-3">
+    <div class="content">
+        Third and last modal.
+    </div>
+  </div>
+
+  <button class="liq-modal__btn" data-liq-modal-open="#my-modal">Aqui</button>
+  <button class="liq-modal__btn" data-liq-modal-open="#my-modal-2">Abre o 2</button>
+
+  <button class="another-btn" data-liq-modal-open="#my-modal-3">aaaa</button>
+</body>
+  <script>
+    liqModals() // Get all elements with default class liq-modal__btn
+
+    liqModals({ // Get specified elements by you. With this you can make specific changes
+      selector: ".another-btn"
+    })
+  </script>
+</html>
diff --git a/liq-modal.js b/liq-modal.js
@@ -0,0 +1,61 @@
+function liqModals (options = {}) {
+  const modalBtns = document.querySelectorAll(options.selector || ".liq-modal__btn")
+
+  initAllModals(modalBtns, options)
+}
+
+function initAllModals(modalBtns, options) {
+  Array.from(modalBtns).forEach(btn => {
+    var modalEl = document.querySelector(btn.dataset.liqModalOpen)
+
+    modalStyle(modalEl, options)
+    initClickEvent(btn, modalEl, options)
+  })
+}
+
+function initClickEvent (modalBtn, modalEl, options) {
+  modalBtn.onclick = function (e) {
+    if (e.target !== this) return;
+    fade(modalEl, 0.1, options)
+  }
+  modalEl.onclick = function (e) {
+    if (e.target !== this) return;
+    fade(modalEl, -0.1, options)
+  }
+}
+
+function modalStyle(modalEl, options) {
+  modalEl.style.flexDirection     = "column"
+  modalEl.style.justifyContent    = "center"
+  modalEl.style.alignItems        = "center"
+  modalEl.style.padding           =  options && options.padding || "20px"
+  modalEl.style.display           = "none"
+  modalEl.style.backgroundColor   =  options && options.bgColor || "white"
+  modalEl.style.position          = "fixed"
+  modalEl.style.top               = "0px"
+  modalEl.style.left              = "0px"
+  modalEl.style.zIndex            = "10"
+  modalEl.style.width             = "100%"
+  modalEl.style.height            = "100vh"
+  modalEl.style.boxSizing         = "border-box"
+  modalEl.style.backgroundColor   = "rgba(0,0,0, 0.7)"
+}
+
+function fade (modalEl, count, options) {
+  let { fadeTime } = options
+  let interval = fadeTime 
+  let fadeOpacity = count > 0 ? 0.0 : 1
+
+  modalEl.style.opacity = fadeOpacity
+  modalEl.style.display = "flex"
+
+  const fade = setInterval(function () {
+    fadeOpacity += count
+    modalEl.style.opacity = fadeOpacity
+
+    if (fadeOpacity > 0.9 || fadeOpacity < 0.1) {
+      clearInterval(fade)
+      if(count < 0) modalEl.style.display = "none"
+    }
+  }, interval); 
+}