git.iko.soy/elk
on 727d708 help sign in
elk/libraries/Graphics/Element.elm
264 lines 9.3 kB history raw
2module Graphics.Element (widthOf, heightOf, sizeOf,
3 width, height, size, opacity, color, tag, link,
4 image, fittedImage, croppedImage, tiledImage,
5 flow, up, down, left, right, inward, outward,
6 above, below, beside, layers,
7 container, absolute, relative,
8 middle, topLeft, topRight, bottomLeft, bottomRight,
9 midLeft, midRight, midTop, midBottom, middleAt,
10 topLeftAt, topRightAt, bottomLeftAt, bottomRightAt,
11 midLeftAt, midRightAt, midTopAt, midBottomAt,
12 spacer, newElement
13 ) where
15import Native.Utils (guid, max, htmlHeight)
16import JavaScript as JS
17import List as List
18import Color
19import Maybe (Just, Nothing)
21type Properties = {
22 id : Int,
23 width : Int,
24 height : Int,
25 opacity : Float,
26 color : Maybe Color,
27 href : JSString,
28 tag : JSString,
29 hover : ()
30 }
32type Element = { props : Properties, element : ElementPrim }
34-- Get the width of an Element
35widthOf : Element -> Int
36widthOf e = e.props.width
38-- Get the height of an Element
39heightOf : Element -> Int
40heightOf e = e.props.height
42-- Get the width and height of an Element
43sizeOf : Element -> (Int,Int)
44sizeOf e = (e.props.width, e.props.height)
46-- Create an `Element` with a given width.
47width : Int -> Element -> Element
48width 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} }
55-- Create an `Element` with a given height.
56height : Int -> Element -> Element
57height nh e = let p = e.props
58 props = case e.element of
59 Image _ w h _ -> {p| width <- w/h*nh }
60 _ -> p
61 in { element=e.element, props={p| height <- nh} }
63-- Create an `Element` with a new width and height.
64size : Int -> Int -> Element -> Element
65size w h e = height h (width w e)
67-- Create an `Element` with a given opacity. Opacity is a number between 0 and 1
68-- where 0 means totally clear.
69opacity : Float -> Element -> Element
70opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
72-- Create an `Element` with a given background color.
73color : Color -> Element -> Element
74color c e = let p = e.props in
75 { element=e.element, props={p| color <- Just c} }
77-- Create an `Element` with a tag. This lets you link directly to it.
78-- The element `(tag "all-about-badgers" thirdParagraph)` can be reached
79-- with a link lik this: `/facts-about-animals.elm#all-about-badgers`
80tag : String -> Element -> Element
81tag name e = let p = e.props in
82 { element=e.element, props={p| tag <- JS.fromString name} }
84-- Create an `Element` that is a hyper-link.
85link : String -> Element -> Element
86link href e = let p = e.props in
87 { element=e.element, props={p| href <- JS.fromString href} }
89emptyStr = JS.fromString ""
90newElement w h e =
91 { props = Properties (guid ()) w h 1 Nothing emptyStr emptyStr (), element = e }
93data ElementPrim
94 = Image ImageStyle Int Int JSString
95 | Container Position Element
96 | Flow Direction [Element]
97 | Spacer
98 | RawHtml JSString
99 | Custom -- for custom Elements implemented in JS, see collage for example
101data ImageStyle = Plain | Fitted | Cropped (Int,Int) | Tiled
103-- Create an image given a width, height, and image source.
104image : Int -> Int -> String -> Element
105image w h src = newElement w h (Image Plain w h (JS.fromString src))
107-- Create a fitted image given a width, height, and image source.
108-- This will crop the picture to best fill the given dimensions.
109fittedImage : Int -> Int -> String -> Element
110fittedImage w h src = newElement w h (Image Fitted w h (JS.fromString src))
112-- Create a cropped image. Take a rectangle out of the picture starting
113-- at the given top left coordinate. If you have a 140-by-140 image,
114-- the following will cut a 100-by-100 square out of the middle of it.
115--
116-- croppedImage (20,20) 100 100 "yogi.jpg"
117croppedImage : (Int,Int) -> Int -> Int -> String -> Element
118croppedImage pos w h src =
119 newElement w h (Image (Cropped pos) w h (JS.fromString src))
121tiledImage : Int -> Int -> String -> Element
122tiledImage w h src =
123 newElement w h (Image Tiled w h (JS.fromString src))
125data Three = P | Z | N
126data Pos = Absolute Int | Relative Float
127type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }
129-- Put an element in a container. This lets you position the element really
130-- easily, and there are tons of ways to set the `Position`.
131-- To center `element` exactly in a 300-by-300 square you would say:
132--
133-- container 300 300 middle element
134--
135-- By setting the color of the container, you can create borders.
136container : Int -> Int -> Position -> Element -> Element
137container w h pos e = newElement w h (Container pos e)
139-- Create an empty box. This is useful for getting your spacing right and
140-- for making borders.
141spacer : Int -> Int -> Element
142spacer w h = newElement w h Spacer
144data Direction = DUp | DDown | DLeft | DRight | DIn | DOut
146-- Have a list of elements flow in a particular direction.
147-- The `Direction` starts from the first element in the list.
148--
149-- flow right [a,b,c]
150--
151-- +---+---+---+
152-- | a | b | c |
153-- +---+---+---+
154flow : Direction -> [Element] -> Element
155flow dir es =
156 let ws = List.map widthOf es
157 hs = List.map heightOf es
158 newFlow w h = newElement w h (Flow dir es)
159 in
160 if es == [] then spacer 0 0 else
161 case dir of
162 DUp -> newFlow (List.maximum ws) (List.sum hs)
163 DDown -> newFlow (List.maximum ws) (List.sum hs)
164 DLeft -> newFlow (List.sum ws) (List.maximum hs)
165 DRight -> newFlow (List.sum ws) (List.maximum hs)
166 DIn -> newFlow (List.maximum ws) (List.maximum hs)
167 DOut -> newFlow (List.maximum ws) (List.maximum hs)
169-- Stack elements vertically. To put `a` above `b` you would say:
170--
171-- a `above` b
172above : Element -> Element -> Element
173above hi lo =
174 newElement (max (widthOf hi) (widthOf lo))
175 (heightOf hi + heightOf lo)
176 (Flow DDown [hi,lo])
178-- Stack elements vertically. To put `a` below `b` you would say:
179--
180-- a `below` b
181below : Element -> Element -> Element
182below lo hi =
183 newElement (max (widthOf hi) (widthOf lo))
184 (heightOf hi + heightOf lo)
185 (Flow DDown [hi,lo])
187-- Put elements beside each other horizontally.
188beside : Element -> Element -> Element
189beside lft rht =
190 newElement (widthOf lft + widthOf rht)
191 (max (heightOf lft) (heightOf rht))
192 (Flow right [lft,rht])
194-- Layer elements on top of each other, starting from the bottom.
195-- `(layers == flow outward)`
196layers : [Element] -> Element
197layers es =
198 let ws = List.map widthOf es
199 hs = List.map heightOf es
200 in newElement (List.maximum ws) (List.maximum hs) (Flow DOut es)
203-- Repetitive things --
205absolute : Int -> Pos
206absolute = Absolute
207relative : Float -> Pos
208relative = Relative
210middle : Position
211middle = { horizontal=Z, vertical=Z, x=Relative 0.5, y=Relative 0.5 }
212topLeft : Position
213topLeft = { horizontal=N, vertical=P, x=Absolute 0, y=Absolute 0 }
214topRight : Position
215topRight = { topLeft | horizontal <- P }
216bottomLeft : Position
217bottomLeft = { topLeft | vertical <- N }
218bottomRight : Position
219bottomRight = { bottomLeft | horizontal <- P }
220midLeft : Position
221midLeft = { middle | horizontal <- N, x <- Absolute 0 }
222midRight : Position
223midRight = { midLeft | horizontal <- P }
224midTop : Position
225midTop = { middle | vertical <- P, y <- Absolute 0 }
226midBottom : Position
227midBottom = { midTop | vertical <- N }
229middleAt : Pos -> Pos -> Position
230middleAt x y = { horizontal = Z, vertical = Z, x = x, y = y }
231topLeftAt : Pos -> Pos -> Position
232topLeftAt x y = { horizontal = N, vertical = P, x = x, y = y }
233topRightAt : Pos -> Pos -> Position
234topRightAt x y = { horizontal = P, vertical = P, x = x, y = y }
235bottomLeftAt : Pos -> Pos -> Position
236bottomLeftAt x y = { horizontal = N, vertical = N, x = x, y = y }
237bottomRightAt : Pos -> Pos -> Position
238bottomRightAt x y = { horizontal = P, vertical = N, x = x, y = y }
239midLeftAt : Pos -> Pos -> Position
240midLeftAt x y = { horizontal = N, vertical = Z, x = x, y = y }
241midRightAt : Pos -> Pos -> Position
242midRightAt x y = { horizontal = P, vertical = Z, x = x, y = y }
243midTopAt : Pos -> Pos -> Position
244midTopAt x y = { horizontal = Z, vertical = P, x = x, y = y }
245midBottomAt : Pos -> Pos -> Position
246midBottomAt x y = { horizontal = Z, vertical = N, x = x, y = y }
248up : Direction
249up = DUp
251down : Direction
252down = DDown
254left : Direction
255left = DLeft
257right : Direction
258right = DRight
260inward : Direction
261inward = DIn
263outward : Direction
264outward = DOut