{-|
Module: IHP.Modal.ViewFunctions
Description: View Helper Functions to use modals
Copyright: (c) digitally induced GmbH, 2020
-}
module IHP.Modal.ViewFunctions (modal, renderModal) where

import IHP.Prelude
import IHP.Controller.Context
import IHP.HSX.QQ (hsx)
import IHP.Modal.Types
import Text.Blaze.Html5 (Html)

renderModal :: Modal -> Html
renderModal Modal
modal = Modal -> Bool -> Html
renderModal' Modal
modal Bool
True
renderModal' :: Modal -> Bool -> Html
renderModal' Modal { Maybe Html
Text
Html
modalContent :: Html
modalFooter :: Maybe Html
modalCloseUrl :: Text
modalTitle :: Text
modalTitle :: Modal -> Text
modalCloseUrl :: Modal -> Text
modalFooter :: Modal -> Maybe Html
modalContent :: Modal -> Html
.. } Bool
show = [hsx|
        <div class={modalClassName} id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true" style={displayStyle} onclick="if (event.target.id === 'modal') document.getElementById('modal-backdrop').click()">
            {modalInner}
        </div>
        <a id="modal-backdrop" href={modalCloseUrl} class={backdropClassName} style={displayStyle}/>
    |]
        where
            modalClassName :: Text
            modalClassName :: Text
modalClassName = Text
"modal fade overflow-auto " Text -> Text -> Text
forall a. Semigroup a => a -> a -> a
<> if Bool
show then Text
"show" else Text
""
            backdropClassName :: Text
            backdropClassName :: Text
backdropClassName = Text
"modal-backdrop fade " Text -> Text -> Text
forall a. Semigroup a => a -> a -> a
<> if Bool
show then Text
"show" else Text
""
            displayStyle :: Text
            displayStyle :: Text
displayStyle = if Bool
show then Text
"display: block" else Text
"display: none"

            modalInner :: Html
modalInner = [hsx|
            <div class="modal-dialog" role="document" id="modal-inner">
                <div class="modal-content">
                    {renderModalHeader modalTitle modalCloseUrl}
                    <div class="modal-body">{modalContent}</div>
                    {renderModalFooter}
                </div>
            </div>
            |]

            renderModalFooter :: Html
renderModalFooter =
                case Maybe Html
modalFooter of
                    Just Html
modalFooter -> [hsx|<div class="modal-footer">{modalFooter}</div>|]
                    Maybe Html
Nothing -> Html
forall a. Monoid a => a
mempty

renderModalHeader :: Text -> Text -> Html
renderModalHeader :: Text -> Text -> Html
renderModalHeader Text
title Text
closeUrl = [hsx|
    <div class="modal-header">
      <h5 class="modal-title" id="modal-title">{title}</h5>
      <a href={closeUrl} class="btn-close" data-dismiss="modal" aria-label="Close"></a>
    </div>
|]

modal :: (?context :: ControllerContext) => Html
modal :: (?context::ControllerContext) => Html
modal =
    case Maybe ModalContainer
forall value.
(?context::ControllerContext, Typeable value) =>
Maybe value
maybeFromFrozenContext of
        Just (ModalContainer Html
html) -> Html
html
        Maybe ModalContainer
Nothing -> Html
forall a. Monoid a => a
mempty