@xslet/window

Gets window informations and provide operations related to window.

Install

Install from npm

Executes following command to install this package from npm.

$ npm install --save @xslet/window

Load this pakage in a browser

<script src="xslet.window.min.js"></script>

Usage

.unitOfSize

xslet.window.unitOfSize = 'rem'

This property can be set only once before it is used.

.rootFontSize

xslet.window.rootFontSize = '3.51mm'
xslet.window.rootFontSize // => about 13 [px]

xslet.window.rootFontSize = 13  // = 13 [px]
document.getElementById('id2').style.fontSize = '2rem' // The element's font size is 26px 

This property is a number, but can be set a string which consists of a number and a unit (like '2.5mm'). The unit can be set: px, mm or rem.

.convertUnit

xslet.window.rootFontSize = 13
xslet.window.convertUnit(2, 'rem', 'px') // => 26px

.scrollbarWidth

xslet.window.scrollbarWidth // => 17, on IE11

Since this property uses .unitOfSize as the unit, this value is also determined with .unitOfSize.

Some browsers changes its scroll bar width by zooming (to keep appearance width of its scroll bar). This property solves the change by re-calculating when window contents are re-layouted.

.scrollLeft/.scrollTop

xslet.window.scrollLeft = 10
xslet.window.scrollTop = 100

xslet.window.scrollLeft // => 10
xslet.window.scrollTop // => 100

For the unit of these values, .unitOfSize is used.

.maxScrollLeft/.maxScrollTop/.scrollWidth/.scrollHeight

xslet.window.maxScrollLeft // => horizontal scrollable position of window 
xslet.window.maxScrollTop // => vertical scrollable position of window

xslet.window.scrollWidth // => width of scrolling area
xslet.window.scrollHeight // => height of scrolling area

For the unit of these values, .unitOfSize is used.

.addRelayoutListener

xslet.window.addRelayoutListener(function(event) {
  console.log('re-layout window contents! : (' + event.width + ', ' + event.height + ')');
})

The listener function is called everytime the browser is resized, but the times of calling are much less than the number of resize events.

A re-layout listener function is passed an argument of which properties are .width and .height, which is inner width and height of a window. For the unit of these values, .unitOfSize is used.

.relayout

xslet.window.relayout()

This code calls re-layout listener functions manually.

APIs

Properties

.unitOfSize

Is used in whole of xslet modules. This value allowed are 'px', 'mm' and 'rem' and can be set only once.

Type: string

.rootFontSize

Is assigned to the HTML element. This value is a number and the unit is 'px', but can be set in unit either 'px' or 'mm' with a string like '10px' or '2mm'.

Type: number

.scrollbarWidth

Is the scroll bar width. The unit of this value is by xslet.window.unitOfSize. This value is re-calculated when window contents are re-layouted, because some browsers change their scroll bar widths by zooming.

Type: number

.scrollLeft

Is the horizontal scroll bar position of window. The unit of this value is by xslet.window.unitOfSize.

Type: number

.scrollTop

Is the vertical scroll bar position of window. The unit of this value is by xslet.window.unitOfSize.

Type: number

.maxScrollLeft

is the maximum horizontal scroll bar position of window. The unit of this value is by xslet.window.unitOfSize.

Type: number

.maxScrollTop

is the maximum vertical scroll bar position of window. The unit of this value is by xslet.window.unitOfSize.

Type: number

.scrollWidth

is the width of the scroll area of window. The unit of this value is by xslet.window.unitOfSize.

Type: number

.scrollHeight

is the height of the scroll area of window. The unit of this value is by xslet.window.unitOfSize.

Type: number

.relayoutDelay

Is the delay time of re-layouting against resize events. The unit of this value is milli-second.

Type: number

Methods

.convertUnit(value, fromUnit, toUnit)

Converts a value between specified units. The units can be specified among 'px', 'mm' and 'rem'.

Parameters:

• value {number} : A value to be converted.
• fromUnit {string} : A unit of a value before conversion.
• toUnit {string} : A unit of a value after conversion.

Return:

• {number} : A value after conversion.

.addRelayoutListener(listener)

Adds a listener function to be called when window contents are re-layouted. Re-layouting window contents are made done at the times of first viewing, window resizing, changing a part of view, and so on.

Parameters:

• listener {function} : A listener function. This function has an event object as an argument of which properties are follows:

  • event.width {number} : Inner width of a window. The unit of this value is xslet.window.unitOfSize.
  • event.height {number} : Inner height of a window. The unit of this value is xslet.window.unitOfSize.

.removeRelayoutListener(listener)

Removes a listener function for re-layout.

Parameters:

• listener {function} : A listener function.

.relayout()

Executes re-layout event listener functions manually.

Behavior checks on browsers

Show this page: test/web/index.html.

License

Copyright (C) 2016 Takayuki Sato

This program is free software under MIT License. See the file LICENSE in this distribution for more details.