Handorgel

• GitHub Repo

Anker-Handling

Thema: Ankerlinks funktionieren nicht out of the box
Skript von Benny Born auf slack

(()=>{
  const openHandOrgel = () => {
    const hash = document.location.hash.substr(1);
    if( hash ) {
      const elem = document.getElementById(hash);

      if( elem ) {
        const content = elem.closest('.handorgel__content');

        if( content ) {
          const btn = content.previousElementSibling?.querySelector('button');

          if( btn ) {
            btn.click();
            btn.blur();
            btn.scrollIntoView({smooth:true});
          }
        }
      }
    }
  };

  openHandOrgel();

  window.addEventListener('hashchange', openHandOrgel);

})();

Andere Möglichkeit lt. Forum?

• Frage im Forum

Themen zum anschauen

• scrollIntoView API
• hashChangeEvent API
• issue auf GitHub

scrollIntoView

Thema: mlweb scrollIntoView bei langen Accordeon-Inhalten Bei langen Akkordeon-Inhalten passiert folgendes: Hat man das erste Akkordeon-Element geöffnet, scrollt nach unten und öffnet das zweite Akkordeon-Element, dann ist der untere Teil des zweiten langen Akkordeon-Elements im Viewport. Das hat mich schon beim legacy Akkordeon so geärgert, dass ich mit einer Anpassung des jquery dafür gesorgt habe, dass sich der Anfang des Akkordeon-Elements in den Viewport schiebt.

<script{{ script_attributes }}>
    (function () {
        document.querySelectorAll('.content-accordion').forEach(el => {
            new handorgel(el, {
                {% block init_options %}
                multiSelectable: false,
                {# Put custom options here #}
                {% endblock %}
            });

            el.querySelectorAll('.handorgel__header').forEach(header => {
                header.addEventListener("click", () => {
                    el.scrollIntoView({ behavior: "smooth", block: "start" });
                });
            });
        });
    })();
</script>