diff options
| author | stuebinm | 2021-03-07 18:37:10 +0100 |
|---|---|---|
| committer | stuebinm | 2021-03-07 18:37:10 +0100 |
| commit | 8b3ca704c66d7815e6f932e92a493f9aae44d74b (patch) | |
| tree | 6cb42002509a116b66b66388637e6b6ad1d600a5 /picarones-elm | |
| parent | 090041fadec2e2896c3b82ef518096313d452c13 (diff) | |
Load slides from url given in uri fragment
Syntax is: https://domain-to-app#<prefix-for-slides>#<number-of-slides>
Slides must be .png image files numbered as 01.png, 02.png ...
Diffstat (limited to '')
| -rw-r--r-- | picarones-elm/elm.json | 4 | ||||
| -rw-r--r-- | picarones-elm/index.html | 5 | ||||
| -rw-r--r-- | picarones-elm/src/Main.elm | 18 |
3 files changed, 17 insertions, 10 deletions
diff --git a/picarones-elm/elm.json b/picarones-elm/elm.json index 2d0d191..b8f1ad7 100644 --- a/picarones-elm/elm.json +++ b/picarones-elm/elm.json @@ -9,11 +9,11 @@ "elm/browser": "1.0.2", "elm/core": "1.0.5", "elm/html": "1.0.0", - "elm/json": "1.1.3" + "elm/json": "1.1.3", + "elm/url": "1.0.0" }, "indirect": { "elm/time": "1.0.0", - "elm/url": "1.0.0", "elm/virtual-dom": "1.0.2" } }, diff --git a/picarones-elm/index.html b/picarones-elm/index.html index 66fe158..4fe72c7 100644 --- a/picarones-elm/index.html +++ b/picarones-elm/index.html @@ -10,8 +10,11 @@ <body> <div id="elm"></div> <script> + let args = location.hash.split("#").slice(1); + var app = Elm.Main.init({ - node: document.getElementById('elm') + node: document.getElementById('elm'), + flags: [args[0], parseInt(args[1])] }); let ws = new WebSocket("ws://localhost:9160") diff --git a/picarones-elm/src/Main.elm b/picarones-elm/src/Main.elm index 5066ad6..56cf48f 100644 --- a/picarones-elm/src/Main.elm +++ b/picarones-elm/src/Main.elm @@ -6,6 +6,7 @@ import Html.Attributes exposing (style, class, value, placeholder, src) import Html.Events exposing (onInput, onClick) import Html.Lazy exposing (lazy) import List exposing (foldr) +import Url.Parser exposing (Parser, (</>), string, fragment) import Protocol exposing (decodeState, encodeState) import Json.Decode as D @@ -27,14 +28,15 @@ port recvPort : (String -> msg) -> Sub msg port sendPort : String -> Cmd msg + {- STATE AND STATE TRANSITIONS -} -- the main client state -type alias Model = { slide : Int, max : Int } +type alias Model = { slide : Int, max : Int, prefix : String } -- start at the first slide, for now just assume that we have ten slides -init : () -> (Model, Cmd Msg) -init f = ( { slide = 0, max = 10 }, Cmd.none) +init : (String, Int) -> (Model, Cmd Msg) +init (url, max) = ( { slide = 0, max = max, prefix = url ++ "/"}, Cmd.none) -- possible state transitions: type Msg = GotMessage String @@ -66,7 +68,7 @@ updateSlide f model = -- our body consists of a slide container and a couple controls body : Model -> Html Msg body model = div [] - [ div [class "slides"] (slideView model.slide model.max) + [ div [class "slides"] (slideView model.slide model.max model.prefix) , div [class "controls"] [ button [ onClick PrevSlide ] [ text "←" ] , text (String.fromInt (model.slide+1)) @@ -74,12 +76,14 @@ body model = div [] ] ] + + -- the slide view is just a list of img tags, one for each slide; note -- that these are all loaded on startup, with visibility done through -- z indices so we won't have lags while switching between them. -slideView : Int -> Int -> List (Html Msg) -slideView i max = List.range 0 (max - 1) - |> List.map (\x -> ("example/" ++ (padNum 2 (x+1)) ++ ".png", x == i)) +slideView : Int -> Int -> String -> List (Html Msg) +slideView i max prefix = List.range 0 (max - 1) + |> List.map (\x -> (prefix ++ (padNum 2 (x+1)) ++ ".png", x == i)) |> List.map (\(path,t) -> img [src path, onTop t] []) onTop t = style "z-index" (String.fromInt (if t then 10 else 0)) |