Skip to content
Browse files

first commit

  • Loading branch information...
1 parent 029ec60 commit 56f7db9a34121e8d504b4e79a8c351ce143d732d @botelho committed May 7, 2012
View
49 css/demo.css
@@ -0,0 +1,49 @@
+/* @import url('normalize.css'); */
+/* General Demo Style */
+*{
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+body{
+ font-family: 'Open Sans Condensed','Arial Narrow', serif;
+ background: #ddd url(../images/fabric_plaid.png) repeat top left;
+ font-weight: 400;
+ font-size: 15px;
+ color: #333;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+ margin: 0;
+ overflow: hidden;
+}
+a{
+ color: #555;
+ text-decoration: none;
+}
+.clr{
+ clear: both;
+ padding: 0;
+ height: 0;
+ margin: 0;
+}
+.main-title{
+ position: absolute;
+ z-index: -1;
+ width: 50%;
+ padding: 20px 40px;
+ text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
+}
+.main-title h1{
+ font-size: 45px;
+ line-height: 52px;
+ font-weight: 300;
+ color: #777;
+}
+.main-title h1 strong{
+ font-weight: 700;
+}
+.main-title p{
+ font-size: 18px;
+ color: #F86738;
+}
View
41 css/fallback.css
@@ -0,0 +1,41 @@
+.no-csstransforms3d body{
+ overflow: auto;
+}
+.no-csstransforms3d .f-page.f-cover,
+.no-csstransforms3d .f-page.f-cover-back{
+ display: none !important;
+}
+.no-csstransforms3d .f-title{
+ position: relative;
+}
+.no-csstransforms3d .main-title{
+ position: relative;
+ width: 100%;
+}
+.no-csstransforms3d .box{
+ width: auto;
+ float: none;
+ height: auto;
+ margin: 20px;
+ box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+ cursor: auto;
+}
+.no-csstransforms3d .box:after,
+.no-csstransforms3d .box-img-left:after,
+.no-csstransforms3d .box-img-right:after{
+ display: none;
+}
+.no-csstransforms3d .box .img-cont,
+.no-csstransforms3d .box-img-left .img-cont,
+.no-csstransforms3d .box-img-right .img-cont{
+ width: 300px;
+ height: 200px;
+ float: left;
+ margin: 10px 20px 20px 0;
+}
+.no-csstransforms3d .box-img-left p{
+ margin-left: 0px
+}
+.no-csstransforms3d .box-img-right p{
+ margin-right: 0px
+}
View
465 css/style.css
@@ -0,0 +1,465 @@
+.container {
+ position: relative;
+ margin: 0 auto;
+ -webkit-perspective: 2200px;
+ -moz-perspective: 2200px;
+ perspective: 2200px;
+}
+.page {
+ width: 50%;
+ height: 100%;
+ position: absolute;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -webkit-transform-origin: left center;
+ -moz-transform-origin: left center;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.page > div {
+ display: block;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ background: #fff;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+}
+.page .back {
+ -webkit-transform: rotateY(-180deg);
+ -moz-transform: rotateY(-180deg);
+}
+.page .outer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ overflow: hidden;
+ z-index: 999;
+}
+.page .content{
+ height: 100%;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+.overlay, .flipoverlay{
+ background-color: rgba(0, 0, 0, 0.6);
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+}
+.flipoverlay{
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.page .content .inner{
+ padding: 50px 15px 10px;
+ height: 100%;
+}
+.page h1{
+ text-align: center;
+}
+.page.cover .front .content,
+.page.cover-back .back .content{
+ width: 100% !important;
+}
+.page.cover .front .content:after,
+.page.cover-back .back .content:after{
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 10px;
+ height: 100%;
+ content: '';
+ background: -webkit-linear-gradient(left, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.01) 16%,rgba(0,0,0,0) 17%,rgba(0,0,0,0) 44%,rgba(0,0,0,0.08) 60%,rgba(0,0,0,0.09) 61%,rgba(0,0,0,0.35) 100%);
+ opacity: 0.2;
+}
+.page.cover-back .back .content:after{
+ left: auto;
+ right: 0px;
+ background:-webkit-linear-gradient(left, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.1) 10%,rgba(0,0,0,1) 100%);
+}
+.page.cover .front .content .inner{
+ padding-top: 20px;
+}
+.page.cover .front .content{
+ background: #ddd url(../images/cover.jpg) no-repeat center center;
+ background-size: cover;
+}
+.page.cover-back .back .content{
+ background: #B0D5FF;
+}
+.page.cover h1{
+ color: rgba(255,255,255,0.9);
+ text-align: right;
+ font-weight: 300;
+ font-size: 34px;
+ text-transform: uppercase;
+ margin: 0 0 0 60%;
+ line-height: 34px;
+ padding-bottom: 10px;
+ cursor: default;
+}
+.page.cover h1 span{
+ display: block;
+ font-weight: 300;
+ font-size: 15px;
+}
+.page.cover .f-cover-story{
+ color: rgba(255,255,255,0.9);
+ font-weight: 600;
+ font-size: 50px;
+ line-height: 46px;
+ position: absolute;
+ bottom: 60px;
+ left: 40px;
+ margin: 0;
+ text-transform: uppercase;
+ cursor: default;
+}
+a.f-ref{
+ line-height: 20px;
+ font-size: 16px;
+ position: absolute;
+ top: 252px;
+ font-weight: 300;
+ text-indent: 1px;
+}
+.page.cover .f-cover-story span{
+ display: block;
+ font-size: 26px;
+ line-height: 26px;
+}
+.page a,
+.page.cover .f-cover-story span{
+ color: #F86738;
+}
+.page a:hover{
+ color: #000;
+}
+.f-cover-flip{
+ background: #000;
+ color: #ddd;
+ position: absolute;
+ right: 0px;
+ padding: 5px 30px 5px 20px;
+ font-size: 30px;
+ text-transform: uppercase;
+ font-weight: 500;
+ top: 50%;
+ margin-top: -25px;
+ cursor: default;
+}
+.logo{
+ width: 180px;
+ height: 180px;
+ position: absolute;
+ top: 20px;
+ left: 30px;
+ line-height: 428px;
+ color: white;
+ font-size: 59px;
+ font-weight: bold;
+ text-indent: -3px;
+ cursor: default;
+}
+.logo:before{
+ position: absolute;
+ width: 49%;
+ height: 50%;
+ content: '';
+ top: 0px;
+ left: 0px;
+ background: rgba(255,255,255,0.4);
+ box-shadow: 0 95px 0px rgba(255,255,255,0.6);
+}
+.logo:after{
+ position: absolute;
+ width: 49%;
+ height: 50%;
+ content: '';
+ top: 0px;
+ right: 0px;
+ background: rgba(255,255,255,0.6);
+ box-shadow: 0 95px 0px rgba(255,255,255,0.4);
+}
+.f-title{
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 50px;
+ text-align:center;
+ width: 100%;
+}
+.f-title h2{
+ line-height: 50px;
+ margin: 0;
+ font-weight: 300;
+ font-size: 28px;
+ color: #aaa;
+ float: left;
+ width: 33%;
+}
+.f-title a{
+ width: 33%;
+ float: left;
+ text-align: right;
+ overflow: hidden;
+ height: 50px;
+ font-size: 12px;
+ line-height: 50px;
+ padding: 0px 15px;
+ color: #777;
+ font-style: italic;
+ font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
+}
+.f-title a:first-child{
+ text-align: left;
+}
+.f-title a:hover{
+ color: #000;
+}
+.box{
+ border-top: 1px solid #f2f2f2;
+ float: left;
+ padding: 20px;
+ overflow: hidden;
+ position: relative;
+ background: #fff;
+ cursor: pointer;
+}
+.img-cont{
+ height: 40%;
+ width: 100%;
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: cover;
+}
+.img-1{
+ background-image: url(../images/1.jpg);
+}
+.img-2{
+ background-image: url(../images/2.jpg);
+ height: 60%;
+}
+.img-3{
+ background-image: url(../images/3.jpg);
+}
+.img-4{
+ background-image: url(../images/4.jpg);
+}
+.img-5{
+ background-image: url(../images/5.jpg);
+}
+.img-6{
+ background-image: url(../images/6.jpg);
+}
+.img-7{
+ background-image: url(../images/7.jpg);
+}
+.img-8{
+ background-image: url(../images/8.jpg);
+}
+.img-9{
+ background-image: url(../images/9.jpg);
+}
+.box h3{
+ padding: 10px 0px;
+ margin: 0;
+ font-size: 18px;
+}
+.box h3 span{
+ display: block;
+ font-size: 11px;
+ font-weight: 300;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ color: #74726f;
+}
+.box:after{
+ position: absolute;
+ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.73) 22%, rgba(255,255,255,0.73) 23%, rgba(255,255,255,1) 91%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(22%,rgba(255,255,255,0.73)), color-stop(23%,rgba(255,255,255,0.73)), color-stop(91%,rgba(255,255,255,1)));
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
+ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
+ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
+ background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
+ height: 50px;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ content: '';
+}
+.box p{
+ margin: 0;
+ padding: 0;
+ text-align: justify;
+ font-family: Georgia;
+ font-size: 13px;
+ line-height: 20px;
+ display: block;
+ position: relative;
+ padding-bottom: 30px;
+}
+.w-25{ width: 25%; }
+.w-30{ width: 30%; }
+.w-40{ width: 40%; }
+.w-50{ width: 50%; }
+.w-60{ width: 60%; }
+.w-70{ width: 70%; }
+.w-75{ width: 75%; }
+.w-100{ width: 100%; }
+
+.h-25{ height: 25%; }
+.h-30{ height: 30%; }
+.h-40{ height: 40%; }
+.h-50{ height: 50%; }
+.h-60{ height: 60%; }
+.h-70{ height: 70%; }
+.h-75{ height: 75%; }
+.h-100{ height: 100%; }
+
+.box-expanded.box-img-left .img-cont,
+.box-img-left .img-cont{
+ float: left;
+ width: 40%;
+ height: 100%;
+ margin-right: 2%;
+}
+.box-img-left:after{
+ left: 42%;
+}
+.box-img-left p{
+ margin-left: 42%;
+}
+.box-img-right .img-cont{
+ float: right;
+ width: 40%;
+ height: 100%;
+ margin-left: 2%;
+}
+.box-img-right:after{
+ right: 42%;
+}
+.box-img-right p{
+ margin-right: 42%;
+}
+.title-top h3{
+ padding-top: 0px;
+}
+.box-b-r{
+ border-right: 1px solid #f2f2f2;
+}
+.box-b-l{
+ border-left: 1px solid #f2f2f2;
+}
+.box-expanded{
+ border: none;
+ padding: 50px;
+}
+.box-expanded .img-cont{
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+ float: left;
+ width: 50%;
+ height: 50%;
+ margin-right: 20px;
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+.box.box-expanded h3{
+ font-size: 50px;
+ line-height: 50px;
+ padding-top: 0px;
+}
+.box.box-expanded h3 span{
+ font-size: 14px;
+}
+.box.box-expanded p{
+ font-size: 20px;
+ line-height: 30px;
+}
+.box.box-expanded:after{
+ background: transparent;
+}
+.box-expanded .box-close{
+ position: absolute;
+ top: 0px;
+ right: 20px;
+ width: 80px;
+ height: 30px;
+ background: #000;
+ color: #fff;
+ font-weight: bold;
+ font-size: 16px;
+ text-align: center;
+ line-height: 30px;
+}
+@media screen and (max-width: 760px){
+ .f-title a {
+ height: 30px;
+ line-height: 14px;
+ margin-top: 10px;
+ }
+ .f-title h2{
+ font-size: 18px;
+ line-height: 18px;
+ margin-top: 5px;
+ }
+}
+@media screen and (max-width: 690px){
+ .page .box{
+ width: 100%;
+ height: 20%;
+ padding: 5px;
+ border: none;
+ border-top: 1px solid #ddd;
+ }
+ .page .box h3{
+ font-size: 16px;
+ }
+ .page .box h3 span,
+ .page .box .img-cont,
+ .page .box p,
+ .page .box:after{
+ display: none;
+ }
+ .box.box-expanded h3{
+ font-size: 26px;
+ line-height: 30px;
+ padding-top: 15px;
+ clear: both;
+ }
+ .box.box-expanded p{
+ font-size: 16px;
+ line-height: 22px;
+ }
+ .box-img-left p,
+ .box-img-right p{
+ margin: 0;
+ }
+ .box.box-expanded h3 span{
+ font-size: 12px;
+ }
+ body .box-expanded{
+ padding: 40px 20px 20px;
+ }
+ body .box-expanded .img-cont{
+ width: 100% !important;
+ height: 50% !important;
+ margin: 0;
+ }
+ .cover-elements{
+ display: none;
+ }
+
+}
View
BIN images/1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/4.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/5.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/6.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/7.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/8.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
4 images/ImageAttribution.txt
@@ -0,0 +1,4 @@
+Background Pattern from http://subtlepatterns.com/
+
+Photos by NASA HQ: http://www.flickr.com/photos/nasahqphoto/
+
View
BIN images/Thumbs.db
Binary file not shown.
View
BIN images/cover.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/fabric_plaid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
176 index.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Experimental Page Layout Inspired by Flipboard</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+ <meta name="description" content="Experimental Page Layout Inspired by Flipboard" />
+ <meta name="keywords" content="flip, pages, flipboard, layout, responsive, web, web design, grid, ipad, jquery, css3, 3d, perspective, transitions, transform" />
+ <meta name="author" content="" />
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" type="text/css" href="css/demo.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <script type="text/javascript" src="js/modernizr.custom.08464.js"></script>
+ <script id="pageTmpl" type="text/x-jquery-tmpl">
+ <div class="${theClass}" style="${theStyle}">
+ <div class="front">
+ <div class="outer">
+ <div class="content" style="${theContentStyleFront}">
+ <div class="inner">{{html theContentFront}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="back">
+ <div class="outer">
+ <div class="content" style="${theContentStyleBack}">
+ <div class="inner">{{html theContentBack}}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </script>
+ </head>
+ <body>
+
+ <header class="main-title">
+ <h1>Experimental Page Layout <strong>Inspired by Flipboard</strong></h1>
+ <p>Swipe or drag to flip the pages, click to open items </p>
+ <p><strong>Best viewed in a Webkit browser (Safari, Chrome)</strong></p>
+ </header>
+
+ <div id="flip" class="container">
+
+ <div class="f-page f-cover">
+ <div class="cover-elements">
+ <div class="logo">
+ Pageflip
+ <a class="f-ref" href="http://www.flickr.com/photos/nasahqphoto/">Images by NASA HQ Photo</a>
+ </div>
+ <h1>Spacy Flipping Pages with CSS3 &amp; jQuery <span>Inspired by <a href="http://flipboard.com/">Flipboard</a></span></h1>
+ <div class="f-cover-story"><span>Cover Story</span>Shuttle Enterprise Flight to New York</div>
+ </div>
+ <div class="f-cover-flip">&lt; Flip</div>
+ </div>
+
+ <div class="f-page">
+ <div class="f-title">
+ <a href="http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/">Previous Demo</a>
+ <h2>Incredible Spacenews</h2>
+ <a href="http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/">Back to the Codrops Article</a>
+ </div>
+ <div class="box w-25 h-70">
+ <div class="img-cont img-1"></div>
+ <h3>Japanese Prime Minister Noda with NASA Administrator Bolden <span>Published May 3, 2012</span></h3>
+ <p>Thundercats adipisicing marfa wes anderson farm-to-table, +1 vero yr ennui messenger bag occaecat williamsburg cosby sweater anim tattooed. Farm-to-table umami direct trade viral cosby sweater Austin. Magna tattooed irure, DIY do placeat helvetica sapiente laboris. Put a bird on it jean shorts wolf enim, viral authentic hoodie bespoke master cleanse proident. Ea pour-over swag wayfarers, Austin thundercats letterpress mollit 8-bit excepteur forage elit. Cupidatat minim dolore laborum whatever. Farm-to-table nihil tattooed, letterpress helvetica vegan semiotics pariatur pop-up. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-50 h-70 box-b-l box-b-r">
+ <div class="img-cont img-2"></div>
+ <h3>Shuttle Enterprise Flight to New York <span>Published May 3, 2012</span></h3>
+ <p>Art party cillum et cosby sweater aliquip wolf photo booth thundercats dreamcatcher pickled banksy. Sustainable ex kogi, mumblecore mlkshk occupy mcsweeney's freegan laboris nisi stumptown street art labore food truck. Stumptown pariatur 8-bit, iphone quis ethical pitchfork portland vegan. Irony esse gluten-free, id fanny pack umami commodo. Godard bushwick narwhal, quinoa biodiesel veniam jean shorts minim portland aesthetic excepteur sapiente. Fanny pack aesthetic post-ironic chambray esse. Bespoke nesciunt fugiat aute pariatur craft beer, laborum ex. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-25 h-70">
+ <div class="img-cont img-3"></div>
+ <h3>Expedition 30 Landing <span>Published May 3, 2012</span></h3>
+ <p>Single-origin coffee ex fingerstache keytar labore adipisicing, synth umami wolf jean shorts. Next level high life selvage cillum. Cupidatat before they sold out ex, shoreditch accusamus kogi consectetur delectus gluten-free. Keffiyeh seitan ex, trust fund fugiat gluten-free sunt put a bird on it pinterest. Vegan aesthetic vero, ethnic bespoke before they sold out williamsburg ennui 8-bit proident synth marfa mcsweeney's trust fund photo booth. Sed velit dolor, cardigan shoreditch typewriter ea. Dolore nihil occaecat high life post-ironic, ennui chillwave tattooed craft beer umami. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-50 h-30 box-b-r title-top">
+ <h3>NASA Begins Second Round of J-2X Testing <span>Published May 3, 2012</span></h3>
+ <p>Duis williamsburg irony proident vinyl. Irony stumptown magna nulla, nisi next level gentrify twee nostrud veniam retro tumblr forage. Gastropub wolf vegan hella, messenger bag next level keytar aliqua synth put a bird on it dolor exercitation iphone. Selvage tempor mollit kale chips carles. Ethnic irure master cleanse, carles non godard flexitarian. You probably haven't heard of them reprehenderit cillum ea post-ironic, delectus ut mlkshk chillwave sriracha single-origin coffee sunt. Dolore fixie do american apparel, kogi velit salvia VHS forage bespoke pariatur. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-50 h-30 title-top">
+ <h3>NASA's Webb Flight Backplane Completed <span>Published May 3, 2012</span></h3>
+ <p>Qui trust fund artisan, ullamco jean shorts craft beer ad forage. Kale chips scenester stumptown fugiat, magna nostrud aliqua. Chambray nihil gastropub 3 wolf moon food truck, cillum leggings. Mumblecore do iphone umami pork belly. Enim banh mi ut consequat, mixtape bushwick portland leggings sustainable officia nulla. Tattooed cillum ex, cray letterpress locavore marfa synth organic etsy minim williamsburg exercitation twee. Single-origin coffee cillum nulla polaroid ethical, fugiat incididunt. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ </div>
+
+ <div class="f-page">
+ <div class="f-title">
+ <a href="http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/">Previous Demo</a>
+ <h2>Incredible Spacenews</h2>
+ <a href="http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/">Back to the Codrops Article</a>
+ </div>
+ <div class="box w-70 h-50 box-b-r title-top box-img-left">
+ <div class="img-cont img-4"></div>
+ <h3>Expedition 30 Astronaut back on Earth <span>Published May 3, 2012</span></h3>
+ <p>Consectetur locavore brooklyn dreamcatcher, aesthetic anim dolor put a bird on it semiotics godard pork belly forage. VHS veniam aliqua thundercats dolore keffiyeh, direct trade authentic PBR eiusmod. Dolore veniam fanny pack, proident iphone mixtape irure sed. Lo-fi leggings stumptown cardigan etsy, pitchfork echo park terry richardson next level labore proident. Messenger bag cillum squid scenester, before they sold out dolor nostrud ad bicycle rights. Ut ex bicycle rights, wes anderson thundercats duis synth gluten-free hoodie twee. Four loko artisan viral, letterpress dreamcatcher twee yr cray vegan enim photo booth 3 wolf moon. Id veniam mustache squid, cliche terry richardson organic quis dreamcatcher skateboard. Chambray before they sold out yr, iphone street art ut locavore squid placeat you probably haven't heard of them small batch. Cred proident occaecat wolf, fixie letterpress est biodiesel kogi gentrify. Artisan +1 culpa, bicycle rights trust fund direct trade consectetur gentrify synth pariatur twee delectus consequat wayfarers deserunt. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-30 h-50">
+ <div class="img-cont img-5"></div>
+ <h3>Space Shuttle Discovery Ready For Demate <span>Published May 3, 2012</span></h3>
+ <p>Ethical 3 wolf moon sartorial nihil consequat twee, officia banh mi scenester carles vero thundercats. Keffiyeh mlkshk cliche craft beer, sartorial bespoke flexitarian helvetica consequat. Echo park organic nihil nostrud brooklyn scenester, delectus bushwick est narwhal sriracha. Chambray terry richardson direct trade, tumblr keffiyeh semiotics minim post-ironic. Sapiente nostrud banksy in nisi, lo-fi kale chips polaroid retro. 8-bit you probably haven't heard of them bespoke cred portland trust fund yr dolore sed. Art party quis street art american apparel lomo. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-30 h-50 box-b-r title-top">
+ <h3>Black Hole Caught Red-Handed in a Stellar Homicide <span>Published May 3, 2012</span></h3>
+ <p>Salvia +1 pork belly cosby sweater, lo-fi wolf tattooed VHS. Before they sold out dolore cray flexitarian et VHS +1 trust fund. Typewriter squid fap aute wolf 3 wolf moon, vice cillum street art. Austin organic gluten-free, ex cosby sweater odio squid. Iphone high life sriracha, +1 cupidatat assumenda shoreditch exercitation wayfarers. Aesthetic selvage nesciunt ennui. Nisi anim single-origin coffee, ullamco bushwick delectus fanny pack marfa tumblr cliche. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-70 h-50 title-top box-img-left">
+ <div class="img-cont img-6"></div>
+ <h3>Space Station Trio Lands Safely In Kazakhstan <span>Published May 3, 2012</span></h3>
+ <p>Consectetur locavore brooklyn dreamcatcher, aesthetic anim dolor put a bird on it semiotics godard pork belly forage. VHS veniam aliqua thundercats dolore keffiyeh, direct trade authentic PBR eiusmod. Dolore veniam fanny pack, proident iphone mixtape irure sed. Lo-fi leggings stumptown cardigan etsy, pitchfork echo park terry richardson next level labore proident. Messenger bag cillum squid scenester, before they sold out dolor nostrud ad bicycle rights. Ut ex bicycle rights, wes anderson thundercats duis synth gluten-free hoodie twee. Four loko artisan viral, letterpress dreamcatcher twee yr cray vegan enim photo booth 3 wolf moon. Semiotics mlkshk anim sustainable butcher tempor. Odio single-origin coffee raw denim consequat mcsweeney's retro bespoke. Vero voluptate minim, letterpress accusamus twee farm-to-table pariatur cray. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ </div>
+
+ <div class="f-page">
+ <div class="f-title">
+ <a href="http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/">Previous Demo</a>
+ <h2>Incredible Spacenews</h2>
+ <a href="http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/">Back to the Codrops Article</a>
+ </div>
+ <div class="box w-30 h-60 box-b-r title-top">
+ <h3>NASA Statement on John Glenn Selection for Medal of Freedom <span>Published May 3, 2012</span></h3>
+ <p>Accusamus yr gluten-free id. Ennui occupy scenester polaroid, incididunt VHS minim sustainable skateboard aute cillum retro. Odd future gluten-free excepteur retro, biodiesel jean shorts minim nisi. Mlkshk hoodie next level pop-up 8-bit. Butcher scenester aliqua, tumblr nisi mcsweeney's PBR pork belly bespoke keytar cillum laboris swag pitchfork. Fugiat et eu american apparel truffaut brooklyn minim. Incididunt quis pickled, chillwave +1 odio dolore freegan est pop-up before they sold out twee cliche echo park ut. In high life swag tofu ethnic 8-bit, seitan pinterest DIY lomo post-ironic. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-70 h-60 box-img-left title-top">
+ <div class="img-cont img-7"></div>
+ <h3>Legendary Astronaut Shannon Lucid Retires From NASA <span>Published May 3, 2012</span></h3>
+ <p>Wes anderson trust fund organic pour-over, aute authentic high life fanny pack enim. Ethnic mumblecore salvia, letterpress minim velit fugiat sartorial beard mixtape vice ad. Farm-to-table aute cred cosby sweater sed, dolore pork belly pinterest keytar 3 wolf moon mustache. Vice thundercats pour-over, lo-fi echo park accusamus ullamco adipisicing selvage street art you probably haven't heard of them etsy. Readymade bushwick mumblecore whatever aesthetic, do nesciunt direct trade proident culpa. Vegan you probably haven't heard of them hoodie adipisicing qui, voluptate Austin stumptown photo booth sed. Mixtape excepteur locavore eu, labore sustainable nisi tofu narwhal fanny pack VHS nulla aliqua. Beard velit street art aute sartorial. Sapiente pitchfork polaroid, fugiat ea DIY williamsburg forage officia sint occaecat. Gentrify exercitation cray marfa, blog biodiesel readymade aliquip beard placeat raw denim stumptown. Austin photo booth accusamus et semiotics. Messenger bag ethical direct trade ullamco jean shorts. Selvage authentic seitan direct trade delectus butcher, mollit occupy cillum photo booth banksy proident gentrify commodo vice. Retro qui cray whatever. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-40 h-40 box-img-left box-b-r title-top">
+ <div class="img-cont img-8"></div>
+ <h3>Coverage Set For Next Soyuz Space Station Crew Rotation <span>Published May 3, 2012</span></h3>
+ <p>Mcsweeney's pitchfork chambray tattooed four loko, commodo nesciunt lo-fi dreamcatcher mixtape eu occaecat vinyl cupidatat. Delectus selvage gentrify, commodo fingerstache jean shorts sriracha you probably haven't heard of them aesthetic. Bespoke nulla eiusmod deserunt, qui 8-bit +1 high life proident dolor small batch accusamus laborum ethical. In high life swag tofu ethnic 8-bit, seitan pinterest DIY lomo post-ironic. American apparel fingerstache portland, lomo thundercats small batch velit quis letterpress. Dolore iphone accusamus pitchfork authentic. Qui narwhal voluptate, street art keffiyeh non laborum. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-30 h-40 box-b-r title-top">
+ <h3>Shuttle Enterprise to Fly Over New York City Metro Area April 23 <span>Published May 3, 2012</span></h3>
+ <p>Authentic put a bird on it mustache magna. Terry richardson dolor vero, magna odio synth letterpress umami brunch vice craft beer Austin. Velit mcsweeney's consequat wes anderson. Yr eu minim id. Pinterest odio keytar, irony bushwick pickled delectus placeat 3 wolf moon trust fund. Small batch mixtape carles chambray aute pop-up reprehenderit, portland magna skateboard vero dreamcatcher. Id artisan twee tempor excepteur pitchfork. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ <div class="box w-30 h-40 title-top">
+ <h3>Top Scientist and Technologist Discuss What's Next for NASA <span>Published May 3, 2012</span></h3>
+ <p>Nisi anim raw denim, occupy seitan magna selvage pork belly leggings gluten-free. Street art consequat aliquip, echo park helvetica enim pariatur fanny pack aesthetic et laboris pickled jean shorts ethical. Austin pop-up next level esse, retro quinoa locavore mollit etsy elit nesciunt quis salvia beard. Quis magna consequat selvage, ullamco commodo exercitation. VHS polaroid fugiat quis gastropub, cosby sweater aliquip aesthetic velit jean shorts swag. Put a bird on it etsy pork belly synth nisi, pitchfork wes anderson semiotics cliche ea. Cliche officia cosby sweater ullamco, quis stumptown est blog vinyl pork belly. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
+ </div>
+ </div>
+
+ <div class="f-page f-cover-back">
+ <div id="codrops-ad-wrapper">
+
+ </div>
+ </div>
+ </div>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript">
+
+ var $container = $( '#flip' ),
+ $pages = $container.children().hide();
+
+ Modernizr.load({
+ test: Modernizr.csstransforms3d && Modernizr.csstransitions,
+ yep : ['js/jquery.tmpl.min.js','js/jquery.history.js','js/core.string.js','js/jquery.touchSwipe-1.2.5.js','js/jquery.flips.js'],
+ nope: 'css/fallback.css',
+ callback : function( url, result, key ) {
+
+ if( url === 'css/fallback.css' ) {
+ $pages.show();
+ }
+ else if( url === 'js/jquery.flips.js' ) {
+ $container.flips();
+ }
+
+ }
+ });
+
+ </script>
+ </body>
+</html>
View
240 js/core.string.js
@@ -0,0 +1,240 @@
+/**
+ * @depends nothing
+ * @name core.string
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ */
+
+/**
+ * Return a new string with any spaces trimmed the left and right of the string
+ * @version 1.0.0
+ * @date June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.trim = String.prototype.trim || function() {
+ // Trim off any whitespace from the front and back
+ return this.replace(/^\s+|\s+$/g, '');
+};
+
+/**
+ * Return a new string with the value stripped from the left and right of the string
+ * @version 1.1.1
+ * @date July 22, 2010
+ * @since 1.0.0, June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.strip = String.prototype.strip || function(value,regex){
+ // Strip a value from left and right, with optional regex support (defaults to false)
+ value = String(value);
+ var str = this;
+ if ( value.length ) {
+ if ( !(regex||false) ) {
+ // We must escape value as we do not want regex support
+ value = value.replace(/([\[\]\(\)\^\$\.\?\|\/\\])/g, '\\$1');
+ }
+ str = str.replace(eval('/^'+value+'+|'+value+'+$/g'), '');
+ }
+ return String(str);
+}
+
+/**
+ * Return a new string with the value stripped from the left of the string
+ * @version 1.1.1
+ * @date July 22, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.stripLeft = String.prototype.stripLeft || function(value,regex){
+ // Strip a value from the left, with optional regex support (defaults to false)
+ value = String(value);
+ var str = this;
+ if ( value.length ) {
+ if ( !(regex||false) ) {
+ // We must escape value as we do not want regex support
+ value = value.replace(/([\[\]\(\)\^\$\.\?\|\/\\])/g, '\\$1');
+ }
+ str = str.replace(eval('/^'+value+'+/g'), '');
+ }
+ return String(str);
+}
+
+/**
+ * Return a new string with the value stripped from the right of the string
+ * @version 1.1.1
+ * @date July 22, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.stripRight = String.prototype.stripRight || function(value,regex){
+ // Strip a value from the right, with optional regex support (defaults to false)
+ value = String(value);
+ var str = this;
+ if ( value.length ) {
+ if ( !(regex||false) ) {
+ // We must escape value as we do not want regex support
+ value = value.replace(/([\[\]\(\)\^\$\.\?\|\/\\])/g, '\\$1');
+ }
+ str = str.replace(eval('/'+value+'+$/g'), '');
+ }
+ return String(str);
+}
+
+/**
+ * Return a int of the string
+ * @version 1.0.0
+ * @date June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.toInt = String.prototype.toInt || function(){
+ // Convert to a Integer
+ return parseInt(this,10);
+};
+
+/**
+ * Return a new string of the old string wrapped with the start and end values
+ * @version 1.0.0
+ * @date June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.wrap = String.prototype.wrap || function(start,end){
+ // Wrap the string
+ return start+this+end;
+};
+
+/**
+ * Return a new string of a selection of the old string wrapped with the start and end values
+ * @version 1.0.0
+ * @date June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.wrapSelection = String.prototype.wrapSelection || function(start,end,a,z){
+ // Wrap the selection
+ if ( typeof a === 'undefined' || a === null ) a = this.length;
+ if ( typeof z === 'undefined' || z === null ) z = this.length;
+ return this.substring(0,a)+start+this.substring(a,z)+end+this.substring(z);
+};
+
+/**
+ * Return a new string of the slug of the old string
+ * @version 1.1.0
+ * @date July 16, 2010
+ * @since 1.0.0, June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.toSlug = String.prototype.toSlug || function(){
+ // Convert a string to a slug
+ return this.toLowerCase().replace(/[\s_]/g, '-').replace(/[^-a-z0-9]/g, '').replace(/--+/g, '-').replace(/^-+|-+$/g,'');
+}
+
+/**
+ * Return a new JSON object of the old string.
+ * Turns:
+ * file.js?a=1&amp;b.c=3.0&b.d=four&a_false_value=false&a_null_value=null
+ * Into:
+ * {"a":1,"b":{"c":3,"d":"four"},"a_false_value":false,"a_null_value":null}
+ * @version 1.1.0
+ * @date July 16, 2010
+ * @since 1.0.0, June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.queryStringToJSON = String.prototype.queryStringToJSON || function ( )
+{ // Turns a params string or url into an array of params
+ // Prepare
+ var params = String(this);
+ // Remove url if need be
+ params = params.substring(params.indexOf('?')+1);
+ // params = params.substring(params.indexOf('#')+1);
+ // Change + to %20, the %20 is fixed up later with the decode
+ params = params.replace(/\+/g, '%20');
+ // Do we have JSON string
+ if ( params.substring(0,1) === '{' && params.substring(params.length-1) === '}' )
+ { // We have a JSON string
+ return eval(decodeURIComponent(params));
+ }
+ // We have a params string
+ params = params.split(/\&(amp\;)?/);
+ var json = {};
+ // We have params
+ for ( var i = 0, n = params.length; i < n; ++i )
+ {
+ // Adjust
+ var param = params[i] || null;
+ if ( param === null ) { continue; }
+ param = param.split('=');
+ if ( param === null ) { continue; }
+ // ^ We now have "var=blah" into ["var","blah"]
+
+ // Get
+ var key = param[0] || null;
+ if ( key === null ) { continue; }
+ if ( typeof param[1] === 'undefined' ) { continue; }
+ var value = param[1];
+ // ^ We now have the parts
+
+ // Fix
+ key = decodeURIComponent(key);
+ value = decodeURIComponent(value);
+ try {
+ // value can be converted
+ value = eval(value);
+ } catch ( e ) {
+ // value is a normal string
+ }
+
+ // Set
+ // window.console.log({'key':key,'value':value}, split);
+ var keys = key.split('.');
+ if ( keys.length === 1 )
+ { // Simple
+ json[key] = value;
+ }
+ else
+ { // Advanced (Recreating an object)
+ var path = '',
+ cmd = '';
+ // Ensure Path Exists
+ $.each(keys,function(ii,key){
+ path += '["'+key.replace(/"/g,'\\"')+'"]';
+ jsonCLOSUREGLOBAL = json; // we have made this a global as closure compiler struggles with evals
+ cmd = 'if ( typeof jsonCLOSUREGLOBAL'+path+' === "undefined" ) jsonCLOSUREGLOBAL'+path+' = {}';
+ eval(cmd);
+ json = jsonCLOSUREGLOBAL;
+ delete jsonCLOSUREGLOBAL;
+ });
+ // Apply Value
+ jsonCLOSUREGLOBAL = json; // we have made this a global as closure compiler struggles with evals
+ valueCLOSUREGLOBAL = value; // we have made this a global as closure compiler struggles with evals
+ cmd = 'jsonCLOSUREGLOBAL'+path+' = valueCLOSUREGLOBAL';
+ eval(cmd);
+ json = jsonCLOSUREGLOBAL;
+ delete jsonCLOSUREGLOBAL;
+ delete valueCLOSUREGLOBAL;
+ }
+ // ^ We now have the parts added to your JSON object
+ }
+ return json;
+};
View
962 js/jquery.flips.js
@@ -0,0 +1,962 @@
+/**
+ * jquery.flips.js
+ *
+ * Copyright 2011, Pedro Botelho / Codrops
+ * Free to use under the MIT license.
+ *
+ * Date: Fri May 4 2012
+ */
+
+/**
+ * Note: This is highly experimental and just a proof-of-concept!
+ * There are some few "hacks", probably some bugs, and some functionality
+ * is incomplete... definitely not ready for a production environment.
+ *
+ *
+ * Tested and working on:
+ * - Google Chrome 18.0.1025.168
+ * - Apple Safari 5.1.5
+ * - Apple Safari 5.1 Mobile
+ *
+ */
+
+(function( window, undefined ) {
+
+ $.Flips = function( options, element ) {
+
+ this.$el = $( element );
+ this._init( options );
+
+ };
+
+ $.Flips.defaults = {
+ flipspeed : 900,
+ fliptimingfunction : 'linear',
+ current : 0
+ };
+
+ $.Flips.prototype = {
+ _init : function( options ) {
+
+ this.options = $.extend( true, {}, $.Flips.defaults, options );
+ this.$pages = this.$el.children( 'div.f-page' );
+ this.pagesCount = this.$pages.length;
+ this.History = window.History;
+ this.currentPage = this.options.current;
+ this._validateOpts();
+ this._getWinSize();
+ this._getState();
+ this._layout();
+ this._initTouchSwipe();
+ this._loadEvents();
+ this._goto();
+
+ },
+ _validateOpts : function() {
+
+ if( this.currentPage < 0 || this.currentPage > this.pagesCount ) {
+
+ this.currentPage = 0;
+
+ }
+
+ },
+ _getWinSize : function() {
+
+ var $win = $( window );
+
+ this.windowProp = {
+ width : $win.width(),
+ height : $win.height()
+ };
+
+ },
+ _goto : function() {
+
+ var page = ( this.state === undefined ) ? this.currentPage : this.state;
+
+ if( !this._isNumber( page ) || page < 0 || page > this.flipPagesCount ) {
+
+ page = 0;
+
+ }
+
+ this.currentPage = page;
+
+ },
+ _getState : function() {
+
+ this.state = this.History.getState().url.queryStringToJSON().page;
+
+ },
+ _isNumber : function( n ) {
+
+ return parseFloat( n ) == parseInt( n ) && !isNaN( n ) && isFinite( n );
+
+ },
+ _adjustLayout : function( page ) {
+
+ var _self = this;
+
+ this.$flipPages.each( function( i ) {
+
+ var $page = $(this);
+
+ if( i === page - 1 ) {
+
+ $page.css({
+ '-webkit-transform' : 'rotateY( -180deg )',
+ '-moz-transform' : 'rotateY( -180deg )',
+ 'z-index' : _self.flipPagesCount - 1 + i
+ });
+
+ }
+ else if( i < page ) {
+
+ $page.css({
+ '-webkit-transform' : 'rotateY( -181deg )', // todo: fix this (should be -180deg)
+ '-moz-transform' : 'rotateY( -181deg )', // todo: fix this (should be -180deg)
+ 'z-index' : _self.flipPagesCount - 1 + i
+ });
+
+ }
+ else {
+
+ $page.css({
+ '-webkit-transform' : 'rotateY( 0deg )',
+ '-moz-transform' : 'rotateY( 0deg )',
+ 'z-index' : _self.flipPagesCount - 1 - i
+ });
+
+ }
+
+ } );
+
+ },
+ _saveState : function() {
+
+ // adds a new state to the history object and triggers the statechange event on the window
+ var page = this.currentPage;
+
+ if( this.History.getState().url.queryStringToJSON().page !== page ) {
+
+ this.History.pushState( null, null, '?page=' + page );
+
+ }
+
+ },
+ _layout : function() {
+
+ this._setLayoutSize();
+
+ for( var i = 0; i <= this.pagesCount - 2; ++i ) {
+
+ var $page = this.$pages.eq( i ),
+ pageData = {
+ theClass : 'page',
+ theContentFront : $page.html(),
+ theContentBack : ( i !== this.pagesCount ) ? this.$pages.eq( i + 1 ).html() : '',
+ theStyle : 'z-index: ' + ( this.pagesCount - i ) + ';left: ' + ( this.windowProp.width / 2 ) + 'px;',
+ theContentStyleFront : 'width:' + this.windowProp.width + 'px;',
+ theContentStyleBack : 'width:' + this.windowProp.width + 'px;'
+ };
+
+ if( i === 0 ) {
+
+ pageData.theClass += ' cover';
+
+ }
+ else {
+
+ pageData.theContentStyleFront += 'left:-' + ( this.windowProp.width / 2 ) + 'px';
+
+ if( i === this.pagesCount - 2 ) {
+
+ pageData.theClass += ' cover-back';
+
+ }
+
+ }
+
+ $( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
+
+ }
+
+ this.$pages.remove();
+ this.$flipPages = this.$el.children( 'div.page' );
+ this.flipPagesCount = this.$flipPages.length;
+
+ this._adjustLayout( ( this.state === undefined ) ? this.currentPage : this.state );
+
+ },
+ _setLayoutSize : function() {
+
+ this.$el.css( {
+ width : this.windowProp.width,
+ height : this.windowProp.height
+ } );
+
+ },
+ _initTouchSwipe : function() {
+
+ var _self = this;
+
+ this.$el.swipe( {
+ threshold : 0,
+ swipeStatus : function( event, phase, start, end, direction, distance ) {
+
+ var startX = start.x,
+ endX = end.x,
+ sym, angle,
+ oob = false,
+ noflip = false;
+
+ // check the "page direction" to flip:
+ // if the page flips from the right to the left (right side page)
+ // or from the left to the right (left side page).
+ // check only if not animating
+ if( !_self._isAnimating() ) {
+
+ ( startX < _self.windowProp.width / 2 ) ? _self.flipSide = 'l2r' : _self.flipSide = 'r2l';
+
+ }
+
+ if( direction === 'up' || direction === 'down' ) {
+
+ if( _self.angle === undefined || _self.angle === 0 ) {
+
+ _self._removeOverlays();
+ return false;
+
+ }
+ else {
+
+ ( _self.angle < 90 ) ? direction = 'right' : direction = 'left';
+
+ }
+
+ };
+
+ _self.flipDirection = direction;
+
+ // on the first & last page neighbors we don't flip
+ if( _self.currentPage === 0 && _self.flipSide === 'l2r' || _self.currentPage === _self.flipPagesCount && _self.flipSide === 'r2l' ) {
+
+ return false;
+
+ }
+
+ // save ending point (symetric point):
+ // if we touch / start dragging on, say [x=10], then
+ // we need to drag until [window's width - 10] in order to flip the page 100%.
+ // if the symetric point is too close we are giving some margin:
+ // if we would start dragging right next to [window's width / 2] then
+ // the symmetric point would be very close to the starting point. A very short swipe
+ // would be enough to flip the page..
+ sym = _self.windowProp.width - startX;
+
+ var symMargin = 0.9 * ( _self.windowProp.width / 2 );
+ if( Math.abs( startX - sym ) < symMargin ) {
+
+ ( _self.flipSide === 'r2l' ) ? sym -= symMargin / 2 : sym += symMargin / 2;
+
+ }
+
+ // some special cases:
+ // Page is on the right side,
+ // and we drag/swipe to the same direction
+ // ending on a point > than the starting point
+ // -----------------------
+ // | | |
+ // | | |
+ // | sym | s |
+ // | | e |
+ // | | |
+ // -----------------------
+ if( endX > startX && _self.flipSide === 'r2l' ) {
+
+ angle = 0;
+ oob = true;
+ noflip = true;
+
+ }
+ // Page is on the right side,
+ // and we drag/swipe to the opposite direction
+ // ending on a point < than the symmetric point
+ // -----------------------
+ // | | |
+ // | | |
+ // | sym | s |
+ // | e | |
+ // | | |
+ // -----------------------
+ else if( endX < sym && _self.flipSide === 'r2l' ) {
+
+ angle = 180;
+ oob = true;
+
+ }
+ // Page is on the left side,
+ // and we drag/swipe to the opposite direction
+ // ending on a point > than the symmetric point
+ // -----------------------
+ // | | |
+ // | | |
+ // | s | sym |
+ // | | e |
+ // | | |
+ // -----------------------
+ else if( endX > sym && _self.flipSide === 'l2r' ) {
+
+ angle = 0;
+ oob = true;
+
+ }
+ // Page is on the left side,
+ // and we drag/swipe to the same direction
+ // ending on a point < than the starting point
+ // -----------------------
+ // | | |
+ // | | |
+ // | s | sym |
+ // | e | |
+ // | | |
+ // -----------------------
+ else if( endX < startX && _self.flipSide === 'l2r' ) {
+
+ angle = 180;
+ oob = true;
+ noflip = true;
+
+ }
+ // we drag/swipe to a point between
+ // the starting point and symetric point
+ // -----------------------
+ // | | |
+ // | s | sym |
+ // | sym | s |
+ // | e| |
+ // | | |
+ // -----------------------
+ else {
+
+ var s, e, val;
+
+ ( _self.flipSide === 'r2l' ) ?
+ ( s = startX, e = sym, val = startX - distance ) :
+ ( s = sym, e = startX , val = startX + distance );
+
+ angle = _self._calcAngle( val, s, e );
+
+ if( ( direction === 'left' && _self.flipSide === 'l2r' ) || ( direction === 'right' && _self.flipSide === 'r2l' ) ) {
+
+ noflip = true;
+
+ }
+
+ }
+
+ switch( phase ) {
+
+ case 'start' :
+
+ if( _self._isAnimating() ) {
+
+ // the user can still grab a page while one is flipping (in this case not being able to move)
+ // and once the page is flipped the move/touchmove events are triggered..
+ _self.start = true;
+ return false;
+
+ }
+ else {
+
+ _self.start = false;
+
+ }
+
+ // check which page is clicked/touched
+ _self._setFlippingPage();
+
+ // check which page comes before & after the one we are clicking
+ _self.$beforePage = _self.$flippingPage.prev();
+ _self.$afterPage = _self.$flippingPage.next();
+
+ break;
+
+ case 'move' :
+
+ if( distance > 0 ) {
+
+ if( _self._isAnimating() || _self.start ) {
+
+ return false;
+
+ }
+
+ // adds overlays: shows shadows while flipping
+ if( !_self.hasOverlays ) {
+
+ _self._addOverlays();
+
+ }
+
+ // save last angle
+ _self.angle = angle;
+ // we will update the rotation value of the page while we move it
+ _self._turnPage( angle , true );
+
+ }
+ break;
+
+ case 'end' :
+
+ if( distance > 0 ) {
+
+ if( _self._isAnimating() || _self.start ) return false;
+
+ _self.isAnimating = true;
+
+ // keep track if the page was actually flipped or not
+ // the data flip will be used later on the transitionend event
+ ( noflip ) ? _self.$flippingPage.data( 'flip', false ) : _self.$flippingPage.data( 'flip', true );
+
+ // if out of bounds we will "manually" flip the page,
+ // meaning there will be no transition set
+ if( oob ) {
+
+ if( !noflip ) {
+
+ // the page gets flipped (user dragged from the starting point until the symmetric point)
+ // update current page
+ _self._updatePage();
+
+ }
+
+ _self._onEndFlip( _self.$flippingPage );
+
+ }
+ else {
+
+ // save last angle
+ _self.angle = angle;
+ // calculate the speed to flip the page:
+ // the speed will depend on the current angle.
+ _self._calculateSpeed();
+
+ switch( direction ) {
+
+ case 'left' :
+
+ _self._turnPage( 180 );
+
+ if( _self.flipSide === 'r2l' ) {
+
+ _self._updatePage();
+
+ }
+
+ break;
+
+ case 'right' :
+
+ _self._turnPage( 0 );
+
+ if( _self.flipSide === 'l2r' ) {
+
+ _self._updatePage();
+
+ }
+
+ break;
+
+ };
+
+ }
+
+ }
+
+ break;
+
+ };
+
+ }
+
+ } );
+
+ },
+ _setFlippingPage : function() {
+
+ var _self = this;
+
+ ( this.flipSide === 'l2r' ) ?
+ this.$flippingPage = this.$flipPages.eq( this.currentPage - 1 ) :
+ this.$flippingPage = this.$flipPages.eq( this.currentPage );
+
+ this.$flippingPage.on( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips', function( event ) {
+
+ if( $( event.target ).hasClass( 'page' ) ) {
+
+ _self._onEndFlip( $(this) );
+
+ }
+
+ });
+
+ },
+ _updatePage : function() {
+
+ if( this.flipSide === 'r2l' ) {
+
+ ++this.currentPage;
+
+ }
+ else if( this.flipSide === 'l2r' ) {
+
+ --this.currentPage;
+
+ }
+
+ },
+ _isAnimating : function() {
+
+ if( this.isAnimating ) {
+
+ return true;
+
+ }
+
+ return false;
+
+ },
+ _loadEvents : function() {
+
+ var _self = this;
+
+ $( window ).on( 'resize.flips', function( event ) {
+
+ _self._getWinSize();
+ _self._setLayoutSize();
+
+ var $contentFront = _self.$flipPages.children( 'div.front' ).find( 'div.content' ),
+ $contentBack = _self.$flipPages.children( 'div.back' ).find( 'div.content' )
+
+ _self.$flipPages.css( 'left', _self.windowProp.width / 2 );
+
+ $contentFront.filter( function( i ) {
+ return i > 0;
+ }).css( {
+ width : _self.windowProp.width,
+ left : -_self.windowProp.width / 2
+ } );
+ $contentFront.eq( 0 ).css( 'width', _self.windowProp.width );
+
+ $contentBack.css( 'width', _self.windowProp.width );
+
+ } );
+
+ $( window ).on( 'statechange.flips', function( event ) {
+
+ _self._getState();
+ _self._goto();
+ if( !_self.isAnimating ) {
+
+ _self._adjustLayout( _self.currentPage );
+
+ }
+
+ } );
+
+ this.$flipPages.find( '.box' ).on( 'click.flips', function( event ) {
+
+ var $box = $(this),
+ $boxClose = $( '<span class="box-close">close</span>' ),
+ transitionProp = {
+ speed : 450,
+ timingfunction : 'linear'
+ },
+ $overlay = $( '<div class="overlay">close</div>' ).css( {
+ 'z-index' : 9998,
+ '-webkit-transition' : 'opacity ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction,
+ '-moz-transition' : 'opacity ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
+ } ).prependTo( $( 'body' ) ),
+ prop = {
+ width : $box.outerWidth(true),
+ height : $box.outerHeight(true),
+ left : $box.offset().left,
+ top : $box.offset().top
+ },
+ $placeholder = $box.clone().css( {
+ 'position' : 'absolute',
+ 'width' : prop.width,
+ 'height' : prop.height,
+ 'left' : prop.left,
+ 'top' : prop.top,
+ 'zIndex' : 9999,
+ 'overflow-y' : 'auto',
+ '-webkit-transition': 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
+ } )
+ .insertAfter( $overlay )
+ .end()
+ .append( $boxClose.on( 'click.flips', function( event ) {
+
+ $overlay.css( 'opacity', 0 );
+
+ $placeholder.children().hide().end().removeClass( 'box-expanded' ).css( {
+ width : _self.windowProp.width,
+ height : _self.windowProp.height,
+ 'overflow-y' : 'hidden'
+ } );
+
+ setTimeout( function() {
+ $placeholder.css( {
+ left : prop.left,
+ top : prop.top,
+ width : prop.width,
+ height : prop.height,
+ '-webkit-transition' : 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
+ });
+ }, 0 );
+
+ }) )
+ .children()
+ .hide()
+ .end()
+ .on( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips', function( event ) {
+
+ if( $( event.target ).hasClass( 'box-expanded' ) ) { // expanding
+
+ $(this).css( {
+ width : '100%',
+ height : '100%',
+ '-webkit-transition' : 'none'
+ } ).children().fadeIn();
+
+ }
+ else { // collapsing
+
+ $overlay.remove();
+ $(this).remove();
+
+ }
+
+ });
+
+ setTimeout( function() {
+
+ $overlay.css( {
+ opacity : 1
+ } );
+
+ $placeholder.addClass( 'box-expanded' ).css( {
+ left : 0,
+ top : 0,
+ width : _self.windowProp.width,
+ height : _self.windowProp.height
+ });
+
+ }, 0 );
+
+ } );
+
+ },
+ _onEndFlip : function( $page ) {
+
+ // if the page flips from left to right we will need to change the z-index of the flipped page
+ if( ( this.flipSide === 'l2r' && $page.data( 'flip' ) ) ||
+ ( this.flipSide === 'r2l' && !$page.data( 'flip' ) ) ) {
+
+ $page.css( 'z-index', this.pagesCount - 2 - $page.index() );
+
+ }
+
+ this.$flippingPage.css( {
+ '-webkit-transition' : 'none',
+ '-moz-transition' : 'none'
+ } );
+
+ // remove overlays
+ this._removeOverlays();
+ this._saveState();
+ this.isAnimating = false;
+
+ // hack (todo: issues with safari / z-indexes)
+ if( this.flipSide === 'r2l' || ( this.flipSide === 'l2r' && !$page.data( 'flip' ) ) ) {
+
+ this.$flippingPage.find('.back').css( '-webkit-transform', 'rotateY(-180deg)' );
+
+ }
+
+ },
+ // given the touch/drag start point (s), the end point (e) and a value in between (x)
+ // calculate the respective angle ( 0deg - 180deg )
+ _calcAngle : function( x, s, e ) {
+
+ return ( -180 / ( s - e ) ) * x + ( ( s * 180 ) / ( s - e ) );
+
+ },
+ // given the current angle and the default speed, calculate the respective speed to accomplish the flip
+ _calculateSpeed : function() {
+
+ ( this.flipDirection === 'right' ) ?
+ this.flipSpeed = ( this.options.flipspeed / 180 ) * this.angle :
+ this.flipSpeed = - ( this.options.flipspeed / 180 ) * this.angle + this.options.flipspeed;
+
+ },
+ _turnPage : function( angle, update ) {
+
+ // hack / todo: before page that was set to -181deg should have -180deg
+ this.$beforePage.css({
+ '-webkit-transform' : 'rotateY( -180deg )',
+ '-moz-transform' : 'rotateY( -180deg )'
+ });
+
+ // if not moving manually set a transition to flip the page
+ if( !update ) {
+
+ this.$flippingPage.css( {
+ '-webkit-transition' : '-webkit-transform ' + this.flipSpeed + 'ms ' + this.options.fliptimingfunction,
+ '-moz-transition' : '-moz-transform ' + this.flipSpeed + 'ms ' + this.options.fliptimingfunction
+ } );
+
+ }
+
+ // if page is a right side page, we need to set its z-index higher as soon the page starts to flip.
+ // this will make the page be on "top" of the left ones.
+ // note: if the flipping page is on the left side then we set the z-index after the flip is over.
+ // this is done on the _onEndFlip function.
+ var idx = ( this.flipSide === 'r2l' ) ? this.currentPage : this.currentPage - 1;
+ if( this.flipSide === 'r2l' ) {
+
+ this.$flippingPage.css( 'z-index', this.flipPagesCount - 1 + idx );
+
+ }
+
+ // hack (todo: issues with safari / z-indexes)
+ this.$flippingPage.find('.back').css( '-webkit-transform', 'rotateY(180deg)' );
+
+ // update the angle
+ this.$flippingPage.css( {
+ '-webkit-transform' : 'rotateY(-' + angle + 'deg)',
+ '-moz-transform' : 'rotateY(-' + angle + 'deg)'
+ } );
+
+ // show overlays
+ this._overlay( angle, update );
+
+ },
+ _addOverlays : function() {
+
+ var _self = this;
+
+ // remove current overlays
+ this._removeOverlays();
+
+ this.hasOverlays = true;
+
+ // overlays for the flipping page. One in the front, one in the back.
+
+ this.$frontoverlay = $( '<div class="flipoverlay"></div>' ).appendTo( this.$flippingPage.find( 'div.front > .outer' ) );
+ this.$backoverlay = $( '<div class="flipoverlay"></div>' ).appendTo( this.$flippingPage.find( 'div.back > .outer' ) )
+
+ // overlay for the page "under" the flipping page.
+ if( this.$afterPage ) {
+
+ this.$afterOverlay = $( '<div class="overlay"></div>' ).appendTo( this.$afterPage.find( 'div.front > .outer' ) );
+
+ }
+
+ // overlay for the page "before" the flipping page
+ if( this.$beforePage ) {
+
+ this.$beforeOverlay = $( '<div class="overlay"></div>' ).appendTo( this.$beforePage.find( 'div.back > .outer' ) );
+
+ }
+
+ },
+ _removeOverlays : function() {
+
+ // removes the 4 overlays
+ if( this.$frontoverlay )
+ this.$frontoverlay.remove();
+ if( this.$backoverlay )
+ this.$backoverlay.remove();
+ if( this.$afterOverlay )
+ this.$afterOverlay.remove();
+ if( this.$beforeOverlay )
+ this.$beforeOverlay.remove();
+
+ this.hasOverlays = false;
+
+ },
+ _overlay : function( angle, update ) {
+
+ // changes the opacity of each of the overlays.
+ if( update ) {
+
+ // if update is true, meaning we are manually flipping the page,
+ // we need to calculate the opacity that corresponds to the current angle
+ var afterOverlayOpacity = - ( 1 / 90 ) * angle + 1,
+ beforeOverlayOpacity = ( 1 / 90 ) * angle - 1;
+
+ if( this.$afterOverlay ) {
+
+ this.$afterOverlay.css( 'opacity', afterOverlayOpacity );
+
+ }
+ if( this.$beforeOverlay ) {
+
+ this.$beforeOverlay.css( 'opacity', beforeOverlayOpacity );
+
+ }
+
+ // the flipping page will have a fixed value.
+ // todo: add a gradient instead.
+ var flipOpacity = 0.1;
+ this.$frontoverlay.css( 'opacity', flipOpacity );
+ this.$backoverlay.css( 'opacity', flipOpacity );
+
+ }
+ else {
+
+ var _self = this;
+
+ // if we release the mouse / touchend then we will set a transition for the overlays.
+ // we will need to take in consideration the current angle, the speed (given the angle)
+ // and the delays for each overlay (the opacity of the overlay will only change
+ // when the flipping page is on the same side).
+ var afterspeed = this.flipSpeed,
+ beforespeed = this.flipSpeed,
+ margin = 60; // hack (todo: issues with safari / z-indexes)
+
+ if( this.$afterOverlay ) {
+
+ var afterdelay = 0;
+
+ if( this.flipDirection === 'right' ) {
+
+ if( this.angle > 90 ) {
+
+ afterdelay = Math.abs( this.flipSpeed - this.options.flipspeed / 2 - margin );
+ afterspeed = this.options.flipspeed / 2 - margin ;
+
+ }
+ else {
+
+ afterspeed -= margin;
+
+ }
+
+ }
+ else {
+
+ afterspeed = Math.abs( this.flipSpeed - this.options.flipspeed / 2 );
+
+ }
+
+ if( afterspeed <= 0 ) afterspeed = 1;
+
+ this.$afterOverlay.css( {
+ '-webkit-transition' : 'opacity ' + afterspeed + 'ms ' + this.options.fliptimingfunction + ' ' + afterdelay + 'ms',
+ '-moz-transition' : 'opacity ' + afterspeed + 'ms ' + this.options.fliptimingfunction + ' ' + afterdelay + 'ms',
+ 'opacity' : ( this.flipDirection === 'left' ) ? 0 : 1
+ } ).on( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips', function( event ) {
+ if( _self.$beforeOverlay ) _self.$beforeOverlay.off( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips');
+ setTimeout( function() {
+ _self._adjustLayout(_self.currentPage);
+ }, _self.options.flipspeed / 2 - margin );
+ } );
+
+ }
+
+ if( this.$beforeOverlay ) {
+
+ var beforedelay = 0;
+
+ if( this.flipDirection === 'left' ) {
+
+ if( this.angle < 90 ) {
+
+ beforedelay = Math.abs( this.flipSpeed - this.options.flipspeed / 2 - margin ) ;
+ beforespeed = this.options.flipspeed / 2 - margin;
+
+ }
+ else {
+
+ beforespeed -= margin;
+
+ }
+
+ }
+ else {
+
+ beforespeed = Math.abs( this.flipSpeed - this.options.flipspeed / 2 );
+
+ }
+
+ if( beforespeed <= 0 ) beforespeed = 1;
+
+ this.$beforeOverlay.css( {
+ '-webkit-transition' : 'opacity ' + beforespeed + 'ms ' + this.options.fliptimingfunction + ' ' + beforedelay + 'ms',
+ '-moz-transition' : 'opacity ' + beforespeed + 'ms ' + this.options.fliptimingfunction + ' ' + beforedelay + 'ms',
+ 'opacity' : ( this.flipDirection === 'left' ) ? 1 : 0
+ } ).on( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips', function( event ) {
+ if( _self.$afterOverlay ) _self.$afterOverlay.off( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips');
+ _self._adjustLayout(_self.currentPage);
+ } );
+
+ }
+
+ }
+
+ }
+ };
+
+ var logError = function( message ) {
+ if ( this.console ) {
+ console.error( message );
+ }
+ };
+
+ $.fn.flips = function( options ) {
+
+ if ( typeof options === 'string' ) {
+
+ var args = Array.prototype.slice.call( arguments, 1 );
+
+ this.each(function() {
+
+ var instance = $.data( this, 'flips' );
+
+ if ( !instance ) {
+ logError( "cannot call methods on flips prior to initialization; " +
+ "attempted to call method '" + options + "'" );
+ return;
+ }
+
+ if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
+ logError( "no such method '" + options + "' for flips instance" );
+ return;
+ }
+
+ instance[ options ].apply( instance, args );
+
+ });
+
+ }
+ else {
+
+ this.each(function() {
+
+ var instance = $.data( this, 'flips' );
+ if ( !instance ) {
+ $.data( this, 'flips', new $.Flips( options, this ) );
+ }
+ });
+
+ }
+
+ return this;
+
+ };
+
+})( window );
View
1 js/jquery.history.js
@@ -0,0 +1 @@
+window.JSON||(window.JSON={}),function(){function f(a){return a<10?"0"+a:a}function quote(a){return escapable.lastIndex=0,escapable.test(a)?'"'+a.replace(escapable,function(a){var b=meta[a];return typeof b=="string"?b:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+a+'"'}function str(a,b){var c,d,e,f,g=gap,h,i=b[a];i&&typeof i=="object"&&typeof i.toJSON=="function"&&(i=i.toJSON(a)),typeof rep=="function"&&(i=rep.call(b,a,i));switch(typeof i){case"string":return quote(i);case"number":return isFinite(i)?String(i):"null";case"boolean":case"null":return String(i);case"object":if(!i)return"null";gap+=indent,h=[];if(Object.prototype.toString.apply(i)==="[object Array]"){f=i.length;for(c=0;c<f;c+=1)h[c]=str(c,i)||"null";return e=h.length===0?"[]":gap?"[\n"+gap+h.join(",\n"+gap)+"\n"+g+"]":"["+h.join(",")+"]",gap=g,e}if(rep&&typeof rep=="object"){f=rep.length;for(c=0;c<f;c+=1)d=rep[c],typeof d=="string"&&(e=str(d,i),e&&h.push(quote(d)+(gap?": ":":")+e))}else for(d in i)Object.hasOwnProperty.call(i,d)&&(e=str(d,i),e&&h.push(quote(d)+(gap?": ":":")+e));return e=h.length===0?"{}":gap?"{\n"+gap+h.join(",\n"+gap)+"\n"+g+"}":"{"+h.join(",")+"}",gap=g,e}}"use strict",typeof Date.prototype.toJSON!="function"&&(Date.prototype.toJSON=function(a){return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null},String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(a){return this.valueOf()});var JSON=window.JSON,cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},rep;typeof JSON.stringify!="function"&&(JSON.stringify=function(a,b,c){var d;gap="",indent="";if(typeof c=="number")for(d=0;d<c;d+=1)indent+=" ";else typeof c=="string"&&(indent=c);rep=b;if(!b||typeof b=="function"||typeof b=="object"&&typeof b.length=="number")return str("",{"":a});throw new Error("JSON.stringify")}),typeof JSON.parse!="function"&&(JSON.parse=function(text,reviver){function walk(a,b){var c,d,e=a[b];if(e&&typeof e=="object")for(c in e)Object.hasOwnProperty.call(e,c)&&(d=walk(e,c),d!==undefined?e[c]=d:delete e[c]);return reviver.call(a,b,e)}var j;text=String(text),cx.lastIndex=0,cx.test(text)&&(text=text.replace(cx,function(a){return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)}));if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return j=eval("("+text+")"),typeof reviver=="function"?walk({"":j},""):j;throw new SyntaxError("JSON.parse")})}(),function(a,b){"use strict";var c=a.History=a.History||{},d=a.jQuery;if(typeof c.Adapter!="undefined")throw new Error("History.js Adapter has already been loaded...");c.Adapter={bind:function(a,b,c){d(a).bind(b,c)},trigger:function(a,b,c){d(a).trigger(b,c)},extractEventData:function(a,c,d){var e=c&&c.originalEvent&&c.originalEvent[a]||d&&d[a]||b;return e},onDomLoad:function(a){d(a)}},typeof c.init!="undefined"&&c.init()}(window),function(a,b){"use strict";var c=a.document,d=a.setTimeout||d,e=a.clearTimeout||e,f=a.setInterval||f,g=a.History=a.History||{};if(typeof g.initHtml4!="undefined")throw new Error("History.js HTML4 Support has already been loaded...");g.initHtml4=function(){if(typeof g.initHtml4.initialized!="undefined")return!1;g.initHtml4.initialized=!0,g.enabled=!0,g.savedHashes=[],g.isLastHash=function(a){var b=g.getHashByIndex(),c;return c=a===b,c},g.saveHash=function(a){return g.isLastHash(a)?!1:(g.savedHashes.push(a),!0)},g.getHashByIndex=function(a){var b=null;return typeof a=="undefined"?b=g.savedHashes[g.savedHashes.length-1]:a<0?b=g.savedHashes[g.savedHashes.length+a]:b=g.savedHashes[a],b},g.discardedHashes={},g.discardedStates={},g.discardState=function(a,b,c){var d=g.getHashByState(a),e;return e={discardedState:a,backState:c,forwardState:b},g.discardedStates[d]=e,!0},g.discardHash=function(a,b,c){var d={discardedHash:a,backState:c,forwardState:b};return g.discardedHashes[a]=d,!0},g.discardedState=function(a){var b=g.getHashByState(a),c;return c=g.discardedStates[b]||!1,c},g.discardedHash=function(a){var b=g.discardedHashes[a]||!1;return b},g.recycleState=function(a){var b=g.getHashByState(a);return g.discardedState(a)&&delete g.discardedStates[b],!0},g.emulated.hashChange&&(g.hashChangeInit=function(){g.checkerFunction=null;var b="",d,e,h,i;return g.isInternetExplorer()?(d="historyjs-iframe",e=c.createElement("iframe"),e.setAttribute("id",d),e.style.display="none",c.body.appendChild(e),e.contentWindow.document.open(),e.contentWindow.document.close(),h="",i=!1,g.checkerFunction=function(){if(i)return!1;i=!0;var c=g.getHash()||"",d=g.unescapeHash(e.contentWindow.document.location.hash)||"";return c!==b?(b=c,d!==c&&(h=d=c,e.contentWindow.document.open(),e.contentWindow.document.close(),e.contentWindow.document.location.hash=g.escapeHash(c)),g.Adapter.trigger(a,"hashchange")):d!==h&&(h=d,g.setHash(d,!1)),i=!1,!0}):g.checkerFunction=function(){var c=g.getHash();return c!==b&&(b=c,g.Adapter.trigger(a,"hashchange")),!0},g.intervalList.push(f(g.checkerFunction,g.options.hashChangeInterval)),!0},g.Adapter.onDomLoad(g.hashChangeInit)),g.emulated.pushState&&(g.onHashChange=function(b){var d=b&&b.newURL||c.location.href,e=g.getHashByUrl(d),f=null,h=null,i=null,j;return g.isLastHash(e)?(g.busy(!1),!1):(g.doubleCheckComplete(),g.saveHash(e),e&&g.isTraditionalAnchor(e)?(g.Adapter.trigger(a,"anchorchange"),g.busy(!1),!1):(f=g.extractState(g.getFullUrl(e||c.location.href,!1),!0),g.isLastSavedState(f)?(g.busy(!1),!1):(h=g.getHashByState(f),j=g.discardedState(f),j?(g.getHashByIndex(-2)===g.getHashByState(j.forwardState)?g.back(!1):g.forward(!1),!1):(g.pushState(f.data,f.title,f.url,!1),!0))))},g.Adapter.bind(a,"hashchange",g.onHashChange),g.pushState=function(b,d,e,f){if(g.getHashByUrl(e))throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(f!==!1&&g.busy())return g.pushQueue({scope:g,callback:g.pushState,args:arguments,queue:f}),!1;g.busy(!0);var h=g.createStateObject(b,d,e),i=g.getHashByState(h),j=g.getState(!1),k=g.getHashByState(j),l=g.getHash();return g.storeState(h),g.expectedStateId=h.id,g.recycleState(h),g.setTitle(h),i===k?(g.busy(!1),!1):i!==l&&i!==g.getShortUrl(c.location.href)?(g.setHash(i,!1),!1):(g.saveState(h),g.Adapter.trigger(a,"statechange"),g.busy(!1),!0)},g.replaceState=function(a,b,c,d){if(g.getHashByUrl(c))throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(d!==!1&&g.busy())return g.pushQueue({scope:g,callback:g.replaceState,args:arguments,queue:d}),!1;g.busy(!0);var e=g.createStateObject(a,b,c),f=g.getState(!1),h=g.getStateByIndex(-2);return g.discardState(f,e,h),g.pushState(e.data,e.title,e.url,!1),!0}),g.emulated.pushState&&g.getHash()&&!g.emulated.hashChange&&g.Adapter.onDomLoad(function(){g.Adapter.trigger(a,"hashchange")})},typeof g.init!="undefined"&&g.init()}(window),function(a,b){"use strict";var c=a.console||b,d=a.document,e=a.navigator,f=a.sessionStorage||!1,g=a.setTimeout,h=a.clearTimeout,i=a.setInterval,j=a.clearInterval,k=a.JSON,l=a.alert,m=a.History=a.History||{},n=a.history;k.stringify=k.stringify||k.encode,k.parse=k.parse||k.decode;if(typeof m.init!="undefined")throw new Error("History.js Core has already been loaded...");m.init=function(){return typeof m.Adapter=="undefined"?!1:(typeof m.initCore!="undefined"&&m.initCore(),typeof m.initHtml4!="undefined"&&m.initHtml4(),!0)},m.initCore=function(){if(typeof m.initCore.initialized!="undefined")return!1;m.initCore.initialized=!0,m.options=m.options||{},m.options.hashChangeInterval=m.options.hashChangeInterval||100,m.options.safariPollInterval=m.options.safariPollInterval||500,m.options.doubleCheckInterval=m.options.doubleCheckInterval||500,m.options.storeInterval=m.options.storeInterval||1e3,m.options.busyDelay=m.options.busyDelay||250,m.options.debug=m.options.debug||!1,m.options.initialTitle=m.options.initialTitle||d.title,m.intervalList=[],m.clearAllIntervals=function(){var a,b=m.intervalList;if(typeof b!="undefined"&&b!==null){for(a=0;a<b.length;a++)j(b[a]);m.intervalList=null}},m.debug=function(){(m.options.debug||!1)&&m.log.apply(m,arguments)},m.log=function(){var a=typeof c!="undefined"&&typeof c.log!="undefined"&&typeof c.log.apply!="undefined",b=d.getElementById("log"),e,f,g,h,i;a?(h=Array.prototype.slice.call(arguments),e=h.shift(),typeof c.debug!="undefined"?c.debug.apply(c,[e,h]):c.log.apply(c,[e,h])):e="\n"+arguments[0]+"\n";for(f=1,g=arguments.length;f<g;++f){i=arguments[f];if(typeof i=="object"&&typeof k!="undefined")try{i=k.stringify(i)}catch(j){}e+="\n"+i+"\n"}return b?(b.value+=e+"\n-----\n",b.scrollTop=b.scrollHeight-b.clientHeight):a||l(e),!0},m.getInternetExplorerMajorVersion=function(){var a=m.getInternetExplorerMajorVersion.cached=typeof m.getInternetExplorerMajorVersion.cached!="undefined"?m.getInternetExplorerMajorVersion.cached:function(){var a=3,b=d.createElement("div"),c=b.getElementsByTagName("i");while((b.innerHTML="<!--[if gt IE "+ ++a+"]><i></i><![endif]-->")&&c[0]);return a>4?a:!1}();return a},m.isInternetExplorer=function(){var a=m.isInternetExplorer.cached=typeof m.isInternetExplorer.cached!="undefined"?m.isInternetExplorer.cached:Boolean(m.getInternetExplorerMajorVersion());return a},m.emulated={pushState:!Boolean(a.history&&a.history.pushState&&a.history.replaceState&&!/ Mobile\/([1-7][a-z]|(8([abcde]|f(1[0-8]))))/i.test(e.userAgent)&&!/AppleWebKit\/5([0-2]|3[0-2])/i.test(e.userAgent)),hashChange:Boolean(!("onhashchange"in a||"onhashchange"in d)||m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<8)},m.enabled=!m.emulated.pushState,m.bugs={setHash:Boolean(!m.emulated.pushState&&e.vendor==="Apple Computer, Inc."&&/AppleWebKit\/5([0-2]|3[0-3])/.test(e.userAgent)),safariPoll:Boolean(!m.emulated.pushState&&e.vendor==="Apple Computer, Inc."&&/AppleWebKit\/5([0-2]|3[0-3])/.test(e.userAgent)),ieDoubleCheck:Boolean(m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<8),hashEscape:Boolean(m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<7)},m.isEmptyObject=function(a){for(var b in a)return!1;return!0},m.cloneObject=function(a){var b,c;return a?(b=k.stringify(a),c=k.parse(b)):c={},c},m.getRootUrl=function(){var a=d.location.protocol+"//"+(d.location.hostname||d.location.host);if(d.location.port||!1)a+=":"+d.location.port;return a+="/",a},m.getBaseHref=function(){var a=d.getElementsByTagName("base"),b=null,c="";return a.length===1&&(b=a[0],c=b.href.replace(/[^\/]+$/,"")),c=c.replace(/\/+$/,""),c&&(c+="/"),c},m.getBaseUrl=function(){var a=m.getBaseHref()||m.getBasePageUrl()||m.getRootUrl();return a},m.getPageUrl=function(){var a=m.getState(!1,!1),b=(a||{}).url||d.location.href,c;return c=b.replace(/\/+$/,"").replace(/[^\/]+$/,function(a,b,c){return/\./.test(a)?a:a+"/"}),c},m.getBasePageUrl=function(){var a=d.location.href.replace(/[#\?].*/,"").replace(/[^\/]+$/,function(a,b,c){return/[^\/]$/.test(a)?"":a}).replace(/\/+$/,"")+"/";return a},m.getFullUrl=function(a,b){var c=a,d=a.substring(0,1);return b=typeof b=="undefined"?!0:b,/[a-z]+\:\/\//.test(a)||(d==="/"?c=m.getRootUrl()+a.replace(/^\/+/,""):d==="#"?c=m.getPageUrl().replace(/#.*/,"")+a:d==="?"?c=m.getPageUrl().replace(/[\?#].*/,"")+a:b?c=m.getBaseUrl()+a.replace(/^(\.\/)+/,""):c=m.getBasePageUrl()+a.replace(/^(\.\/)+/,"")),c.replace(/\#$/,"")},m.getShortUrl=function(a){var b=a,c=m.getBaseUrl(),d=m.getRootUrl();return m.emulated.pushState&&(b=b.replace(c,"")),b=b.replace(d,"/"),m.isTraditionalAnchor(b)&&(b="./"+b),b=b.replace(/^(\.\/)+/g,"./").replace(/\#$/,""),b},m.store={},m.idToState=m.idToState||{},m.stateToId=m.stateToId||{},m.urlToId=m.urlToId||{},m.storedStates=m.storedStates||[],m.savedStates=m.savedStates||[],m.normalizeStore=function(){m.store.idToState=m.store.idToState||{},m.store.urlToId=m.store.urlToId||{},m.store.stateToId=m.store.stateToId||{}},m.getState=function(a,b){typeof a=="undefined"&&(a=!0),typeof b=="undefined"&&(b=!0);var c=m.getLastSavedState();return!c&&b&&(c=m.createStateObject()),a&&(c=m.cloneObject(c),c.url=c.cleanUrl||c.url),c},m.getIdByState=function(a){var b=m.extractId(a.url),c;if(!b){c=m.getStateString(a);if(typeof m.stateToId[c]!="undefined")b=m.stateToId[c];else if(typeof m.store.stateToId[c]!="undefined")b=m.store.stateToId[c];else{for(;;){b=(new Date).getTime()+String(Math.random()).replace(/\D/g,"");if(typeof m.idToState[b]=="undefined"&&typeof m.store.idToState[b]=="undefined")break}m.stateToId[c]=b,m.idToState[b]=a}}return b},m.normalizeState=function(a){var b,c;if(!a||typeof a!="object")a={};if(typeof a.normalized!="undefined")return a;if(!a.data||typeof a.data!="object")a.data={};b={},b.normalized=!0,b.title=a.title||"",b.url=m.getFullUrl(m.unescapeString(a.url||d.location.href)),b.hash=m.getShortUrl(b.url),b.data=m.cloneObject(a.data),b.id=m.getIdByState(b),b.cleanUrl=b.url.replace(/\??\&_suid.*/,""),b.url=b.cleanUrl,c=!m.isEmptyObject(b.data);if(b.title||c)b.hash=m.getShortUrl(b.url).replace(/\??\&_suid.*/,""),/\?/.test(b.hash)||(b.hash+="?"),b.hash+="&_suid="+b.id;return b.hashedUrl=m.getFullUrl(b.hash),(m.emulated.pushState||m.bugs.safariPoll)&&m.hasUrlDuplicate(b)&&(b.url=b.hashedUrl),b},m.createStateObject=function(a,b,c){var d={data:a,title:b,url:c};return d=m.normalizeState(d),d},m.getStateById=function(a){a=String(a);var c=m.idToState[a]||m.store.idToState[a]||b;return c},m.getStateString=function(a){var b,c,d;return b=m.normalizeState(a),c={data:b.data,title:a.title,url:a.url},d=k.stringify(c),d},m.getStateId=function(a){var b,c;return b=m.normalizeState(a),c=b.id,c},m.getHashByState=function(a){var b,c;return b=m.normalizeState(a),c=b.hash,c},m.extractId=function(a){var b,c,d;return c=/(.*)\&_suid=([0-9]+)$/.exec(a),d=c?c[1]||a:a,b=c?String(c[2]||""):"",b||!1},m.isTraditionalAnchor=function(a){var b=!/[\/\?\.]/.test(a);return b},m.extractState=function(a,b){var c=null,d,e;return b=b||!1,d=m.extractId(a),d&&(c=m.getStateById(d)),c||(e=m.getFullUrl(a),d=m.getIdByUrl(e)||!1,d&&(c=m.getStateById(d)),!c&&b&&!m.isTraditionalAnchor(a)&&(c=m.createStateObject(null,null,e))),c},m.getIdByUrl=function(a){var c=m.urlToId[a]||m.store.urlToId[a]||b;return c},m.getLastSavedState=function(){return m.savedStates[m.savedStates.length-1]||b},m.getLastStoredState=function(){return m.storedStates[m.storedStates.length-1]||b},m.hasUrlDuplicate=function(a){var b=!1,c;return c=m.extractState(a.url),b=c&&c.id!==a.id,b},m.storeState=function(a){return m.urlToId[a.url]=a.id,m.storedStates.push(m.cloneObject(a)),a},m.isLastSavedState=function(a){var b=!1,c,d,e;return m.savedStates.length&&(c=a.id,d=m.getLastSavedState(),e=d.id,b=c===e),b},m.saveState=function(a){return m.isLastSavedState(a)?!1:(m.savedStates.push(m.cloneObject(a)),!0)},m.getStateByIndex=function(a){var b=null;return typeof a=="undefined"?b=m.savedStates[m.savedStates.length-1]:a<0?b=m.savedStates[m.savedStates.length+a]:b=m.savedStates[a],b},m.getHash=function(){var a=m.unescapeHash(d.location.hash);return a},m.unescapeString=function(b){var c=b,d;for(;;){d=a.unescape(c);if(d===c)break;c=d}return c},m.unescapeHash=function(a){var b=m.normalizeHash(a);return b=m.unescapeString(b),b},m.normalizeHash=function(a){var b=a.replace(/[^#]*#/,"").replace(/#.*/,"");return b},m.setHash=function(a,b){var c,e,f;return b!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.setHash,args:arguments,queue:b}),!1):(c=m.escapeHash(a),m.busy(!0),e=m.extractState(a,!0),e&&!m.emulated.pushState?m.pushState(e.data,e.title,e.url,!1):d.location.hash!==c&&(m.bugs.setHash?(f=m.getPageUrl(),m.pushState(null,null,f+"#"+c,!1)):d.location.hash=c),m)},m.escapeHash=function(b){var c=m.normalizeHash(b);return c=a.escape(c),m.bugs.hashEscape||(c=c.replace(/\%21/g,"!").replace(/\%26/g,"&").replace(/\%3D/g,"=").replace(/\%3F/g,"?")),c},m.getHashByUrl=function(a){var b=String(a).replace(/([^#]*)#?([^#]*)#?(.*)/,"$2");return b=m.unescapeHash(b),b},m.setTitle=function(a){var b=a.title,c;b||(c=m.getStateByIndex(0),c&&c.url===a.url&&(b=c.title||m.options.initialTitle));try{d.getElementsByTagName("title")[0].innerHTML=b.replace("<","&lt;").replace(">","&gt;").replace(" & "," &amp; ")}catch(e){}return d.title=b,m},m.queues=[],m.busy=function(a){typeof a!="undefined"?m.busy.flag=a:typeof m.busy.flag=="undefined"&&(m.busy.flag=!1);if(!m.busy.flag){h(m.busy.timeout);var b=function(){var a,c,d;if(m.busy.flag)return;for(a=m.queues.length-1;a>=0;--a){c=m.queues[a];if(c.length===0)continue;d=c.shift(),m.fireQueueItem(d),m.busy.timeout=g(b,m.options.busyDelay)}};m.busy.timeout=g(b,m.options.busyDelay)}return m.busy.flag},m.busy.flag=!1,m.fireQueueItem=function(a){return a.callback.apply(a.scope||m,a.args||[])},m.pushQueue=function(a){return m.queues[a.queue||0]=m.queues[a.queue||0]||[],m.queues[a.queue||0].push(a),m},m.queue=function(a,b){return typeof a=="function"&&(a={callback:a}),typeof b!="undefined"&&(a.queue=b),m.busy()?m.pushQueue(a):m.fireQueueItem(a),m},m.clearQueue=function(){return m.busy.flag=!1,m.queues=[],m},m.stateChanged=!1,m.doubleChecker=!1,m.doubleCheckComplete=function(){return m.stateChanged=!0,m.doubleCheckClear(),m},m.doubleCheckClear=function(){return m.doubleChecker&&(h(m.doubleChecker),m.doubleChecker=!1),m},m.doubleCheck=function(a){return m.stateChanged=!1,m.doubleCheckClear(),m.bugs.ieDoubleCheck&&(m.doubleChecker=g(function(){return m.doubleCheckClear(),m.stateChanged||a(),!0},m.options.doubleCheckInterval)),m},m.safariStatePoll=function(){var b=m.extractState(d.location.href),c;if(!m.isLastSavedState(b))c=b;else return;return c||(c=m.createStateObject()),m.Adapter.trigger(a,"popstate"),m},m.back=function(a){return a!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.back,args:arguments,queue:a}),!1):(m.busy(!0),m.doubleCheck(function(){m.back(!1)}),n.go(-1),!0)},m.forward=function(a){return a!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.forward,args:arguments,queue:a}),!1):(m.busy(!0),m.doubleCheck(function(){m.forward(!1)}),n.go(1),!0)},m.go=function(a,b){var c;if(a>0)for(c=1;c<=a;++c)m.forward(b);else{if(!(a<0))throw new Error("History.go: History.go requires a positive or negative integer passed.");for(c=-1;c>=a;--c)m.back(b)}return m};if(m.emulated.pushState){var o=function(){};m.pushState=m.pushState||o,m.replaceState=m.replaceState||o}else m.onPopState=function(b,c){var e=!1,f=!1,g,h;return m.doubleCheckComplete(),g=m.getHash(),g?(h=m.extractState(g||d.location.href,!0),h?m.replaceState(h.data,h.title,h.url,!1):(m.Adapter.trigger(a,"anchorchange"),m.busy(!1)),m.expectedStateId=!1,!1):(e=m.Adapter.extractEventData("state",b,c)||!1,e?f=m.getStateById(e):m.expectedStateId?f=m.getStateById(m.expectedStateId):f=m.extractState(d.location.href),f||(f=m.createStateObject(null,null,d.location.href)),m.expectedStateId=!1,m.isLastSavedState(f)?(m.busy(!1),!1):(m.storeState(f),m.saveState(f),m.setTitle(f),m.Adapter.trigger(a,"statechange"),m.busy(!1),!0))},m.Adapter.bind(a,"popstate",m.onPopState),m.pushState=function(b,c,d,e){if(m.getHashByUrl(d)&&m.emulated.pushState)throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(e!==!1&&m.busy())return m.pushQueue({scope:m,callback:m.pushState,args:arguments,queue:e}),!1;m.busy(!0);var f=m.createStateObject(b,c,d);return m.isLastSavedState(f)?m.busy(!1):(m.storeState(f),m.expectedStateId=f.id,n.pushState(f.id,f.title,f.url),m.Adapter.trigger(a,"popstate")),!0},m.replaceState=function(b,c,d,e){if(m.getHashByUrl(d)&&m.emulated.pushState)throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(e!==!1&&m.busy())return m.pushQueue({scope:m,callback:m.replaceState,args:arguments,queue:e}),!1;m.busy(!0);var f=m.createStateObject(b,c,d);return m.isLastSavedState(f)?m.busy(!1):(m.storeState(f),m.expectedStateId=f.id,n.replaceState(f.id,f.title,f.url),m.Adapter.trigger(a,"popstate")),!0};if(f){try{m.store=k.parse(f.getItem("History.store"))||{}}catch(p){m.store={}}m.normalizeStore()}else m.store={},m.normalizeStore();m.Adapter.bind(a,"beforeunload",m.clearAllIntervals),m.Adapter.bind(a,"unload",m.clearAllIntervals),m.saveState(m.storeState(m.extractState(d.location.href,!0))),f&&(m.onUnload=function(){var a,b;try{a=k.parse(f.getItem("History.store"))||{}}catch(c){a={}}a.idToState=a.idToState||{},a.urlToId=a.urlToId||{},a.stateToId=a.stateToId||{};for(b in m.idToState){if(!m.idToState.hasOwnProperty(b))continue;a.idToState[b]=m.idToState[b]}for(b in m.urlToId){if(!m.urlToId.hasOwnProperty(b))continue;a.urlToId[b]=m.urlToId[b]}for(b in m.stateToId){if(!m.stateToId.hasOwnProperty(b))continue;a.stateToId[b]=m.stateToId[b]}m.store=a,m.normalizeStore(),f.setItem("History.store",k.stringify(a))},m.intervalList.push(i(m.onUnload,m.options.storeInterval)),m.Adapter.bind(a,"beforeunload",m.onUnload),m.Adapter.bind(a,"unload",m.onUnload));if(!m.emulated.pushState){m.bugs.safariPoll&&m.intervalList.push(i(m.safariStatePoll,m.options.safariPollInterval));if(e.vendor==="Apple Computer, Inc."||(e.appCodeName||"")==="Mozilla")m.Adapter.bind(a,"hashchange",function(){m.Adapter.trigger(a,"popstate")}),m.getHash()&&m.Adapter.onDomLoad(function(){m.Adapter.trigger(a,"hashchange")})}},m.init()}(window)
View
1 js/jquery.tmpl.min.js
@@ -0,0 +1 @@
+(function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},h=0,c=0,l=[];function g(e,d,g,i){var c={data:i||(d?d.data:{}),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};e&&a.extend(c,e,{nodes:[],parent:d});if(g){c.tmpl=g;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++h;(l.length?f:b)[h]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(f,d){a.fn[f]=function(n){var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;e=b||{};if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){i[d](this[0]);g=this}else{for(h=0,m=i.length;h<m;h++){c=h;k=(h>0?this.clone(true):this).get();a.fn[d].apply(a(i[h]),k);g=g.concat(k)}c=0;g=this.pushStack(g,f,i.selector)}l=e;e=null;a.tmpl.complete(l);return g}});a.fn.extend({tmpl:function(d,c,b){return a.tmpl(this[0],d,c,b)},tmplItem:function(){return a.tmplItem(this[0])},template:function(b){return a.template(b,this[0])},domManip:function(d,l,j){if(d[0]&&d[0].nodeType){var f=a.makeArray(arguments),g=d.length,i=0,h;while(i<g&&!(h=a.data(d[i++],"tmplItem")));if(g>1)f[0]=[a.makeArray(d)];if(h&&c)f[2]=function(b){a.tmpl.afterManip(this,b,j)};r.apply(this,f)}else r.apply(this,arguments);c=0;!e&&a.tmpl.complete(b);return this}});a.extend({tmpl:function(d,h,e,c){var j,k=!c;if(k){c=p;d=a.template[d]||a.template(null,d);f={}}else if(!d){d=c.tmpl;b[c.key]=c;c.nodes=[];c.wrapped&&n(c,c.wrapped);return a(i(c,null,c.tmpl(a,c)))}if(!d)return[];if(typeof h==="function")h=h.call(c||{});e&&e.wrapped&&n(e,e.wrapped);j=a.isArray(h)?a.map(h,function(a){return a?g(e,c,d,a):null}):[g(e,c,d,h)];return k?a(i(c,null,j)):j},tmplItem:function(b){var c;if(b instanceof a)b=b[0];while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));return c||p},template:function(c,b){if(b){if(typeof b==="string")b=o(b);else if(b instanceof a)b=b[0]||{};if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));return typeof c==="string"?(a.template[c]=b):b}return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null},encode:function(a){return(""+a).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;")}});a.extend(a.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){_=_.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(_,$1,$2);_=[];",close:"call=$item.calls();_=call._.concat($item.wrap(call,_));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){_.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){_.push($.encode($1a));}"},"!":{open:""}},complete:function(){b={}},afterManip:function(f,b,d){var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];d.call(f,b);m(e);c++}});function i(e,g,f){var b,c=f?a.map(f,function(a){return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:i(a,e,a._ctnt)}):e;if(g)return c;c=c.join("");c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){b=a(e).get();m(b);if(c)b=j(c).concat(b);if(d)b=b.concat(j(d))});return b?b:j(c)}function j(c){var b=document.createElement("div");b.innerHTML=c;return a.makeArray(b.childNodes)}function o(b){return new Function("jQuery","$item","var $=jQuery,call,_=[],$data=$item.data;with($data){_.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(m,l,j,d,b,c,e){var i=a.tmpl.tag[j],h,f,g;if(!i)throw"Template command not found: "+j;h=i._default||[];if(c&&!/\w$/.test(b)){b+=c;c=""}if(b){b=k(b);e=e?","+k(e)+")":c?")":"";f=c?b.indexOf(".")>-1?b+c:"("+b+").call($item"+e:b;g=c?f:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}else g=f=h.$1||"null";d=k(d);return"');"+i[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(g).split("$1").join(f).split("$2").join(d?d.replace(/\s*([^\(]+)\s*(\((.*?)\))?/g,function(d,c,b,a){a=a?","+a+")":b?")":"";return a?"("+c+").call($item"+a:d}):h.$2||"")+"_.push('"})+"');}return _;")}function n(c,b){c._wrap=i(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}function k(a){return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function s(b){var a=document.createElement("div");a.appendChild(b.cloneNode(true));return a.innerHTML}function m(o){var n="_"+c,k,j,l={},e,p,i;for(e=0,p=o.length;e<p;e++){if((k=o[e]).nodeType!==1)continue;j=k.getElementsByTagName("*");for(i=j.length-1;i>=0;i--)m(j[i]);m(k)}function m(j){var p,i=j,k,e,m;if(m=j.getAttribute(d)){while(i.parentNode&&(i=i.parentNode).nodeType===1&&!(p=i.getAttribute(d)));if(p!==m){i=i.parentNode?i.nodeType===11?0:i.getAttribute(d)||0:0;if(!(e=b[m])){e=f[m];e=g(e,b[i]||f[i],null,true);e.key=++h;b[h]=e}c&&o(m)}j.removeAttribute(d)}else if(c&&(e=a.data(j,"tmplItem"))){o(e.key);b[e.key]=e;i=a.data(j.parentNode,"tmplItem");i=i?i.key:0}if(e){k=e;while(k&&k.key!=i){k.nodes.push(j);k=k.parent}delete e._ctnt;delete e._wrap;a.data(j,"tmplItem",e)}function o(a){a=a+n;e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent,null,true)}}}function u(a,d,c,b){if(!a)return l.pop();l.push({_:a,tmpl:d,item:this,data:c,options:b})}function w(d,c,b){return a.tmpl(a.template(d),c,b,this)}function x(b,d){var c=b.options||{};c.wrapped=d;return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}function v(d,c){var b=this._wrap;return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){return c?a.innerText||a.textContent:a.outerHTML||s(a)})}function t(){var b=this.nodes;a.tmpl(null,null,null,this).insertBefore(b[0]);a(b).remove()}})(jQuery)
View
478 js/jquery.touchSwipe-1.2.5.js
@@ -0,0 +1,478 @@
+/*
+ * touchSwipe - jQuery Plugin
+ * http://plugins.jquery.com/project/touchSwipe
+ * http://labs.skinkers.com/touchSwipe/
+ *
+ * Copyright (c) 2010 Matt Bryson (www.skinkers.com)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * $version: 1.2.5
+ *
+ * Changelog
+ * $Date: 2010-12-12 (Wed, 12 Dec 2010) $
+ * $version: 1.0.0
+ * $version: 1.0.1 - removed multibyte comments
+ *
+ * $Date: 2011-21-02 (Mon, 21 Feb 2011) $
+ * $version: 1.1.0 - added allowPageScroll property to allow swiping and scrolling of page
+ * - changed handler signatures so one handler can be used for multiple events
+ * $Date: 2011-23-02 (Wed, 23 Feb 2011) $
+ * $version: 1.2.0 - added click handler. This is fired if the user simply clicks and does not swipe. The event object and click target are passed to handler.
+ * - If you use the http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ plugin, you can also assign jQuery mouse events to children of a touchSwipe object.
+ * $version: 1.2.1 - removed console log!
+ *
+ * $version: 1.2.2 - Fixed bug where scope was not preserved in callback methods.
+ *
+ * $Date: 2011-28-04 (Thurs, 28 April 2011) $
+ * $version: 1.2.4 - Changed licence terms to be MIT or GPL inline with jQuery. Added check for support of touch events to stop non compatible browsers erroring.
+ *
+ * $Date: 2011-27-09 (Tues, 27 September 2011) $
+ * $version: 1.2.5 - Added support for testing swipes with mouse on desktop browser (thanks to https://github.com/joelhy)
+
+ * A jQuery plugin to capture left, right, up and down swipes on touch devices.
+ * You can capture 2 finger or 1 finger swipes, set the threshold and define either a catch all handler, or individual direction handlers.
+ * Options:
+ * swipe Function A catch all handler that is triggered for all swipe directions. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ * swipeLeft Function A handler that is triggered for "left" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ * swipeRight Function A handler that is triggered for "right" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ * swipeUp Function A handler that is triggered for "up" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ * swipeDown Function A handler that is triggered for "down" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ * swipeStatus Function A handler triggered for every phase of the swipe. Handler is passed 4 arguments: event : The original event object, phase:The current swipe face, either "start?, "move?, "end? or "cancel?. direction : The swipe direction, either "up?, "down?, "left " or "right?.distance : The distance of the swipe.
+ * click Function A handler triggered when a user just clicks on the item, rather than swipes it. If they do not move, click is triggered, if they do move, it is not.
+ *
+ * fingers int Default 1. The number of fingers to trigger the swipe, 1 or 2.
+ * threshold int Default 75. The number of pixels that the user must move their finger by before it is considered a swipe.
+ * triggerOnTouchEnd Boolean Default true If true, the swipe events are triggered when the touch end event is received (user releases finger). If false, it will be triggered on reaching the threshold, and then cancel the touch event automatically.
+ * allowPageScroll String Default "auto". How the browser handles page scrolls when the user is swiping on a touchSwipe object.
+ * "auto" : all undefined swipes will cause the page to scroll in that direction.
+ * "none" : the page will not scroll when user swipes.
+ * "horizontal" : will force page to scroll on horizontal swipes.
+ * "vertical" : will force page to scroll on vertical swipes.
+ *
+ * This jQuery plugin will only run on devices running Mobile Webkit based browsers (iOS 2.0+, android 2.2+)
+ */
+(function($)
+{
+
+
+
+ $.fn.swipe = function(options)
+ {
+ if (!this) return false;
+
+ // Default thresholds & swipe functions
+ var defaults = {
+
+ fingers : 1, // int - The number of fingers to trigger the swipe, 1 or 2. Default is 1.
+ threshold : 75, // int - The number of pixels that the user must move their finger by before it is considered a swipe. Default is 75.
+
+ swipe : null, // Function - A catch all handler that is triggered for all swipe directions. Accepts 2 arguments, the original event object and the direction of the swipe : "left", "right", "up", "down".
+ swipeLeft : null, // Function - A handler that is triggered for "left" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ swipeRight : null, // Function - A handler that is triggered for "right" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ swipeUp : null, // Function - A handler that is triggered for "up" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ swipeDown : null, // Function - A handler that is triggered for "down" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
+ swipeStatus : null, // Function - A handler triggered for every phase of the swipe. Handler is passed 4 arguments: event : The original event object, phase:The current swipe face, either "start?, "move?, "end? or "cancel?. direction : The swipe direction, either "up?, "down?, "left " or "right?.distance : The distance of the swipe.
+ click : null, // Function - A handler triggered when a user just clicks on the item, rather than swipes it. If they do not move, click is triggered, if they do move, it is not.
+
+ triggerOnTouchEnd : true, // Boolean, if true, the swipe events are triggered when the touch end event is received (user releases finger). If false, it will be triggered on reaching the threshold, and then cancel the touch event automatically.
+ allowPageScroll : "auto" /* How the browser handles page scrolls when the user is swiping on a touchSwipe object.
+ "auto" : all undefined swipes will cause the page to scroll in that direction.
+ "none" : the page will not scroll when user swipes.
+ "horizontal" : will force page to scroll on horizontal swipes.
+ "vertical" : will force page to scroll on vertical swipes.
+ */
+ };
+
+
+ //Constants
+ var LEFT = "left";
+ var RIGHT = "right";
+ var UP = "up";
+ var DOWN = "down";
+ var NONE = "none";
+ var HORIZONTAL = "horizontal";
+ var VERTICAL = "vertical";
+ var AUTO = "auto";
+
+ var PHASE_START="start";
+ var PHASE_MOVE="move";
+ var PHASE_END="end";
+ var PHASE_CANCEL="cancel";
+
+ var hasTouch = 'ontouchstart' in window,
+ START_EV = hasTouch ? 'touchstart' : 'mousedown',
+ MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
+ END_EV = hasTouch ? 'touchend' : 'mouseup',
+ CANCEL_EV = 'touchcancel';
+
+ var phase="start";
+
+ if (options.allowPageScroll==undefined && (options.swipe!=undefined || options.swipeStatus!=undefined))
+ options.allowPageScroll=NONE;
+
+ if (options)
+ $.extend(defaults, options);
+
+
+ /**
+ * Setup each object to detect swipe gestures
+ */
+ return this.each(function()
+ {
+ var that = this;
+ var $this = $(this);
+
+ var triggerElementID = null; // this variable is used to identity the triggering element
+ var fingerCount = 0; // the current number of fingers being used.
+
+ //track mouse points / delta
+ var start={x:0, y:0};
+ var end={x:0, y:0};
+ var delta={x:0, y:0};
+ // added by Codrops
+ var lastPositionX = 0;
+
+ /**
+ * Event handler for a touch start event.
+ * Stops the default click event from triggering and stores where we touched
+ */
+ function touchStart(event)
+ {
+ var evt = hasTouch ? event.touches[0] : event;
+
+ phase = PHASE_START;
+
+ if (hasTouch) {
+ // get the total number of fingers touching the screen
+ fingerCount = event.touches.length;
+ }