@@ -3,7 +3,8 @@ module Graphics.Element where
33
44import open Basics
55import Native.Utils
6−import open JavaScript
6+import JavaScript as JS
7+import JavaScript (JSString)
78import List as List
89import open Color
910import Maybe (Maybe, Just, Nothing)
@@ -35,20 +36,22 @@ sizeOf e = (e.props.width, e.props.height)
3536
3637-- Create an `Element` with a given width.
3738width : Int -> Element -> Element
38−width nw e = let p = e.props
39− props = case e.element of
40− Image _ w h _ -> {p| height <- h `div` w * nw }
41− RawHtml html -> {p| height <- let (w,h) = Native.Utils.htmlHeight nw html in h}
42− _ -> p
43− in { element=e.element, props={ props | width <- nw } }
39+width nw e =
40+ let p = e.props
41+ props = case e.element of
42+ Image _ w h _ -> {p| height <- round (toFloat h / toFloat w * toFloat nw) }
43+ RawHtml html -> {p| height <- snd (Native.Utils.htmlHeight nw html)}
44+ _ -> p
45+ in { element=e.element, props={ props | width <- nw } }
4446
4547-- Create an `Element` with a given height.
4648height : Int -> Element -> Element
47−height nh e = let p = e.props
48− props = case e.element of
49− Image _ w h _ -> {p| width <- w `div` h * nh }
50− _ -> p
51− in { element=e.element, props={p| height <- nh} }
49+height nh e =
50+ let p = e.props
51+ props = case e.element of
52+ Image _ w h _ -> {p| width <- round (toFloat w / toFloat h * toFloat nh) }
53+ _ -> p
54+ in { element=e.element, props={ p | height <- nh} }
5255
5356-- Create an `Element` with a new width and height.
5457size : Int -> Int -> Element -> Element
@@ -71,14 +74,14 @@ color c e = let p = e.props in
7174-- with a link lik this: `/facts-about-animals.elm#all-about-badgers`
7275tag : String -> Element -> Element
7376tag name e = let p = e.props in
74− { element=e.element, props={p | tag <- fromString name} }
77+ { element=e.element, props={p | tag <- JS.fromString name} }
7578
7679-- Create an `Element` that is a hyper-link.
7780link : String -> Element -> Element
7881link href e = let p = e.props in
79− { element=e.element, props={p | href <- fromString href} }
82+ { element=e.element, props={p | href <- JS.fromString href} }
8083
81−emptyStr = fromString ""
84+emptyStr = JS.fromString ""
8285newElement w h e =
8386 { props = Properties (Native.Utils.guid ()) w h 1 Nothing emptyStr emptyStr (), element = e }
8487
@@ -94,12 +97,12 @@ data ImageStyle = Plain | Fitted | Cropped (Int,Int) | Tiled
9497
9598-- Create an image given a width, height, and image source.
9699image : Int -> Int -> String -> Element
97−image w h src = newElement w h (Image Plain w h (fromString src))
100+image w h src = newElement w h (Image Plain w h (JS.fromString src))
98101
99102-- Create a fitted image given a width, height, and image source.
100103-- This will crop the picture to best fill the given dimensions.
101104fittedImage : Int -> Int -> String -> Element
102−fittedImage w h src = newElement w h (Image Fitted w h (fromString src))
105+fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
103106
104107-- Create a cropped image. Take a rectangle out of the picture starting
105108-- at the given top left coordinate. If you have a 140-by-140 image,
@@ -108,11 +111,11 @@ fittedImage w h src = newElement w h (Image Fitted w h (fromString src))
108111-- croppedImage (20,20) 100 100 "yogi.jpg"
109112croppedImage : (Int,Int) -> Int -> Int -> String -> Element
110113croppedImage pos w h src =
111− newElement w h (Image (Cropped pos) w h (fromString src))
114+ newElement w h (Image (Cropped pos) w h (JS.fromString src))
112115
113116tiledImage : Int -> Int -> String -> Element
114117tiledImage w h src =
115− newElement w h (Image Tiled w h (fromString src))
118+ newElement w h (Image Tiled w h (JS.fromString src))
116119
117120markdown : Element
118121markdown = Native.Utils.undefined