Team:USTC/Composite Part

var $container = $('#ui_article'); var $pageTitle = "Composite Parts"; var $pageIcon = "cubes icon";

var $firstHeaders = $container.find('div.ribbon'); //$firstHeaders.addClass("ui dividing header"); $firstHeaders.attr("style","padding-top:30px;"); var $secondHeaders = $container.find('h3');

var getSafeId = function($element){

 return window.escape(getSafeName(getText($element)));

} var getSafeName = function(text) {

 return text.replace(/\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, ).toLowerCase();

}; var getText = function($element) {

 $element = ($element.find('a').not('.label, .anchor').length > 0) ? $element.find('a') : $element;
 var $text = $element.contents().filter(function() {
   return this.nodeType == 3;
 });
 return ($text.length > 0) ? $text[0].nodeValue.trim() : $element.find('a').text().trim();

};

var createMenu = function() {

 var
   html = ,
   pageTitle = $pageTitle,
   title = pageTitle.charAt(0).toUpperCase() + pageTitle.slice(1),
   icon = $pageIcon,
   $sticky,
   $rail;
 $firstHeaders
   .each(function(index) {
     var
       $currentHeader = $(this),
       $nextElements = $currentHeader.nextUntil('div.ribbon'),
       $secondHeadersBeforNextElement = $nextElements.filter('h3'),
       activeClass = (index === 0) ? 'active ' : ,
       id = getSafeId($currentHeader),
       $anchor = $('<a />').addClass('anchor').attr('id', id);
       $currentHeader.append($anchor);

html += '

';

     if ($secondHeadersBeforNextElement.length === 0) {
       html += '<a class="' + activeClass + 'title" href="#' + id + '">' + $(this).text() + '</a>';
     } else {
       html += '<a class="' + activeClass + 'title"> ' + $(this).text() + '</a>';
     }
     if ($secondHeadersBeforNextElement.length > 0) {

html += '

';

       $secondHeadersBeforNextElement
         .each(function() {
           var
             $currentSecondHeader = $(this),
             childId = id + '-' +getSafeId($currentSecondHeader),
             $anchor = $('<a />').addClass('anchor').attr('id', childId);
             $currentSecondHeader.after($anchor);
             html += '<a class="item" href="#' + childId + '">' + getText($currentSecondHeader) + '</a>';
         });

html += '

';

     }

html += '

';

   });
 $followMenu = $('<div />')
   .addClass('ui vertical following fluid accordion text menu')
   .html(html);

 $sticky = $('<div />')
   .addClass('ui sticky')
   .html($followMenu)
   //.prepend($advertisement)

.prepend('

' + '

' + title + '

' '

');

 $rail = $('<div />')
   .addClass('ui dividing right rail')
   .html($sticky)
   .prependTo($container);
 $sticky.sticky({
   silent: true,
   context: $container,
   offset: 70
 });
 $followMenu
   .accordion({
     exclusive: false,
     animateChildren: false,
     onChange: function() {
       $('.ui.sticky').sticky('refresh');
     }
   })
   .find('.menu a[href], .title[href]')
   .on('click', function(event) {
           var id = $(this).attr('href').replace('#', )
             , $element = $('#' + id)
             , position = $element.offset().top - 60;
           $element.addClass('active');
           $('html, body').animate({
               scrollTop: position
           }, 500);
           location.hash = '#' + id;
           event.stopImmediatePropagation();
           event.preventDefault();
           return false;
       });

};

var createWayPoints = function(){

 $firstHeaders
   .visibility({
     observeChanges: false,
     once: false,
     offset: 60,
     onTopPassed: function() {
               var $section = $(this)
                 , index = $firstHeaders.index($section)
                 , $followSection = $followMenu.children('.item')
                 , $activeSection = $followSection.eq(index)
                 , isActive = $activeSection.hasClass('active');
               if (!isActive) {
                   $followSection.filter('.active').removeClass('active');
                   $activeSection.addClass('active');
                   $followMenu.accordion('open', index);
               }
               if(index -1 > -1){
                 $followMenu.accordion('close', index - 1);
               }
           },
     onTopPassedReverse: function() {
               var $menuItems = $followMenu.children('.item')
                 , $section = $menuItems.filter('.active')
                 , index = $menuItems.index($section);
               if ($section.prev().length > 0) {
                   $section.removeClass('active').prev('.item').addClass('active');
                   $followMenu.accordion('open', index - 1);
                   $followMenu.accordion('close', index );
               }
           }
   });
   $secondHeaders.visibility({
     observeChanges: false,
     once: false,
     offset: 60,
     onTopPassed: function() {
               var $section = $(this)
                 , index = $secondHeaders.index($section)
                 , $allSecondHeaderMenu = $followMenu.children('.item').children('.content.menu').children('a.item')
                 , $activeSecondHeader = $allSecondHeaderMenu.eq(index);
                 // , $activeParentHeader = $activeSecondHeader.parent()
                 // , isParentFirstHeaderMenuActive = $activeParentHeader.hasClass('active')
                 // , $menuItems = $followMenu.children('.item');
               
                   $allSecondHeaderMenu.filter('.active').removeClass('active');
                   $activeSecondHeader.addClass('active');
               // if (!isParentFirstHeaderMenuActive) {
               //  index = $followMenu.children().index($activeParentHeader.parent());
               //     $followMenu.accordion('open', index);
               // }
           },
     onTopPassedReverse: function() {
               var $allSecondHeaderMenu = $followMenu.children('.item').children('.content.menu').children('a.item')
                 , $section = $allSecondHeaderMenu.filter('.active')
                 , index = $allSecondHeaderMenu.index($section);
               if (index > 0) {
                   $section.removeClass('active').prev('.item').addClass('active');
                   $allSecondHeaderMenu.eq(index-1).addClass('active');
               }
           }
   });

}