diff --git a/www/view.js b/www/view.js index 22993b4..ff019a3 100644 --- a/www/view.js +++ b/www/view.js @@ -8,6 +8,8 @@ $(function () { var speedVec = 0; var MAX_SPEED = 300; + var flipped = 0; + FastClick.attach(document.body); $source @@ -38,6 +40,9 @@ $(function () { recalculateAnimation(); }) .on('jump', function (event) { + if (flipped) { + $contentContainer.removeClass('flip-y'); + } var data = JSON.parse(event.originalEvent.data); var targetTop = $content.offset().top - $content.position().top; var minimum = $('.indicator').innerHeight() / 2; @@ -56,7 +61,9 @@ $(function () { deltaTop = elTop; } }); - + if (flipped) { + $contentContainer.addClass('flip-y'); + } if (deltaTop) { setDelta(0); setPosition(getPosition() + deltaTop * data.direction); @@ -64,18 +71,22 @@ $(function () { } }); - $contentContainer.toggleClass('flip-y', Boolean(Number(localStorage.getItem('flip')))); + $contentContainer.toggleClass('flip-y', flipped = Boolean(Number(localStorage.getItem('flip')))); $flipButton.click(function () { $contentContainer.toggleClass('flip-y'); - localStorage.setItem('flip', Number($contentContainer.hasClass('flip-y'))); + localStorage.setItem('flip', flipped = Number($contentContainer.hasClass('flip-y'))); }); function getPosition() { - return $content.position().top * -1; + var pos = $content.position().top * -1; + if (flipped) { + pos = $content.height() - pos; + } + return pos; } function setPosition(distance) { - $content.css('transform', 'translate3d(0, -' + distance + 'px, 0)'); + $content.css('transform', 'translate3d(0, ' + -distance + 'px, 0)'); } function setDelta(delta) {