measurements.md

title
measurements

Modules

measurements.js

Handle element's width and height calculations so that, when an element's visibility changes, parent element's dimensions can be properly transitioned

• export

  • getParentMeasure(element, dimension) ⇒ Object
  • setParentMaxMeasures(args)
  • removeDimensionMax(element, dimension)

• inner

  • measured : Object
  • validateDimension(dimension)
  • getMarginNumericValue(margin) ⇒ number
  • getVertMargin(margins, arrLength) ⇒ number
  • getHorizMargin(margins, arrLength) ⇒ number
  • getElementMargins(element, axis) ⇒ number
  • getElementMeasure(element, dimension) ⇒ number
  • getParentMeasures(element) ⇒ Object
  • setDimensionMax(element, dimension, value)
  • DimensionsMeasurements : typedef

getParentMeasure(element, dimension) ⇒ Object

Calculates the element's parent dimension before and after 'element' is set to 'display: none'

Kind: inner method of measurements

Returns: An object containing the parent element's dimension before and after the child element is set to 'display: none'

Param	Type	Description
element	HTMLElement	The DOM element from which the parent will be measured
dimension	string	Either 'width' or 'height'

setParentMaxMeasures(args)

Sets element's parent's 'max-width' or 'max-height' property.

If 'dimension' is undefined or different from 'all', 'width' or 'height', no property will be set.

Kind: inner method of measurements

Param	Type	Description
args	Object	Object containing all the information needed

removeDimensionMax(element, dimension)

Removes the element's 'max-width' or 'max-height' CSS property

Kind: inner method of measurements

Param	Type	Description
element	HTMLElement | null	The DOM element to set max-width or max-height value
dimension	string	Either 'width' or 'height'

measured : Object

Tracks whether the parent's element measurement should be before or after the element is set to 'display: none'

Kind: inner constant of measurements

validateDimension(dimension)

Throws a ReferenceError if 'dimension' is neither 'width' nor 'height'

Kind: inner method of measurements

Param	Type	Description
dimension	string	Either 'width' or 'height'

getMarginNumericValue(margin) ⇒ number

Returns only the numeric part of the margin property

Kind: inner method of measurements

Returns: Margin value without unit

Param	Type	Description
margin	string	Margin value along with its unit

getVertMargin(margins, arrLength) ⇒ number

Calculates the total margin of an element in the vertical axis

Kind: inner method of measurements

Returns: The sum of top-margin and bottom-margin

Param	Type	Description
margins	Array.<string>	Array containing an element's margin values
arrLength	number	Number of values declared in the CSS margin property

getHorizMargin(margins, arrLength) ⇒ number

Calculates the total margin of an element in the horizontal axis

Kind: inner method of measurements

Returns: The sum of left-margin and right-margin

Param	Type	Description
margins	Array.<string>	Array containing an element's margin values
arrLength	number	Number of values declared in the CSS margin property

getElementMargins(element, axis) ⇒ number

Element's total margin in a given axis

Kind: inner method of measurements

Returns: Total margin in a given axis

Param	Type	Description
element	HTMLElement	The DOM element to calculate margins from
axis	string	'horizontal' or 'vertical' margins

getElementMeasure(element, dimension) ⇒ number

Calculates the total width or height of an element

Kind: inner method of measurements

Returns: The total dimension of an element, including its margins

Param	Type	Description
element	HTMLElement	The Dom element to measure
dimension	string	Either 'width' or 'height'

getParentMeasures(element) ⇒ Object

Calculates the width and height of an element's parent, before and after the element is set to 'display: none'

Kind: inner method of measurements

Returns: An object with the width and height of the parent element

Param	Type	Description
element	HTMLElement	The DOM element to get the parent's measurements from

setDimensionMax(element, dimension, value)

Sets the element's 'max-width' or 'max-height' CSS property

Kind: inner method of measurements

Param	Type	Description
element	HTMLElement | null	The DOM element to set max-width or max-height value
dimension	string	Either 'width' or 'height'
value	string	The CSS property value, in pixels

DimensionsMeasurements : typedef

$1 $2

Name	Type	Description
height	Object	Element's height before and after child element is set to 'display: none'
width	Object	Element's width before and after child element is set to 'display: none'