feat: onDarkModeChange action

dtwrks · Jul 31, 2021 · 85a18c5 · 85a18c5
1 parent 6008868
commit 85a18c5
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 18 deletions.
diff --git a/src/ElmBook/Internal/Application.elm b/src/ElmBook/Internal/Application.elm
@@ -44,7 +44,7 @@ type alias Model state html =
     , chaptersSearched : Array (ChapterCustom state html)
     , chapterActive : Maybe (ChapterCustom state html)
     , chapterPreSelected : Int
-    , toggleDarkMode : Bool
+    , darkMode : Bool
     , search : String
     , isSearching : Bool
     , isShiftPressed : Bool
@@ -136,15 +136,34 @@ init props _ url navKey =
 
         activeChapter =
             parseActiveChapterFromUrl props.config chapters url
+
+        darkTheme =
+            props.config.themeOptions.preferDarkMode
+
+        initialConfig =
+            props.config
+
+        initialStatefulOptions =
+            props.config.statefulOptions
+
+        initialConfig_ =
+            { initialConfig
+                | statefulOptions =
+                    { initialStatefulOptions
+                        | state =
+                            props.config.statefulOptions.state
+                                |> Maybe.map (props.config.statefulOptions.onDarkModeChange darkTheme)
+                    }
+            }
     in
     ( { navKey = navKey
-      , config = props.config
+      , config = initialConfig_
       , chapterGroups = chapterGroups
       , chapters = chapters
       , chaptersSearched = chapters
       , chapterActive = activeChapter
       , chapterPreSelected = 0
-      , toggleDarkMode = False
+      , darkMode = props.config.themeOptions.preferDarkMode
       , search = ""
       , isSearching = False
       , isShiftPressed = False
@@ -238,7 +257,30 @@ update msg model =
                     )
 
         ToggleDarkMode ->
-            ( { model | toggleDarkMode = not model.toggleDarkMode }
+            let
+                darkMode =
+                    not model.darkMode
+
+                config =
+                    model.config
+
+                statefulOptions_ =
+                    model.config.statefulOptions
+
+                statefulOptions__ =
+                    { statefulOptions_
+                        | state =
+                            statefulOptions_.state
+                                |> Maybe.map (model.config.statefulOptions.onDarkModeChange darkMode)
+                    }
+
+                config_ =
+                    { config | statefulOptions = statefulOptions__ }
+            in
+            ( { model
+                | config = config_
+                , darkMode = darkMode
+              }
             , Cmd.none
             )
 
@@ -467,16 +509,7 @@ view model =
         [ ElmBook.UI.Styles.view
         , ElmBook.UI.Wrapper.view
             { theme = model.config.themeOptions
-            , darkMode =
-                case ( model.config.themeOptions.preferDarkMode, model.toggleDarkMode ) of
-                    ( True, False ) ->
-                        True
-
-                    ( False, True ) ->
-                        True
-
-                    _ ->
-                        False
+            , darkMode = model.darkMode
             , isMenuOpen = model.isMenuOpen
             , globals =
                 model.config.themeOptions.globals

diff --git a/src/ElmBook/Internal/StatefulOptions.elm b/src/ElmBook/Internal/StatefulOptions.elm
@@ -8,12 +8,14 @@ import ElmBook.Internal.Msg exposing (Msg)
 
 type alias StatefulOptions state =
     { state : Maybe state
+    , onDarkModeChange : Bool -> state -> state
     , subscriptions : List (Sub (Msg state))
     }
 
 
 defaultOptions : StatefulOptions state
 defaultOptions =
     { state = Nothing
+    , onDarkModeChange = \_ -> identity
     , subscriptions = []
     }
diff --git a/src/ElmBook/StatefulOptions.elm b/src/ElmBook/StatefulOptions.elm
@@ -1,13 +1,13 @@
 module ElmBook.StatefulOptions exposing
-    ( initialState, subscriptions
+    ( initialState, subscriptions, onDarkModeChange
     , Attribute
     )
 
 {-| Attributes used by `ElmBook.withStatefulOptions`.
 
 The attributes below are mostly used for Stateful Books. Take a look at the ["Stateful Chapters"](https://elm-book-in-elm-book.netlify.app/guides/stateful-chapters) guide for more details.
 
-@docs initialState, subscriptions
+@docs initialState, subscriptions, onDarkModeChange
 
 
 # Types
@@ -71,3 +71,33 @@ initialState state options =
 subscriptions : List (Sub (Msg state)) -> Attribute state
 subscriptions subscriptions_ options =
     { options | subscriptions = subscriptions_ }
+
+
+{-| Change your book's state based on the themes current mode.
+
+This can be useful for showcasing your own dark themed components when using elm-book's dark mode.
+
+    type alias SharedState =
+        { darkMode : Bool
+        }
+
+    initialState : SharedState
+    initialState =
+        { darkMode = False
+        }
+
+    book : Book SharedState
+    book "MyApp"
+        |> withStatefulOptions
+            [ ElmBook.StatefulOptions.initialState
+                initialState
+            , ElmBook.StatefulOptions.onDarkModeChange
+                (\darkMode state ->
+                    { state | darkMode = darkMode }
+                )
+            ]
+
+-}
+onDarkModeChange : (Bool -> state -> state) -> Attribute state
+onDarkModeChange onDarkModeChange_ options =
+    { options | onDarkModeChange = onDarkModeChange_ }
diff --git a/src/ElmBook/UI/Docs/DarkModeComponents.elm b/src/ElmBook/UI/Docs/DarkModeComponents.elm
@@ -0,0 +1,75 @@
+module ElmBook.UI.Docs.DarkModeComponents exposing (..)
+
+import ElmBook.Chapter exposing (Chapter, chapter, render, renderStatefulComponent, renderWithComponentList, withStatefulComponent)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+
+
+type alias SharedState x =
+    { x | darkMode : Bool }
+
+
+docs : Chapter (SharedState x)
+docs =
+    chapter "Dark Components"
+        |> withStatefulComponent
+            (\{ darkMode } ->
+                div [ class "elm-book elm-book-serif" ]
+                    [ if darkMode then
+                        div []
+                            [ p
+                                [ style "color" "#fff" ]
+                                [ text "You found me!" ]
+                            ]
+
+                      else
+                        p
+                            [ style "color" "#999" ]
+                            [ text "There is something hidden in the dark…" ]
+                    ]
+            )
+        |> render """
+If want to showcase your UI components and their dark mode variants in all their glory, take a look at the `onDarkModeChange` helper. Try changing the dark/light mode and look at the component below:
+
+<component />
+
+Here is how it works:
+
+```elm
+    type alias SharedState =
+        { darkMode : Bool
+        }
+
+
+    initialState : SharedState
+    initialState =
+        { darkMode = False
+        }
+
+
+    book : Book SharedState
+    book "MyApp"
+        |> withStatefulOptions
+            [ ElmBook.StatefulOptions.initialState
+                initialState
+            , ElmBook.StatefulOptions.onDarkModeChange
+                (\\darkMode state ->
+                    { state | darkMode = darkMode }
+                )
+            ]
+        |> withChapters []
+
+
+    darkModeChapter : Chapter SharedState
+    darkModeChapter =
+        chapter "Dark Mode"
+            |> renderStatefulComponent (
+                \\{ darkMode } ->
+                    if darkMode then
+                        text "You found me!"
+                    else
+                        text "There is something hidden in the dark…"
+            )
+```
+
+"""
diff --git a/src/ElmBook/UI/ElmBook.elm b/src/ElmBook/UI/ElmBook.elm
@@ -6,6 +6,7 @@ import ElmBook.Internal.ThemeOptions
 import ElmBook.StatefulOptions
 import ElmBook.ThemeOptions
 import ElmBook.UI.Docs.ActionLog
+import ElmBook.UI.Docs.DarkModeComponents
 import ElmBook.UI.Docs.Guides.Books
 import ElmBook.UI.Docs.Guides.BuiltinServer
 import ElmBook.UI.Docs.Guides.Chapters
@@ -22,7 +23,8 @@ import ElmBook.UI.Docs.Wrapper
 
 
 type alias SharedState =
-    { theming :
+    { darkMode : Bool
+    , theming :
         { backgroundStart : String
         , backgroundEnd : String
         , accent : String
@@ -35,7 +37,8 @@ type alias SharedState =
 
 initialState : SharedState
 initialState =
-    { theming =
+    { darkMode = False
+    , theming =
         { backgroundStart = ElmBook.Internal.ThemeOptions.defaultBackgroundStart
         , backgroundEnd = ElmBook.Internal.ThemeOptions.defaultBackgroundEnd
         , accent = ElmBook.Internal.ThemeOptions.defaultAccent
@@ -51,6 +54,8 @@ main =
     book "ElmBook's"
         |> withStatefulOptions
             [ ElmBook.StatefulOptions.initialState initialState
+            , ElmBook.StatefulOptions.onDarkModeChange
+                (\darkMode s -> { s | darkMode = darkMode })
             ]
         |> withThemeOptions
             [ ElmBook.ThemeOptions.subtitle "Guides & Components"
@@ -80,6 +85,7 @@ main =
                 , ElmBook.UI.Docs.ActionLog.docs
                 , ElmBook.UI.Docs.Icons.docs
                 , ElmBook.UI.Docs.Markdown.docs
+                , ElmBook.UI.Docs.DarkModeComponents.docs
                 , ElmBook.UI.Docs.ThemeGenerator.docs
                 ]
               )