{"id":13912491,"url":"https://github.com/device-hackers/swipe-up","last_synced_at":"2025-07-18T12:31:01.104Z","repository":{"id":57376106,"uuid":"106660672","full_name":"device-hackers/swipe-up","owner":"device-hackers","description":"Small ~16 Kb (gzip) Browser UI State based reference implementation of the \"Swipe Up\" functionality required to switch browser to full screen","archived":false,"fork":false,"pushed_at":"2017-11-21T13:57:27.000Z","size":271,"stargazers_count":6,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-03T14:06:51.225Z","etag":null,"topics":["fullscreen","mobile-browsers","swipe-up"],"latest_commit_sha":null,"homepage":"http://swipe-up.surge.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/device-hackers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-12T07:40:13.000Z","updated_at":"2021-09-30T19:50:32.000Z","dependencies_parsed_at":"2022-09-02T19:32:08.893Z","dependency_job_id":null,"html_url":"https://github.com/device-hackers/swipe-up","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/device-hackers%2Fswipe-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/device-hackers%2Fswipe-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/device-hackers%2Fswipe-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/device-hackers%2Fswipe-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/device-hackers","download_url":"https://codeload.github.com/device-hackers/swipe-up/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226403801,"owners_count":17619725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fullscreen","mobile-browsers","swipe-up"],"created_at":"2024-08-07T01:01:29.877Z","updated_at":"2024-11-25T21:31:15.431Z","avatar_url":"https://github.com/device-hackers.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# Swipe Up\n[![npm version](https://badge.fury.io/js/swipe-up.svg)](https://badge.fury.io/js/swipe-up) \n![dependencies](https://david-dm.org/device-hackers/swipe-up.svg) \n[![build](https://travis-ci.org/device-hackers/swipe-up.svg?branch=master)](https://travis-ci.org/device-hackers/swipe-up)\n[![gzipped size](http://img.badgesize.io/https://unpkg.com/swipe-up?compression=gzip)](https://unpkg.com/swipe-up)\n\nOpen in Chrome, emulate to Nexus 5X and play with different modes:\n- [Swipe Up Live Demo](http://swipe-up.surge.sh/) \n- [Browser Ui State Live Demo](http://browser-ui-state.surge.sh/)\n\n## Installation\n```shell\n$ npm i swipe-up\n```\n[![NPM](https://nodei.co/npm/swipe-up.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/swipe-up/)\n\nDon't be afraid of caret (^) in your package.json for this dependency - [semver](http://semver.org/) will \n[be](https://adambard.com/blog/on-library-versioning/) used \n[correctly](https://bytearcher.com/articles/semver-explained-why-theres-a-caret-in-my-package-json/) for \n[sure](https://medium.com/front-end-developers/versioning-you-re-doing-it-wrong-5522bb46431) \n:hand::expressionless: :one:.:zero:.:zero:.\n\n## Usage\nIn case default options will fit your needs, all you need to do is instantiate SwipeUp (when DOM is ready) and call enable():\n\n```javascript\nimport SwipeUp from 'swipe-up'\n  \nconst loadHandler = () =\u003e {\n    const swipeUp = new SwipeUp() //will init DOM and listeners,\n    swipeUp.enable()              //but SwipeUp will not be displayed until you enable it explicitly \n}\n  \nwindow.addEventListener('load', loadHandler)\n```\nOld school:\n```javascript\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta name=\"viewport\" \n        content=\"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no\"\u003e\n\n    \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/swipe-up\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        window.addEventListener('load', function () {\n            var swipeUp = new SwipeUp()\n            swipeUp.enable()\n        })\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Constructor Options\n```javascript\nlet options = {\n    initialOrientation: window.innerWidth \u003e window.innerHeight ? 'LANDSCAPE' : 'PORTRAIT',\n    addImportantToBodyHeight: true,\n    fixateRootElementsOnInit: true,\n    scrollWindowToTopOnShow: true,\n    useHtml5FullScreenWhenPossible: false,\n    excludedUserAgents: /\\WiPad\\W/i,\n    customCSS: '.fixedFlexBox { background-color: rgba(0, 0, 50, 0.7) }',\n    customCSSCleanSlate: true,\n    expandBodyHeightTo: '120vh',\n    updateTimeout: 150,\n    swipeUpContent: 'Swipe Up to continue \u003cb\u003ecustom text\u003c/b\u003e',\n    html5FullScreenContent: 'Touch to continue \u003cb\u003ecustom text\u003c/b\u003e',\n}\nconst swipeUp = new SwipeUp(options)\n```\n- [index.js](https://github.com/device-hackers/swipe-up/blob/master/src/swipe-up/index.js) - \nsee documentation for all options\n- [demo.js](https://github.com/device-hackers/swipe-up/blob/master/src/demo/index.js) -\nsee code for \"animated\" button from demo for example how UI can be customized drastically\n\n## Public API\n```javascript\n//Getters:\nswipeUp.browserUiState     //Access to BrowserUiState instance\nswipeUp.fscreen            //Access to fscreen instance\n\nswipeUp.isShown            //Boolean - SwipeUp visibility status \nswipeUp.isUserAgentExcluded//Boolean - Results of match for options.excludedUserAgents \nswipeUp.appliedOptions     //Returns options JSON-object which has been applied by Swipe Up after merging \n                           //all sources (default, constructor, URL)\n\n//Methods:\nswipeUp.disable()          //This and next one allows to control operational mode of SwipeUp, so you have\nswipeUp.enable()           //ability to \"turn-on\" and \"off\" SwipeUp functioning according to your needs\n\nswipeUp.showDebugWidget()  //As it sounds - you can trigger debug widget appearing via API,\nswipeUp.hideDebugWidget()  //but it can be also displayed via case insensitive URL param \"debugInSwipeUp\",\nswipeUp.toggleDebugWidget()//as well as via secret touch sequence (hold finger in the bottom right corner\n                           //on Swipe Up and quickly tripple-tap in the top left corner)\n```\n*there is another secret touch sequence which can be communicated to users to workaround possible blocking experience\nwhere Swipe Up may prevent product usage due to not yet supported browser or new mobile limitation/issue \n(hold finger in the bottom left corner on Swipe Up and quickly tripple-tap in the top right corner)\n\n## Dependencies\n- [![gzipped size](http://img.badgesize.io/https://unpkg.com/browser-ui-state?compression=gzip)](https://unpkg.com/browser-ui-state) \n[Browser UI State](https://github.com/device-hackers/browser-ui-state) - (used as a chassis), so own code size of Swipe Up is also about ~5 Kb (gzipped)\n- [![gzipped size](http://img.badgesize.io/https://unpkg.com/detect-passive-events?compression=gzip)](https://unpkg.com/detect-passive-events) \n[Detect Passive Events](https://github.com/rafrex/detect-passive-events) - ~20 lines of [code](https://github.com/rafrex/detect-passive-events/blob/master/src/index.js) \n(used for correct cross-browser usage of \n[Passive event listeners](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md))\n- [![gzipped size](http://img.badgesize.io/https://unpkg.com/fscreen?compression=gzip)](https://unpkg.com/fscreen) \n[Fscreen](https://github.com/rafrex/fscreen) - ~60 lines of [code](https://github.com/rafrex/fscreen/blob/master/src/index.js)\n(used for vendor agnostic access to the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API))\n\nPolyfills:\n- [![gzipped size](http://img.badgesize.io/https://unpkg.com/es6-object-assign?compression=gzip)](https://unpkg.com/es6-object-assign) \n[ECMAScript 6 Object.assign() polyfill](https://github.com/rubennorte/es6-object-assign) - ~40 lines of [code](https://github.com/rubennorte/es6-object-assign/blob/master/index.js) \nused for UC and QQ browsers which still (Nov'17) doesn't support Object.assign\n- [![gzipped size](http://img.badgesize.io/https://unpkg.com/es6-weak-map?compression=gzip)](https://unpkg.com/es6-weak-map) \n[ECMAScript 6 WeakMap polyfill](https://github.com/medikoo/es6-weak-map) - ~70 lines of [code](https://github.com/medikoo/es6-weak-map/blob/master/polyfill.js) \nused for old Android Stock browsers and UC which still (Nov'17) doesn't support WeakMaps\n- https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill (inline)\n\n## Matrix of supported devices and browsers\nSee [Matrix](https://github.com/device-hackers/browser-ui-state/blob/master/docs/MATRIX.md) from Browser UI State.\n\n## Engine explanation\nSee [Engine](https://github.com/device-hackers/browser-ui-state/blob/master/docs/ENGINE.md) from Browser UI State.\n\n- Swipe Up respects user-agent resources and throttles window \n[resize](https://developer.mozilla.org/en-US/docs/Web/Events/resize) and device \n[orientationchange](https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange) events with the help of\n[requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).\n\n- Swipe Up has to delay its calculations on above events to circumvent some silly browsers (at least Safari) \nwhich seems to fire resize in some cases slightly before the browser actually calculated final window\ndimensions (window.innerWidth and height) resulting into window size to be reported somewhat intermediate,\nand if user to press some kind of 'refresh' button (which will redisplay window size) after it - the window size \nwill display updated to final values, meaning we are forced to use delay. Even above technique with \nrequestAnimationFrame doesn't help to workaround this problem. All aspects of Swipe Up behavior are configurable\nincluding mentioned delay (updateTimeout).\n\n- Swipe Up applies its CSS styles by dynamically creating ```\u003cstyle\u003e``` tag (with ID ```swipe-up-styles``` \njust in case) and inserting it as first child into ```\u003chead\u003e``` so you can easily customize it using either \ntraditional approach (with your own ```\u003cstyle\u003e```s which should go below Swipe Up ```\u003cstyle\u003e```) or via \noptions customCSS and customCSSCleanSlate which will result into your CSS injected into the same Swipe Up's \nown ```\u003cstyle\u003e``` tag after Swipe Up's own styles.\n\n- By default Swipe Up will try to use HTML5 \n[Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) if user-agent will be support it,\nfalling back to classic \"swipe up\" functionality otherwise. If for some reason above API is not fitting your needs,\nit can be turned-off with ```useHtml5FullScreenWhenPossible``` option\n\n- If you need to support QQ EN, QQ CN, UC EN before 11.4.6 and/or other browsers not capable of \n[screen.orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation) - you may supply Swipe Up\nwith ```initialOrientation``` (which you can detect with window.innerWidth \u003e window.innerHeight check). This will allow\nSwipe Up to detect states and orientation more correctly in edge cases like on-screen keyboard and split screens.\n\n- If you have business requirement to not show Swipe Up for example on all tablets - you will have to take care of this\nrequirement yourself because there is not reliable cross-browser way to detect if device is a tablet. Swipe Up could\nhelp with this, but that would mean it should become dependent on ```Detect.js``` (To be hosted on Github soon) resulting\ninto bigger bundle size. Use ```excludedUserAgents``` option and supply regular expression which will list iPad and all\nAndroid tablets which your business care of, e.g. \n```excludedUserAgents : /(?:\\WiPad\\W|\\WTablet\\W|\\WNexus (?:7|9|10)\\W)|(\\WSM-T80\\W)/i``` which will disable Swipe Up on\niPads, Firefox on any tablet, all Nexus tablets (7, 9, 10), and Samsung Galaxy Tab S 10.5.\nIf you already use ```Detect.js``` things may become lots simpler, as you can supply function instead of RegExp.\nThis function has to return true or false for current user-agent, and as so both libs can be combined like this:\n```excludedUserAgents : () =\u003e Detect.Type.is(Detect.T.Tablet)```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevice-hackers%2Fswipe-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevice-hackers%2Fswipe-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevice-hackers%2Fswipe-up/lists"}