npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

swipe-up

v1.2.16

Published

Reference 'Swipe Up' functionality implementation based on 'Browser Ui State' intended to provide a way to expand browser to full screen state

Downloads

1,270

Readme

Swipe Up

npm version dependencies build gzipped size

Open in Chrome, emulate to Nexus 5X and play with different modes:

Installation

$ npm i swipe-up

NPM

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():

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:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" 
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script type="text/javascript" src="https://unpkg.com/swipe-up"></script>
    <script>
        window.addEventListener('load', function () {
            var swipeUp = new SwipeUp()
            swipeUp.enable()
        })
    </script>
</head>
<body>
</body>
</html>

Constructor Options

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 <b>custom text</b>',
    html5FullScreenContent: 'Touch to continue <b>custom text</b>',
}
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 drastically

Public API

//Getters:
swipeUp.browserUiState     //Access to BrowserUiState instance
swipeUp.fscreen            //Access to fscreen instance

swipeUp.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

Polyfills:

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 <style> tag (with ID swipe-up-styles just in case) and inserting it as first child into <head> so you can easily customize it using either traditional approach (with your own <style>s which should go below Swipe Up <style>) or via options customCSS and customCSSCleanSlate which will result into your CSS injected into the same Swipe Up's own <style> tag after Swipe Up's own styles.

  • By default Swipe Up will try to use HTML5 Fullscreen API if user-agent will be support it, falling back to classic "swipe up" functionality otherwise. If for some reason above API is not fitting your needs, it can be turned-off with useHtml5FullScreenWhenPossible option

  • If you need to support QQ EN, QQ CN, UC EN before 11.4.6 and/or other browsers not capable of screen.orientation API - you may supply Swipe Up with initialOrientation (which you can detect with window.innerWidth > window.innerHeight check). This will allow Swipe Up to detect states and orientation more correctly in edge cases like on-screen keyboard and split screens.

  • If you have business requirement to not show Swipe Up for example on all tablets - you will have to take care of this requirement yourself because there is not reliable cross-browser way to detect if device is a tablet. Swipe Up could help with this, but that would mean it should become dependent on Detect.js (To be hosted on Github soon) resulting into bigger bundle size. Use excludedUserAgents option and supply regular expression which will list iPad and all Android tablets which your business care of, e.g. excludedUserAgents : /(?:\WiPad\W|\WTablet\W|\WNexus (?:7|9|10)\W)|(\WSM-T80\W)/i which will disable Swipe Up on iPads, Firefox on any tablet, all Nexus tablets (7, 9, 10), and Samsung Galaxy Tab S 10.5. If you already use Detect.js things may become lots simpler, as you can supply function instead of RegExp. This function has to return true or false for current user-agent, and as so both libs can be combined like this: excludedUserAgents : () => Detect.Type.is(Detect.T.Tablet)