Я писал ранее о том, как значения javascript взаимодействуют с Json.Decode здесь, но это осознание снова дало мне что-то новое. Прочитав комментарий от debois/elm-dom boundingClientRect, я задумался… могу ли я использовать тот же метод, что и раньше, чтобы добиться большего успеха?
Обработать результат getBoundingClientRect с помощью свойства в Node.prototype с небольшим количеством кода просто:
function getClientRectOfElement() {
return this.getBoundingClientRect();
}
Object.defineProperty(Node.prototype, ‘__arty__clientRect’, {
get: getClientRectOfElement
});
И
module Util exposing (..) import DOM import Json.Decode as JD exposing ((:=)) type alias Rectangle = DOM.Rectangle decodeRectangle : JD.Decoder Rectangle decodeRectangle = JD.object4 DOM.Rectangle (“top” := JD.float) (“left” := JD.float) (“width” := JD.float) (“height” := JD.float) clientRectangle : JD.Decoder Rectangle clientRectangle = JD.at [“__arty__clientRect”] decodeRectangle
И
import Util exposing (clientRectangle) ... view model = div [class "expand-animate", on “click” (DOM.target clientRectangle |> JD.map StartExpand] []
И
action: HomeMsg (StartExpand { top = 250.453125, left = 60.09375, width = 1097.796875, height = 128 })
index.js:901 r: { top = 250.453125, left = 60.09375, width = 1097.796875, height = 128 }
index.js:901 action: HomeMsg (StartExpand { top = 180.453125, left = 60.09375, width = 1097.796875, height = 128 })
index.js:901 r: { top = 180.453125, left = 60.09375, width = 1097.796875, height = 128 }
Было бы неплохо, если бы elm был либо немного более снисходительным, либо остановился бы на способе идентификации и измерения элементов самостоятельно. До тех пор, небольшой хак может иметь большое значение :-)
