dw/js/_init.js

$(function () {
  header();
  hamburger();
  waypoint_init();
  waypoints();
  why();
});

function header() {
  var $window = $(window),
  $smallHeader = $('.header-small'),
  smallHeaderShowing = false;

  function small_header() {
    var top = $window.scrollTop();
    if (top > 80 && !smallHeaderShowing) {
      $smallHeader.addClass('showing');
      smallHeaderShowing = true;
    }
    else if (top <= 80 && smallHeaderShowing) {
      $smallHeader.removeClass('showing');
      smallHeaderShowing = false;
    }
  }

$window.scroll(small_header);
small_header();
}

function hamburger() {
var isOpen = false,
  $hamburger = $('.hamburger'),
  $headerSmall = $('.header-small');

  $hamburger.on('click', function () {
    isOpen = !isOpen;
    $hamburger.toggleClass('is-active');
    $headerSmall.toggleClass('menu-open');
  });

  $(window).on('scroll', function(){
    if(isOpen){
      $hamburger.removeClass('is-active');
      $headerSmall.removeClass('menu-open');
      isOpen = false;
    }
  });
}

function why() {
  var index = 0,
    $section = $('.testimonials-section'),
    $testimonials = $('.br-testimonial'),
    $indicators = $('.indicators'),
    interval;
  function next(goTo) {
    $testimonials.removeClass('showing');
    if (index < $testimonials.length - 1)
      index++;
    else index = 0;
    $testimonials.eq(index).addClass('showing');
    $indicators.children().eq(index).addClass('current').siblings().removeClass('current');
  }
  function start() {
    interval = setInterval(function () {
      next();
    }, 6000);
  }
  function stop() {
    clearInterval(interval);
  }
  function makeIndicators() {
    for (var i = 0; i < $testimonials.length; i++) {
      var indicator = $('<span></span>');
      if (i === 0)
      indicator.addClass('current');
      $indicators.append(indicator);
    }
  }
  function advanceNow() {
    stop();
    next();
    start();
  }
  if ($testimonials.length) {
    makeIndicators();
    start();
    $section.on('mouseenter', '.br-testimonial', function () { stop(); });
    $section.on('mouseleave', '.br-testimonial', function () { start(); });
    $indicators.on('click', 'span', function () {
      index = $(this).index() - 1;
      advanceNow();
    });
    $('.next-testimonial').on('click', function () { advanceNow(); });
  }

}

function waypoints() {
  var waypoints = [];
  var $window = $(window),
      $body = $('body');
  var $headerSmall = $('.header-small');
  var $pages = $('.page-view');
  var $html = $('html'), isSmallWindow;

  function removeClasses($element) {
    $element.removeClass('viewport-above viewport-below viewport-inside');
  }
  function setClass($element, className) {
    removeClasses($element);
    $element.addClass(className);
  }
  function manageSize() {
    isSmallWindow = $window.width() <= 620;
  }

  function manageBackground($element) {
    var $colorSource = $element.prev('.background-color'),
    bgClass = false, hasGradient, background, gradient;

    if ($colorSource.length) {
      bgClass = $colorSource[0].hasAttribute('data-dark-bg') ? 'dark-bg' : 'light-bg';
      background = $colorSource.css('background-color');
      $body.css('background', background);
      $html.css('background', background);
      $body.attr('bg', bgClass);
      $headerSmall.css('color', background);
    }
  }

  function waypoint_init() {
    $pages.each(function () {
    var $this = $(this);
    var inview = new Waypoint.Inview({
      element: $this[0],
      enter: function (direction) {
        manageBackground($this);
        setClass($this, 'viewport-inside');
      },
      exited: function (direction) {
        if (direction == 'down')
          setClass($this, 'viewport-above');
        else setClass($this, 'viewport-below');
      },
      offset: {
        top: $window.height() / 2,
        bottom: $window.height() / 2
      }
    });
    waypoints.push(inview);
    });
  }

  function clearWaypoints() {
    for (var i = 0; i < waypoints.length; i++) {
      waypoints[i].destroy();
    }
    waypoints = [];
  }
  function handleWaypoints() {
    clearWaypoints();
    waypoint_init();
  }
  handleWaypoints();
  manageSize();

  $(window).on('resize', function () {
    $pages.each(function () {
      removeClasses($(this));
    });
    handleWaypoints();
    manageSize();
  });

}

function waypoint_init() {
  Waypoint.Inview.prototype.createWaypoints = function () {
  function outerHeight(el) {
    var height = el.offsetHeight;
    var style = getComputedStyle(el);
    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
    return height;
  }

  var configs = {
    vertical: [{
      down: 'enter', up: 'exited',
      offset: function () {
        var _offset = this.options.offset && this.options.offset.bottom || 0;
        return this.options.context.innerHeight - _offset;
      }.bind(this)
    }, {
      down: 'entered', up: 'exit',
      offset: function () {
        var _offset = this.options.offset && this.options.offset.bottom || 0;
        return this.options.context.innerHeight - outerHeight(this.element) - _offset;
      }.bind(this)
    }, {
      down: 'exit', up: 'entered',
      offset: function () {
        var _offset = this.options.offset && this.options.offset.top || 0;
        return _offset;
      }.bind(this)
    }, {
      down: 'exited', up: 'enter',
      offset: function () {
        var _offset = this.options.offset && this.options.offset.top || 0;
        return _offset - outerHeight(this.element);
      }.bind(this)
    }],
    horizontal: [{
        right: 'enter',
        left: 'exited',
        offset: '100%'
      }, {
        right: 'entered',
        left: 'exit',
        offset: 'right-in-view'
      }, {
        right: 'exit',
        left: 'entered',
        offset: 0
      }, {
        right: 'exited',
        left: 'enter',
        offset: function () {
          return -this.adapter.outerWidth()
        }
      }]
    };

    for (var i = 0, end = configs[this.axis].length; i < end; i++) {
        var config = configs[this.axis][i];
        this.createWaypoint(config)
    }
  };

  $.fn.scrollEnd = function (callback, timeout) {
    $(this).scroll(function () {
      var $this = $(this);
      if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));
      }
      $this.data('scrollTimeout', setTimeout(callback, timeout));
    });
  };
}