API Docs for: 1.0.0
Show:

File: src/gallery-dimensions/js/Dimensions.js

"use strict";

/**
 * @module gallery-dimensions
 */

/**
 * Functions for measuring the size of a node.
 * 
 * @main gallery-dimensions
 * @class Node~dimensions
 */

var em_div = null,

	the_horiz_styles =
	[
		'marginLeft',
		'borderLeftWidth',
		'paddingLeft',
		'paddingRight',
		'borderRightWidth',
		'marginRight'
	],

	the_vert_styles =
	[
		'marginTop',
		'borderTopWidth',
		'paddingTop',
		'paddingBottom',
		'borderBottomWidth',
		'marginBottom'
	];

/**********************************************************************
 * @method emToPx
 * @static
 * @param em_count {Number} the number of em's to convert (defaults to 1)
 * @return {Number} the size of one em in pixels
 */

Y.Node.emToPx = function(
	/* float */	em_count)
{
	if (!em_div)
	{
		em_div                  = Y.config.doc.createElement('div');
		em_div.style.position   = 'absolute';
		em_div.style.top        = '-10000px';
		em_div.style.left       = '-10000px';
		em_div.style.visibility = 'hidden';
		em_div.style.width      = '10em';
		em_div.style.height     = '10em';
		Y.config.doc.body.appendChild(em_div);
	}
	return (em_count || 1) * (em_div.offsetWidth / 10.0);
};

/**********************************************************************
 * @method totalWidth
 * @return {Number} the total width used by the element, including margin, border, and padding  (Margin is not included in offsetWidth.)
 */

Y.Node.prototype.totalWidth = function()
{
	return	this._node.offsetWidth +
			this.parseDimensionStyle('marginLeft') +
			this.parseDimensionStyle('marginRight');
};

/**********************************************************************
 * @method totalHeight
 * @return {Number} the total height used by the element, including margin, border, and padding  (Margin is not included in offsetHeight.)
 */

Y.Node.prototype.totalHeight = function()
{
	return	this._node.offsetHeight +
			this.parseDimensionStyle('marginTop') +
			this.parseDimensionStyle('marginBottom');
};

/**********************************************************************
 * @method insideWidth
 * @return {Number} the available width inside the widget.  (Padding is included in clientWidth.)
 */

Y.Node.prototype.insideWidth = function()
{
	return	this._node.clientWidth -
			this.parseDimensionStyle('paddingLeft') -
			this.parseDimensionStyle('paddingRight');
};

/**********************************************************************
 * @method insideHeight
 * @return {Number} the available height inside the widget.  (Padding is included in clientHeight.)
 */

Y.Node.prototype.insideHeight = function()
{
	return	this._node.clientHeight -
			this.parseDimensionStyle('paddingTop') -
			this.parseDimensionStyle('paddingBottom');
};

/**********************************************************************
 * @method horizMarginBorderPadding
 * @return {Number} the width of everything surrounding the element's content
 */

Y.Node.prototype.horizMarginBorderPadding = function()
{
	return Y.Array.reduce(the_horiz_styles, 0, function(w, style)
	{
		return w + this.parseDimensionStyle(style);
	},
	this);
};

/**********************************************************************
 * @method vertMarginBorderPadding
 * @return {Number} the height of everything surrounding the element's content
 */

Y.Node.prototype.vertMarginBorderPadding = function()
{
	return Y.Array.reduce(the_vert_styles, 0, function(h, style)
	{
		return h + this.parseDimensionStyle(style);
	},
	this);
};

/**********************************************************************
 * @method parseDimensionStyle
 * @param style {String} the style to parse
 * @return {Number} the size of the style in pixels
 */

Y.Node.prototype.parseDimensionStyle = function(
	/* string */	style)
{
	var s = this.getComputedStyle(style);
	if (!s || !/^[0-9]/.test(s))	// ignore values like "medium"
	{
		return 0;
	}

	var v = parseFloat(s, 10);
	if (/em$/.test(s))
	{
		v *= Y.Node.emToPx(1);
	}

	return Math.round(v);
};