Add modal functionality

Vianpyro · Sep 28, 2024 · 40c7de3 · 40c7de3
1 parent c844546
commit 40c7de3
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
 <head>
     <link rel="icon" href="favicon.ico" type="image" sizes="609x609">
     <link rel="stylesheet" href="resources/css/champions.css">
+    <link rel="stylesheet" href="resources/css/modal.css">
     <link rel="stylesheet" href="resources/css/styles.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -28,6 +29,22 @@ <h1 id="loading-champions">Loading champions...</h1>
         </section>
     </main>
 
+    <aside id="modal-container">
+        <div id="modal">
+            <button id="close-modal">&Cross;</button>
+            <h1 id="modal-title">Champion Name</h1>
+            <img id="modal-image" src="" alt="Champion Image">
+            <p id="modal-lore">Champion Lore</p>
+            <h2>Abilities</h2>
+            <div id="modal-abilities">
+                <div class="ability">
+                    <h3 id="ability-title">Ability Name</h3>
+                    <p id="ability-description">Ability Description</p>
+                </div>
+            </div>
+        </div>
+    </aside>
+
     <footer>
         <a href="https://github.com/Vianpyro/League_of_Help/blob/main/LICENSE"> Copyright &copy; 2021-2024</a>
         <a href="https://github.com/Vianpyro">Vianney Veremme</a>
@@ -36,6 +53,7 @@ <h1 id="loading-champions">Loading champions...</h1>
     <aside id="scripts">
         <script src="resources/javascript/main.js"></script>
         <script src="resources/javascript/load_champions.js" defer></script>
+        <script src="resources/javascript/modal.js" defer></script>
         <script src="resources/javascript/search_champions.js" defer></script>
     </aside>
 </body>

diff --git a/resources/css/modal.css b/resources/css/modal.css
@@ -0,0 +1,49 @@
+#modal-container {
+    align-items: center;
+    background-color: rgba(0 0 0 / 75%);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+}
+
+#modal {
+    background-color: var(--background-color-secondary);
+    border-radius: 15px;
+    box-shadow: var(--highlight-color) 0 0 10px;
+    height: 50%;
+    padding: 1em;
+    position: relative;
+    width: 50%;
+}
+
+#close-modal {
+    background: none;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: xx-large;
+    height: 2.5rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 2.5rem;
+}
+
+/* Pseudo classes & elements */
+
+#close-modal:hover {
+    background-color: var(--highlight-color);
+    color: var(--background-color-secondary);
+}
+
+/* Media queries */
+
+@media screen and (width<=850px) {
+    #modal {
+        width: calc(100% - 1em * 2);
+        height: 80%;
+        border-radius: 0;
+    }
+}
diff --git a/resources/css/styles.css b/resources/css/styles.css
@@ -55,12 +55,6 @@ input {
     user-select: none;
 }
 
-input:focus,
-textarea:focus,
-select:focus {
-    outline: none;
-}
-
 .error {
     color: #f55;
     text-decoration: none;
@@ -69,3 +63,11 @@ select:focus {
 #scripts {
     display: none;
 }
+
+/* Pseudo classes & elements */
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+}
diff --git a/resources/javascript/load_champions.js b/resources/javascript/load_champions.js
@@ -18,6 +18,7 @@ const loadingChampionsMessage = document.getElementById("loading-champions");
     // Create elements for each champion and append them to the champions container
     champions.forEach(champion => {
         const championElement = document.createElement("div");
+        championElement.addEventListener("click", () => openModal(champion.name));
         championElement.classList.add("champion");
 
         // Create element for champion's portrait

diff --git a/resources/javascript/modal.js b/resources/javascript/modal.js
@@ -0,0 +1,25 @@
+const modalContainer = document.getElementById('modal-container');
+const modal = document.getElementById('modal');
+const closeButton = document.getElementById('close-modal');
+const modalTitle = document.getElementById('modal-title');
+const modalImage = document.getElementById('modal-image');
+const modalDescription = document.getElementById('modal-description');
+
+closeButton.addEventListener('click', () => {
+    modalContainer.style.display = 'none';
+});
+
+window.addEventListener('click', function (e) {
+    if (!modal.contains(e.target) && modalContainer.contains(e.target)) {
+        closeButton.click();
+    }
+});
+
+function fillModal(champion) {
+    modalTitle.innerText = champion;
+}
+
+function openModal(champion) {
+    fillModal(champion);
+    modalContainer.style.display = 'flex';
+}