vendredi 29 juin 2018

Refreshing Semantic UI sticky with Ember does not work

Okay, so I have this Semantic UI sticky rails menu in an Ember application.

setTimeout(function(){
 $('.ui.sticky').sticky({
  offset: 60,
  observeChanges: true,
  silent: true
 });
},2000);

It is wrapped into a setTimeout() to wait for the document content to load, which seemed to be the only workaround at that time. Also it is supposed to refresh every time content is added to or removed from the column, for example when the document image loads after the timeout or one of the accordions is opened/closed by the user. To achieve this I tried

$('.document-content.column').attr('onresize', "$('.ui.sticky').sticky('refresh')");

to catch changes in the element size. Unfortunately this only works when the window is resized. As I already found out, there is no event that triggers after images load, so I tried listening to DOM element changes with DOMSubtreeModified.

$('.document-content.column').bind('DOMSubtreeModified', function() {
 $('.ui.sticky').sticky('refresh');
});

This works fine and also substitutes the dirty timeout solution, but it's very slow on the initial page load, as it is triggered a bunch of times. Also DOMSubtreeModified is said to be deprecated, which is why I tried MutationObservers like this:

var observer = new MutationObserver(function() {
  $('.ui.sticky').sticky('refresh');
});

var observerTarget = document.querySelector('.document-content.column');

var observerOptions = {
  attributes: true,
  childList: true,
  subtree: true
};

observer.observe(observerTarget, observerOptions);

But it seems that every refresh of the sticky just triggers the observer again, causing an endless loop. And now I don't know what else to do.

Short version of the hbs template:

<div class="ui stackable three column container relaxed grid">
 <div class="twothird wide document-content column">
  
  <div class="ui divider"></div>
  <h2 class="cap text"></h2>
  <div class="ui relaxed divided accordion">
   <div class="title"></div>
   <div class="content"></div>
  </div>
 </div>

 <div class="widescreen large screen computer only column">
  <div class="ui sticky rail-menu">
   
  </div>
 </div>
</div>

If there is anything else I should provide, please tell me. I am thankful for any help that I can get.




Aucun commentaire:

Enregistrer un commentaire