git.iko.soy/elk
on 482b7ea help sign in
elk/core-js/Element.js
329 lines 8.7 kB history raw
2var Element = function() {
3 var newElement = function(elementType) {
4 var e = document.createElement(elementType);
5 e.id = Guid.guid();
6 //e.timesAdded = 0;
7 return e;
8 };
9 var addTo = function(container, elem) {
10 container.appendChild(clone(elem));
11 //elem.timesAdded += 1;
12 };
13 var clone = function(e) {
14 return e;
15 /*if (e.timesAdded === 0) { return e; }
16 if (e.tagName === "CANVAS") {
17 var newCanvas = e.cloneNode(true);
18 var ctx = newCanvas.getContext('2d');
19 ctx.drawImage(e, 0, 0);
20 return newCanvas;
21 } else if (e.tagName === "IMG") {
22 d = image([]);
23 d.src = e.src;
24 d.name = e.name;
25 if (e.style.width !== "") { d.style.width = d.width = e.style.width; }
26 if (e.style.height !== ""){d.style.height = d.height = e.style.height;}
27 return d;
28 } else if (e.hasOwnProperty('isElmLeaf')) {
29 return e.cloneNode(true);
30 } else {
31 d = e.cloneNode(false);
32 var kids = e.childNodes;
33 var len = kids.length;
34 for (var i = 0; i < len; i++) {
35 d.appendChild(clone(kids[i]));
36 }
37 return d;
38 }*/
39 };
40 var divify = function(e) {
41 var div = newElement('div');
42 addTo(div, e);
43 return div;
44 };
46 var rectangle = function(w) { return function(h) {
47 var e = newElement('div');
48 e.isElmLeaf = true;
49 e.style.width = w + "px";
50 e.style.height = h + "px";
51 return e;
52 };
53 };
55 var makeText = function(w) { return function(pos) { return function(txt) {
56 var e = newElement('div');
57 e.isElmLeaf = true;
58 e.isElmText = true;
59 e.innerHTML = txt;
60 e.style.textAlign = pos;
61 if (w > 0) e.style.width = w + "px";
62 return e;
63 };
64 };
65 };
66 var correctTextSize = function(e) {
67 var w = e.style.width ? e.style.width.slice(0,-2) : 0;
69 var t = newElement('div');
70 t.innerHTML = e.innerHTML;
71 t.style.textAlign = e.style.textAlign;
72 if (w > 0) { t.style.width = w + "px"; }
74 t.style.visibility = "hidden";
75 t.style.styleFloat = "left";
76 t.style.cssFloat = "left";
78 document.body.appendChild(t);
79 var cStyle = window.getComputedStyle(t);
80 if (w <= 0) e.style.width = cStyle.getPropertyValue("width");
81 e.style.height = cStyle.getPropertyValue("height");
82 document.body.removeChild(t);
83 };
85 var link = function (href) { return function (e) {
86 var a = newElement('a');
87 a.href = Text.fromString(href);
88 addTo(a,e);
89 return divify(a);
90 };
91 };
93 var text = makeText(0)('left');
94 var plainText = function(str) {
95 return makeText(0)("left")(Data.String.toText(str)); };
96 var justifiedText = makeText(0)('justify');
97 var centeredText = makeText(0)('center');
98 var rightedText = makeText(0)('right');
99 var asText = function(v) { return makeText(0)("left")(Value.show(v)); };
101 var image = function(src) {
102 var img = newElement('img');
103 img.isElmLeaf = true;
104 img.onload = function() {
105 if (img.style.width === "" && this.width > 0) {
106 img.style.width = img.width = this.width + "px";
107 }
108 if (img.style.height === "" && this.height > 0) {
109 img.style.height = img.height = this.height + "px";
110 }
111 Dispatcher.adjust()
112 };
113 img.src = Data.String.toText(src);
114 img.name = img.src;
115 return img;
116 };
117 var fittedImage = function(w) { return function(h) { return function(src) {
118 var canvas = newElement('canvas');
119 canvas.style.width = w + 'px';
120 canvas.style.height = h + 'px';
121 canvas.width = w;
122 canvas.height = h;
123 canvas.innerHTML = "Your browser does not support the canvas element.";
124 canvas.isElmLeaf = true;
126 var img = newElement('img');
127 img.onload = function() {
128 if (canvas.getContext) {
129 var ctx = canvas.getContext('2d');
130 var sx = 0, sy = 0, sWidth = this.width, sHeight = this.height;
131 if (w / h > this.width / this.height) {
132 sHeight = this.width * h / w;
133 sy = (this.height - sHeight) / 2
134 } else {
135 sWidth = this.height * w / h;
136 sx = (this.width - sWidth) / 2
137 }
138 ctx.drawImage(img, sx, sy, sWidth, sHeight,
139 0,0, canvas.width, canvas.height);
140 }
141 };
142 img.src = Data.String.toText(src);
143 return canvas;
144 };
145 };
146 };
148 var video = function(src) {
149 src = Data.String.toText(src);
150 var e = newElement('video');
151 e.controls = "controls";
152 var source = newElement('source');
153 source.src = src;
154 source.type = "video/" + src.substring(src.length - 3, src.length);
155 addTo(e, source);
156 e.isElmLeaf = true;
157 return e;
158 };
159 var audio = function(src) {
160 src = Data.String.toString(src);
161 var e = newElement('video');
162 e.controls = "controls";
163 var source = newElement('source');
164 source.src = src;
165 source.type = "audio/" + src.substring(src.length - 3, src.length);
166 addTo(e, source);
167 e.isElmLeaf = true;
168 return e;
169 };
170 var collage = function(w) { return function(h) { return function(cflist) {
171 var canvas = newElement('canvas');
172 canvas.style.width = w + 'px';
173 canvas.style.height = h + 'px';
174 canvas.width = w;
175 canvas.height = h;
176 if (canvas.getContext) {
177 var ctx = canvas.getContext('2d');
178 ctx.clearRect(0,0, canvas.width, canvas.height);
179 while (cflist[0] === "Cons") {
180 ctx = cflist[1](ctx);
181 cflist = cflist[2];
182 }
183 return canvas;
184 }
185 canvas.innerHTML = "Your browser does not support the canvas element.";
186 canvas.isElmLeaf = true;
187 return canvas;
188 };
189 };
190 };
192 var goDown = function(e) {
193 return e.tagName === "DIV" ? e : divify(e);
194 };
195 var goRight = function(e) {
196 e.style.styleFloat = "left";
197 e.style.cssFloat = "left";
198 return e;
199 };
200 var goIn = function(e) {
201 e.style.position = 'absolute';
202 return e;
203 };
204 var flowWith = function(dir, f, elist) {
205 var container = newElement('div');
206 for (var i = elist.length; i--; ) {
207 addTo(container, f(elist[i]));
208 }
209 container.elmFlowDirection = dir;
210 return container;
211 };
213 var flow = function(direction) { return function(elist) {
214 var arr = [];
215 while (elist[0] === "Cons") {
216 arr.push(elist[1]);
217 elist = elist[2];
218 }
219 if (direction >= 3) arr.reverse();
220 var f = function(x) { return x; };
221 var dir = direction % 3;
222 if (dir == 0) return flowWith("Y", goDown , arr);
223 if (dir == 1) return flowWith("X", goRight, arr);
224 if (dir == 2) return flowWith("Z", goIn , arr);
225 };
226 };
228 var beside = function(a) { return function(b) {
229 return flow(4)(["Cons",a,["Cons",b,["Nil"]]]); }; };
230 var above = function(a) { return function(b) {
231 return flow(3)(["Cons",a,["Cons",b,["Nil"]]]); }; };
232 var below = function(a) { return function(b) {
233 return flow(0)(["Cons",a,["Cons",b,["Nil"]]]); }; };
235 var box = function(pos) { return function(e) {
236 e.style.position = "absolute";
237 e.style.margin = "auto";
238 var x = (pos - 1) % 3;
239 var y = (pos - 1) / 3;
240 if (x < 2) e.style.left = 0;
241 if (x > 0) e.style.right = 0;
242 if (y < 2) e.style.top = 0;
243 if (y > 0) e.style.bottom = 0;
244 var div = newElement('div');
245 div.style.position = "relative";
246 addTo(div,e);
247 return div;
248 };
249 };
251 var width = function(w) { return function(e) {
252 if (e.tagName === "A") {
253 width(w)(e.firstChild);
254 return e;
255 }
256 if (e.hasOwnProperty('isElmText')) {
257 var d = makeText(w)(e.style.textAlign)(e.innerHTML);
258 e.style.height = d.style.height;
259 }
260 e.style.width = w + "px";
261 return e;
262 };
263 };
264 var height = function(h) { return function(e) {
265 (e.tagName === "A" ? e.firstChild : e).style.height = h + "px";
266 return e;
267 };
268 };
269 var size = function(w) { return function(h) { return function(e) {
270 var d = e.tagName === "A" ? e.firstChild : e;
271 d.style.width = w + "px";
272 d.style.height = h + "px";
273 return e;
274 };
275 };
276 };
278 var color = function(c) { return function(e) {
279 e.style.backgroundColor = Color.Internal.extract(c);
280 return e;
281 };
282 };
283 var opacity = function(value) { return function(e) {
284 e.style.opacity = value;
285 return e;
286 };
287 };
289 return {text : text,
290 image : image,
291 fittedImage : fittedImage,
292 video : video,
293 audio : audio,
294 collage : collage,
295 flow : flow,
296 layers : flow(2),
297 rectangle : rectangle,
299 beside : beside,
300 above : above,
301 below : below,
302 box : box,
304 width : width,
305 height : height,
306 size : size,
307 color : color,
308 opacity : opacity,
310 link : link,
311 asText : asText,
312 plainText : plainText,
313 justifiedText : justifiedText,
314 centeredText : centeredText,
315 rightedText : rightedText,
317 // directions
318 up : 0,
319 left : 1,
320 inward : 2,
321 down : 3,
322 right : 4,
323 outward : 5,
325 correctTextSize : correctTextSize
326 };
327}();