Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add an attribute to show the modal on mounted #150

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: Add an attribute to show the modal on mounted #150

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b75e5c
feat: Add an attribute to show the modal on mounted
RyoWakabayashi Feb 27, 2023
e1b1173
refactor: Change to hide_on_mounted
RyoWakabayashi Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions lib/petal_components/modal.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ defmodule PetalComponents.Modal do
doc: "modal max width"
)

attr(:hide_on_mounted, :boolean,
default: false,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm this would mean everyone who upgrades will have their modals stop working? maybe we could reverse it - "hide_on_mounted", defaults to false?

doc: "if hide_on_mounted is set to true, the modal is not displayed when mounted"
)

attr(:rest, :global)
slot(:inner_block, required: false)

Expand All @@ -28,10 +33,10 @@ defmodule PetalComponents.Modal do
|> assign(:classes, get_classes(assigns))

~H"""
<div {@rest} id="modal">
<div {@rest} id="modal" phx-mounted={init_modal(@hide_on_mounted)}>
<div id="modal-overlay" class="pc-modal__overlay" aria-hidden="true"></div>

<div class="pc-modal__wrapper" role="dialog" aria-modal="true">
<div id="modal-wrapper" class="pc-modal__wrapper" role="dialog" aria-modal="true">
<div
id="modal-content"
class={@classes}
Expand Down Expand Up @@ -64,6 +69,14 @@ defmodule PetalComponents.Modal do
"""
end

def init_modal(hide_on_mounted) do
if hide_on_mounted do
%JS{}
|> JS.hide(to: "#modal-overlay")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just wondering why we need to hide so many things?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Certainly there was no need to hide so much.

I'll Add commits immediately.

|> JS.hide(to: "#modal-wrapper")
end
end

# The live view that calls <.modal> will need to handle the "close_modal" event. eg:
# def handle_event("close_modal", _, socket) do
# {:noreply, push_patch(socket, to: Routes.moderate_users_path(socket, :index))}
Expand All @@ -81,6 +94,14 @@ defmodule PetalComponents.Modal do
},
to: "#modal-overlay"
)
|> JS.hide(
transition: {
"ease-in duration-200",
"opacity-100",
"opacity-0"
},
to: "#modal-wrapper"
)
|> JS.hide(
transition: {
"ease-in duration-200",
Expand Down Expand Up @@ -110,6 +131,7 @@ defmodule PetalComponents.Modal do
},
to: "#modal-overlay"
)
|> JS.show(to: "#modal-wrapper", display: "flex")
|> JS.show(
transition: {
"transition ease-in-out duration-200",
Expand Down