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