Commit e3dd6e5d authored by nextime's avatar nextime

Add new snap.js

parent 508f458b
#################
## Eclipse
#################
*.pydevproject
.project
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.classpath
.settings/
.loadpath
# External tool builders
.externalToolBuilders/
# Locally stored "Eclipse launch configurations"
*.launch
# CDT-specific
.cproject
# PDT-specific
.buildpath
#################
## Visual Studio
#################
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
# User-specific files
*.suo
*.user
*.sln.docstates
# Build results
[Dd]ebug/
[Rr]elease/
*_i.c
*_p.c
*.ilk
*.meta
*.obj
*.pch
*.pdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.vspscc
.builds
*.dotCover
## TODO: If you have NuGet Package Restore enabled, uncomment this
#packages/
# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opensdf
*.sdf
# Visual Studio profiler
*.psess
*.vsp
# ReSharper is a .NET coding add-in
_ReSharper*
# Installshield output folder
[Ee]xpress
# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html
# Click-Once directory
publish
# Others
[Bb]in
[Oo]bj
sql
TestResults
*.Cache
ClientBin
stylecop.*
~$*
*.dbmdl
Generated_Code #added for RIA/Silverlight projects
# Backup & report files from converting an old project file to a newer
# Visual Studio version. Backup files are not needed, because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
############
## Windows
############
# Windows image file caches
Thumbs.db
# Folder config file
Desktop.ini
#############
## Python
#############
*.py[co]
# Packages
*.egg
*.egg-info
dist
build
eggs
parts
bin
var
sdist
develop-eggs
.installed.cfg
# Installer logs
pip-log.txt
# Unit test / coverage reports
.coverage
.tox
#Translations
*.mo
#Mr Developer
.mr.developer.cfg
# Mac crap
.DS_Store
This diff is collapsed.
{
"name": "Snap.js",
"description": "A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)",
"version": "1.9.2",
"author": "Jacob Kelley <jakie8@gmail.com>",
"keywords": [
"mobile shelfs",
"nav",
"menu",
"mobile",
"side menu"
],
"license": "MIT",
"main": "snap.js",
"scripts": ["snap.js"]
}
<!DOCTYPE HTML><html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> </head> <body> <div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <h3>Snap.js</h3> <div class="demo-social"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a> <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a> <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe> </div> <h4>Demos</h4> <ul> <li><a href="default.html">Default</a></li> <li><a href="noDrag.html">No Drag</a></li> <li><a href="dragElement.html">Drag Element</a></li> <li><a href="rightDisabled.html">Right Disabled</a></li> <li><a href="hyperextend.html">Hyperextension Disabled</a></li> <li><a href="skinnyThreshold.html">Skinny Threshold</a></li> <li><a href="toggles.html">Toggles</a></li> <li><a href="classNames.html">Class Names</a></li> <li><a href="expand.html">Expanding</a></li> <li><a href="settings.html">Settings</a></li> <li><a href="ratchet/template.html">Ratchet</a></li> </ul> <div> <p>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.</p> <p>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.</p> </div> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div> <div id="content" class="snap-content" style="opacity:0.8;"> <div id="toolbar"> <a href="#" id="open-left"></a> <h1>Class Names</h1> </div> </div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('content') }); </script> <script type="text/javascript" src="../assets/demo.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </body></html>
\ No newline at end of file
<!DOCTYPE HTML><html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> </head> <body> <div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <h3>Snap.js</h3> <div class="demo-social"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a> <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a> <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe> </div> <h4>Demos</h4> <ul> <li><a href="default.html">Default</a></li> <li><a href="noDrag.html">No Drag</a></li> <li><a href="dragElement.html">Drag Element</a></li> <li><a href="rightDisabled.html">Right Disabled</a></li> <li><a href="hyperextend.html">Hyperextension Disabled</a></li> <li><a href="skinnyThreshold.html">Skinny Threshold</a></li> <li><a href="toggles.html">Toggles</a></li> <li><a href="classNames.html">Class Names</a></li> <li><a href="expand.html">Expanding</a></li> <li><a href="settings.html">Settings</a></li> <li><a href="ratchet/template.html">Ratchet</a></li> </ul> <div> <p>The Default demo shows basic Snap.js functionality</p> <p>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.</p> </div> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div> <div id="content" class="snap-content"> <div id="toolbar"> <a href="#" id="open-left"></a> <h1>Default</h1> </div> </div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('content') }); </script> <script type="text/javascript" src="../assets/demo.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </body></html>
\ No newline at end of file
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Snap.js</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<link rel="stylesheet" type="text/css" href="../../snap.css" />
<link rel="stylesheet" type="text/css" href="../assets/demo.css" />
</head>
<body>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<h3>Snap.js</h3>
<div class="demo-social">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
<a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
<iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
</div>
<h4>Demos</h4>
<ul>
<li><a href="default.html">Default</a></li>
<li><a href="noDrag.html">No Drag</a></li>
<li><a href="dragElement.html">Drag Element</a></li>
<li><a href="rightDisabled.html">Right Disabled</a></li>
<li><a href="hyperextend.html">Hyperextension Disabled</a></li>
<li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
<li><a href="toggles.html">Toggles</a></li>
<li><a href="classNames.html">Class Names</a></li>
<li><a href="expand.html">Expanding</a></li>
<li><a href="settings.html">Settings</a></li>
<li><a href="ratchet/template.html">Ratchet</a></li>
</ul>
<div>
<p>Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)</p>
<p>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.</p>
</div>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
</div>
<div id="content" class="snap-content">
<div id="toolbar">
<a href="#" id="open-left"></a>
<h1>Drag Element</h1>
</div>
<div id="do-drag">Drag Handle</div>
</div>
<script type="text/javascript" src="../../snap.js"></script>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('content'),
dragger: document.getElementById('do-drag')
});
</script>
<script type="text/javascript" src="../assets/demo.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Snap.js</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<link rel="stylesheet" type="text/css" href="../../snap.css" />
<link rel="stylesheet" type="text/css" href="../assets/demo.css" />
</head>
<body>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<div class="search">
<input type="text" id="search" placeholder="Search for Things">
</div>
<div class="drawer-inner">
<h3>Snap.js</h3>
<div class="demo-social">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
<a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
<iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
</div>
<h4>Demos</h4>
<ul>
<li><a href="default.html">Default</a></li>
<li><a href="noDrag.html">No Drag</a></li>
<li><a href="dragElement.html">Drag Element</a></li>
<li><a href="rightDisabled.html">Right Disabled</a></li>
<li><a href="hyperextend.html">Hyperextension Disabled</a></li>
<li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
<li><a href="toggles.html">Toggles</a></li>
<li><a href="classNames.html">Class Names</a></li>
<li><a href="expand.html">Expanding</a></li>
<li><a href="settings.html">Settings</a></li>
<li><a href="ratchet/template.html">Ratchet</a></li>
</ul>
<div>
<p>Expanding is when the app disappears completely and the entire app's drawer takes up the usable space. Good for searching</p>
<p>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.</p>
</div>
</div>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
</div>
<div id="content" class="snap-content">
<div id="toolbar">
<a href="#" id="open-left"></a>
<h1>Expanding</h1>
</div>
</div>
<script type="text/javascript" src="../../snap.js"></script>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right'
});
document.getElementById('search').addEventListener('focus', function(){
snapper.expand('left');
});
document.getElementById('search').addEventListener('blur', function(){
snapper.open('left');
});
</script>
<script type="text/javascript" src="../assets/demo.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
<!DOCTYPE HTML><html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> </head> <body> <div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <h3>Snap.js</h3> <div class="demo-social"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a> <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a> <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe> </div> <h4>Demos</h4> <ul> <li><a href="default.html">Default</a></li> <li><a href="noDrag.html">No Drag</a></li> <li><a href="dragElement.html">Drag Element</a></li> <li><a href="rightDisabled.html">Right Disabled</a></li> <li><a href="hyperextend.html">Hyperextension Disabled</a></li> <li><a href="skinnyThreshold.html">Skinny Threshold</a></li> <li><a href="toggles.html">Toggles</a></li> <li><a href="classNames.html">Class Names</a></li> <li><a href="expand.html">Expanding</a></li> <li><a href="settings.html">Settings</a></li> <li><a href="ratchet/template.html">Ratchet</a></li> </ul> <div> <p>The Default demo shows basic Snap.js functionality</p> <p>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.</p> </div> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div> <div id="content" class="snap-content"> <div id="toolbar"> <a href="#" id="open-left"></a> <h1>No Hyperextension</h1> </div> </div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('content'), hyperextensible: false }); </script> <script type="text/javascript" src="../assets/demo.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </body></html>
\ No newline at end of file
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Snap.js</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<link rel="stylesheet" type="text/css" href="../../snap.css" />
<link rel="stylesheet" type="text/css" href="../assets/demo.css" />
</head>
<body>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<h3>Snap.js</h3>
<div class="demo-social">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
<a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
<iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
</div>
<h4>Demos</h4>
<ul>
<li><a href="default.html">Default</a></li>
<li><a href="noDrag.html">No Drag</a></li>
<li><a href="dragElement.html">Drag Element</a></li>
<li><a href="rightDisabled.html">Right Disabled</a></li>
<li><a href="hyperextend.html">Hyperextension Disabled</a></li>
<li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
<li><a href="toggles.html">Toggles</a></li>
<li><a href="classNames.html">Class Names</a></li>
<li><a href="expand.html">Expanding</a></li>
<li><a href="settings.html">Settings</a></li>
<li><a href="ratchet/template.html">Ratchet</a></li>
</ul>
<div>
<p>Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)</p>
<p>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.</p>
</div>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
</div>
<div id="content" class="snap-content">
<div id="toolbar">
<a href="#" id="open-left"></a>
<h1>No Drag</h1>
</div>
<div id="no-drag" data-snap-ignore="true">No Drag</div>
</div>
<script type="text/javascript" src="../../snap.js"></script>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('content')
});
</script>
<script type="text/javascript" src="../assets/demo.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set Apple icons for when prototype is saved to home screen -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="touch-icons/apple-touch-icon-57x57.png">
<!-- Include the base Snap.js CSS -->
<link rel="stylesheet" href="../../../snap.css">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
<!-- Intro paragraph styles. Delete once you start using this page -->
<style type="text/css">
.snap-drawers .list{margin: 0;}
.welcome {
line-height: 1.5;
color: #555;
}
h2{
padding: 15px;
font-weight: normal;
font-size: 36px;
}
</style>
</head>
<body>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left" id="left-drawer">
<ul class="list">
<h2>Snap.js</h2>
<li class="list-divider">Share</li>
<li>
<div class="demo-social">
<iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
</div>
</li>
<li class="list-divider">Demos</li>
<li><a href="../default.html" data-ignore="push">Default</a></li>
<li><a href="../noDrag.html" data-ignore="push">No Drag</a></li>
<li><a href="../rightDisabled.html" data-ignore="push">Right Disabled</a></li>
<li><a href="../skinnyThreshold.html" data-ignore="push">Skinny Threshold</a></li>
<li><a href="../toggles.html" data-ignore="push">Toggles</a></li>
<li><a href="../classNames.html" data-ignore="push">Class Names</a></li>
<li><a href="../expand.html" data-ignore="push">Expanding</a></li>
<li><a href="../settings.html" data-ignore="push">Settings</a></li>
<li><a href="template.html" data-ignore="push">Ratchet</a></li>
</ul>
</div>
<div class="snap-drawer snap-drawer-right" id="right-drawer">
<ul class="list">
<li>List item 1 <span class="chevron"></span></li>
<li>List item 2 <span class="chevron"></span></li>
<li>List item 3 <span class="chevron"></span></li>
<li>List item 4 <span class="chevron"></span></li>
<li>List item 5 <span class="chevron"></span></li>
<li>List item 6 <span class="chevron"></span></li>
<li>List item 7 <span class="chevron"></span></li>
<li>List item 8 <span class="chevron"></span></li>
<li>List item 9 <span class="chevron"></span></li>
<li>List item 10 <span class="chevron"></span></li>
<li>List item 1 <span class="chevron"></span></li>
<li>List item 12 <span class="chevron"></span></li>
<li>List item 13 <span class="chevron"></span></li>
<li>List item 14 <span class="chevron"></span></li>
<li>List item 15 <span class="chevron"></span></li>
<li>List item 16 <span class="chevron"></span></li>
<li>List item 17 <span class="chevron"></span></li>
<li>List item 18 <span class="chevron"></span></li>
<li>List item 19 <span class="chevron"></span></li>
<li>List item 20 <span class="chevron"></span></li>
</ul>
</div>
</div>
<div id="content" class="snap-content">
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<button class="button" id="toggle-left">Left</button>
<h1 class="title">Ratchet</h1>
<button class="button" id="toggle-right">Right</button>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<div class="content-padded">
<p class="welcome">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:</p>
</div>
<ul class="list inset">
<li>
<a href="http://maker.github.com/ratchet/">
<strong>Ratchet documentation</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.github.com/maker/ratchet/">
<strong>Ratchet on Github</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.twitter.com/GoRatchet">
<strong>Ratchet on Twitter</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://maker.github.com/ratchet/">
<strong>Ratchet documentation</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.github.com/maker/ratchet/">
<strong>Ratchet on Github</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.twitter.com/GoRatchet">
<strong>Ratchet on Twitter</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="../../../snap.js"></script>
<script type="text/javascript">
var
// Helper
$ = function(id){
return document.getElementById(id);
},
// Instance
snapper = new Snap({
element: document.getElementById('content')
}),
//
UpdateDrawers = function(){
var state = snapper.state(),
towards = state.info.towards,
opening = state.info.opening;
if(opening=='right' && towards=='left'){
$('right-drawer').classList.add('active-drawer');
$('left-drawer').classList.remove('active-drawer');
} else if(opening=='left' && towards=='right') {
$('right-drawer').classList.remove('active-drawer');
$('left-drawer').classList.add('active-drawer');
}
};
snapper.on('drag', UpdateDrawers);
snapper.on('animating', UpdateDrawers);
snapper.on('animated', UpdateDrawers);
$('toggle-left').addEventListener('click', function(){
snapper.open('left');
});
$('toggle-right').addEventListener('click', function(){
snapper.open('right');
});
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
<!DOCTYPE HTML><html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> </head> <body> <div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <h3>Snap.js</h3> <div class="demo-social"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a> <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a> <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe> </div> <h4>Demos</h4> <ul> <li><a href="default.html">Default</a></li> <li><a href="noDrag.html">No Drag</a></li> <li><a href="dragElement.html">Drag Element</a></li> <li><a href="rightDisabled.html">Right Disabled</a></li> <li><a href="hyperextend.html">Hyperextension Disabled</a></li> <li><a href="skinnyThreshold.html">Skinny Threshold</a></li> <li><a href="toggles.html">Toggles</a></li> <li><a href="classNames.html">Class Names</a></li> <li><a href="expand.html">Expanding</a></li> <li><a href="settings.html">Settings</a></li> <li><a href="ratchet/template.html">Ratchet</a></li> </ul> <div> <p>This demo has the menu on the right side disabled</p> <p>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.</p> </div> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div> <div id="content" class="snap-content"> <div id="toolbar"> <a href="#" id="open-left"></a> <h1>Right Disabled</h1> </div> </div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('content'), disable: 'right' }); </script> <script type="text/javascript" src="../assets/demo.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </body></html>
\ No newline at end of file
<!DOCTYPE HTML><html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> </head> <body> <div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <h3>Snap.js</h3> <div class="demo-social"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a> <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a> <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe> </div> <h4>Demos</h4> <ul> <li><a href="default.html">Default</a></li> <li><a href="noDrag.html">No Drag</a></li> <li><a href="dragElement.html">Drag Element</a></li> <li><a href="rightDisabled.html">Right Disabled</a></li> <li><a href="hyperextend.html">Hyperextension Disabled</a></li> <li><a href="skinnyThreshold.html">Skinny Threshold</a></li> <li><a href="toggles.html">Toggles</a></li> <li><a href="classNames.html">Class Names</a></li> <li><a href="expand.html">Expanding</a></li> <li><a href="settings.html">Settings</a></li> <li><a href="ratchet/template.html">Ratchet</a></li> </ul> <div> <p>You can update the settings of an instantiated snap object by calling the settings method.</p> <p>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.</p> </div> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div> <div id="content" class="snap-content"> <div id="toolbar"> <a href="#" id="open-left"></a> <h1>Updatable Settings</h1> </div> <div style="padding-top: 50px"> <div class="opt"> <p>Change Speed: </p> <select data-key="speed"> <option value="0.3">Normal</option> <option value="1">Slow</option> <option value="0.2">Fast</option> </select> </div> <div class="opt"> <p>Change Easing</p> <select data-key="easing"> <option value="ease">ease</option> <option value="linear">linear</option> <option value="cubic-bezier(0.175, 0.885, 0.320, 1.275)">easeOutBack (Bezier Curve)</option> </select> </div> <div class="opt"> <p>Disable</p> <select data-key="disable"> <option value="none">None</option> <option value="left">Left</option> <option value="right">Right</option> </select> </div> <div class="opt"> <p>And More!</p> </div> </div> </div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('content') }), updateSnap = function(){ var key = this.dataset.key, val = this.value, opts = {}; switch(key){ case 'speed': opts.transitionSpeed = parseFloat(val, 10); break; case 'easing': opts.easing = val; break; case 'disable': opts.disable = val; break; } snapper.settings(opts); }, selects = document.getElementsByTagName('select'), i; for(i=0; i<selects.length; i++){ selects[i].addEventListener('change', updateSnap); } </script> <script type="text/javascript" src="../assets/demo.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </body></html>
\ No newline at end of file
<!DOCTYPE HTML><html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> </head> <body> <div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <h3>Snap.js</h3> <div class="demo-social"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a> <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a> <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe> </div> <h4>Demos</h4> <ul> <li><a href="default.html">Default</a></li> <li><a href="noDrag.html">No Drag</a></li> <li><a href="dragElement.html">Drag Element</a></li> <li><a href="rightDisabled.html">Right Disabled</a></li> <li><a href="hyperextend.html">Hyperextension Disabled</a></li> <li><a href="skinnyThreshold.html">Skinny Threshold</a></li> <li><a href="toggles.html">Toggles</a></li> <li><a href="classNames.html">Class Names</a></li> <li><a href="expand.html">Expanding</a></li> <li><a href="settings.html">Settings</a></li> <li><a href="ratchet/template.html">Ratchet</a></li> </ul> <div> <p>You can define the width of your app's sliding space</p> <p>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.</p> </div> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div> <div id="content" class="snap-content"> <div id="toolbar"> <a href="#" id="open-left"></a> <h1>Skinny Threshold</h1> </div> </div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('content'), maxPosition: 100, minPosition: -100 }); </script> <script type="text/javascript" src="../assets/demo.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </body></html>
\ No newline at end of file
<!DOCTYPE HTML><html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> </head> <body> <div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <h3>Snap.js</h3> <div class="demo-social"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a> <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a> <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe> </div> <h4>Demos</h4> <ul> <li><a href="default.html">Default</a></li> <li><a href="noDrag.html">No Drag</a></li> <li><a href="dragElement.html">Drag Element</a></li> <li><a href="rightDisabled.html">Right Disabled</a></li> <li><a href="hyperextend.html">Hyperextension Disabled</a></li> <li><a href="skinnyThreshold.html">Skinny Threshold</a></li> <li><a href="toggles.html">Toggles</a></li> <li><a href="classNames.html">Class Names</a></li> <li><a href="expand.html">Expanding</a></li> <li><a href="settings.html">Settings</a></li> <li><a href="ratchet/template.html">Ratchet</a></li> </ul> <div> <p>Toggles are easy to create. Snap.js gives you the state of the pane and allows you to make decisions simply.</p> <p>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.</p> </div> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div> <div id="content" class="snap-content"> <div id="toolbar"> <a href="#" id="open-left"></a> <h1>Toggles</h1> </div> <div class="toggler" id="ol">Open Left</div> <div class="toggler" id="or">Open Right</div> </div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript" src="../assets/demo.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('content') }); addEvent(document.getElementById('ol'), 'click', function(){ snapper.open('left'); }); addEvent(document.getElementById('or'), 'click', function(){ snapper.open('right'); }); </script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </body></html>
\ No newline at end of file
/* Show "Left" drawer for the "Right" drawer in the demo */.snapjs-right .snap-drawer-left { display: block; right: 0; left: auto;} /* Hide the actual "Right" drawer in the demo */.snapjs-right .snap-drawer-right { display: none;} /* Show the "Drag" background in the demo */#content { background: #BFC7D8 url(drag.png) center 75% no-repeat;} /* Demo toolbar styles */#toolbar { background: #536ea7; border-bottom: 1px solid #111b32; position: absolute; top: 0; right: 0; left: 0; width: auto; height: 44px;} #toolbar h1 { color: #fff; font-size: 16px; line-height: 22px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); position: absolute; top: 0; right: 44px; left: 44px; width: auto; height: 44px;} #open-left { background: url(open.png) center center no-repeat; display: block; width: 44px; height: 44px;} /* Show the red "No Drag" box in the demo */#no-drag,#do-drag { position: absolute; top: 50%; left: 50%; width: 50%; height: 100px; margin-left: -25%; margin-top: -50px; background: red; color: #FFF; text-align: center; line-height: 100px;}#do-drag{ background: green;} /* Styles for the social buttons in the demo */.demo-social { padding: 0 15px;} /* Show the translucent white "Toggle" boxes in the demo */.toggler { width: 80%; background: rgba(255,255,255,0.5); margin: 0 auto; position: relative; top: 70px; padding: 20px; margin-bottom: 20px; text-align: center;} /* Styles for expanding "Search" input in the "Expanding" demo */.search { padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);} #search { height: 30px; width: 87%; margin: 7px 7px 0 7px; background: linear-gradient(#414A5A,#4C5464); background: -webkit-linear-gradient(#414A5A,#4C5464); padding-left: 15px; border: 1px solid #222936; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.5),0 1px 2px -1px rgba(255, 255, 255, 0.4); -moz-box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.5),0 1px 2px -1px rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.5),0 1px 2px -1px rgba(255, 255, 255, 0.4);} #search:focus { outline: none; border-color: #151515;} /* Styles for fading out the drawer content in the "Expanding" demo */.drawer-inner { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .snapjs-expand-left .drawer-inner,.snapjs-expand-right .drawer-inner { opacity: 0;} /* Styles for the "Settings" demo */.opt { padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);} .opt p { font-weight: bold; margin-top: 0; margin-bottom: 5px; color: #222; color: rgba(0, 0, 0, 0.6);} /* Default demo styles */.snap-content { background: #BFC7D8;} .snap-drawers { background: #323949;} .snap-drawer { background: #323949; color: #eee;} .snap-drawer h3 { font-size: 36px; font-weight: normal; margin: 15px;} .snap-drawer h4 { padding: 15px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0;} .snap-drawer ul { padding: 0; margin: 0; list-style-type: none;} .snap-drawer li > a { display: block; border-bottom: 1px solid rgba(0,0,0, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 15px; font-weight: bold; text-shadow: 0 1px 0 #000; text-decoration: none; color: #ccc; text-indent: 20px;} .snap-drawer p { opacity: 0.5; padding: 15px; font-size: 12px;}
\ No newline at end of file
var addEvent = function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
};
addEvent(document.getElementById('open-left'), 'click', function(){
snapper.open('left');
});
/* Prevent Safari opening links when viewing as a Mobile App */
(function (a, b, c) {
if(c in b && b[c]) {
var d, e = a.location,
f = /^(a|html)$/i;
a.addEventListener("click", function (a) {
d = a.target;
while(!f.test(d.nodeName)) d = d.parentNode;
"href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
}, !1)
}
})(document, window.navigator, "standalone");
\ No newline at end of file
<meta http-equiv="REFRESH" content="0;url=http://jakiestfu.github.io/Snap.js/demo/apps/default.html"></HEAD>
\ No newline at end of file
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.snap-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
z-index: 2;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.snap-drawers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
}
.snap-drawer {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: auto;
width: 265px;
height: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-ms-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.snap-drawer-left {
left: 0;
z-index: 1;
}
.snap-drawer-right {
right: 0;
z-index: 1;
}
.snapjs-left .snap-drawer-right,
.snapjs-right .snap-drawer-left {
display: none;
}
.snapjs-expand-left .snap-drawer-left,
.snapjs-expand-right .snap-drawer-right {
width: 100%;
}
This diff is collapsed.
/*
* Snap.js
*
* Copyright 2013, Jacob Kelley - http://jakiestfu.com/
* Released under the MIT Licence
* http://opensource.org/licenses/MIT
*
* Github: http://github.com/jakiestfu/Snap.js/
* Version: 1.9.2
*/
(function(c,b){var a=a||function(k){var f={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},e={simpleStates:{opening:null,towards:null,hyperExtending:null,halfway:null,flick:null,translation:{absolute:0,relative:0,sinceDirectionChange:0,percentage:0}}},h={},d={hasTouch:(b.ontouchstart===null),eventType:function(m){var l={down:(d.hasTouch?"touchstart":"mousedown"),move:(d.hasTouch?"touchmove":"mousemove"),up:(d.hasTouch?"touchend":"mouseup"),out:(d.hasTouch?"touchcancel":"mouseout")};return l[m]},page:function(l,m){return(d.hasTouch&&m.touches.length&&m.touches[0])?m.touches[0]["page"+l]:m["page"+l]},klass:{has:function(m,l){return(m.className).indexOf(l)!==-1},add:function(m,l){if(!d.klass.has(m,l)&&f.addBodyClasses){m.className+=" "+l}},remove:function(m,l){if(f.addBodyClasses){m.className=(m.className).replace(l,"").replace(/^\s+|\s+$/g,"")}}},dispatchEvent:function(l){if(typeof h[l]==="function"){return h[l].call()}},vendor:function(){var m=b.createElement("div"),n="webkit Moz O ms".split(" "),l;for(l in n){if(typeof m.style[n[l]+"Transition"]!=="undefined"){return n[l]}}},transitionCallback:function(){return(e.vendor==="Moz"||e.vendor==="ms")?"transitionend":e.vendor+"TransitionEnd"},canTransform:function(){return typeof f.element.style[e.vendor+"Transform"]!=="undefined"},deepExtend:function(l,n){var m;for(m in n){if(n[m]&&n[m].constructor&&n[m].constructor===Object){l[m]=l[m]||{};d.deepExtend(l[m],n[m])}else{l[m]=n[m]}}return l},angleOfDrag:function(l,o){var n,m;m=Math.atan2(-(e.startDragY-o),(e.startDragX-l));if(m<0){m+=2*Math.PI}n=Math.floor(m*(180/Math.PI)-180);if(n<0&&n>-180){n=360-Math.abs(n)}return Math.abs(n)},events:{addEvent:function g(m,l,n){if(m.addEventListener){return m.addEventListener(l,n,false)}else{if(m.attachEvent){return m.attachEvent("on"+l,n)}}},removeEvent:function g(m,l,n){if(m.addEventListener){return m.removeEventListener(l,n,false)}else{if(m.attachEvent){return m.detachEvent("on"+l,n)}}},prevent:function(l){if(l.preventDefault){l.preventDefault()}else{l.returnValue=false}}},parentUntil:function(n,l){var m=typeof l==="string";while(n.parentNode){if(m&&n.getAttribute&&n.getAttribute(l)){return n}else{if(!m&&n===l){return n}}n=n.parentNode}return null}},i={translate:{get:{matrix:function(n){if(!d.canTransform()){return parseInt(f.element.style.left,10)}else{var m=c.getComputedStyle(f.element)[e.vendor+"Transform"].match(/\((.*)\)/),l=8;if(m){m=m[1].split(",");if(m.length===16){n+=l}return parseInt(m[n],10)}return 0}}},easeCallback:function(){f.element.style[e.vendor+"Transition"]="";e.translation=i.translate.get.matrix(4);e.easing=false;clearInterval(e.animatingInterval);if(e.easingTo===0){d.klass.remove(b.body,"snapjs-right");d.klass.remove(b.body,"snapjs-left")}d.dispatchEvent("animated");d.events.removeEvent(f.element,d.transitionCallback(),i.translate.easeCallback)},easeTo:function(l){if(!d.canTransform()){e.translation=l;i.translate.x(l)}else{e.easing=true;e.easingTo=l;f.element.style[e.vendor+"Transition"]="all "+f.transitionSpeed+"s "+f.easing;e.animatingInterval=setInterval(function(){d.dispatchEvent("animating")},1);d.events.addEvent(f.element,d.transitionCallback(),i.translate.easeCallback);i.translate.x(l)}if(l===0){f.element.style[e.vendor+"Transform"]=""}},x:function(m){if((f.disable==="left"&&m>0)||(f.disable==="right"&&m<0)){return}if(!f.hyperextensible){if(m===f.maxPosition||m>f.maxPosition){m=f.maxPosition}else{if(m===f.minPosition||m<f.minPosition){m=f.minPosition}}}m=parseInt(m,10);if(isNaN(m)){m=0}if(d.canTransform()){var l="translate3d("+m+"px, 0,0)";f.element.style[e.vendor+"Transform"]=l}else{f.element.style.width=(c.innerWidth||b.documentElement.clientWidth)+"px";f.element.style.left=m+"px";f.element.style.right=""}}},drag:{listen:function(){e.translation=0;e.easing=false;d.events.addEvent(f.element,d.eventType("down"),i.drag.startDrag);d.events.addEvent(f.element,d.eventType("move"),i.drag.dragging);d.events.addEvent(f.element,d.eventType("up"),i.drag.endDrag)},stopListening:function(){d.events.removeEvent(f.element,d.eventType("down"),i.drag.startDrag);d.events.removeEvent(f.element,d.eventType("move"),i.drag.dragging);d.events.removeEvent(f.element,d.eventType("up"),i.drag.endDrag)},startDrag:function(n){var m=n.target?n.target:n.srcElement,l=d.parentUntil(m,"data-snap-ignore");if(l){d.dispatchEvent("ignore");return}if(f.dragger){var o=d.parentUntil(m,f.dragger);if(!o&&(e.translation!==f.minPosition&&e.translation!==f.maxPosition)){return}}d.dispatchEvent("start");f.element.style[e.vendor+"Transition"]="";e.isDragging=true;e.hasIntent=null;e.intentChecked=false;e.startDragX=d.page("X",n);e.startDragY=d.page("Y",n);e.dragWatchers={current:0,last:0,hold:0,state:""};e.simpleStates={opening:null,towards:null,hyperExtending:null,halfway:null,flick:null,translation:{absolute:0,relative:0,sinceDirectionChange:0,percentage:0}}},dragging:function(s){if(e.isDragging&&f.touchToDrag){var v=d.page("X",s),u=d.page("Y",s),t=e.translation,o=i.translate.get.matrix(4),n=v-e.startDragX,p=o>0,q=n,w;if((e.intentChecked&&!e.hasIntent)){return}if(f.addBodyClasses){if((o)>0){d.klass.add(b.body,"snapjs-left");d.klass.remove(b.body,"snapjs-right")}else{if((o)<0){d.klass.add(b.body,"snapjs-right");d.klass.remove(b.body,"snapjs-left")}}}if(e.hasIntent===false||e.hasIntent===null){var m=d.angleOfDrag(v,u),l=(m>=0&&m<=f.slideIntent)||(m<=360&&m>(360-f.slideIntent)),r=(m>=180&&m<=(180+f.slideIntent))||(m<=180&&m>=(180-f.slideIntent));if(!r&&!l){e.hasIntent=false}else{e.hasIntent=true}e.intentChecked=true}if((f.minDragDistance>=Math.abs(v-e.startDragX))||(e.hasIntent===false)){return}d.events.prevent(s);d.dispatchEvent("drag");e.dragWatchers.current=v;if(e.dragWatchers.last>v){if(e.dragWatchers.state!=="left"){e.dragWatchers.state="left";e.dragWatchers.hold=v}e.dragWatchers.last=v}else{if(e.dragWatchers.last<v){if(e.dragWatchers.state!=="right"){e.dragWatchers.state="right";e.dragWatchers.hold=v}e.dragWatchers.last=v}}if(p){if(f.maxPosition<o){w=(o-f.maxPosition)*f.resistance;q=n-w}e.simpleStates={opening:"left",towards:e.dragWatchers.state,hyperExtending:f.maxPosition<o,halfway:o>(f.maxPosition/2),flick:Math.abs(e.dragWatchers.current-e.dragWatchers.hold)>f.flickThreshold,translation:{absolute:o,relative:n,sinceDirectionChange:(e.dragWatchers.current-e.dragWatchers.hold),percentage:(o/f.maxPosition)*100}}}else{if(f.minPosition>o){w=(o-f.minPosition)*f.resistance;q=n-w}e.simpleStates={opening:"right",towards:e.dragWatchers.state,hyperExtending:f.minPosition>o,halfway:o<(f.minPosition/2),flick:Math.abs(e.dragWatchers.current-e.dragWatchers.hold)>f.flickThreshold,translation:{absolute:o,relative:n,sinceDirectionChange:(e.dragWatchers.current-e.dragWatchers.hold),percentage:(o/f.minPosition)*100}}}i.translate.x(q+t)}},endDrag:function(m){if(e.isDragging){d.dispatchEvent("end");var l=i.translate.get.matrix(4);if(e.dragWatchers.current===0&&l!==0&&f.tapToClose){d.dispatchEvent("close");d.events.prevent(m);i.translate.easeTo(0);e.isDragging=false;e.startDragX=0;return}if(e.simpleStates.opening==="left"){if((e.simpleStates.halfway||e.simpleStates.hyperExtending||e.simpleStates.flick)){if(e.simpleStates.flick&&e.simpleStates.towards==="left"){i.translate.easeTo(0)}else{if((e.simpleStates.flick&&e.simpleStates.towards==="right")||(e.simpleStates.halfway||e.simpleStates.hyperExtending)){i.translate.easeTo(f.maxPosition)}}}else{i.translate.easeTo(0)}}else{if(e.simpleStates.opening==="right"){if((e.simpleStates.halfway||e.simpleStates.hyperExtending||e.simpleStates.flick)){if(e.simpleStates.flick&&e.simpleStates.towards==="right"){i.translate.easeTo(0)}else{if((e.simpleStates.flick&&e.simpleStates.towards==="left")||(e.simpleStates.halfway||e.simpleStates.hyperExtending)){i.translate.easeTo(f.minPosition)}}}else{i.translate.easeTo(0)}}}e.isDragging=false;e.startDragX=d.page("X",m)}}}},j=function(l){if(l.element){d.deepExtend(f,l);e.vendor=d.vendor();i.drag.listen()}};this.open=function(l){d.dispatchEvent("open");d.klass.remove(b.body,"snapjs-expand-left");d.klass.remove(b.body,"snapjs-expand-right");if(l==="left"){e.simpleStates.opening="left";e.simpleStates.towards="right";d.klass.add(b.body,"snapjs-left");d.klass.remove(b.body,"snapjs-right");i.translate.easeTo(f.maxPosition)}else{if(l==="right"){e.simpleStates.opening="right";e.simpleStates.towards="left";d.klass.remove(b.body,"snapjs-left");d.klass.add(b.body,"snapjs-right");i.translate.easeTo(f.minPosition)}}};this.close=function(){d.dispatchEvent("close");i.translate.easeTo(0)};this.expand=function(l){var m=c.innerWidth||b.documentElement.clientWidth;if(l==="left"){d.dispatchEvent("expandLeft");d.klass.add(b.body,"snapjs-expand-left");d.klass.remove(b.body,"snapjs-expand-right")}else{d.dispatchEvent("expandRight");d.klass.add(b.body,"snapjs-expand-right");d.klass.remove(b.body,"snapjs-expand-left");m*=-1}i.translate.easeTo(m)};this.on=function(l,m){h[l]=m;return this};this.off=function(l){if(h[l]){h[l]=false}};this.enable=function(){d.dispatchEvent("enable");i.drag.listen()};this.disable=function(){d.dispatchEvent("disable");i.drag.stopListening()};this.settings=function(l){d.deepExtend(f,l)};this.state=function(){var l,m=i.translate.get.matrix(4);if(m===f.maxPosition){l="left"}else{if(m===f.minPosition){l="right"}else{l="closed"}}return{state:l,info:e.simpleStates}};j(k)};if((typeof module!=="undefined")&&module.exports){module.exports=a}if(typeof ender==="undefined"){this.Snap=a}if((typeof define==="function")&&define.amd){define("snap",[],function(){return a})}}).call(this,window,document);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment