notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alpine for dropdown.

Browse Source
This commit is contained in:
Bryce
2023-10-20 17:52:15 -07:00
parent 8684a68471
commit ffcc43ba5e
8 changed files with 215 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/clj/auto_ap/ssr/ui.clj
View File

@@ -1,6 +1,7 @@
(ns auto-ap.ssr.ui
(:require
[hiccup2.core :as hiccup]))
[hiccup2.core :as hiccup]
[auto-ap.ssr.hx :as hx]))
(defn html-page [hiccup]
{:status 200
@@ -42,7 +43,8 @@
[:script {:src "https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.js"}]
[:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" :type "text/css"}]
#_[:script {:defer true :src "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"}]
[:script {:defer true :src "https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"}]
[:script {:defer true :src "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"}]
[:style
"
input::-webkit-outer-spin-button,
@@ -58,24 +60,32 @@ input[type=number] {
"
]
[:body {:hx-ext "disable-submit"}
[:body {:hx-ext "disable-submit"
"x-data" (hx/json {:modalOpen false})}
contents
[:script {:src "/js/flowbite.min.js"}]
[: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 \"modalClosed\" remove my children
on \"modalOpening\" from <body /> call curModal.show()
on \"modalClosing\" from <body /> call curModal.hide()")
[:div
{"x-data" (hx/json {"open" false})
"@modalopen.document" "open=true"
"@modalclose.document" "open=false"}
[: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"
":class" "open ? '' : 'hidden'"
":aria-hidden" "!open"
}]
[:script {:lang "text/javascript"}
[:div {:class " bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"
":class" "open ? '' : 'hidden'"
":aria-hidden" "!open"
}]
#_[: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,
closable: false,
onOpen: function() {
htmx.trigger(document.getElementById('modal-holder'), 'modalOpened', {});