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

Builds client SSR approach, sunsets old cljs.

Browse Source
This commit is contained in:
Bryce
2024-01-09 21:40:43 -08:00
parent d824cdfff4
commit 8063a8fcbd
74 changed files with 4603 additions and 4047 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/clj/auto_ap/ssr/components/dialog.clj
View File

@@ -3,36 +3,19 @@
[auto-ap.ssr.hiccup-helper :as hh]
[auto-ap.ssr.hx :as hx]))
(defn modal- [params & children]
(defn modal-
"This modal function is used to create a modal window with a stack that allows for transitioning between modals.
:params should include the following keys:
- :handle-unexpected-error? (default: true) - A boolean indicating whether to handle unexpected errors.
- :class (optional) - A string representing additional CSS classes to add to the modal.
&children should include the child components to be rendered within the modal."
[{:as params} & children]
[:div (-> params
(assoc "@click.outside" "open=false"
:x-data (hx/json {:index 0 :hidingIndex -1 :unexpectedError false :transitioning false})
"x-on:htmx:response-error" "unexpectedError=true"
"x-on:htmx:before-request" "unexpectedError=false"
:x-ref "modalStack"
"@modalnext.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', '-translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index + 1].setAttribute('x-transition:enter-start', 'translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => {index ++; transitioning=true; hidingIndex = -1; }, 150);
setTimeout(() => transitioning=false, 320)"
"@modalprevious.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index - 1].setAttribute('x-transition:enter-start', '-translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => { index --; hidingIndex = -1; transitioning=true; }, 150);
setTimeout(() => transitioning=false, 320)"
"@modalpop.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index - 1].setAttribute('x-transition:enter-start', '-translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => {index --; transitioning=true;}, 150);
setTimeout(() => { $refs.modalStack.removeChild($refs.modalStack.children[index+1]); hidingIndex=-1; }, 300);
setTimeout(() => transitioning=false, 320)
"
)
(assoc "@click.outside" "open=false")
(dissoc :handle-unexpected-error?)
(update :class (fnil hh/add-class "") "w-full h-full modal-stack"))
children])
@@ -40,11 +23,10 @@
[:div (update params
:class (fn [c] (-> c
(or "")
(hh/add-class "w-full p-4 h-full modal-card")
)))
(hh/add-class "w-full p-4 h-full modal-card"))))
[:div {:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content w-full flex flex-col h-full"}
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0"} header]
[:div {:class "px-6 space-y-6 overflow-y-scroll w-full shrink"}
[:div {:class "px-6 py-2 space-y-6 overflow-y-scroll w-full shrink"}
#_[:div.bg-green-300.w-full.h-64
"hello"]
content]
@@ -55,28 +37,6 @@
[:div {:class "shrink-0"}
footer]])]])
(defn stacked-modal-card- [index params header content footer]
[:div (merge params
{:class (hh/add-class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content flex flex-col h-full" (:class params ""))
:x-data (hx/json {:i index})
:x-show "index == i && hidingIndex != i"
"x-trap" "index == i && hidingIndex == -1 && !transitioning"
"x-transition:enter" "transition duration-150",
"x-transition:enter-end" "translate-x-0 scale-100 opacity-100",
"x-transition:leave" "transition duration-150",
"x-transition:leave-start" "translate-x-0 scale-100 opacity-100",
})
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0"} header] ;; todo componentize these
[:div {:class "px-6 space-y-6 overflow-y-scroll w-full shrink"}
content] ;; TODO componentize
(when footer [:div {:class "p-4"}
[:span.items-center.bg-red-100.text-red-800.text-xs.font-medium.mb-2.p-1.rounded-full.inline-flex (hx/alpine-appear {:x-show "unexpectedError" :class "dark:bg-red-900 dark:text-red-300"})
[:span {:class "w-2 h-2 bg-red-500 rounded-full"}]
[:span.px-2.py-0.5 "An unexpected error has occured. Integreat staff have been notified."]]
[:div {:class "shrink-0"}]footer])])
(defn modal-header- [params & children]
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0"}
children])
@@ -92,21 +52,14 @@
(defn modal-footer- [params & children]
[:div {:class "p-4"}
[:span.items-center.bg-red-100.text-red-800.text-xs.font-medium.mb-2.p-1.rounded-full.inline-flex (hx/alpine-appear {:x-show "unexpectedError" :class "dark:bg-red-900 dark:text-red-300"})
[:span.items-center.bg-red-100.text-red-800.text-xs.font-medium.mb-2.p-1.rounded-full.inline-flex
(hx/alpine-appear {:x-show "unexpectedError" :class "dark:bg-red-900 dark:text-red-300"})
[:span {:class "w-2 h-2 bg-red-500 rounded-full"}]
[:span.px-2.py-0.5 "An unexpected error has occured. Integreat staff have been notified."]]
[:div {:class "shrink-0"}]
children])
(defn stacked-modal-card-2- [index params & children]
(defn modal-card-advanced- [params & children]
[:div (merge params
{:class (hh/add-class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content flex flex-col h-full" (:class params ""))
:x-data (hx/json {:i index})
:x-show "index == i && hidingIndex != i"
"x-trap" "index == i && hidingIndex == -1 && !transitioning"
"x-transition:enter" "transition duration-150",
"x-transition:enter-end" "translate-x-0 scale-100 opacity-100",
"x-transition:leave" "transition duration-150",
"x-transition:leave-start" "translate-x-0 scale-100 opacity-100",
})
{:class (hh/add-class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content flex flex-col h-full" (:class params "")) })
children])