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
, ...
]
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!" ]
]
{ 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:
style
— A list of elm-css Snippets
to apply.
Use [] if you want to use an external CSS.
The Slides.Style
module contains some preset styles ready to use.
slideAnimator
— The function used to customize the slide animation.
The Slides.SlideAnimation
module contains some preset animators and the information for writing custom ones.
fragmentAnimator
— the function used to animate a fragment within a slide.
The Slides.FragmentAnimation
module contains some preset animators and the information for writing custom ones.
easingFunction
— Any f : [0, 1] -> [0, 1]
The standard ones are available in Elm's easing-functions.
animationDuration
— the duration in milliseconds of a slide or fragment animation.
slidePixelSize
— width
and height
geometry of the slide area, in pixel.
While the slide will be scaled to the window size, the internal coordinates of the slide will refer to these values.
keysToActions
— a map of all Msg and the key codes that can trigger them.
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" ]
}
]
}
The available actions, in case you want to remap the keys
Normally used with Navigation.program
The TEA Msg
actionToMsg : Action -> Msg
This is in case you want to try something weird with the update function
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