Skip to content

Instantly share code, notes, and snippets.

@AttilaVM

AttilaVM/Main.elm

Created January 21, 2018 17:43
Show Gist options
  • Save AttilaVM/698517618d25614b5d37855aeb6083c1 to your computer and use it in GitHub Desktop.
Save AttilaVM/698517618d25614b5d37855aeb6083c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
module Nav exposing (view, update, init, subscriptions)
import Dom.Scroll as S
import Html exposing (Html, div, text)
import Html.Attributes exposing (style)
import Html.Events exposing (..)
import Task
import Navigation
type alias Model =
{ scrollY : Float
, activePage : String
}
type Msg
= Scroll ( Float, String )
| ScrollEvent String
init : ( Model, Cmd msg )
init =
( Model 0 "Home"
, Cmd.none
)
update : Msg -> { a | scrollY : Float } -> ( { a | scrollY : Float }, Cmd Msg )
update msg model =
case msg of
Scroll ( scrollY, name ) ->
( { model | scrollY = scrollY }
, Task.attempt
(\result ->
case result of
Ok result ->
ScrollEvent name
Err error ->
ScrollEvent "scroll_error"
)
(S.toY "scroll-target" scrollY)
)
ScrollEvent name ->
( model, Navigation.newUrl <| "#" ++ name )
subscriptions : a -> Sub msg
subscriptions model =
Sub.none
view : Model -> Html Msg
view model =
let
box =
\color scrollY ->
div
[ style
[ ( "width", "100%" )
, ( "height", "400px" )
, ( "background-color", color )
, ( "text-align", "center" )
, ( "padding-top", "200px" )
, ( "font-size", "30px" )
, ( "user-select", "none" )
]
, onClick <| Scroll ( scrollY, color )
]
[ (text "click me!") ]
in
div []
[ box "cyan" 600
, box "orange" 1200
, box "red" 0
]
<html>
<head>
</head>
<body id="scroll-target">
<div id="app-target">
</div>
<script src="elm.js"></script>
<script>
var app = Elm.Main.embed(document.getElementById("app-target"))
</script>
</body>
</html>
Raw
Main.elm
module Main exposing (..)
import TimeTravel.Html as TimeTravel
import Nav exposing (init, view, update, subscriptions)
main =
TimeTravel.program
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
Raw
Nav.elm
module Nav exposing (view, update, init, subscriptions)
import Dom.Scroll as S
import Html exposing (Html, div, text)
import Html.Attributes exposing (style)
import Html.Events exposing (..)
import Task
import Navigation
type alias Model =
{ scrollY : Float
, activePage : String
}
type Msg
= Scroll ( Float, String )
| ScrollEvent String
init : ( Model, Cmd msg )
init =
( Model 0 "Home"
, Cmd.none
)
update : Msg -> { a | scrollY : Float } -> ( { a | scrollY : Float }, Cmd Msg )
update msg model =
case msg of
Scroll ( scrollY, name ) ->
( { model | scrollY = scrollY }
, Task.attempt
(\result ->
case result of
Ok result ->
ScrollEvent name
Err error ->
ScrollEvent "scroll_error"
)
(S.toY "scroll-target" scrollY)
)
ScrollEvent name ->
( model, Navigation.newUrl <| "#" ++ name )
subscriptions : a -> Sub msg
subscriptions model =
Sub.none
view : Model -> Html Msg
view model =
let
box =
\color scrollY ->
div
[ style
[ ( "width", "100%" )
, ( "height", "400px" )
, ( "background-color", color )
, ( "text-align", "center" )
, ( "padding-top", "200px" )
, ( "font-size", "30px" )
, ( "user-select", "none" )
]
, onClick <| Scroll ( scrollY, color )
]
[ (text "click me!") ]
in
div []
[ box "cyan" 600
, box "orange" 1200
, box "red" 0
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment