diff --git a/lib/persona.js b/lib/persona.js index 09009c3..6107f7e 100644 --- a/lib/persona.js +++ b/lib/persona.js @@ -123,9 +123,11 @@ $(document).ready(function() { function appendPageNumber(ev, data) { var el = data.after ? data.after : data.before, page = Math.ceil((el.attr('data-index') - 1) / config.postsPerPage), - handle = $('
' + page + '
'); + handle = $('
' + page + '
'), + shadow = $('
'); el.append(handle); + el.append(shadow); handle.tooltip({ title: 'Slide to paginate', @@ -133,33 +135,35 @@ $(document).ready(function() { }); var dragging = false, originalX = 0, toPage = page; - handle.on('mousedown', function(ev) { + handle.on('touchstart', function(ev) { dragging = true; - originalX = ev.screenX; + originalX = ev.originalEvent.touches[0].clientX; }); - $('body').on('mouseup', function() { + $('#content').on('touchend', function() { if (dragging === true) { dragging = false; if (page !== toPage) { ajaxify.go('topic/' + ajaxify.data.slug + '/' + (toPage * config.postsPerPage)); } + + shadow.removeClass('active'); } }); - $('body').on('mousemove', function(ev) { + $('#content').on('touchmove', function(ev) { if (!dragging) { return; } - var distance = ev.screenX - originalX, + var distance = ev.originalEvent.touches[0].clientX - originalX, handlePos = parseInt(handle.css('left'), 10), postWidth = handle.parents('[component="post"]').width(); - toPage = parseInt((handlePos + distance) / postWidth * ajaxify.data.pageCount, 10); + toPage = Math.ceil((handlePos + distance) / postWidth * ajaxify.data.pageCount); - if (toPage > ajaxify.data.pageCount) { - toPage = ajaxify.data.pageCount; + if (toPage >= ajaxify.data.pageCount) { + toPage = (ajaxify.data.pageCount - 1); } if (toPage < 0) { @@ -171,6 +175,9 @@ $(document).ready(function() { handle.removeClass('animated'); setTimeout(function() { handle.addClass('animated');}, 10); } + + shadow.addClass('active'); + shadow.css('left', toPage / ajaxify.data.pageCount * postWidth + 'px'); }); handle.css('left', page / ajaxify.data.pageCount * handle.parents('[component="post"]').width() + 'px'); diff --git a/modules/paginator.less b/modules/paginator.less index 2d13516..e8a69dc 100644 --- a/modules/paginator.less +++ b/modules/paginator.less @@ -10,6 +10,7 @@ border-radius: 50%; color: white; font-size: 11px; + z-index: 1; .user-select(none); @@ -23,6 +24,15 @@ } } + .shadow.active { + border-radius: 50%; + width: 13px; + height: 13px; + border: 1px solid #333; + position: absolute; + bottom: 13px; + } + @media (min-width: @screen-md-min) { .page-number { display: none;