Wondering what’s next for npm?Check out our public roadmap! »

    pulling

    2.0.1 • Public • Published

    Pulling

    Flexible slideout menu for mobile webapps

    const panel = document.querySelector('#panel');
    const toggle = document.querySelectorAll('#toggle');
    const menu = document.querySelector('#menu');
    
    const pullin = Pulling.create({
      menu,
      panel,
    });
    
    toggle.addEventListener('click', () => pullin.toggle());

    Installation

    Pulling is available on npm.

    • npm install pulling
    • yarn add pulling

    Features

    • Flicking gesture support
    • Supports multiple slideout menus
    • Standalone, dependency-free
    • Simple markup
    • Native scrolling
    • Easy customization
    • CSS transforms & transitions
    • Two different display modes
    • Just 10 Kb!

    Usage

    You just need a panel for your main content and a menu element:

    <nav id="menu">
      <header>
        <h2>Menu</h2>
      </header>
    </nav>
    
    <main id="panel">
      <header>
        <h2>Panel</h2>
      </header>
    </main>

    Styling is simple, too. The library handles most things for you, so just add a background on your panel and menu, and add a min-height on the panel if you're using the reveal mode.

    Then include Pulling and set up the menu.

    const panel = document.querySelector('#panel');
    const menu = document.querySelector('#menu');
    
    const pullin = Pulling.create({
      menu,
      panel,
    });

    See test.html for a full example.

    Browser Support

    • Chrome (IOS, Android, desktop)
    • Firefox (Android, desktop)
    • Safari (IOS, Android, desktop)
    • Opera (desktop)
    • IE 10+ (desktop and mobile)

    API

    Pulling.create(options)

    Creates a new Pulling instance

    options

    • menu - Element

      DOM element of menu

    • panel - Element

      DOM element of panel

    • side - "left" | "right" (default: left)

      side menu should display on

    • mode - "drawer" | "reveal" (default: drawer)

      whether the menu slide over the panel (drawer) or the panel should slide to reveal the menu (reveal)

    • margin - number (default: 25)

      the number of pixels from the edge of the viewport in which a touch event will be accepted

    • timing - number (default: 200)

      milliseconds of the transition animation for opening and closing, in the case where it isn't pulled out manually

    • timingFunction - string (default: ease)

      CSS3 transition timing function

    • width - number (default: 256)

      width of menu in pixels

    • sensitivity - number (default: 0.25)

      the speed needed to activate a flick

    • slope - number (default: 0.5)

      maximum ratio of vertical touch movement to horizontal touch movement that should be accepted

    • touch - boolean (default: true)

      Enable touch functionality

    • ignoreScrollables - boolean (default: true)

      Ignore horizontally scrollable elements

    Instance Methods

    All methods are chainable

    #open()

    Opens the menu. Emits beforeopen and opened events.

    #close()

    Closes the menu. Emits beforeclose and closed events.

    #toggle(condition?: boolean)

    Toggles the state of the menu (closed -> open, open -> closed).

    • If condition === true, it opens the menu
    • If condition === false, it closes the menu

    #on(eventName: string, handler: Function)

    Add an event handler for the event

    #off(eventName: string, handler?: Function)

    Remove an event handler for the event, or remove all handlers for the event

    #ignore(selector: string)

    Ignore touch events from a specific selector

    #unignore(selector: string)

    Remove selector from ignore list. Will not override ignored selectors.

    #disable()

    Disable all functionality of the menu

    #enable()

    Enable the menu's functionality

    #disableTouch()

    Disable touch event functionality for this menu

    #enableTouch()

    Enable touch event functionality for this menu

    Events

    • beforeclose
      Emitted before close begins, including when dragging closed with touch
    • closed
      Emitted after close completes
    • beforeopen
      Emitted before open begins, including when dragging open with touch
    • opened
      Emitted after open completes
    • touchstart
      Emitted when a touch movement begins
    • touchmove
      Emitted on every movement due to touch
    • touchend
      Emitted when a touch movement ends

    You can use these to support multiple menus by disabling one when the other opens:

    pullinLeft.on('beforeopen', () => pullinRight.disableTouch());
    pullinLeft.on('closed', () => pullinRight.enableTouch());
    pullinRight.on('beforeopen', () => pullinLeft.disableTouch());
    pullinRight.on('closed', () => pullinLeft.enableTouch());

    State

    • .state.closed - boolean
    • .state.closing - boolean
    • .state.open - boolean
    • .state.opening - boolean

    FAQ

    How do I prevent it from opening when scrolling through a carousel?

    You can either use .ignore(selector) to add the specific element selector to the ignore list, or you can do .ignore('[data-pullin-ignore]') to add that selector the the list and then just add the data-pullin-ignore attribute to every element you want ignored.

    How do I add a toggle button?

    // vanilla js
    document.querySelector('.toggle-menu').addEventListener('click', () => pullin.toggle());
    
    // jQuery
    $('.toggle-menu').on('click', () => pullin.toggle());

    How do I use two menus, one on each side?

    You'll want to use events to keep one menu disabled while the other is open.

    pullinLeft.on('beforeopen', () => {
      pullinRight.close().disableTouch();
    });
    pullinLeft.on('closed', () => pullinRight.enableTouch());
    pullinRight.on('beforeopen', () => {
      pullinLeft.close().disableTouch();
    });
    pullinRight.on('closed', () => pullinLeft.enableTouch());

    Install

    npm i pulling

    DownloadsWeekly Downloads

    375

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    311 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar