Difference between revisions of "Template:Linkoping Sweden/Javascript"

Revision as of 13:54, 15 October 2016

$(document).ready(function () {

   $('.team-container').find('img').click(function () {
       var $imgHost = $(this).parent();
       var $container = $imgHost.parent();

       // Show details interface
       $imgHost.toggleClass('active');
       $container.toggleClass('displaying');

       // Copy information content for the selected team member
       var memberName = $imgHost.attr('data-member');
       var $memberInfo = $('#member-info').find('#member-' + memberName);
       var $memberContainer = $container.find('.member-info');

       $memberContainer.html($memberInfo.html());
   });

   $('.info-close').click(function () {
       var $container = $(this).parent().parent();

       // Close details interface
       $container.removeClass('displaying');
       $container.find('.active').removeClass('active');
   });

   $('.menu-button').click(function () {
       $('.closed-menu').toggle();
       window.scrollTo(0, 0);
   });

   if ($('#toc').length > 0) {
       $('.content').addClass('toc-exist');

       var element = $('#toctitle');

       var $tableItems = $('#toc').find('li');

       var $linkElems = [];
       var triggerHeights = [];

       var oldSelectedIndex = -1;
       var electNewIndex = function () {
           var scrollTop = $(window).scrollTop();
           var newIndex = 0;
           for (var i = 0; i < triggerHeights.length; i++) {
               if (scrollTop > triggerHeights[i]) {
                   newIndex = i;
               }
           }

           if (newIndex != oldSelectedIndex) {
               if (oldSelectedIndex != -1) {
                   $linkElems[oldSelectedIndex].removeClass('toc-selected');
               }

               oldSelectedIndex = newIndex;
               $linkElems[newIndex].addClass('toc-selected');
           }
       }

       var tocHeight = 0;
       var sponsorOffset = 0;

       var recalculateHeights = function () {
           tocHeight = $('#toc > ul').height();
           sponsorOffset = $('#sponsors').offset().top;

           var $localLinkElems = [];
           var localTriggerHeights = [];

           for (var i = 0; i < $tableItems.length; i++) {
               var $elem = $($tableItems[i]);
               var $linkElem = $elem.find('> a');
               var headingID = $linkElem.attr('href');
               var $headingElem = $(document.getElementById(headingID.substring(1)));

               var elemTop = $headingElem.offset().top;
               localTriggerHeights.push(elemTop - 200);
               $localLinkElems.push($linkElem);
           }

           // Avoid strange race conditions. Might not be needed but better safe than sorry.
           $linkElems = $localLinkElems;
           triggerHeights = localTriggerHeights;

           electNewIndex();
       };

       recalculateHeights();
       $('.content').resize(recalculateHeights);

       var eTop = element.offset().top;
       $(window).scroll(function () { //when window is scrolled
           var scrollTop = $(window).scrollTop();
           var positionOnScreen = eTop - scrollTop;
           if (positionOnScreen < 40) {
               $('#toc').addClass('toc-fixed');
           } else {
               $('#toc').removeClass('toc-fixed');
           }

           if (sponsorOffset - tocHeight - scrollTop < 104) {
               $('#toc').addClass('toc-restricted');
               $('#toctitle').css('bottom', tocHeight + 12);
           } else {
               $('#toc').removeClass('toc-restricted');
           }

           electNewIndex();
       });
   }

});