dw/js/_init.js

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    height: 'auto',
    headerToolbar: { start: 'title', center: '', end: 'list,timeGridWeek,dayGridMonth,prev,next' },
    buttonText: { list:'day' },
    views: {
      dayGrid: { hiddenDays: [ 0,6,7 ] },
      timeGrid: {
        slotMinTime: '08:00:00',
        slotMaxTime: '17:00:00',
        dayHeaderFormat: { weekday: 'short' },
        hiddenDays: [ 0,6,7 ]
      },
    },
    displayEventEnd: { month: true, basicWeek: true, "default": true },
    stickyHeaderDates: false,
    firstDay : 1,
    googleCalendarApiKey: 'AIzaSyAGowGJYx6dOaQvG_vSUI73uT88VWOTcNQ',
  	events: { googleCalendarId: 'davidawindham.com_bvrht1f8n2vgldgjenpgfdd4bk@group.calendar.google.com', className: 'gcal-event', displayEventEnd: true, },
    eventDataTransform: function(event) { event.url = ""; return event; },
    eventClick: function(info) { info.jsEvent.preventDefault(); }
  });
  calendar.render();
});

window.onload = function () {
  header();
  hamburger();
  parallax();
  flip();
  waypoint_init();
  waypoints();
  why();
};

function flip() {
  var card = document.getElementById('zw-card');
  card.classList.toggle('flip');
}


function header() {
  var $window = $(window),
  $smallHeader = $('.header-small'),
  smallHeaderShowing = false;
  function small_header() {
    var top = $window.scrollTop();
    if (top > 200 && !smallHeaderShowing) {
      $smallHeader.addClass('showing');
      smallHeaderShowing = true;
    }
    else if (top <= 200 && smallHeaderShowing) {
      $smallHeader.removeClass('showing');
      smallHeaderShowing = false;
    }
  };
  $window.on('scroll', function() {
    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 parallax() {
  var backgroundsvg = document.querySelector('#backgroundsvg');
  var backgroundsvg2 = document.querySelector('#backgroundsvg2');
  var backgroundsvg3 = document.querySelector('#backgroundsvg3');
  var xScrollPosition;
  var yScrollPosition;
  function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
  };
  function scrollLoop() {
    xScrollPosition = window.scrollX;
    yScrollPosition = window.scrollY;
    setTranslate(0, yScrollPosition * -0.2, backgroundsvg);
    setTranslate(0, yScrollPosition * -0.5, backgroundsvg2);
    setTranslate(0, yScrollPosition * -0.8, backgroundsvg3);
    requestAnimationFrame(scrollLoop);
  };
  scrollLoop();
  //window.addEventListener("DOMContentLoaded", scrollLoop, 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));
//    });
//  };
}