https://github.com/gajus/orientationchangeend
The orientationchangeend event is fired when the orientation of the device has changed and the associated rotation animation has been complete.
https://github.com/gajus/orientationchangeend
ios orientation
Last synced: 6 months ago
JSON representation
The orientationchangeend event is fired when the orientation of the device has changed and the associated rotation animation has been complete.
- Host: GitHub
- URL: https://github.com/gajus/orientationchangeend
- Owner: gajus
- License: other
- Created: 2014-11-09T13:22:46.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-11-22T09:50:29.000Z (almost 11 years ago)
- Last Synced: 2025-03-27T17:14:40.907Z (7 months ago)
- Topics: ios, orientation
- Language: JavaScript
- Homepage:
- Size: 313 KB
- Stars: 78
- Watchers: 4
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
orientationchangeend
[](https://www.npmjs.org/package/orientationchangeend)
[](http://bower.io/search/?q=orientationchangeend)
The `orientationchangeend` event is fired when the orientation of the device has changed and the associated rotation animation has been complete.
The Issue
> `orientationchange` event is fired when the orientation of the device has changed.
– https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange
This definition neglects to mention that the event is fired after `window.orientation` property has changed, but before the orientation is reflected in the UI. Inspecting dimensions of elements (e.g. `window.innerWidth` or `window.innerHeight`) gives the dimensions of the elements in the pre-orientation change state.
`orientationchangeend` is triggered at the end of the screen rotation animation that follows the orientation change event.
This has been developed for use with the mobile Safari, though the nature of the implementation makes it safe to use with other vendors.
The Underlying Implementation
There is no way to capture the end of the orientation change event because handling of the orientation change varies from browser to browser. Drawing a balance between the most reliable and the fastest way to detect the end of orientation change requires racing interval and timeout.
A listener is attached to the `orientationchange`. Invoking the listener starts an interval. The interval is tracking the state of the [Rotation Indication Variable](#rotation-indication-variable). The `orientationchangeend` event is fired when `config.noChangeCountToEnd` number of consequent iterations do not detect a value mutation or after `config.noEndTimeout` milliseconds, whichever happens first.
If you have suggestions for better strategy to detect the end of the `orientationchange` event, please [raise an issue](https://github.com/gajus/orientationchangeend/issues).
Rotation Indication Variable
The variable used to track the state of the rotation is a collection of `window.innerWidth` and `window.innerHeight`. This is a workaround until the [Screen Orientation API](http://www.w3.org/TR/screen-orientation/) becomes available in the iOS.
I realize that this is not a bullet-proof implementation. If you have suggestions for better variables to track the state of the rotation, please contribute to the [Stack Overflow question](http://stackoverflow.com/questions/26829517/how-to-detect-the-state-of-the-screen-rotation) or [raise an issue](https://github.com/gajus/orientationchangeend/issues).
Series of Events
If there is a series of `orientationchange` events fired one after another, where `n` event `orientationchangeend` event has not been fired before the `n+2` `orientationchange`, then `orientationchangeend` will fire only for the last `orientationchange` event in the series.
Usage
```js
var config = {},
OCE;
// Start tracking the orientation change.
OCE = gajus.orientationchangeend(config);
// Attach event listener to the "orientationchangeend" event.
OCE.on('orientationchangeend', function () {
// The orientation have changed.
});
```
Configuration
| Name | Value | Default |
| --- | --- | --- |
| `noChangeCountToEnd` | Number of iterations the subject of interval inspection must not mutate to fire `orientationchangeend`. | `100` |
| `noEndTimeout` | Number of milliseconds after which fire the `orientationchangeend` if interval inspection did not do it before. | `1000` |
| `debug` | Enables logging of the events | `false` |
All of the configuration parameters are optional.
DOM Events
I did not make the event available to the `window` to avoid polluting the global scope and possible future conflicts.
To make the `orientationchangeend` event available to the `window`, re-emit the event using a [custom event](https://developer.mozilla.org/en/docs/Web/API/CustomEvent):
```js
var orientationchangeend;
// Make sure that you are not adding event emitter more than once.
if ('onorientationchangeend' in window) {
orientationchangeend = new CustomEvent('orientationchangeend');
window.onorientationchangeend = OCE.on('orientationchangeend', function () {
window.dispatchEvent(orientationchangeend);
});
}
// Attach a listener to the "orientationchangeend" event.
window.addEventListener('orientationchangeend', function () {
console.log('The orientation of the device is now ' + window.orientation);
});
```
Download
Using [Bower](http://bower.io/):
```sh
bower install orientationchangeend
```
Using [NPM](https://www.npmjs.org/):
```sh
npm install orientationchangeend
```