45 lines
1.7 KiB
Clojure
45 lines
1.7 KiB
Clojure
(ns auto-ap.ssr.components.dialog
|
|
(:require [hiccup2.core :as hiccup]))
|
|
|
|
(defn modal- [params & children]
|
|
[:div
|
|
[:div#modal-holder { :tabindex "-1", :class "fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center hidden" :aria-hidden true
|
|
"_" (hiccup/raw "on closeModal transition <#modal-holder .modal-content /> opacity to 0.0 over 300ms then call hideModal() ")}
|
|
[:div {:class "relative w-full max-w-2xl max-h-full"}
|
|
(into [:div#modal-content]
|
|
children)]
|
|
]
|
|
[:script {:lang "text/javascript"}
|
|
(hiccup/raw "
|
|
var modal_element = document.getElementById('modal-holder');
|
|
var modal_options = {
|
|
placement: 'center',
|
|
backdrop: 'dynamic',
|
|
backdropClasess: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
|
|
closable: true,
|
|
onOpen: function() {
|
|
modal_element.dispatchEvent('openModal');
|
|
|
|
},
|
|
onHide: function() {
|
|
modal_element.outerHTML='<div id=\"modal-holder\"><div class=\"relative w-full max-w-2xl max-h-full\"><div id=\"modal-content\"></div></div></div>';
|
|
},
|
|
};
|
|
var curModal = new Modal(modal_element, modal_options);
|
|
curModal.show();
|
|
function hideModal() {
|
|
curModal.hide();
|
|
}
|
|
")
|
|
|
|
]])
|
|
|
|
(defn modal-card- [params header content footer]
|
|
[:div#modal-card params
|
|
[:div {:class "relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white fade-in slide-up duration-300 transition-all modal-content"}
|
|
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"} header]
|
|
[:div {:class "p-6 space-y-6"}
|
|
content]
|
|
[:div footer]]
|
|
])
|