www programming

Data about the topic start and the topic end date:
i am aiming to make the
[b]data slider on Bottom[/b] 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 [b]data slider on Top[/b], 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.

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).
...
...

[HTMLMARKUP]Follow a comment about this new step...<br /><br />
<table style="width:100%;text-align:center;margin:0; padding:0px;border-collapse: collapse;"><tr><td style="max-width:25%"><iframe width="560" height="315" src="https://www.youtube.com/embed/vix392uOh2M?si=OYVeAXT3HeT3pyoS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></td></tr></table>

  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()

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/docs/Web/API/Intersection_Observer_API

[quote]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.[/quote]

then i changed the way i had think to code the task and abandoned the old way that was using this function:
[code] 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()[/code]
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.

[HTMLMARKUP]Follow a comment about this...<br /><br />
<table style="width:100%;text-align:center;margin:0; padding:0px;border-collapse: collapse;"><tr><td style="max-width:25%"><iframe width="560" height="315" src="https://www.youtube.com/embed/ZuvymJxRFfk?si=yiI_YzLJQ_RdIjZY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></td></tr></table>

[b]Vertical views[/b] (i will put a live example of it that i removed because conflicting in some way with different things i had to display as example):
https://www.axew3.com/w3/forums/viewtopic.php?t=2038
it work like Discourse. You can try it into a default subsilver or a theme that respect default dom selectors and see it.
But the code will be significantly improved and simplified because it's a very raw first test. I realized after how maybe can be easier.
[b]Posts replies:[/b]
https://www.axew3.com/www/dev/viewtopic.php?p=43#p43
i did it like on Discourse and to finalize exactly as it work there, is very easy. I experimented the extension working exactly like on Discourse showing the reply below the post, but also into the topic posts normal list, just doing wrong a query. It can be highly improved with easy.

This slider snippet code.
The slider require to be linked to the scroll. Quite complicate i have in mind all the necessary code and ready with few modifications of done examples because the mechanism is the same. Or at least should.
While the vertical views will continue to work as it is, loading pages onscroll, and moving the pages menu while doing it, the posts slider will do the same of discourse, so we will have both and an evem more complete user's experience.

Have a slider that open-up (and will remain opened until not closed) like to one of the mobile in Discourse? Think yes.
Or the vertical big one that always would display on big viewports: but where it should be placed if not into a modified phpBB template?

[attachment=0]Screenshot 2025-06-24 at 23-54-02 Vertical Range Slider moving label by axew3-2.png[/attachment]

it is actually raw in my tests "absolute positioned" centered over phpBB while it can even scroll.
But will be i think, a button like on Discourse mobile, that will show up when clicked.
Both solutions will be anyway provided, 1) into a button that will display onclick, or 2) full for the one who want to always display it into a specific theme (or both like it is on discourse, that display in a case or the other).