Browse Source

Mado component

created modal component
tags/v1.0-beta
piq9117 1 year ago
parent
commit
c87bc3aa56
7 changed files with 163 additions and 52 deletions
  1. +2
    -4
      Makefile
  2. +41
    -0
      assets/modal.css
  3. +0
    -11
      html/index.html
  4. +1
    -6
      spago.dhall
  5. +0
    -18
      src/Component/Title.purs
  6. +119
    -0
      src/Mado.purs
  7. +0
    -13
      src/Main.purs

+ 2
- 4
Makefile View File

@@ -5,13 +5,11 @@ build:
spago build

bundle:
spago bundle-app --main Main --to dist/app.js && ./node_modules/.bin/parcel build html/index.html
spago bundle-app --main Mado --to dist/app.js

bundle-watch:
spago bundle-app --main Main --to dist/app.js --watch
spago bundle-app --main Mado --to dist/app.js --watch

clean:
rm -rf .cache .spago node_modules .psci_modules output dist

start:
./node_modules/.bin/http-server dist

+ 41
- 0
assets/modal.css View File

@@ -0,0 +1,41 @@
.modal {
/* display: block; /\* Hidden by default *\/ */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.close:after {
content: ' \2715';
}

+ 0
- 11
html/index.html View File

@@ -1,11 +0,0 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Halogen Basic</title>
</head>
<body>
<script src="../dist/app.js"></script>
</body>
</html>

+ 1
- 6
spago.dhall View File

@@ -4,12 +4,7 @@ You can edit this file as you like.
-}
{ name = "purescript-halogen-mado"
, dependencies =
[ "console"
, "effect"
, "halogen"
, "psci-support"
, "routing"
, "routing-duplex"
[ "halogen"
]
, packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ]


+ 0
- 18
src/Component/Title.purs View File

@@ -1,19 +0,0 @@
module Component.Title where

import Prelude

import Halogen as H
import Halogen.HTML as HH

component :: forall q i o m. H.Component HH.HTML q i o m
component =
H.mkComponent
{ initialState: identity
, render
, eval: H.mkEval H.defaultEval
}

render :: forall state action m. state -> H.ComponentHTML action () m
render _ =
HH.h1_ [ HH.text "Hello, World!" ]

+ 119
- 0
src/Mado.purs View File

@@ -0,0 +1,119 @@
module Mado where

import Prelude

import Data.Symbol ( SProxy(..) )
import Data.Maybe ( Maybe(..) )
import Data.Foldable ( foldl )
-- Halogen
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP
import Halogen.HTML.Core as HC
import Halogen.HTML.Events as HE

type Slot q o = H.Slot ( Query q ) ( Output o )

type ChildSlot q o =
( inner :: H.Slot q o Unit
)

type State i =
{ modalState :: ModalState
, input :: i
}

data Query ( q :: Type -> Type ) a
= ChangeModalState ModalState a

data Output o
= Opened
| Closed

data Action o
= HandleClose

data ModalState
= Open
| Close

type WithInput i =
( input :: i )

component
:: forall q i o m
. H.Component HH.HTML q i o m
-> H.Component HH.HTML ( Query q ) i ( Output o ) m
component innerComponent =
H.mkComponent
{ initialState: { input: _, modalState : Close }
, render: render innerComponent
, eval: H.mkEval $ H.defaultEval
{ handleAction = handleAction
, handleQuery = handleQuery
}
}

render
:: forall q i o m
. H.Component HH.HTML q i o m
-> State i
-> H.ComponentHTML ( Action o ) ( ChildSlot q o ) m
render innerComponent state = case state.modalState of
Open ->
HH.div
[ css "modal"
, styleProps
[ { styleName: "display"
, styleValue: toStyleValue state.modalState
}
]
]
[ HH.div
[ css "modal-content" ]
[ HH.span
[ css "close"
, HE.onClick ( const $ Just HandleClose )
]
[]
, HH.slot ( SProxy :: _ "inner" ) unit innerComponent state.input ( const Nothing )
]
]
Close -> HH.text mempty

handleAction
:: forall q i o m
. Action o
-> H.HalogenM ( State i ) ( Action o ) ( ChildSlot q o ) ( Output o ) m Unit
handleAction = case _ of
HandleClose -> do
H.modify_ _ { modalState = Close }
H.raise Closed

handleQuery
:: forall f a i o m
. Query f a
-> H.HalogenM ( State i ) ( Action o ) ( ChildSlot f o ) ( Output o ) m ( Maybe a )
handleQuery = case _ of
ChangeModalState state a -> do
H.modify_ _ { modalState = state }
pure ( Just a )

css :: forall r i. String -> HH.IProp ( class :: String | r ) i
css = HP.class_ <<< HH.ClassName

class StyleValue v where
toStyleValue :: v -> String

instance modalStateStyleValue :: StyleValue ModalState where
toStyleValue Open = "block"
toStyleValue Close = "none"

type Style =
{ styleName :: String
, styleValue :: String
}

styleProps :: forall r i. Array Style -> HP.IProp ( style :: String | r ) i
styleProps = HH.prop ( HC.PropName "style" )
<<< foldl (\b a -> a.styleName <> ": " <> a.styleValue <> "; " <> b ) ""

+ 0
- 13
src/Main.purs View File

@@ -1,16 +0,0 @@
module Main where

import Prelude

import Component.Title as Title
import Effect ( Effect )
import Halogen.Aff as HA
import Halogen.VDom.Driver ( runUI )

main :: Effect Unit
main = HA.runHalogenAff do
body <- HA.awaitBody
runUI Title.component unit body

Loading…
Cancel
Save