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;