• This repository has been archived on 05/Aug/2020
  • Stars
    star
    453
  • Rank 96,573 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 11 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Off-Canvas flyout menu

Mobify Pikabu

A mobile-first content fly-in UI plugin.

Bower version Dependency Status Circle CI

Dependencies

Velocity

If you are using Zepto, you need to load bower_components/mobify-velocity/velocity.js (this file comes with a jQuery shim bundled directly in it). If you are using jQuery, you need to load bower_components/velocity/jquery.velocity.js.

jQuery Support

Pikabu supports jQuery but is not actively developed for it. You should be able to use Pikabu directly with jQuery 2.0. While we don't actively support jQuery for Pikabu, we welcome any and all issues and PRs to help us make it work.

Installation

Pikabu can be installed using bower:

bower install pikabu

Usage with Require.js

We highly recommend using Require.js with Pikabu. To use Require, you have to reference Pikabu, Pikabu's effect modules, and Pikabu's dependencies inside your require config file:

{
    'paths': {
        'plugin': 'bower_components/plugin/dist/plugin.min',
        'pikabu': 'bower_components/pikabu/dist/pikabu.min',
        'shade': 'bower_components/shade/dist/shade.min',
        'lockup': 'bower_components/lockup/dist/lockup.min',
        'deckard': 'bower_components/deckard/dist/deckard.min',
        'bouncefix': 'bower_components/bouncefix.js/dist/bouncefix.min',
        'velocity': 'bower_components/mobify-velocity/velocity',
        // or jQuery version 'velocity': 'bower_components/mobify-velocity/jquery.velocity',
        
        'drawer-left': 'bower_components/pikabu/dist/effect/drawer-left',
        'drawer-right': 'bower_components/pikabu/dist/effect/drawer-right'
        // There are a few more within the 'effect' folder
    }
}

And then require Pikabu in as needed:

define([
    'zepto',
    'modal-center',
    'pikabu'
    ],
    function($, modalCenter) {
        $('.pikabu').pikabu({
            effect: modalCenter
        });
    }
);

Usage

Pikabu requires very minimal markup. All Pikabu needs is a div with your content and it will automatically transform into what we need.

To avoid any unwanted FOUT, decorate the content you will be passing to Pikabu with the hidden attribute. We will remove that attribute when Pikabu is initialized.

For accessibility and functional purposes, Pikabu will wrap all of your body content in a wrapping container. This could conflict with other plugins that alter your page's markup. If you're seeing issues, try initializing Pikabu after your other plugins. If you want to specify your own wrapping container, add a class of lockup__container to the element. This element should be a root level element to be effective. You can also pass Pikabu a container parameter.

<!-- Include the CSS -->
<link rel="stylesheet" href="pikabu.min.css">

<!-- Optionally include the Theme file -->
<link rel="stylesheet" href="pikabu-style.min.css">

<!-- Optionally include a wrapping container -->
<div id="bodyContent" class="pikabu__body-wrapper">
    Your specified body content
</div>

<!-- Include the markup -->
<div id="yourPikabu" hidden>
    Your pikabu content
</div>

<!-- Include dependencies -->
<script src="zepto.min.js"></script>
<script src="velocity.min.js"></script>
<script src="plugin.min.js"></script>
<script src="shade.min.js"></script>
<script src="lockup.min.js"></script>
<script src="deckard.min.js"></script>
<script src="bouncefix.min.js"></script>

<!-- Include the effect module you want to use -->
<script src="effect/drawer-left.js"></script>
<!-- Include pikabu.js -->
<script src="pikabu.min.js"></script>

<!-- Construct Pikabu -->
<script>$('#yourPikabu').pikabu()</script>

Initializing the plugin

pikabu()

Initializes the pikabu.

$('#myPikabu').pikabu({
    effect: modalCenter
});

You can also initialize the Pikabu through the use of a data attribute. The attribute takes a value equal to the effect you want to use.

<div id="myPikabu" data-pikabu="sheet-bottom">

You must pass Pikabu an effect for it to work.

pikabu(options)

Initialize with options.

$('#myPikabu').pikabu({
    effect: sheetBottom,
    container: '#container',
    structure: {
        header: 'My Pikabu Title',
        footer: false
    },
    zIndex: 2,
    cssClass: 'my-pikabu-class',
    coverage: '100%',
    easing: 'swing',
    duration: 200,
    shade: {
        color: '#404040'
    },
    open: noop,
    opened: noop,
    close: noop,
    closed: noop
});

Options

effect

default: { open: noop, close: noop },

Specifies which effect module Pikabu should use when opening. Effect modules allow you to load specific functionality that tell Pikabu how to open and close. Available effect modules can be found in the dist/effect folder. Current effect modules include:

  • Modal Center - opens Pikabu in the center of the screen
  • Sheet Top - slides down from the top of the screen
  • Sheet Bottom - slides up from the bottom of the screen
  • Sheet Left - slides in from the left of the screen
  • Sheet Right - slides in from the right of the screen
$('#myPikabu').pikabu({
    effect: sheetLeft
});

container

default: $container (lockup's container)

Specify the container Pikabu will be created within

$('#myPikabu').pikabu({
    container: $('#mainForm') // or container: '#mainForm'
});

appendTo

default: null

Specify the element Pikabu will be appended to. By default Pikabu will be appended to the lockup container. If you want it to be appended outside the lockup container, specify that element here.

$('#myPikabu').pikabu({
    appendTo: 'body'
});
structure

default: { header: '', footer: false }

Defines the structure to use for Pikabu. Specifically, Pikabu tries to build its own HTML structure if passed the default options.

If you want to have full control over the HTML of your Pikabu, including the header, footer, and content section, set structure: false. Setting structure: false will still allow the close event to be bound to any element that has the pikabu__close class, allowing you to specify the element that should trigger closing your Pikabu.

If you are using structure: false, you will need to structure your HTML to include the following elements (missing any elements will cause Pikabu to not function):

<div id="myPikabu" class="pikabu__wrapper" role="document" hidden>
    <div class="pikabu__header">
        <a class="pikabu__close">close</a>
    </div>
    <div class="pikabu__content pikabu--is-scrollable"></div>
    <div class="pikabu__footer"></div>
</div>

Please see below for available sub-options for header and footer.

structure.header

default: ''

Sets the header that Pikabu should use in its header bar. Valid values are:

  • boolean - specifies no default header generated. If chosen, the user is required to specify the header markup themselves, including the appropriate class, pikabu__header. It will be expected that this will be a part of the element that is used to invoke pikabu.
  • string - specifies the title text used in the header. The header structure will be generated automatically.
  • html|element - specifies the HTML to be used for the header.
// generates no header
$('#myPikabu').pikabu({
    structure: {
        header: false
    }
});

or

// generates a default header with the title "My Pikabu"
$('#myPikabu').pikabu({
        structure: {
            header: 'My Pikabu'
        }
    });

or

$('#myPikabu').pikabu({
    structure: {
        header: '<header class="pikabu__header">My Pikabu<button class="pikabu__close">Close</button></header>'
    }
});
structure.footer

default: false

Sets the footer that Pikabu should use in its footer. Valid values are:

  • boolean - specifies no default footer generated. If chosen, the user is required to specify the footer markup themselves, including the appropriate class, pikabu__footer.
  • string - specifies the title text used in the footer. The footer structure will be generated automatically.
  • html|element - specifies the HTML to be used for the footer.
// generates no footer
$('#myPikabu').pikabu({
    structure: {
        footer: false
    }
});

or

// generates a default footer with the contents "My Footer"
$('#myPikabu').pikabu({
    structure: {
        footer: 'My Footer'
    }
});

or

$('#myPikabu').pikabu({
    structure: {
        footer: '<footer class="pikabu__footer">My Footer</footer>'
    }
});
zIndex

default: 2

Sets the z-index value for Pikabu. Use this value if you need to specify a specific stacking order.

$('#myPikabu').pikabu({
    zIndex: 10
});
cssClass

default: ''

Sets a class to apply to the main Pikabu parent element for ease of styling.

#('#myPikabu').pikabu({
    cssClass: 'my-pikabu-class'
});
coverage

default: 80%

Sets the coverage value. This will allow you to specify that the pikabu covers only a portion of the screen.

$('#myPikabu').pikabu({
    coverage: '80%'
});
duration

default: 200

Sets the duration for the animation.

$('#myPikabu').pikabu({
    duration: 600
});
shade

default: {}

Specifies whether pikabu should use the shade overlay. You can pass options through to Shade using this property. For more information on available options, see the Shade documentation.

Warning: We currently force Shade's duration to match the one provided to Pikabu. This is to limit DOM thrashing as much as possible during Pikabu's animation. Pikabu hitches a little if we don't do this.

$('#myPikabu').pikabu({
    shade: {
        color: '#333333'
    }
});
easing

default: swing

Sets the easing for the animation. Pikabu takes all of the same easing properties that Velocity.js accepts.

  • jQuery UI's easings and CSS3's easings ("ease", "ease-in", "ease-out", and "ease-in-out"), which are pre-packaged into Velocity. A bonus "spring" easing (sampled in the CSS Support pane) is also included.
  • CSS3's bezier curves: Pass in a four-item array of bezier points. (Refer to Cubic-Bezier.com for crafing custom bezier curves.)
  • Spring physics: Pass a two-item array in the form of [ tension, friction ]. A higher tension (default: 600) increases total speed and bounciness. A lower friction (default: 20) increases ending vibration speed.
  • Step easing: Pass a one-item array in the form of [ steps ]. The animation will jump toward its end values using the specified number of steps.

For more information, check out Velocity's docs on easing.

$('#myPikabu').pikabu({
    easing: 'ease-in-out'
});
open

default: function(e, ui) {}

Triggered every time the selected pikabu item is starting to open.

Parameters

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('#myPikabu').pikabu({
    open: function(e, ui) {
        // ui.item contains the item opening
    }
});
opened

default: function(e, ui) {}

Triggered every time the selected pikabu item has finished opening.

Parameters

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('#myPikabu').pikabu({
    opened: function(e, ui) {
        // ui.item contains the item that opened
    }
});
close

default: function(e, ui) {}

Triggered every time an pikabu item is starting to close.

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('#myPikabu').pikabu({
    close: function(e, ui) {
        // ui.item contains the item closing
    }
});
closed

default: function(e, ui) {}

Triggered every time an pikabu item is finished closing.

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('#myPikabu').pikabu({
    closed: function(e, ui) {
        // ui.item contains the item that closed
    }
});

Methods

Open

Open the selected pikabu item by element reference

$pikabu.pikabu('open');

Close

Close the selected pikabu item by element reference

$pikabu.pikabu('close');

Pikabu will automatically trigger close on elements decorated with the class name pikabu__close.

<button class="pikabu__close">Close</button>

Browser Compatibility

Browser Version Support
Mobile Safari 5.1.x Degraded. Form inputs cause scroll issues while typing.
Mobile Safari 6.0+ Supported.
Chrome (Android) 1.0+ Supported.
Android Browser 4.0+ Degraded. No scroll locking.
IE for Win Phone 8.0+ Degraded. No scroll locking.
Firefox (Android) 23.0+ Supported. (Support may exist for earlier versions but has not been tested)

Known Issues

Currently, form inputs and selects inside of Pikabu have issues on iOS7 and under. This is due to not being able to lock scrolling without causing rendering issues as well as iOS attempting to scroll the page when the keyboard opens. Forms work but will cause some visual jumping.

Building a distribution

Requirements

Steps

  1. npm install
  2. bower install
  3. grunt build

The dist directory will be populated with minified versions of the css and javascript files for distribution and use with whatever build system you might use. The src directory has our raw unminified Sass and Javascript files if you prefer to work with those.

License

MIT License. Pikabu is Copyright © 2014 Mobify. It is free software and may be redistributed under the terms specified in the LICENSE file.

More Repositories

1

mobifyjs

Mobify.js was a JavaScript framework for optimizing sites for mobile. It is no longer actively maintained.
JavaScript
646
star
2

iterstuff

Useful tools for working with iterators
Python
169
star
3

bellows

A responsive, mobile-first accordion UI module for progressive disclosure on the web.
JavaScript
140
star
4

branching-strategy

🔀 Branching strategies! For Git!
135
star
5

scooch

A mobile-first JavaScript-driven content and image carousel
JavaScript
125
star
6

mobify-code-style

📚 Mobify's coding style and standards!
Python
117
star
7

handbooks

A collection of Mobify's internal handbooks and styleguides
90
star
8

developer-values

🙌 Principles to follow when building software.
76
star
9

commercecloud-ocapi-client

Salesforce Commerce Cloud Open Commerce API (OCAPI) for Node and browsers 🛒
JavaScript
70
star
10

nightwatch-commands

A set of Mobify specific custom commands for Nightwatch.js
JavaScript
60
star
11

magnifik

An image zooming module for mobile
JavaScript
54
star
12

sass-sleuth

Adapts Webkit Web Inspector to handle Sass line number debugging information
36
star
13

mobify-client

Mobify CLI and Tools for use with the Mobify.js Adaptation Framework
JavaScript
23
star
14

pinny

A mobile-first content fly-in UI plugin
JavaScript
23
star
15

mobify-modules

DEPRECATED! See https://github.com/mobify/mobify.github.io
CSS
23
star
16

meowbify

🐈 Meowbify
CoffeeScript
17
star
17

mobifyjs-demos

Demo mobile sites created using Mobify.js
JavaScript
15
star
18

hijax

XHR Proxy to intercept AJAX calls independent of libraries.
JavaScript
13
star
19

spline

⚠️ DEPRECATED. Spline is a mixin and function library for Sass. It makes writing stylesheets for mobile-first builds faster and easier. Spline provides methods to manipulate text, use web & icon fonts, create CSS3 shapes, and much more.
CSS
11
star
20

ui-kit

📱 Quickly and efficiently design PWAs for ecommerce brands.
10
star
21

hybris-occ-client

🛍 Hybris Omni Commerce Connect (OCC) client for Node and browsers.
HTML
9
star
22

capturejs

Transform your DOM to be your API for your front-end application
JavaScript
9
star
23

mobify-data-guide

📚 List of readings that would be useful in getting started on with working with any data set.
7
star
24

vellum

Default project styles for a mobile-first AdaptiveJS build.
HTML
5
star
25

redux-runtypes-schema

Redux store validation via runtypes
TypeScript
5
star
26

deckard

Device OS and Browser detection
HTML
5
star
27

astro-scaffold

🏗 Starting point for building Astro applications!
JavaScript
4
star
28

split-test

An A/B split test library for persisting split choices
JavaScript
4
star
29

stencil

DEPRECIATED - The latest Stencil development is currently taking place in the Adaptive.js repo.
CSS
4
star
30

imageresize-client

Client code for the Mobify image resizing API
HTML
4
star
31

hora.js

Hora.js: Custom Google Analytics Tracking
HTML
3
star
32

lockup

A mobile first scroll blocking plugin.
HTML
3
star
33

navitron

A mobile optimized sliding navigation plugin.
JavaScript
3
star
34

tozee

Alphabet scroll jumping
HTML
3
star
35

python-appfigures

API wrapper for the appfigures.com
Python
3
star
36

webpush-payload-encryption

Python code to handle the encryption of push notifications for Firefox and Chrome
Python
3
star
37

calypso

A set of tools for better Docker deployments to AWS Elastic Beanstalk.
Python
3
star
38

multiple-service-workers

Experimenting with multiple service workers
HTML
2
star
39

shade

A mobile-first plugin for creating scroll and touch blocking overlays for content
JavaScript
2
star
40

jazzcat-client

Client code for Mobify's javascript optimization service
JavaScript
2
star
41

level

⚠️ DEPRECATED. CST's own personal Normalize
CSS
2
star
42

styleandclass-planning

Style & Class Meetup Public Site
2
star
43

css-optimize

The client-library for optimizing CSS using the Jazzcat service
JavaScript
2
star
44

webpayments-test

💳 PaymentRequest browser API demo.
JavaScript
2
star
45

schemer

Schema comparison tool for Adaptive projects
JavaScript
2
star
46

dmit

Wrap docker-machine in useful functionality
Shell
2
star
47

descript

Manage desktop scripts in a simple way in Adaptive.js
HTML
2
star
48

heroku-buildpack-openssl

Buildpack for OpenSSL 1.0.2e on Heroku
Shell
2
star
49

selector-utils

Selector utility functions that can be selectively included in your Adaptive.js builds.
JavaScript
1
star
50

generator-nightwatch

A yeoman generator for Nightwatch testing framework
JavaScript
1
star
51

deprecated-mobify-tech-prtnr-na03-dw

The Demandware Demonstration Integration
CSS
1
star
52

stencil-fancy-select

A fancier select replacement component using Javascript
CSS
1
star
53

generator-progressive-web

❗️DEPRECATED❗️-- Generator for creating Progressive Web projects
Shell
1
star
54

adaptivejs-split-test-examples

Split test examples for Adaptive.js!
JavaScript
1
star
55

depot

A collection of mobile-focused lo-fi wireframe components built in Photoshop.
1
star
56

stencil-tabs

JavaScript
1
star