chocomae/src/game/lib/flat_button/basic_tab.js

// BasicTab.prototype = Object.create();
BasicTab.constructor = BasicTab;

function BasicTab() {
	this.activate = true;

	this.buttonSprite = null;
	this.activeLineSprite = null;

	this.iconSprite = null;

	this.mainText = null;
	this.subText = null;

	this.posY = 0;
}



BasicTab.prototype.createButton = function(setting, clickEvent) {
	this.setting = setting;
	this.clickEvent = clickEvent;

	// button sprite
	this.buttonSprite = this.makeButtonSprite();
	this.setEventMethod(this.buttonSprite);

	this.activeLineSprite = this.makeActiveLineSprite();
	this.setEventMethod(this.activeLineSprite);
	this.buttonSprite.addChild(this.activeLineSprite);

	this.mainText = this.makeMainText();
	this.buttonSprite.addChild(this.mainText);

	this.subText = this.makeSubText();
	// this.subText.fontWeight = "bold";
	this.buttonSprite.addChild(this.subText);

	this.applyLoadedFont();

	this.mouseOut();
}

BasicTab.prototype.makeButtonSprite = function() {
	var setting = this.setting;
	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
	// console.log("round : " + setting.roundAmount);

	var btnWidth = setting.width;
	var btnHeight = setting.height;

	var texture = null;
	texture = new Phaser.Graphics()
		.beginFill(0xffffff)
		.drawRect(0, 0, btnWidth, btnHeight)
		.endFill()
		.generateTexture();

	var posX = setting.x - btnWidth / 2;
	var posY = setting.y - btnHeight / 2;
	var buttonSprite = game.add.sprite(posX, posY, texture);
	this.posY = posY;

	buttonSprite.inputEnabled = true;

	return buttonSprite;
}

BasicTab.prototype.makeActiveLineSprite = function() {
	var setting = this.setting;
	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
	// console.log("round : " + setting.roundAmount);

	var OFFSET_POS_Y	= setting.height - 6;
	var ACTIVE_LINE_HEIGHT	= 3;

	var buttonWidth = setting.width;
	var lineWidth = buttonWidth * 3 / 4;
	var lineHeight = ACTIVE_LINE_HEIGHT;

	var texture = null;
	texture = new Phaser.Graphics()
		// .beginFill(0xffffff)
		.beginFill(MainColor.WHITE_HEX)
		.drawRoundedRect(0, 0, lineWidth, lineHeight, 1)
		.endFill()
		.generateTexture();

	var posX = setting.width / 2 - lineWidth / 2;
	var posY = OFFSET_POS_Y;
	var activeLineSprite = game.add.sprite(posX, posY, texture);

	activeLineSprite.inputEnabled = true;

	return activeLineSprite;
}


// icon
BasicTab.prototype.addIcon = function(spriteName) {
	if(spriteName === null)
		return;

	if(spriteName.length === 0)
		return;

	this.iconSprite = game.add.sprite(0, 0, spriteName);
	this.iconSprite.x = this.buttonSprite.width / 2;
	this.iconSprite.y = this.buttonSprite.height / 2;
	this.iconSprite.anchor.setTo(0.5, 0.5);
	this.setIconSize(50);
	this.buttonSprite.addChild(this.iconSprite);

	this.mainText.text = "";
	this.mouseOut();
}

BasicTab.prototype.setIconSize = function(size) {
	this.setIconWidth(size);
	this.setIconHeight(size);
}

BasicTab.prototype.setIconWidth = function(size) {
	this.iconSprite.width = size;
}

BasicTab.prototype.setIconHeight = function(size) {
	this.iconSprite.height = size;
	this.alignContents();
}


// button text
BasicTab.prototype.setFont = function(fontName) {
	this.setting.font = fontName;
}

BasicTab.prototype.applyLoadedFont = function() {
	this.mainText.font = this.setting.font;
	this.subText.font = this.setting.font;
}

BasicTab.prototype.makeMainText = function() {
	var width = this.setting.width / 2;
	var height = this.setting.height / 2;

	// var mainText = game.add.text(0, 0, textContent, this.setting.fontStyle)
	// 	.setTextBounds(0, 0, width, this.setting.height);

	var mainText = game.add.text(width, height, "");
	mainText.anchor.set(0.5);
	mainText.fontSize = this.setting.mainFontSize;
	mainText.fontWeight = "bolder";
	mainText.lineSpacing = TabSetting.DEFAULT_TEXT_LINE_SPACING_PX;

	return mainText;
}

BasicTab.prototype.setMainText = function(text) {
	this.mainText.text = text;
	if(this.iconSprite !== null)
		this.iconSprite = null;
	this.alignContents();
}

BasicTab.prototype.setMainTextFontWeight = function(option) {
	if(option === null || option === "")
		this.mainText.fontWeight = "normal";
	else
		this.mainText.fontWeight = option;
}

BasicTab.prototype.makeSubText = function() {
	var posX = this.buttonSprite.width / 2;
	var posY = this.buttonSprite.height / 2;
	var subText = game.add.text(posX, posY, "");
	subText.anchor.set(0.5);

	subText.fontSize = BasicTab.SUBTEXT_FONTSIZE;
	subText.fontSize = this.setting.subFontSize;
	subText.fontWeight = "normal";
	// subText.addColor(this.setting.textColors.over, 0);
	subText.addColor("0xffffff", 0);

	return subText;
}

BasicTab.prototype.setSubText = function(text) {
	this.subText.text = text;
	this.alignContents();
}

BasicTab.prototype.setActive = function(flag) {
	this.activate = flag;

	if(this.activate)
		this.activeLineSprite.alpha = 1;
	else
		this.activeLineSprite.alpha = 0;
}

BasicTab.prototype.alignContents = function() {
	var mainTextHeight = 0;
	var iconSpriteHeight = 0;
	var subTextHeight = 0;

	if(this.mainText.text.length > 0)
		mainTextHeight = this.mainText.fontSize;

	if (this.iconSprite !== null)
		iconSpriteHeight = this.iconSprite.height;

	if(this.subText !== null && this.subText.text.length > 0)
		subTextHeight = this.subText.fontSize;

	var mainContentHeightHalf = 0;
	if(mainTextHeight > 0)
		mainContentHeightHalf = mainTextHeight / 2;
	else if(iconSpriteHeight > 0)
		mainContentHeightHalf = iconSpriteHeight / 2;
	var subTextHeightHalf = subTextHeight / 2;

	var offsetRatio = 7;
	var offsetMainText = mainTextHeight / offsetRatio;
	var offsetSubText = subTextHeight / offsetRatio;
	var gap = (iconSpriteHeight > 0 ? 0 : BasicTab.SUBTEXT_FONTSIZE / 2);

	if(subTextHeight === 0) {
		if(mainTextHeight > 0)
			this.mainText.y = this.buttonSprite.height / 2 + offsetMainText;
		else if(iconSpriteHeight > 0)
			this.iconSprite.y = this.buttonSprite.height / 2;
	}
	else {
		if(mainTextHeight > 0)
			this.mainText.y = this.buttonSprite.height / 2 - subTextHeightHalf + offsetMainText;
		else if(iconSpriteHeight > 0)
			this.iconSprite.y = this.buttonSprite.height / 2 - subTextHeightHalf;
	}

	// this.subText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetSubText + gap;
	this.subText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetSubText - 8;
}


// event handler
BasicTab.prototype.setEventMethod = function(target) {
	target.events.onInputOver.add(
		(function() { this.mouseOver(); }).bind(this),
		this
	);
	target.events.onInputOut.add(
		(function() { this.mouseOut(); }).bind(this),
		this
	);
	target.events.onInputDown.add(
		(function() {
			this.mouseDown();

			if(this.clickEvent) {
				this.clickEvent();
			}
		}).bind(this),
		this
	);
	target.events.onInputUp.add(
		(function() { this.mouseOver(); }).bind(this),
		this
	);
}

BasicTab.prototype.mouseOut = function() {
	if(!this.buttonSprite.inputEnabled)
		return;

	this.buttonSprite.tint = this.setting.buttonColors.out;

	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
		this.iconSprite.tint = this.setting.iconColors.out;

	this.mainText.fill = this.setting.textColors.out;
	if(this.subText !== undefined)
		this.subText.fill = this.setting.textColors.out;

	this.activeLineSprite.tint = this.setting.activeLineColors.out;
}

BasicTab.prototype.mouseOver = function() {
	if(!this.buttonSprite.inputEnabled)
		return;

	this.buttonSprite.tint = this.setting.buttonColors.over;

	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
		this.iconSprite.tint = this.setting.iconColors.over;

	this.mainText.fill = this.setting.textColors.over;
	if(this.subText !== undefined)
		this.subText.fill = this.setting.textColors.over;

	this.activeLineSprite.tint = this.setting.activeLineColors.over;
}

BasicTab.prototype.mouseDown = function() {
	if(!this.buttonSprite.inputEnabled)
		return;

	this.buttonSprite.tint = this.setting.buttonColors.down;

	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
		this.iconSprite.tint = this.setting.iconColors.down;

	this.mainText.fill = this.setting.textColors.down;
	if(this.subText !== undefined)
		this.subText.fill = this.setting.textColors.down;

	this.activeLineSprite.tint = this.setting.activeLineColors.down;
}

BasicTab.prototype.buttonDisabled = function() {
	this.buttonSprite.tint = this.setting.buttonColors.disabled;

	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
		this.iconSprite.tint = this.setting.iconColors.disabled;

	this.mainText.fill = this.setting.textColors.disabled;
	if(typeof this.subText !== undefined)
		this.subText.fill = this.setting.textColors.disabled;

	this.activeLineSprite.tint = this.setting.activeLineColors.disabled;
}



BasicTab.prototype.getPosX = function() {
	return this.buttonSprite.x;
}

BasicTab.prototype.getPosY = function() {
	return this.buttonSprite.y;
}

BasicTab.prototype.move = function(x, y) {
	this.buttonSprite.x = x  - this.setting.width / 2;
	this.buttonSprite.y = y  - this.setting.height / 2;
}

BasicTab.prototype.getInputEnabled = function() {
	return this.buttonSprite.inputEnabled;
}

BasicTab.prototype.setInputEnabled = function(isEnabled) {
	this.buttonSprite.inputEnabled = isEnabled;
	this.activeLineSprite.inputEnabled = isEnabled;

	if(isEnabled === true) {
		this.mouseOut();
	} else {
		this.buttonDisabled();
	}
}

BasicTab.prototype.setLineSpacing = function(spacingInPixels) {
	this.mainText.lineSpacing = spacingInPixels;
}

BasicTab.prototype.show = function() {
	this.buttonSprite.y = this.posY;
}

BasicTab.prototype.hide = function() {
	this.buttonSprite.y = BasicTab.HIDE_POS_Y;
}


BasicTab.NONE_ICON			= "";
BasicTab.NONE_BUTTON_TEXT	= "";

BasicTab.SUBTEXT_FONTSIZE	= 12;
BasicTab.HIDE_POS_Y	= 1000;