@@ -30,26 +30,42 @@ type Properties = {
31type Element = { props : Properties, element : ElementPrim }
31type Element = { props : Properties, element : ElementPrim }
33+widthOf : Element -> Int
33widthOf e = e.props.width
34widthOf e = e.props.width
36+heightOf : Element -> Int
34heightOf e = e.props.height
37heightOf e = e.props.height
39+sizeOf : Element -> Int
35sizeOf e = (e.props.width, e.props.height)
40sizeOf e = (e.props.width, e.props.height)
42+width : Int -> Element -> Element
37width nw e = let p = e.props
43width nw e = let p = e.props
38 props = case e.element of
44 props = case e.element of
39 Image _ w h _ -> {p| height <- h/w*nw }
45 Image _ w h _ -> {p| height <- h/w*nw }
40 RawHtml html -> {p| height <- htmlHeight nw html }
46 RawHtml html -> {p| height <- htmlHeight nw html }
42 in { element=e.element, props={props| width <- nw} }
48 in { element=e.element, props={props| width <- nw} }
50+height : Int -> Element -> Element
43height nh e = let p = e.props
51height nh e = let p = e.props
44 props = case e.element of
52 props = case e.element of
45 Image _ w h _ -> {p| width <- w/h*nh }
53 Image _ w h _ -> {p| width <- w/h*nh }
47 in { element=e.element, props={p| height <- nh} }
55 in { element=e.element, props={p| height <- nh} }
57+opacity : Float -> Element -> Element
48opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
58opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
60+color : Color -> Element -> Element
49color c e = let p = e.props in
61color c e = let p = e.props in
50 { element=e.element, props={p| color <- Just c} }
62 { element=e.element, props={p| color <- Just c} }
64+tag : String -> Element -> Element
51tag name e = let p = e.props in
65tag name e = let p = e.props in
52 { element=e.element, props={p| tag <- JS.fromString name} }
66 { element=e.element, props={p| tag <- JS.fromString name} }
68+link : String -> Element -> Element
53link href e = let p = e.props in
69link href e = let p = e.props in
54 { element=e.element, props={p| href <- JS.fromString href} }
70 { element=e.element, props={p| href <- JS.fromString href} }
@@ -67,8 +83,13 @@ data ElementPrim
68data ImageStyle = Plain | Fitted | Cropped (Int,Int)
84data ImageStyle = Plain | Fitted | Cropped (Int,Int)
86+image : Int -> Int -> String -> Element
70image w h src = newElement w h (Image Plain w h (JS.fromString src))
87image w h src = newElement w h (Image Plain w h (JS.fromString src))
89+fittedImage : Int -> Int -> String -> Element
71fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
90fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
92+croppedImage : Int -> Int -> (Int,Int) -> String -> Element
72croppedImage w h pos src =
93croppedImage w h pos src =
73 newElement w h (Image (Cropped pos) w h (JS.fromString src))
94 newElement w h (Image (Cropped pos) w h (JS.fromString src))
@@ -76,11 +97,15 @@ data Three = P | Z | N
76data Pos = Absolute Int | Relative Float
97data Pos = Absolute Int | Relative Float
77type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }
98type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }
100+container : Int -> Int -> Position -> Element -> Element
79container w h pos e = newElement w h (Container pos e)
101container w h pos e = newElement w h (Container pos e)
103+spacer : Int -> Int -> Element
80spacer w h = newElement w h Spacer
104spacer w h = newElement w h Spacer
82data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
106data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
108+flow : Direction -> [Element] -> Element
84flow dir es =
109flow dir es =
85 let ws = List.map widthOf es
110 let ws = List.map widthOf es
86 hs = List.map heightOf es
111 hs = List.map heightOf es
@@ -95,19 +120,25 @@ flow dir es =
95 DIn -> newFlow (List.maximum ws) (List.maximum hs)
120 DIn -> newFlow (List.maximum ws) (List.maximum hs)
96 DOut -> newFlow (List.maximum ws) (List.maximum hs)
121 DOut -> newFlow (List.maximum ws) (List.maximum hs)
123+above : Element -> Element -> Element
98above hi lo =
124above hi lo =
99 newElement (max (widthOf hi) (widthOf lo))
125 newElement (max (widthOf hi) (widthOf lo))
100 (heightOf hi + heightOf lo)
126 (heightOf hi + heightOf lo)
101 (Flow DDown [hi,lo])
127 (Flow DDown [hi,lo])
129+below : Element -> Element -> Element
102below lo hi =
130below lo hi =
103 newElement (max (widthOf hi) (widthOf lo))
131 newElement (max (widthOf hi) (widthOf lo))
104 (heightOf hi + heightOf lo)
132 (heightOf hi + heightOf lo)
105 (Flow DDown [hi,lo])
133 (Flow DDown [hi,lo])
135+beside : Element -> Element -> Element
106beside lft rht =
136beside lft rht =
107 newElement (widthOf lft + widthOf rht)
137 newElement (widthOf lft + widthOf rht)
108 (max (heightOf lft) (heightOf rht))
138 (max (heightOf lft) (heightOf rht))
109 (Flow right [lft,rht])
139 (Flow right [lft,rht])
141+layers : [Element] -> Element
111layers es =
142layers es =
112 let ws = List.map widthOf es
143 let ws = List.map widthOf es
113 hs = List.map heightOf es
144 hs = List.map heightOf es
@@ -116,31 +147,63 @@ layers es =
117-- Repetitive things --
148-- Repetitive things --
119absolute = Absolute
151absolute = Absolute
120relative = Relative
153relative = Relative
122−middle = { horizontal = Z, vertical = Z, x = Relative 0.5, y = Relative 0.5 }
156+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 }
158+topLeft = { horizontal=N, vertical=P, x=Absolute 0, y=Absolute 0 }
124topRight = { topLeft | horizontal <- P }
160topRight = { topLeft | horizontal <- P }
161+bottomLeft : Position
125bottomLeft = { topLeft | vertical <- N }
162bottomLeft = { topLeft | vertical <- N }
163+bottomRight : Position
126bottomRight = { bottomLeft | horizontal <- P }
164bottomRight = { bottomLeft | horizontal <- P }
127midLeft = { middle | horizontal <- N, x <- Absolute 0 }
166midLeft = { middle | horizontal <- N, x <- Absolute 0 }
128midRight = { midLeft | horizontal <- P }
168midRight = { midLeft | horizontal <- P }
129midTop = { middle | vertical <- P, y <- Absolute 0 }
170midTop = { middle | vertical <- P, y <- Absolute 0 }
130midBottom = { midTop | vertical <- N }
172midBottom = { midTop | vertical <- N }
174+middleAt : Pos -> Pos -> Position
131middleAt x y = { horizontal = Z, vertical = Z, x = x, y = y }
175middleAt x y = { horizontal = Z, vertical = Z, x = x, y = y }
176+topLeftAt : Pos -> Pos -> Position
132topLeftAt x y = { horizontal = N, vertical = P, x = x, y = y }
177topLeftAt x y = { horizontal = N, vertical = P, x = x, y = y }
178+topRightAt : Pos -> Pos -> Position
133topRightAt x y = { horizontal = P, vertical = P, x = x, y = y }
179topRightAt x y = { horizontal = P, vertical = P, x = x, y = y }
180+bottomLeftAt : Pos -> Pos -> Position
134bottomLeftAt x y = { horizontal = N, vertical = N, x = x, y = y }
181bottomLeftAt x y = { horizontal = N, vertical = N, x = x, y = y }
182+bottomRightAt : Pos -> Pos -> Position
135bottomRightAt x y = { horizontal = P, vertical = N, x = x, y = y }
183bottomRightAt x y = { horizontal = P, vertical = N, x = x, y = y }
184+midLeftAt : Pos -> Pos -> Position
136midLeftAt x y = { horizontal = N, vertical = Z, x = x, y = y }
185midLeftAt x y = { horizontal = N, vertical = Z, x = x, y = y }
186+midRightAt : Pos -> Pos -> Position
137midRightAt x y = { horizontal = P, vertical = Z, x = x, y = y }
187midRightAt x y = { horizontal = P, vertical = Z, x = x, y = y }
188+midTopAt : Pos -> Pos -> Position
138midTopAt x y = { horizontal = Z, vertical = P, x = x, y = y }
189midTopAt x y = { horizontal = Z, vertical = P, x = x, y = y }
190+midBottomAt : Pos -> Pos -> Position
139midBottomAt x y = { horizontal = Z, vertical = N, x = x, y = y }
191midBottomAt x y = { horizontal = Z, vertical = N, x = x, y = y }
142down = DDown
197down = DDown
143left = DLeft
200left = DLeft
144right = DRight
203right = DRight
145inward = DIn
206inward = DIn
146outward = DOut
209outward = DOut