Contao Konferenz & College 2019 in Duisburg - JETZT TICKET SICHERN!
Ergebnis 1 bis 3 von 3

Thema: Accordion: 4 Feature für Contao 3 und 4 - scroll, open, track - Update 08.11.2018

  1. #1
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.615
    User beschenken
    Wunschliste

    HTML Accordion: 4 Feature für Contao 3 und 4 - scroll, open, track - Update 08.11.2018

    Hier mal ein Template für's jQuery Accordion mit diesen 4 Features.

    1. Tracking des Öffnens eines Accordions mit Matomo (Piwik). (deaktiviert)

    2. Scrolle das geöffnete Accordion nach oben. Der Abstand von oben kann noch justiert werden, wenn man z.B. einen fixierten Header hat. Die Höhe eines einzelnen geschlossenen Accordions ist schon mit dazugegeben, sodass nicht ganz nach oben gescrollt wird, sondern ein geschlossenes Accordion darüber noch angezeigt wird.
    Code:
    ...$('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);...
    3. Öffnen eines Accordions wenn die Seite geladen wird. Wenn ein Accordion selber (SECTION) oder ein Child eine ID besitzt, welche dem Hash der URL entspricht, wird dieses Accordion geöffnet und nach oben gescrollt.
    Code:
    Example URL:
    https://example.org/foo.html#idWithinAccordion
    4. Suche nach Links auf der Seite, welche ein bestimmtes Accordion öffnen können. Funktioniert so wie bei Punkt 3.
    HTML-Code:
    <a href="foo.html#idWithinAccordion">Open accordion with ID "idWithinAccordion"</a>
    Die Feature sind einzelne Blöcke, welche ins originale Template an den entsprechenden Stellen eingefügt wurden (siehe Kommentare im Template).

    Contao 3.5
    HTML-Code:
    <!-- Contao 3.5.35 j_accordion.html5 -->
    <script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {
          $(document).accordion({
            // Put custom options here
            heightStyle: 'content',
            header: 'div.toggler',
            collapsible: true,
            create: function(event, ui) {
              ui.header.addClass('active');
              $('div.toggler').attr('tabindex', 0);
            },
            activate: function(event, ui) {
              ui.newHeader.addClass('active');
              ui.oldHeader.removeClass('active');
              $('div.toggler').attr('tabindex', 0);
    
    
              /** Matomo (Piwik) accordion tracking *
              //console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
              if(ui.newHeader.length > 0) {
                _paq.push(['trackEvent', 'Akkordeon', ui.newHeader[0].innerText]);
              }
              /** Matomo (Piwik) accordion tracking - END */
    
    
              /** Scroll active accordion to top */
              if(ui.newHeader.length > 0) {
                var
                  previousTogglerHeight = ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').find('.toggler').outerHeight() || 0,
                  previousAccordionMarginBottom = parseInt(ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').css('margin-bottom')) || 0
                ;
    
                if(previousTogglerHeight)
                {
                  $('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
                }
              }
              /** Scroll active accordion to top - END */  
            }
          });
    
    
          /**
           * On page load
           *
           * Scroll to an accordion and open it if URL hash matches an ID within an accordion
           */
          var targetToggler = $(document.location.hash).closest('.ce_accordion').find('.toggler');
    
          if(targetToggler.length) {
            $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
          }
          /** On page load - END */
    
    
          /**
           * On link click
           *
           * Scroll to an accordion and open it if a link hash matches an ID within an accordion
           */
          $('a').each(function() {
            var hash = $(this).prop('hash');
    
            if(hash) {
              var targetToggler = $(hash).closest('.ce_accordion').find('.toggler');
    
              if(targetToggler.length) {
                $(this).click(function() {
                  $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
                });
              }
            }
          });
          /** On link click - END */
        });
      })(jQuery);
    </script>
    ps Leider sind die Syntax-Highlighter hier im Forum sehr mies. Mit nem anständigen Highlighting ist das Template übersichtlicher. Deswegen hier nochmal ne einzelne Auflistung zur besseren Analyse.

    Originales Template:
    PHP-Code:
    <!-- Contao 3.5.35 j_accordion.html5 -->
    <script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'?>/jquery-ui.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {
          $(document).accordion({
            // Put custom options here
            heightStyle: 'content',
            header: 'div.toggler',
            collapsible: true,
            create: function(event, ui) {
              ui.header.addClass('active');
              $('div.toggler').attr('tabindex', 0);
            },
            activate: function(event, ui) {
              ui.newHeader.addClass('active');
              ui.oldHeader.removeClass('active');
              $('div.toggler').attr('tabindex', 0);
    Matomo (Piwik):
    PHP-Code:
              /** Matomo (Piwik) accordion tracking */
              //console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
              
    if(ui.newHeader.length 0) {
                
    _paq.push(['trackEvent''Akkordeon'ui.newHeader[0].innerText]);
              }
              
    /** Matomo (Piwik) accordion tracking - END */ 
    Scroll:
    PHP-Code:
              /** Scroll active accordion to top */
              
    if(ui.newHeader.length 0) {
                var
                  
    previousTogglerHeight ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').find('.toggler').outerHeight() || 0,
                  
    previousAccordionMarginBottom parseInt(ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').css('margin-bottom')) || 0
                
    ;

                if(
    previousTogglerHeight)
                {
                  $(
    'html, body').animate({scrollTopui.newHeader.offset().top previousTogglerHeight previousAccordionMarginBottom 5}, 300);
                }
              }
              
    /** Scroll active accordion to top - END */ 
    Originales Template:
    PHP-Code:
            }
          }); 
    Page load:
    PHP-Code:
          /**
           * On page load
           *
           * Scroll to an accordion and open it if URL hash matches an ID within an accordion
           */
          
    var targetToggler = $(document.location.hash).closest('.ce_accordion').find('.toggler');

          if(
    targetToggler.length) {
            $(
    document).accordion('option''active', $('.toggler').index(targetToggler));
          }
          
    /** On page load - END */ 
    On link click:
    PHP-Code:
          /**
           * On link click
           *
           * Scroll to an accordion and open it if a link hash matches an ID within an accordion
           */
          
    $('a').each(function() {
            var 
    hash = $(this).prop('hash');

            if(
    hash) {
              var 
    targetToggler = $(hash).closest('.ce_accordion').find('.toggler');

              if(
    targetToggler.length) {
                $(
    this).click(function() {
                  $(
    document).accordion('option''active', $('.toggler').index(targetToggler));
                });
              }
            }
          });
          
    /** On link click - END */ 
    Originales Template:
    PHP-Code:
        });
      })(
    jQuery);
    </script> 
    Contao 4.4
    HTML-Code:
    <!-- Contao 4.4.18 j_accordion.html5 -->
    <script src="<?= TL_ASSETS_URL ?>assets/jquery-ui/js/jquery-ui.min.js"></script>
    <script>
      jQuery(function($) {
        $(document).accordion({
          // Put custom options here
          heightStyle: 'content',
          header: '.toggler',
          collapsible: true,
          create: function(event, ui) {
            ui.header.addClass('active');
            $('.toggler').attr('tabindex', 0);
          },
          activate: function(event, ui) {
            ui.newHeader.addClass('active');
            ui.oldHeader.removeClass('active');
            $('.toggler').attr('tabindex', 0);
    
    
            /** Matomo (Piwik) accordion tracking *
            //console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
            if(ui.newHeader.length > 0) {
              _paq.push(['trackEvent', 'Akkordeon', ui.newHeader[0].innerText]);
            }
            /** Matomo (Piwik) accordion tracking - END */
    
    
              /** Scroll active accordion to top */
              if(ui.newHeader.length > 0) {
                var
                  previousTogglerHeight = ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').find('.toggler').outerHeight() || 0,
                  previousAccordionMarginBottom = parseInt(ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').css('margin-bottom')) || 0
                ;
    
                if(previousTogglerHeight)
                {
                  $('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
                }
              }
              /** Scroll active accordion to top - END */  
          }
        });
    
    
        /**
         * On page load
         *
         * Scroll to an accordion and open it if URL hash matches an ID within an accordion
         */
        var targetToggler = $(document.location.hash).closest('.ce_accordion').find('.toggler');
    
        if(targetToggler.length) {
          $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
        }
        /** On page load - END */
    
    
        /**
         * On link click
         *
         * Scroll to an accordion and open it if a link hash matches an ID within an accordion
         */
        $('a').each(function() {
          var hash = $(this).prop('hash');
    
          if(hash) {
            var targetToggler = $(hash).closest('.ce_accordion').find('.toggler');
    
            if(targetToggler.length) {
              $(this).click(function() {
                $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
              });
            }
          }
        });
        /** On link click - END */
      });
    </script>
    ps Wenn ihr alle 4 Blöcke in euer Template einfügt, könnt ihr die einzelnen Blöcke auch deaktivieren indem ihr jeweils im ersten Kommentar-Block den letzten Slash entfernt. Siehe z.B. erstes komplettes Template für Contao 3.5, dort ist Matomo deaktiviert.
    Geändert von Andreas (09.08.2019 um 18:18 Uhr) Grund: Update 08.11.2018 better scroll to top
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  2. #2
    Contao-Fan Avatar von Doro
    Registriert seit
    21.06.2009.
    Ort
    Hamburg
    Beiträge
    322

    Daumen hoch KLASSE

    Zitat Zitat von Andreas Beitrag anzeigen
    Hier mal ein Template für's jQuery Accordion mit diesen 4 Features.

    <!-- Contao 4.4.18 j_accordion.html5 -->
    wie cool ist das denn, tausend DANK! you made my day!!!

  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.615
    User beschenken
    Wunschliste

    Standard

    My pleasure
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 2 (Registrierte Benutzer: 0, Gäste: 2)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •