New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

screenfull-react

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

screenfull-react - npm Package Compare versions

Comparing version

0.0.1
to
0.0.2

.eslintrc.js
cnn_capture.gif
examples/App.js
examples/index.html
examples/index.js
examples/webpack.config.babel.js

8

dist/screenfull-react.es.js

@@ -1,2 +0,8 @@

import React from"react";import ReactDOM from"react-dom";function createCommonjsModule(e,n){return e(n={exports:{}},n.exports),n.exports}var getOwnPropertySymbols=Object.getOwnPropertySymbols,hasOwnProperty=Object.prototype.hasOwnProperty,propIsEnumerable=Object.prototype.propertyIsEnumerable;function toObject(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function shouldUseNative(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var n={},r=0;r<10;r++)n["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(n).map(function(e){return n[e]}).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach(function(e){t[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}var objectAssign=shouldUseNative()?Object.assign:function(e,n){for(var r,t,o=toObject(e),l=1;l<arguments.length;l++){for(var c in r=Object(arguments[l]))hasOwnProperty.call(r,c)&&(o[c]=r[c]);if(getOwnPropertySymbols){t=getOwnPropertySymbols(r);for(var s=0;s<t.length;s++)propIsEnumerable.call(r,t[s])&&(o[t[s]]=r[t[s]])}}return o},ReactPropTypesSecret="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",ReactPropTypesSecret_1=ReactPropTypesSecret;function emptyFunction(){}var factoryWithThrowingShims=function(){function e(e,n,r,t,o,l){if(l!==ReactPropTypesSecret_1){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function n(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n};return r.checkPropTypes=emptyFunction,r.PropTypes=r,r},propTypes=createCommonjsModule(function(e){e.exports=factoryWithThrowingShims()}),propTypes_1=propTypes.PropTypes,screenfull=createCommonjsModule(function(e){var n,r,t,o,l,c;n="undefined"!=typeof window&&void 0!==window.document?window.document:{},r=e.exports,t="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,o=function(){for(var e,r=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],t=0,o=r.length,l={};t<o;t++)if((e=r[t])&&e[1]in n){for(t=0;t<e.length;t++)l[r[0][t]]=e[t];return l}return!1}(),l={change:o.fullscreenchange,error:o.fullscreenerror},c={request:function(e){var r=o.requestFullscreen;e=e||n.documentElement,/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)?e[r]():e[r](t&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){n[o.exitFullscreen]()},toggle:function(e){this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,r){var t=l[e];t&&n.addEventListener(t,r,!1)},off:function(e,r){var t=l[e];t&&n.removeEventListener(t,r,!1)},raw:o},o?(Object.defineProperties(c,{isFullscreen:{get:function(){return Boolean(n[o.fullscreenElement])}},element:{enumerable:!0,get:function(){return n[o.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(n[o.fullscreenEnabled])}}}),r?e.exports=c:window.screenfull=c):r?e.exports=!1:window.screenfull=!1}),classCallCheck=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(n,r,t){return r&&e(n.prototype,r),t&&e(n,t),n}}(),inherits=function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)},possibleConstructorReturn=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n},Screenfull=function(e){function n(e){classCallCheck(this,n);var r=possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return r.getNode=function(){var e=r.props.scrollContainerRef;return e?ReactDOM.findDOMNode(e):"undefined"!=typeof document&&document.body},r.getFullScreenNode=function(){return document.documentElement||document.body},r.handleScroll=function(e){var n=e.currentTarget.scrollTop,t="down";0!==r.scroll&&n<r.scroll&&(t="up"),r.scroll=n,"up"===t&&screenfull.isFullscreen?screenfull.exit():"down"!==t||screenfull.isFullscreen||screenfull.request(r.getFullScreenNode())},r.scroll=0,r}return inherits(n,e),createClass(n,[{key:"componentDidMount",value:function(){var e=this.props,n=e.forceFullScreen;if(!e.mobileOnly||this.isMobile())if(n)screenfull.enabled&&screenfull.request(this.getFullScreenNode());else{var r=this.getNode();r&&screenfull.enabled&&r.addEventListener("scroll",this.handleScroll,{passive:!0},!0)}}},{key:"componentWillUnmount",value:function(){var e=this.props,n=e.forceFullScreen;if((!e.mobileOnly||this.isMobile())&&(screenfull.enabled&&screenfull.exit(),!n)){var r=this.getNode();r&&screenfull.enabled&&r.removeEventListener("scroll",this.handleScroll)}}},{key:"isMobile",value:function(){var e=this.props.maxPixelsForMobile;return"undefined"!=typeof window&&window.innerWidth<=e}},{key:"render",value:function(){return null}}]),n}(React.PureComponent);Screenfull.defaultProps={scrollContainerRef:null,forceFullScreen:!1,mobileOnly:!0,maxPixelsForMobile:768},Screenfull.propTypes={};export default Screenfull;
import e from"react";import n from"react-dom";var r=function(e,n){return e(n={exports:{}},n.exports),n.exports}((function(e){
/*!
* screenfull
* v5.0.0 - 2019-09-09
* (c) Sindre Sorhus; MIT License
*/
!function(){var n="undefined"!=typeof window&&void 0!==window.document?window.document:{},r=e.exports,l=function(){for(var e,r=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],l=0,t=r.length,o={};l<t;l++)if((e=r[l])&&e[1]in n){for(l=0;l<e.length;l++)o[r[0][l]]=e[l];return o}return!1}(),t={change:l.fullscreenchange,error:l.fullscreenerror},o={request:function(e){return new Promise(function(r,t){var o=function(){this.off("change",o),r()}.bind(this);this.on("change",o),e=e||n.documentElement,Promise.resolve(e[l.requestFullscreen]()).catch(t)}.bind(this))},exit:function(){return new Promise(function(e,r){if(this.isFullscreen){var t=function(){this.off("change",t),e()}.bind(this);this.on("change",t),Promise.resolve(n[l.exitFullscreen]()).catch(r)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,r){var l=t[e];l&&n.addEventListener(l,r,!1)},off:function(e,r){var l=t[e];l&&n.removeEventListener(l,r,!1)},raw:l};l?(Object.defineProperties(o,{isFullscreen:{get:function(){return Boolean(n[l.fullscreenElement])}},element:{enumerable:!0,get:function(){return n[l.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(n[l.fullscreenEnabled])}}}),r?e.exports=o:window.screenfull=o):r?e.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}()}));r.isEnabled;const l=()=>document.documentElement||document.body,t=({scrollContainerRef:t,forceFullScreen:o,mobileOnly:u,maxPixelsForMobile:s})=>{const c=e.useRef(0),i=e.useCallback(e=>{const n=e.currentTarget.scrollTop;let t="down";const o=c.current;0!==o&&n<o&&(t="up"),c.current=n,"up"===t&&r.isFullscreen?r.exit():"down"!==t||r.isFullscreen||r.request(l())},[]),f=e.useCallback(()=>t?n.findDOMNode(t):"undefined"!=typeof document&&document.body);return e.useEffect(()=>{if(u&&!(e=>{if("undefined"==typeof window)return!1;return window.innerWidth<=e})(s))return;if(o)return void(r.isEnabled&&r.request(l()));const e=f();e&&r.isEnabled&&e.addEventListener("scroll",i,{passive:!0},!0)},[u,o]),e.useEffect(()=>()=>{r.isEnabled&&r.exit();const e=f();e&&e.removeEventListener("scroll",i)},[]),null};t.defaultProps={scrollContainerRef:null,forceFullScreen:!1,mobileOnly:!0,maxPixelsForMobile:768};export default t;
//# sourceMappingURL=screenfull-react.es.js.map

8

dist/screenfull-react.js

@@ -1,2 +0,8 @@

"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),ReactDOM=_interopDefault(require("react-dom"));function createCommonjsModule(e,n){return e(n={exports:{}},n.exports),n.exports}var getOwnPropertySymbols=Object.getOwnPropertySymbols,hasOwnProperty=Object.prototype.hasOwnProperty,propIsEnumerable=Object.prototype.propertyIsEnumerable;function toObject(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function shouldUseNative(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var n={},r=0;r<10;r++)n["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(n).map(function(e){return n[e]}).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach(function(e){t[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}var objectAssign=shouldUseNative()?Object.assign:function(e,n){for(var r,t,o=toObject(e),l=1;l<arguments.length;l++){for(var c in r=Object(arguments[l]))hasOwnProperty.call(r,c)&&(o[c]=r[c]);if(getOwnPropertySymbols){t=getOwnPropertySymbols(r);for(var u=0;u<t.length;u++)propIsEnumerable.call(r,t[u])&&(o[t[u]]=r[t[u]])}}return o},ReactPropTypesSecret="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",ReactPropTypesSecret_1=ReactPropTypesSecret;function emptyFunction(){}var factoryWithThrowingShims=function(){function e(e,n,r,t,o,l){if(l!==ReactPropTypesSecret_1){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function n(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n};return r.checkPropTypes=emptyFunction,r.PropTypes=r,r},propTypes=createCommonjsModule(function(e){e.exports=factoryWithThrowingShims()}),propTypes_1=propTypes.PropTypes,screenfull=createCommonjsModule(function(e){var n,r,t,o,l,c;n="undefined"!=typeof window&&void 0!==window.document?window.document:{},r=e.exports,t="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,o=function(){for(var e,r=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],t=0,o=r.length,l={};t<o;t++)if((e=r[t])&&e[1]in n){for(t=0;t<e.length;t++)l[r[0][t]]=e[t];return l}return!1}(),l={change:o.fullscreenchange,error:o.fullscreenerror},c={request:function(e){var r=o.requestFullscreen;e=e||n.documentElement,/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)?e[r]():e[r](t&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){n[o.exitFullscreen]()},toggle:function(e){this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,r){var t=l[e];t&&n.addEventListener(t,r,!1)},off:function(e,r){var t=l[e];t&&n.removeEventListener(t,r,!1)},raw:o},o?(Object.defineProperties(c,{isFullscreen:{get:function(){return Boolean(n[o.fullscreenElement])}},element:{enumerable:!0,get:function(){return n[o.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(n[o.fullscreenEnabled])}}}),r?e.exports=c:window.screenfull=c):r?e.exports=!1:window.screenfull=!1}),classCallCheck=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(n,r,t){return r&&e(n.prototype,r),t&&e(n,t),n}}(),inherits=function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)},possibleConstructorReturn=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n},Screenfull=function(e){function n(e){classCallCheck(this,n);var r=possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return r.getNode=function(){var e=r.props.scrollContainerRef;return e?ReactDOM.findDOMNode(e):"undefined"!=typeof document&&document.body},r.getFullScreenNode=function(){return document.documentElement||document.body},r.handleScroll=function(e){var n=e.currentTarget.scrollTop,t="down";0!==r.scroll&&n<r.scroll&&(t="up"),r.scroll=n,"up"===t&&screenfull.isFullscreen?screenfull.exit():"down"!==t||screenfull.isFullscreen||screenfull.request(r.getFullScreenNode())},r.scroll=0,r}return inherits(n,e),createClass(n,[{key:"componentDidMount",value:function(){var e=this.props,n=e.forceFullScreen;if(!e.mobileOnly||this.isMobile())if(n)screenfull.enabled&&screenfull.request(this.getFullScreenNode());else{var r=this.getNode();r&&screenfull.enabled&&r.addEventListener("scroll",this.handleScroll,{passive:!0},!0)}}},{key:"componentWillUnmount",value:function(){var e=this.props,n=e.forceFullScreen;if((!e.mobileOnly||this.isMobile())&&(screenfull.enabled&&screenfull.exit(),!n)){var r=this.getNode();r&&screenfull.enabled&&r.removeEventListener("scroll",this.handleScroll)}}},{key:"isMobile",value:function(){var e=this.props.maxPixelsForMobile;return"undefined"!=typeof window&&window.innerWidth<=e}},{key:"render",value:function(){return null}}]),n}(React.PureComponent);Screenfull.defaultProps={scrollContainerRef:null,forceFullScreen:!1,mobileOnly:!0,maxPixelsForMobile:768},Screenfull.propTypes={},exports.default=Screenfull;
"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),ReactDOM=_interopDefault(require("react-dom"));function createCommonjsModule(e,n){return e(n={exports:{}},n.exports),n.exports}var screenfull=createCommonjsModule((function(e){
/*!
* screenfull
* v5.0.0 - 2019-09-09
* (c) Sindre Sorhus; MIT License
*/
!function(){var n="undefined"!=typeof window&&void 0!==window.document?window.document:{},l=e.exports,r=function(){for(var e,l=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,t=l.length,u={};r<t;r++)if((e=l[r])&&e[1]in n){for(r=0;r<e.length;r++)u[l[0][r]]=e[r];return u}return!1}(),t={change:r.fullscreenchange,error:r.fullscreenerror},u={request:function(e){return new Promise(function(l,t){var u=function(){this.off("change",u),l()}.bind(this);this.on("change",u),e=e||n.documentElement,Promise.resolve(e[r.requestFullscreen]()).catch(t)}.bind(this))},exit:function(){return new Promise(function(e,l){if(this.isFullscreen){var t=function(){this.off("change",t),e()}.bind(this);this.on("change",t),Promise.resolve(n[r.exitFullscreen]()).catch(l)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,l){var r=t[e];r&&n.addEventListener(r,l,!1)},off:function(e,l){var r=t[e];r&&n.removeEventListener(r,l,!1)},raw:r};r?(Object.defineProperties(u,{isFullscreen:{get:function(){return Boolean(n[r.fullscreenElement])}},element:{enumerable:!0,get:function(){return n[r.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(n[r.fullscreenEnabled])}}}),l?e.exports=u:window.screenfull=u):l?e.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}()})),screenfull_1=screenfull.isEnabled;const getFullScreenNode=()=>document.documentElement||document.body,isMobile=e=>{if("undefined"==typeof window)return!1;return window.innerWidth<=e},Screenfull=({scrollContainerRef:e,forceFullScreen:n,mobileOnly:l,maxPixelsForMobile:r})=>{const t=React.useRef(0),u=React.useCallback(e=>{const n=e.currentTarget.scrollTop;let l="down";const r=t.current;0!==r&&n<r&&(l="up"),t.current=n,"up"===l&&screenfull.isFullscreen?screenfull.exit():"down"!==l||screenfull.isFullscreen||screenfull.request(getFullScreenNode())},[]),c=React.useCallback(()=>e?ReactDOM.findDOMNode(e):"undefined"!=typeof document&&document.body);return React.useEffect(()=>{if(l&&!isMobile(r))return;if(n)return void(screenfull.isEnabled&&screenfull.request(getFullScreenNode()));const e=c();e&&screenfull.isEnabled&&e.addEventListener("scroll",u,{passive:!0},!0)},[l,n]),React.useEffect(()=>()=>{screenfull.isEnabled&&screenfull.exit();const e=c();e&&e.removeEventListener("scroll",u)},[]),null};Screenfull.defaultProps={scrollContainerRef:null,forceFullScreen:!1,mobileOnly:!0,maxPixelsForMobile:768},exports.default=Screenfull;
//# sourceMappingURL=screenfull-react.js.map

8

dist/screenfull-react.umd.js

@@ -1,1 +0,7 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],n):n(e["screenfull-react"]={},e.React,e.ReactDOM)}(this,function(e,n,r){"use strict";function t(e,n){return e(n={exports:{}},n.exports),n.exports}n=n&&n.hasOwnProperty("default")?n.default:n,r=r&&r.hasOwnProperty("default")?r.default:r;var o=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var n={},r=0;r<10;r++)n["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(n).map(function(e){return n[e]}).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach(function(e){t[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}})()&&Object.assign;var u="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";function i(){}t(function(e){e.exports=function(){function e(e,n,r,t,o,l){if(l!==u){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function n(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n};return r.checkPropTypes=i,r.PropTypes=r,r}()}).PropTypes;var s=t(function(e){var n,r,t,o,l,c;n="undefined"!=typeof window&&void 0!==window.document?window.document:{},r=e.exports,t="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,o=function(){for(var e,r=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],t=0,o=r.length,l={};t<o;t++)if((e=r[t])&&e[1]in n){for(t=0;t<e.length;t++)l[r[0][t]]=e[t];return l}return!1}(),l={change:o.fullscreenchange,error:o.fullscreenerror},c={request:function(e){var r=o.requestFullscreen;e=e||n.documentElement,/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)?e[r]():e[r](t&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){n[o.exitFullscreen]()},toggle:function(e){this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,r){var t=l[e];t&&n.addEventListener(t,r,!1)},off:function(e,r){var t=l[e];t&&n.removeEventListener(t,r,!1)},raw:o},o?(Object.defineProperties(c,{isFullscreen:{get:function(){return Boolean(n[o.fullscreenElement])}},element:{enumerable:!0,get:function(){return n[o.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(n[o.fullscreenEnabled])}}}),r?e.exports=c:window.screenfull=c):r?e.exports=!1:window.screenfull=!1}),a=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},f=function(){function e(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(n,r,t){return r&&e(n.prototype,r),t&&e(n,t),n}}(),p=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n},d=function(e){function t(e){a(this,t);var n=p(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.getNode=function(){var e=n.props.scrollContainerRef;return e?r.findDOMNode(e):"undefined"!=typeof document&&document.body},n.getFullScreenNode=function(){return document.documentElement||document.body},n.handleScroll=function(e){var r=e.currentTarget.scrollTop,t="down";0!==n.scroll&&r<n.scroll&&(t="up"),n.scroll=r,"up"===t&&s.isFullscreen?s.exit():"down"!==t||s.isFullscreen||s.request(n.getFullScreenNode())},n.scroll=0,n}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(t,n.PureComponent),f(t,[{key:"componentDidMount",value:function(){var e=this.props,n=e.forceFullScreen;if(!e.mobileOnly||this.isMobile())if(n)s.enabled&&s.request(this.getFullScreenNode());else{var r=this.getNode();r&&s.enabled&&r.addEventListener("scroll",this.handleScroll,{passive:!0},!0)}}},{key:"componentWillUnmount",value:function(){var e=this.props,n=e.forceFullScreen;if((!e.mobileOnly||this.isMobile())&&(s.enabled&&s.exit(),!n)){var r=this.getNode();r&&s.enabled&&r.removeEventListener("scroll",this.handleScroll)}}},{key:"isMobile",value:function(){var e=this.props.maxPixelsForMobile;return"undefined"!=typeof window&&window.innerWidth<=e}},{key:"render",value:function(){return null}}]),t}();d.defaultProps={scrollContainerRef:null,forceFullScreen:!1,mobileOnly:!0,maxPixelsForMobile:768},d.propTypes={},e.default=d,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],n):n((e=e||self)["screenfull-react"]={},e.React,e.ReactDOM)}(this,(function(e,n,r){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n,r=r&&r.hasOwnProperty("default")?r.default:r;var t=function(e,n){return e(n={exports:{}},n.exports),n.exports}((function(e){
/*!
* screenfull
* v5.0.0 - 2019-09-09
* (c) Sindre Sorhus; MIT License
*/
!function(){var n="undefined"!=typeof window&&void 0!==window.document?window.document:{},r=e.exports,t=function(){for(var e,r=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],t=0,l=r.length,u={};t<l;t++)if((e=r[t])&&e[1]in n){for(t=0;t<e.length;t++)u[r[0][t]]=e[t];return u}return!1}(),l={change:t.fullscreenchange,error:t.fullscreenerror},u={request:function(e){return new Promise(function(r,l){var u=function(){this.off("change",u),r()}.bind(this);this.on("change",u),e=e||n.documentElement,Promise.resolve(e[t.requestFullscreen]()).catch(l)}.bind(this))},exit:function(){return new Promise(function(e,r){if(this.isFullscreen){var l=function(){this.off("change",l),e()}.bind(this);this.on("change",l),Promise.resolve(n[t.exitFullscreen]()).catch(r)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,r){var t=l[e];t&&n.addEventListener(t,r,!1)},off:function(e,r){var t=l[e];t&&n.removeEventListener(t,r,!1)},raw:t};t?(Object.defineProperties(u,{isFullscreen:{get:function(){return Boolean(n[t.fullscreenElement])}},element:{enumerable:!0,get:function(){return n[t.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(n[t.fullscreenEnabled])}}}),r?e.exports=u:window.screenfull=u):r?e.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}()}));t.isEnabled;const l=()=>document.documentElement||document.body,u=({scrollContainerRef:e,forceFullScreen:u,mobileOnly:o,maxPixelsForMobile:c})=>{const s=n.useRef(0),i=n.useCallback(e=>{const n=e.currentTarget.scrollTop;let r="down";const u=s.current;0!==u&&n<u&&(r="up"),s.current=n,"up"===r&&t.isFullscreen?t.exit():"down"!==r||t.isFullscreen||t.request(l())},[]),f=n.useCallback(()=>e?r.findDOMNode(e):"undefined"!=typeof document&&document.body);return n.useEffect(()=>{if(o&&!(e=>{if("undefined"==typeof window)return!1;return window.innerWidth<=e})(c))return;if(u)return void(t.isEnabled&&t.request(l()));const e=f();e&&t.isEnabled&&e.addEventListener("scroll",i,{passive:!0},!0)},[o,u]),n.useEffect(()=>()=>{t.isEnabled&&t.exit();const e=f();e&&e.removeEventListener("scroll",i)},[]),null};u.defaultProps={scrollContainerRef:null,forceFullScreen:!1,mobileOnly:!0,maxPixelsForMobile:768},e.default=u,Object.defineProperty(e,"__esModule",{value:!0})}));

145

examples/popup/MyModal.js
import React from 'react';
import Modal from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

@@ -8,98 +7,86 @@ import Typography from '@material-ui/core/Typography';

import Screenfull from '../../src/Screenfull';
import Screenfull from '../../src/index';
class MyModal extends React.Component {
state = {
open
};
handleToggle = () => {
this.setState({
open: !this.state.open
});
};
renderModal() {
return this.state.open ? (
<Modal open={this.state.open} onClose={this.handleToggle}>
<Screenfull forceFullScreen />
<div style={getModalStyle()} className={classes.paper}>
<Typography variant="subheading" id="simple-modal-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
fringilla, nibh et maximus vehicula, tellus justo vulputate leo,
dictum suscipit quam lacus sed tellus. Nam non erat et diam
hendrerit sollicitudin vitae id neque. Cras aliquet vestibulum dui.
Fusce eget justo eu ligula tempus elementum at vitae metus. Morbi at
mi congue, lobortis nulla vitae, aliquet elit. Pellentesque sodales
volutpat tellus, nec pharetra metus commodo sed. Aliquam in gravida
odio, et commodo purus. Integer sit amet mauris nulla. Phasellus a
scelerisque diam. In auctor urna non metus tristique, sit amet
accumsan justo hendrerit. Phasellus vestibulum risus massa, in
interdum orci ultrices at. Vivamus eros lacus, fringilla nec
ullamcorper ut, dictum non orci. Donec a turpis tincidunt, malesuada
nisl vitae, ullamcorper sapien. Morbi faucibus laoreet mauris, vel
porta sem pharetra quis. Proin vel arcu tempor, feugiat nunc a,
malesuada nibh. Morbi turpis dui, commodo quis auctor pellentesque,
tempus sed ligula. Sed rutrum ornare justo, ac elementum nulla
iaculis nec. Quisque ut consequat quam. Nam auctor, leo pretium
dictum vestibulum, metus purus rutrum neque, et tempus libero nunc
vitae ex. Curabitur enim erat, maximus eget orci sit amet,
ullamcorper ornare libero. Suspendisse potenti. Praesent egestas
laoreet massa sed aliquam. Pellentesque id eros dapibus, aliquet
mauris ac, sagittis mauris. Integer tincidunt ligula sed dictum
sollicitudin. Aliquam tincidunt urna at tristique porttitor. Nam
ultricies efficitur est sit amet auctor. Aliquam placerat, eros quis
fringilla sodales, tellus sem faucibus urna, vel commodo lectus
ligula a est. Proin arcu risus, scelerisque eu feugiat a, iaculis eu
arcu. Proin malesuada pellentesque aliquam. Sed condimentum semper
malesuada. Nunc risus enim, dictum in massa eget, commodo facilisis
ipsum. Cras dignissim velit eget auctor tempus. Sed dui arcu,
pellentesque sit amet dignissim et, suscipit quis magna. Vestibulum
quis libero eget dolor vulputate malesuada vitae sed eros. Fusce ut
erat semper magna pretium malesuada. Suspendisse ullamcorper massa
lacinia iaculis lacinia. Etiam fringilla orci non eros rutrum
scelerisque.
</Typography>
<SimpleModalWrapped />
</div>
</Modal>
) : null;
}
render() {
const { classes } = this.props;
return (
<div>
<Button onClick={this.handleOpen}>Open Modal</Button>
{this.renderModal()}
</div>
);
}
}
function rand() {
const rand = () => {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
const top = 50 + rand();
const left = 50 + rand();
const getModalStyle = () => {
const top = 10 + rand();
const left = 10 + rand();
return {
top: `${top}%`,
bottom: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`
right: `${left}%`,
transform: `translate(-${top / 2}%, -${left / 2}%)`
};
}
const MyModal = ({ classes }) => {
const [open, setOpen] = React.useState(false);
const myRef = React.createRef();
return (
<div>
<Button variant="contained" color="primary" onClick={() => setOpen(true)}>Open Modal</Button>
<Modal ref={myRef} open={open} onClose={() => setOpen(false)}>
<div>
<Screenfull forceFullScreen />
<div style={getModalStyle()} className={classes.paper}>
<Typography variant="body2" id="simple-modal-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
fringilla, nibh et maximus vehicula, tellus justo vulputate leo,
dictum suscipit quam lacus sed tellus. Nam non erat et diam
hendrerit sollicitudin vitae id neque. Cras aliquet vestibulum dui.
Fusce eget justo eu ligula tempus elementum at vitae metus. Morbi at
mi congue, lobortis nulla vitae, aliquet elit. Pellentesque sodales
volutpat tellus, nec pharetra metus commodo sed. Aliquam in gravida
odio, et commodo purus. Integer sit amet mauris nulla. Phasellus a
scelerisque diam. In auctor urna non metus tristique, sit amet
accumsan justo hendrerit. Phasellus vestibulum risus massa, in
interdum orci ultrices at. Vivamus eros lacus, fringilla nec
ullamcorper ut, dictum non orci. Donec a turpis tincidunt, malesuada
nisl vitae, ullamcorper sapien. Morbi faucibus laoreet mauris, vel
porta sem pharetra quis. Proin vel arcu tempor, feugiat nunc a,
malesuada nibh. Morbi turpis dui, commodo quis auctor pellentesque,
tempus sed ligula. Sed rutrum ornare justo, ac elementum nulla
iaculis nec. Quisque ut consequat quam. Nam auctor, leo pretium
dictum vestibulum, metus purus rutrum neque, et tempus libero nunc
vitae ex. Curabitur enim erat, maximus eget orci sit amet,
ullamcorper ornare libero. Suspendisse potenti. Praesent egestas
laoreet massa sed aliquam. Pellentesque id eros dapibus, aliquet
mauris ac, sagittis mauris. Integer tincidunt ligula sed dictum
sollicitudin. Aliquam tincidunt urna at tristique porttitor. Nam
ultricies efficitur est sit amet auctor. Aliquam placerat, eros quis
fringilla sodales, tellus sem faucibus urna, vel commodo lectus
ligula a est. Proin arcu risus, scelerisque eu feugiat a, iaculis eu
arcu. Proin malesuada pellentesque aliquam. Sed condimentum semper
malesuada. Nunc risus enim, dictum in massa eget, commodo facilisis
ipsum. Cras dignissim velit eget auctor tempus. Sed dui arcu,
pellentesque sit amet dignissim et, suscipit quis magna. Vestibulum
quis libero eget dolor vulputate malesuada vitae sed eros. Fusce ut
erat semper magna pretium malesuada. Suspendisse ullamcorper massa
lacinia iaculis lacinia. Etiam fringilla orci non eros rutrum
scelerisque.
</Typography>
</div>
</div>
</Modal>
</div>
);
}
const styles = theme => ({
paper: {
position: 'absolute',
width: theme.spacing.unit * 50,
width: theme.spacing * 50,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing.unit * 4
}
padding: theme.spacing * 4,
maxHeight: '100%',
overflow: 'hidden'
},
});
export default withStyles(styles)(MyModal);

12

examples/scroll/MyScroll.js
import React from 'react';
import Typography from '@material-ui/core/Typography';
import Screenfull from '../../src/Screenfull';
import Screenfull from '../../src/index';
class MyScroll extends React.Component {
render() {
return (
const MyScroll = () => (
<div>
<Screenfull />
<Typography variant="subheading" id="simple-modal-description">
<Typography variant="body2" id="simple-modal-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin

@@ -50,6 +46,4 @@ fringilla, nibh et maximus vehicula, tellus justo vulputate leo,

);
}
}
export default MyScroll;

169

lib/index.js

@@ -1,6 +0,18 @@

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import screenfull from 'screenfull';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _screenfull = _interopRequireDefault(require("screenfull"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/* eslint-env browser */
/**

@@ -10,100 +22,88 @@ * The underlying scrollContainerRef should be an actual node, not a Fragment. Otherwise, it will just be null

*/
var getFullScreenNode = function getFullScreenNode() {
return document.documentElement || document.body;
};
var Screenfull = function (_React$PureComponent) {
babelHelpers.inherits(Screenfull, _React$PureComponent);
var isMobile = function isMobile(maxPixelsForMobile) {
if (typeof window === "undefined") {
return false;
}
function Screenfull(props) {
babelHelpers.classCallCheck(this, Screenfull);
var width = window.innerWidth;
return width <= maxPixelsForMobile;
};
var _this = babelHelpers.possibleConstructorReturn(this, (Screenfull.__proto__ || Object.getPrototypeOf(Screenfull)).call(this, props));
var Screenfull = function Screenfull(_ref) {
var scrollContainerRef = _ref.scrollContainerRef,
forceFullScreen = _ref.forceFullScreen,
mobileOnly = _ref.mobileOnly,
maxPixelsForMobile = _ref.maxPixelsForMobile;
_this.getNode = function () {
var scrollContainerRef = _this.props.scrollContainerRef;
var scroll = _react["default"].useRef(0);
return scrollContainerRef ? ReactDOM.findDOMNode(scrollContainerRef) // eslint-disable-line react/no-find-dom-node
: typeof document !== 'undefined' && document.body;
};
var handleScroll = _react["default"].useCallback(function (event) {
var scrollPos = event.currentTarget.scrollTop;
var going = "down";
var scrollCurrent = scroll.current;
_this.getFullScreenNode = function () {
return document.documentElement || document.body;
};
if (scrollCurrent !== 0 && scrollPos < scrollCurrent) {
going = "up";
}
_this.handleScroll = function (event) {
var scrollPos = event.currentTarget.scrollTop;
var going = 'down';
if (_this.scroll !== 0 && scrollPos < _this.scroll) going = 'up';
scroll.current = scrollPos;
_this.scroll = scrollPos;
if (going === "up" && _screenfull["default"].isFullscreen) {
_screenfull["default"].exit();
} else if (going === "down" && !_screenfull["default"].isFullscreen) {
_screenfull["default"].request(getFullScreenNode());
}
}, []);
if (going === 'up' && screenfull.isFullscreen) {
screenfull.exit();
} else if (going === 'down' && !screenfull.isFullscreen) {
screenfull.request(_this.getFullScreenNode());
var getNode = _react["default"].useCallback(function () {
return scrollContainerRef ? _reactDom["default"].findDOMNode(scrollContainerRef) // eslint-disable-line react/no-find-dom-node
: typeof document !== "undefined" && document.body;
});
_react["default"].useEffect(function () {
if (mobileOnly && !isMobile(maxPixelsForMobile)) {
return;
}
if (forceFullScreen) {
if (_screenfull["default"].isEnabled) {
_screenfull["default"].request(getFullScreenNode());
}
};
_this.scroll = 0;
return _this;
}
return;
}
babelHelpers.createClass(Screenfull, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _props = this.props,
forceFullScreen = _props.forceFullScreen,
mobileOnly = _props.mobileOnly;
var node = getNode();
if (mobileOnly && !this.isMobile()) return;
if (forceFullScreen) {
if (screenfull.enabled) screenfull.request(this.getFullScreenNode());
return;
}
if (node && _screenfull["default"].isEnabled) {
node.addEventListener("scroll", handleScroll, {
passive: true
}, true);
}
}, [mobileOnly, forceFullScreen]);
var node = this.getNode();
if (node && screenfull.enabled) {
node.addEventListener('scroll', this.handleScroll, { passive: true }, true);
_react["default"].useEffect(function () {
return function () {
if (_screenfull["default"].isEnabled) {
_screenfull["default"].exit();
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var _props2 = this.props,
forceFullScreen = _props2.forceFullScreen,
mobileOnly = _props2.mobileOnly;
if (mobileOnly && !this.isMobile()) return;
if (screenfull.enabled) screenfull.exit();
if (forceFullScreen) {
return;
var node = getNode();
if (node) {
node.removeEventListener("scroll", handleScroll);
}
var node = this.getNode();
if (node && screenfull.enabled) {
node.removeEventListener('scroll', this.handleScroll);
}
}
}, {
key: 'isMobile',
value: function isMobile() {
var maxPixelsForMobile = this.props.maxPixelsForMobile;
};
}, []);
if (typeof window === 'undefined') return false;
var width = window.innerWidth;
return width <= maxPixelsForMobile;
}
}, {
key: 'render',
value: function render() {
return null;
}
}]);
return Screenfull;
}(React.PureComponent);
return null;
};
Screenfull.propTypes = {
scrollContainerRef: PropTypes.element,
forceFullScreen: PropTypes.bool,
mobileOnly: PropTypes.bool,
maxPixelsForMobile: PropTypes.number
};
Screenfull.defaultProps = {
Screenfull.defaultProps
/* remove-proptypes */
= {
scrollContainerRef: null,

@@ -114,2 +114,3 @@ forceFullScreen: false,

};
export default Screenfull;
var _default = Screenfull;
exports["default"] = _default;

84

package.json

@@ -6,3 +6,3 @@ {

"user": "mschipperheyn",
"version": "0.0.1",
"version": "0.0.2",
"keywords": [

@@ -14,9 +14,8 @@ "react",

"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --config examples/webpack.config.babel.js --hot",
"build": "npm run build:lib && npm run build:dist",
"start": "cross-env NODE_ENV=development webpack-dev-server --config examples/webpack.config.babel.js --hot --host 0.0.0.0",
"build": "yarn prebuild:lib && yarn prebuild:dist && yarn build:lib && yarn build:dist",
"prebuild:lib": "rm -rf lib/*",
"build:lib": "babel --out-dir lib src",
"prebuild:umd": "rm -rf dist/*",
"build:lib": "yarn prebuild:lib && cross-env NODE_ENV=production babel --out-dir lib src",
"prebuild:dist": "rm -rf dist/*",
"build:dist": "rollup -c && cross-env NODE_ENV=production rollup -c",
"build:dist": "cross-env NODE_ENV=production rollup -c",
"build:watch": "npm run build:lib -- --watch",

@@ -26,3 +25,3 @@ "test:lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --ignore-pattern dist --cache",

"lint": "eslint 'src/**/*.js'",
"prepublish": "npm run build"
"prepublish": "yarn build"
},

@@ -33,23 +32,27 @@ "main": "dist/screenfull-react.js",

"dependencies": {
"screenfull": "^3.3.2"
"screenfull": "^5.0.0"
},
"peerDependencies": {
"react": ">=15.4.0",
"react-dom": ">=15.4.0"
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.1.4",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-preset-react": "^6.24.1",
"@babel/cli": "^7.7.4",
"@babel/core": "^7.7.4",
"@babel/plugin-external-helpers": "^7.7.4",
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"@material-ui/core": "^4.7.0",
"@rollup/plugin-replace": "^2.2.1",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-preset-react-hmre": "^1.1.1",
"babel-eslint": "^8.2.3",
"chai": "^3.5.0",
"cross-env": "^5.0.0",
"eslint": "^6.7.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-config-standard-react": "^5.0.0",
"eslint-plugin-class-property": "^1.1.0",

@@ -59,24 +62,21 @@ "eslint-plugin-import": "^2.12.0",

"eslint-plugin-node": "^6.0.1",
"rollup-plugin-terser": "^1.0.1",
"chai": "^3.5.0",
"cross-env": "^5.0.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-config-standard-react": "^5.0.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.0.0",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-standard": "^3.0.1",
"html-loader": "^0.4.5",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"rollup": "^0.56.5",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^4.0.0",
"rollup-plugin-visualizer": "^0.3.1",
"webpack": "^4.1.1",
"webpack-dev-server": "^3.1.1",
"webpack-hot-middleware": "^2.21.2"
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.19.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"rollup": "^1.27.5",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-uglify": "^6.0.3",
"rollup-plugin-visualizer": "^3.2.3",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-hot-middleware": "^2.25.0"
},

@@ -83,0 +83,0 @@ "repository": {

10

README.md

@@ -1,2 +0,2 @@

[![build status](https://secure.travis-ci.org/mschipperheyn/screenfull-react.svg)](http://travis-ci.org/mschipperheyn/screenfull-react) [![bitHound Score](https://www.bithound.io/github/mschipperheyn/screenfull-react/badges/score.svg)](https://www.bithound.io/github/mschipperheyn/screenfull-react) [![Dependency Status](https://david-dm.org/mschipperheyn/screenfull-react.svg)](https://david-dm.org/mschipperheyn/screenfull-react)
[![Dependency Status](https://david-dm.org/mschipperheyn/screenfull-react.svg)](https://david-dm.org/mschipperheyn/screenfull-react)

@@ -7,6 +7,10 @@ # Screenfull React

Screenfull.js allows you to create full screen experiences. I implemented it because I wanted to have that behavior that removes the address bar and navbar on scroll on mobile devices, like you see on sites such as cnn.com. There is another library: screenfull-react, but it wasn't hosted on Github and looking at the source, I didn't like it, so here's the alternative.
*0.2 version with hooks*
Screenfull.js allows you to create full screen experiences. I implemented it because I wanted to have that behavior that removes the address bar and navbar on scroll on mobile devices, like you see on sites such as cnn.com. There is another library: react-screenfull, but it wasn't hosted on Github and looking at the source, I didn't like it, so here's the alternative.
This should work fine in SSR environments.
![Example](./cnn_capture.gif)
## Usage

@@ -57,3 +61,3 @@

Also make sure you apply the Component inside a Component that has a `HTML` (e.g. `div`) tag, not a `React.Fragment`.
Also make sure you apply the Component inside a Component that results in a `HTML` (e.g. `div`) tag, not a `React.Fragment`.

@@ -60,0 +64,0 @@

6

rollup.config.js

@@ -8,3 +8,3 @@ import fs from 'fs';

import visualizer from 'rollup-plugin-visualizer';
import replace from 'rollup-plugin-replace';
import replace from '@rollup/plugin-replace';

@@ -23,4 +23,4 @@ const prod = process.env.NODE_ENV === 'production';

exclude: 'node_modules/**',
presets: ['es2015-rollup', 'react'],
plugins: babelrc.plugins.concat(['external-helpers', 'transform-object-rest-spread', 'transform-class-properties'])
presets: ['@babel/react'],
plugins: babelrc.plugins.concat(['@babel/plugin-external-helpers'])
})

@@ -27,0 +27,0 @@ ),

144

src/index.js

@@ -1,5 +0,6 @@

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import screenfull from 'screenfull';
/* eslint-env browser */
import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import screenfull from "screenfull";

@@ -10,82 +11,89 @@ /**

*/
export default class Screenfull extends React.PureComponent {
static propTypes = {
scrollContainerRef: PropTypes.element,
forceFullScreen: PropTypes.bool,
mobileOnly: PropTypes.bool,
maxPixelsForMobile: PropTypes.number
};
static defaultProps = {
scrollContainerRef: null,
forceFullScreen: false,
mobileOnly: true,
maxPixelsForMobile: 768
};
const getFullScreenNode = () => document.documentElement || document.body;
constructor(props) {
super(props);
this.scroll = 0;
const isMobile = maxPixelsForMobile => {
if (typeof window === "undefined") {
return false;
}
const width = window.innerWidth;
return width <= maxPixelsForMobile;
};
componentDidMount() {
const { forceFullScreen, mobileOnly } = this.props;
if (mobileOnly && !this.isMobile()) return;
if (forceFullScreen) {
if (screenfull.enabled) screenfull.request(this.getFullScreenNode());
return;
const Screenfull = ({
scrollContainerRef,
forceFullScreen,
mobileOnly,
maxPixelsForMobile
}) => {
const scroll = React.useRef(0);
const handleScroll = React.useCallback(event => {
const scrollPos = event.currentTarget.scrollTop;
let going = "down";
const scrollCurrent = scroll.current;
if (scrollCurrent !== 0 && scrollPos < scrollCurrent) {
going = "up";
}
const node = this.getNode();
if (node && screenfull.enabled) {
node.addEventListener('scroll', this.handleScroll, { passive: true }, true);
scroll.current = scrollPos;
if (going === "up" && screenfull.isFullscreen) {
screenfull.exit();
} else if (going === "down" && !screenfull.isFullscreen) {
screenfull.request(getFullScreenNode());
}
}
}, []);
componentWillUnmount() {
const { forceFullScreen, mobileOnly } = this.props;
if (mobileOnly && !this.isMobile()) return;
if (screenfull.enabled) screenfull.exit();
const getNode = React.useCallback(() => {
return scrollContainerRef
? ReactDOM.findDOMNode(scrollContainerRef) // eslint-disable-line react/no-find-dom-node
: typeof document !== "undefined" && document.body;
});
React.useEffect(() => {
if (mobileOnly && !isMobile(maxPixelsForMobile)) {
return;
}
if (forceFullScreen) {
if (screenfull.isEnabled) {
screenfull.request(getFullScreenNode());
}
return;
}
const node = this.getNode();
if (node && screenfull.enabled) {
node.removeEventListener('scroll', this.handleScroll);
const node = getNode();
if (node && screenfull.isEnabled) {
node.addEventListener("scroll", handleScroll, { passive: true }, true);
}
}
}, [mobileOnly, forceFullScreen]);
getNode = () => {
const { scrollContainerRef } = this.props;
return scrollContainerRef
? ReactDOM.findDOMNode(scrollContainerRef) // eslint-disable-line react/no-find-dom-node
: typeof document !== 'undefined' && document.body;
};
React.useEffect(() => {
return () => {
if (screenfull.isEnabled) {
screenfull.exit();
}
const node = getNode();
if (node) {
node.removeEventListener("scroll", handleScroll);
}
};
}, []);
getFullScreenNode = () => document.documentElement || document.body;
return null;
};
isMobile() {
const { maxPixelsForMobile } = this.props;
if (typeof window === 'undefined') return false;
const width = window.innerWidth;
return width <= maxPixelsForMobile;
}
Screenfull.propTypes /* remove-proptypes */ = {
scrollContainerRef: PropTypes.element,
forceFullScreen: PropTypes.bool,
mobileOnly: PropTypes.bool,
maxPixelsForMobile: PropTypes.number
};
handleScroll = event => {
const scrollPos = event.currentTarget.scrollTop;
let going = 'down';
if (this.scroll !== 0 && scrollPos < this.scroll) going = 'up';
Screenfull.defaultProps /* remove-proptypes */ = {
scrollContainerRef: null,
forceFullScreen: false,
mobileOnly: true,
maxPixelsForMobile: 768
};
this.scroll = scrollPos;
if (going === 'up' && screenfull.isFullscreen) {
screenfull.exit();
} else if (going === 'down' && !screenfull.isFullscreen) {
screenfull.request(this.getFullScreenNode());
}
};
render() {
return null;
}
}
export default Screenfull;
.eslintrc
examples/popup/index.html
examples/popup/index.js
examples/popup/webpack.config.babel.js
examples/scroll/index.html
examples/scroll/index.js
examples/scroll/webpack.config.babel.js
.babelrc

Sorry, the diff of this file is not supported yet

bundle-stats.html

Sorry, the diff of this file is not supported yet

dist/screenfull-react.es.js.map

Sorry, the diff of this file is not supported yet

dist/screenfull-react.js.map

Sorry, the diff of this file is not supported yet