{{menu.currentSection.name}}
This is my app
+
+* [Features](#features)
+* [Support](#support)
+* [Installation](#installation)
+* [Usage](#usage)
+* [Settings & Defaults](#settings-and-defaults)
+* [Public Methods](#public-methods)
+* [Gotchas](#gotchas)
+* [FAQ's](#faq)
+* [Compliments](#compliments)
+* [Licensing](#licensing)
+* [Extras](#extras)
+
+## Features
+* Library Independent
+* High Customization
+* Flick Support
+* User Intent Detection
+* Disable Hyperextension
+* Event Hooks
+* CSS3 Powered Animations with IE fallbacks
+* Drag Support
+* Drag Handle Support
+* Programatic API
+* "No-Drag" Elements
+* Definable Easing Mode
+* Enable/Disable Events
+* Disabled Sides (left or right)
+* Supports [Ratchet](http://maker.github.com/ratchet/) (with templates!)
+
+## Support
+* Firefox 10+
+* Wide Webkit Support (including Android WebKit 2.3.X)
+* IE 10
+* IE 9 Supports Toggling, Dragging but no Transitions
+* IE 7/8 Supports Toggling but no dragging or Transitions
+
+## Installation
+
+As standalone just include the file in a script tag:
+
+```html
+
+```
+
+As a web component do:
+
+```shell
+$ component install jakiestfu/Snap.js
+```
+
+## Usage
+
+```javascript
+var snapper = new Snap({
+ element: document.getElementById('content')
+});
+```
+
+## Settings and Defaults
+```javascript
+settings = {
+ element: null,
+ dragger: null,
+ disable: 'none',
+ addBodyClasses: true,
+ hyperextensible: true,
+ resistance: 0.5,
+ flickThreshold: 50,
+ transitionSpeed: 0.3,
+ easing: 'ease',
+ maxPosition: 266,
+ minPosition: -266,
+ tapToClose: true,
+ touchToDrag: true,
+ slideIntent: 40,
+ minDragDistance: 5
+}
+```
+
+* `element`: The element which the user will be sliding side to side
+* `dragger`: The element which the user will be using to slide the target element side to side
+* `disable`: String, set to 'left' or 'right' to disable the respective side
+* `addBodyClasses`: Add classes to the body to signify which side is being opened
+* `hyperextensible`: If false, pane may not be slide past the minPosition and maxPosition
+* `resistance`: The cooeficcient used to slow sliding when user has passed max or min threshold
+* `flickThreshold`: Number of pixels the user needs to swiftly travel to activate a "flick" open
+* `transitionSpeed`: The speed at which the pane slides open or closed
+* `easing`: The CSS3 Easing method you want to use for transitions
+* `maxPosition`: Maximum number of pixels the pane may be slid to the right
+* `minPosition`: Maximum number of pixels the pane may be slid to the left
+* `tapToClose`: If true, tapping an open pane will close it
+* `touchToDrag`: If true, dragging the target `settings.element` will open/close the pane
+* `minDragDistance`: The minimum amount of pixels the user needs to drag within the `slideIntent` degrees to move the pane
+* `slideIntent`: The number of degrees the user must initiate sliding in towards the left or right (see diagram below)
+
+Notes on Slide Intent: The slide intent is an int between 0 and 90, and represents the degrees in the first quadrant of a circle that you would like to have mirrored on the X *and* Y axis. For example, if you have 40 set as your `slideIntent` value, the user would only be able to slide the pane by dragging in the blue area in the diagram below. Once intent has been defined, it will not change until the user releases.
+
+
+
+
+## Public Methods
+
+### `open`: Opens the pane to the specified side
+
+```javascript
+snapper.open('left');
+// OR
+snapper.open('right');
+```
+
+### `close`: Closes the pane
+
+```javascript
+snapper.close();
+```
+
+### `expand`: Opens the pane entirely
+
+```javascript
+snapper.expand('left');
+// OR
+snapper.expand('right');
+```
+
+### `disable`: Disables sliding events
+
+```javascript
+snapper.disable();
+```
+
+### `enable`: Enables sliding events after disabling
+
+```javascript
+snapper.enable();
+```
+
+### `on`: Adds an event hook
+
+```javascript
+snapper.on('start', function(){
+ // Do Something
+});
+```
+The available methods to hook into are as follows:
+
+* `start`: Fired when touching down on the draggable pane and it begins to move
+* `drag`: Fired when the pane has been moved or slid
+* `end`: Fired when the pane has been let go of
+* `animating`: Fired when the pane is animating
+* `animated`: Fired when the pane is finished it's animations
+* `ignore`: Fired when trying to drag the pane but ended up dragging on an ignored element
+* `close`: Fired when close is called directly or if tapToClose is set to true
+* `open`: Fired when the menu is opened
+* `expandLeft`: Fired on expand('left')
+* `expandRight`: Fired on expand('right')
+* `enable`: Fired on enable
+* `disable`: Fired on disable
+
+### `off`: Removes an event hook
+
+```javascript
+snapper.off('drag');
+```
+The event names listed above apply for the `off` method.
+
+
+### `settings`: Updates the settings for an already instantiated object
+```javascript
+snapper.settings({yourSettings});
+```
+Currently, `settings.element`, `settings.touchToDrag` cannot be updated. To update the element, instantiate a new object. To allow listening to a drag, use `snapper.enable()`
+
+### `state`: Returns detailed information about the state of the pane
+
+```javascript
+var data = snapper.state();
+```
+The data returned from the `state` method will look like the following:
+
+```javascript
+{
+ state: "closed", // State of the Pane
+ info:{
+ opening: "left", // Side which user intends to open
+ towards: "right", // Direction user is dragging towards
+ hyperExtending: false, // True if user is pulling past predefined bounds
+ halfway: false, // True if pane is at least halfway open
+ flick: false, // True if user has moved pane X amount of pixels in the open/close direction without changing directions
+ translation:{
+ absolute: 20, // Pixels pane has translated
+ relative: 21, // Pixels pane has translated relative to starting translation
+ sinceDirectionChange: 10, // Pixels pane has translated since the direction of the pane has changed
+ percentage: 40.571649 // The percentage that the Pane is open. Good or animating other things
+ }
+ }
+}
+```
+
+## Gotchas
+
+### Layout
+The layout itself is what most people will have a hard time emulating, so the simplest approach I have found is as follows:
+
+Two absolute elements, one to represent *all* the content, and another to represent *all* the drawers. The content has a higher z-index than the drawers. Within the drawers element, it's direct children should represent the containers for the drawers, these should be `fixed` or `absolute`. Assigning classes to your drawers to specify which side it is on is recommended. All absolutely positioned elements should have 0 for `top, left, right, bottom` properties, excluding your panes which will have `auto` set to their respective sides and a width assigned. The width of your drawers is usually the same number you want to use for `minPosition` and `maxPosition`
+
+```html
+div.drawers {position: absolute;}
+ div.left-drawer {position: absolute;}
+ [content]
+ div.right-drawer {position: absolute;}
+ [content]
+div#content {position: absolute;}
+ [top-bars]
+ [content] {overflow: auto}
+ [bottom-bars]
+```
+
+A sample layout is found in demo/apps/default.html.
+
+### Independent Scrolling
+Some CSS is required to get some smooth ass scrolling. Utilize the CSS below to apply this to any of your elements:
+```css
+.scrollable{
+ overflow: auto;
+ -webkit-transition-property: top, bottom;
+ transition-property: top, bottom;
+ -webkit-transition-duration: .2s, .2s;
+ transition-duration: .2s, .2s;
+ -webkit-transition-timing-function: linear, linear;
+ transition-timing-function: linear, linear;
+ -webkit-overflow-scrolling: touch;
+}
+```
+
+### Z-Indeces and Display
+Because of the nature of this code, drawers are just kind of stacked behind the content. To bring the proper drawer to the front, you can hook into Snaps.js' CSS classes:
+
+With `addBodyClasses` set to `true` in your initialize options, one of the two classess will be added to the body tag: `.snapjs-left` or `.snapjs-right`, depending on which pane is being open, respectively. This being said, you can apply your CSS like the following to show the proper drawers:
+
+```css
+.snapjs-right .left-drawer,
+.snapjs-left .right-drawer {
+ display: none;
+}
+```
+
+## FAQ
+
+### - How do I make a toggle button?
+Toggles have been a popular request, but rather than bog the library down with additional methods, you can utilize the powerful API of Snap.js to create your own toggle. Toggles can be done like the following:
+
+```javascript
+myToggleButton.addEventListener('click', function(){
+
+ if( snapper.state().state=="left" ){
+ snapper.close();
+ } else {
+ snapper.open('left');
+ }
+
+});
+```
+
+### - How do I disable Snap.js dragging for my touch slider?
+Snap.js supports cascading cancellation of events via a data attribute `data-snap-ignore`. If you were to use a slider, your markup might look like the following:
+
+```html
+
The class names demo shows how you can utilize the classess added by Snap.js to adjust hidden content. In this case, we're showing the same menu on both sides of the app via CSS and classess.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
+Expanding is when the app disappears completely and the entire app's drawer takes up the usable space. Good for searching
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
+The Default demo shows basic Snap.js functionality
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
+Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resorces:
+This demo has the menu on the right side disabled
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
You can update the settings of an instantiated snap object by calling the settings method.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
You can define the width of your app's sliding space
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.
Toggles are easy to create. Snap.js gives you the state of the pane and allows you to make decisions simply.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.