tazpanel view lib/tazpanel.js @ rev 426

Code cleaning; add icons for packages and "toggle" to tazpanel.ttf; merge checkbox.js with tazpanel.js.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Fri Mar 27 14:28:32 2015 +0200 (2015-03-27)
parents a279382f786f
children b4817a7f661b
line source
1
2 // Hide Loading panel
3 function hideLoading() {
4 var loading = document.getElementById("loading");
5 // If element presents on page
6 if (loading) loading.style.display='none';
7 }
8 // Attach event handler
9 window.onload = hideLoading;
10
11
12
13 // Confirm page loading break
14 function confirmExit() {
15 return "$(_ 'Confirm break')";
16 }
17 // Attach event handler
18 window.onbeforeunload = confirmExit;
19
20
21
22 // Set light or dark color theme
23 function setColorTheme() {
24 // Goal: to produce pages that fit the user's defined look and feel, and
25 // may be more accessible as the current user settings (contrast color
26 // schemes, big font sizes, etc.)
27 // Realization in the CSS2:
28 // http://www.w3.org/TR/REC-CSS2/ui.html#system-colors
29 // We can use colors from user's color theme to mimic plain desktop application.
30 //
31 // Alas, nowadays it not works. Webkit-based browser returns hard-coded values,
32 // with exception of these two:
33 // * ButtonText - text on push buttons.
34 // * CaptionText - text in caption, size box, and scrollbar arrow box.
35 //
36 // When user changes color theme, browser re-draws page, so all input elements
37 // (buttons, checkboxes, radiobuttons, drop-down lists, scrollbars, text inputs)
38 // automagically fits user-defined theme. We need to change web document's
39 // colors manually. We can't ask for exact user defined colors for document's
40 // background in any way, we can only imagine if it dark or light.
41 // So, plan is follows:
42 // We use 'ButtonText' color for base document's color, and calculate if it
43 // dark or light. If color of button's text is dark, then color of button's body
44 // is light, and we define entire web document as light; and vice versa.
45
46 // Get 'ButtonText' color value (as current text's color of body)
47 var body = document.getElementsByTagName('body')[0];
48 var bodyColor = window.getComputedStyle(body, null).color;
49 console.info("Set bodyColor: %s", bodyColor);
50
51 // Returned value must be in format like "rgb(212, 212, 212)" or "rgba(192, 68, 1, 0)"
52 if (bodyColor.indexOf("rgb") != -1) {
53 // Make array with color components
54 var results = bodyColor.match(/^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})/);
55
56 // Calculate luminance (brightness) in range 0..1
57 if (results && results.length >= 3) {
58 r = parseInt(results[1], 10);
59 g = parseInt(results[2], 10);
60 b = parseInt(results[3], 10);
61 min = Math.min(r, g, b); max = Math.max(r, g, b);
62 }
63 var luminance = (min + max) / 2 / 255;
64
65 // Set class for body
66 body.className = (luminance > 0.5) ? 'dark' : 'light';
67 }
68 // Now we can use cascade styles for any elements lying on light or dark body:
69 // .light h2 { color: #222; }
70 // .dark h2 { color: #CCC; }
71 // Also we can use semi-transparent colors in some cases:
72 // body footer { color: rgba(128, 128, 128, 0.5); }
73 }
74
75
76
77 // Set base font size
78 function setBaseFont() {
79 // Goal: to have on page the same font sizes as in user's system.
80 // User input elements changed its font size automatically, so we can read
81 // font size from (hidden) button and apply this size to document's body.
82 // All other sizes will be relative, and will grow or shrink automatically.
83
84 // Get document's body
85 var body = document.getElementsByTagName('body')[0];
86
87 // Make button in the hidden DOM
88 var hiddenButton = document.createElement('BUTTON');
89
90 // Move button away from look
91 hiddenButton.style.setProperty('position', 'absolute', 1);
92 hiddenButton.style.setProperty('left', '0', 1);
93
94 // Add some text to button
95 hiddenButton.appendChild(document.createTextNode("SliTaz"));
96
97 // Add button to DOM
98 body.appendChild(hiddenButton);
99
100 // Focus to button (it will get colored outline!)
101 hiddenButton.focus();
102
103 // Get button's style
104 var buttonStyle = getComputedStyle(hiddenButton, null);
105
106 // Copy styles from button to body
107 with (body.style) {
108 fontFamily = buttonStyle.fontFamily;
109 fontSize = buttonStyle.fontSize;
110 fontWeight = 'normal';
111 }
112
113 //body.style.color = buttonStyle.outlineColor;
114
115 console.info('Set fontFamily: %s, fontSize: %s', body.style.fontFamily, body.style.fontSize);
116 console.info('Theme color: %s', buttonStyle.outlineColor);
117 // Remove button from hidden DOM
118 body.removeChild(hiddenButton);
119 }
120
121
122
123 //
124 function dupTableHead() {
125 if (! document.getElementById('head2')) return
126 var tableHead = document.createElement("TABLE");
127 with (tableHead) {
128 innerHTML = '<thead>' + document.getElementById('head2').innerHTML + '</thead>'
129 setAttribute("id", "head1h");
130 setAttribute("class", "zebra pkglist");
131 }
132
133 document.body.appendChild(tableHead);
134 }
135
136
137
138 //
139 function scrollHandler(){
140 console.log("about head1: %s.", document.getElementById('head1'));
141 toolbar = document.getElementById('toolbar');
142 paddingTop = toolbar.offsetTop + toolbar.offsetHeight;
143 paddingTopPx = paddingTop + 'px';
144
145 headerOffset = document.getElementById('head1').offsetTop;
146 windowScrolled = document.body.scrollTop;
147 if ((headerOffset - windowScrolled) < paddingTop)
148 {
149 // document.getElementById('miscinfo1').innerText = '<';
150 var head1h = document.getElementById('head1h');
151 var head1 = document.getElementById('head1');
152
153 with (head1h.style) {
154 setProperty('top', paddingTopPx, 1);
155 setProperty('display', 'table', 1);
156 setProperty('left', head1.offsetLeft + 'px', 1);
157 setProperty('width', head1.offsetWidth + 'px', 1);
158 }
159
160 // document.getElementById('miscinfo1').innerText = '(' + toopop +')P^' + paddingTop + 'L' + head1h.offsetLeft + ':W' + head1h.offsetWidth + ':H' + head1h.offsetHeight + ':T' + head1h.clientTop +',' + head1h.offsetTop;
161
162 }
163 else
164 {
165 //document.getElementById('miscinfo1').innerText = '>';
166 document.getElementById('head1h').style.display = 'none';
167 }
168
169 tHeadTr = document.getElementById('head1h').children[0].children[0];
170 tHeadTrO = document.getElementById('head1').children[0].children[0];
171 tHeadTr.children[0].style.setProperty('width', tHeadTrO.children[0].offsetWidth -1 + 'px', 1);
172 tHeadTr.children[1].style.setProperty('width', tHeadTrO.children[1].offsetWidth -1 + 'px', 1);
173 tHeadTr.children[2].style.setProperty('width', tHeadTrO.children[2].offsetWidth -1 + 'px', 1);
174 tHeadTr.children[3].style.setProperty('width', tHeadTrO.children[3].offsetWidth -1 + 'px', 1);
175
176 }
177
178
179
180 // Handler for History scroller for Terminal
181 function keydownHandler(e) {
182 // Get code for pressed key
183 var evt = e ? e:event;
184 var keyCode = evt.keyCode;
185
186 // If pressed "up" or "down"
187 if (keyCode==38 || keyCode==40) {
188 // Local storage used as global variables storage
189 // Get current position in the History, and History size
190 //var cur_hist = window.localStorage.getItem("cur_hist");
191 //var max_hist = window.localStorage.getItem("max_hist");
192 switch(keyCode) {
193 case 38:
194 // "up" key pressed; decrement and normalize position
195 cur_hist--; if (cur_hist < 0) cur_hist = 0;
196 break;
197 case 40:
198 // "down" key pressed; increment and normalize position
199 cur_hist++; if (cur_hist > max_hist) cur_hist = max_hist;
200 break;
201 }
202 // Element "cmd" is a text input, put History element there
203 var cmd = document.getElementById('typeField');
204 cmd.focus();
205 cmd.innerText = ash_history[cur_hist];
206
207 var hint = ''
208 if (cur_hist < max_hist) hint = '[' + cur_hist + '/' + (max_hist - 1) + '] ';
209 document.getElementById('num_hist').innerText = hint;
210
211 //window.localStorage.setItem('cur_hist', cur_hist);
212 return false
213 }
214 if (keyCode==13) {
215 document.getElementById('cmd').value=document.getElementById('typeField').innerText;
216 document.getElementById('term').submit();
217 return false
218 }
219 return true
220 }
221
222
223
224 // Add hover effect for menu
225 function menuAddHover() {
226 var toolbarMenu = document.getElementById('toolbarMenu');
227 toolbarMenu.className = 'hover';
228
229 menus = toolbarMenu.getElementsByTagName('li');
230 for (i = 0; i < menus.length; i++)
231 menus[i].blur();
232
233 toolbarMenu.focus();
234 toolbarMenu.onblur = menuRmHover;
235 console.log('Add finished');
236 }
237
238 // Remove hover effect for menu
239 function menuRmHover() {
240 var toolbarMenu = document.getElementById('toolbarMenu');
241 toolbarMenu.className = 'nohover';
242
243 menus = toolbarMenu.getElementsByTagName('li');
244 for (i = 0; i < menus.length; i++)
245 menus[i].onclick = menuAddHover;
246
247 console.log('Rm finished');
248 }
249
250
251 // Close main menu
252 function closeMenu() {
253 document.getElementById('noMenu').style.display = 'none';
254 closeItem(itemOpened);
255 menuIsClosed = true;
256 //console.log('Menu closed');
257 }
258 // Open main menu
259 function openMenu() {
260 //console.log('openMenu')
261 document.getElementById('noMenu').style.display = 'block';
262 menuIsClosed = false;
263 }
264 // Open main menu item
265 function openItem(el) {
266 if (itemOpened != el) {
267 if (itemOpened)
268 closeItem(itemOpened);
269 el.children[1].className = 'opened';
270 el.focus();
271 itemOpened = el;
272 menuIsClosed = false; openMenu();
273 //console.log('Opened %s', el.tabIndex);
274 //console.log('Menu opened (open)');
275 }
276 }
277 // Close main menu item
278 function closeItem(el) {
279 //console.log('<closeItem: "%s">', el)
280 thisMenu = el.children[1];
281 if (thisMenu.className == 'opened') {
282 thisMenu.className = 'closed';
283 el.blur();
284 itemOpened = ''
285 //console.log('Closed %s', el.tabIndex);
286 }
287 }
288
289 itemOpened = '';
290 menuIsClosed = true;
291
292 // Add event handler
293 function addMenuHandlers() {
294 menus = document.getElementById('toolbarMenu').children;
295 for (i = 0; i < menus.length; i++) {
296 menus[i].firstElementChild.onclick = function() {menuItemClick(this)};
297 menus[i].firstElementChild.onmouseover = function() {menuItemHover(this)};
298 menus[i].onblur = function() {menuItemBlur(this)};
299 }
300
301 // Close menu when click outside menu
302 document.getElementById('noMenu').onclick = closeMenu;
303 }
304
305 function menuItemClick(el) {
306 topItem = el.parentElement;
307 thisMenu = topItem.children[1];
308 //console.log('Clicked %s class %s', topItem.tabIndex, thisMenu.className);
309 if (thisMenu.className == 'opened') {
310 closeItem(topItem);
311 menuIsClosed = true; closeMenu();
312 //console.log('Menu closed (click)');
313 }
314 else {
315 openItem(topItem);
316 menuIsClosed = false; openMenu();
317 //console.log('Menu opened (click)');
318 }
319 }
320
321 function menuItemHover(el) {
322 hoverElem = el.parentElement;
323 //console.log('Hovered %s', hoverElem.tabIndex);
324 if (! menuIsClosed) {
325 closeItem(itemOpened);
326 openItem(hoverElem);
327 }
328 }
329 function menuItemBlur(el) {
330 elem = el; //.parentElement;
331 //console.log('Blurred %s', elem.tabIndex);
332 //closeItem(elem);
333 //menuIsClosed = true;
334 //console.log('Menu closed (blur)');
335 }
336
337
338
339 //
340 // AJAX code for dynamic requests
341 //
342
343 function ajax(cgiUrl, command, ajaxOut) {
344 // (1) create object for server request
345 var req = new XMLHttpRequest();
346
347 // (2) show request status
348 var statusElem = document.getElementById('ajaxStatus');
349
350 req.onreadystatechange = function() {
351 // onreadystatechange activates on server answer receiving
352
353 if (req.readyState == XMLHttpRequest.DONE) {
354 // if request done
355 statusElem.innerHTML = req.statusText // show status (Not Found, ОК..)
356
357 // if status 200 (ОК) - show answer to user
358 if (req.status == 200)
359 document.getElementById(ajaxOut).innerHTML = req.responseText;
360 // here we can add "else" with request errors processing
361 }
362 }
363
364 // (3) set request address
365 req.open('POST', cgiUrl, true);
366
367 // (4) request object is ready
368 req.send(command); // send request
369
370 // (5)
371 statusElem.innerHTML = '<img src="/styles/default/images/loader.gif" />'
372 }
373
374
375
376 //
377 // Load configuration for new and stored networks
378 //
379
380 function loadcfg(essid, bssid, keyType) {
381 // looking for stored network
382 for (i = 0; i < networks.length; i++) {
383 if (networks[i].ssid == essid) break;
384 if (typeof networks[i].bssid != 'undefined') {
385 if (networks[i].bssid == bssid) {
386 essid = networks[i].ssid;
387 break;
388 }
389 }
390 }
391 document.getElementById('essid').value = essid;
392 document.getElementById('keyType').value = keyType;
393
394 password = document.getElementById('password')
395 password.value = '';
396 if (typeof networks[i] != 'undefined') {
397 if (typeof networks[i].psk != 'undefined')
398 password.value = networks[i].psk;
399 else if (typeof networks[i].wep_key0 != 'undefined')
400 password.value = networks[i].wep_key0;
401 else if (typeof networks[i].password != 'undefined')
402 password.value = networks[i].password;
403 }
404
405 // Not used yet
406 document.getElementById('bssid').value = '';
407
408 wifiSettingsChange();
409 }
410
411
412 //
413 // Toggle all checkboxes on a page
414 //
415
416 function checkBoxes(w) {
417 try {
418 var inputs = w.document.getElementsByTagName('input');
419 for (var i = 0; i < inputs.length; i++) {
420 if (inputs[i].type && inputs[i].type == 'checkbox') {
421 inputs[i].checked = !inputs[i].checked;
422 }
423 }
424 } catch (e){}
425 if (w.frames && w.frames.length>0) {
426 for (var i = 0; i < w.frames.length;i++) {
427 var fr = w.frames[i];
428 checkFrames(fr);
429 }
430 }
431 return false
432 }
433