diff --git a/index.html b/index.html index cc92dfc..df74cc8 100755 --- a/index.html +++ b/index.html @@ -40,14 +40,20 @@ $(document).ready(function(){ .swipe({ swipeStatus: swipeHandler, // XXX change this to pinch... - swipeUp: function(){ - //togglePageView('off') - togglePageView() + swipeUp: function(event, direction, distance, duration, fingerCount){ + if(fingerCount == 2){ + toggleBookmark() + } else { + togglePageView() + } }, // XXX change this to pinch... - swipeDown: function(){ - //togglePageView('on') - togglePageView() + swipeDown: function(event, direction, distance, duration, fingerCount){ + if(fingerCount == 2){ + toggleBookmark() + } else { + togglePageView() + } }, pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) { diff --git a/magazine.css b/magazine.css index 5ecc4b8..74472c2 100755 --- a/magazine.css +++ b/magazine.css @@ -22,6 +22,7 @@ body { /*********************************************************** pages ***/ .page { /* XXX make this browser-sized... */ + position: relative; display: inline-block; vertical-align: bottom; text-align: left; @@ -68,14 +69,13 @@ body { .page .bookmark { position: absolute; font-size: 0px; - width: 50px; - height: 50px; + width: 100px; + height: 100px; background: red; - /* XXX make this relative... */ - margin-top: -50px; - margin-left: 750px; + right: -60px; + top: -60px; cursor: hand; @@ -87,8 +87,13 @@ body { -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -} + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + transition: all 0.2s ease; +} .page-view-mode .page { /* XXX change to relative units... */ @@ -99,8 +104,14 @@ body { } .page-view-mode .page .bookmark { - display: none; + right: -70px; + top: -70px; + opacity: 0.5; } +.page-view-mode .page .bookmark.justcreated { + opacity: 1; +} + /************************************************** general layout ***/ diff --git a/magazine.js b/magazine.js index 7f44bb8..c9b34df 100755 --- a/magazine.js +++ b/magazine.js @@ -720,11 +720,15 @@ function toggleBookmark(n){ if(cur.children('.bookmark').length == 0){ var res = $('
') .prependTo(cur) - .addClass('bookmark') + .addClass('bookmark justcreated') .click(function(){ toggleBookmark(n) }) + setTimeout(function(){ + res.removeClass('justcreated') + }, 1000) + makeBookmarkIndicator(n) } else { cur.children('.bookmark').remove()