Nagging front-end questions

raafirivero

Starting a new topic because there are two issues I'm facing and they're interrelated:

unable to access nodes using standard javascript methods like querySelector()
unable to use methods like remove() or offsetTop() etc

Does Flarum (or Mithril) instantiate a library of vnodes that I can access? Where is it? I have spent hours searching this forum and trying various work-arounds to do things that I should be able to achieve with just two or three lines of code. It's frustrating.

I can't work purely in CSS to achieve my goals here because of the dynamic nature of an SPA. How do I access, say, the Scrubber as a JS object so I can do stuff to it?

clarkwinkelmann

raafirivero Mithril works by defining Components, which return a Virtual DOM description of their content.

Usually when you want to add new DOM elements in Flarum, you monkey-patch those Components via the extend() method to alter their Virtual DOM.

For the rare things that can't be achieved via Virtual DOM or are too resource-intensive, the underlying DOM elements of a Component can be accessed via this.element or this.$, usually during the config() method call of that Component.

Modifying the DOM directly can lead to all sorts of errors if not taking into account how Mithril diffy the Virtual DOM. As Mithril compares its previous Virtual DOM to the new one to decide what to change, it won't be aware of any direct change and might end up editing the wrong elements or try editing elements that no longer exist.

If you can describe in more details what you are trying to change I might be able to link an example for you.

raafirivero

Hi clarkwinkelmann - Because I have significantly increased the height of my header via custom instructions (all done within Flarum's interface and Mithril commands) - the Scrubber is off of the page. I can see it again if I modify its css via margin-top, however bringing it back into view this way does not work because the Scrubber calculates its own height based on the viewport and so it renders on top of the header. I need to modify how it accounts for its starting position on the page, but keep its internal height calculation the same.

I think I can use import PostStreamScrubber from 'flarum/components/PostStreamScrubber'; to access its methods but I'm not sure which function within that controls its starting point. I just need the Scrubber to do exactly what it would have done normally, except to do it 580px lower on the screen.

clarkwinkelmann

raafirivero it looks like there's nothing really setting up the top position. It's fixed positioning without a top value, so its top is the same as the top of the .container, which in turn is affected by anything in the Header and Hero.

You could put a negative margin-top to the .DiscussionPage-nav > ul, but then it will probably go over the Hero.

If that doesn't work, you'll probably need some custom code that triggers during scroll to compute a margin dynamically. The padding most likely would need to be applied to the ul here https://github.com/flarum/core/blob/89ef14faf13e4d661ee9f4f636a32578c73bf760/js/src/forum/components/DiscussionPage.js#L107

This could be a case where directly accessing the DOM makes sense. You could setup a scroll listener in the DiscussionPage.config method, remove it in DiscussionPage.unload, and use that listener to update this.element.querySelector('.DiscussionPage-nav > ul').style.marginTop.

raafirivero

yes - the negative margin-top brings it back into view, but it scrolls over the Hero and Header as you predicted. there may be a way to use the "affixed" class that's being set already as a trigger for when to set the Scrubber's position to relative so that it scrolls into view naturally. I haven't gotten the math right yet, but this may be simpler than doing it via JS

clarkwinkelmann

You could use .App.scrolled .DiscussionPage-nav > ul to apply the negative margin only when scrolled.

There would still be a jump above the Hero as soon as you start scrolling, but you could at least change the style when the browser is at the very top.

raafirivero

clarkwinkelmann unfortunately neither .scrolled or .affixed are satisfactory for my purposes as they peg everything to the header's position, not the discussion container which is below the hero. Your other proposed solution DiscussionPage.config may work. To do this would I have to import DiscussionPage from 'flarum/components/DiscussionPage'; How do I add my own functions onto config and unload from there? I understand how to do the scroll calculations part.

raafirivero

Finally starting to wrap my head around some of this stuff. Since Flarum deals in virtual nodes, but many of the adjustments I want to make are in how the actual computed nodes look via CSS, there's no central repository for both. This is exactly what you said earlier, but there's a learning curve for me 🤪

If I've made an adjustment to an element via CSS like, say, adding "margin-top: 120px" to the Scrubber, there's no way to ask the node created by Flarum for this property directly because those are not attributes created on the vnodes themselves but combined later in the browser window. In this case, to access and make a calculation based on such a CSS rule I've had to extend the scrubber via the DiscussionPage config, then pull its computed value from the window:
var myScrub = this.element.querySelector('.DiscussionPage-nav > ul');
window.getComputedStyle(myScrub, null).getPropertyValue("margin-top");

which will return: "120px", and then parse it into a number. Or do it all-in-one like this:

var navMargin = parseInt(window.getComputedStyle(myScrub).getPropertyValue("margin-top"));

Because the thing I'm trying to calculate involves combining some of the inherent values from the nodes such as scrollHeight and computed values such as the one above, it took me awhile to figure out where to get each number from. Thanks for the pointers. I've successfully moved the scrubber to the right part the page via new calculations on the scroll event.

Having one more issue when I actually use the scrubber to change position on the page, so will have to listen to another event and fire a calculation from there, but that should be simpler since the math won't change.

raafirivero

Does Flarum take over the ScrollTo() behavior globally? I'm setting a new scroll target via onclick for the "Original Post" link in the Scrubber and instead of scrolling to it smoothly like everything else, it jumps there immediately.

datitisev

raafirivero How are you setting the new scroll target? The jumping occurs in the PostStreamScrubber onclick event handler @ https://github.com/flarum/core/blob/d31a7476312e6fb0febda21f85d3ad7973a600be/js/src/forum/components/PostStreamScrubber.js#L424.

raafirivero

datitisev How are you setting the new scroll target?

I'm extending the "config" function so that I can modify onclick for the .Scrubber-first element. Should I try extending the whole onclick function instead? i need it to calculate the height of the header differently.

raafirivero

@datitisev also, if I attempt to extend the onclick function like this:

extend(PostStreamScrubber.prototype, 'onclick', function() { console.log("extended"); });

-- nothing happens. I can extend the config function without problems, but then I have to modify the onclick how I mentioned above.

raafirivero

I am creating a site with a huge footer like the one on the Laracasts forum. The problem is that when you click to reply in a topic, Flarum scrolls the page all the way down to the bottom of the page, rather than to the bottom of the forum/top of the footer. The topic is no longer visible with a footer that tall. How do I change this behavior?

luceos

raafirivero I guess this should be an actual issue, because the scrubber scrolling effect should only affect the DiscussionList or Stream not the actual page..