@@ -12,11 +12,12 @@ module Graphics.Element (widthOf, heightOf, sizeOf,
1212 spacer, newElement
1313 ) where
1414
15−import Native.Utils (guid, max, htmlHeight)
16−import JavaScript as JS
15+import open Basics
16+import Native.Utils as Native
17+import open JavaScript
1718import List as List
18−import Color
19−import Maybe (Just, Nothing)
19+import Color (Color)
20+import Maybe (Maybe, Just, Nothing)
2021
2122type Properties = {
2223 id : Int,
@@ -45,18 +46,18 @@ sizeOf e = (e.props.width, e.props.height)
4546
4647-- Create an `Element` with a given width.
4748width : Int -> Element -> Element
48−width nw e = let p = e.props
49− props = case e.element of
50− Image _ w h _ -> {p| height <- h/w*nw }
51− RawHtml html -> {p| height <- let (w,h) = htmlHeight nw html in h}
52− _ -> p
53− in { element=e.element, props={props| width <- nw} }
49+width nw e = let p = e.props
50+ props = case e.element of
51+ Image _ w h _ -> {p| height <- h `div` w * nw }
52+ RawHtml html -> {p| height <- let (w,h) = Native.htmlHeight nw html in h}
53+ _ -> p
54+ in { element=e.element, props={ props | width <- nw } }
5455
5556-- Create an `Element` with a given height.
5657height : Int -> Element -> Element
5758height nh e = let p = e.props
5859 props = case e.element of
59− Image _ w h _ -> {p| width <- w/h*nh }
60+ Image _ w h _ -> {p| width <- w `div` h * nh }
6061 _ -> p
6162 in { element=e.element, props={p| height <- nh} }
6263
@@ -71,24 +72,26 @@ opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
7172
7273-- Create an `Element` with a given background color.
7374color : Color -> Element -> Element
74−color c e = let p = e.props in
75− { element=e.element, props={p| color <- Just c} }
75+color c e = let p = e.props in
76+ { element = e.element
77+ , props = { p | color <- Just c}
78+ }
7679
7780-- Create an `Element` with a tag. This lets you link directly to it.
7881-- The element `(tag "all-about-badgers" thirdParagraph)` can be reached
7982-- with a link lik this: `/facts-about-animals.elm#all-about-badgers`
8083tag : String -> Element -> Element
8184tag name e = let p = e.props in
82− { element=e.element, props={p| tag <- JS.fromString name} }
85+ { element=e.element, props={p | tag <- fromString name} }
8386
8487-- Create an `Element` that is a hyper-link.
8588link : String -> Element -> Element
8689link href e = let p = e.props in
87− { element=e.element, props={p| href <- JS.fromString href} }
90+ { element=e.element, props={p | href <- fromString href} }
8891
89−emptyStr = JS.fromString ""
92+emptyStr = fromString ""
9093newElement w h e =
91− { props = Properties (guid ()) w h 1 Nothing emptyStr emptyStr (), element = e }
94+ { props = Properties (Native.guid ()) w h 1 Nothing emptyStr emptyStr (), element = e }
9295
9396data ElementPrim
9497 = Image ImageStyle Int Int JSString
@@ -102,12 +105,12 @@ data ImageStyle = Plain | Fitted | Cropped (Int,Int) | Tiled
102105
103106-- Create an image given a width, height, and image source.
104107image : Int -> Int -> String -> Element
105−image w h src = newElement w h (Image Plain w h (JS.fromString src))
108+image w h src = newElement w h (Image Plain w h (fromString src))
106109
107110-- Create a fitted image given a width, height, and image source.
108111-- This will crop the picture to best fill the given dimensions.
109112fittedImage : Int -> Int -> String -> Element
110−fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
113+fittedImage w h src = newElement w h (Image Fitted w h (fromString src))
111114
112115-- Create a cropped image. Take a rectangle out of the picture starting
113116-- at the given top left coordinate. If you have a 140-by-140 image,
@@ -116,11 +119,11 @@ fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
116119-- croppedImage (20,20) 100 100 "yogi.jpg"
117120croppedImage : (Int,Int) -> Int -> Int -> String -> Element
118121croppedImage pos w h src =
119− newElement w h (Image (Cropped pos) w h (JS.fromString src))
122+ newElement w h (Image (Cropped pos) w h (fromString src))
120123
121124tiledImage : Int -> Int -> String -> Element
122125tiledImage w h src =
123− newElement w h (Image Tiled w h (JS.fromString src))
126+ newElement w h (Image Tiled w h (fromString src))
124127
125128data Three = P | Z | N
126129data Pos = Absolute Int | Relative Float