Elmの要素の属性htmlを知りたい

Question

Elmの要素の属性html、たとえば彼女の座標を知りたいと思います。私はJson.Decodeで試していました。

私は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 
     } 

Answer 1

をだから私はあなたが、具体的取得しようとしているオフセットのどの本当にわからないんだけど、私はこれが置かなると思いますあなたは軌道に乗っている。まず、メッセージのADTのClickingを調整して座標のタプルを作成する必要があります。

type Msg 
    = NoOp 
    | Clicking (Int, Int) 

ここではコードをログに記録しておきたいと仮定します。必要であればパターンマッチで構造を破ることができることを覚えておいてください。

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     NoOp -> 
      (model, Cmd.none) 

     Clicking cs -> 
      let 
       _ = 
        Debug.log "coords" cs 
      in 
       (model, Cmd.none) 

このタプルにはJson.Decode.Decoderが必要です。

import Json.Decode as Decode exposing (Decoder) 


coordsDecoder : Decoder (Int, Int) 
coordsDecoder = 
    Decode.field "target" <| 
     Decode.map2 (,) 
      (Decode.field "offsetWidth" Decode.int) 
      (Decode.field "offsetHeight" Decode.int) 

そして最後には、JavaScriptのクリックイベントによって返さEventオブジェクトで何かを行うデコーダを取るonを必要としています。このデコーダは、Decode.mapのClicking msg型の座標を取得します。

Html.Events.on "click" (Decode.map Clicking coordsDecoder) 

このDecode.field "target" ...を使用すると、ターゲット要素から任意のデコードを開始できます。

---

文体、あなたはexposing (..)でスコープにHtml.*機能の全てを輸入しているが、あなたはまだかなり重複しているすべてのものを前置しています。 Html.Attributes.styleの代わりにstyleを使用することができます。 as - >Html.Attributes as Attrを使用することを恐れないでください。

Answer 2

優れた答えです。ブラウザとの関係で座標を取得しようとすると、左と上のスタイルが完全でない場合があります。私はいくつかの解決策を検索し、この

offsetParent : a -> Decoder a -> Decoder a 
 
offsetParent x decoder = 
 
    Decode.oneOf 
 
    [ field "offsetParent" <| Decode.null x 
 
    , field "offsetParent" decoder 
 
    ]

を発見しています