Mobile pagination: Go to first/last page

Go down

Mobile pagination: Go to first/last page

Post by Wecoc on March 3rd 2018, 2:29 am

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

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 Smile

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.
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: Mobile pagination: Go to first/last page

Post by Justice™ on March 6th 2018, 9:04 pm

Interesting and quite useful adition! Good job!
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Mobile pagination: Go to first/last page

Post by SLGray on March 6th 2018, 9:05 pm

So basically it adds the numbers?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43668
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: Mobile pagination: Go to first/last page

Post by Justice™ on March 6th 2018, 9:07 pm

It adds a link that once clicked sends you to the first page and one that sends you to the last page.(The |< and >| in the second image).
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Mobile pagination: Go to first/last page

Post by SarkZKalie on March 8th 2018, 9:39 am

Wow, brilliant! Very Happy
avatar
SarkZKalie
Forumember

Male Posts : 776
Reputation : 115
Language : English

http://rotavn.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum