Drop down button

[Mekaboo]

Good morning!

Is there examples of PGs using dropdown buttons? With that turn the selections into action target links. Thank ya

??,

Mekaboo

Edited September 29, 2018 by Mekaboo
Add more

[aWeirdo]

Hi @Mekaboo 
Nothing complete yet as far as i know, but you can check this out: https://www.babylonjs-playground.com/#H10NI4#3

( Click on the dropdown named "Correct" on scene, select "Option A" and it will send you to babylonjs.com )
( "Correct" dropdown on scene, is called "dropdownA" in code )

[ssaket]

Hi @Mekaboo 

There's an open issue for this on github,  Also, I was working on same like 2 months ago.

Solution provided my @aWeirdo is pretty cool, though there a small problem on the z-indexing (based on the initial placing/creation of the dropdowns )

To fix this, I used onPointerEnterObservable and onPointerOutObservable to change the "zIndex" of the container, you can check here playground- https://www.babylonjs-playground.com/#H10NI4#4

 

@aWeirdo and @Deltakosh - what do you guys think of this solution? 

THanks

[aWeirdo]

Hi @ssaket 
Works well  

[Mekaboo]

Hey Sirs @aWeirdo & @ssaket!!!

These are great options to choose from..thank you both so very much?! Im going to test this and get back to you all later!! Thanks again for the help it means alot?

❤️?,

Mekaboo

Edited September 29, 2018 by Mekaboo
edit

[Mekaboo]

Dear Sirs @aWeirdo & @ssaket

I tried to implememnt the code from the PG to my site and it broke..the site wouldnt load up. The button from this PG I have in my code but it the only function is that it links:

http://playground.babylonjs.com/#41IFI5#15

How do I change this into a dropdown? I figure just change this one button up and thats all I need for now. Thank ya again so very much ?

❤️?,

Mekaboo

 

[aWeirdo]

Hi @Mekaboo

http://playground.babylonjs.com/#41IFI5#18

You must include the dropdown constructor;

var Dropdown = (function () {
	function Dropdown(advancedTexture, height, width, color, background) {
		// Members
        this.height = height;
        this.width = width;
        this.color = color || "black";
        this.background = background || "white";

        this.advancedTexture = advancedTexture;

        // Container
		this.container = new BABYLON.GUI.Container();
        this.container.width = this.width;
        this.container.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        this.container.isHitTestVisible = false;
        
        // Primary button
        this.button = BABYLON.GUI.Button.CreateSimpleButton(null, "Please Select");
        this.button.height = this.height;
        this.button.background = this.background;
        this.button.color = this.color;
        this.button.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

        // Options panel
        this.options = new BABYLON.GUI.StackPanel();
        this.options.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        this.options.top = this.height;
        this.options.isVisible = false;
        this.options.isVertical = true;

        var _this = this;
        this.button.onPointerUpObservable.add(function() {
            _this.options.isVisible = !_this.options.isVisible;
        });

        //custom hack to make dropdown visible;
        this.container.onPointerEnterObservable.add(function(){
            _this.container.zIndex = 555; //some big value
        });

        this.container.onPointerOutObservable.add(function(){
            _this.container.zIndex = 0; //back to original
        });

        // add controls
        this.advancedTexture.addControl(this.container);
        this.container.addControl(this.button);
        this.container.addControl(this.options);
        
        // Selection
        this.selected = null;
        this.selectedValue = null;
	}
    Object.defineProperty(Dropdown.prototype, 'top', {
		get: function() { 
			return this.container.top;
		},
		set : function(value) {
            this.container.top = value;
		},
		enumerable: true,
		configurable: true
	});
    Object.defineProperty(Dropdown.prototype, 'left', {
		get: function() { 
			return this.container.left;
		},
		set : function(value) {
            this.container.left = value;
		},
		enumerable: true,
		configurable: true
	});
    Dropdown.prototype.addOption = function(value, text, color, background){
        var _this = this;
        var button = BABYLON.GUI.Button.CreateSimpleButton(text, text);
        button.height = _this.height;
        button.paddingTop = "-1px";
        button.background = background || _this.background;
        button.color = color || _this.color;
        button.onPointerUpObservable.add(function() {
            _this.options.isVisible = false;
            _this.button.children[0].text = text;
            _this.selected = button;
            _this.selectedValue = value;
        });
        this.options.addControl(button);
    };
	return Dropdown;
}());

 

[Mekaboo]

SUPERRIFFIC! Will add to my code!

??,

Mekaboo

[Guest]

The open issue is flagged as "Help needed" so if someone wants to offer an PR, that could be cool