@chiragrupani/fullscreen-react - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

build/FSUtility.d.ts

 export default class FSUtility {
+    static get documentElement(): HTMLElement;
     static get fullscreenElement(): Element;
@@ -3,0 +4,0 @@ static readonly fullscreenchange: string | null;

build/FullScreen.d.ts

 import * as React from 'react';
-export default class FullScreen extends React.PureComponent<{
-    onChange: (isFullScreenEnabled: boolean) => void;
-    isFullScreen: boolean;
-}, {}> {
+import FullScreenPropType from './FullScreenPropType';
+export default class FullScreen extends React.PureComponent<FullScreenPropType, {}> {
     private currentElement;
-    constructor(props: any);
+    constructor(props: FullScreenPropType);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: {
-        isFullScreen: boolean;
-    }): Promise<void>;
+    componentDidUpdate(prevProps: FullScreenPropType): Promise<void>;
     onFullScreenChange(): void;
     render(): JSX.Element;
 }

build/index.d.ts

@@ -1,3 +0,3 @@
-import BodyFullScreen from './BodyFullScreen';
+import DocumentFullScreen from './DocumentFullScreen';
 import FullScreen from './FullScreen';
-export { FullScreen, BodyFullScreen };
+export { FullScreen, DocumentFullScreen };

build/index.esm.js

@@ -75,2 +75,13 @@ import { createElement, PureComponent, createRef } from 'react';
     }
+    Object.defineProperty(FSUtility, "documentElement", {
+        get: function () {
+            return document.fullscreenElement !== undefined
+                ? document.documentElement
+                : document['msFullscreenElement'] !== undefined
+                    ? document.body
+                    : document.documentElement;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(FSUtility, "fullscreenElement", {
@@ -140,11 +151,41 @@ get: function () {
 
-var BodyFullScreen = /** @class */ (function (_super) {
-    __extends(BodyFullScreen, _super);
-    function BodyFullScreen(props) {
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "body:-ms-fullscreen {\n  overflow: auto;\n}\n";
+styleInject(css_248z);
+
+var DocumentFullScreen = /** @class */ (function (_super) {
+    __extends(DocumentFullScreen, _super);
+    function DocumentFullScreen(props) {
         var _this = _super.call(this, props) || this;
-        _this.bodyElement = document.querySelector('body');
+        _this.docElement = FSUtility.documentElement;
         _this.onFullScreenChange = _this.onFullScreenChange.bind(_this);
         return _this;
     }
-    BodyFullScreen.prototype.componentDidMount = function () {
+    DocumentFullScreen.prototype.componentDidMount = function () {
         if (FSUtility.fullscreenchange) {
@@ -154,3 +195,3 @@ document.addEventListener(FSUtility.fullscreenchange, this.onFullScreenChange);
     };
-    BodyFullScreen.prototype.componentWillUnmount = function () {
+    DocumentFullScreen.prototype.componentWillUnmount = function () {
         if (FSUtility.fullscreenchange) {
@@ -160,3 +201,3 @@ document.removeEventListener(FSUtility.fullscreenchange, this.onFullScreenChange);
     };
-    BodyFullScreen.prototype.componentDidUpdate = function (prevProps) {
+    DocumentFullScreen.prototype.componentDidUpdate = function (prevProps) {
         return __awaiter(this, void 0, void 0, function () {
@@ -167,3 +208,3 @@ var isFullScreenEnabled;
                     case 0:
-                        if (!this.bodyElement ||
+                        if (!this.docElement ||
                             !FSUtility.fullscreenEnabled ||
@@ -173,8 +214,7 @@ prevProps.isFullScreen === this.props.isFullScreen) {
                         }
-                        isFullScreenEnabled = FSUtility.fullscreenElement === this.bodyElement;
+                        isFullScreenEnabled = FSUtility.fullscreenElement === this.docElement;
                         if (!(this.props.isFullScreen && !isFullScreenEnabled)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, FSUtility.requestFullscreen(this.bodyElement)];
+                        return [4 /*yield*/, FSUtility.requestFullscreen(this.docElement)];
                     case 1:
                         _a.sent();
-                        this.bodyElement.style.overflow = 'auto';
                         return [3 /*break*/, 4];
@@ -186,3 +226,2 @@ case 2:
                         _a.sent();
-                        this.bodyElement.style.overflow = 'initial';
                         _a.label = 4;
@@ -194,4 +233,4 @@ case 4: return [2 /*return*/];
     };
-    BodyFullScreen.prototype.onFullScreenChange = function () {
-        var currentState = FSUtility.fullscreenElement === this.bodyElement;
+    DocumentFullScreen.prototype.onFullScreenChange = function () {
+        var currentState = FSUtility.fullscreenElement === this.docElement;
         var stateChanged = currentState !== this.props.isFullScreen;
@@ -202,6 +241,6 @@ if (stateChanged) {
     };
-    BodyFullScreen.prototype.render = function () {
+    DocumentFullScreen.prototype.render = function () {
         return createElement("div", null, this.props.children);
     };
-    return BodyFullScreen;
+    return DocumentFullScreen;
 }(PureComponent));
@@ -269,3 +308,3 @@
 
-export { BodyFullScreen, FullScreen };
+export { DocumentFullScreen, FullScreen };
 //# sourceMappingURL=index.esm.js.map

build/index.js

@@ -79,2 +79,13 @@ 'use strict';
     }
+    Object.defineProperty(FSUtility, "documentElement", {
+        get: function () {
+            return document.fullscreenElement !== undefined
+                ? document.documentElement
+                : document['msFullscreenElement'] !== undefined
+                    ? document.body
+                    : document.documentElement;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(FSUtility, "fullscreenElement", {
@@ -144,11 +155,41 @@ get: function () {
 
-var BodyFullScreen = /** @class */ (function (_super) {
-    __extends(BodyFullScreen, _super);
-    function BodyFullScreen(props) {
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "body:-ms-fullscreen {\n  overflow: auto;\n}\n";
+styleInject(css_248z);
+
+var DocumentFullScreen = /** @class */ (function (_super) {
+    __extends(DocumentFullScreen, _super);
+    function DocumentFullScreen(props) {
         var _this = _super.call(this, props) || this;
-        _this.bodyElement = document.querySelector('body');
+        _this.docElement = FSUtility.documentElement;
         _this.onFullScreenChange = _this.onFullScreenChange.bind(_this);
         return _this;
     }
-    BodyFullScreen.prototype.componentDidMount = function () {
+    DocumentFullScreen.prototype.componentDidMount = function () {
         if (FSUtility.fullscreenchange) {
@@ -158,3 +199,3 @@ document.addEventListener(FSUtility.fullscreenchange, this.onFullScreenChange);
     };
-    BodyFullScreen.prototype.componentWillUnmount = function () {
+    DocumentFullScreen.prototype.componentWillUnmount = function () {
         if (FSUtility.fullscreenchange) {
@@ -164,3 +205,3 @@ document.removeEventListener(FSUtility.fullscreenchange, this.onFullScreenChange);
     };
-    BodyFullScreen.prototype.componentDidUpdate = function (prevProps) {
+    DocumentFullScreen.prototype.componentDidUpdate = function (prevProps) {
         return __awaiter(this, void 0, void 0, function () {
@@ -171,3 +212,3 @@ var isFullScreenEnabled;
                     case 0:
-                        if (!this.bodyElement ||
+                        if (!this.docElement ||
                             !FSUtility.fullscreenEnabled ||
@@ -177,8 +218,7 @@ prevProps.isFullScreen === this.props.isFullScreen) {
                         }
-                        isFullScreenEnabled = FSUtility.fullscreenElement === this.bodyElement;
+                        isFullScreenEnabled = FSUtility.fullscreenElement === this.docElement;
                         if (!(this.props.isFullScreen && !isFullScreenEnabled)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, FSUtility.requestFullscreen(this.bodyElement)];
+                        return [4 /*yield*/, FSUtility.requestFullscreen(this.docElement)];
                     case 1:
                         _a.sent();
-                        this.bodyElement.style.overflow = 'auto';
                         return [3 /*break*/, 4];
@@ -190,3 +230,2 @@ case 2:
                         _a.sent();
-                        this.bodyElement.style.overflow = 'initial';
                         _a.label = 4;
@@ -198,4 +237,4 @@ case 4: return [2 /*return*/];
     };
-    BodyFullScreen.prototype.onFullScreenChange = function () {
-        var currentState = FSUtility.fullscreenElement === this.bodyElement;
+    DocumentFullScreen.prototype.onFullScreenChange = function () {
+        var currentState = FSUtility.fullscreenElement === this.docElement;
         var stateChanged = currentState !== this.props.isFullScreen;
@@ -206,6 +245,6 @@ if (stateChanged) {
     };
-    BodyFullScreen.prototype.render = function () {
+    DocumentFullScreen.prototype.render = function () {
         return React.createElement("div", null, this.props.children);
     };
-    return BodyFullScreen;
+    return DocumentFullScreen;
 }(React.PureComponent));
@@ -273,4 +312,4 @@
 
-exports.BodyFullScreen = BodyFullScreen;
+exports.DocumentFullScreen = DocumentFullScreen;
 exports.FullScreen = FullScreen;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@chiragrupani/fullscreen-react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Library to use full screen in ReactJS",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -59,6 +59,6 @@ # fullscreen-react
 
-If you require entire body document in fullscreen instead of any specific element use `BodyFullScreen` instead of `FullScreen` like below. However, there can be atmost one BodyFullScreen:
+If you require entire document in fullscreen instead of any specific element use `DocumentFullScreen` instead of `FullScreen` like below. However, there can be atmost one DocumentFullScreen:
 
 ```tsx
-<BodyFullScreen
+<DocumentFullScreen
   isFullScreen={this.state.isFullScreen}
@@ -70,3 +70,3 @@ onChange={(isFullScreen) => {
   <div>Fullscreen</div>
-</BodyFullScreen>
+</DocumentFullScreen>
 ```

No alert changes

Improved metrics

Total package byte prevSize

78265

increased by7.87%

Number of package files

12

increased by9.09%

Lines of code

607

increased by11.79%

No dependency changes