12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346 |
- 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;
- }
- toggleClass( name, toggle ) {
- this.dom.classList.toggle( name, toggle );
- return this;
- }
- setStyle( style, array ) {
- for ( let i = 0; i < array.length; i ++ ) {
- this.dom.style[ style ] = array[ i ];
- }
- return this;
- }
- setHidden( isHidden ) {
- this.dom.hidden = isHidden;
- return this;
- }
- isHidden() {
- return this.dom.hidden;
- }
- 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.substring( 0, 1 ).toUpperCase() + property.substring( 1 );
- 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.code === 'Tab' ) {
- 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' );
- this.dom.addEventListener( 'pointerdown', function ( event ) {
- event.stopPropagation();
- } );
- }
- 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.dom.addEventListener( 'pointerdown', function ( event ) {
- // Workaround for TransformControls blocking events in Viewport.Controls checkboxes
- event.stopPropagation();
- } );
- 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.substring( 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 = new Event( 'change', { bubbles: true, cancelable: true } );
- let distance = 0;
- let onMouseDownValue = 0;
- const pointer = { x: 0, y: 0 };
- const prevPointer = { x: 0, y: 0 };
- function onMouseDown( event ) {
- if ( document.activeElement === scope.dom ) return;
- 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, { passive: false } );
- document.addEventListener( 'touchend', onTouchEnd );
- }
- }
- function onTouchMove( event ) {
- event.preventDefault();
- 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.code ) {
- case 'Enter':
- scope.dom.blur();
- break;
- case 'ArrowUp':
- event.preventDefault();
- scope.setValue( scope.getValue() + scope.nudge );
- scope.dom.dispatchEvent( changeEvent );
- break;
- case 'ArrowDown':
- 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, { passive: false } );
- 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;
- this.setValue( this.value );
- 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 = new Event( 'change', { bubbles: true, cancelable: true } );
- let distance = 0;
- let onMouseDownValue = 0;
- const pointer = { x: 0, y: 0 };
- const prevPointer = { x: 0, y: 0 };
- function onMouseDown( event ) {
- if ( document.activeElement === scope.dom ) return;
- 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.code ) {
- case 'Enter':
- scope.dom.blur();
- break;
- case 'ArrowUp':
- event.preventDefault();
- scope.setValue( scope.getValue() + scope.nudge );
- scope.dom.dispatchEvent( changeEvent );
- break;
- case 'ArrowDown':
- 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;
- // Scrolls to tab
- if ( tab ) {
- const tabOffsetRight = tab.dom.offsetLeft + tab.dom.offsetWidth;
- const containerWidth = this.tabsDiv.dom.getBoundingClientRect().width;
- if ( tabOffsetRight > containerWidth ) {
- this.tabsDiv.dom.scrollTo( { left: tabOffsetRight - containerWidth, behavior: 'smooth' } );
- }
- if ( tab.dom.offsetLeft < this.tabsDiv.dom.scrollLeft ) {
- this.tabsDiv.dom.scrollTo( { left: 0, behavior: 'smooth' } );
- }
- }
- 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 = new Event( 'change', { bubbles: true, cancelable: 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 };
|