diff options
Diffstat (limited to 'exampleSite/static/js/main.js')
| -rw-r--r-- | exampleSite/static/js/main.js | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/exampleSite/static/js/main.js b/exampleSite/static/js/main.js new file mode 100644 index 0000000..b45debb --- /dev/null +++ b/exampleSite/static/js/main.js @@ -0,0 +1,126 @@ +jQuery(document).ready(function($){ + //update these values if you change these breakpoints in the style.css file (or _layout.scss if you use SASS) + var MqM= 768, + MqL = 1024; + + var faqsSections = $('.cd-faq-group'), + faqTrigger = $('.cd-faq-trigger'), + faqsContainer = $('.cd-faq-items'), + faqsCategoriesContainer = $('.cd-faq-categories'), + faqsCategories = faqsCategoriesContainer.find('a'), + closeFaqsContainer = $('.cd-close-panel'); + + //select a faq section + faqsCategories.on('click', function(event){ + event.preventDefault(); + var selectedHref = $(this).attr('href'), + target= $(selectedHref); + if( $(window).width() < MqM) { + faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected'); + closeFaqsContainer.addClass('move-left'); + $('body').addClass('cd-overlay'); + } else { + $('body,html').animate({ 'scrollTop': target.offset().top - 19}, 200); + } + }); + + //close faq lateral panel - mobile only + $('body').bind('click touchstart', function(event){ + if( $(event.target).is('body.cd-overlay') || $(event.target).is('.cd-close-panel')) { + closePanel(event); + } + }); + faqsContainer.on('swiperight', function(event){ + closePanel(event); + }); + + //show faq content clicking on faqTrigger + faqTrigger.on('click', function(event){ + event.preventDefault(); + $(this).next('.cd-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible'); + }); + + //update category sidebar while scrolling + $(window).on('scroll', function(){ + if ( $(window).width() > MqL ) { + (!window.requestAnimationFrame) ? updateCategory() : window.requestAnimationFrame(updateCategory); + } + }); + + $(window).on('resize', function(){ + if($(window).width() <= MqL) { + faqsCategoriesContainer.removeClass('is-fixed').css({ + '-moz-transform': 'translateY(0)', + '-webkit-transform': 'translateY(0)', + '-ms-transform': 'translateY(0)', + '-o-transform': 'translateY(0)', + 'transform': 'translateY(0)', + }); + } + if( faqsCategoriesContainer.hasClass('is-fixed') ) { + faqsCategoriesContainer.css({ + 'left': faqsContainer.offset().left, + }); + } + }); + + function closePanel(e) { + e.preventDefault(); + faqsContainer.removeClass('slide-in').find('li').show(); + closeFaqsContainer.removeClass('move-left'); + $('body').removeClass('cd-overlay'); + } + + function updateCategory(){ + updateCategoryPosition(); + updateSelectedCategory(); + } + + function updateCategoryPosition() { + var top = $('.cd-faq').offset().top, + height = jQuery('.cd-faq').height() - jQuery('.cd-faq-categories').height(), + margin = 20; + if( top - margin <= $(window).scrollTop() && top - margin + height > $(window).scrollTop() ) { + var leftValue = faqsCategoriesContainer.offset().left, + widthValue = faqsCategoriesContainer.width(); + faqsCategoriesContainer.addClass('is-fixed').css({ + 'left': leftValue, + 'top': margin, + '-moz-transform': 'translateZ(0)', + '-webkit-transform': 'translateZ(0)', + '-ms-transform': 'translateZ(0)', + '-o-transform': 'translateZ(0)', + 'transform': 'translateZ(0)', + }); + } else if( top - margin + height <= $(window).scrollTop()) { + var delta = top - margin + height - $(window).scrollTop(); + faqsCategoriesContainer.css({ + '-moz-transform': 'translateZ(0) translateY('+delta+'px)', + '-webkit-transform': 'translateZ(0) translateY('+delta+'px)', + '-ms-transform': 'translateZ(0) translateY('+delta+'px)', + '-o-transform': 'translateZ(0) translateY('+delta+'px)', + 'transform': 'translateZ(0) translateY('+delta+'px)', + }); + } else { + faqsCategoriesContainer.removeClass('is-fixed').css({ + 'left': 0, + 'top': 0, + }); + } + } + + function updateSelectedCategory() { + faqsSections.each(function(){ + var actual = $(this), + margin = parseInt($('.cd-faq-title').eq(1).css('marginTop').replace('px', '')), + activeCategory = $('.cd-faq-categories a[href="#'+actual.attr('id')+'"]'), + topSection = (activeCategory.parent('li').is(':first-child')) ? 0 : Math.round(actual.offset().top); + + if ( ( topSection - 20 <= $(window).scrollTop() ) && ( Math.round(actual.offset().top) + actual.height() + margin - 20 > $(window).scrollTop() ) ) { + activeCategory.addClass('selected'); + }else { + activeCategory.removeClass('selected'); + } + }); + } +});
\ No newline at end of file |