GithubHelp home page GithubHelp logo

xarvh / elm-slides Goto Github PK

View Code? Open in Web Editor NEW
51.0 51.0 8.0 52 KB

Awesome presentation framework to create your slides in Elm.

Home Page: http://package.elm-lang.org/packages/xarvh/elm-slides/latest

License: BSD 3-Clause "New" or "Revised" License

Elm 100.00%

elm-slides's People

Contributors

icidasset avatar maybejustjames avatar simbas avatar xarvh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

elm-slides's Issues

elm 0.19 ready

Hey,

could you re-publish the package so it is compatible to elm 0.19?

Thank you! Great work!

Slides module doesn't expose Slide type

Hey there, because the Slides module doesn't expose the Slide type alias, consumers of this package can't write type annotations for their slides.

For example:

module Main exposing (main)

import Slides exposing (..)

main : Program Never Model Msg
main =
    Slides.app
        Slides.slidesDefaultOptions
        [ welcome ]

welcome =
    html <| div [] [ h1 [] [ text "Into to Elm" ] ]

Will compile, but with warnings: Top-level value languageSummary does not have a type annotation.. Adding the type annotation welcome : Slides.Slide results in a compilation failure: Slides does not expose Slide. .

Can you please have a think about exposing the Slide type?

Thanks for the package, appreciate your time & effort!

Divide configuration and model

Currently the model contains 1) the slides themselves and 2) the configuration, which mostly consists of functions.
Both 1 and 2 should be removed from the model, so that:

  • the model is cleaner and more debug-friendly
  • a live slide editor can be implemented more consistently

Add blur to opacity frag animator

betterFade : FA.Animator
betterFade completion =
    let
        blur =
            "blur(" ++ (toString <| round <| (1 - completion) * 10) ++ "px)"
    in
        Css.asPairs
            [ Css.opacity (Css.num completion)
            , Css.property "filter" blur
            , Css.property "-webkit-filter" blur
            ]

Right-clicking shouldn't move slides

I am used to debug part of some HTML page by right-clicking some elements I'm interested in. Right now, when I right-click somewhere on the page it has the same effect as when I left-click and it opens the menu. I don't think that this is the ideal behavior.

White on black is a *terrible* default

Use black on white as default.
Or anything with a bright background, dark backgrounds don't work well with projector screens (which are usually white).

Clicking on a link should not change the slide first

If I introduce a link in a slide and then click on it holding Ctrl to open the link in a new tab, the link opens and the slide changes. The latter behavior is unexpected and unnecessary.
If I click on the link without holding Ctrl, I can see the slide moving while the next page is loading, and if I navigate back, I don't reach the page I was in right away.

PS: having a { display: block; } in the default style is a strange choice.

Inbuilt styles do not work as expected

I am trying to use the inbuilt styles {Slides.Styles.elmBlueOnWhite, Slides.Styles.whiteOnBlack, Slides.Styles.blackOnWhite}.
I'm using this minimal source:

main : Program () Model Msg
main =
    Slides.app
        { slidesDefaultOptions
            | style = elmBlueOnWhite
        }
        [ slide1 ]


slide1 : Slide
slide1 =
    md
        """
         # Title

         ## Subtitle

         Text
         """

Slides.Styles.elmBlueOnWhite works as expected:
elmBlueOnWhite
This is as I expect it to display.

However, the others produce the following results:
Slides.Styles.whiteOnBlack:
whiteOnBlack
I expect to see white text on a black background.

Slides.Styles.blackOnWhite:
blackOnWhite
I expect to see black text on a white background.

Animation of objects

Do you think it would be possible to have animations of objects like images and text in this library?
What I mean is having within one slide sequential animations as in PowerPoint or Keynote.

This would be a killer feature compared to reveal.js that only has this feature (without smooth animations) as a plugin.

Free placement of objects would be a requirement for this to work like PowerPoint or Keynote, but this free placement would also be very very interesting on its own.

I'll try to work on it when I have some time, if you have suggestions for the format or if you think it is simply not possible, please tell me!

html expecting Html.styled.Html

Hi I can't figure out how to use the Slides.html function:

module Main exposing (..)

import Html exposing (..)
import Slides exposing (html, slidesDefaultOptions)


main =
    Slides.app
        slidesDefaultOptions
        [ intro_slide ]


intro_slide =
    Slides.html <|
        div []
            [ h1 []
                [ text "Hello World!"
                ]
            ]

Gives me the following compile error:

-- TYPE MISMATCH ------------------------------------------------------ main.elm

I cannot send this through the (<|) pipe:

14|     Slides.html <|
15|>        div []
16|>            [ h1 []
17|>                [ text "Hello World!"
18|>                ]
19|>            ]

The argument is:

    Html msg

But (<|) is piping it a function that expects:

    Html.Styled.Html Slides.Msg

Where does the Html.Styled.Html type come from? Are you using an old version of elm/html?

Supported way to inject own CSS

It seems it's supported to inject custom CSS, but it's not documented in the samples.
I'd be glad to create a pull request for that, if a few pointers are given here about where to start.

Add verticalDeck slide animator

Something like:

verticalDeck : SA.Animator
verticalDeck status =
    Css.asPairs <|
        case status of
            SA.Still ->
                [ Css.position Css.absolute
                ]

            SA.Moving direction order completion ->
                case order of
                    SA.LaterSlide ->
                        [ Css.position Css.absolute
                        , Css.property "z-index" "1"
                        , Css.property "filter" <| "blur(" ++ (toString <| round <| (1 - completion) * 10) ++ "px)"
                        ]

                    SA.EarlierSlide ->
                        [ Css.position Css.absolute
                        , Css.transform <| Css.translate2 zero (pct (completion * 100))
                        , Css.property "z-index" "2"
                        ]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.