Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-07-07 02:36:19 +03:00
Code Issues Projects Releases Wiki Activity

explorer: save the dark mode current setting in localstorage

Browse Source
This commit is contained in:
Christophe de Vienne 2021-06-14 13:33:31 +02:00
parent bfc6df731a
commit 8eacde7e29
28 changed files with 8092 additions and 8244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -2,3 +2,5 @@
elm-stuff
# elm-repl generated files
repl-temp-*
# elm-live && build generated file
explorer/main.js

3
build-doc.sh Normal file
View File

@ -0,0 +1,3 @@
(cd explorer && elm make src/Main.elm --optimize --output main.js) &&
cp explorer/main.js docs/ &&
cp explorer/main.js docs/3.0.0

58
docs/3.0.0/index.html
View File

@ -1,50 +1,20 @@
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<meta charset="UTF-8">
<title>Main</title>
<style>body { padding: 0; margin: 0; }</style>
<script src="/3.0.0/main.js"></script>
</head>
<body>
<div id="elm"></div>
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search[1] === '/') {
var decoded = l.search.slice(1).split('&').map(function (s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
<!-- End Single Page Apps for GitHub Pages -->
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
<script>
(function(){
var settings = localStorage.getItem("settings");
const app = Elm.Main.init({flags: { relativePath : "elm-ui-widgets/3.0.0", settings: settings } });
app.ports.saveSettings.subscribe(function(settings){
localStorage.setItem("settings", settings);
});
}());
</script>
</body>
</html>
</html>

8007
docs/3.0.0/main.js
View File

File diff suppressed because it is too large Load Diff

64
docs/index.html
View File

@ -1,50 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<meta charset="UTF-8">
<title>Main</title>
<style>body { padding: 0; margin: 0; }</style>
<script src="/main.js"></script>
</head>
<body>
<div id="elm"></div>
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search[1] === '/') {
var decoded = l.search.slice(1).split('&').map(function (s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
<!-- End Single Page Apps for GitHub Pages -->
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
<script>
(function(){
var settings = localStorage.getItem("settings");
const app = Elm.Main.init({
flags: {
settings: settings,
config: { relativeUrlPath: ["elm-ui-widgets"] }
}
});
app.ports.saveSettings.subscribe(function(settings){
localStorage.setItem("settings", settings);
});
}());
</script>
</body>
</html>
</html>

8007
docs/main.js
View File

File diff suppressed because it is too large Load Diff

21
explorer/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<style>body { padding: 0; margin: 0; }</style>
<script src="/main.js"></script>
</head>
<body>
<script>
(function(){
var settings = localStorage.getItem("settings");
const app = Elm.Main.init({flags: { settings: settings } });
app.ports.saveSettings.subscribe(function(settings){
localStorage.setItem("settings", settings);
});
}());
</script>
</body>
</html>

32
explorer/src/Main.elm
View File

@ -1,6 +1,7 @@
module Main exposing (main)
import Element
import Json.Decode as Decode exposing (Decoder)
import Page.AppBar
import Page.Button
import Page.Dialog
@ -37,13 +38,26 @@ pages =
|> UIExplorer.nextPage "Dialog" Page.Dialog.page
type alias Flags =
{ settings : UIExplorer.Settings
}
decodeFlags : Decoder Flags
decodeFlags =
Decode.map Flags
(Decode.field "settings" UIExplorer.decodeSettings)
config : UIExplorer.ApplicationConfig msg Flags
config =
{ flagsDecoder = decodeFlags
, layoutOptions = []
, layoutAttributes = []
, relativeUrlPath = [ "elm-ui-widgets" ]
, sidebarTitle = Element.text "Elm UI Widgets"
}
main =
let
config =
UIExplorer.defaultConfig
in
UIExplorer.application
{ config
| sidebarTitle = Element.text "Elm UI Widgets"
}
pages
UIExplorer.application config pages

6
explorer/src/Page.elm
View File

@ -16,10 +16,10 @@ import Widget.Material.Typography as Typography
create :
{ title : String
, description : String
, book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
, demo : Tile model msg ()
, book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
, demo : Tile model msg flags
}
-> Page ( ( ( (), () ), model ), ( StorySelectorModel, () ) ) (TileMsg (TileMsg (TileMsg () msg1) msg) (TileMsg StorySelectorMsg ())) ()
-> Page ( ( ( (), () ), model ), ( StorySelectorModel, () ) ) (TileMsg (TileMsg (TileMsg () msg1) msg) (TileMsg StorySelectorMsg ())) flags
create config =
Tile.static []
(\_ _ ->

4
explorer/src/Page/AppBar.elm
View File

@ -101,7 +101,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -489,7 +489,7 @@ view { palette } { snackbar, searchText, selected, showDialog, active } =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/Button.elm
View File

@ -81,7 +81,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -273,7 +273,7 @@ view { palette } model =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/Dialog.elm
View File

@ -59,7 +59,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -190,7 +190,7 @@ view { palette } (IsOpen isOpen) =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

2
explorer/src/Page/Icon.elm
View File

@ -135,7 +135,7 @@ view { palette } () =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

16
explorer/src/Page/Item.elm
View File

@ -62,7 +62,7 @@ viewDividerFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
dividerBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
dividerBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
dividerBook =
Story.book (Just "Options")
viewDividerFunctions
@ -116,7 +116,7 @@ viewHeaderFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
headerBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
headerBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
headerBook =
Story.book (Just "Options")
viewHeaderFunctions
@ -170,7 +170,7 @@ viewFullBleedItemFunctions =
Story.initStaticTiles
fullBleedItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
fullBleedItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
fullBleedItemBook =
Story.book (Just "Options")
viewFullBleedItemFunctions
@ -239,7 +239,7 @@ viewInsetItemFunctions =
Story.initStaticTiles
insetItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
insetItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
insetItemBook =
Story.book (Just "Options")
viewInsetItemFunctions
@ -319,7 +319,7 @@ viewMultiLineItemFunctions =
Story.initStaticTiles
multiLineItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
multiLineItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
multiLineItemBook =
Story.book (Just "Options")
viewMultiLineItemFunctions
@ -422,7 +422,7 @@ viewMExpansionItemFunctions =
Story.initStaticTiles
expansionItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
expansionItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
expansionItemBook =
Story.book (Just "Options")
viewMExpansionItemFunctions
@ -479,7 +479,7 @@ viewSelectItemFunctions =
Story.initStaticTiles
selectItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
selectItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
selectItemBook =
Story.book (Just "Options")
viewSelectItemFunctions
@ -740,7 +740,7 @@ view { palette } model =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/Modal.elm
View File

@ -126,7 +126,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -257,7 +257,7 @@ view { palette } (IsEnabled isEnabled) =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/MultiSelect.elm
View File

@ -105,7 +105,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -233,7 +233,7 @@ view { palette } (Selected selected) =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

2
explorer/src/Page/PasswordInput.elm
View File

@ -171,7 +171,7 @@ view { palette } model =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/ProgressIndicator.elm
View File

@ -44,7 +44,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -118,7 +118,7 @@ view { palette } (MaybeProgress maybeProgress) =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

2
explorer/src/Page/Select.elm
View File

@ -92,7 +92,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions

4
explorer/src/Page/Snackbar.elm
View File

@ -53,7 +53,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -198,7 +198,7 @@ view { palette } model =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/SortTable.elm
View File

@ -49,7 +49,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -225,7 +225,7 @@ view { palette } model =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/Switch.elm
View File

@ -47,7 +47,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -134,7 +134,7 @@ view { palette } (IsButtonEnabled isButtonEnabled) =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

4
explorer/src/Page/Tab.elm
View File

@ -67,7 +67,7 @@ viewFunctions =
{-| Let's you play around with the options.
Note that the order of these stories must follow the order of the arguments from the view functions.
-}
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
book =
Story.book (Just "Options")
viewFunctions
@ -190,7 +190,7 @@ view { palette } (Selected selected) =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

2
explorer/src/Page/TextInput.elm
View File

@ -192,7 +192,7 @@ view { palette } model =
--------------------------------------------------------------------------------
demo : Tile Model Msg ()
demo : Tile Model Msg flags
demo =
{ init = always init
, update = update

6
explorer/src/Ports.elm Normal file
View File

@ -0,0 +1,6 @@
port module Ports exposing (saveSettings)
import Json.Encode
port saveSettings : String -> Cmd msg

54
explorer/src/UIExplorer.elm
View File

@ -1,6 +1,7 @@
module UIExplorer exposing
( application, defaultConfig, ApplicationConfig, Model, Msg, PageMsg
, firstPage, nextPage, groupPages, static, Page, PageSize, PageBuilder
, Settings, decodeSettings
)
{-|
@ -43,7 +44,9 @@ import Element.Region
import Html exposing (Html)
import Html.Attributes
import Json.Decode as Decode
import Json.Encode as Encode
import Pixels exposing (Pixels)
import Ports
import Quantity exposing (Quantity)
import Set exposing (Set)
import Svg
@ -58,6 +61,41 @@ import Widget.Material as Material
import Widget.Material.Typography as Typography
{-| The Settings. Must be the type of the 'settings' attribute of the flags
-}
type alias Settings =
{ dark : Bool }
decodeSettings : Decode.Decoder Settings
decodeSettings =
Decode.string
|> Decode.andThen
(\s ->
case
Decode.decodeString
(Decode.map Settings
(Decode.field "dark" Decode.bool)
)
s
of
Ok settings ->
Decode.succeed settings
Err _ ->
Decode.succeed { dark = False }
)
saveSettings : Settings -> Cmd msg
saveSettings settings =
Encode.object
[ ( "dark", Encode.bool settings.dark )
]
|> Encode.encode 0
|> Ports.saveSettings
{-| The first page in your UI explorer. This is the default page if the user doesn't specify a url path.
import Element
@ -421,12 +459,12 @@ uiUrl path pageId =
init :
ApplicationConfig (Msg pageMsg) flags
-> PageBuilder pageModel pageMsg flags
ApplicationConfig (Msg pageMsg) { flags | settings : Settings }
-> PageBuilder pageModel pageMsg { flags | settings : Settings }
-> Decode.Value
-> Url
-> Browser.Navigation.Key
-> ( Model pageModel flags, Cmd (Msg pageMsg) )
-> ( Model pageModel { flags | settings : Settings }, Cmd (Msg pageMsg) )
init config (PageBuilder pages) flagsJson url key =
let
( page, navigationCmd ) =
@ -453,7 +491,7 @@ init config (PageBuilder pages) flagsJson url key =
, pageSizeOption = Native
, expandColorBlindOptions = False
, colorBlindOption = Nothing
, darkThemeEnabled = False
, darkThemeEnabled = flags.settings.dark
}
, Cmd.batch
[ navigationCmd
@ -622,7 +660,7 @@ updateSuccess (PageBuilder pages) config msg model =
)
ChangeDarkTheme enabled ->
( { model | darkThemeEnabled = enabled }, Cmd.none )
( { model | darkThemeEnabled = enabled }, saveSettings { dark = enabled } )
Load string ->
( model, Browser.Navigation.pushUrl model.key string )
@ -1560,9 +1598,9 @@ Instead it's best to just let the compiler infer it automatically.
-}
application :
ApplicationConfig (Msg pageMsg) flags
-> PageBuilder pageModel pageMsg flags
-> Platform.Program Decode.Value (Model pageModel flags) (Msg pageMsg)
ApplicationConfig (Msg pageMsg) { flags | settings : Settings }
-> PageBuilder pageModel pageMsg { flags | settings : Settings }
-> Platform.Program Decode.Value (Model pageModel { flags | settings : Settings }) (Msg pageMsg)
application config pages =
Browser.application
{ init = init config pages

2
explorer/src/UIExplorer/Story.elm
View File

@ -175,7 +175,7 @@ addTile view tilelist =
}
initStaticTiles : Group view () () ()
initStaticTiles : Group view () () flags
initStaticTiles =
{ init = always ( (), Cmd.none )
, update = \_ _ -> ( (), Cmd.none )

10
explorer/src/UIExplorer/Tile.elm
View File

@ -371,7 +371,7 @@ page (Builder config) =
{-| render a markdown text into a simple panel
-}
markdown : List (Attribute ()) -> String -> Tile () () ()
markdown : List (Attribute msg) -> String -> Tile () msg flags
markdown attributes text =
static attributes
(\_ _ ->
@ -380,14 +380,14 @@ markdown attributes text =
)
static : List (Attribute msg) -> (Context -> flags -> Element msg) -> Tile flags msg flags
static : List (Attribute msg) -> (Context -> () -> Element msg) -> Tile () msg flags
static attributes tileView =
{ init = \flags -> ( flags, Cmd.none )
{ init = \flags -> ( (), Cmd.none )
, update = \_ m -> ( m, Cmd.none )
, view =
\pagesize flags ->
\pagesize () ->
{ title = Nothing
, body = tileView pagesize flags
, body = tileView pagesize ()
, position = FullWidthTile
, attributes = attributes
}