index.html with templates

functions-of-the-beast.js

// -------------------------------------------------------
// -------------------------------------------------------
//
// 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 $news = $('#news');

	// Compile the news template
	var template = _.template(
		$('#news-template').html()
	);

	// Render the underscore template and inject it into <div id="news'> placeholder
	$news.html(template(RA.Data.news));

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

});

index.html

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js oldie lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js oldie lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js oldie lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <title>RONIIT</title>
  <meta charset="utf-8" />
  <meta name="description" content="American dark electro-pop artist. Includes biography, discography, tour schedule, gallery, and more." />
  <meta name="keywords" content="roniit, ronit, alkayam, dark, pop, musician, artist, electronic, electro, electric, band, female, vocals, synth, goth, evil, denver, colorado, independent, solo" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <meta property="og:title" content="RONIIT" />
  <meta property="og:url" content="http://roniit.com" />
  <meta property="og:description" content="American dark electro-pop artist. Includes biography, discography, tour schedule, gallery, and more." />
  <meta property="og:image" content="http://www.roniit.com/images/og-roniit.jpg" />

  <link rel="icon" type="image/png" href="favicon.png" />
  <link rel="stylesheet" type="text/css" href="unholy-styles.css" />
  <script type="text/javascript" src="js/modernizr.js"></script>

  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36021022-1']);
    _gaq.push(['_setDomainName', 'roniit.com']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
</head>
<body>


<div id="pre-loader">
  <div class="cuts" id="left-cut"></div>
  <div class="cuts" id="right-cut"></div>

  <div id="spinner-wrapper">
    <div id="spinner"></div>
    <h4>Loading</h4>
  </div>
</div>

<nav>
  <ul>
    <li class="nav-link" data-section="main">I. Main</li>
    <li class="nav-link" data-section="about">II. About</li>
    <li class="nav-link" data-section="news">III. News</li>
    <li class="nav-link" data-section="tour">IV. Tour</li>
    <li class="nav-link" data-section="gallery">V. Gallery</li>
    <li class="nav-link" data-section="connect">VI. Connect</li>
    <li><a href="http://bandcamp.roniit.com/merch" target="_blank">VII. Merch</a></li>
    <li class="socials" id="fb"><a href="http://facebook.com/roniitmusic" target="_blank"></a></li>
    <li class="socials" id="tw"><a href="http://twitter.com/roniitmusic" target="_blank"></a></li>
    <li class="socials" id="yt"><a href="http://youtube.com/user/roniitmusic" target="_blank"></a></li>
  </ul>
  <h1>Roniit</h1>
</nav>

<div id="wrapper">
  <section id="main-section">
    <div id="feature-slides">
      <div class="feature-slide" id="fs-video">
        <div class="media"><img src="images/main-section/roniit-runaway.jpg" alt="" /></div>
        <div class="callout">
          <p>"RUNAWAY"</p>
          <p>New Single From Roniit Featured in "The Loft" trailer.</p>
        </div>
        <div id="feature-play-btn" class="hidden"></div>
      </div>
      <div class="feature-slide">
        <div class="media"><img src="images/main-section/roniit-feature.jpg" alt="" /></div>
        <div class="callout">
          <p>"In The Shadows"</p>
          <p>EP</p>
        </div>
        <a id="buy-now-btn" href="http://bandcamp.roniit.com/album/in-the-shadows-ep" target="_blank">Listen / Buy</a>
      </div>
    </div>
    <div id="timer-strip">
      <div class="panel">
        <div class="strip"><span class="bar"></span></div>
      </div>
      <div class="panel">
        <div class="strip"><span class="bar"></span></div>
      </div>
    </div>
    <div id="legal-stuff">&copy; Roniit. All Rights reserved.</div>
    <div id="video-screen"></div>
  </section>

  <section id="about-section">
    <div class="media"><img src="images/full-screen/about-bg.jpg" alt="" /></div>
    <div class="section-outer">
      <div class="section-inner">
        <div class="section-content">
          <h2>About</h2>
          <p>Roniit is an independent Dark Pop artist, songwriter, and vocalist from the mountains of Colorado. Her self titled debut album was released in June of 2011 to positive reviews from fans and blogs. With her dark and unique sound Roniit has captured attention locally and worldwide. &ldquo;Every once in awhile, there is an album that comes along that totally blows you away. Roniit&rsquo;s self titled release is one such album...&rdquo; - Migrate Music News. </p>
          <p>This album led to several vocal collaborations with EDM producers around the world, as well as a three month tour of the United States. After graduating from The University of Colorado’s music business school in 2012 Roniit released her “In The Shadows” EP and debut music video for “Lost At Sea”. </p>
          <p>Roniit is currently residing in Los Angeles and most recently landed a major placement for her track “Runaway” (produced by Varien) in the movie trailer for “The Loft”.  Hear new music from Roniit in 2015. </p>
        </div>
      </div>
    </div>
  </section>

  <section id="news-section">
    <div class="media"><img src="images/full-screen/discography-bg.jpg" alt="" /></div>
    <div class="section-outer">
      <div class="section-inner">
        <div class="section-content">
          <h2>News</h2>
          <div id="news">
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="tour-section">
  </section>

  <section id="gallery-section">
    <div id="photo-gallery">
      <div class="photo"><div class="media"><img src="images/full-screen/01.jpg" alt="" /></div></div>
      <div class="photo"><div class="media"><img src="images/full-screen/07.jpg" alt="" /></div></div>
      <div class="photo"><div class="media"><img src="images/full-screen/11.jpg" alt="" /></div></div>
      <div class="photo dbl"><div class="media"><img src="images/full-screen/06-m.jpg" alt="" /><img src="images/full-screen/06.jpg" alt="" /></div></div>
      <div class="photo dbl"><div class="media"><img src="images/full-screen/09-m.jpg" alt="" /><img src="images/full-screen/09.jpg" alt="" /></div></div>
      <div class="photo"><div class="media"><img src="images/full-screen/04.jpg" alt="" /></div></div>
      <div class="photo"><div class="media"><img src="images/full-screen/02.jpg" alt="" /></div></div>
      <div class="photo dbl"><div class="media"><img src="images/full-screen/08-m.jpg" alt="" /><img src="images/full-screen/08.jpg" alt="" /></div></div>
      <div class="photo"><div class="media"><img src="images/full-screen/10.jpg" alt="" /></div></div>
      <div class="photo"><div class="media"><img src="images/full-screen/05.jpg" alt="" /></div></div>
      <div class="photo"><div class="media"><img src="images/full-screen/03.jpg" alt="" /></div></div>
    </div>
    <span class="arrow" id="prev-arrow"></span>
    <span class="arrow" id="next-arrow"></span>
  </section>

  <section id="connect-section">
    <div class="media"><img src="images/full-screen/connect-bg.jpg" alt="" /></div>
    <div class="section-outer">
      <div class="section-inner">
        <div class="section-content">
          <h2>Connect</h2>
          <p>For booking and general inquiries,<br />please contact Roniit at:</p>
          <a href="mailto:RA@roniit.com">RA@roniit.com</a>
          <div class="divider"></div>
          <p>Connect with Roniit on:</p>
          <ul>
            <li><a href="http://roniit.tumblr.com" target="_blank">Tumblr</a></li>
            <li><a href="http://facebook.com/roniitmusic" target="_blank">Facebook</a></li>
            <li><a href="http://twitter.com/roniitmusic" target="_blank">Twitter</a></li>
            <li><a href="http://soundcloud.com/roniitmusic" target="_blank">SoundCloud</a></li>
            <li><a href="http://youtube.com/user/roniitmusic" target="_blank">YouTube</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</div>

<div id="old-browsers">
  <div id="message">
    <p>This site is running on modern HTML5 technologies more <a href="http://www.youtube.com/watch?v=qYVUlig-WzU" target="_blank">powerful</a> then Mark's V6 Camry!<br/>Please upgrade to one of the following:</p>
    <a href="http://www.google.com/chrome" target="_blank">Chrome /</a><a href="http://www.apple.com/safari/" target="_blank"> Safari </a><a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">/ Firefox</a>
  </div>
</div>

<script type="text/template" id="news-template">
  <% _.each(news, function(newsItem) { %>
    <div class="item">
      <a href="<%= newsItem.url %>">
        <div class="overlay"></div>
        <img src="<%= newsItem.image %>">
        <h3 class="title"><%= newsItem.title %></h3>
        <div class="desc"><%= newsItem.description %></div>
      </a>
    </div>
  <% }); %>
</script>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>

<script type="text/javascript" src="js/application.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/news.js"></script>
<script type='text/javascript' src="js/function-of-the-beast.js"></script>

</body>
</html>

news.js

RA.Data.news = {
  news: [
    {
      url: '#',
      image: 'http://www.roniit.com/images/news-section/loft.jpg',
      title: 'The Loft Trailer',
      description: 'Roniit\'s new single "Runaway" is featured in the theatrical trailer for "The Loft" featuring Karl Urban and James Marsden - coming to theaters January 2015.'
    },
    {
      url: '#',
      image: 'https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xap1/t31.0-8/p720x720/10861081_973093622718743_1843674436316934981_o.jpg',
      title: 'New Poster',
      description: 'Brand new poster available now in my online store. Get it now for $6.66. Comes with free download of "Runaway"'
    },
    {
      url: '#',
      image: 'http://www.roniit.com/images/news-section/darkbeauty.jpg',
      title: 'Interview in Dark Beaty Magazine',
      description: 'Read Roniit\'s interview in the December 2014 Issue 39 of Dark Beauty Magazine.'
    },
    {
      url: '#',
      image: 'http://www.roniit.com/images/news-section/thesurface.jpg',
      title: 'Roniit x Trivecta Collaboration',
      description: 'Roniit and Trivecta\'s new collaboration "The Surface" premieres on EDM.com'
    },
    {
      url: '#',
      image: 'http://www.roniit.com/images/news-section/lana.jpg',
      title: '"Young & Beautiful" Cover',
      description: 'Check out Roniit\'s new cover song and video of Lana Del Rey\'s "Young & Beautiful"'
    },
    {
      url: '#',
      image: 'http://www.roniit.com/images/news-section/bluebirdposter.jpg',
      title: 'Headlining Bluebird Theater',
      description: 'Roniit will be headlining The Bluebird Theater on August 3, 2013. Tickets are available now!'
    },
    {
      url: '#',
      image: 'http://www.roniit.com/images/news-section/lostvideo.jpg',
      title: 'Debut Music Video "Lost At Sea"',
      description: 'Roniit\'s debut music video for "Lost At Sea" is available now!'
    },
    {
      url: '#',
      image: 'http://www.roniit.com/images/discography-section/in-the-shadows.jpg',
      title: 'In The Shadows EP available now',
      description: 'Roniit\'s "In The Shadows" EP is now available on iTunes, Spotify, Amazon, Bandcamp and more stores worldwide.'
    },
    {
      url: '#',
      image: 'http://www.roniit.com/images/news-section/tourposter.jpg',
      title: 'Now or Never Tour 2012',
      description: 'Tour dates announced for the "Now or Never" tour! Check the Tour section for more details!'
    }
  ]
};