ui.js 20 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. var UI = {};
  5. UI.Element = function () {};
  6. UI.Element.prototype = {
  7. setId: function ( id ) {
  8. this.dom.id = id;
  9. return this;
  10. },
  11. setClass: function ( name ) {
  12. this.dom.className = name;
  13. return this;
  14. },
  15. setStyle: function ( style, array ) {
  16. for ( var i = 0; i < array.length; i ++ ) {
  17. this.dom.style[ style ] = array[ i ];
  18. }
  19. },
  20. setDisabled: function ( value ) {
  21. this.dom.disabled = value;
  22. return this;
  23. },
  24. setTextContent: function ( value ) {
  25. this.dom.textContent = value;
  26. return this;
  27. }
  28. }
  29. // properties
  30. var properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
  31. 'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
  32. 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor' ];
  33. properties.forEach( function ( property ) {
  34. var method = 'set' + property.substr( 0, 1 ).toUpperCase() + property.substr( 1, property.length );
  35. UI.Element.prototype[ method ] = function () {
  36. this.setStyle( property, arguments );
  37. return this;
  38. };
  39. } );
  40. // events
  41. var events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change' ];
  42. events.forEach( function ( event ) {
  43. var method = 'on' + event;
  44. UI.Element.prototype[ method ] = function ( callback ) {
  45. this.dom.addEventListener( event.toLowerCase(), callback.bind( this ), false );
  46. return this;
  47. };
  48. } );
  49. // Panel
  50. UI.Panel = function () {
  51. UI.Element.call( this );
  52. var dom = document.createElement( 'div' );
  53. dom.className = 'Panel';
  54. this.dom = dom;
  55. return this;
  56. };
  57. UI.Panel.prototype = Object.create( UI.Element.prototype );
  58. UI.Panel.prototype.constructor = UI.Panel;
  59. UI.Panel.prototype.add = function () {
  60. for ( var i = 0; i < arguments.length; i ++ ) {
  61. var argument = arguments[ i ];
  62. if ( argument instanceof UI.Element ) {
  63. this.dom.appendChild( argument.dom );
  64. } else {
  65. console.error( 'UI.Panel:', argument, 'is not an instance of UI.Element.' )
  66. }
  67. }
  68. return this;
  69. };
  70. UI.Panel.prototype.remove = function () {
  71. for ( var i = 0; i < arguments.length; i ++ ) {
  72. var argument = arguments[ i ];
  73. if ( argument instanceof UI.Element ) {
  74. this.dom.removeChild( argument.dom );
  75. } else {
  76. console.error( 'UI.Panel:', argument, 'is not an instance of UI.Element.' )
  77. }
  78. }
  79. return this;
  80. };
  81. UI.Panel.prototype.clear = function () {
  82. while ( this.dom.children.length ) {
  83. this.dom.removeChild( this.dom.lastChild );
  84. }
  85. };
  86. // Collapsible Panel
  87. UI.CollapsiblePanel = function () {
  88. UI.Panel.call( this );
  89. this.setClass( 'Panel Collapsible' );
  90. var scope = this;
  91. this.static = new UI.Panel();
  92. this.static.setClass( 'Static' );
  93. this.static.onClick( function () {
  94. scope.toggle();
  95. } );
  96. this.dom.appendChild( this.static.dom );
  97. this.contents = new UI.Panel();
  98. this.contents.setClass( 'Content' );
  99. this.dom.appendChild( this.contents.dom );
  100. var button = new UI.Panel();
  101. button.setClass( 'Button' );
  102. this.static.add( button );
  103. this.isCollapsed = false;
  104. return this;
  105. };
  106. UI.CollapsiblePanel.prototype = Object.create( UI.Panel.prototype );
  107. UI.CollapsiblePanel.prototype.constructor = UI.CollapsiblePanel;
  108. UI.CollapsiblePanel.prototype.addStatic = function () {
  109. this.static.add.apply( this.static, arguments );
  110. return this;
  111. };
  112. UI.CollapsiblePanel.prototype.removeStatic = function () {
  113. this.static.remove.apply( this.static, arguments );
  114. return this;
  115. };
  116. UI.CollapsiblePanel.prototype.clearStatic = function () {
  117. this.static.clear();
  118. return this;
  119. };
  120. UI.CollapsiblePanel.prototype.add = function () {
  121. this.contents.add.apply( this.contents, arguments );
  122. return this;
  123. };
  124. UI.CollapsiblePanel.prototype.remove = function () {
  125. this.contents.remove.apply( this.contents, arguments );
  126. return this;
  127. };
  128. UI.CollapsiblePanel.prototype.clear = function () {
  129. this.contents.clear();
  130. return this;
  131. };
  132. UI.CollapsiblePanel.prototype.toggle = function() {
  133. this.setCollapsed( !this.isCollapsed );
  134. };
  135. UI.CollapsiblePanel.prototype.collapse = function() {
  136. this.setCollapsed( true );
  137. };
  138. UI.CollapsiblePanel.prototype.expand = function() {
  139. this.setCollapsed( false );
  140. };
  141. UI.CollapsiblePanel.prototype.setCollapsed = function( boolean ) {
  142. if ( boolean ) {
  143. this.dom.classList.add( 'collapsed' );
  144. } else {
  145. this.dom.classList.remove( 'collapsed' );
  146. }
  147. this.isCollapsed = boolean;
  148. if ( this.onCollapsedChangeCallback !== undefined ) {
  149. this.onCollapsedChangeCallback( boolean );
  150. }
  151. };
  152. UI.CollapsiblePanel.prototype.onCollapsedChange = function ( callback ) {
  153. this.onCollapsedChangeCallback = callback;
  154. };
  155. // Text
  156. UI.Text = function ( text ) {
  157. UI.Element.call( this );
  158. var dom = document.createElement( 'span' );
  159. dom.className = 'Text';
  160. dom.style.cursor = 'default';
  161. dom.style.display = 'inline-block';
  162. dom.style.verticalAlign = 'middle';
  163. this.dom = dom;
  164. this.setValue( text );
  165. return this;
  166. };
  167. UI.Text.prototype = Object.create( UI.Element.prototype );
  168. UI.Text.prototype.constructor = UI.Text;
  169. UI.Text.prototype.setValue = function ( value ) {
  170. if ( value !== undefined ) {
  171. this.dom.textContent = value;
  172. }
  173. return this;
  174. };
  175. // Input
  176. UI.Input = function () {
  177. UI.Element.call( this );
  178. var scope = this;
  179. var dom = document.createElement( 'input' );
  180. dom.className = 'Input';
  181. dom.style.padding = '2px';
  182. dom.style.border = '1px solid #ccc';
  183. dom.addEventListener( 'keydown', function ( event ) {
  184. event.stopPropagation();
  185. }, false );
  186. this.dom = dom;
  187. return this;
  188. };
  189. UI.Input.prototype = Object.create( UI.Element.prototype );
  190. UI.Input.prototype.constructor = UI.Input;
  191. UI.Input.prototype.getValue = function () {
  192. return this.dom.value;
  193. };
  194. UI.Input.prototype.setValue = function ( value ) {
  195. this.dom.value = value;
  196. return this;
  197. };
  198. // TextArea
  199. UI.TextArea = function () {
  200. UI.Element.call( this );
  201. var scope = this;
  202. var dom = document.createElement( 'textarea' );
  203. dom.className = 'TextArea';
  204. dom.style.padding = '2px';
  205. dom.style.border = '1px solid #ccc';
  206. dom.spellcheck = false;
  207. dom.addEventListener( 'keydown', function ( event ) {
  208. event.stopPropagation();
  209. if ( event.keyCode === 9 ) {
  210. event.preventDefault();
  211. var cursor = dom.selectionStart;
  212. dom.value = dom.value.substring( 0, cursor ) + '\t' + dom.value.substring( cursor );
  213. dom.selectionStart = cursor + 1;
  214. dom.selectionEnd = dom.selectionStart;
  215. }
  216. }, false );
  217. this.dom = dom;
  218. return this;
  219. };
  220. UI.TextArea.prototype = Object.create( UI.Element.prototype );
  221. UI.TextArea.prototype.constructor = UI.TextArea;
  222. UI.TextArea.prototype.getValue = function () {
  223. return this.dom.value;
  224. };
  225. UI.TextArea.prototype.setValue = function ( value ) {
  226. this.dom.value = value;
  227. return this;
  228. };
  229. // Select
  230. UI.Select = function () {
  231. UI.Element.call( this );
  232. var scope = this;
  233. var dom = document.createElement( 'select' );
  234. dom.className = 'Select';
  235. dom.style.width = '64px';
  236. dom.style.height = '16px';
  237. dom.style.border = '0px';
  238. dom.style.padding = '0px';
  239. this.dom = dom;
  240. return this;
  241. };
  242. UI.Select.prototype = Object.create( UI.Element.prototype );
  243. UI.Select.prototype.constructor = UI.Select;
  244. UI.Select.prototype.setMultiple = function ( boolean ) {
  245. this.dom.multiple = boolean;
  246. return this;
  247. };
  248. UI.Select.prototype.setOptions = function ( options ) {
  249. var selected = this.dom.value;
  250. while ( this.dom.children.length > 0 ) {
  251. this.dom.removeChild( this.dom.firstChild );
  252. }
  253. for ( var key in options ) {
  254. var option = document.createElement( 'option' );
  255. option.value = key;
  256. option.innerHTML = options[ key ];
  257. this.dom.appendChild( option );
  258. }
  259. this.dom.value = selected;
  260. return this;
  261. };
  262. UI.Select.prototype.getValue = function () {
  263. return this.dom.value;
  264. };
  265. UI.Select.prototype.setValue = function ( value ) {
  266. value = String( value );
  267. if ( this.dom.value !== value ) {
  268. this.dom.value = value;
  269. }
  270. return this;
  271. };
  272. // FancySelect
  273. UI.FancySelect = function () {
  274. UI.Element.call( this );
  275. var scope = this;
  276. var dom = document.createElement( 'div' );
  277. dom.className = 'FancySelect';
  278. dom.tabIndex = 0; // keyup event is ignored without setting tabIndex
  279. // Broadcast for object selection after arrow navigation
  280. var changeEvent = document.createEvent('HTMLEvents');
  281. changeEvent.initEvent( 'change', true, true );
  282. // Prevent native scroll behavior
  283. dom.addEventListener( 'keydown', function (event) {
  284. switch ( event.keyCode ) {
  285. case 38: // up
  286. case 40: // down
  287. event.preventDefault();
  288. event.stopPropagation();
  289. break;
  290. }
  291. }, false);
  292. // Keybindings to support arrow navigation
  293. dom.addEventListener( 'keyup', function (event) {
  294. switch ( event.keyCode ) {
  295. case 38: // up
  296. case 40: // down
  297. scope.selectedIndex += ( event.keyCode == 38 ) ? -1 : 1;
  298. if ( scope.selectedIndex >= 0 && scope.selectedIndex < scope.options.length ) {
  299. // Highlight selected dom elem and scroll parent if needed
  300. scope.setValue( scope.options[ scope.selectedIndex ].value );
  301. scope.dom.dispatchEvent( changeEvent );
  302. }
  303. break;
  304. }
  305. }, false);
  306. this.dom = dom;
  307. this.options = [];
  308. this.selectedIndex = -1;
  309. this.selectedValue = null;
  310. return this;
  311. };
  312. UI.FancySelect.prototype = Object.create( UI.Element.prototype );
  313. UI.FancySelect.prototype.constructor = UI.FancySelect;
  314. UI.FancySelect.prototype.setOptions = function ( options ) {
  315. var scope = this;
  316. var changeEvent = document.createEvent( 'HTMLEvents' );
  317. changeEvent.initEvent( 'change', true, true );
  318. while ( scope.dom.children.length > 0 ) {
  319. scope.dom.removeChild( scope.dom.firstChild );
  320. }
  321. scope.options = [];
  322. for ( var i = 0; i < options.length; i ++ ) {
  323. var option = options[ i ];
  324. var div = document.createElement( 'div' );
  325. div.className = 'option';
  326. div.innerHTML = option.html;
  327. div.value = option.value;
  328. scope.dom.appendChild( div );
  329. scope.options.push( div );
  330. div.addEventListener( 'click', function ( event ) {
  331. scope.setValue( this.value );
  332. scope.dom.dispatchEvent( changeEvent );
  333. }, false );
  334. }
  335. return scope;
  336. };
  337. UI.FancySelect.prototype.getValue = function () {
  338. return this.selectedValue;
  339. };
  340. UI.FancySelect.prototype.setValue = function ( value ) {
  341. for ( var i = 0; i < this.options.length; i ++ ) {
  342. var element = this.options[ i ];
  343. if ( element.value === value ) {
  344. element.classList.add( 'active' );
  345. // scroll into view
  346. var y = element.offsetTop - this.dom.offsetTop;
  347. var bottomY = y + element.offsetHeight;
  348. var minScroll = bottomY - this.dom.offsetHeight;
  349. if ( this.dom.scrollTop > y ) {
  350. this.dom.scrollTop = y
  351. } else if ( this.dom.scrollTop < minScroll ) {
  352. this.dom.scrollTop = minScroll;
  353. }
  354. this.selectedIndex = i;
  355. } else {
  356. element.classList.remove( 'active' );
  357. }
  358. }
  359. this.selectedValue = value;
  360. return this;
  361. };
  362. // Checkbox
  363. UI.Checkbox = function ( boolean ) {
  364. UI.Element.call( this );
  365. var scope = this;
  366. var dom = document.createElement( 'input' );
  367. dom.className = 'Checkbox';
  368. dom.type = 'checkbox';
  369. this.dom = dom;
  370. this.setValue( boolean );
  371. return this;
  372. };
  373. UI.Checkbox.prototype = Object.create( UI.Element.prototype );
  374. UI.Checkbox.prototype.constructor = UI.Checkbox;
  375. UI.Checkbox.prototype.getValue = function () {
  376. return this.dom.checked;
  377. };
  378. UI.Checkbox.prototype.setValue = function ( value ) {
  379. if ( value !== undefined ) {
  380. this.dom.checked = value;
  381. }
  382. return this;
  383. };
  384. // Color
  385. UI.Color = function () {
  386. UI.Element.call( this );
  387. var scope = this;
  388. var dom = document.createElement( 'input' );
  389. dom.className = 'Color';
  390. dom.style.width = '64px';
  391. dom.style.height = '16px';
  392. dom.style.border = '0px';
  393. dom.style.padding = '0px';
  394. dom.style.backgroundColor = 'transparent';
  395. try {
  396. dom.type = 'color';
  397. dom.value = '#ffffff';
  398. } catch ( exception ) {}
  399. this.dom = dom;
  400. return this;
  401. };
  402. UI.Color.prototype = Object.create( UI.Element.prototype );
  403. UI.Color.prototype.constructor = UI.Color;
  404. UI.Color.prototype.getValue = function () {
  405. return this.dom.value;
  406. };
  407. UI.Color.prototype.getHexValue = function () {
  408. return parseInt( this.dom.value.substr( 1 ), 16 );
  409. };
  410. UI.Color.prototype.setValue = function ( value ) {
  411. this.dom.value = value;
  412. return this;
  413. };
  414. UI.Color.prototype.setHexValue = function ( hex ) {
  415. this.dom.value = '#' + ( '000000' + hex.toString( 16 ) ).slice( -6 );
  416. return this;
  417. };
  418. // Number
  419. UI.Number = function ( number ) {
  420. UI.Element.call( this );
  421. var scope = this;
  422. var dom = document.createElement( 'input' );
  423. dom.className = 'Number';
  424. dom.value = '0.00';
  425. dom.addEventListener( 'keydown', function ( event ) {
  426. event.stopPropagation();
  427. if ( event.keyCode === 13 ) dom.blur();
  428. }, false );
  429. this.min = - Infinity;
  430. this.max = Infinity;
  431. this.precision = 2;
  432. this.step = 1;
  433. this.dom = dom;
  434. this.setValue( number );
  435. var changeEvent = document.createEvent( 'HTMLEvents' );
  436. changeEvent.initEvent( 'change', true, true );
  437. var distance = 0;
  438. var onMouseDownValue = 0;
  439. var pointer = new THREE.Vector2();
  440. var prevPointer = new THREE.Vector2();
  441. var onMouseDown = function ( event ) {
  442. event.preventDefault();
  443. distance = 0;
  444. onMouseDownValue = parseFloat( dom.value );
  445. prevPointer.set( event.clientX, event.clientY );
  446. document.addEventListener( 'mousemove', onMouseMove, false );
  447. document.addEventListener( 'mouseup', onMouseUp, false );
  448. };
  449. var onMouseMove = function ( event ) {
  450. var currentValue = dom.value;
  451. pointer.set( event.clientX, event.clientY );
  452. distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
  453. var number = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
  454. dom.value = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( scope.precision );
  455. if ( currentValue !== dom.value ) dom.dispatchEvent( changeEvent );
  456. prevPointer.set( event.clientX, event.clientY );
  457. };
  458. var onMouseUp = function ( event ) {
  459. document.removeEventListener( 'mousemove', onMouseMove, false );
  460. document.removeEventListener( 'mouseup', onMouseUp, false );
  461. if ( Math.abs( distance ) < 2 ) {
  462. dom.focus();
  463. dom.select();
  464. }
  465. };
  466. var onChange = function ( event ) {
  467. var value = 0;
  468. try {
  469. value = eval( dom.value );
  470. } catch ( error ) {
  471. console.error( error.message );
  472. }
  473. dom.value = parseFloat( value );
  474. };
  475. var onFocus = function ( event ) {
  476. dom.style.backgroundColor = '';
  477. dom.style.borderColor = '#ccc';
  478. dom.style.cursor = '';
  479. };
  480. var onBlur = function ( event ) {
  481. dom.style.backgroundColor = 'transparent';
  482. dom.style.borderColor = 'transparent';
  483. dom.style.cursor = 'col-resize';
  484. };
  485. dom.addEventListener( 'mousedown', onMouseDown, false );
  486. dom.addEventListener( 'change', onChange, false );
  487. dom.addEventListener( 'focus', onFocus, false );
  488. dom.addEventListener( 'blur', onBlur, false );
  489. return this;
  490. };
  491. UI.Number.prototype = Object.create( UI.Element.prototype );
  492. UI.Number.prototype.constructor = UI.Number;
  493. UI.Number.prototype.getValue = function () {
  494. return parseFloat( this.dom.value );
  495. };
  496. UI.Number.prototype.setValue = function ( value ) {
  497. if ( value !== undefined ) {
  498. this.dom.value = value.toFixed( this.precision );
  499. }
  500. return this;
  501. };
  502. UI.Number.prototype.setRange = function ( min, max ) {
  503. this.min = min;
  504. this.max = max;
  505. return this;
  506. };
  507. UI.Number.prototype.setPrecision = function ( precision ) {
  508. this.precision = precision;
  509. return this;
  510. };
  511. // Integer
  512. UI.Integer = function ( number ) {
  513. UI.Element.call( this );
  514. var scope = this;
  515. var dom = document.createElement( 'input' );
  516. dom.className = 'Number';
  517. dom.value = '0.00';
  518. dom.addEventListener( 'keydown', function ( event ) {
  519. event.stopPropagation();
  520. }, false );
  521. this.min = - Infinity;
  522. this.max = Infinity;
  523. this.step = 1;
  524. this.dom = dom;
  525. this.setValue( number );
  526. var changeEvent = document.createEvent( 'HTMLEvents' );
  527. changeEvent.initEvent( 'change', true, true );
  528. var distance = 0;
  529. var onMouseDownValue = 0;
  530. var pointer = new THREE.Vector2();
  531. var prevPointer = new THREE.Vector2();
  532. var onMouseDown = function ( event ) {
  533. event.preventDefault();
  534. distance = 0;
  535. onMouseDownValue = parseFloat( dom.value );
  536. prevPointer.set( event.clientX, event.clientY );
  537. document.addEventListener( 'mousemove', onMouseMove, false );
  538. document.addEventListener( 'mouseup', onMouseUp, false );
  539. };
  540. var onMouseMove = function ( event ) {
  541. var currentValue = dom.value;
  542. pointer.set( event.clientX, event.clientY );
  543. distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
  544. var number = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
  545. dom.value = Math.min( scope.max, Math.max( scope.min, number ) ) | 0;
  546. if ( currentValue !== dom.value ) dom.dispatchEvent( changeEvent );
  547. prevPointer.set( event.clientX, event.clientY );
  548. };
  549. var onMouseUp = function ( event ) {
  550. document.removeEventListener( 'mousemove', onMouseMove, false );
  551. document.removeEventListener( 'mouseup', onMouseUp, false );
  552. if ( Math.abs( distance ) < 2 ) {
  553. dom.focus();
  554. dom.select();
  555. }
  556. };
  557. var onChange = function ( event ) {
  558. var value = 0;
  559. try {
  560. value = eval( dom.value );
  561. } catch ( error ) {
  562. console.error( error.message );
  563. }
  564. dom.value = parseInt( value );
  565. };
  566. var onFocus = function ( event ) {
  567. dom.style.backgroundColor = '';
  568. dom.style.borderColor = '#ccc';
  569. dom.style.cursor = '';
  570. };
  571. var onBlur = function ( event ) {
  572. dom.style.backgroundColor = 'transparent';
  573. dom.style.borderColor = 'transparent';
  574. dom.style.cursor = 'col-resize';
  575. };
  576. dom.addEventListener( 'mousedown', onMouseDown, false );
  577. dom.addEventListener( 'change', onChange, false );
  578. dom.addEventListener( 'focus', onFocus, false );
  579. dom.addEventListener( 'blur', onBlur, false );
  580. return this;
  581. };
  582. UI.Integer.prototype = Object.create( UI.Element.prototype );
  583. UI.Integer.prototype.constructor = UI.Integer;
  584. UI.Integer.prototype.getValue = function () {
  585. return parseInt( this.dom.value );
  586. };
  587. UI.Integer.prototype.setValue = function ( value ) {
  588. if ( value !== undefined ) {
  589. this.dom.value = value | 0;
  590. }
  591. return this;
  592. };
  593. UI.Integer.prototype.setRange = function ( min, max ) {
  594. this.min = min;
  595. this.max = max;
  596. return this;
  597. };
  598. // Break
  599. UI.Break = function () {
  600. UI.Element.call( this );
  601. var dom = document.createElement( 'br' );
  602. dom.className = 'Break';
  603. this.dom = dom;
  604. return this;
  605. };
  606. UI.Break.prototype = Object.create( UI.Element.prototype );
  607. UI.Break.prototype.constructor = UI.Break;
  608. // HorizontalRule
  609. UI.HorizontalRule = function () {
  610. UI.Element.call( this );
  611. var dom = document.createElement( 'hr' );
  612. dom.className = 'HorizontalRule';
  613. this.dom = dom;
  614. return this;
  615. };
  616. UI.HorizontalRule.prototype = Object.create( UI.Element.prototype );
  617. UI.HorizontalRule.prototype.constructor = UI.HorizontalRule;
  618. // Button
  619. UI.Button = function ( value ) {
  620. UI.Element.call( this );
  621. var scope = this;
  622. var dom = document.createElement( 'button' );
  623. dom.className = 'Button';
  624. this.dom = dom;
  625. this.dom.textContent = value;
  626. return this;
  627. };
  628. UI.Button.prototype = Object.create( UI.Element.prototype );
  629. UI.Button.prototype.constructor = UI.Button;
  630. UI.Button.prototype.setLabel = function ( value ) {
  631. this.dom.textContent = value;
  632. return this;
  633. };
  634. // Dialog
  635. UI.Dialog = function ( value ) {
  636. var scope = this;
  637. var dom = document.createElement( 'dialog' );
  638. if ( dom.showModal === undefined ) {
  639. // fallback
  640. dom = document.createElement( 'div' );
  641. dom.style.display = 'none';
  642. dom.showModal = function () {
  643. dom.style.position = 'absolute';
  644. dom.style.left = '100px';
  645. dom.style.top = '100px';
  646. dom.style.zIndex = 1;
  647. dom.style.display = '';
  648. };
  649. }
  650. dom.className = 'Dialog';
  651. this.dom = dom;
  652. return this;
  653. };
  654. UI.Dialog.prototype = Object.create( UI.Panel.prototype );
  655. UI.Dialog.prototype.constructor = UI.Dialog;
  656. UI.Dialog.prototype.showModal = function () {
  657. this.dom.showModal();
  658. return this;
  659. };