A simple screen size manager
- keeps track of screen size and ratio changes
- helper to compute a component dimensions based on other components: getHeightMinus(...), getWidthMinus(...)
- observe screen size changes and publish them to the PubSub on the EVT_WINDOW_RESIZED channel
- observe when container components (Block, Panel) are resized to propagate the change on children
Members
Methods
# static getHeightMinus(…something) → {number}
Compute the remaining window's height in pixels (= window's height minus a computed delta)
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
something |
*
|
<repeatable> |
Either a number, or a CSS height in pixels, or an array of ids of the items to consider while computing the remaining height |
The remaining height, in pixels
number
Example
// With number:
kiss.screen.getHeightMinus(60)
// With a CSS size:
kiss.screen.getHeightMinus("60px")
// With a component id:
kiss.screen.getHeightMinus("top-bar")
// With multiple component ids:
kiss.screen.getHeightMinus("top-bar", "button-bar")
// With multiple numbers:
kiss.screen.getHeightMinus(60, 20, $("top-bar").offsetHeight)
// Mixed stuff:
kiss.screen.getHeightMinus("top-bar", 20, "60px")# static getWidthMinus(…something) → {number}
Compute the remaining window's width in pixels (= window's width minus a computed delta)
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
something |
*
|
<repeatable> |
Either a number, or a CSS height in pixels, or an array of ids of the items to consider while computing the remaining width |
The remaining height, in pixels
number
Example
// With number:
kiss.screen.getWidthMinus(60)
// With a CSS size:
kiss.screen.getWidthMinus("60px")
// With a component id:
kiss.screen.getWidthMinus("left-nav")
// With multiple component ids:
kiss.screen.getWidthMinus("left-nav", "left-nav-margin")
// With multiple numbers:
kiss.screen.getWidthMinus(60, 20, $("left-nav").offsetWidth)
// Mixed stuff:
kiss.screen.getWidthMinus("left-nav", 20, "60px")# static observe()
Observe the window resize event, and publish the changes in the EVT_WINDOW_RESIZED pubsub channel.
Example
kiss.screen.observe()