1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-25 14:42:37 +03:00
noredink-ui/styleguide-app/Examples/Confetti.elm

124 lines
2.8 KiB
Elm
Raw Normal View History

2020-05-15 20:15:35 +03:00
module Examples.Confetti exposing (example, State, Msg)
{-|
@docs example, State, Msg
-}
import Browser.Events
2020-05-15 20:15:35 +03:00
import Category exposing (Category(..))
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
2020-05-15 20:15:35 +03:00
import Example exposing (Example)
import Nri.Ui.Button.V10 as Button
import Nri.Ui.Confetti.V2 as Confetti
import Nri.Ui.Html.V3 exposing (viewJust)
moduleName : String
moduleName =
"Confetti"
version : Int
version =
2
2020-05-15 20:15:35 +03:00
{-| -}
example : Example State Msg
example =
{ name = moduleName
, version = version
2020-05-15 20:15:35 +03:00
, categories = [ Animations ]
, keyboardSupport = []
, state = init
2020-05-15 20:15:35 +03:00
, update = update
, subscriptions =
\state ->
case state.model of
Just model ->
Sub.batch
[ Browser.Events.onResize WindowResized
, Confetti.subscriptions ConfettiMsg model
]
Nothing ->
Sub.none
2021-11-05 21:19:08 +03:00
, preview = []
2020-05-15 20:15:35 +03:00
, view =
\ellieLinkConfig state ->
[ viewJust Confetti.view state.model
, ControlView.view
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControl
, settings = state.settings
, mainType = "RootHtml.Html msg"
2022-04-13 03:32:46 +03:00
, extraImports = []
, toExampleCode =
\settings -> [ { sectionName = "TODO", code = "TODO" } ]
}
, Button.button "Launch confetti!"
2020-05-15 20:15:35 +03:00
[ Button.onClick LaunchConfetti
, Button.small
, Button.secondary
]
]
}
{-| -}
type alias State =
{ settings : Control Settings
, model : Maybe Confetti.Model
}
init : State
init =
{ settings = initSettings
, model = Nothing
}
type alias Settings =
{ center : Float
}
initSettings : Control Settings
initSettings =
Control.record Settings
|> Control.field "center" (ControlExtra.float 700)
2020-05-15 20:15:35 +03:00
{-| -}
type Msg
= LaunchConfetti
| ConfettiMsg Confetti.Msg
| WindowResized Int Int
| UpdateControl (Control Settings)
2020-05-15 20:15:35 +03:00
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
( case msg of
2020-05-15 20:15:35 +03:00
LaunchConfetti ->
{ state | model = Just (Confetti.burst (Confetti.init (Control.currentValue state.settings).center)) }
2020-05-15 20:15:35 +03:00
ConfettiMsg confettiMsg ->
{ state | model = Maybe.map (Confetti.update confettiMsg) state.model }
WindowResized width _ ->
{ state | model = Maybe.map (Confetti.updatePageWidth width) state.model }
UpdateControl newControl ->
{ state | settings = newControl }
, Cmd.none
)