Appearance
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
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
- measured :
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' |