You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1285 lines
19 KiB
1285 lines
19 KiB
class UIElement {
|
|
|
|
constructor( dom ) {
|
|
|
|
this.dom = dom;
|
|
|
|
}
|
|
|
|
add() {
|
|
|
|
for ( let i = 0; i < arguments.length; i ++ ) {
|
|
|
|
const argument = arguments[ i ];
|
|
|
|
if ( argument instanceof UIElement ) {
|
|
|
|
this.dom.appendChild( argument.dom );
|
|
|
|
} else {
|
|
|
|
console.error( 'UIElement:', argument, 'is not an instance of UIElement.' );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
remove() {
|
|
|
|
for ( let i = 0; i < arguments.length; i ++ ) {
|
|
|
|
const argument = arguments[ i ];
|
|
|
|
if ( argument instanceof UIElement ) {
|
|
|
|
this.dom.removeChild( argument.dom );
|
|
|
|
} else {
|
|
|
|
console.error( 'UIElement:', argument, 'is not an instance of UIElement.' );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
clear() {
|
|
|
|
while ( this.dom.children.length ) {
|
|
|
|
this.dom.removeChild( this.dom.lastChild );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setId( id ) {
|
|
|
|
this.dom.id = id;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
getId() {
|
|
|
|
return this.dom.id;
|
|
|
|
}
|
|
|
|
setClass( name ) {
|
|
|
|
this.dom.className = name;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
addClass( name ) {
|
|
|
|
this.dom.classList.add( name );
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
removeClass( name ) {
|
|
|
|
this.dom.classList.remove( name );
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setStyle( style, array ) {
|
|
|
|
for ( let i = 0; i < array.length; i ++ ) {
|
|
|
|
this.dom.style[ style ] = array[ i ];
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setDisabled( value ) {
|
|
|
|
this.dom.disabled = value;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setTextContent( value ) {
|
|
|
|
this.dom.textContent = value;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setInnerHTML( value ) {
|
|
|
|
this.dom.innerHTML = value;
|
|
|
|
}
|
|
|
|
getIndexOfChild( element ) {
|
|
|
|
return Array.prototype.indexOf.call( this.dom.children, element.dom );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// properties
|
|
|
|
const properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height',
|
|
'display', 'verticalAlign', 'overflow', 'color', 'background', 'backgroundColor', 'opacity',
|
|
'border', 'borderLeft', 'borderTop', 'borderRight', 'borderBottom', 'borderColor',
|
|
'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom',
|
|
'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
|
|
'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];
|
|
|
|
properties.forEach( function ( property ) {
|
|
|
|
const method = 'set' + property.substr( 0, 1 ).toUpperCase() + property.substr( 1, property.length );
|
|
|
|
UIElement.prototype[ method ] = function () {
|
|
|
|
this.setStyle( property, arguments );
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
} );
|
|
|
|
// events
|
|
|
|
const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change', 'Input' ];
|
|
|
|
events.forEach( function ( event ) {
|
|
|
|
const method = 'on' + event;
|
|
|
|
UIElement.prototype[ method ] = function ( callback ) {
|
|
|
|
this.dom.addEventListener( event.toLowerCase(), callback.bind( this ) );
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
} );
|
|
|
|
class UISpan extends UIElement {
|
|
|
|
constructor() {
|
|
|
|
super( document.createElement( 'span' ) );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIDiv extends UIElement {
|
|
|
|
constructor() {
|
|
|
|
super( document.createElement( 'div' ) );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIRow extends UIDiv {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.dom.className = 'Row';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIPanel extends UIDiv {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.dom.className = 'Panel';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIText extends UISpan {
|
|
|
|
constructor( text ) {
|
|
|
|
super();
|
|
|
|
this.dom.className = 'Text';
|
|
this.dom.style.cursor = 'default';
|
|
this.dom.style.display = 'inline-block';
|
|
|
|
this.setValue( text );
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.dom.textContent;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
if ( value !== undefined ) {
|
|
|
|
this.dom.textContent = value;
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
class UIInput extends UIElement {
|
|
|
|
constructor( text ) {
|
|
|
|
super( document.createElement( 'input' ) );
|
|
|
|
this.dom.className = 'Input';
|
|
this.dom.style.padding = '2px';
|
|
this.dom.style.border = '1px solid transparent';
|
|
|
|
this.dom.setAttribute( 'autocomplete', 'off' );
|
|
|
|
this.dom.addEventListener( 'keydown', function ( event ) {
|
|
|
|
event.stopPropagation();
|
|
|
|
} );
|
|
|
|
this.setValue( text );
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.dom.value;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
this.dom.value = value;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UITextArea extends UIElement {
|
|
|
|
constructor() {
|
|
|
|
super( document.createElement( 'textarea' ) );
|
|
|
|
this.dom.className = 'TextArea';
|
|
this.dom.style.padding = '2px';
|
|
this.dom.spellcheck = false;
|
|
|
|
this.dom.setAttribute( 'autocomplete', 'off' );
|
|
|
|
this.dom.addEventListener( 'keydown', function ( event ) {
|
|
|
|
event.stopPropagation();
|
|
|
|
if ( event.keyCode === 9 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
const cursor = this.selectionStart;
|
|
|
|
this.value = this.value.substring( 0, cursor ) + '\t' + this.value.substring( cursor );
|
|
this.selectionStart = cursor + 1;
|
|
this.selectionEnd = this.selectionStart;
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.dom.value;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
this.dom.value = value;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UISelect extends UIElement {
|
|
|
|
constructor() {
|
|
|
|
super( document.createElement( 'select' ) );
|
|
|
|
this.dom.className = 'Select';
|
|
this.dom.style.padding = '2px';
|
|
|
|
this.dom.setAttribute( 'autocomplete', 'off' );
|
|
|
|
}
|
|
|
|
setMultiple( boolean ) {
|
|
|
|
this.dom.multiple = boolean;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setOptions( options ) {
|
|
|
|
const selected = this.dom.value;
|
|
|
|
while ( this.dom.children.length > 0 ) {
|
|
|
|
this.dom.removeChild( this.dom.firstChild );
|
|
|
|
}
|
|
|
|
for ( const key in options ) {
|
|
|
|
const option = document.createElement( 'option' );
|
|
option.value = key;
|
|
option.innerHTML = options[ key ];
|
|
this.dom.appendChild( option );
|
|
|
|
}
|
|
|
|
this.dom.value = selected;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.dom.value;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
value = String( value );
|
|
|
|
if ( this.dom.value !== value ) {
|
|
|
|
this.dom.value = value;
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UICheckbox extends UIElement {
|
|
|
|
constructor( boolean ) {
|
|
|
|
super( document.createElement( 'input' ) );
|
|
|
|
this.dom.className = 'Checkbox';
|
|
this.dom.type = 'checkbox';
|
|
|
|
this.setValue( boolean );
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.dom.checked;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
if ( value !== undefined ) {
|
|
|
|
this.dom.checked = value;
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
class UIColor extends UIElement {
|
|
|
|
constructor() {
|
|
|
|
super( document.createElement( 'input' ) );
|
|
|
|
this.dom.className = 'Color';
|
|
this.dom.style.width = '32px';
|
|
this.dom.style.height = '16px';
|
|
this.dom.style.border = '0px';
|
|
this.dom.style.padding = '2px';
|
|
this.dom.style.backgroundColor = 'transparent';
|
|
|
|
this.dom.setAttribute( 'autocomplete', 'off' );
|
|
|
|
try {
|
|
|
|
this.dom.type = 'color';
|
|
this.dom.value = '#ffffff';
|
|
|
|
} catch ( exception ) {}
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.dom.value;
|
|
|
|
}
|
|
|
|
getHexValue() {
|
|
|
|
return parseInt( this.dom.value.substr( 1 ), 16 );
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
this.dom.value = value;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setHexValue( hex ) {
|
|
|
|
this.dom.value = '#' + ( '000000' + hex.toString( 16 ) ).slice( - 6 );
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UINumber extends UIElement {
|
|
|
|
constructor( number ) {
|
|
|
|
super( document.createElement( 'input' ) );
|
|
|
|
this.dom.style.cursor = 'ns-resize';
|
|
this.dom.className = 'Number';
|
|
this.dom.value = '0.00';
|
|
|
|
this.dom.setAttribute( 'autocomplete', 'off' );
|
|
|
|
this.value = 0;
|
|
|
|
this.min = - Infinity;
|
|
this.max = Infinity;
|
|
|
|
this.precision = 2;
|
|
this.step = 1;
|
|
this.unit = '';
|
|
this.nudge = 0.01;
|
|
|
|
this.setValue( number );
|
|
|
|
const scope = this;
|
|
|
|
const changeEvent = document.createEvent( 'HTMLEvents' );
|
|
changeEvent.initEvent( 'change', true, true );
|
|
|
|
let distance = 0;
|
|
let onMouseDownValue = 0;
|
|
|
|
const pointer = { x: 0, y: 0 };
|
|
const prevPointer = { x: 0, y: 0 };
|
|
|
|
function onMouseDown( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
distance = 0;
|
|
|
|
onMouseDownValue = scope.value;
|
|
|
|
prevPointer.x = event.clientX;
|
|
prevPointer.y = event.clientY;
|
|
|
|
document.addEventListener( 'mousemove', onMouseMove );
|
|
document.addEventListener( 'mouseup', onMouseUp );
|
|
|
|
}
|
|
|
|
function onMouseMove( event ) {
|
|
|
|
const currentValue = scope.value;
|
|
|
|
pointer.x = event.clientX;
|
|
pointer.y = event.clientY;
|
|
|
|
distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
|
|
|
|
let value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
|
|
value = Math.min( scope.max, Math.max( scope.min, value ) );
|
|
|
|
if ( currentValue !== value ) {
|
|
|
|
scope.setValue( value );
|
|
scope.dom.dispatchEvent( changeEvent );
|
|
|
|
}
|
|
|
|
prevPointer.x = event.clientX;
|
|
prevPointer.y = event.clientY;
|
|
|
|
}
|
|
|
|
function onMouseUp() {
|
|
|
|
document.removeEventListener( 'mousemove', onMouseMove );
|
|
document.removeEventListener( 'mouseup', onMouseUp );
|
|
|
|
if ( Math.abs( distance ) < 2 ) {
|
|
|
|
scope.dom.focus();
|
|
scope.dom.select();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onTouchStart( event ) {
|
|
|
|
if ( event.touches.length === 1 ) {
|
|
|
|
distance = 0;
|
|
|
|
onMouseDownValue = scope.value;
|
|
|
|
prevPointer.x = event.touches[ 0 ].pageX;
|
|
prevPointer.y = event.touches[ 0 ].pageY;
|
|
|
|
document.addEventListener( 'touchmove', onTouchMove );
|
|
document.addEventListener( 'touchend', onTouchEnd );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onTouchMove( event ) {
|
|
|
|
const currentValue = scope.value;
|
|
|
|
pointer.x = event.touches[ 0 ].pageX;
|
|
pointer.y = event.touches[ 0 ].pageY;
|
|
|
|
distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
|
|
|
|
let value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
|
|
value = Math.min( scope.max, Math.max( scope.min, value ) );
|
|
|
|
if ( currentValue !== value ) {
|
|
|
|
scope.setValue( value );
|
|
scope.dom.dispatchEvent( changeEvent );
|
|
|
|
}
|
|
|
|
prevPointer.x = event.touches[ 0 ].pageX;
|
|
prevPointer.y = event.touches[ 0 ].pageY;
|
|
|
|
}
|
|
|
|
function onTouchEnd( event ) {
|
|
|
|
if ( event.touches.length === 0 ) {
|
|
|
|
document.removeEventListener( 'touchmove', onTouchMove );
|
|
document.removeEventListener( 'touchend', onTouchEnd );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onChange() {
|
|
|
|
scope.setValue( scope.dom.value );
|
|
|
|
}
|
|
|
|
function onFocus() {
|
|
|
|
scope.dom.style.backgroundColor = '';
|
|
scope.dom.style.cursor = '';
|
|
|
|
}
|
|
|
|
function onBlur() {
|
|
|
|
scope.dom.style.backgroundColor = 'transparent';
|
|
scope.dom.style.cursor = 'ns-resize';
|
|
|
|
}
|
|
|
|
function onKeyDown( event ) {
|
|
|
|
event.stopPropagation();
|
|
|
|
switch ( event.keyCode ) {
|
|
|
|
case 13: // enter
|
|
scope.dom.blur();
|
|
break;
|
|
|
|
case 38: // up
|
|
event.preventDefault();
|
|
scope.setValue( scope.getValue() + scope.nudge );
|
|
scope.dom.dispatchEvent( changeEvent );
|
|
break;
|
|
|
|
case 40: // down
|
|
event.preventDefault();
|
|
scope.setValue( scope.getValue() - scope.nudge );
|
|
scope.dom.dispatchEvent( changeEvent );
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
onBlur();
|
|
|
|
this.dom.addEventListener( 'keydown', onKeyDown );
|
|
this.dom.addEventListener( 'mousedown', onMouseDown );
|
|
this.dom.addEventListener( 'touchstart', onTouchStart );
|
|
this.dom.addEventListener( 'change', onChange );
|
|
this.dom.addEventListener( 'focus', onFocus );
|
|
this.dom.addEventListener( 'blur', onBlur );
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.value;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
if ( value !== undefined ) {
|
|
|
|
value = parseFloat( value );
|
|
|
|
if ( value < this.min ) value = this.min;
|
|
if ( value > this.max ) value = this.max;
|
|
|
|
this.value = value;
|
|
this.dom.value = value.toFixed( this.precision );
|
|
|
|
if ( this.unit !== '' ) this.dom.value += ' ' + this.unit;
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setPrecision( precision ) {
|
|
|
|
this.precision = precision;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setStep( step ) {
|
|
|
|
this.step = step;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setNudge( nudge ) {
|
|
|
|
this.nudge = nudge;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setRange( min, max ) {
|
|
|
|
this.min = min;
|
|
this.max = max;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setUnit( unit ) {
|
|
|
|
this.unit = unit;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIInteger extends UIElement {
|
|
|
|
constructor( number ) {
|
|
|
|
super( document.createElement( 'input' ) );
|
|
|
|
this.dom.style.cursor = 'ns-resize';
|
|
this.dom.className = 'Number';
|
|
this.dom.value = '0';
|
|
|
|
this.dom.setAttribute( 'autocomplete', 'off' );
|
|
|
|
this.value = 0;
|
|
|
|
this.min = - Infinity;
|
|
this.max = Infinity;
|
|
|
|
this.step = 1;
|
|
this.nudge = 1;
|
|
|
|
this.setValue( number );
|
|
|
|
const scope = this;
|
|
|
|
const changeEvent = document.createEvent( 'HTMLEvents' );
|
|
changeEvent.initEvent( 'change', true, true );
|
|
|
|
let distance = 0;
|
|
let onMouseDownValue = 0;
|
|
|
|
const pointer = { x: 0, y: 0 };
|
|
const prevPointer = { x: 0, y: 0 };
|
|
|
|
function onMouseDown( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
distance = 0;
|
|
|
|
onMouseDownValue = scope.value;
|
|
|
|
prevPointer.x = event.clientX;
|
|
prevPointer.y = event.clientY;
|
|
|
|
document.addEventListener( 'mousemove', onMouseMove );
|
|
document.addEventListener( 'mouseup', onMouseUp );
|
|
|
|
}
|
|
|
|
function onMouseMove( event ) {
|
|
|
|
const currentValue = scope.value;
|
|
|
|
pointer.x = event.clientX;
|
|
pointer.y = event.clientY;
|
|
|
|
distance += ( pointer.x - prevPointer.x ) - ( pointer.y - prevPointer.y );
|
|
|
|
let value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
|
|
value = Math.min( scope.max, Math.max( scope.min, value ) ) | 0;
|
|
|
|
if ( currentValue !== value ) {
|
|
|
|
scope.setValue( value );
|
|
scope.dom.dispatchEvent( changeEvent );
|
|
|
|
}
|
|
|
|
prevPointer.x = event.clientX;
|
|
prevPointer.y = event.clientY;
|
|
|
|
}
|
|
|
|
function onMouseUp() {
|
|
|
|
document.removeEventListener( 'mousemove', onMouseMove );
|
|
document.removeEventListener( 'mouseup', onMouseUp );
|
|
|
|
if ( Math.abs( distance ) < 2 ) {
|
|
|
|
scope.dom.focus();
|
|
scope.dom.select();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onChange() {
|
|
|
|
scope.setValue( scope.dom.value );
|
|
|
|
}
|
|
|
|
function onFocus() {
|
|
|
|
scope.dom.style.backgroundColor = '';
|
|
scope.dom.style.cursor = '';
|
|
|
|
}
|
|
|
|
function onBlur() {
|
|
|
|
scope.dom.style.backgroundColor = 'transparent';
|
|
scope.dom.style.cursor = 'ns-resize';
|
|
|
|
}
|
|
|
|
function onKeyDown( event ) {
|
|
|
|
event.stopPropagation();
|
|
|
|
switch ( event.keyCode ) {
|
|
|
|
case 13: // enter
|
|
scope.dom.blur();
|
|
break;
|
|
|
|
case 38: // up
|
|
event.preventDefault();
|
|
scope.setValue( scope.getValue() + scope.nudge );
|
|
scope.dom.dispatchEvent( changeEvent );
|
|
break;
|
|
|
|
case 40: // down
|
|
event.preventDefault();
|
|
scope.setValue( scope.getValue() - scope.nudge );
|
|
scope.dom.dispatchEvent( changeEvent );
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
onBlur();
|
|
|
|
this.dom.addEventListener( 'keydown', onKeyDown );
|
|
this.dom.addEventListener( 'mousedown', onMouseDown );
|
|
this.dom.addEventListener( 'change', onChange );
|
|
this.dom.addEventListener( 'focus', onFocus );
|
|
this.dom.addEventListener( 'blur', onBlur );
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.value;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
if ( value !== undefined ) {
|
|
|
|
value = parseInt( value );
|
|
|
|
this.value = value;
|
|
this.dom.value = value;
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setStep( step ) {
|
|
|
|
this.step = parseInt( step );
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setNudge( nudge ) {
|
|
|
|
this.nudge = nudge;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
setRange( min, max ) {
|
|
|
|
this.min = min;
|
|
this.max = max;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIBreak extends UIElement {
|
|
|
|
constructor() {
|
|
|
|
super( document.createElement( 'br' ) );
|
|
|
|
this.dom.className = 'Break';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIHorizontalRule extends UIElement {
|
|
|
|
constructor() {
|
|
|
|
super( document.createElement( 'hr' ) );
|
|
|
|
this.dom.className = 'HorizontalRule';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIButton extends UIElement {
|
|
|
|
constructor( value ) {
|
|
|
|
super( document.createElement( 'button' ) );
|
|
|
|
this.dom.className = 'Button';
|
|
this.dom.textContent = value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIProgress extends UIElement {
|
|
|
|
constructor( value ) {
|
|
|
|
super( document.createElement( 'progress' ) );
|
|
|
|
this.dom.value = value;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
this.dom.value = value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UITabbedPanel extends UIDiv {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.dom.className = 'TabbedPanel';
|
|
|
|
this.tabs = [];
|
|
this.panels = [];
|
|
|
|
this.tabsDiv = new UIDiv();
|
|
this.tabsDiv.setClass( 'Tabs' );
|
|
|
|
this.panelsDiv = new UIDiv();
|
|
this.panelsDiv.setClass( 'Panels' );
|
|
|
|
this.add( this.tabsDiv );
|
|
this.add( this.panelsDiv );
|
|
|
|
this.selected = '';
|
|
|
|
}
|
|
|
|
select( id ) {
|
|
|
|
let tab;
|
|
let panel;
|
|
const scope = this;
|
|
|
|
// Deselect current selection
|
|
if ( this.selected && this.selected.length ) {
|
|
|
|
tab = this.tabs.find( function ( item ) {
|
|
|
|
return item.dom.id === scope.selected;
|
|
|
|
} );
|
|
panel = this.panels.find( function ( item ) {
|
|
|
|
return item.dom.id === scope.selected;
|
|
|
|
} );
|
|
|
|
if ( tab ) {
|
|
|
|
tab.removeClass( 'selected' );
|
|
|
|
}
|
|
|
|
if ( panel ) {
|
|
|
|
panel.setDisplay( 'none' );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
tab = this.tabs.find( function ( item ) {
|
|
|
|
return item.dom.id === id;
|
|
|
|
} );
|
|
panel = this.panels.find( function ( item ) {
|
|
|
|
return item.dom.id === id;
|
|
|
|
} );
|
|
|
|
if ( tab ) {
|
|
|
|
tab.addClass( 'selected' );
|
|
|
|
}
|
|
|
|
if ( panel ) {
|
|
|
|
panel.setDisplay( '' );
|
|
|
|
}
|
|
|
|
this.selected = id;
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
addTab( id, label, items ) {
|
|
|
|
const tab = new UITab( label, this );
|
|
tab.setId( id );
|
|
this.tabs.push( tab );
|
|
this.tabsDiv.add( tab );
|
|
|
|
const panel = new UIDiv();
|
|
panel.setId( id );
|
|
panel.add( items );
|
|
panel.setDisplay( 'none' );
|
|
this.panels.push( panel );
|
|
this.panelsDiv.add( panel );
|
|
|
|
this.select( id );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UITab extends UIText {
|
|
|
|
constructor( text, parent ) {
|
|
|
|
super( text );
|
|
|
|
this.dom.className = 'Tab';
|
|
|
|
this.parent = parent;
|
|
|
|
const scope = this;
|
|
|
|
this.dom.addEventListener( 'click', function () {
|
|
|
|
scope.parent.select( scope.dom.id );
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class UIListbox extends UIDiv {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.dom.className = 'Listbox';
|
|
this.dom.tabIndex = 0;
|
|
|
|
this.items = [];
|
|
this.listitems = [];
|
|
this.selectedIndex = 0;
|
|
this.selectedValue = null;
|
|
|
|
}
|
|
|
|
setItems( items ) {
|
|
|
|
if ( Array.isArray( items ) ) {
|
|
|
|
this.items = items;
|
|
|
|
}
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
render( ) {
|
|
|
|
while ( this.listitems.length ) {
|
|
|
|
const item = this.listitems[ 0 ];
|
|
|
|
item.dom.remove();
|
|
|
|
this.listitems.splice( 0, 1 );
|
|
|
|
}
|
|
|
|
for ( let i = 0; i < this.items.length; i ++ ) {
|
|
|
|
const item = this.items[ i ];
|
|
|
|
const listitem = new ListboxItem( this );
|
|
listitem.setId( item.id || `Listbox-${i}` );
|
|
listitem.setTextContent( item.name || item.type );
|
|
this.add( listitem );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
add() {
|
|
|
|
const items = Array.from( arguments );
|
|
|
|
this.listitems = this.listitems.concat( items );
|
|
|
|
UIElement.prototype.add.apply( this, items );
|
|
|
|
}
|
|
|
|
selectIndex( index ) {
|
|
|
|
if ( index >= 0 && index < this.items.length ) {
|
|
|
|
this.setValue( this.listitems[ index ].getId() );
|
|
|
|
}
|
|
|
|
this.selectedIndex = index;
|
|
|
|
}
|
|
|
|
getValue() {
|
|
|
|
return this.selectedValue;
|
|
|
|
}
|
|
|
|
setValue( value ) {
|
|
|
|
for ( let i = 0; i < this.listitems.length; i ++ ) {
|
|
|
|
const element = this.listitems[ i ];
|
|
|
|
if ( element.getId() === value ) {
|
|
|
|
element.addClass( 'active' );
|
|
|
|
} else {
|
|
|
|
element.removeClass( 'active' );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.selectedValue = value;
|
|
|
|
const changeEvent = document.createEvent( 'HTMLEvents' );
|
|
changeEvent.initEvent( 'change', true, true );
|
|
this.dom.dispatchEvent( changeEvent );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
class ListboxItem extends UIDiv {
|
|
|
|
constructor( parent ) {
|
|
|
|
super();
|
|
|
|
this.dom.className = 'ListboxItem';
|
|
|
|
this.parent = parent;
|
|
|
|
const scope = this;
|
|
|
|
function onClick() {
|
|
|
|
if ( scope.parent ) {
|
|
|
|
scope.parent.setValue( scope.getId( ) );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.dom.addEventListener( 'click', onClick );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export { UIElement, UISpan, UIDiv, UIRow, UIPanel, UIText, UIInput, UITextArea, UISelect, UICheckbox, UIColor, UINumber, UIInteger, UIBreak, UIHorizontalRule, UIButton, UIProgress, UITabbedPanel, UIListbox, ListboxItem };
|
|
|