Difference between revisions of "Team:Edinburgh OG/HP/Gold Integrated/JS:main"

(Created page with "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 =...")
 
Line 1: Line 1:
−
jQuery(document).ready(function($) {
+
jQuery(document).ready(function($){
−
  //update these values if you change these breakpoints in the style.css file (or _layout.scss if you use SASS)
+
//update these values if you change these breakpoints in the style.css file (or _layout.scss if you use SASS)
−
  var MqM = 768,
+
var MqM= 768,
−
    MqL = 1024;
+
MqL = 1024;
  
−
  var faqsSections = $('.cd-faq-group'),
+
var faqsSections = $('.cd-faq-group'),
−
    faqTrigger = $('.cd-faq-trigger'),
+
faqTrigger = $('.cd-faq-trigger'),
−
    faqsContainer = $('.cd-faq-items'),
+
faqsContainer = $('.cd-faq-items'),
−
    faqsCategoriesContainer = $('.cd-faq-categories'),
+
faqsCategoriesContainer = $('.cd-faq-categories'),
−
    faqsCategories = faqsCategoriesContainer.find('a'),
+
faqsCategories = faqsCategoriesContainer.find('a'),
−
    closeFaqsContainer = $('.cd-close-panel');
+
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);
 +
}
 +
});
  
−
  //select a faq section
+
//close faq lateral panel - mobile only
−
  faqsCategories.on('click', function(event) {
+
$('body').bind('click touchstart', function(event){
−
    event.preventDefault();
+
if( $(event.target).is('body.cd-overlay') || $(event.target).is('.cd-close-panel')) {
−
    var selectedHref = $(this).attr('href'),
+
closePanel(event);
−
      target = $(selectedHref);
+
}
−
    if ($(window).width() < MqM) {
+
});
−
      faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected');
+
faqsContainer.on('swiperight', function(event){
−
      closeFaqsContainer.addClass('move-left');
+
closePanel(event);
−
      $('body').addClass('cd-overlay');
+
});
−
    } else {
+
−
      $('body,html').animate({
+
−
        'scrollTop': target.offset().top - 19
+
−
      }, 200);
+
−
    }
+
−
  });
+
  
−
  //close faq lateral panel - mobile only
+
//show faq content clicking on faqTrigger
−
  $('body').bind('click touchstart', function(event) {
+
faqTrigger.on('click', function(event){
−
    if ($(event.target).is('body.cd-overlay') || $(event.target).is('.cd-close-panel')) {
+
event.preventDefault();
−
      closePanel(event);
+
$(this).next('.cd-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');
−
    }
+
});
−
  });
+
−
  faqsContainer.on('swiperight', function(event) {
+
−
    closePanel(event);
+
−
  });
+
  
−
  //show faq content clicking on faqTrigger
+
//update category sidebar while scrolling
−
  faqTrigger.on('click', function(event) {
+
$(window).on('scroll', function(){
−
    event.preventDefault();
+
if ( $(window).width() > MqL ) {
−
    $(this).next('.cd-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');
+
(!window.requestAnimationFrame) ? updateCategory() : window.requestAnimationFrame(updateCategory);  
−
  });
+
}
 +
});
  
−
  //update category sidebar while scrolling
+
$(window).on('resize', function(){
−
  $(window).on('scroll', function() {
+
if($(window).width() <= MqL) {
−
    if ($(window).width() > MqL) {
+
faqsCategoriesContainer.removeClass('is-fixed').css({
−
      (!window.requestAnimationFrame) ? updateCategory(): window.requestAnimationFrame(updateCategory);
+
'-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,
 +
});
 +
}
 +
});
  
−
  $(window).on('resize', function() {
+
function closePanel(e) {
−
    if ($(window).width() <= MqL) {
+
e.preventDefault();
−
      faqsCategoriesContainer.removeClass('is-fixed').css({
+
faqsContainer.removeClass('slide-in').find('li').show();
−
        '-moz-transform': 'translateY(0)',
+
closeFaqsContainer.removeClass('move-left');
−
        '-webkit-transform': 'translateY(0)',
+
$('body').removeClass('cd-overlay');
−
        '-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) {
+
function updateCategory(){
−
    e.preventDefault();
+
updateCategoryPosition();
−
    faqsContainer.removeClass('slide-in').find('li').show();
+
updateSelectedCategory();
−
    closeFaqsContainer.removeClass('move-left');
+
}
−
    $('body').removeClass('cd-overlay');
+
−
  }
+
  
−
  function updateCategory() {
+
function updateCategoryPosition() {
−
    updateCategoryPosition();
+
var top = $('.cd-faq').offset().top,
−
    updateSelectedCategory();
+
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 updateCategoryPosition() {
+
function updateSelectedCategory() {
−
    var top = $('.cd-faq').offset().top,
+
faqsSections.each(function(){
−
      height = jQuery('.cd-faq').height() - jQuery('.cd-faq-categories').height(),
+
var actual = $(this),
−
      margin = 20;
+
margin = parseInt($('.cd-faq-title').eq(1).css('marginTop').replace('px', '')),
−
    if (top - margin <= $(window).scrollTop() && top - margin + height > $(window).scrollTop()) {
+
activeCategory = $('.cd-faq-categories a[href="#'+actual.attr('id')+'"]'),
−
      var leftValue = faqsCategoriesContainer.offset().left,
+
topSection = (activeCategory.parent('li').is(':first-child')) ? 0 : Math.round(actual.offset().top);
−
        widthValue = faqsCategoriesContainer.width();
+
−
      faqsCategoriesContainer.addClass('is-fixed').css({
+
if ( ( topSection - 20 <= $(window).scrollTop() ) && ( Math.round(actual.offset().top) + actual.height() + margin - 20 > $(window).scrollTop() ) ) {
−
        'left': leftValue,
+
activeCategory.addClass('selected');
−
        'top': margin,
+
}else {
−
        '-moz-transform': 'translateZ(0)',
+
activeCategory.removeClass('selected');
−
        '-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');
+
−
      }
+
−
    });
+
−
  }
+
 
});
 
});

Revision as of 20:20, 31 October 2017

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'); } }); } });