|
@@ -1025,8 +1025,8 @@ UI.TabbedPanel = function ( ) {
|
|
|
|
|
|
UI.Element.call( this );
|
|
UI.Element.call( this );
|
|
|
|
|
|
- var dom = document.createElement('div');
|
|
|
|
-
|
|
|
|
|
|
+ var dom = document.createElement( 'div' );
|
|
|
|
+
|
|
this.dom = dom;
|
|
this.dom = dom;
|
|
|
|
|
|
this.setClass( 'TabbedPanel' );
|
|
this.setClass( 'TabbedPanel' );
|
|
@@ -1047,7 +1047,7 @@ UI.TabbedPanel = function ( ) {
|
|
|
|
|
|
return this;
|
|
return this;
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.TabbedPanel.prototype = Object.create( UI.Element.prototype );
|
|
UI.TabbedPanel.prototype = Object.create( UI.Element.prototype );
|
|
UI.TabbedPanel.prototype.constructor = UI.TabbedPanel;
|
|
UI.TabbedPanel.prototype.constructor = UI.TabbedPanel;
|
|
@@ -1057,9 +1057,10 @@ UI.TabbedPanel.prototype.select = function ( id ) {
|
|
var tab;
|
|
var tab;
|
|
var panel;
|
|
var panel;
|
|
var scope = this;
|
|
var scope = this;
|
|
-
|
|
|
|
|
|
+
|
|
// Deselect current selection
|
|
// Deselect current selection
|
|
if ( this.selected && this.selected.length ) {
|
|
if ( this.selected && this.selected.length ) {
|
|
|
|
+
|
|
tab = this.tabs.find( function ( item ) { return item.dom.id === scope.selected } );
|
|
tab = this.tabs.find( function ( item ) { return item.dom.id === scope.selected } );
|
|
panel = this.panels.find( function ( item ) { return item.dom.id === scope.selected } );
|
|
panel = this.panels.find( function ( item ) { return item.dom.id === scope.selected } );
|
|
|
|
|
|
@@ -1069,7 +1070,7 @@ UI.TabbedPanel.prototype.select = function ( id ) {
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- if( panel ) {
|
|
|
|
|
|
+ if ( panel ) {
|
|
|
|
|
|
panel.setDisplay( 'none' );
|
|
panel.setDisplay( 'none' );
|
|
|
|
|
|
@@ -1079,14 +1080,14 @@ UI.TabbedPanel.prototype.select = function ( id ) {
|
|
|
|
|
|
tab = this.tabs.find( function ( item ) { return item.dom.id === id } );
|
|
tab = this.tabs.find( function ( item ) { return item.dom.id === id } );
|
|
panel = this.panels.find( function ( item ) { return item.dom.id === id } );
|
|
panel = this.panels.find( function ( item ) { return item.dom.id === id } );
|
|
-
|
|
|
|
|
|
+
|
|
if ( tab ) {
|
|
if ( tab ) {
|
|
|
|
|
|
tab.addClass( 'selected' );
|
|
tab.addClass( 'selected' );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- if( panel ) {
|
|
|
|
|
|
+ if ( panel ) {
|
|
|
|
|
|
panel.setDisplay( '' );
|
|
panel.setDisplay( '' );
|
|
|
|
|
|
@@ -1096,7 +1097,7 @@ UI.TabbedPanel.prototype.select = function ( id ) {
|
|
|
|
|
|
return this;
|
|
return this;
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.TabbedPanel.prototype.addTab = function ( id, label, items ) {
|
|
UI.TabbedPanel.prototype.addTab = function ( id, label, items ) {
|
|
|
|
|
|
@@ -1114,7 +1115,7 @@ UI.TabbedPanel.prototype.addTab = function ( id, label, items ) {
|
|
|
|
|
|
this.select( id );
|
|
this.select( id );
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.TabbedPanel.Tab = function ( text, parent ) {
|
|
UI.TabbedPanel.Tab = function ( text, parent ) {
|
|
|
|
|
|
@@ -1124,15 +1125,16 @@ UI.TabbedPanel.Tab = function ( text, parent ) {
|
|
this.setClass( 'Tab' );
|
|
this.setClass( 'Tab' );
|
|
|
|
|
|
var scope = this;
|
|
var scope = this;
|
|
|
|
+
|
|
this.dom.addEventListener( 'click', function ( event ) {
|
|
this.dom.addEventListener( 'click', function ( event ) {
|
|
|
|
|
|
scope.parent.select( scope.dom.id );
|
|
scope.parent.select( scope.dom.id );
|
|
|
|
|
|
- } )
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
return this;
|
|
return this;
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.TabbedPanel.Tab.prototype = Object.create( UI.Text.prototype );
|
|
UI.TabbedPanel.Tab.prototype = Object.create( UI.Text.prototype );
|
|
UI.TabbedPanel.Tab.prototype.constructor = UI.TabbedPanel.Tab;
|
|
UI.TabbedPanel.Tab.prototype.constructor = UI.TabbedPanel.Tab;
|
|
@@ -1154,7 +1156,7 @@ UI.Listbox = function ( ) {
|
|
|
|
|
|
return this;
|
|
return this;
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.Listbox.prototype = Object.create( UI.Element.prototype );
|
|
UI.Listbox.prototype = Object.create( UI.Element.prototype );
|
|
UI.Listbox.prototype.constructor = UI.ListboxItem;
|
|
UI.Listbox.prototype.constructor = UI.ListboxItem;
|
|
@@ -1169,23 +1171,23 @@ UI.Listbox.prototype.setItems = function ( items ) {
|
|
|
|
|
|
this.render( );
|
|
this.render( );
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.Listbox.prototype.render = function ( ) {
|
|
UI.Listbox.prototype.render = function ( ) {
|
|
|
|
|
|
- while( this.listitems.length ) {
|
|
|
|
|
|
+ while ( this.listitems.length ) {
|
|
|
|
|
|
- var item = this.listitems[0];
|
|
|
|
|
|
+ var item = this.listitems[ 0 ];
|
|
|
|
|
|
item.dom.remove();
|
|
item.dom.remove();
|
|
|
|
|
|
- this.listitems.splice(0, 1);
|
|
|
|
|
|
+ this.listitems.splice( 0, 1 );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
for ( var i = 0; i < this.items.length; i ++ ) {
|
|
for ( var i = 0; i < this.items.length; i ++ ) {
|
|
|
|
|
|
- var item = this.items[i];
|
|
|
|
|
|
+ var item = this.items[ i ];
|
|
|
|
|
|
var listitem = new UI.Listbox.ListboxItem( this );
|
|
var listitem = new UI.Listbox.ListboxItem( this );
|
|
listitem.setId( item.id || `Listbox-${i}` );
|
|
listitem.setId( item.id || `Listbox-${i}` );
|
|
@@ -1194,10 +1196,10 @@ UI.Listbox.prototype.render = function ( ) {
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
// Assuming user passes valid list items
|
|
// Assuming user passes valid list items
|
|
-UI.Listbox.prototype.add = function ( ) {
|
|
|
|
|
|
+UI.Listbox.prototype.add = function () {
|
|
|
|
|
|
var items = Array.from( arguments );
|
|
var items = Array.from( arguments );
|
|
|
|
|
|
@@ -1205,25 +1207,25 @@ UI.Listbox.prototype.add = function ( ) {
|
|
|
|
|
|
UI.Element.prototype.add.apply( this, items );
|
|
UI.Element.prototype.add.apply( this, items );
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.Listbox.prototype.selectIndex = function ( index ) {
|
|
UI.Listbox.prototype.selectIndex = function ( index ) {
|
|
|
|
|
|
if ( index >= 0 && index < this.items.length ) {
|
|
if ( index >= 0 && index < this.items.length ) {
|
|
|
|
|
|
- this.setValue( this.listitems[ index ].getId( ) );
|
|
|
|
|
|
+ this.setValue( this.listitems[ index ].getId() );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
this.selectIndex = index;
|
|
this.selectIndex = index;
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.Listbox.prototype.getValue = function ( index ) {
|
|
UI.Listbox.prototype.getValue = function ( index ) {
|
|
|
|
|
|
return this.selectedValue;
|
|
return this.selectedValue;
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.Listbox.prototype.setValue = function ( value ) {
|
|
UI.Listbox.prototype.setValue = function ( value ) {
|
|
|
|
|
|
@@ -1236,7 +1238,7 @@ UI.Listbox.prototype.setValue = function ( value ) {
|
|
element.addClass( 'active' );
|
|
element.addClass( 'active' );
|
|
|
|
|
|
} else {
|
|
} else {
|
|
-
|
|
|
|
|
|
+
|
|
element.removeClass( 'active' );
|
|
element.removeClass( 'active' );
|
|
|
|
|
|
}
|
|
}
|
|
@@ -1249,7 +1251,7 @@ UI.Listbox.prototype.setValue = function ( value ) {
|
|
changeEvent.initEvent( 'change', true, true );
|
|
changeEvent.initEvent( 'change', true, true );
|
|
this.dom.dispatchEvent( changeEvent );
|
|
this.dom.dispatchEvent( changeEvent );
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
// Listbox Item
|
|
// Listbox Item
|
|
UI.Listbox.ListboxItem = function ( parent ) {
|
|
UI.Listbox.ListboxItem = function ( parent ) {
|
|
@@ -1264,10 +1266,12 @@ UI.Listbox.ListboxItem = function ( parent ) {
|
|
|
|
|
|
var scope = this;
|
|
var scope = this;
|
|
|
|
|
|
- function onClick ( ) {
|
|
|
|
-
|
|
|
|
- if( scope.parent ) {
|
|
|
|
|
|
+ function onClick() {
|
|
|
|
+
|
|
|
|
+ if ( scope.parent ) {
|
|
|
|
+
|
|
scope.parent.setValue( scope.getId( ) );
|
|
scope.parent.setValue( scope.getId( ) );
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
@@ -1276,7 +1280,7 @@ UI.Listbox.ListboxItem = function ( parent ) {
|
|
|
|
|
|
return this;
|
|
return this;
|
|
|
|
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
UI.Listbox.ListboxItem.prototype = Object.create( UI.Element.prototype );
|
|
UI.Listbox.ListboxItem.prototype = Object.create( UI.Element.prototype );
|
|
UI.Listbox.ListboxItem.prototype.constructor = UI.Listbox.ListboxItem;
|
|
UI.Listbox.ListboxItem.prototype.constructor = UI.Listbox.ListboxItem;
|