Skip to content

Instantly share code, notes, and snippets.

@sahat
Created December 16, 2014 09:45
Show Gist options
  • Save sahat/1789832c06403113102c to your computer and use it in GitHub Desktop.
Save sahat/1789832c06403113102c to your computer and use it in GitHub Desktop.
roniit
// -------------------------------------------------------
// -------------------------------------------------------
//
// Copyright © Keith Driessen.
//
// RUNNIN' WITH THE DEVIL SINCE 1985!
// http://madebygrave.com
// -------------------------------------------------------
// -------------------------------------------------------
$(document).ready(function() {
var $doc = $(document),
$win = $(window),
$preloader = $('#pre-loader'),
$cuts = $('.cuts', $preloader),
$nav = $('nav'),
$nav_bar = $('h1', $nav),
$nav_link = $('.nav-link', $nav),
$wrapper = $('#wrapper'),
$section = $('section', $wrapper),
$tour = $('#tour-section');
// -----------------------------------------------------
// APPEND DATA TO THE DOM AND SET VARS
// -----------------------------------------------------
// $tour.append(RA.Templates['section-tour'](RA.Data.tour));
var $media = $('.media', $wrapper),
$main = $('#main-section'),
$features = $('#feature-slides', $main),
$feature = $('.feature-slide', $features),
$timer_strip = $('#timer-strip', $main),
$panel = $('.panel', $timer_strip),
$bar = $('.bar', $timer_strip),
$play_video = $('#feature-play-btn', $main),
$video = $('#video-screen', $main),
$tour_item = $('.tour-item', $tour),
$toggle = $('.toggle', $tour),
$upcoming = $('#upcoming-shows'),
$past = $('#past-shows'),
$gallery = $('#photo-gallery'),
$photo = $('.photo', $gallery),
$dbls = $('.dbl', $gallery),
$prev_btn = $('#prev-arrow'),
$next_btn = $('#next-arrow'),
ww,
wh,
old_ww = $win.width(),
inmotion,
timer,
i = 0,
ratio = 5 / 8,
slideshow = false,
max = $feature.length,
total_photos = $photo.length;
// -----------------------------------------------------
// SET ACTIVE/CURRENT STATES
// -----------------------------------------------------
// Nav
$main.addClass('active');
$('ul li', $nav).first().addClass('active');
// Slideshow
$feature.first().addClass('active');
$panel.first().addClass('current');
// Gallery
$photo.first().addClass('active').css('left', '0%');
// -----------------------------------------------------
// FEATURE SLIDESHOW
// -----------------------------------------------------
function _featureSlideshow() {
i = $('.panel.current', $timer_strip).index();
slideshow = true;
function _nextFeatureSlide() {
var $p = $panel.eq(i),
$b = $('.bar', $p),
$active = $('.active', $features);
$panel.removeClass('current');
$panel.eq(i).addClass('current');
$active.removeClass('active').addClass('old-active');
$feature.eq(i).addClass('active');
$b.removeClass('reset').css('width', '0%').stop().animate({width: '100%'}, 6666, 'linear', function() {
$(this).css('width', '0%').addClass('reset');
});
setTimeout(function() {
$active.removeClass('old-active');
}, 1000);
i++;
if(i === max) i = 0;
};
timer = setInterval(_nextFeatureSlide, 6666);
_nextFeatureSlide();
};
function _stopFeatureSlideshow() {
clearInterval(timer);
slideshow = false;
$bar.stop(true, false).css('width', '0%').addClass('reset')
};
function _toggleSlides() {
var $t = $(this);
if($t.hasClass('current')) {
return false;
} else {
$panel.off('click', _toggleSlides);
$panel.removeClass('current');
$t.addClass('current');
_stopFeatureSlideshow();
_featureSlideshow();
setTimeout(function() {
$panel.on('click', _toggleSlides);
}, 1000);
}
};
$panel.on('click', _toggleSlides);
// -----------------------------------------------------
// FEATURE VIDEO
// -----------------------------------------------------
function _playVideo() {
var $vid = '<div id="video-box"><iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/3rwK2dDd3rg?autoplay=1&controls=0&enablejsapi=1&rel=0&showinfo=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></div><div id="xxx"></div>'
$video.append($vid).fadeIn(666, function() {
$('#ytplayer').css('top','0%');
});
};
function _removeFeatureVideo() {
$video.empty().fadeOut(666, function() {
if($main.hasClass('active')) _featureSlideshow();
});
};
$play_video.on('click', function() {
_stopFeatureSlideshow();
_playVideo();
});
$video.on('click', '#xxx', _removeFeatureVideo);
// -----------------------------------------------------
// MENU EXPAND / COLLAPSE
// -----------------------------------------------------
function _toggleMenu() {
if(ww < 768) {
if(!$nav.hasClass('expanded')) $nav.addClass('expanded');
else $nav.removeClass('expanded');
}
};
// -----------------------------------------------------
// UPDATE SECTION
// -----------------------------------------------------
function _updateSection() {
if(inmotion) return false;
else inmotion = true;
var $t = $(this),
section = $t.data('section'),
$target = $('#' + section + '-section'),
$active = $('section.active');
if(!$t.hasClass('active')) {
if(section !== 'main' && slideshow === true) _stopFeatureSlideshow();
$nav_link.removeClass('active');
$t.addClass('active');
$active.removeClass('active').addClass('old-active');
$target.addClass('active');
if(section === 'gallery') $doc.on('keyup', _keyboardControls)
else $doc.off('keyup');
setTimeout(function() {
$active.removeClass('old-active');
if(section !== 'main' && $('#ytplayer', $video).length > 0) _removeFeatureVideo();
if(section === 'main' && slideshow === false) _featureSlideshow();
inmotion = false;
}, 1000);
} else {
inmotion = false;
}
if($nav.hasClass('expanded')) $nav.removeClass('expanded');
};
// -----------------------------------------------------
// TOUR DATES SORTER
// -----------------------------------------------------
function _compareTourDates() {
var now = new Date(),
today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
upcoming_arr = [],
past_arr = [];
$tour_item.each(function() {
var $t = $(this),
tour_date = $('.tour-date .td', $t).text(),
parts = tour_date.split('.');
tour_date = new Date(parts[2], parts[0] - 1, parts[1]);
if(tour_date < today) past_arr.push($t);
else upcoming_arr.push($t);
});
$upcoming.empty().append(upcoming_arr);
$past.empty().append(past_arr);
$past.find('.tour-details, .expand-icon').remove();
$past.find('.toggle').removeClass('toggle');
if($upcoming.children().length < 1) $upcoming.append('<p>No shows at this time...</p>');
};
_compareTourDates();
// -----------------------------------------------------
// TOUR INFO TOGGLE
// -----------------------------------------------------
function _toggleTourInfo() {
var $t = $(this),
$s = $t.siblings();
if($s.hasClass('expanded')) {
$s.removeClass('expanded').css('height', '0px');
} else {
var new_ht = $s.removeClass('expanded').css('height','auto').height();
$s.addClass('expanded').css('height', new_ht + 'px');
}
};
// -----------------------------------------------------
// GALLERY
// -----------------------------------------------------
function _previousPhoto() {
if(inmotion) return false;
else inmotion = true;
var $active_photo = $('.photo.active', $gallery),
$prev_photo = $active_photo.prev();
if($prev_photo.length === 0) {
$gallery.stop().animate({'margin-left': '40px'}, 200, function() {
$gallery.stop().animate({'margin-left': '0px'}, 200, function() {
inmotion = false;
});
});
} else {
$active_photo.removeClass('active').css('left', '0%').stop().animate({left: '100%'}, 666);
$prev_photo.addClass('active').css('left', '-100%').stop().animate({left: '0%'}, 666, function() {
inmotion = false;
});
}
};
function _nextPhoto() {
if(inmotion) return false;
else inmotion = true;
var $active_photo = $('.photo.active', $gallery),
$next_photo = $active_photo.next();
if($next_photo.length === 0) {
$gallery.stop().animate({'margin-left': '-40px'}, 200, function() {
$gallery.stop().animate({'margin-left': '0px'}, 200, function() {
inmotion = false;
});
});
} else {
$active_photo.removeClass('active').css('left', '0%').stop().animate({left: '-100%'}, 666);
$next_photo.addClass('active').css('left', '100%').stop().animate({left: '0%'}, 666, function() {
inmotion = false;
});
}
};
function _keyboardControls(e) {
if(e.keyCode === 39) _nextPhoto();
if(e.keyCode === 37) _previousPhoto();
}
// -----------------------------------------------------
// TOUCH EVENTS
// -----------------------------------------------------
// Nav
$nav_bar.on('click', _toggleMenu);
$nav_link.on('click', _updateSection);
$('h1', $nav).on('click', function() {
if(ww >= 768) $nav_link.first().trigger('click');
});
$wrapper.on('click', function() {
if(ww < 768) {
if($nav.hasClass('expanded')) $nav.removeClass('expanded');
}
});
// Tour
$toggle.on('click', _toggleTourInfo);
// Gallery
$prev_btn.on('click', _previousPhoto);
$next_btn.on('click', _nextPhoto);
// -----------------------------------------------------
// WINDOW EVENTS
// -----------------------------------------------------
function _resizeMedia() {
if ((wh / ww) > ratio) {
$media.height(wh);
$media.width(wh / ratio);
} else {
$media.width(ww);
$media.height(ww * ratio);
};
$media.css('left', (ww - $media.width()) / 2);
$media.css('top', (wh - $media.height()) / 2);
};
function _totallyLoaded() {
$('#spinner-wrapper').addClass('loaded');
$cuts.addClass('slice');
setTimeout(function() {
$preloader.remove();
$nav.css('top', '0px');
$('.callout', $main).addClass('called');
$play_video.removeClass('hidden');
_featureSlideshow();
}, 800);
};
$win.load(function() {
setTimeout(_totallyLoaded, 2000);
}).resize(function() {
ww = $win.width();
wh = $win.height();
if(ww >= 768 && $nav.hasClass('expanded')) $nav.removeClass('expanded');
_resizeMedia();
}).trigger('resize');
// -----------------------------------------------------
// NEWS GRID
// -----------------------------------------------------
var $container = $('#news');
// Wait for images to load
$container.imagesLoaded( function() {
// Initialize Masonry grid
$container.masonry({
columnWidth: 230,
itemSelector: '.item',
gutter: 25
});
// Set dark hover effect to be the same height as an image itself
var elems = $container.masonry('getItemElements');
$(elems).find('img').each(function(index, item) {
$(item).siblings('.overlay').height(item.height);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment