New confirm modal library

custom made

apps/home/static/home/js/modals.js

@@ -0,0 +1,85 @@
+
+const validateBootstrapStyle = style => {
+    if (!["danger", "success", "warning", "info", "primary", "secondary"].includes(style)) {
+        throw new Error(`${style} is not a valid style`);
+    }
+    return true;
+}
+
+
+const arrayToHtmlList = (array, bold=false) => {
+    $ul = $("<ul>").addClass("mb-0");
+    
+    array.forEach(item => {
+        let $li = $("<li>");
+        $ul.append(bold ? $li.append($("<b>").text(item)) : $li.text(item));
+    });
+    
+    return $ul;
+}
+
+
+const createModal = async (options = {}) => {
+    let $modal = $("#customModal");
+
+    let defaults = {
+        title: "Modal Title",
+        texts: [
+            {
+                content: "This is a modal",
+                html: false
+            }
+        ],
+        buttons: [
+            {
+                text: "Okay",
+                className: "btn-primary",
+                iconClass: "",
+                tabIndex: 2,
+                closeModal: true,
+                onClick: null
+            }
+        ]
+    };
+
+    let settings = { ...defaults, ...options };
+
+    $modal.find(".modal-title").text(settings.title);
+
+    // Texts
+    let $body = $modal.find(".modal-body").empty();
+
+    settings.texts.forEach((text, idx) => {
+        if (text.html) {
+            $body.append(text.content);
+            return;
+        }
+
+        let $para = $("<p>", {
+            text: text.content,
+            class: idx + 1 === settings.texts.length ? "mb-0" : ""
+        });
+        $body.append($para);
+    });
+
+    // Buttons
+    let $footer = $modal.find(".modal-footer").empty();
+
+    settings.buttons.forEach(button => {
+        let $btn = $("<button>", {
+            type: "button",
+            class: "btn rounded-1 " + button.className,
+            tabIndex: button.tabIndex,
+            html: button.iconClass ?`<i class="${button.iconClass} ${button.text ? "me-2" : ""}"></i>${button.text ? button.text : ""}` : button.text
+        });
+
+        $btn.on("click", async () => {
+            if (button.onClick) await button.onClick();
+            if (button.closeModal) $modal.modal("hide");
+        });
+
+        $footer.append($btn);
+    });
+
+    $modal.modal("show");
+}

apps/home/templates/home/index.html

@@ -121,7 +121,7 @@
 {% include "home/modals/editFilter.html" %}
 {% include "home/modals/editStyle.html" %}
 {% include "home/modals/editServer.html" %}
-{% include "home/modals/confirm.html" %}
+{% include "home/modals/modals.html" %}
 {% endblock content %}
 
 {% block javascript %}
@@ -143,8 +143,9 @@
 </script>
 <script src="{% static 'js/api.js' %}"></script>
 <script src="{% static 'home/js/index.js' %}"></script>
-<script src="{% static 'home/js/tables.js' %}"></script>
+<script src="{% static 'home/js/modals.js' %}"></script>
 <script src="{% static 'home/js/servers.js' %}"></script>
+<script src="{% static 'home/js/tables.js' %}"></script>
 <script src="{% static 'home/js/tabs/subs.js' %}"></script>
 <script src="{% static 'home/js/tabs/filters.js' %}"></script>
 <script src="{% static 'home/js/tabs/content.js' %}"></script>

apps/home/templates/home/modals/modals.html

@@ -19,20 +19,14 @@
     </div>
 </div>
 
-<div id="okModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
+<div id="customModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content rounded-1">
             <div class="modal-header border-bottom-0">
                 <h5 class="modal-title mx-2"></h5>
             </div>
-            <div class="modal-body p-4">
+            <div class="modal-body p-4"></div>
-                <p class="mb-0"></p>
+            <div class="modal-footer border-top-0 px-4"></div>
-            </div>
-            <div class="modal-footer border-top-0 px-4">
-                <button type="button" class="btn rounded-1 ms-3 ms-0 px-4 modal-dismiss-btn" tabindex="2">
-                    <i class="bi"></i>
-                </button>
-            </div>
         </div>
     </div>
 </div>