Mixing
I would like know the attribute html of an element in Elm
up vote
1
down vote
favorite
I would like know the attribute html of an element in Elm, for example, her coordinates. I were trying with Json.Decode.
I am new in Elm, and this is for learning purpose.
This is a simple code, i am using Elm 0.18:
module Stamps exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
type alias Model =
{}
type Msg
= NoOp
| Clicking
model : Model
model =
{}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking ->
let
_ =
Debug.log "msg1" model
in
( model, Cmd.none )
view : Model -> Html Msg
view model =
div
[ Html.Attributes.style
[ ( "backgroundColor", "blue" )
, ( "height", "300px" )
, ( "width", "300px" )
, ( "position", "relative" )
, ( "left", "100px" )
, ( "top", "50px" )
]
, Html.Attributes.class
"parent"
]
[ div
[ Html.Attributes.style
[ ( "background-color", "#3C8D2F" )
, ( "cursor", "move" )
, ( "width", "100px" )
, ( "height", "100px" )
, ( "border-radius", "4px" )
, ( "position", "absolute" )
, ( "color", "white" )
, ( "display", "flex" )
, ( "align-items", "center" )
, ( "justify-content", "center" )
]
, Html.Attributes.class
"children"
, Html.Events.onClick Clicking
]
]
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
main : Program Never Model Msg
main =
Html.program
{ init = ( model, Cmd.none )
, update = update
, view = view
, subscriptions = subscriptions
}
html styles elm
edited Jan 11 '17 at 13:07
lonelyelk
455717
asked Jan 11 '17 at 2:19
Luis Angel
434
add a comment |
up vote
1
down vote
favorite
I would like know the attribute html of an element in Elm, for example, her coordinates. I were trying with Json.Decode.
I am new in Elm, and this is for learning purpose.
This is a simple code, i am using Elm 0.18:
module Stamps exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
type alias Model =
{}
type Msg
= NoOp
| Clicking
model : Model
model =
{}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking ->
let
_ =
Debug.log "msg1" model
in
( model, Cmd.none )
view : Model -> Html Msg
view model =
div
[ Html.Attributes.style
[ ( "backgroundColor", "blue" )
, ( "height", "300px" )
, ( "width", "300px" )
, ( "position", "relative" )
, ( "left", "100px" )
, ( "top", "50px" )
]
, Html.Attributes.class
"parent"
]
[ div
[ Html.Attributes.style
[ ( "background-color", "#3C8D2F" )
, ( "cursor", "move" )
, ( "width", "100px" )
, ( "height", "100px" )
, ( "border-radius", "4px" )
, ( "position", "absolute" )
, ( "color", "white" )
, ( "display", "flex" )
, ( "align-items", "center" )
, ( "justify-content", "center" )
]
, Html.Attributes.class
"children"
, Html.Events.onClick Clicking
]
]
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
main : Program Never Model Msg
main =
Html.program
{ init = ( model, Cmd.none )
, update = update
, view = view
, subscriptions = subscriptions
}
html styles elm
edited Jan 11 '17 at 13:07
lonelyelk
455717
asked Jan 11 '17 at 2:19
Luis Angel
434
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I would like know the attribute html of an element in Elm, for example, her coordinates. I were trying with Json.Decode.
I am new in Elm, and this is for learning purpose.
This is a simple code, i am using Elm 0.18:
module Stamps exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
type alias Model =
{}
type Msg
= NoOp
| Clicking
model : Model
model =
{}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking ->
let
_ =
Debug.log "msg1" model
in
( model, Cmd.none )
view : Model -> Html Msg
view model =
div
[ Html.Attributes.style
[ ( "backgroundColor", "blue" )
, ( "height", "300px" )
, ( "width", "300px" )
, ( "position", "relative" )
, ( "left", "100px" )
, ( "top", "50px" )
]
, Html.Attributes.class
"parent"
]
[ div
[ Html.Attributes.style
[ ( "background-color", "#3C8D2F" )
, ( "cursor", "move" )
, ( "width", "100px" )
, ( "height", "100px" )
, ( "border-radius", "4px" )
, ( "position", "absolute" )
, ( "color", "white" )
, ( "display", "flex" )
, ( "align-items", "center" )
, ( "justify-content", "center" )
]
, Html.Attributes.class
"children"
, Html.Events.onClick Clicking
]
]
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
main : Program Never Model Msg
main =
Html.program
{ init = ( model, Cmd.none )
, update = update
, view = view
, subscriptions = subscriptions
}
html styles elm
edited Jan 11 '17 at 13:07
lonelyelk
455717
asked Jan 11 '17 at 2:19
Luis Angel
434
I would like know the attribute html of an element in Elm, for example, her coordinates. I were trying with Json.Decode.
I am new in Elm, and this is for learning purpose.
This is a simple code, i am using Elm 0.18:
module Stamps exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
type alias Model =
{}
type Msg
= NoOp
| Clicking
model : Model
model =
{}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking ->
let
_ =
Debug.log "msg1" model
in
( model, Cmd.none )
view : Model -> Html Msg
view model =
div
[ Html.Attributes.style
[ ( "backgroundColor", "blue" )
, ( "height", "300px" )
, ( "width", "300px" )
, ( "position", "relative" )
, ( "left", "100px" )
, ( "top", "50px" )
]
, Html.Attributes.class
"parent"
]
[ div
[ Html.Attributes.style
[ ( "background-color", "#3C8D2F" )
, ( "cursor", "move" )
, ( "width", "100px" )
, ( "height", "100px" )
, ( "border-radius", "4px" )
, ( "position", "absolute" )
, ( "color", "white" )
, ( "display", "flex" )
, ( "align-items", "center" )
, ( "justify-content", "center" )
]
, Html.Attributes.class
"children"
, Html.Events.onClick Clicking
]
]
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
main : Program Never Model Msg
main =
Html.program
{ init = ( model, Cmd.none )
, update = update
, view = view
, subscriptions = subscriptions
}
html styles elm
html styles elm
edited Jan 11 '17 at 13:07
lonelyelk
455717
asked Jan 11 '17 at 2:19
Luis Angel
434
edited Jan 11 '17 at 13:07
lonelyelk
455717
asked Jan 11 '17 at 2:19
Luis Angel
434
edited Jan 11 '17 at 13:07
lonelyelk
455717
edited Jan 11 '17 at 13:07
lonelyelk
455717
edited Jan 11 '17 at 13:07
lonelyelk
455717
455717
asked Jan 11 '17 at 2:19
Luis Angel
434
asked Jan 11 '17 at 2:19
Luis Angel
434
asked Jan 11 '17 at 2:19
Luis Angel
434
434
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
6
down vote
So I'm not really sure which of the offsets you're trying to get specifically, but I think this will put you on track. First you need to adjust your Msg ADT's Clicking to have a tuple for the coordinates.
type Msg
= NoOp
| Clicking Int Int
Assuming you want to stick with just logging the coords for now, you can use this. DO remember that you can destructure in the pattern match if you need.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking x y ->
let
_ =
Debug.log "coords" ( x, y )
in
( model, Cmd.none )
You need a Json.Decode.Decoder to that tuple.
import Json.Decode as Decode exposing (Decoder)
coordsDecoder : (Int -> Int) -> Decoder a
coordsDecoder into =
Decode.field "target" <|
Decode.map2 into
(Decode.field "offsetWidth" Decode.int)
(Decode.field "offsetHeight" Decode.int)
And lastly, you need the on to take decoder do something with the Event object returned by a JavaScript click event. This decoder gets the coordinates, then Decode.maps the Clicking msg type.
Html.Events.on "click" (coordsDecoder Clicking)
With that Decode.field "target" ... you can start decoding whatever you want from the target element.
Stylistically, you're importing all of the Html.* functions into scope with exposing (..), but you're still prefixing everything which is pretty redundant. You can just use style instead of Html.Attributes.style. Don't be afraid to use as -> Html.Attributes as Attr.
answered Jan 11 '17 at 5:46
toastal
870614
add a comment |
up vote
0
down vote
Excellent answer, in case if i try to get the coordinates in relation to the browser, in case the style left and top are not definity. I am searching some solution and found this
offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
Decode.oneOf
[ field "offsetParent" <| Decode.null x
, field "offsetParent" decoder
]answered Jan 12 '17 at 20:15
Luis Angel
434
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
6
down vote
So I'm not really sure which of the offsets you're trying to get specifically, but I think this will put you on track. First you need to adjust your Msg ADT's Clicking to have a tuple for the coordinates.
type Msg
= NoOp
| Clicking Int Int
Assuming you want to stick with just logging the coords for now, you can use this. DO remember that you can destructure in the pattern match if you need.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking x y ->
let
_ =
Debug.log "coords" ( x, y )
in
( model, Cmd.none )
You need a Json.Decode.Decoder to that tuple.
import Json.Decode as Decode exposing (Decoder)
coordsDecoder : (Int -> Int) -> Decoder a
coordsDecoder into =
Decode.field "target" <|
Decode.map2 into
(Decode.field "offsetWidth" Decode.int)
(Decode.field "offsetHeight" Decode.int)
And lastly, you need the on to take decoder do something with the Event object returned by a JavaScript click event. This decoder gets the coordinates, then Decode.maps the Clicking msg type.
Html.Events.on "click" (coordsDecoder Clicking)
With that Decode.field "target" ... you can start decoding whatever you want from the target element.
Stylistically, you're importing all of the Html.* functions into scope with exposing (..), but you're still prefixing everything which is pretty redundant. You can just use style instead of Html.Attributes.style. Don't be afraid to use as -> Html.Attributes as Attr.
answered Jan 11 '17 at 5:46
toastal
870614
add a comment |
up vote
6
down vote
So I'm not really sure which of the offsets you're trying to get specifically, but I think this will put you on track. First you need to adjust your Msg ADT's Clicking to have a tuple for the coordinates.
type Msg
= NoOp
| Clicking Int Int
Assuming you want to stick with just logging the coords for now, you can use this. DO remember that you can destructure in the pattern match if you need.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking x y ->
let
_ =
Debug.log "coords" ( x, y )
in
( model, Cmd.none )
You need a Json.Decode.Decoder to that tuple.
import Json.Decode as Decode exposing (Decoder)
coordsDecoder : (Int -> Int) -> Decoder a
coordsDecoder into =
Decode.field "target" <|
Decode.map2 into
(Decode.field "offsetWidth" Decode.int)
(Decode.field "offsetHeight" Decode.int)
And lastly, you need the on to take decoder do something with the Event object returned by a JavaScript click event. This decoder gets the coordinates, then Decode.maps the Clicking msg type.
Html.Events.on "click" (coordsDecoder Clicking)
With that Decode.field "target" ... you can start decoding whatever you want from the target element.
Stylistically, you're importing all of the Html.* functions into scope with exposing (..), but you're still prefixing everything which is pretty redundant. You can just use style instead of Html.Attributes.style. Don't be afraid to use as -> Html.Attributes as Attr.
answered Jan 11 '17 at 5:46
toastal
870614
add a comment |
up vote
6
down vote
up vote
6
down vote
So I'm not really sure which of the offsets you're trying to get specifically, but I think this will put you on track. First you need to adjust your Msg ADT's Clicking to have a tuple for the coordinates.
type Msg
= NoOp
| Clicking Int Int
Assuming you want to stick with just logging the coords for now, you can use this. DO remember that you can destructure in the pattern match if you need.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking x y ->
let
_ =
Debug.log "coords" ( x, y )
in
( model, Cmd.none )
You need a Json.Decode.Decoder to that tuple.
import Json.Decode as Decode exposing (Decoder)
coordsDecoder : (Int -> Int) -> Decoder a
coordsDecoder into =
Decode.field "target" <|
Decode.map2 into
(Decode.field "offsetWidth" Decode.int)
(Decode.field "offsetHeight" Decode.int)
And lastly, you need the on to take decoder do something with the Event object returned by a JavaScript click event. This decoder gets the coordinates, then Decode.maps the Clicking msg type.
Html.Events.on "click" (coordsDecoder Clicking)
With that Decode.field "target" ... you can start decoding whatever you want from the target element.
Stylistically, you're importing all of the Html.* functions into scope with exposing (..), but you're still prefixing everything which is pretty redundant. You can just use style instead of Html.Attributes.style. Don't be afraid to use as -> Html.Attributes as Attr.
answered Jan 11 '17 at 5:46
toastal
870614
So I'm not really sure which of the offsets you're trying to get specifically, but I think this will put you on track. First you need to adjust your Msg ADT's Clicking to have a tuple for the coordinates.
type Msg
= NoOp
| Clicking Int Int
Assuming you want to stick with just logging the coords for now, you can use this. DO remember that you can destructure in the pattern match if you need.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
Clicking x y ->
let
_ =
Debug.log "coords" ( x, y )
in
( model, Cmd.none )
You need a Json.Decode.Decoder to that tuple.
import Json.Decode as Decode exposing (Decoder)
coordsDecoder : (Int -> Int) -> Decoder a
coordsDecoder into =
Decode.field "target" <|
Decode.map2 into
(Decode.field "offsetWidth" Decode.int)
(Decode.field "offsetHeight" Decode.int)
And lastly, you need the on to take decoder do something with the Event object returned by a JavaScript click event. This decoder gets the coordinates, then Decode.maps the Clicking msg type.
Html.Events.on "click" (coordsDecoder Clicking)
With that Decode.field "target" ... you can start decoding whatever you want from the target element.
Stylistically, you're importing all of the Html.* functions into scope with exposing (..), but you're still prefixing everything which is pretty redundant. You can just use style instead of Html.Attributes.style. Don't be afraid to use as -> Html.Attributes as Attr.
answered Jan 11 '17 at 5:46
toastal
870614
edited 16 hours ago
answered Jan 11 '17 at 5:46
toastal
870614
answered Jan 11 '17 at 5:46
toastal
870614
answered Jan 11 '17 at 5:46
toastal
870614
870614
add a comment |
add a comment |
up vote
0
down vote
Excellent answer, in case if i try to get the coordinates in relation to the browser, in case the style left and top are not definity. I am searching some solution and found this
offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
Decode.oneOf
[ field "offsetParent" <| Decode.null x
, field "offsetParent" decoder
]answered Jan 12 '17 at 20:15
Luis Angel
434
add a comment |
up vote
0
down vote
Excellent answer, in case if i try to get the coordinates in relation to the browser, in case the style left and top are not definity. I am searching some solution and found this
offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
Decode.oneOf
[ field "offsetParent" <| Decode.null x
, field "offsetParent" decoder
]answered Jan 12 '17 at 20:15
Luis Angel
434
add a comment |
up vote
0
down vote
up vote
0
down vote
Excellent answer, in case if i try to get the coordinates in relation to the browser, in case the style left and top are not definity. I am searching some solution and found this
offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
Decode.oneOf
[ field "offsetParent" <| Decode.null x
, field "offsetParent" decoder
]answered Jan 12 '17 at 20:15
Luis Angel
434
Excellent answer, in case if i try to get the coordinates in relation to the browser, in case the style left and top are not definity. I am searching some solution and found this
offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
Decode.oneOf
[ field "offsetParent" <| Decode.null x
, field "offsetParent" decoder
]offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
Decode.oneOf
[ field "offsetParent" <| Decode.null x
, field "offsetParent" decoder
]offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
Decode.oneOf
[ field "offsetParent" <| Decode.null x
, field "offsetParent" decoder
]answered Jan 12 '17 at 20:15
Luis Angel
434
answered Jan 12 '17 at 20:15
Luis Angel
434
answered Jan 12 '17 at 20:15
Luis Angel
434
answered Jan 12 '17 at 20:15
Luis Angel
434
434
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41581686%2fi-would-like-know-the-attribute-html-of-an-element-in-elm%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
