Last active
January 12, 2018 02:22
-
-
Save AttilaVM/5a2721685c57d60251166396bff8069e to your computer and use it in GitHub Desktop.
Get initial window size with elm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<style> | |
/* you can style your program here */ | |
</style> | |
</head> | |
<body> | |
<script> | |
var app = Elm.Main.fullscreen() | |
// you can use ports and stuff here | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- https://ellie-app.com/npWNPSCdNa1/6 | |
module Main exposing (main) | |
import Element exposing (..) | |
import Element.Attributes exposing (..) | |
import Element.Events as Events | |
import Html | |
import Json.Decode as Json | |
import Style exposing (..) | |
import Task | |
import Time | |
import Window | |
type alias Model = | |
{ started : Bool | |
, wSize : Window.Size | |
} | |
type Msg | |
= NewSize Window.Size | |
| PageLoad | |
main = | |
Html.program | |
{ init = init | |
, update = update | |
, view = view | |
, subscriptions = subscriptions | |
} | |
init: (Model, Cmd Msg) | |
init = | |
( Model False (Window.Size 1920 1080), initWindowSize ) | |
initWindowSize = | |
Task.perform NewSize Window.size | |
update : Msg -> Model -> ( Model, Cmd Msg ) | |
update msg model = | |
case msg of | |
NewSize newSize -> | |
( { model | |
| wSize = newSize | |
} | |
, Cmd.none | |
) | |
PageLoad -> | |
( model | |
, Task.perform NewSize Window.size | |
) | |
subscriptions : Model -> Sub Msg | |
subscriptions model = | |
Sub.batch | |
[ Window.resizes | |
(\{ width, height } -> | |
NewSize (Window.Size width height) | |
) | |
] | |
type Styles | |
= None | |
| Data | |
stylesheet : StyleSheet elem variation | |
stylesheet = | |
Style.styleSheet [] | |
view : Model -> Html.Html Msg | |
view model = | |
Element.layout stylesheet <| | |
column None | |
[] | |
[ el None [ Events.onClick PageLoad ] (text "width - height") | |
, el None [] (text <| toString model.wSize) | |
] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment