File: /var/www/vhosts/creativefellows.nl/comtel.creativefellows.nl/public/js/app.js
$(document).foundation().ready(function(){
// open external links in new window
$(document.links).filter(function() {
return this.hostname != window.location.hostname;
}).attr('target', '_blank');
$("div.lazy").Lazy({
effect: "fadeIn",
effectTime : 500,
enableThrottle: true,
throttle: 250,
afterLoad: function(){
}
});
$(".page-section__latest-news").browseNews();
$("#header").fixednav();
$(".top-bar-right a[data-dropdown-target]").sectionDropDown();
$(".lazy-load-image").Lazy({
effect: "fadeIn",
effectTime : 500,
enableThrottle: true,
throttle: 250,
afterLoad: function(){
}
});
// css background image load
$(".lazy-load").each(function(i, el) {
if ($(el).visible(true)) {
$(el).removeClass("lazy-load").addClass("fade-in");
}
});
$(window).scroll(function(event) {
$(".lazy-load").each(function(i, el){
if ($(el).visible(true)) {
$(el).removeClass("lazy-load").addClass("lazy-load-complete fade-in");
}
});
});
$('.page-section__flipping-cards, .page-section__resources').filterLayout();
$(".tabs-default").equalDevidedTabs();
$("#share-article").jsSocials({
showLabel: false,
showCount: false,
shares: ["linkedin","twitter", "facebook", "googleplus","email"]
});
// cookie accept
$('#acceptCookie').on("click",function(event)
{
event.preventDefault();
var link = $(this).attr("data-link")
$.ajax({
type: 'POST',
url: link,
complete: function(){
$("#accept-cookies").slideUp("fast");
}
});
});
// $("[data-showcase]").showCaseAnimation();
});
$.fn.showCaseAnimation = function(){
return this.each(function(){
var plugin = $(this);
var timer = null;
var current = 1;
var $cases = plugin.find("[data-slide]");
//var $bullets = plugin.find("button[data-slide]");
var count = $cases.length;
var $activeSlide = $cases.first();
var $lastSlide = $cases.last();
var $prevSlide = null;
var $class_showcase = null
plugin.settings = {
duration_in : 6000,
duration_out : 1000,
animation_out : "animate__animated animate__faster animate__backOutDown",
active_class : "case-slide__active"
}
plugin.init = function()
{
// hide all
$cases.hide();
// show first
$cases.eq(0).show().find("[data-animate]").addClass("animate__animated");
plugin.start()
}
plugin.start = function(){
// start animation on slide
plugin.animateActiveSlide();
// to next slide after X time
plugin.timer( plugin.animateActiveOut, plugin.getSetting("duration_in"));
}
// add active to element
plugin.animateActiveSlide = function()
{
$activeSlide.addClass( plugin.getSetting("active_class") );
}
plugin.animateActiveOut = function()
{
// clear timer
plugin.clearTimer();
// active out / next in
plugin.timer( plugin.animateActiveOutNextIn, plugin.getSetting("duration_out") );
//console.log("here");
}
plugin.animateActiveOutNextIn = function()
{
//plugin.addClass( $activeSlide.data("slide") );
// switch the slides
plugin.switchSlides();
$prevSlide.fadeOut(500);
$activeSlide.fadeIn(500).find("[data-animate]").addClass("animate__animated");
// reset prev_slide to original
plugin.resetSlide();
// start animation
setTimeout(function(){
// animation on $active
plugin.start();
},500);
}
plugin.resetSlide = function()
{
$prevSlide.removeClass( plugin.getSetting("active_class") );
$prevSlide.find("[data-animate]").removeClass("animate__animated");
}
plugin.switchSlides = function()
{
plugin.setActiveBullet();
$prevSlide = $activeSlide;
if($activeSlide.is($lastSlide)){
$activeSlide = $cases.first();
current = 1;
}
else $activeSlide = $cases.eq( plugin.getCounter() );
console.log(current);
}
plugin.setActiveBullet = function()
{
// reset class
//$bullets.removeClass("is-active");
//$bullets.eq(current).addClass("is-active");
}
// timer
plugin.timer = function(callback,duration)
{
timer = setTimeout(callback,duration);
}
// clear timer
plugin.clearTimer = function()
{
clearInterval(timer);
timer = null;
}
plugin.getCounter = function()
{
return current++;
}
// get setting
plugin.getSetting = function(setting)
{
return plugin.settings[setting];
}
// init the plugin
plugin.init();
});
}
/*
* tabs
*/
$.fn.equalDevidedTabs = function()
{
return this.each(function(){
var plugin = $(this);
var $links = plugin.find(".selector a")
var $tabs = plugin.find("> div");
//var $active = plugin.find(".button__active[data-filter]");
plugin.settings = {
active_class : "tab__active"
}
plugin.init = function()
{
$links.eq(0).addClass( plugin.settings.active_class );
$tabs.hide().eq(0).show();
$links.on("click",plugin.showTab);
}
plugin.showTab = function(event){
event.preventDefault();
plugin.setActiveTitle( $(this) );
$tabs.hide();
$tabs.filter( $(this).attr("href") ).show();
}
plugin.setActiveTitle = function($element){
$links.removeClass( plugin.settings.active_class );
$element.addClass( plugin.settings.active_class );
}
// init the plugin
plugin.init();
});
/*
$(this).find("ul.selector a").each( function() {
// get the href attribute
href = $(this).attr('href');
//console.log(href);
// does it have a href?
if (href) {
// does it have an internal anchor?
if (href.match(/#/i)) {
// append window.location and write back to the href Attribute
new_href = window.location + href;
$(this).attr('href', new_href);
}
}
});
//return;
$(this).tabs();
var ul = $(this).find(".selector");
var li_items = $(this).find(".selector li");
var lngth = li_items.size();
var toggler = $(this).find(".toggle-mobile");
var width = Math.floor(100 / lngth);
li_items.css('width', width + "%");
toggler.on("click",function(event)
{
if(toggler.hasClass("open")){
toggler.hide().removeClass("open");
}
else toggler.show().addClass("open");
toggler.html( "<ul>"+ ul.html() +"</ul>" );
});
*/
}
$.fn.filterLayout = function(){
return this.each(function(){
var plugin = $(this);
var $buttons = plugin.find(".button[data-filter]")
var $results = plugin.find("[data-results] [data-filter]");
var $active = plugin.find(".button__active[data-filter]");
plugin.settings = {
active_class : "button__active"
}
plugin.init = function()
{
if( plugin.hasFilters() ) return;
$buttons.on("click",plugin.filter);
plugin.filterResults( $active.data("filter") );
}
plugin.hasFilters = function()
{
return $buttons.length == 0 ? true : false;
}
plugin.filter = function(){
var filter = $(this).data("filter");
plugin.filterResults(filter);
plugin.setActive( $(this) );
}
plugin.filterResults = function(filter){
$results.hide();
$results.filter("[data-filter='"+ filter+"']").show();
}
plugin.setActive = function($button){
$buttons.removeClass(plugin.settings.active_class);
$button.addClass(plugin.settings.active_class);
}
// init the plugin
plugin.init();
});
}
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
/*
* toggle dropdown menu
*/
$.fn.sectionDropDown = function()
{
return this.each(function(){
// target dropdown
var plugin = $(this);
var target = $(this).data("dropdown-target");
var links = plugin.closest("ul").find("a");
var shadeout;
var nav_copied = false;
plugin.setting = {
hiddenClass : "dropdown-section__hidden"
}
plugin.init = function()
{
// if no target return;
if($("#"+target).length == 0 ) return;
$(this).click( plugin.click );
}
plugin.copyDropdownHeader = function()
{
nav_copied = true;
plugin.copyDropdown();
}
plugin.click = function(event){
// stop click
event.preventDefault();
// create shade
plugin.shadeOut();
// make element active
plugin.closedActive();
// dropdowns
plugin.hideVisibleDropdowns();
// copy nav
if(!nav_copied) plugin.copyDropdownHeader();
// dropdown is closed
if( $("#"+target).hasClass(plugin.setting.hiddenClass) ){
// show dropdown
$("#"+target).hide().removeClass(plugin.setting.hiddenClass).slideToggle("");
// show shade-out
if( !shadeout.hasClass("is-clicked") ) shadeout.addClass("is-clicked").hide().removeClass("shade-out__hidden").fadeIn("fast");
// close link
var close_drpdown = $("#"+target).find(".close-dropdown");
// close dropdown
close_drpdown.one("click",function(event)
{
event.preventDefault();
$(".shade-out").removeClass("is-clicked").addClass("shade-out__hidden").fadeOut("fast");
$(".dropdown-section").addClass(plugin.setting.hiddenClass);
links.removeClass("link__dropdown-open");
});
}
else
{
$(this).removeClass("selected-dropdown");
// hide dropdown
$("#"+target).addClass(plugin.setting.hiddenClass);
$(".shade-out").addClass("shade-out__hidden");
links.removeClass("link__dropdown-open");
}
}
// hide other dropdowns
plugin.hideVisibleDropdowns = function()
{
$('.dropdown-section:not(.'+ plugin.setting.hiddenClass +')').addClass(plugin.setting.hiddenClass);
}
// toggle selected dropdown class
plugin.closedActive = function()
{
links.removeClass("link__dropdown-open");
plugin.addClass("link__dropdown-open");
}
// check shadeout exists
plugin.shadeOut = function(){
if( $(".shade-out").length == 0 )
{
shadeout = $('<div class="shade-out"></div>');
shadeout.insertAfter("#header");
}
else shadeout = $(".shade-out");
// close shade on click
plugin.closeShadeOut();
}
// hide shadeout
plugin.closeShadeOut = function()
{
shadeout.click(function(event)
{
$(".shade-out").removeClass("is-clicked").addClass("shade-out__hidden").fadeOut("fast");
$(".dropdown-section").addClass(plugin.setting.hiddenClass);
});
}
// init the plugin
plugin.init();
});
}
/*
* Copy Dropdown into header
*/
$.fn.copyDropdown = function(){
return this.each(function(){
// target dropdown
var plugin = $(this);
var target = plugin.data("dropdown-target");
var dropdown= $("#"+target);
var copied = false;
plugin.init = function(){
var headers = dropdown.find(".column-header");
var ul = $('<ul class="navigation-list navigation-list__sub-items">');
headers.each(function(){
// header
var li = $("<li>").html("<strong>"+ $(this).text() +"</strong>");
ul.append(li);
li.find("strong").click(function(){
// close currently opened
$(this).closest("ul").find("strong").not(this).removeClass("page-links__open");
// open
$(this).toggleClass("page-links__open");
});
//group
var sub_ul = $('<ul class="navigation-list navigation-list__page-links">');
li.append(sub_ul);
//links
var links = $(this).closest(".column").find(".group-list li");
links.each(function(){
var li = $("<li>").html($(this).html());
sub_ul.append(li);
});
});
plugin.after(ul);
setTimeout(function(){
plugin.addClass("page-links__open");
},100);
$(this).on("click",plugin.toggleOpen );
}
plugin.toggleOpen = function()
{
// close currently open
$(this).closest("ul").find("a.toplevel").not( plugin ).removeClass("page-links__open");
// open clicked
$(this).toggleClass("page-links__open");
}
plugin.init();
}
)};
$.fn.fixednav = function(){
var shrinkHeader = 100;
$("#header .toggle-menu").click(function(event){
$("#header").toggleClass("header__navigation-open");
});
$(window).scroll(function() {
var scroll = getCurrentScroll();
if(scroll >= shrinkHeader)
{
$('#header').addClass('header__has-scrolled');
}
else
{
$('#header').removeClass('header__has-scrolled');
}
});
function getCurrentScroll() {
return window.pageYOffset;
}
function checkScrollPosition(){
var scroll = getCurrentScroll();
if(scroll >= shrinkHeader)
{
$('#header').addClass('header__has-scrolled');
}
}
checkScrollPosition();
}
$.fn.browseNews = function(){
return this.each(function(){
var plugin = $(this);
var $ul = plugin.find("ul");
var $items = plugin.find("li");
var total = $items.length;
var counter = 0;
var current_item = $items[counter];
var next_item = $items[counter+1];
var timer = null;
var $dots;
plugin.settings = {
timer : null,
duration : 4000,
effectspeed : 500
}
plugin.init = function()
{
$items.hide().first().show();
plugin.createDots();
plugin.timer();
}
plugin.timer = function()
{
$dots.removeClass("active");
$($dots[counter]).addClass("active");
timer = setTimeout(plugin.showItem,plugin.settings.duration);
}
plugin.showItem = function()
{
$(current_item).fadeOut(plugin.settings.effectspeed);
$(next_item).fadeIn(plugin.settings.effectspeed);
counter++;
if(counter == total) counter = 0;
setTimeout(function(){
current_item = next_item;
next_item = $items[counter];
plugin.timer();
},plugin.settings.effectspeed)
}
plugin.clickDot = function()
{
var id = $(this).attr("data-position");
$dots.removeClass("active");
$(this).addClass("active");
clearInterval(timer);
$(current_item).fadeOut(plugin.settings.effectspeed);
$($items[id]).fadeIn(plugin.settings.effectspeed);
current_item = $items[id];
}
plugin.createDots = function()
{
var wrapper = $("<div>").addClass("dots");
for (i = 0; i < total; i++){
var li = $('<span data-position="'+ i +'"></span>');
wrapper.append(li);
}
$ul.after(wrapper);
$dots = plugin.find(".dots span");
$dots.click(plugin.clickDot);
}
plugin.init();
});
}