Line 1: | Line 1: | ||
− | + | 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 += '<div class="item">'; | |
− | + | if ($secondHeadersBeforNextElement.length === 0) { | |
− | + | html += '<a class="' + activeClass + 'title" href="#' + id + '"><b>' + $(this).text() + '</b></a>'; | |
− | + | } else { | |
− | + | html += '<a class="' + activeClass + 'title"><i class="dropdown icon"></i> <b>' + $(this).text() + '</b></a>'; | |
− | + | } | |
− | + | if ($secondHeadersBeforNextElement.length > 0) { | |
− | + | html += '<div class="' + activeClass + 'content menu">'; | |
− | + | $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 += '</div>'; | |
− | + | } | |
− | + | html += '</div>'; | |
− | + | }); | |
− | + | $followMenu = $('<div />') | |
− | + | .addClass('ui vertical following fluid accordion text menu') | |
− | + | .html(html); | |
− | + | ||
− | + | $sticky = $('<div />') | |
− | + | .addClass('ui sticky') | |
− | + | .html($followMenu) | |
− | + | //.prepend($advertisement) | |
− | + | .prepend('<h3 class="ui header"><i class="' + icon + '"></i>' + '<div class="content">' + title + '</div>' '</h3>'); | |
− | + | $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()); | |
− | </div> | + | // $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'); | |
− | + | } | |
− | + | } | |
− | + | }); | |
− | + | } | |
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Revision as of 09:29, 15 October 2016
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 += ' ';
}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'); } } });
}