File:UIElement.js
(function() {
"use strict";
// Class imports
var UIScaler;
/**
* A single UI item that needs to be resized
*
* @module cloudkid
* @class UIElement
* @param {createjs.DisplayObject|PIXI.DisplayObject} item The item to affect
* @param {UIElementSettings} settings The scale settings
* @param {ScreenSettings} designedScreen The original screen the item was designed for
*/
var UIElement = function(item, settings, designedScreen)
{
UIScaler = cloudkid.UIScaler;
this._item = item;
this._settings = settings;
this._designedScreen = designedScreen;
if(CONFIG_PIXI)
{
this.origScaleX = item.scale.x;
this.origScaleY = item.scale.y;
}
else
{
this.origScaleX = item.scaleX;
this.origScaleY = item.scaleY;
}
this.origWidth = item.width;
this.origBounds = {x:0, y:0, width:item.width, height:item.height};
this.origBounds.right = this.origBounds.x + this.origBounds.width;
this.origBounds.bottom = this.origBounds.y + this.origBounds.height;
switch(settings.vertAlign)
{
case UIScaler.ALIGN_TOP:
{
if(CONFIG_PIXI)
this.origMarginVert = item.position.y + this.origBounds.y;
else
this.origMarginVert = item.y + this.origBounds.y;
break;
}
case UIScaler.ALIGN_CENTER:
{
if(CONFIG_PIXI)
this.origMarginVert = designedScreen.height * 0.5 - item.position.y;
else
this.origMarginVert = designedScreen.height * 0.5 - item.y;
break;
}
case UIScaler.ALIGN_BOTTOM:
{
if(CONFIG_PIXI)
this.origMarginVert = designedScreen.height - (item.position.y + this.origBounds.bottom);
else
this.origMarginVert = designedScreen.height - (item.y + this.origBounds.bottom);
break;
}
}
switch(settings.horiAlign)
{
case UIScaler.ALIGN_LEFT:
{
if(CONFIG_PIXI)
this.origMarginHori = item.position.x + this.origBounds.x;
else
this.origMarginHori = item.x + this.origBounds.x;
break;
}
case UIScaler.ALIGN_CENTER:
{
if(CONFIG_PIXI)
this.origMarginHori = designedScreen.width * 0.5 - item.position.x;
else
this.origMarginHori = designedScreen.width * 0.5 - item.x;
break;
}
case UIScaler.ALIGN_RIGHT:
{
if(CONFIG_PIXI)
this.origMarginHori = designedScreen.width - (item.position.x + this.origBounds.right);
else
this.origMarginHori = designedScreen.width - (item.x + this.origBounds.right);
break;
}
}
};
var p = UIElement.prototype = {};
/**
* Original horizontal margin in pixels
* @property {Number} origMarginHori
* @default 0
*/
p.origMarginHori = 0;
/**
* Original vertical margin in pixels
* @property {Number} origMarginVert
* @default 0
*/
p.origMarginVert = 0;
/**
* Original width in pixels
* @property {Number} origWidth
* @default 0
*/
p.origWidth = 0;
/**
* Original X scale of the item
* @property {Number} origScaleX
* @default 0
*/
p.origScaleX = 0;
/**
* The original Y scale of the item
* @property {Number} origScaleY
* @default 0
*/
p.origScaleY = 0;
/**
* The original bounds of the item with x, y, right, bottom, width, height properties.
* Used to determine the distance to each edge of the item from its origin
* @property {Object} origBounds
*/
p.origBounds = null;
/**
* The reference to the scale settings
* @private
* @property {UIElementSettings} _settings
*/
p._settings = null;
/**
* The reference to the interface item we're scaling
* @private
* @property {createjs.DisplayObject|PIXI.DisplayObject} _item
*/
p._item = null;
/**
* The original screen the item was designed for
* @private
* @property {ScreenSettings} _designedScreen
*/
p._designedScreen = null;
/**
* Adjust the item scale and position, to reflect new screen
* @method resize
* @param {ScreenSettings} newScreen The current screen settings
*/
p.resize = function(newScreen)
{
var overallScale = newScreen.height / this._designedScreen.height;
var ppiScale = newScreen.ppi / this._designedScreen.ppi;
var letterBoxWidth = (newScreen.width - this._designedScreen.width * overallScale) / 2;
// Scale item to the overallScale to match rest of the app,
// then clamp its physical size as specified
// then set the item's scale to be correct - the screen is not scaled
//Full math:
/*var physicalScale:Number = overallScale / ppiScale;
var itemScale:Number = MathUtils.clamp(physicalScale, minScale, maxScale) / physicalScale * overallScale;*/
//Optimized math:
var itemScale = overallScale / ppiScale;
if(this._settings.minScale && itemScale < this._settings.minScale)
itemScale = this._settings.minScale;
else if(this._settings.maxScale && itemScale > this._settings.maxScale)
itemScale = this._settings.maxScale;
itemScale *= ppiScale;
if(CONFIG_PIXI)
{
this._item.scale.x = this.origScaleX * itemScale;
this._item.scale.y = this.origScaleY * itemScale;
}
else
{
this._item.scaleX = this.origScaleX * itemScale;
this._item.scaleY = this.origScaleY * itemScale;
}
// positioning
var m;
// vertical move
m = this.origMarginVert * overallScale;
switch(this._settings.vertAlign)
{
case UIScaler.ALIGN_TOP:
{
if(CONFIG_PIXI)
this._item.position.y = m - this.origBounds.y * itemScale;
else
this._item.y = m - this.origBounds.y * itemScale;
break;
}
case UIScaler.ALIGN_CENTER:
{
if(CONFIG_PIXI)
this._item.position.y = newScreen.height * 0.5 - m;
else
this._item.y = newScreen.height * 0.5 - m;
break;
}
case UIScaler.ALIGN_BOTTOM:
{
if(CONFIG_PIXI)
this._item.position.y = newScreen.height - m - this.origBounds.bottom * itemScale;
else
this._item.y = newScreen.height - m - this.origBounds.bottom * itemScale;
break;
}
}
// horizontal move
m = this.origMarginHori * overallScale;
switch(this._settings.horiAlign)
{
case UIScaler.ALIGN_LEFT:
{
if(this._settings.titleSafe)
{
if(CONFIG_PIXI)
this._item.position.x = letterBoxWidth + m - this.origBounds.x * itemScale;
else
this._item.x = letterBoxWidth + m - this.origBounds.x * itemScale;
}
else
{
if(CONFIG_PIXI)
this._item.position.x = m - this.origBounds.x * itemScale;
else
this._item.x = m - this.origBounds.x * itemScale;
}
break;
}
case UIScaler.ALIGN_CENTER:
{
if(this._settings.centeredHorizontally)
{
if(CONFIG_PIXI)
this._item.position.x = (newScreen.width - this._item.width) * 0.5;
else
this._item.x = (newScreen.width - this._item.width) * 0.5;
}
else
{
if(CONFIG_PIXI)
this._item.position.x = newScreen.width * 0.5 - m;
else
this._item.x = newScreen.width * 0.5 - m;
}
break;
}
case UIScaler.ALIGN_RIGHT:
{
if(this._settings.titleSafe)
{
if(CONFIG_PIXI)
this._item.position.x = newScreen.width - letterBoxWidth - m - this.origBounds.right * itemScale;
else
this._item.x = newScreen.width - letterBoxWidth - m - this.origBounds.right * itemScale;
}
else
{
if(CONFIG_PIXI)
this._item.position.x = newScreen.width - m - this.origBounds.right * itemScale;
else
this._item.x = newScreen.width - m - this.origBounds.right * itemScale;
}
break;
}
}
};
/**
* Destroy this item, don't use after this
* @method destroy
*/
p.destroy = function()
{
this.origBounds = null;
this._item = null;
this._settings = null;
this._designedScreen = null;
};
namespace('cloudkid').UIElement = UIElement;
}());