more options for virtualKeyboard

gui/src/controls/virtualKeyboard.ts

@@ -19,23 +19,26 @@ module BABYLON.GUI {
         public defaultButtonWidth = "40px";
         public defaultButtonHeight = "40px";
 
-        public defaultButtonPaddingLeft= "2px";
+        public defaultButtonPaddingLeft = "2px";
         public defaultButtonPaddingRight = "2px";
         public defaultButtonPaddingTop = "2px";
-        public defaultButtonPaddingBottom = "2px";    
-        
+        public defaultButtonPaddingBottom = "2px";
+
         public defaultButtonColor = "#DDD";
-        public defaultButtonBackground = "#070707";    
-        
+        public defaultButtonBackground = "#070707";
+
+        public shiftButtonColor = "#7799FF";
+        public selectedShiftThickness = 1;
+
         public shiftState = 0;
-        
+
         protected _getTypeName(): string {
             return "VirtualKeyboard";
         }
 
         private _createKey(key: string, propertySet: Nullable<KeyPropertySet>) {
             var button = Button.CreateSimpleButton(key, key);
-           
+
             button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
             button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
             button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor;
@@ -44,7 +47,7 @@ module BABYLON.GUI {
             button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight;
             button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop;
             button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom;
-        
+
             button.thickness = 0;
             button.isFocusInvisible = true;
 
@@ -52,11 +55,11 @@ module BABYLON.GUI {
             button.shadowBlur = this.shadowBlur;
             button.shadowOffsetX = this.shadowOffsetX;
             button.shadowOffsetY = this.shadowOffsetY;
-        
+
             button.onPointerUpObservable.add(() => {
                 this.onKeyPressObservable.notifyObservers(key);
             });
-    
+
             return button;
         }
 
@@ -64,8 +67,8 @@ module BABYLON.GUI {
             let panel = new StackPanel();
             panel.isVertical = false;
             panel.isFocusInvisible = true;
-        
-            for(var i = 0; i < keys.length; i++) {
+
+            for (var i = 0; i < keys.length; i++) {
                 let properties = null;
 
                 if (propertySets && propertySets.length === keys.length) {
@@ -74,25 +77,36 @@ module BABYLON.GUI {
 
                 panel.addControl(this._createKey(keys[i], properties));
             }
-        
+
             this.addControl(panel);
         }
-        
-        public applyShiftState(shiftState : number): void {
-            if(!this.children) return;
-            for(var i = 0; i < this.children.length; i++) {
+
+        public applyShiftState(shiftState: number): void {
+            if (!this.children) {
+                return;
+            }
+
+            for (var i = 0; i < this.children.length; i++) {
                 let row = this.children[i];
-                if(!row) continue;
+                if (!row || !(<Container>row).children) {
+                    continue;
+                }
+
+                let rowContainer = <Container>row;
+                for (var j = 0; j < rowContainer.children.length; j++) {
+                    let button = rowContainer.children[j] as Button;
 
-                for(var j = 0; j < row.children.length; j++){
-                    let button = row.children[j];
-                    if(!button || !button.children[0]) continue;
-                    let button_tblock = button.children[0];
+                    if (!button || !button.children[0]) {
+                        continue;
+                    }
+
+                    let button_tblock = button.children[0] as TextBlock;
 
-                    if(button_tblock.text === "\u21E7"){
-                        button.color = (shiftState ? "#7799FF" : this.defaultButtonColor);
-                        button.thickness = (shiftState > 1 ? 1 : 0);
+                    if (button_tblock.text === "\u21E7") {
+                        button.color = (shiftState ? this.shiftButtonColor : this.defaultButtonColor);
+                        button.thickness = (shiftState > 1 ? this.selectedShiftThickness : 0);
                     }
+
                     button_tblock.text = (shiftState > 0 ? button_tblock.text.toUpperCase() : button_tblock.text.toLowerCase());
                 }
             }
@@ -110,15 +124,15 @@ module BABYLON.GUI {
         public connect(input: InputText): void {
             this.isVisible = false;
             this._connectedInputText = input;
-            
+
             // Events hooking
             this._onFocusObserver = input.onFocusObservable.add(() => {
                 this.isVisible = true;
             });
-    
+
             this._onBlurObserver = input.onBlurObservable.add(() => {
                 this.isVisible = false;
-            });		
+            });
 
             this._onKeyPressObserver = this.onKeyPressObservable.add((key) => {
                 if (!this._connectedInputText) {
@@ -127,7 +141,7 @@ module BABYLON.GUI {
                 switch (key) {
                     case "\u21E7":
                         this.shiftState++;
-                        if(this.shiftState > 2){
+                        if (this.shiftState > 2) {
                             this.shiftState = 0;
                         }
                         this.applyShiftState(this.shiftState);
@@ -137,11 +151,11 @@ module BABYLON.GUI {
                         return;
                     case "\u21B5":
                         this._connectedInputText.processKey(13);
-                        return;                        
+                        return;
                 }
                 this._connectedInputText.processKey(-1, (this.shiftState ? key.toUpperCase() : key));
-                
-                if(this.shiftState === 1){
+
+                if (this.shiftState === 1) {
                     this.shiftState = 0;
                     this.applyShiftState(this.shiftState);
                 }
@@ -164,12 +178,12 @@ module BABYLON.GUI {
         public static CreateDefaultLayout(): VirtualKeyboard {
             let returnValue = new VirtualKeyboard();
 
-            returnValue.addKeysRow(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0","\u2190"]);
+            returnValue.addKeysRow(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "\u2190"]);
             returnValue.addKeysRow(["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]);
-            returnValue.addKeysRow(["a", "s", "d", "f", "g", "h", "j", "k", "l",";","'","\u21B5"]);
+            returnValue.addKeysRow(["a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "\u21B5"]);
             returnValue.addKeysRow(["\u21E7", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/"]);
-            returnValue.addKeysRow([" "], [{ width: "200px"}]);
-        
+            returnValue.addKeysRow([" "], [{ width: "200px" }]);
+
             return returnValue;
         }
     }