Skip to content

Commit 3d9be87

Browse files
mrdoobmrdoob
committedOct 14, 2012
Editor: Simplified and improved UI.Number (now tab-friendly).
·
r52
1 parent 6e6ac10 commit 3d9be87

File tree

1 file changed

+86
-81
lines changed

1 file changed

+86
-81
lines changed
 

‎editor/js/UI.js

+86-81
Original file line numberDiff line numberDiff line change
@@ -218,9 +218,11 @@ UI.Panel = function ( position ) {
218218

219219
UI.Element.call( this );
220220

221-
this.dom = document.createElement( 'div' );
222-
this.dom.style.position = position || 'relative';
223-
this.dom.style.marginBottom = '10px';
221+
var dom = document.createElement( 'div' );
222+
dom.style.position = position || 'relative';
223+
dom.style.marginBottom = '10px';
224+
225+
this.dom = dom;
224226

225227
// this.dom.addEventListener( 'mousedown', function ( event ) { event.preventDefault() }, false );
226228

@@ -248,8 +250,10 @@ UI.Text = function ( position ) {
248250

249251
UI.Element.call( this );
250252

251-
this.dom = document.createElement( 'span' );
252-
this.dom.style.position = position || 'relative';
253+
var dom = document.createElement( 'span' );
254+
dom.style.position = position || 'relative';
255+
256+
this.dom = dom;
253257

254258
return this;
255259

@@ -274,10 +278,12 @@ UI.Input = function ( position ) {
274278

275279
var scope = this;
276280

277-
this.dom = document.createElement( 'input' );
278-
this.dom.style.position = position || 'relative';
279-
this.dom.style.marginTop = '-2px';
280-
this.dom.style.marginLeft = '-2px';
281+
var dom = document.createElement( 'input' );
282+
dom.style.position = position || 'relative';
283+
dom.style.marginTop = '-2px';
284+
dom.style.marginLeft = '-2px';
285+
286+
this.dom = dom;
281287

282288
this.onChangeCallback = null;
283289

@@ -324,12 +330,14 @@ UI.Select = function ( position ) {
324330

325331
var scope = this;
326332

327-
this.dom = document.createElement( 'select' );
328-
this.dom.style.position = position || 'relative';
329-
this.dom.style.width = '64px';
330-
this.dom.style.height = '16px';
331-
this.dom.style.border = '0px';
332-
this.dom.style.padding = '0px';
333+
var dom = document.createElement( 'select' );
334+
dom.style.position = position || 'relative';
335+
dom.style.width = '64px';
336+
dom.style.height = '16px';
337+
dom.style.border = '0px';
338+
dom.style.padding = '0px';
339+
340+
this.dom = dom;
333341

334342
this.onChangeCallback = null;
335343

@@ -405,9 +413,11 @@ UI.Checkbox = function ( position ) {
405413

406414
var scope = this;
407415

408-
this.dom = document.createElement( 'input' );
409-
this.dom.type = 'checkbox';
410-
this.dom.style.position = position || 'relative';
416+
var dom = document.createElement( 'input' );
417+
dom.type = 'checkbox';
418+
dom.style.position = position || 'relative';
419+
420+
this.dom = dom;
411421

412422
this.onChangeCallback = null;
413423

@@ -454,14 +464,16 @@ UI.Color = function ( position ) {
454464

455465
var scope = this;
456466

457-
this.dom = document.createElement( 'input' );
458-
this.dom.type = 'color';
459-
this.dom.style.position = position || 'relative';
460-
this.dom.style.width = '64px';
461-
this.dom.style.height = '16px';
462-
this.dom.style.border = '0px';
463-
this.dom.style.padding = '0px';
464-
this.dom.style.backgroundColor = 'transparent';
467+
var dom = document.createElement( 'input' );
468+
dom.type = 'color';
469+
dom.style.position = position || 'relative';
470+
dom.style.width = '64px';
471+
dom.style.height = '16px';
472+
dom.style.border = '0px';
473+
dom.style.padding = '0px';
474+
dom.style.backgroundColor = 'transparent';
475+
476+
this.dom = dom;
465477

466478
this.onChangeCallback = null;
467479

@@ -508,23 +520,18 @@ UI.Number = function ( position ) {
508520

509521
var scope = this;
510522

511-
this.dom = document.createElement( 'span' );
512-
this.dom.style.position = position || 'relative';
513-
514-
var display = document.createElement( 'span' );
515-
display.style.color = '#0080f0';
516-
display.style.fontSize = '12px';
517-
display.style.cursor = 'col-resize';
518-
display.textContent = '0.00';
519-
this.dom.appendChild( display );
523+
var dom = document.createElement( 'input' );
524+
dom.style.position = position || 'relative';
525+
dom.style.color = '#0080f0';
526+
dom.style.fontSize = '12px';
527+
dom.style.cursor = 'col-resize';
528+
dom.style.backgroundColor = 'transparent';
529+
dom.style.borderColor = 'transparent';
530+
dom.style.marginTop = '-2px';
531+
dom.style.marginLegt = '-2px';
532+
dom.value = '0.00';
520533

521-
var input = document.createElement( 'input' );
522-
input.style.display = 'none';
523-
input.style.width = '100%';
524-
input.style.marginTop = '-2px';
525-
input.style.marginLeft = '-2px';
526-
input.style.fontSize = '12px';
527-
this.dom.appendChild( input );
534+
this.dom = dom;
528535

529536
this.min = - Infinity;
530537
this.max = Infinity;
@@ -540,7 +547,7 @@ UI.Number = function ( position ) {
540547

541548
distance = 0;
542549

543-
onMouseDownValue = parseFloat( display.textContent );
550+
onMouseDownValue = parseFloat( dom.value );
544551

545552
document.addEventListener( 'mousemove', onMouseMove, false );
546553
document.addEventListener( 'mouseup', onMouseUp, false );
@@ -556,7 +563,7 @@ UI.Number = function ( position ) {
556563

557564
var number = onMouseDownValue + ( distance / ( event.shiftKey ? 10 : 100 ) );
558565

559-
display.textContent = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 );
566+
dom.value = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 );
560567

561568
if ( scope.onChangeCallback ) scope.onChangeCallback();
562569

@@ -567,66 +574,58 @@ UI.Number = function ( position ) {
567574
document.removeEventListener( 'mousemove', onMouseMove, false );
568575
document.removeEventListener( 'mouseup', onMouseUp, false );
569576

570-
if ( Math.abs( distance ) < 1 ) {
571-
572-
display.style.display = 'none';
573-
574-
input.value = display.textContent;
577+
if ( Math.abs( distance ) < 2 ) {
575578

576-
input.addEventListener( 'change', onInputChange, false );
577-
input.addEventListener( 'blur', onInputBlur, false );
578-
input.addEventListener( 'keyup', onInputKeyUp, false );
579-
580-
input.style.display = '';
581-
582-
input.focus();
583-
input.select();
579+
dom.focus();
580+
dom.select();
584581

585582
}
586583

587584
};
588585

589-
var onInputChange = function ( event ) {
586+
var onChange = function ( event ) {
590587

591-
var number = parseFloat( input.value );
588+
var number = parseFloat( dom.value );
592589

593590
if ( isNaN( number ) === false ) {
594591

595-
display.textContent = number.toFixed( 2 );
592+
dom.value = number;
596593

597594
if ( scope.onChangeCallback ) scope.onChangeCallback();
598595

599596
}
600597

601598
};
602599

603-
var onInputBlur = function ( event ) {
600+
var onFocus = function ( event ) {
601+
602+
dom.style.backgroundColor = '';
603+
dom.style.borderColor = '';
604+
605+
};
604606

605-
display.style.display = '';
607+
var onBlur = function ( event ) {
606608

607-
input.removeEventListener( 'change', onInputChange );
608-
input.removeEventListener( 'blur', onInputBlur );
609-
input.removeEventListener( 'keyup', onInputKeyUp );
610-
input.style.display = 'none';
609+
dom.style.backgroundColor = 'transparent';
610+
dom.style.borderColor = 'transparent';
611611

612612
};
613613

614-
var onInputKeyUp = function ( event ) {
614+
var onKeyUp = function ( event ) {
615615

616616
if ( event.keyCode == 13 ) {
617617

618-
display.style.display = '';
619-
620-
input.removeEventListener( 'change', onInputChange );
621-
input.removeEventListener( 'blur', onInputBlur );
622-
input.removeEventListener( 'keyup', onInputKeyUp );
623-
input.style.display = 'none';
618+
onBlur();
624619

625620
}
626621

627622
};
628623

629-
display.addEventListener( 'mousedown', onMouseDown, false );
624+
dom.addEventListener( 'mousedown', onMouseDown, false );
625+
dom.addEventListener( 'change', onChange, false );
626+
dom.addEventListener( 'focus', onFocus, false );
627+
dom.addEventListener( 'blur', onBlur, false );
628+
dom.addEventListener( 'keyup', onKeyUp, false );
630629

631630
return this;
632631

@@ -636,13 +635,13 @@ UI.Number.prototype = Object.create( UI.Element.prototype );
636635

637636
UI.Number.prototype.getValue = function () {
638637

639-
return parseFloat( this.dom.children[ 0 ].textContent );
638+
return parseFloat( this.dom.value );
640639

641640
};
642641

643642
UI.Number.prototype.setValue = function ( value ) {
644643

645-
this.dom.children[ 0 ].textContent = value.toFixed( 2 );
644+
this.dom.value = value.toFixed( 2 );
646645

647646
return this;
648647

@@ -672,7 +671,9 @@ UI.Break = function () {
672671

673672
UI.Element.call( this );
674673

675-
this.dom = document.createElement( 'br' );
674+
var dom = document.createElement( 'br' );
675+
676+
this.dom = dom;
676677

677678
return this;
678679

@@ -687,8 +688,10 @@ UI.HorizontalRule = function ( position ) {
687688

688689
UI.Element.call( this );
689690

690-
this.dom = document.createElement( 'hr' );
691-
this.dom.style.position = position || 'relative';
691+
var dom = document.createElement( 'hr' );
692+
dom.style.position = position || 'relative';
693+
694+
this.dom = dom;
692695

693696
return this;
694697

@@ -705,8 +708,10 @@ UI.Button = function ( position ) {
705708

706709
var scope = this;
707710

708-
this.dom = document.createElement( 'button' );
709-
this.dom.style.position = position || 'relative';
711+
var dom = document.createElement( 'button' );
712+
dom.style.position = position || 'relative';
713+
714+
this.dom = dom;
710715

711716
this.onClickCallback = null;
712717

0 commit comments

Comments
 (0)