Mobile pagination: Go to first/last page

by Wecoc March 3rd 2018, 2:29 am

This is a simple but useful addition to the Mobile modern version.

Example:

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; }