@@ -30,26 +30,42 @@ type Properties = {
3030
3131type Element = { props : Properties, element : ElementPrim }
3232
33+widthOf : Element -> Int
3334widthOf e = e.props.width
35+
36+heightOf : Element -> Int
3437heightOf e = e.props.height
38+
39+sizeOf : Element -> Int
3540sizeOf e = (e.props.width, e.props.height)
3641
42+width : Int -> Element -> Element
3743width nw e = let p = e.props
3844 props = case e.element of
3945 Image _ w h _ -> {p| height <- h/w*nw }
4046 RawHtml html -> {p| height <- htmlHeight nw html }
4147 _ -> p
4248 in { element=e.element, props={props| width <- nw} }
49+
50+height : Int -> Element -> Element
4351height nh e = let p = e.props
4452 props = case e.element of
4553 Image _ w h _ -> {p| width <- w/h*nh }
4654 _ -> p
4755 in { element=e.element, props={p| height <- nh} }
56+
57+opacity : Float -> Element -> Element
4858opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
59+
60+color : Color -> Element -> Element
4961color c e = let p = e.props in
5062 { element=e.element, props={p| color <- Just c} }
63+
64+tag : String -> Element -> Element
5165tag name e = let p = e.props in
5266 { element=e.element, props={p| tag <- JS.fromString name} }
67+
68+link : String -> Element -> Element
5369link href e = let p = e.props in
5470 { element=e.element, props={p| href <- JS.fromString href} }
5571
@@ -67,8 +83,13 @@ data ElementPrim
6783
6884data ImageStyle = Plain | Fitted | Cropped (Int,Int)
6985
86+image : Int -> Int -> String -> Element
7087image w h src = newElement w h (Image Plain w h (JS.fromString src))
88+
89+fittedImage : Int -> Int -> String -> Element
7190fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
91+
92+croppedImage : Int -> Int -> (Int,Int) -> String -> Element
7293croppedImage w h pos src =
7394 newElement w h (Image (Cropped pos) w h (JS.fromString src))
7495
@@ -76,11 +97,15 @@ data Three = P | Z | N
7697data Pos = Absolute Int | Relative Float
7798type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }
7899
100+container : Int -> Int -> Position -> Element -> Element
79101container w h pos e = newElement w h (Container pos e)
102+
103+spacer : Int -> Int -> Element
80104spacer w h = newElement w h Spacer
81105
82106data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
83107
108+flow : Direction -> [Element] -> Element
84109flow dir es =
85110 let ws = List.map widthOf es
86111 hs = List.map heightOf es
@@ -95,19 +120,25 @@ flow dir es =
95120 DIn -> newFlow (List.maximum ws) (List.maximum hs)
96121 DOut -> newFlow (List.maximum ws) (List.maximum hs)
97122
123+above : Element -> Element -> Element
98124above hi lo =
99125 newElement (max (widthOf hi) (widthOf lo))
100126 (heightOf hi + heightOf lo)
101127 (Flow DDown [hi,lo])
128+
129+below : Element -> Element -> Element
102130below lo hi =
103131 newElement (max (widthOf hi) (widthOf lo))
104132 (heightOf hi + heightOf lo)
105133 (Flow DDown [hi,lo])
134+
135+beside : Element -> Element -> Element
106136beside lft rht =
107137 newElement (widthOf lft + widthOf rht)
108138 (max (heightOf lft) (heightOf rht))
109139 (Flow right [lft,rht])
110140
141+layers : [Element] -> Element
111142layers es =
112143 let ws = List.map widthOf es
113144 hs = List.map heightOf es
@@ -116,31 +147,63 @@ layers es =
116147
117148-- Repetitive things --
118149
150+absolute : Pos
119151absolute = Absolute
152+relative : Pos
120153relative = Relative
121154
122−middle = { horizontal = Z, vertical = Z, x = Relative 0.5, y = Relative 0.5 }
123−topLeft = { horizontal = N, vertical = P, x = Absolute 0, y = Absolute 0 }
155+middle : Position
156+middle = { horizontal=Z, vertical=Z, x=Relative 0.5, y=Relative 0.5 }
157+topLeft : Position
158+topLeft = { horizontal=N, vertical=P, x=Absolute 0, y=Absolute 0 }
159+topRight : Position
124160topRight = { topLeft | horizontal <- P }
161+bottomLeft : Position
125162bottomLeft = { topLeft | vertical <- N }
163+bottomRight : Position
126164bottomRight = { bottomLeft | horizontal <- P }
165+midLeft : Position
127166midLeft = { middle | horizontal <- N, x <- Absolute 0 }
167+midRight : Position
128168midRight = { midLeft | horizontal <- P }
169+midTop : Position
129170midTop = { middle | vertical <- P, y <- Absolute 0 }
171+midBottom : Position
130172midBottom = { midTop | vertical <- N }
173+
174+middleAt : Pos -> Pos -> Position
131175middleAt x y = { horizontal = Z, vertical = Z, x = x, y = y }
176+topLeftAt : Pos -> Pos -> Position
132177topLeftAt x y = { horizontal = N, vertical = P, x = x, y = y }
178+topRightAt : Pos -> Pos -> Position
133179topRightAt x y = { horizontal = P, vertical = P, x = x, y = y }
180+bottomLeftAt : Pos -> Pos -> Position
134181bottomLeftAt x y = { horizontal = N, vertical = N, x = x, y = y }
182+bottomRightAt : Pos -> Pos -> Position
135183bottomRightAt x y = { horizontal = P, vertical = N, x = x, y = y }
184+midLeftAt : Pos -> Pos -> Position
136185midLeftAt x y = { horizontal = N, vertical = Z, x = x, y = y }
186+midRightAt : Pos -> Pos -> Position
137187midRightAt x y = { horizontal = P, vertical = Z, x = x, y = y }
188+midTopAt : Pos -> Pos -> Position
138189midTopAt x y = { horizontal = Z, vertical = P, x = x, y = y }
190+midBottomAt : Pos -> Pos -> Position
139191midBottomAt x y = { horizontal = Z, vertical = N, x = x, y = y }
140192
193+up : Direction
141194up = DUp
195+
196+down : Direction
142197down = DDown
198+
199+left : Direction
143200left = DLeft
201+
202+right : Direction
144203right = DRight
204+
205+inward : Direction
145206inward = DIn
207+
208+outward : Direction
146209outward = DOut