Installation
npm install --save-dev orient-deviceUsage
1.
Add orient.js file to your project code and initialise it.
<html>
<head></head>
<body>
...
<script type="text/javascript" src="path/to/orient.js"></script>
<script>
var options = {
prefferedOrient: 'landscape',
text: {
error: '<p><strong>Whoops</strong> can you please rotate your device <br><em>:)</em></p>',
color: 'rgba(255, 255, 255, 1)'
},
onRotate: function() {
console.log('rotated');
},
onError: function() {
console.log('error - wrong orientation');
}
};
OrientDevice.init(options);
</script>
</body>
</html>Or using webpack
let OrientDevice = require('orient-device');
OrientDevice.init();Here is a list of options:
| Option | Default Value | Comments |
|---|---|---|
| prefferedOrient | portrait (String) | Can take 2 values either landscape or portrait |
| background | Value will depend on browser (String) | Plugin does browser detection and there is an official documentation of browsers primary colors. If you want you can specify background yourself, rgba, hex ... |
| error | <p><strong>Whoops</strong> can you please rotate your device back to <span id="preferred"></span> <em> :) </em></p> Yes, HTML. |
If you want to dynamically pull value of your prefered orientation please include an element with an id="preferred" or it will throw a Javascript error |
| color | rgba(255, 255, 255, 1) (String) | You can include hex, rgb, rgba, or just words (like green, blue etc...) |
Custom Callbacks
onRotate - fires when devices is rotated (also fires initially)
onError - fires when devices is in the wrong orientation (fires initially if its in wrong orientation)