git @ Cat's Eye Technologies Lexeduct / 06d0947
Build HTML5 UI using yoob/element-factory.js. Chris Pressey 6 years ago
2 changed file(s) with 230 addition(s) and 16 deletion(s). Raw diff Collapse all Expand all
88 <h1>Lexeduct</h1>
99 </header>
1010
11 <div>
12 <textarea id="input" rows="20" cols="40">
13 Hello, there!
14 What do you think of this?
15 </textarea>
16
17 <button onclick="process();">Process</button>
18
19 <textarea id="output" rows="20" cols="40">
20 </textarea>
21 </div>
11 <div id="container"></div>
2212
2313 </body>
2414 <script src="lexeduct-browser.js"></script>
15 <script src="yoob/element-factory.js"></script>
2516 <script>
26 function process() {
27 var inputText = document.getElementById('input').value;
17 var container, input, output, process;
18 container = document.getElementById('container');
19 input = yoob.makeTextArea(container, 40, 20, "Hello, there!\nWhat do you think?");
20 process = yoob.makeButton(container, "Process", function() {
2821 var t = makeTransformer['upper']({});
29 var outputText = t(inputText);
30 document.getElementById('output').value = outputText;
31 }
22 output.value = t(input.value);
23 });
24 output = yoob.makeTextArea(container, 40, 20);
3225 </script>
0 /*
1 * This file is part of yoob.js version 0.9-PRE
2 * Available from https://github.com/catseye/yoob.js/
3 * This file is in the public domain. See http://unlicense.org/ for details.
4 */
5 if (window.yoob === undefined) yoob = {};
6
7 /*
8 * Functions for creating elements.
9 */
10
11 yoob.makeCanvas = function(container, width, height) {
12 var canvas = document.createElement('canvas');
13 if (width) {
14 canvas.width = width;
15 }
16 if (height) {
17 canvas.height = height;
18 }
19 container.appendChild(canvas);
20 return canvas;
21 };
22
23 yoob.makeButton = function(container, labelText, fun) {
24 var button = document.createElement('button');
25 button.innerHTML = labelText;
26 container.appendChild(button);
27 if (fun) {
28 button.onclick = fun;
29 }
30 return button;
31 };
32
33 yoob.checkBoxNumber = 0;
34 yoob.makeCheckbox = function(container, checked, labelText, fun) {
35 var checkbox = document.createElement('input');
36 checkbox.type = "checkbox";
37 checkbox.id = 'cfzzzb_' + yoob.checkBoxNumber;
38 checkbox.checked = checked;
39 var label = document.createElement('label');
40 label.htmlFor = 'cfzzzb_' + yoob.checkBoxNumber;
41 yoob.checkBoxNumber += 1;
42 label.appendChild(document.createTextNode(labelText));
43
44 container.appendChild(checkbox);
45 container.appendChild(label);
46
47 if (fun) {
48 checkbox.onchange = function(e) {
49 fun(checkbox.checked);
50 };
51 }
52 return checkbox;
53 };
54
55 yoob.makeTextInput = function(container, size, value) {
56 var input = document.createElement('input');
57 input.size = "" + (size || 12);
58 input.value = value || "";
59 container.appendChild(input);
60 return input;
61 };
62
63 yoob.makeSlider = function(container, min, max, value, fun) {
64 var slider = document.createElement('input');
65 slider.type = "range";
66 slider.min = min;
67 slider.max = max;
68 slider.value = value || 0;
69 if (fun) {
70 slider.onchange = function(e) {
71 fun(parseInt(slider.value, 10));
72 };
73 }
74 container.appendChild(slider);
75 return slider;
76 };
77
78 yoob.makeParagraph = function(container, innerHTML) {
79 var p = document.createElement('p');
80 p.innerHTML = innerHTML || '';
81 container.appendChild(p);
82 return p;
83 };
84
85 yoob.makeSpan = function(container, innerHTML) {
86 var span = document.createElement('span');
87 span.innerHTML = innerHTML || '';
88 container.appendChild(span);
89 return span;
90 };
91
92 yoob.makeDiv = function(container, innerHTML) {
93 var div = document.createElement('div');
94 div.innerHTML = innerHTML || '';
95 container.appendChild(div);
96 return div;
97 };
98
99 yoob.makePre = function(container, innerHTML) {
100 var elem = document.createElement('pre');
101 elem.innerHTML = innerHTML || '';
102 container.appendChild(elem);
103 return elem;
104 };
105
106 yoob.makePanel = function(container, title, isOpen) {
107 isOpen = !!isOpen;
108 var panelContainer = document.createElement('div');
109 var button = document.createElement('button');
110 var innerContainer = document.createElement('div');
111 innerContainer.style.display = isOpen ? "block" : "none";
112
113 button.innerHTML = (isOpen ? "∇" : "⊳") + " " + title;
114 button.onclick = function(e) {
115 isOpen = !isOpen;
116 button.innerHTML = (isOpen ? "∇" : "⊳") + " " + title;
117 innerContainer.style.display = isOpen ? "block" : "none";
118 };
119
120 panelContainer.appendChild(button);
121 panelContainer.appendChild(innerContainer);
122 container.appendChild(panelContainer);
123 return innerContainer;
124 };
125
126 yoob.makeTextArea = function(container, cols, rows, initial) {
127 var textarea = document.createElement('textarea');
128 textarea.rows = "" + rows;
129 textarea.cols = "" + cols;
130 if (initial) {
131 textarea.value = initial;
132 }
133 container.appendChild(textarea);
134 return textarea;
135 };
136
137 yoob.makeLineBreak = function(container) {
138 var br = document.createElement('br');
139 container.appendChild(br);
140 return br;
141 };
142
143 yoob.makeSelect = function(container, labelText, optionsArray) {
144 var label = document.createElement('label');
145 label.innerHTML = labelText;
146 container.appendChild(label);
147
148 var select = document.createElement("select");
149
150 for (var i = 0; i < optionsArray.length; i++) {
151 var op = document.createElement("option");
152 op.value = optionsArray[i][0];
153 op.text = optionsArray[i][1];
154 if (optionsArray[i].length > 2) {
155 op.selected = optionsArray[i][2];
156 } else {
157 op.selected = false;
158 }
159 select.options.add(op);
160 }
161
162 container.appendChild(select);
163 return select;
164 };
165
166 SliderPlusTextInput = function() {
167 this.init = function(cfg) {
168 this.slider = cfg.slider;
169 this.textInput = cfg.textInput;
170 this.callback = cfg.callback;
171 return this;
172 };
173
174 this.set = function(value) {
175 this.slider.value = "" + value;
176 this.textInput.value = "" + value;
177 this.callback(value);
178 };
179 };
180
181 yoob.makeSliderPlusTextInput = function(container, label, min_, max_, size, value, fun) {
182 yoob.makeSpan(container, label);
183 var slider = yoob.makeSlider(container, min_, max_, value);
184 var s = "" + value;
185 var textInput = yoob.makeTextInput(container, size, s);
186 slider.onchange = function(e) {
187 textInput.value = slider.value;
188 fun(parseInt(slider.value, 10));
189 };
190 textInput.onchange = function(e) {
191 var v = parseInt(textInput.value, 10);
192 if (v !== NaN) {
193 slider.value = "" + v;
194 fun(v);
195 }
196 };
197 return new SliderPlusTextInput().init({
198 'slider': slider,
199 'textInput': textInput,
200 'callback': fun
201 });
202 };
203
204 yoob.makeSVG = function(container) {
205 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
206 /* <svg viewBox = "0 0 200 200" version = "1.1"> */
207 container.appendChild(svg);
208 return svg;
209 };
210
211 yoob.makeSVGElem = function(svg, tag, cfg) {
212 var elem = document.createElementNS(svg.namespaceURI, tag);
213 for (var key in cfg) {
214 if (cfg.hasOwnProperty(key)) {
215 elem.setAttribute(key, cfg[key]);
216 }
217 }
218 svg.appendChild(elem);
219 return elem;
220 };