git.iko.soy/elk
on 29dfd5a help sign in
elk/core-js/Element.js
274 lines 7.1 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 };
45 var makeText = function(w) { return function(pos) { return function(txt) {
46 var e = newElement('div');
47 e.isElmText = true;
48 e.innerHTML = txt;
49 e.style.textAlign = pos;
50 if (w > 0) e.style.width = w + "px";
51 e.isElmLeaf = true;
52 e.style.visibility = "hidden";
53 e.style.styleFloat = "left";
54 e.style.cssFloat = "left";
55 document.body.appendChild(e);
56 var cStyle = window.getComputedStyle(e);
57 if (w <= 0) e.style.width = cStyle.getPropertyValue("width");
58 e.style.height = cStyle.getPropertyValue("height");
59 document.body.removeChild(e);
60 e.style.visibility = "visible"
61 e.style.styleFloat = "none";
62 e.style.cssFloat = "none";
63 return e;
64 };
65 };
66 };
67 var link = function (href) { return function (e) {
68 var a = newElement('a');
69 a.href = Text.fromString(href);
70 addTo(a,e);
71 return divify(a);
72 };
73 };
75 var text = makeText(0)('left');
76 var plainText = function(str) {
77 return makeText(0)("left")(String.toText(str)); };
78 var justifiedText = makeText(0)('justify');
79 var centeredText = makeText(0)('center');
80 var asText = function(v) { return makeText(0)("left")(Value.show(v)); };
82 var image = function(src) {
83 var img = newElement('img');
84 img.isElmLeaf = true;
85 img.onload = function() {
86 if (img.style.width === "" && this.width > 0) {
87 img.style.width = img.width = this.width + "px";
88 }
89 if (img.style.height === "" && this.height > 0) {
90 img.style.height = img.height = this.height + "px";
91 }
92 Dispatcher.adjust()
93 };
94 img.src = String.toText(src);
95 img.name = img.src;
96 return img;
97 };
98 var video = function(src) {
99 src = String.toText(src);
100 var e = newElement('video');
101 e.controls = "controls";
102 var source = newElement('source');
103 source.src = src;
104 source.type = "video/" + src.substring(src.length - 3, src.length);
105 addTo(e, source);
106 e.isElmLeaf = true;
107 return e;
108 };
109 var audio = function(src) {
110 src = String.toString(src);
111 var e = newElement('video');
112 e.controls = "controls";
113 var source = newElement('source');
114 source.src = src;
115 source.type = "audio/" + src.substring(src.length - 3, src.length);
116 addTo(e, source);
117 e.isElmLeaf = true;
118 return e;
119 };
120 var collage = function(w) { return function(h) { return function(cflist) {
121 var canvas = newElement('canvas');
122 canvas.style.width = w + 'px';
123 canvas.style.height = h + 'px';
124 canvas.width = w;
125 canvas.height = h;
126 if (canvas.getContext) {
127 var ctx = canvas.getContext('2d');
128 ctx.clearRect(0,0, canvas.width, canvas.height);
129 while (cflist[0] === "Cons") {
130 ctx = cflist[1](ctx);
131 cflist = cflist[2];
132 }
133 return canvas;
134 }
135 canvas.innerHTML = "Your browser does not support the canvas element.";
136 canvas.isElmLeaf = true;
137 return canvas;
138 };
139 };
140 };
142 var goDown = function(e) {
143 return e.tagName === "DIV" ? e : divify(e);
144 };
145 var goRight = function(e) {
146 e.style.styleFloat = "left";
147 e.style.cssFloat = "left";
148 return e;
149 };
150 var goIn = function(e) {
151 e.style.position = 'absolute';
152 return e;
153 };
154 var flowWith = function(dir, f, elist) {
155 var container = newElement('div');
156 for (var i = elist.length; i--; ) {
157 addTo(container, f(elist[i]));
158 }
159 container.elmFlowDirection = dir;
160 return container;
161 };
163 var flow = function(direction) { return function(elist) {
164 var arr = [];
165 while (elist[0] === "Cons") {
166 arr.push(elist[1]);
167 elist = elist[2];
168 }
169 if (direction >= 3) arr.reverse();
170 var f = function(x) { return x; };
171 var dir = direction % 3;
172 if (dir == 0) return flowWith("Y", goDown , arr);
173 if (dir == 1) return flowWith("X", goRight, arr);
174 if (dir == 2) return flowWith("Z", goIn , arr);
175 };
176 };
178 var beside = function(a) { return function(b) {
179 return flow(1)(["Cons",a,["Cons",b,["Nil"]]]); }; };
180 var above = function(a) { return function(b) {
181 return flow(0)(["Cons",a,["Cons",b,["Nil"]]]); }; };
182 var below = function(a) { return function(b) {
183 return flow(3)(["Cons",a,["Cons",b,["Nil"]]]); }; };
185 var box = function(pos) { return function(e) {
186 e.style.position = "absolute";
187 e.style.margin = "auto";
188 var x = (pos - 1) % 3;
189 var y = (pos - 1) / 3;
190 if (x < 2) e.style.left = 0;
191 if (x > 0) e.style.right = 0;
192 if (y < 2) e.style.top = 0;
193 if (y > 0) e.style.bottom = 0;
194 var div = newElement('div');
195 div.style.position = "relative";
196 addTo(div,e);
197 return div;
198 };
199 };
201 var width = function(w) { return function(e) {
202 if (e.tagName === "A") {
203 width(w)(e.firstChild);
204 return e;
205 }
206 if (e.hasOwnProperty('isElmText')) {
207 var d = makeText(w)(e.style.textAlign)(e.innerHTML);
208 e.style.height = d.style.height;
209 }
210 e.style.width = w + "px";
211 return e;
212 };
213 };
214 var height = function(h) { return function(e) {
215 (e.tagName === "A" ? e.firstChild : e).style.height = h + "px";
216 return e;
217 };
218 };
219 var size = function(w) { return function(h) { return function(e) {
220 var d = e.tagName === "A" ? e.firstChild : e;
221 d.style.width = w + "px";
222 d.style.height = h + "px";
223 return e;
224 };
225 };
226 };
228 var color = function(c) { return function(e) {
229 e.style.backgroundColor = Color.Internal.extract(c);
230 return e;
231 };
232 };
233 var opacity = function(value) { return function(e) {
234 e.style.opacity = value;
235 return e;
236 };
237 };
239 return {text : text,
240 image : image,
241 video : video,
242 audio : audio,
243 collage : collage,
244 flow : flow,
245 layers : flow(2),
247 beside : beside,
248 above : above,
249 below : below,
250 box : box,
252 width : width,
253 height : height,
254 size : size,
255 color : color,
256 opacity : opacity,
258 link : link,
259 asText : asText,
260 plainText : plainText,
261 justifiedText : justifiedText,
262 centeredText : centeredText,
264 // directions
265 up : 0,
266 left : 1,
267 inward : 2,
268 down : 3,
269 right : 4,
270 outward : 5
271 };
272}();