Add: BasicTab, TabSetting
This commit is contained in:
@@ -0,0 +1,293 @@
|
||||
// BasicTab.prototype = Object.create();
|
||||
BasicTab.constructor = BasicTab;
|
||||
|
||||
function BasicTab(setting, clickEvent) {
|
||||
this.setting = setting;
|
||||
this.clickEvent = clickEvent;
|
||||
|
||||
// button sprite
|
||||
this.buttonSprite = this.makeButtonSprite();
|
||||
this.setEventMethod(this.buttonSprite);
|
||||
|
||||
|
||||
this.iconSprite = null;
|
||||
this.mainText = null;
|
||||
this.shortcutText = null;
|
||||
|
||||
|
||||
this.mainText = this.makeMainText();
|
||||
this.buttonSprite.addChild(this.mainText);
|
||||
|
||||
this.shortcutText = this.makeShortcutText();
|
||||
this.buttonSprite.addChild(this.shortcutText);
|
||||
|
||||
this.applyLoadedFont();
|
||||
|
||||
this.mouseOut();
|
||||
}
|
||||
|
||||
|
||||
|
||||
BasicTab.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite
|
||||
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);
|
||||
|
||||
// buttonSprite.anchor.setTo(0.5, 0.5);
|
||||
buttonSprite.inputEnabled = true;
|
||||
|
||||
return buttonSprite;
|
||||
}
|
||||
|
||||
|
||||
// icon
|
||||
BasicTab.prototype.addIcon = function(spriteName) {
|
||||
if(spriteName === null)
|
||||
return;
|
||||
|
||||
if(spriteName.length === 0)
|
||||
return;
|
||||
|
||||
console.log("addIcon : " + spriteName);
|
||||
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(40);
|
||||
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.shortcutText.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.fontSize;
|
||||
// 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.makeShortcutText = function() {
|
||||
var posX = this.buttonSprite.width / 2;
|
||||
var posY = this.buttonSprite.height / 2;
|
||||
var shortcutText = game.add.text(posX, posY, "");
|
||||
shortcutText.anchor.set(0.5);
|
||||
|
||||
shortcutText.fontSize = BasicTab.SHORTCUT_TEXT_FONTSIZE;
|
||||
shortcutText.fontWeight = "normal";
|
||||
// shortcutText.addColor(this.setting.textColors.over, 0);
|
||||
shortcutText.addColor("0xffffff", 0);
|
||||
|
||||
return shortcutText;
|
||||
}
|
||||
|
||||
BasicTab.prototype.setShortcutText = function(text) {
|
||||
this.shortcutText.text = text;
|
||||
this.alignContents();
|
||||
}
|
||||
|
||||
BasicTab.prototype.alignContents = function() {
|
||||
var mainTextHeight = 0;
|
||||
var iconSpriteHeight = 0;
|
||||
var shortcutTextHeight = 0;
|
||||
|
||||
if(this.mainText.text.length > 0)
|
||||
mainTextHeight = this.mainText.fontSize;
|
||||
|
||||
if (this.iconSprite !== null)
|
||||
iconSpriteHeight = this.iconSprite.height;
|
||||
|
||||
if(this.shortcutText !== null && this.shortcutText.text.length > 0)
|
||||
shortcutTextHeight = this.shortcutText.fontSize;
|
||||
|
||||
var mainContentHeightHalf = 0;
|
||||
if(mainTextHeight > 0)
|
||||
mainContentHeightHalf = mainTextHeight / 2;
|
||||
else if(iconSpriteHeight > 0)
|
||||
mainContentHeightHalf = iconSpriteHeight / 2;
|
||||
var shortcutTextHeightHalf = shortcutTextHeight / 2;
|
||||
|
||||
var offsetRatio = 7;
|
||||
var offsetMainText = mainTextHeight / offsetRatio;
|
||||
var offsetShortcutText = shortcutTextHeight / offsetRatio;
|
||||
var gap = (iconSpriteHeight > 0 ? gap = 0 : BasicTab.SHORTCUT_TEXT_FONTSIZE / 2);
|
||||
|
||||
if(shortcutTextHeight === 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 - shortcutTextHeightHalf + offsetMainText;
|
||||
else if(iconSpriteHeight > 0)
|
||||
this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf; // - gap / 4;
|
||||
}
|
||||
|
||||
this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap;
|
||||
}
|
||||
|
||||
|
||||
// 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() {
|
||||
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.shortcutText !== undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.out;
|
||||
}
|
||||
|
||||
BasicTab.prototype.mouseOver = function() {
|
||||
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.shortcutText !== undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.over;
|
||||
}
|
||||
|
||||
BasicTab.prototype.mouseDown = function() {
|
||||
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.shortcutText !== undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.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.shortcutText !== undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.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;
|
||||
|
||||
if(isEnabled === true) {
|
||||
this.mouseOut();
|
||||
} else {
|
||||
this.buttonDisabled();
|
||||
}
|
||||
}
|
||||
|
||||
BasicTab.prototype.setLineSpacing = function(spacingInPixels) {
|
||||
this.mainText.lineSpacing = spacingInPixels;
|
||||
}
|
||||
|
||||
BasicTab.NONE_ICON = "";
|
||||
BasicTab.NONE_BUTTON_TEXT = "";
|
||||
|
||||
BasicTab.SHORTCUT_TEXT_FONTSIZE = 12;
|
||||
Reference in New Issue
Block a user