rotate-device

v1.3.0

Published

2 years ago

Plugin rotateDevice has been made to ask the users to rotate device/expand browser window to enjoy your site/app fully!

Downloads

0High
0Medium
0Low

ihavebadfantasy

desktop touch-device orientation notification rotate-device change-orientation

About rotate-device

Plugin rotateDevice has been made to ask the users to rotate device/expand browser window to enjoy your site/app fully. It has two types of notifications with build in markup and styles (or you can create your own mark up and styling):

Desktop Notification

Touch Device Notification

Getting started with rotate-device

1. Download and install rotate-device

First of all we need to download required rotate-device files:

We can download them from rotate-device repository The files you need to use located at prod folder. You need both js and css files. Feel free to choose if you want to include min.js or .js version to your website/app.
Or we can install them via NPM, enter in terminal:

$ npm install rotate-device

2. Include rotate-device Files To Website/App

<!DOCTYPE html>
<html lang="en">
<head>
   ...
   <link rel="stylesheet" href="path/to/rotateDevice.css">
</head>
<body>
   ...
   <script src="path/to/rotateDevice.min.js"></script>
</body>
</html>
});

rotate-device Layout and styles

No HTML layout, no extra classes, or blocks needed to start notificating your users.

We also have some default notification styling for both touchDeviceNotification and desktopNotification which include message and icon. This template is pretty configurable but if you want to give it more changes than you can with settings just use customHTML setting, add your classes and your own styles.

Initialize rotate-device

Initializing in .html

The best option will be in inline script or in script file that is included in the very end of body (right before closing tag):

 <body>
 ...
 <script>
 var touchDeviceNotification = rotateDevice.createTouchDeviceNotification({
   blockedOrientation: 'portrait',
   onlyMobile: false,
   customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
 });
 touchDeviceNotification.init();

 var desktopNotification = rotateDevice.createDesktopNotification({
   allowContentShow: false,
   customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
 });
 desktopNotification.init();
 </script>
</body>
});

Otherwise (but not recommended), you can initialize it within window.onload event:

window.onload = function () {
 var touchDeviceNotification = rotateDevice.createTouchDeviceNotification({
   blockedOrientation: 'portrait',
   onlyMobile: false,
   customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
 });
 touchDeviceNotification.init();

 var desktopNotification = rotateDevice.createDesktopNotification({
   allowContentShow: false,
   customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
 });
 desktopNotification.init();
};
});

As a CommonJs module

  var rotateDevice = require('rotateDevice');

  var touchDeviceNotification = rotateDevice.createTouchDeviceNotification({
    blockedOrientation: 'portrait',
    onlyMobile: false,
    customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
  });
  touchDeviceNotification.init();

  var desktopNotification = rotateDevice.createDesktopNotification({
    allowContentShow: false,
    customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
  });
  desktopNotification.init();

As an ES module

  import rotateDevice from 'rotate-device';

  var touchDeviceNotification = rotateDevice.createTouchDeviceNotification({
    blockedOrientation: 'portrait',
    onlyMobile: false,
    customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
  });
  touchDeviceNotification.init();

  var desktopNotification = rotateDevice.createDesktopNotification({
    allowContentShow: false,
    customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
  });
  desktopNotification.init();

TouchDeviceNotification Settings

Pass the settings into creating function. For example:

  var touchDeviceNotification = rotateDevice.createTouchDeviceNotification({
    blockedOrientation: 'portrait',
    onlyMobile: false,
    customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
  });
  touchDeviceNotification.init();

|Setting|Type|Default Value|Description| |---|---|---|---| |blockedOrientation|string|landscape|orientation of device you want to block| |allowContentShow|boolean|true|allow site/app content show on tap| |mainMessage|string|'Please turn your device'|general notification message (available if you use default notification template)| |extraMessage|string|'or tap the screen to continue'|extra notification message (available if you use default notification template and allowContentShow: true)| |responsivePortraitBreak|number|767|determine the breakpoint on which to show notification for mobile phones (default size is the one that will work on all the mobile phones but not on tablets)| |responsiveLandscapeBreak|number|850|determine the breakpoint on which to show notification for mobile phones (default size is the one that will work on all the mobile phones but not on tablets)| |iconPath|string|default svg icon|path to icon (any format) or svg icon(available if you use default notification template)| |appearAnimation|string|''|pass the string with animation classes you want to set on notification appearance (like animate.css classes 'animated fadeIn)| |hideAnimation|string|''|pass the string with animation classes you want to set on notification hiding (like animate.css classes 'animated fadeOut)| |hideAnimationDuration|number|0/400|duration of hideAnimation (if no hideAnimation default is 0; if hideAnimation is passed and hideAnimationDuration is not set - default is 400 (ms))| |customHTML|string|false|custom markup of the notification. Markup you pass will be wrapped into main notification container with build in styles. Remember that you need to style all the custom markup on your own, so provide your own id/classes for styling.| backgroundColor|string|'#ffffff'|background of main notification container|

DesktopNotification Settings

Pass the settings into creating function. For example:

  var desktopNotification = rotateDevice.createDesktopNotification({
    allowContentShow: false,
    customHTML: `<div class="myNotificationClass">Hello, that is my custom notification!</div><img src="./src/img.png" alt="my icon">`,
  });
  desktopNotification.init();

|Setting|Type|Default Value|Description| |---|---|---|---| |allowContentShow|boolean|true|allow site/app content show on tap| |mainMessage|string|'Please expand your browser window'|general notification message (available if you use default notification template)| |extraMessage|string|'or click to continue'|extra notification message (available if you use default notification template and allowContentShow: true)| |desktopHeightBreak|number|350|determine the height breakpoint on which to show notification| |desktopWidthBreak|number|400|determine the width breakpoint on which to show notification| iconPath|string or SVGHTMLElement|default svg icon|path to icon or svg icon (available if you use default notification template)| appearAnimation|string|''|pass the string with animation classes you want to set on notification appearance (like animate.css classes 'animated fadeIn)| hideAnimation|string|''|pass the string with animation classes you want to set on notification hiding (like animate.css classes 'animated fadeOut)| hideAnimationDuration|number|0/400|duration of hideAnimation (if no hideAnimation default is 0; if hideAnimation is passed and hideAnimationDuration is not set - default is 400 (ms))| |customHTML|string|false|custom markup of the notification. Markup you pass will be wrapped into main notification container with build in styles. Remember that you need to style all the custom markup on your own, so provide your own id/classes for styling.| backgroundColor|string|'#ffffff'|background of main notification container|

DesktopNotification API

To use the API methods you must store the notification object. For example:

var desktopNotification = createDesktopNotification();
desktopNotificationInit.init();

|Method|Description| |---|---| |init()|Creating HTMLElement, appending it in markup and starting notification event listeners (start notification)| |destroy()|to stop notification and remove it from markup ( you can still use it again with all the settings passed before using init() method to the variable notification was stored in or you can set variable with notification to null for full destruction)|

TouchDeviceNotification API

To use the API methods you must store the notification object. For example:

var TouchDeviceNotification = createDesktopNotification();
desktopNotificationInit.init();

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme