Panels for skelJS Overview v0.4.9

Panels for skelJS
v0.4.9
Overview
The Panels plugin for skelJS gives you access to two very useful UI elements: panels, which are toggleable areas docked to the sides of the viewport,
and overlays, which are always-visible areas anchored to the edges of the viewport. What makes them so useful, you ask?
Fast Setup
Set a few options, write a bit of HTML and CSS for each panel/overlay and hey, you're done! Panels takes care of the rest.
Breakpoint Linkable
Panels and overlays can be linked to specific breakpoints so they only appear when those breakpoints are active – all handled
automatically and without any additional work on your part.
Smart
Use Actions to make your panels and overlays smarter and easier to manage. Automatically populate your mobile navigation panel
or even turn your sidebar into one when the viewport gets too narrow. Actions let you do all of this and much more.
Unlimited
Add as many panels and overlays as you like. There's no limit.
An Example
Here's a (somewhat) over-the-top example that demonstrates panels, overlays, and breakpoint linking in action. Cycle through each of the four
breakpoints to see what happens (PS: click the envelope icon at the bottom).
narrow
narrower
mobile
Example
Home
About Me
Blog
Contact
Hello world.
Lorem ipsum dolor sit amet sed magna etiam adipiscing.
Left Sidebar
Content
Right Sidebar
Lorem ipsum dolor sit amet
Lorem ipsum dolorsit amet sed magna etiam adipiscing elit.
Lorem ipsum dolor sit amet
sed magna etiam elit. lorem
adipiscing elit nec fringilla urna tempor in. Cras et sodales
sed magna etiam elit. lorem
elit nec fringilla urna sed
consectetur viverra lorem ipsum. Lorem ipsum dolor sit amet
elit nec fringilla urna sed
Want a closer look? Download this example.
Setting Up
1. Load dependencies
Panels requires jQuery (1.9.x and up) and of course skelJS to do its thing, so load those first (and in the case of skelJS, configure it):
2. Pick a Configuration Style
Panels uses a JSON-like configuration that can be defined in one of two ways:
Inline
Preconfigured
As with skelJS, Inline is great for testing, while Preconfigured is the better way to go for production. For the sake of simplicity we'll be using Inline
throughout this documentation.
3. Get Configured
Here's a sample configuration:
Head on down to Usage for specifics on panels and overlays, or the Configuration Reference for a full list of configuration options.
Usage
Panels
A panel is a block of content docked to either the top, right, bottom, or le< side of the viewport. Initially hidden, it will slide in when its associated toggle
element is clicked or tapped by the user. Panels are useful for storing content that doesn't always need to be visible, but should still be easy to access
when needed (for example, main navigation links on a mobile device). A simple panel configuration looks a bit like this:
For more panel options, check out the Configuration Reference.
Overlays
An overlay is a block of content anchored ("fixed") to a specific edge or corner of the viewport and displayed above everything else, making them ideal
for holding persistent content (like a title bar or a user dashboard). A simple overlay configuration looks a bit like this:
For more overlay options, check out the Configuration Reference.
Advanced
Breakpoints
Each panel and overlay can (optionally) link to the breakpoints defined in your skelJS configuration. When linked, a panel/overlay will only be enabled
when a particular breakpoint is active. For example, on a small display (like that of a mobile device), you may decide to move your main navigation into
a panel to make it more accessible. By linking that panel to just your mobile breakpoint, you can do exactly that. For example:
For more on breakpoint linking, see the breakpoints option.
Actions
Actions give elements within the contents of a panel/overlay the ability to do special stu@ (like toggle panels on/o@, or even move and copy other page
elements). To assign an element an action, simply give it the following attributes:
data-action
The action, a full list of which can be found here.
data-args
A comma-separated list of arguments for the action (if required).
Here's an example:
You can also assign actions to an element outside the contents of a panel/overlay by assigning it the
For more on actions, see the Actions Reference.
skel-panels-include
class:
Inline HTML
By default, Panels will look for the contents of each panel/overlay in your configuration (via the html option). If you'd rather define your contents inline
(ie. with the rest of your HTML), simply omit the html option and set up an element with your panel/overlay's ID. For example:
Fixed Position Elements
Panels relies on CSS transforms to ensure its animations are fast and fluid. However, because these also have a nasty habit of breaking fixed position
elements, extra preparation is needed to get overlays (which are themselves fixed position elements) working as expected. If you want this extra
preparation extended to your own fixed position elements, simply give them the
skel-panels-fixed
class, like so:
Actions Reference
copyHTML
Argument 1
ID of target element
Gets the contents of the target element (using jQuery.html()) and copies it to this one.
copyText
Argument 1
ID of target element
Gets the contents of the target element (using jQuery.text()) and copies it to this one.
moveCell
Argument 1
ID of target grid cell
Argument 2
ID of absorbing grid cell
Moves the target grid cell to this one (making it this element's child). The target's cell width is then transferred to the absorbing grid cell.
moveElement
Argument 1
ID of target element
Moves the target element to this one (making it this element's child). Since the target element is moved and not copied, anything tied to it and its
children (including events) will remain intact.
moveHTML
Argument 1
ID of target element
Moves the contents of the target element to this one. Since the contents is moved and not copied, anything tied to elements within the target
(including events) will remain intact.
togglePanel
Argument 1
ID of panel
Toggles the target panel on/o@ when clicked or tapped. Usually assigned to an element within an overlay.
Configuration Reference
Options
baseZIndex
Type
Integer
Default
10000
Base Z-index of all panels and overlays. Must be the highest Z-index on the page (or else things might get weird).
speed
Type
Integer
Default
250
Global animation speed (in ms).
useTransform
Type
Boolean
Default
true
Determines if the CSS transform property can be used for animations (where available).
Note: CSS transforms don't play well with
panels
Type
Panel Options
Default
null
Your panels, listed in the following format:
overlays
Type
Overlay Options
Default
null
Your overlays, listed in the following format:
Panel Options
breakpoints
position: fixed
elements, so setting this to false is advised if your code relies on them.
Type
String
Default
null
Comma-separated list of breakpoints at which the panel should be enabled. If omitted, the panel will always be enabled.
position
Type
String
Default
null
Side of the viewport to dock the panel. Can be "top", "right", "bottom", or "le ". More than one panel can be docked to a given side.
style
Type
String
Default
null
Animation style of the panel. Can be "push" (panel slides in, "pushing" the page over in the process) or "reveal" (page slides over to "reveal" the
panel beneath it; le</right panels only).
size
Type
String
Default
"80%"
Size of the panel. Can be any valid CSS measurement (eg. 300, "300px", "20em", "80%"). In the case of le</right panels this sets the panel's width,
whereas in the case of top/bottom panels this sets the panel's height.
html
Type
String
Default
""
Contents of the panel. If omitted or le< blank, the panel will look for an existing element by its own ID and, if found, use that for its contents.
resetScroll
Type
Boolean
Default
true
If true, the panel will, when closed, reset its scroll position.
resetForms
Type
Boolean
Default
true
If true, the panel will, when closed, reset any form elements it might contain.
swipeToClose
Type
Boolean
Default
false
If true, the panel can be closed with a swipe (only applies to le</right panels).
Overlay Options
breakpoints
Type
String
Default
null
Comma-separated list of breakpoints at which the overlay should be enabled. If omitted, the overlay will always be enabled.
position
Type
String
Default
null
Edge of the viewport to anchor the overlay. Can be "top-le ", "top-center", "top-right", "middle-le ", "middle-right", "bottom-le ", "bottom-center",
or "bottom-right". More than one overlay can be anchored to a given edge.
width
Type
String
Default
0
Width of the overlay. Can be any valid CSS measurement (eg. 300, "300px", "20em", "80%").
height
Type
String
Default
0
Height of the overlay. Can be any valid CSS measurement (eg. 44, "44px", "1.5em", "20%").
html
Type
String
Default
""
Contents of the overlay. If omitted or le< blank, the overlay will look for an existing element by its own ID and, if found, use that for its contents.
MIT Licensed
GitHub
Product of n33.