From 85c832fcc6a6db39704d5256e38e3a6d4b7e08bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
<baris@nodebb.org>
Date: Wed, 14 Nov 2018 00:21:27 -0500
Subject: [PATCH] add tooltip
---
public/src/modules/navigator.js | 23 +++++++++++++++++++----
1 file changed, 19 insertions(+), 4 deletions(-)
diff --git a/public/src/modules/navigator.js b/public/src/modules/navigator.js
index c1d6752cd2..87c139e30f 100644
--- a/public/src/modules/navigator.js
+++ b/public/src/modules/navigator.js
@@ -5,6 +5,7 @@ define('navigator', ['forum/pagination', 'components'], function (pagination, co
var index = 1;
var count = 0;
var navigatorUpdateTimeoutId;
+ var tooltipEl;
navigator.scrollActive = false;
@@ -56,18 +57,26 @@ define('navigator', ['forum/pagination', 'components'], function (pagination, co
}
});
- $('.pagination-block.visible-xs').on('touchmove', function (e) {
+ $('.pagination-block.visible-xs').on('touchstart', function (e) {
+ $(this).tooltip('show');
+ tooltipEl = $(this).next();
+ var x = Math.min($(window).width(), Math.max(0, e.touches[0].clientX));
+ updateTooltip(x);
+ }).on('touchmove', function (e) {
e.preventDefault();
e.stopPropagation();
- var x = Math.min($(window).width(), Math.max(0, e.touches[0].clientX));
- var percent = x / $(window).width();
- var newIndex = Math.floor(count * percent);
+ var windowWidth = $(window).width();
+ var x = Math.min(windowWidth, Math.max(0, e.touches[0].clientX));
+ var percent = x / windowWidth;
+ var newIndex = Math.max(1, Math.floor(count * percent));
if (newIndex === index) {
return;
}
index = newIndex;
navigator.updateTextAndProgressBar();
+ updateTooltip(x);
}).on('touchend', function () {
+ $(this).tooltip('hide');
navigator.scrollToIndex(index - 1, true);
});
@@ -77,6 +86,12 @@ define('navigator', ['forum/pagination', 'components'], function (pagination, co
navigator.update(0);
};
+ function updateTooltip(x) {
+ var relIndex = getRelativeIndex();
+ tooltipEl.find('.tooltip-inner').translateText('[[global:pagination.out_of, ' + relIndex + ', ' + count + ']]');
+ tooltipEl.css({ left: Math.min($(window).width() - tooltipEl.width(), Math.max(x - (tooltipEl.width() / 2), 0)) });
+ }
+
function handleKeys() {
if (!config.usePagination) {
$(window).off('keydown', onKeyDown).on('keydown', onKeyDown);