gluon-web.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. /*
  2. Copyright 2008 Steven Barth <steven@midlink.org>
  3. Copyright 2008-2012 Jo-Philipp Wich <jow@openwrt.org>
  4. Copyright 2017 Matthias Schiffer <mschiffer@universe-factory.net>
  5. Licensed under the Apache License, Version 2.0 (the "License");
  6. you may not use this file except in compliance with the License.
  7. You may obtain a copy of the License at
  8. http://www.apache.org/licenses/LICENSE-2.0
  9. */
  10. /*
  11. Build using:
  12. uglifyjs javascript/gluon-web.js -o files/lib/gluon/web/www/static/resources/gluon-web.js -c -m --support-ie8
  13. */
  14. (function() {
  15. var dep_entries = {};
  16. function Int(x) {
  17. return (/^-?\d+$/.test(x) ? +x : NaN);
  18. }
  19. function Dec(x) {
  20. return (/^-?\d*\.?\d+?$/.test(x) ? +x : NaN);
  21. }
  22. var validators = {
  23. 'integer': function() {
  24. return !isNaN(Int(this));
  25. },
  26. 'uinteger': function() {
  27. return (Int(this) >= 0);
  28. },
  29. 'float': function() {
  30. return !isNaN(Dec(this));
  31. },
  32. 'ufloat': function() {
  33. return (Dec(this) >= 0);
  34. },
  35. 'ipaddr': function() {
  36. return validators.ip4addr.apply(this) ||
  37. validators.ip6addr.apply(this);
  38. },
  39. 'ip4addr': function() {
  40. var match;
  41. if ((match = this.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/))) {
  42. return (match[1] >= 0) && (match[1] <= 255) &&
  43. (match[2] >= 0) && (match[2] <= 255) &&
  44. (match[3] >= 0) && (match[3] <= 255) &&
  45. (match[4] >= 0) && (match[4] <= 255);
  46. }
  47. return false;
  48. },
  49. 'ip6addr': function() {
  50. if (this.indexOf('::') < 0)
  51. return (this.match(/^(?:[a-f0-9]{1,4}:){7}[a-f0-9]{1,4}$/i) != null);
  52. if (
  53. (this.indexOf(':::') >= 0) || this.match(/::.+::/) ||
  54. this.match(/^:[^:]/) || this.match(/[^:]:$/)
  55. )
  56. return false;
  57. if (this.match(/^(?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}$/i))
  58. return true;
  59. if (this.match(/^(?:[a-f0-9]{1,4}:){7}:$/i))
  60. return true;
  61. if (this.match(/^:(?::[a-f0-9]{1,4}){7}$/i))
  62. return true;
  63. return false;
  64. },
  65. 'wpakey': function() {
  66. var v = this;
  67. if (v.length == 64)
  68. return (v.match(/^[a-f0-9]{64}$/i) != null);
  69. else
  70. return (v.length >= 8) && (v.length <= 63);
  71. },
  72. 'range': function(min, max) {
  73. var val = Dec(this);
  74. return (val >= +min && val <= +max);
  75. },
  76. 'min': function(min) {
  77. return (Dec(this) >= +min);
  78. },
  79. 'max': function(max) {
  80. return (Dec(this) <= +max);
  81. },
  82. 'irange': function(min, max) {
  83. var val = Int(this);
  84. return (val >= +min && val <= +max);
  85. },
  86. 'imin': function(min) {
  87. return (Int(this) >= +min);
  88. },
  89. 'imax': function(max) {
  90. return (Int(this) <= +max);
  91. },
  92. 'minlength': function(min) {
  93. return ((''+this).length >= +min);
  94. },
  95. 'maxlength': function(max) {
  96. return ((''+this).length <= +max);
  97. },
  98. };
  99. function compile(type) {
  100. var v, match;
  101. if ((match = type.match(/^([^\(]+)\(([^,]+),([^\)]+)\)$/)) && (v = validators[match[1]]) !== undefined) {
  102. return function() {
  103. return v.apply(this, [match[2], match[3]]);
  104. }
  105. } else if ((match = type.match(/^([^\(]+)\(([^,\)]+)\)$/)) && (v = validators[match[1]]) !== undefined) {
  106. return function() {
  107. return v.apply(this, [match[2]]);
  108. }
  109. } else {
  110. return validators[type];
  111. }
  112. }
  113. function checkvalue(target, ref) {
  114. var t = document.getElementById(target);
  115. var value;
  116. if (t) {
  117. if (t.type == "checkbox") {
  118. value = t.checked;
  119. } else if (t.value) {
  120. value = t.value;
  121. } else {
  122. value = "";
  123. }
  124. }
  125. return (value == ref)
  126. }
  127. function check(deps) {
  128. for (var i=0; i < deps.length; i++) {
  129. var stat = true;
  130. for (var j in deps[i]) {
  131. stat = (stat && checkvalue(j, deps[i][j]));
  132. }
  133. if (stat)
  134. return true;
  135. }
  136. return false;
  137. }
  138. function update() {
  139. var state = false;
  140. for (var id in dep_entries) {
  141. var entry = dep_entries[id];
  142. var node = document.getElementById(id);
  143. var parent = document.getElementById(entry.parent);
  144. if (node && node.parentNode && !check(entry.deps)) {
  145. node.parentNode.removeChild(node);
  146. state = true;
  147. } else if (parent && (!node || !node.parentNode) && check(entry.deps)) {
  148. var next = undefined;
  149. for (next = parent.firstChild; next; next = next.nextSibling) {
  150. if (next.getAttribute && parseInt(next.getAttribute('data-index'), 10) > entry.index) {
  151. break;
  152. }
  153. }
  154. if (!next) {
  155. parent.appendChild(entry.node);
  156. } else {
  157. parent.insertBefore(entry.node, next);
  158. }
  159. state = true;
  160. }
  161. // hide optionals widget if no choices remaining
  162. if (parent && parent.parentNode && parent.getAttribute('data-optionals'))
  163. parent.parentNode.style.display = (parent.options.length <= 1) ? 'none' : '';
  164. }
  165. if (state) {
  166. update();
  167. }
  168. }
  169. function bind(obj, type, callback, mode) {
  170. if (!obj.addEventListener) {
  171. obj.attachEvent('on' + type,
  172. function() {
  173. var e = window.event;
  174. if (!e.target && e.srcElement)
  175. e.target = e.srcElement;
  176. return !!callback(e);
  177. }
  178. );
  179. } else {
  180. obj.addEventListener(type, callback, !!mode);
  181. }
  182. return obj;
  183. }
  184. function init_dynlist(parent, datatype, optional) {
  185. var prefix = parent.getAttribute('data-prefix');
  186. var holder = parent.getAttribute('data-placeholder');
  187. function dynlist_redraw(focus, add, del) {
  188. var values = [];
  189. while (parent.firstChild) {
  190. var n = parent.firstChild;
  191. var i = +n.index;
  192. if (i != del) {
  193. if (n.nodeName.toLowerCase() == 'input')
  194. values.push(n.value || '');
  195. else if (n.nodeName.toLowerCase() == 'select')
  196. values[values.length-1] = n.options[n.selectedIndex].value;
  197. }
  198. parent.removeChild(n);
  199. }
  200. if (add >= 0) {
  201. focus = add + 1;
  202. values.splice(add, 0, '');
  203. } else if (!optional && values.length == 0) {
  204. values.push('');
  205. }
  206. for (var i = 1; i <= values.length; i++) {
  207. var t = document.createElement('input');
  208. t.id = prefix + '.' + i;
  209. t.name = prefix;
  210. t.value = values[i-1];
  211. t.type = 'text';
  212. t.index = i;
  213. t.className = 'gluon-input-text';
  214. if (holder)
  215. t.placeholder = holder;
  216. parent.appendChild(t);
  217. if (datatype)
  218. validate_field(t, false, datatype);
  219. bind(t, 'keydown', dynlist_keydown);
  220. bind(t, 'keypress', dynlist_keypress);
  221. if (i == focus) {
  222. t.focus();
  223. } else if (-i == focus) {
  224. t.focus();
  225. /* force cursor to end */
  226. var v = t.value;
  227. t.value = ' '
  228. t.value = v;
  229. }
  230. if (optional || values.length > 1) {
  231. var b = document.createElement('span');
  232. b.className = 'gluon-remove';
  233. parent.appendChild(b);
  234. bind(b, 'click', dynlist_btnclick(false));
  235. parent.appendChild(document.createElement('br'));
  236. }
  237. }
  238. var b = document.createElement('span');
  239. b.className = 'gluon-add';
  240. parent.appendChild(b);
  241. bind(b, 'click', dynlist_btnclick(true));
  242. }
  243. function dynlist_keypress(ev) {
  244. ev = ev ? ev : window.event;
  245. var se = ev.target ? ev.target : ev.srcElement;
  246. if (se.nodeType == 3)
  247. se = se.parentNode;
  248. switch (ev.keyCode) {
  249. /* backspace, delete */
  250. case 8:
  251. case 46:
  252. if (se.value.length == 0) {
  253. if (ev.preventDefault)
  254. ev.preventDefault();
  255. return false;
  256. }
  257. return true;
  258. /* enter, arrow up, arrow down */
  259. case 13:
  260. case 38:
  261. case 40:
  262. if (ev.preventDefault)
  263. ev.preventDefault();
  264. return false;
  265. }
  266. return true;
  267. }
  268. function dynlist_keydown(ev) {
  269. ev = ev ? ev : window.event;
  270. var se = ev.target ? ev.target : ev.srcElement;
  271. var index = 0;
  272. var prev, next;
  273. if (se) {
  274. if (se.nodeType == 3)
  275. se = se.parentNode;
  276. index = se.index;
  277. prev = se.previousSibling;
  278. while (prev && prev.name != prefix)
  279. prev = prev.previousSibling;
  280. next = se.nextSibling;
  281. while (next && next.name != prefix)
  282. next = next.nextSibling;
  283. }
  284. switch (ev.keyCode) {
  285. /* backspace, delete */
  286. case 8:
  287. case 46:
  288. var del = (se.nodeName.toLowerCase() == 'select')
  289. ? true : (se.value.length == 0);
  290. if (del) {
  291. if (ev.preventDefault)
  292. ev.preventDefault();
  293. var focus = se.index;
  294. if (ev.keyCode == 8)
  295. focus = -focus+1;
  296. dynlist_redraw(focus, -1, index);
  297. return false;
  298. }
  299. break;
  300. /* enter */
  301. case 13:
  302. dynlist_redraw(-1, index, -1);
  303. break;
  304. /* arrow up */
  305. case 38:
  306. if (prev)
  307. prev.focus();
  308. break;
  309. /* arrow down */
  310. case 40:
  311. if (next)
  312. next.focus();
  313. break;
  314. }
  315. return true;
  316. }
  317. function dynlist_btnclick(add) {
  318. return function(ev) {
  319. ev = ev ? ev : window.event;
  320. var se = ev.target ? ev.target : ev.srcElement;
  321. var input = se.previousSibling;
  322. while (input && input.name != prefix) {
  323. input = input.previousSibling;
  324. }
  325. if (add) {
  326. dynlist_keydown({
  327. target: input,
  328. keyCode: 13
  329. });
  330. } else {
  331. input.value = '';
  332. dynlist_keydown({
  333. target: input,
  334. keyCode: 8
  335. });
  336. }
  337. return false;
  338. }
  339. }
  340. dynlist_redraw(NaN, -1, -1);
  341. }
  342. function validate_field(field, optional, type) {
  343. var check = compile(type);
  344. if (!check)
  345. return;
  346. var validator = function() {
  347. if (!field.form)
  348. return;
  349. field.className = field.className.replace(/ gluon-input-invalid/g, '');
  350. var value = (field.options && field.options.selectedIndex > -1)
  351. ? field.options[field.options.selectedIndex].value : field.value;
  352. if (!(((value.length == 0) && optional) || check.apply(value)))
  353. field.className += ' gluon-input-invalid';
  354. };
  355. bind(field, "blur", validator);
  356. bind(field, "keyup", validator);
  357. if (field.nodeName == 'SELECT') {
  358. bind(field, "change", validator);
  359. bind(field, "click", validator);
  360. }
  361. validator();
  362. }
  363. function add(obj, dep, index) {
  364. var entry = dep_entries[obj.id];
  365. if (!entry) {
  366. entry = {
  367. "node": obj,
  368. "parent": obj.parentNode.id,
  369. "deps": [],
  370. "index": index
  371. };
  372. dep_entries[obj.id] = entry;
  373. }
  374. entry.deps.push(dep)
  375. }
  376. (function() {
  377. var nodes;
  378. nodes = document.querySelectorAll('[data-depends]');
  379. for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
  380. var index = parseInt(node.getAttribute('data-index'), 10);
  381. var depends = JSON.parse(node.getAttribute('data-depends'));
  382. if (!isNaN(index) && depends.length > 0) {
  383. for (var alt = 0; alt < depends.length; alt++) {
  384. add(node, depends[alt], index);
  385. }
  386. }
  387. }
  388. nodes = document.querySelectorAll('[data-update]');
  389. for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
  390. var events = node.getAttribute('data-update').split(' ');
  391. for (var j = 0, event; (event = events[j]) !== undefined; j++) {
  392. bind(node, event, update);
  393. }
  394. }
  395. nodes = document.querySelectorAll('[data-type]');
  396. for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
  397. validate_field(node, node.getAttribute('data-optional') === 'true',
  398. node.getAttribute('data-type'));
  399. }
  400. nodes = document.querySelectorAll('[data-dynlist]');
  401. for (var i = 0, node; (node = nodes[i]) !== undefined; i++) {
  402. var list = JSON.parse(node.getAttribute('data-dynlist'));
  403. init_dynlist(node, list.type, list.optional);
  404. }
  405. update();
  406. })();
  407. })();