diff options
| author | stuebinm | 2021-03-07 22:04:42 +0100 |
|---|---|---|
| committer | stuebinm | 2021-03-07 22:04:42 +0100 |
| commit | d8925def7fa6a359e11e612527d12a0280f44d84 (patch) | |
| tree | 464d34c36f9789bf1bfcf6cde92529d7056177a0 | |
| parent | f5c19d2061e03ef28c45efd839bb211e446b25f6 (diff) | |
Add simple cover which lets users create new links
| -rw-r--r-- | picarones-elm/cover.html | 19 | ||||
| -rw-r--r-- | picarones-elm/default.nix | 2 | ||||
| -rw-r--r-- | picarones-elm/document.css | 26 | ||||
| -rw-r--r-- | picarones-elm/src/Cover.elm | 71 | ||||
| -rw-r--r-- | picarones-elm/src/Main.elm | 4 |
5 files changed, 117 insertions, 5 deletions
diff --git a/picarones-elm/cover.html b/picarones-elm/cover.html new file mode 100644 index 0000000..d92eba9 --- /dev/null +++ b/picarones-elm/cover.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="UTF-8"> + <title>Main</title> + <script src="Cover.js"></script> + <link rel="stylesheet" type="text/css" href="document.css" /> +</head> + +<body> + <div id="elm"></div> + <script> + var app = Elm.Cover.init({ + node: document.getElementById('elm'), + flags: "https://picarones.stuebinm.eu" + }); + </script> +</body> +</html> diff --git a/picarones-elm/default.nix b/picarones-elm/default.nix index d597f70..ed71959 100644 --- a/picarones-elm/default.nix +++ b/picarones-elm/default.nix @@ -44,7 +44,7 @@ in mkDerivation { srcs = ./elm-srcs.nix; src = ./.; - targets = ["Main"]; + targets = ["Main" "Cover"]; srcdir = "./src"; outputJavaScript = true; } diff --git a/picarones-elm/document.css b/picarones-elm/document.css index e4379b6..7ec32ce 100644 --- a/picarones-elm/document.css +++ b/picarones-elm/document.css @@ -70,9 +70,31 @@ button.pressed { color: #eee; } +.input-form { + max-width: 44em; + margin: auto; +} +.grid { + display: grid; + grid-column-gap: 2em; + grid-template-columns: 40% 60%; + text-align: left; + margin-top: 3em; +} +.gridentry { + display: inline-grid; + align-content: center; + text-align: right; +} +a { + color: #fb0; +} - - +.remark { + text-align: justify; + margin-top: 3em; + color: #bbb; +} diff --git a/picarones-elm/src/Cover.elm b/picarones-elm/src/Cover.elm new file mode 100644 index 0000000..5c92e73 --- /dev/null +++ b/picarones-elm/src/Cover.elm @@ -0,0 +1,71 @@ +module Cover exposing (..) + +import Browser +import Html exposing (..) +import Html.Events exposing (onInput, onClick) +import Html.Attributes exposing (..) + + +main = Browser.document { init = init, update = update, view = view, subscriptions = (\m -> Sub.none)} + + + +type alias Model = (String, Int, String) + +init : String -> (Model, Cmd Msg) +init baseurl = (("", 10, baseurl), Cmd.none) + +type Msg = Change String | SlideInc | SlideDec + +update : Msg -> Model -> (Model, Cmd Msg) +update msg (prefix,m,b) = let model = case msg of + Change new -> (new, m, b) + SlideInc -> (prefix, m + 1, b) + SlideDec -> (prefix, Basics.max (m - 1) 1, b) + in (model, Cmd.none) + + +view : Model -> Browser.Document Msg +view model = { title = "Picarones" + , body = [body model] + } + + +body : Model -> Html Msg +body (prefix, max, baseurl) = + div [class "input-form"] [ h1 [] [text "Create new slide session:"], div [] [] + , div [ class "grid" ] + [ divtext "enter slide uri:", input [ placeholder "https://yourdomain.tld/path-to-slides", value prefix, onInput Change ] [] + , divtext "number of slides:", mkNumberInput max + , divtext "your link:", mkLink (prefix, max, baseurl) + ] + , mkRemark prefix + ] + +divtext : String -> Html Msg +divtext str = div [class "gridentry"] [text str] + +mkNumberInput : Int -> Html Msg +mkNumberInput i = + span [] + [ button [onClick SlideDec] [text "-"] + , text (String.fromInt i) + , button [onClick SlideInc] [text "+"] + ] + +mkLink : Model -> Html Msg +mkLink (p, max, baseurl) = case p of + "" -> text "(none yet)" + prefix -> let link = baseurl ++ "/slide#" ++ prefix ++ "#" ++ (String.fromInt max) + in a [ href link ] [ text link ] + + +mkRemark : String -> Html Msg +mkRemark prefix = let example = case prefix of + "" -> "https://yourdomain.tld/path-to-slides/01.png" + _ -> prefix ++ "01.png" + in div [class "remark"] [ + text ("""Your slides should be available at the above uri, postfixed with a + double-digit number and a .png extension, e.g. """ ++ example ++ + " should contain an image.") + ] diff --git a/picarones-elm/src/Main.elm b/picarones-elm/src/Main.elm index 014d2f4..6e69fe4 100644 --- a/picarones-elm/src/Main.elm +++ b/picarones-elm/src/Main.elm @@ -36,7 +36,7 @@ type alias Model = { slide : Int, max : Int, prefix : String } -- start at the first slide, for now just assume that we have ten slides init : (String, Int) -> (Model, Cmd Msg) -init (url, max) = ( { slide = 0, max = max, prefix = url ++ "/"}, Cmd.none) +init (url, max) = ( { slide = 0, max = max, prefix = url}, Cmd.none) -- possible state transitions: type Msg = GotMessage String @@ -102,7 +102,7 @@ padNum l num = view : Model -> Browser.Document Msg -view model = { title = "Websockets example" +view model = { title = "Picarones" , body = [body model] } |