Dynamic load pages [JS Snipet]

Dynamic load pages [JS Snipet] Started by Dynamo · January 11, 2017, 07:50:40 pm · Read 15316 times 0 Members and 5 Guests are viewing this topic. previous topic - next topic

Dynamic load pages [JS Snipet]

January 11, 2017, 07:50:40 pm

This is not actually an addon but I didn't know where to post it.

This JavaScript code will dynamically load and display the contents when changing pages.
Here is a quick demo: https://i.imgur.com/hj9Oet3.gifv

Code:
Spoiler (click to show/hide)

Code: [Select]

// Current Version: 1.1

$(document).on('click', '.navPages', function(e){
  var url = $(this).attr('href');
  var page = (isNaN(parseInt($(this).text())) ? 0 : $(this).text());

  // Do some visual stuff
  var elSelector = ($('#forumposts').length) ? '#forumposts' : '#description_board, main';
  $(elSelector).css({'opacity': '0.5', 'cursor': 'wait'});

  // Scroll animation
  $('html, body').animate({scrollTop: $('.pagesection').offset().top + $('.pagesection').outerHeight() - (($('.forum_category').length) ? $('.forum_category').height() + 5 : 0)});

  // Fetch content
  $.get(url).done(function(html){
    // jQuery hates parsing body content. Surely there is a better way (eg regex)
    body = html.split('<body')[1].split('>').slice(1).join('>').split('</body>')[0];
    // Inject html!
    $(document.body).html(body);

    // Update browse history
    history.pushState({}, "Page " + page, url);
    
  }).fail(function(){
    // Something's wrong :S
    window.location = url;
  });

  // Don't navigate
  e.preventDefault();
});

Just edit your script_elk.js and insert this code.

Changelog:
Spoiler (click to show/hide)

Code: [Select]

  Current Version: 1.1

  v1.1:
    - Now it works for pages when browsing board topics too
    - It also updates the url and the browse history
  v1.0:
    - Initial Release

Re: Dynamic load pages [JS Snipet]

Reply #1 – January 11, 2017, 08:45:33 pm

Nice!

Re: Dynamic load pages [JS Snipet]

Reply #2 – January 12, 2017, 09:01:14 am

Very cool! It would be nice if all forum navigation behaved in a similar fashion so ya don't always feel like it's a complete page load.

Re: Dynamic load pages [JS Snipet]

Reply #3 – January 12, 2017, 10:55:06 am

Cool!

More need to add the page load as you scroll.

@ahrasis what do you think?

Re: Dynamic load pages [JS Snipet]

Reply #4 – January 12, 2017, 12:42:27 pm

Cool!

One thing: are the scripts in the page still working? (For example the likes and the quick edit.)

Re: Dynamic load pages [JS Snipet]

Reply #5 – January 12, 2017, 01:48:53 pm

Quote from: emanuele – January 12, 2017, 12:42:27 pmCool!

One thing: are the scripts in the page still working? (For example the likes and the quick edit.)

Yes they do work, I also made an update, so it also works when browsing board topics.

Probably I will make an update so all forum navigation behaves on a similar manner. (suggestion by @badmonkey)

Re: Dynamic load pages [JS Snipet]

Reply #6 – January 12, 2017, 02:00:45 pm

Super wow! Thanks for sharing this. Perhaps this should be part of the stock code?

Re: Dynamic load pages [JS Snipet]

Reply #7 – January 16, 2017, 07:07:41 am

I have just seen its demo. Great stuff I'd say. Thanks for sharing it.

Re: Dynamic load pages [JS Snipet]

Reply #8 – February 01, 2017, 05:49:26 am

Hello,

My English is very bad, sorry.

I have tried this great modification. Found a problem with latéral Top and Bottom buttons. Sometimes all work fine, bat I don't no why, sometimes the bottom button don't do anything.
Elkarte 1.09

Edit:
Il will remove this mod at the end of the week.
You can try:
Go https://forum.mpdb.tv/index.php/topic,35559.0.html
then go on page 2
Bottom button don't responde.

Re: Dynamic load pages [JS Snipet]

Reply #9 – February 01, 2017, 06:13:24 am

Quote// jQuery hates parsing body content. Surely there is a better way (eg regex)

Unlikely: https://jsperf.com/regex-vs-split/2

I haven't tried this, but I would assume it's incompatible with the way I call my quick quote script https://github.com/Frenzie/elk-quick-quote/blob/da6090639d63ff1b51f67891723a85a28eab012e/quickQuote.js#L384

Off the top of my head I'm thinking something like

Code: [Select]

var dynamicLoadPagesEvent = document.createEvent('Event');
dynamicLoadPagesEvent.initEvent('dynamic-load-pages:load-next', true, true);

document.body.dispatchEvent(dynamicLoadPagesEvent);

Then we should be able to act on it like this:

Code: [Select]

document.body.addEventListener('dynamic-load-pages:load-next', initializeQuickQuote, false);

Re: Dynamic load pages [JS Snipet]

Reply #10 – February 01, 2017, 08:55:19 am

I can only see its working just fine @shaitan. This addon target page changes by numbers or next button, not up and down arrow / button. I do however think it can be extended with some more modification to the original code. If you ask me, I like all button leading to another page or position to use the same effect. Better still, several options of it. But that's just me.

Re: Dynamic load pages [JS Snipet]

Reply #11 – February 01, 2017, 12:31:10 pm

Hello Ahrasis,
I will try to explain better the problem I encounter.
The addon work like a charm. Dynamic effect when changing page, that's nice, all is OK.

BUT it broke the latéral button (action=.....#bot). Nothing happpens when I press on it.
If I remove the addon, the button work again well

Re: Dynamic load pages [JS Snipet]

Reply #12 – February 01, 2017, 11:43:07 pm

I did go to the bottom just fine when I clicked bottom arrow button aka #bot. So, that doesn't seem broken to me.

Re: Dynamic load pages [JS Snipet]

Reply #13 – February 02, 2017, 03:35:58 am

The bottom arrow button work on some page.

Quote from: shaitan – February 01, 2017, 05:49:26 am
You can try:
Go https://forum.mpdb.tv/index.php/topic,35559.0.html
then go on page 2
Bottom arrow button don't work.

Tried with différent Browsers, on Windows, Linux..

Re: Dynamic load pages [JS Snipet]

Reply #14 – February 02, 2017, 04:25:41 am

Where's the bottom arrow button? It works for me if I add #bot to the addressbar manually.