phpBB timeline posts Slider like Discourse

[axew3]

So, i did not resisted to move on and test Vertical Views with the Posts Slider as raw test.
Doing the code that link the page scroll movement to the Posts Slider i've fall into this:
https://developer.mozilla.org/en-US/doc ... server_API

Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.

then i changed the way i had think to code the task and abandoned the old way that was using this function:

Code: Select all

  function w3vv_isScrolledIntoView(el) {
    //console.log('testme ' + isVisible);
     var rect = el.getBoundingClientRect();
     var elemTop = rect.top;
     var elemBottom = rect.bottom;
    // Only completely visible elements return true:
     //var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true, in this way:
     var isVisible = elemTop < window.innerHeight && elemBottom >= 0;
     //console.log('isVisible ' + isVisible);
    return isVisible;
  } // END // w3vv_isScrolledIntoView()

in favor of the Intersection_Observer_API.

The same way will be re-coded the Vertical Views extension, abandoning the old way in favor of the Intersection_Observer_API and so to make it lighter. As can be viewed into the raw example, the scroll, as is the behavior of the actual Vertical Views, stop when the limit of pages tabs are reached. It is perfectly congruent based on how it is actually coded.
But it will be modified to scroll until the End or the Start of the topic and not to stop where there are ellipsis.
The use of the Intersection_Observer_API and more things i noted during this time, will make the code much more easy removing some complex and heavy loops that become not useful.

The Element.getBoundingClientRect() will still be used for the Posts Slider snippet, where the computation is done in a very light way and works fine, with the use of it for few known elements, which data are computed only once because the element dimension never change.
It is not anymore good for different and heavy tasks, such detecting if elements are or not into the viewport while scrolling a page and that maybe add elements into the DOM while the user is scrolling.

[axew3]

Follow a comment about this new step...

[axew3]

It is now working exactly like on Discourse in few steps.
The mouse/touch have the same behavior and when released the post is loaded.
It move data and position along with the linked page scroll, it do not go to load the content when "on release over the post's slider" if the post has been already loaded and instead scroll to the post.

More things to do:
- move the Vertical Views code to use the Intersection_Observer_API.
- add remaining Topic data on Top and Bottom of the slider, so to know when the topic started (date) and when it is the last reply on it (as it is on Discourse).
...
...

[axew3]

Data about the topic start and the topic end date:
i am aiming to make the
data slider on Bottom so to display hours if it is hours that the topic has been inserted, minutes or seconds, beside days or months or years. That's easy.
While the data slider on Top, will display the last inserted post date, in seconds, minutes, hours days or years as the case but:

thinking an hard thing done easy and quite near to 0 cost in terms of required resources...
normally the slider top data will display the last post time.
but let imagine:
while sliding or moving around a very long topic with long answers in one single page, maybe containing already 30 posts into the dom stack, if it will receive a new reply in the meanwhile, and the page/topic data have not been refreshed because the user scrolling down and top have not reach and released on the slider or by clicking into a page button, so to cause a page refresh (that's the majority of cases that will happen this way so this is just a plus), but anyway let imagine the slider top data should display highlighted and updated date of the latest inserted post even if the user have not caused a page/topic refresh and is still reading posts on the stack that have been not updated by a new scroll or page refresh.
The user will be informed and by clicking on the highlighted and active time the user will be so redirected to the last inserted new post reply.
Do not know if the one of Discourse update at mean time these data when/if a new post is inserted while an user is on viewtopic.
This could be useful to work also overall the forum pages and it is very easy to do at 0 cost.


After this, or before, the Vertical Views code will be "dramatically" improved.