Skip to content

Latest commit

 

History

History
88 lines (77 loc) · 2.45 KB

README.md

File metadata and controls

88 lines (77 loc) · 2.45 KB

Orient Device

Installation

npm install --save-dev orient-device

Usage 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)