Home
This is a simple but useful addition to the Mobile modern version.
To implement this, first add this javascript in your list. Set its placement to in all pages.
After that, add this in your CSS. It should work in every forum version.
And that's it
- Example:
- I think it's pretty self-explanatory
To implement this, first add this javascript in your list. Set its placement to in all pages.
- Code:
/*
* -- Mobile pagination --
* Version: 1.0 EN (2018-03-03)
* Author: Wecoc
* Description: Mobile pagination with first and last page shortcuts
*/
$(function() {
if(window._userdata && _userdata.page_desktop) {
// Mobile mode
$('p.mobile_title_content').filter(function() {
var first_page_id = "1";
var current_page_id = this.childNodes[1].textContent;
var last_page_id = this.childNodes[3].textContent;
if (current_page_id > 1) {
var check_link = window.location.href.toString().split(window.location.host)[1];
var check_page = parseInt(current_page_id);
} else {
var check_link = $('a.mobile_next_button.block')[0].pathname;
var check_page = parseInt(current_page_id) + 1;
}
var page_count = GetPageCount(check_link, check_page);
var page_first = GetFirstPage(check_link);
var page_last = GetLastPage(check_link, last_page_id, page_count);
var mobile_title = this.parentNode;
$(mobile_title).prepend('<a href="' + page_first + '" class="mobile_first_button block"></a>');
$(mobile_title).append('<a href="' + page_last + '" class="mobile_last_button block"></a>');
});
}
});
/* Get how many posts a page has */
function GetPageCount(link, page) {
var page_index = link.match(/t(\d*)p(\d*)/)[2];
return parseInt(page_index) / (page - 1);
}
/* Get the link of the first page */
function GetFirstPage(link) {
return link.replace(/t(\d*)p(\d*)/, "t$1");
}
/* Get the link of the last page */
function GetLastPage(link, page_id, count) {
return link.replace(/t(\d*)p(\d*)/, "t$1p" + ((page_id - 1) * count));
}
After that, add this in your CSS. It should work in every forum version.
- Code:
/* Mobile pagination: Go to first/last page */
a.mobile_first_button.block { top: 12px; bottom: 0px; left: 8px; }
a.mobile_last_button.block { top: 12px; bottom: 0px; right: 8px; }
a.mobile_prev_button.block { top: 12px; bottom: 0px; left: 32px; }
a.mobile_next_button.block { top: 12px; bottom: 0px; right: 32px; }
a.mobile_first_button.block, a.mobile_last_button.block {
position: absolute;
font-size: 0;
}
a.mobile_first_button.block:after { content:"\e5dc" }
a.mobile_last_button.block:after { content:"\e5dd" }
a.mobile_first_button.block:after, a.mobile_last_button.block:after {
font-size: 24px;
text-align: center;
position: absolute;
display: inline-block;
font-family: 'Material Icons';
top: 0;
bottom: 0;
right: 0;
left: 0;
}
a.mobile_prev_button.block, a.mobile_prev_button.block:after,
a.mobile_next_button.block, a.mobile_next_button.block:after,
a.mobile_first_button.block, a.mobile_first_button.block:after,
a.mobile_last_button.block, a.mobile_last_button.block:after {
width: 24px;
height: 24px;
line-height: 24px;
}
And that's it
- Side note:
- Sorry if this is not working properly. Editing the CSS for mobile mode components seems to have some unpredictable results in some cases.
As far as I tested it worked fine but I had some troubles trying to reimplement it after reseting the forum version.
I'm not sure it has anything to do with this code by itself.
