Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

clean up the code a bit

  • Loading branch information...
commit 00b40b63a7cab6576e479b2b1b6fae4ea5060ca8 1 parent b9cbb2a
@fat authored
View
0  MIT-LICENSE.txt → LICENSE
File renamed without changes
View
70 javascript/coffin.js
@@ -13,10 +13,9 @@
$(function () {
- var open = 'coffin-open'
-
- var $body = $('body')
- var $stage = $('.stage')
+ var open = 'coffin-open'
+ var $body = $('body')
+ var $stage = $('.stage')
var touchstart = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
$body
@@ -25,7 +24,7 @@
.delegate('[data-coffin="touch"]', touchstart, toggleCoffin)
function translate3d (open) {
- return 'translate3d(' + (open ? '210px' : '-' + (210 - window.scrollX) + 'px') + ',0,0)'
+ return 'translate3d(' + (open ? '210' : -1 * Math.max(210 - window.scrollX, 210)) + 'px,0,0)'
}
function toggleCoffin() {
@@ -37,13 +36,20 @@
if (isOpen) $body.removeClass(open)
$stage.css({
- '-webkit-transform': '',
- '-webkit-transition': '',
+ '-webkit-transform' : '',
+ '-webkit-transition' : '',
'left': !isOpen ? 210 : ''
})
$stage.unbind('webkitTransitionEnd.coffin')
+ if (isOpen) {
+ $body
+ .unbind('touchstart.coffin')
+ .unbind('touchmove.coffin')
+ .unbind('touchend.coffin')
+ }
+
}
if (!isOpen) $body.addClass(open)
@@ -51,7 +57,7 @@
$stage.bind('webkitTransitionEnd.coffin', transitionComplete)
$stage.css({
- '-webkit-transform': translate3d(!isOpen),
+ '-webkit-transform' : translate3d(!isOpen),
'-webkit-transition': '-webkit-transform .1s linear'
})
@@ -59,26 +65,50 @@
setTimeout(function () {
- $body.bind('touchend.coffin', function (e) {
+ var xStart
+ var yStart
- if (!window.scrollX) return
+ $body
- var willScroll = (210 - window.scrollX) >= 0
+ .bind('touchstart.coffin', function (e) {
+ xStart = e.touches[0].screenX
+ yStart = e.touches[0].screenY
+ })
- isOpen = true
+ .bind('touchmove.coffin', function (e) {
+ var xMovement = Math.abs(e.touches[0].screenX - xStart)
+ var yMovement = Math.abs(e.touches[0].screenY - yStart)
+ if ((yMovement * 10) > xMovement) {
+ e.preventDefault()
+ }
+ })
- if (willScroll) $stage.one('webkitTransitionEnd', transitionComplete)
+ .bind('touchend.coffin', function (e) {
- $stage.css({
- '-webkit-transform': translate3d(),
- '-webkit-transition': '-webkit-transform .1s linear'
- })
+ if (!window.scrollX) return
- if (!willScroll) transitionComplete()
+ var scrollX = window.scrollX
+ var willScroll = (210 - scrollX) >= 0
+ var interval = setInterval(function () {
- $body.unbind('touchend.coffin')
+ if (scrollX != window.scrollX) return scrollX = window.scrollX
- })
+ clearInterval(interval)
+
+ isOpen = true
+
+ if (willScroll) $stage.one('webkitTransitionEnd', transitionComplete)
+
+ $stage.css({
+ '-webkit-transform' : translate3d(),
+ '-webkit-transition': '-webkit-transform .1s linear'
+ })
+
+ if (!willScroll) transitionComplete()
+
+ }, 10)
+
+ })
}, 0)
View
172 stylesheets/coffin.css
@@ -5,64 +5,160 @@
* http://www.opensource.org/licenses/mit-license.php
*/
-
- /* Table of Contents
+/* Table of Contents
==================================================
#Core (Coffin)
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape) */
-
/* #Core (Coffin)
================================================== */
- body { background: #3B3B3B; overflow-x: hidden; }
-
- .container { margin-left: 40px; width: 700px; }
- .stage { border-radius: 5px; margin-left: 210px; width: auto; transition: all .3s linear; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; position: relative; z-index: 10; background: #fff; box-shadow: -4px 0px 10px -5px rgba(0,0,0,.8); }
-
- .coffin { width: 220px; background: #3b3b3b; overflow: auto; margin-left: 0; position: fixed; top: 0; bottom: 0; left: 0; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }
- .coffin .pillow { background: #222; color: #CCC; padding-left: 15px; font-weight: bold; border-bottom: 1px solid black; font-size: 11px; line-height: 22px;}
- .coffin .nav li { margin-bottom: 0; }
- .coffin .nav li a { display: block; text-decoration: none; padding-left: 15px; line-height: 30px; color: #fff; font-weight: bold; text-shadow: 0 -1px rgba(0,0,0,.8); border-bottom: 1px solid #333; box-shadow: 0 1px 1px rgba(255, 255, 255, .1); }
- .coffin .nav li a:hover,
- .coffin .nav li a.active { background: rgba(0,0,0,.1); }
-
- .coffin-tab { display: none; position: fixed; top: 0; right: 10px; z-index: 100; color: #fff; text-decoration: none; background: #000; padding: 6px 8px; border-radius: 0 0 5px 5px; }
- .coffin-tab:hover .coffin-icon-bar { background-color: rgba(255,255,255,.8); }
- .coffin-icon-bar { display: block; width: 18px; height: 2px; background-color: rgba(255, 255, 255, .6); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); margin-top: 3px; }
- .coffin-icon-bar:first-child { margin-top: 0;}
-
+body {
+ overflow-x: hidden;
+ background: #fff;
+}
+
+.container {
+ width: 700px;
+ margin-left: 40px;
+}
+
+.stage {
+ position: relative;
+ z-index: 10;
+ width: auto;
+ margin-left: 210px;
+ background: #fff;
+ border-radius: 5px;
+ box-shadow: -4px 0 10px -5px rgba(0, 0, 0, 0.8);
+ transition: all .3s linear;
+ -webkit-backface-visibility: hidden;
+ -webkit-perspective: 1000;
+}
+
+.coffin {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 220px;
+ margin-left: 0;
+ overflow: auto;
+ background: #3b3b3b;
+ -webkit-backface-visibility: hidden;
+ -webkit-perspective: 1000;
+}
+
+.coffin .pillow {
+ padding-left: 15px;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: 22px;
+ color: #CCC;
+ background: #222;
+ border-bottom: 1px solid black;
+}
+
+.coffin .nav li {
+ margin-bottom: 0;
+}
+
+.coffin .nav li a {
+ display: block;
+ padding-left: 15px;
+ font-weight: bold;
+ line-height: 30px;
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.8);
+ border-bottom: 1px solid #333;
+ box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
+}
+
+.coffin .nav li a:hover,
+.coffin .nav li a.active {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.coffin-tab {
+ position: fixed;
+ top: 0;
+ right: 10px;
+ z-index: 100;
+ display: none;
+ padding: 6px 8px;
+ color: #fff;
+ text-decoration: none;
+ background: #000;
+ border-radius: 0 0 5px 5px;
+}
+
+.coffin-tab:hover .coffin-icon-bar {
+ background-color: rgba(255, 255, 255, 0.8);
+}
+
+.coffin-icon-bar {
+ display: block;
+ width: 18px;
+ height: 2px;
+ margin-top: 3px;
+ background-color: rgba(255, 255, 255, 0.6);
+ -webkit-border-radius: 1px;
+ -moz-border-radius: 1px;
+ border-radius: 1px;
+ -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.coffin-icon-bar:first-child {
+ margin-top: 0;
+}
/* #Tablet (Portrait)
================================================== */
- /* Note: Design for a width of 768px */
+/* Note: Design for a width of 768px */
- @media only screen and (min-width: 768px) and (max-width: 959px) {
- .container { width: 556px; }
- }
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+ .container {
+ width: 556px;
+ }
+}
/* #Mobile (Portrait)
================================================== */
- /* Note: Design for a width of 320px */
-
- @media only screen and (max-width: 767px) {
- .coffin { display: none; }
- .coffin-tab { display: block; }
- .coffin-open .coffin { display: inherit; }
- .container { margin: 0 auto; width: 300px;}
- .stage { margin-left: 0; }
- }
-
+/* Note: Design for a width of 320px */
+
+@media only screen and (max-width: 767px) {
+ .coffin {
+ display: none;
+ }
+ .coffin-tab {
+ display: block;
+ }
+ .coffin-open .coffin {
+ display: inherit;
+ }
+ .container {
+ width: 300px;
+ margin: 0 auto;
+ }
+ .stage {
+ margin-left: 0;
+ }
+}
/* #Mobile (Landscape)
================================================== */
- /* Note: Design for a width of 480px */
+/* Note: Design for a width of 480px */
- @media only screen and (min-width: 480px) and (max-width: 767px) {
- .container { width: 420px;}
- }
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+ .container {
+ width: 420px;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.