xarvh / elm-slides / Slides

Main API

app : Options -> List Slide -> Platform.Program () Model Msg

Does all the wiring for you, returning a Program ready to run.

main =
    Slides.app
        Slides.slidesDefaultOptions
        [ slide1
        , slide2
        , ...
        ]


type Slide

md : String -> Slide

Creates a slide from a Markdown string.

It uses elm-markdown so you can enable syntax highlightning by including highlight.js.

It automatically removes indentation from multi-line strings.

slide3 =
    Slides.md
        """
        # Hello! I am a header
        *and I am emph!*
        """

mdFragments : List String -> Slide

Turns several Markdown strings into a single slide made by several fragments, which will appear one after another:

slide4 =
    Slides.mdFragments
        [ "I am always visible"
        , "Then I appear"
        , "and Then I"
        ]

html : Html.Styled.Html Msg -> Slide

Creates a single slide from a DOM node.

Can be used to create custom slides constructors (yes, it is used internally by md and mdMarkdown).

Note: Html.Styled is provided by elm-css

import Html.Styled as Html exposing (..)

slide1 =
    Slides.html <|
        div
            []
            [ h1 [] [ text "Hello, I am the slide header" ]
            , div [] [ text "and I am some content" ]
            ]

htmlFragments : List (Html.Styled.Html Msg) -> Slide

Creates a single slide made by several fragments, which are displayed in sequence, one after the other.

slide2 =
    Slides.htmlFragments
        [ div [] [ text "I am always visible when the slide is visible" ]
        , div [] [ text "Then I appear" ]
        , div [] [ text "and then I appear!" ]
        ]

Options


type alias Options =
{ title : String
, style : List Css.Global.Snippet
, slideAnimator : SlideAnimation.Animator
, fragmentAnimator : FragmentAnimation.Animator
, easingFunction : Ease.Easing
, animationDuration : Basics.Float
, slidePixelSize : { height : Basics.Int
, width : Basics.Int }
, keysToActions : List { action : Action
, keys : List String } 
}

Configuration options:

slidesDefaultOptions : Options

Default configuration options.

slidesDefaultOptions : Options
slidesDefaultOptions =
    { title =
        "Presentation"
    , style =
        Slides.Styles.elmBlueOnWhite
    , slideAnimator =
        SlideAnimation.verticalDeck
    , fragmentAnimator =
        FragmentAnimation.fade
    , easingFunction =
        Ease.inOutCubic
    , animationDuration =
        500
    , slidePixelSize =
        { height = 700
        , width = 960
        }
    , keysToActions =
        [ { action = GotoFirst
          , keys = [ "Home" ]
          }
        , { action = GotoLast
          , keys = [ "End" ]
          }
        , { action = GotoNext
          , keys = [ "Enter", " ", "ArrowRight", "l", "d" ]
          }
        , { action = GotoPrev
          , keys = [ "Backspace", "ArrowLeft", "h", "a" ]
          }
        , { action = PauseAnimation
          , keys = [ "p" ]
          }
        ]
    }


type Action

The available actions, in case you want to remap the keys

Elm Architecture

Normally used with Navigation.program


type Msg

The TEA Msg

actionToMsg : Action -> Msg

This is in case you want to try something weird with the update function


type Model

init : Options -> List Slide -> () -> Url -> Browser.Navigation.Key -> ( Model, Platform.Cmd.Cmd Msg )

update : Options -> Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )

view : Options -> Model -> Browser.Document Msg

subscriptions : Options -> Model -> Platform.Sub.Sub Msg