modified for touch events

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 = $('<div class="page-number pointer">' + page + '</div>');
+				handle = $('<div class="page-number pointer">' + page + '</div>'),
+				shadow = $('<div class="shadow"></div>');
 
 			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');

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;