//-----------------------------------------------------------------------------
/**
* A menu that switches content depending on the tab selected.
*
* @class TabbedMenu
* @constructor
*/
function TabbedMenu() {
this.initialize.apply(this, arguments);
}
TabbedMenu.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
TabbedMenu.prototype.constructor = TabbedMenu;
TabbedMenu.prototype.initialize = function() {
PIXI.DisplayObjectContainer.call(this);
this.index = -1;
this.tab = [];
this.panel = [];
this.tabMargin = 5;
this.tabOffset = 10;
// this.tColor = 'darkgrey';
// this.tSelColor = 'darkslategray';
// this.tFont = 'GameFont';
// this.tFontSize = 28; // just notes here...
// this.tFontItalic = false;
// this.tFontColor = 'white';
// this.tFontOutColor = 'transparent';
// this.tSelFontOutColor = 'white';
// this.tFontOutColorWidth = 0;
// this.tSelFontOutColorWidth = 4;
};
TabbedMenu.prototype.update = function() { // this works when not commented out, children auto update...
// if (TouchInput.isTriggered()) {
// this.tab[0].y -= (this.tab[0].y == -this.tabOffset) ? 10 : -10;
// };
};
TabbedMenu.prototype.addTab = function(tabName) {
if (this.index == -1) {
// create tab
var bitmap = new Bitmap(0, 0);
bitmap.fontSize = 30;
bitmap.textColor = 'white';
bitmap.outlineColor = 'white';
bitmap.outlineWidth = 4;
var bw = bitmap.measureTextWidth(tabName) + (this.tabMargin * 2);
var bh = bitmap.fontSize + (this.tabMargin * 2);
bitmap.resize(bw, bh + this.tabOffset * 2)
var gfx = new PIXI.Graphics();
gfx.lineStyle(3, new Color('white').toHexNum());
gfx.fillColor = new Color('darkslategray').toHexNum();
gfx.drawShape(new PIXI.RoundedRectangle(0, 0, bw, bh + this.tabOffset * 2, 10));
bitmap.renderGfx(gfx);
var sprite = new Sprite_Button();
sprite.bitmap = bitmap;
sprite.y -= this.tabOffset;
// sprite.setClickHandler(this.toggleTab1.bind(this));
this.tab.push(sprite);
this.addChild(this.tab[this.tab.length-1]); // newest sprites on top REMEMBER DURING UPDATE!!!!
this.tab[this.tab.length-1].setClickHandler(this.toggleTab1.bind(this));
this.index = 0;
// create panel
} else {
// create unselected tab & panel
};
};
TabbedMenu.prototype.toggleTab1 = function() {
this.tab[0].y -= (this.tab[0].y == -this.tabOffset) ? this.tabOffset : -this.tabOffset;
};