Reference 'Swipe Up' functionality implementation based on 'Browser Ui State' intended to provide a way to expand browser to full screen state
npm install swipe-upOpen in Chrome, emulate to Nexus 5X and play with different modes:
- Swipe Up Live Demo
- Browser Ui State Live Demo
shell
$ npm i swipe-up
`
Don't be afraid of caret (^) in your package.json for this dependency - semver will
be used
correctly for
sure
:hand::expressionless: :one:.:zero:.:zero:.
Usage
In case default options will fit your needs, all you need to do is instantiate SwipeUp (when DOM is ready) and call enable():javascript
import SwipeUp from 'swipe-up'
const loadHandler = () => {
const swipeUp = new SwipeUp() //will init DOM and listeners,
swipeUp.enable() //but SwipeUp will not be displayed until you enable it explicitly
}
window.addEventListener('load', loadHandler)
`
Old school:
javascript
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
`Constructor Options
javascript
let options = {
initialOrientation: window.innerWidth > window.innerHeight ? 'LANDSCAPE' : 'PORTRAIT',
addImportantToBodyHeight: true,
fixateRootElementsOnInit: true,
scrollWindowToTopOnShow: true,
useHtml5FullScreenWhenPossible: false,
excludedUserAgents: /\WiPad\W/i,
customCSS: '.fixedFlexBox { background-color: rgba(0, 0, 50, 0.7) }',
customCSSCleanSlate: true,
expandBodyHeightTo: '120vh',
updateTimeout: 150,
swipeUpContent: 'Swipe Up to continue custom text',
html5FullScreenContent: 'Touch to continue custom text',
}
const swipeUp = new SwipeUp(options)
`
- index.js -
see documentation for all options
- demo.js -
see code for "animated" button from demo for example how UI can be customized drasticallyPublic API
javascript
//Getters:
swipeUp.browserUiState //Access to BrowserUiState instance
swipeUp.fscreen //Access to fscreen instanceswipeUp.isShown //Boolean - SwipeUp visibility status
swipeUp.isUserAgentExcluded//Boolean - Results of match for options.excludedUserAgents
swipeUp.appliedOptions //Returns options JSON-object which has been applied by Swipe Up after merging
//all sources (default, constructor, URL)
//Methods:
swipeUp.disable() //This and next one allows to control operational mode of SwipeUp, so you have
swipeUp.enable() //ability to "turn-on" and "off" SwipeUp functioning according to your needs
swipeUp.showDebugWidget() //As it sounds - you can trigger debug widget appearing via API,
swipeUp.hideDebugWidget() //but it can be also displayed via case insensitive URL param "debugInSwipeUp",
swipeUp.toggleDebugWidget()//as well as via secret touch sequence (hold finger in the bottom right corner
//on Swipe Up and quickly tripple-tap in the top left corner)
`
*there is another secret touch sequence which can be communicated to users to workaround possible blocking experience
where Swipe Up may prevent product usage due to not yet supported browser or new mobile limitation/issue
(hold finger in the bottom left corner on Swipe Up and quickly tripple-tap in the top right corner)Dependencies
- 
Browser UI State - (used as a chassis), so own code size of Swipe Up is also about ~5 Kb (gzipped)
- 
Detect Passive Events - ~20 lines of code
(used for correct cross-browser usage of
Passive event listeners)
- 
Fscreen - ~60 lines of code
(used for vendor agnostic access to the Fullscreen API)Polyfills:
- 
ECMAScript 6 Object.assign() polyfill - ~40 lines of code
used for UC and QQ browsers which still (Nov'17) doesn't support Object.assign
- 
ECMAScript 6 WeakMap polyfill - ~70 lines of code
used for old Android Stock browsers and UC which still (Nov'17) doesn't support WeakMaps
- https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill (inline)
Matrix of supported devices and browsers
See Matrix from Browser UI State.Engine explanation
See Engine from Browser UI State.- Swipe Up respects user-agent resources and throttles window
resize and device
orientationchange events with the help of
requestAnimationFrame.
- Swipe Up has to delay its calculations on above events to circumvent some silly browsers (at least Safari)
which seems to fire resize in some cases slightly before the browser actually calculated final window
dimensions (window.innerWidth and height) resulting into window size to be reported somewhat intermediate,
and if user to press some kind of 'refresh' button (which will redisplay window size) after it - the window size
will display updated to final values, meaning we are forced to use delay. Even above technique with
requestAnimationFrame doesn't help to workaround this problem. All aspects of Swipe Up behavior are configurable
including mentioned delay (updateTimeout).
- Swipe Up applies its CSS styles by dynamically creating