Header redraws on Navigation mouseenter

raafirivero

I'm still working on the presentation layer of my dev forum. There's a weird behavior I'm not sure how to fix. When the mouse enters the Navigation icon on phone- and tablet-sized layouts: the entire Custom Header section redraws and all my elements get built a 2nd, (3rd, 4th, etc.) time every time I hover over the button. This all happens before one even clicks the nav button to pull out the drawer menu.

I've tried putting an if statement in the view() function of my elements to test if the header's been built already but this won't work either as the header will simply be redrawn with blank elements. Is there a way to unhook this behavior? I feel like I've tracked it down to the Navigation.prototype file in the core but I'm not sure how to extend those functions without breaking other important functionality.

clarkwinkelmann

raafirivero I'm not sure what happens about that mouseenter thing. Can you give a screenshot or className of the exact element that's causing it ?

However regarding your problem I suppose you might not be using Mithril as intended.

If you extend the view method, you should modify the vdom to add your additional content. That vdom will be diffed by Mithril and the number of redraws shouldn't matter.

If you manually inject content with DOM manipulation or jQuery, you should extend the config method and check for the isInitialized property to know whether the component element exists.

raafirivero

clarkwinkelmann If you extend the view method, you should modify the vdom to add your additional content. That vdom will be diffed by Mithril and the number of redraws shouldn't matter.

I'm sorry but I'm having a problem understanding this. The way that I am inserting content is using the Custom Header setting in the admin, adding some plain-vanilla html tags, styled with CSS. From there I inject the content I want to use via Mithril (e.g. m.mount(myHeader, newContent);. What you're saying, I think, is that I should extend components from within the core such as, say, the Page.js component and then use Mithril to inject my content this way?

raafirivero

What I'm seeing is that the Custom Header is created differently from the rest of the app's core and thus it's treated differently. There are very few references to the Custom Header in the source code. It seems to be injected via the first line in this file – forum.blade.php : {!! array_get($forum, 'headerHtml') !!} – rather than via an extensible component, as the other "normal" elements onscreen. Perhaps the app does not see the child nodes of the Custom Header as cleanly as everything else?