eidolon/static/js/init.js

/*
	Parallelism by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

var parallelism = (function($) { var _ = {

	/******************************/
	/* Properties                 */
	/******************************/

		// Settings
			settings: {

				// Popup overlay color.
					popupOverlayColor: '#1a1f2c',
				
				// Popup overlay opacity.
					popupOverlayOpacity: 0.75,

				// Mobile only.
				
					// If true, mobile mode will get some automatic styling.
						autoStyleMobile: true,
				
				// Desktop only.
					
					// If true, reel will be vertically centered.
						centerVertically: true,
					
					// Delay (in ms) before showing the reel.
						introDelay: 600,		
						
					// Speed (in ms) at which to fade in reel.
						introSpeed: 750,
					
					// Height (in px) of items.
						itemHeight: 240,

					// Default width (in px) of width.
						itemWidth: 300,
						
					// Margin (in px) to preserve at the bottom of the viewport.
						marginBottom: 0,
						
					// Margin (in px) to preserve at the top of the viewport.
						marginTop: 0,
					
					// Nudge the reel by this value (in px) after it's been vertically centered.
						verticalNudge: 60,
						
					// Maximum number of rows.
						maxRows: 5,
						
					// Minimum number of rows.
						minRows: 1,
						
					// Padding (in px) between items (0 = no padding).
						padding: 5,
						
					// Padding color.
						paddingColor: '#fff',
						
					// If true, reel scroll will reset on page refresh.
						resetScroll: true,
						
					// Scales the scroll delta (1 = normal, 2 = double, 0.5 = half, etc.).
						scrollFactor: 1,
						
					// Scroll amount when using keys.
						scrollKeyAmount: 50,
						
					// Determines where scrollwheel events should be captured ('window' or 'reel').
						scrollWheelTarget: 'window',
						
					// Scroll amount when using scroll zones.
						scrollZoneAmount: 10,	
						
					// Time (in ms) to wait between scrolls when the cursor is in a scroll zone.
						scrollZoneDelay: 20,
						
					// Width of scroll zones.
						scrollZoneWidth: 40,
						
					// Delay (in ms) before showing thumbnails.
						thumbDelay: 1200,
						
					// Spread (in ms) to randomly stagger thumbnails (0 = don't stagger).
						thumbDelaySpread: 1500,
						
					// Speed (in ms) at which to fade in thumbnails.
						thumbSpeed: 750,
						
					// If true, page will blur slightly when the popup is displayed (webkit only).
						useBlurFilter: false,
						
					// If true, the left/right arrow keys will scroll the reel.
						useScrollKeys: true,
						
					// If true, moving the cursor to the leftmost/rightmost edges of the reel will scroll it.
						useScrollZones: true

			},
		
		// Touch device?
			isTouch: false,
		
		// IE version.
			IEVersion: 99,
		
		// Object cache.
			objects: {},

	/******************************/
	/* Methods                    */
	/******************************/

		// Initializes desktop mode.
			initDesktop: function() {

				var $SZ = $(''), $SZLeft, $SZRight;
					
				var	windowHeight = _.objects.window.height() - _.settings.marginTop - _.settings.marginBottom,
					windowWidth = _.objects.window.width(),
					itemHeight = _.settings.itemHeight,
					itemCount = _.objects.items.length,
					itemsWidth = 0,
					rows = 0,
					rowWidth,
					SZIntervalId;
				
				// Window.
					_.objects.window._parallelism_update = function() {
						var i, j, x, y, t;
console.log(itemsWidth,itemHeight)

						// Calculate number of rows we can fit on the screen.
							rows = Math.min(Math.max(Math.floor(windowHeight / itemHeight) - 1, 1), _.settings.maxRows);

						// Reduce row count if we have more than we need.
							while ( rows > _.settings.minRows && (itemsWidth / rows) < windowWidth )
								rows--;

						// Get average row width.
							rowWidth = Math.ceil( (itemsWidth / rows) * 1.1 );

						// Resize items.
							var w = 0, iw;
							var rowStart = 0, rowPos = 0, rowEnded = false;
							
							_.objects.items.each(function(i) {
								var $item = $(this);
								
								iw = $item.data('width');
								
								// Determine end row conditions.
									
									// Current item would push us past the row width.
										if (w + iw >= rowWidth) {
											
											rowEnded = true;
											rowEnd = i - 1;
										
										}
									
									// Current item is the last item.
										else if (i + 1 >= itemCount) {
											
											w += iw;
											rowEnded = true;
											rowEnd = i;
										
										}
								
								// Did the row end?
									if (rowEnded) {
										
										var pt = 0;
										
										// Rescale the row's items.
											_.objects.items.slice(rowStart, rowEnd + 1).each(function(j) {
												var $item = $(this);
												var p = (($item.data('width') / w) * 100.00);
												
												if (pt + p > 100.00
												||	( (rowStart + j) == rowEnd && pt + p < 100.00))
													 p = 100.00 - pt;

												$item.css('width', p + '%');
												pt += p;
												
											});
										
										w = 0;
										rowStart = i;
										rowPos++;
										rowEnded = false;
									
									}
								
								w += iw;
							
							});

						// Resize reel.
							_.objects.reel
								.css('height', (itemHeight * rows) + (_.settings.padding * 2))
								.css('width', rowWidth);
						
						// Reposition main (if applicable).
							_.objects.main
								.css('height', (itemHeight * rows) + (_.settings.padding * 2));
						
							if (_.settings.centerVertically)
								_.objects.main
									.css('top', '50%')
									.css('margin-top', (-1 * (_.objects.main.outerHeight() / 2)) + _.settings.verticalNudge);

						// Resize/reposition SZs.
							window.setTimeout(function() {	
								
								$SZ
									.css('height', _.objects.main.outerHeight())
									.css('top', _.objects.main.offset().top);
							
							}, _.settings.introDelay);
					
					};

					_.objects.window.resize(function() {
						
						// Update window dimensions.
							windowWidth = _.objects.window.width();
							windowHeight = _.objects.window.height() - _.settings.marginTop - _.settings.marginBottom;
					
						// Row count changed? Re-update.
							if (Math.max(Math.floor(windowHeight / itemHeight) - 1, 1) != rows)
								_.objects.window._parallelism_update();

						// Update scroll zones.
							$SZ._parallelism_update();
					
					});
					
				// Reel.
					_.objects.reel
						.css('overflow-y', 'hidden')
						.css('margin', '0 auto')
						.css('border', 'solid ' + _.settings.padding + 'px ' + _.settings.paddingColor)
						.css('box-shadow', '0 0 0 ' + _.settings.padding + 'px ' + _.settings.paddingColor);

					if (_.IEVersion < 9)
						_.objects.reel.show();
					else if (_.IEVersion < 10) {
						
						_.objects.reel.fadeTo(0,0.0001);

						window.setTimeout(function() {
							_.objects.reel.fadeTo(_.settings.introSpeed, 1);
						}, _.settings.introDelay);
					
					}
					else {
						
						_.objects.reel.css('opacity', 0);

						window.setTimeout(function() {
							_.objects.reel
								.h5u_xcss('transition', 'opacity ' + (_.settings.introSpeed / 1000.00) + 's ease-in-out')
								.css('opacity', 1);
						}, _.settings.introDelay);
					
					}

				// Items.
					_.objects.items
						.css('box-shadow', '0px 0px 0px ' + _.settings.padding + 'px ' + _.settings.paddingColor)
						.css('border', 'solid ' + _.settings.padding + 'px ' + _.settings.paddingColor);
					
					_.objects.items.each(function(i) {
						
						var	$item = $(this), $img = $item.find('img');
						var w, h;

						w = parseInt($item.data('width'));
						
						if (!w)
							w = _.settings.itemWidth;

						h = parseInt($item.data('height'));

                                                if (!h)
							h = _.settings.itemHeight;
					
						// Add to total width.
							itemsWidth += w;

						// Item.
							$item
								.css('position', 'relative')
								.css('width', w)
								.css('height', h);
						
						// Image?
							if ($img.length > 0) {
								
								var $itemInner, $h2;
								
								// img.
									$img
										.css('position', 'absolute')
										.css('width', '100%')
										.css('height', 'auto')
										.css('min-height', '100%')
										.css('top', 0)
										.css('left', 0)
										.attr('title', $item.text());

								// inner (for fade effect).
									$item.wrapInner('<div class="inner" />');
									$itemInner = $item.children('.inner');
									$itemInner
										.css('position', 'relative')
										.css('display', 'block')
										.css('-webkit-backface-visibility', 'hidden')
										.css('width', '100%')
										.css('height', '100%');
										
									if (_.IEVersion < 9)
										$itemInner.show();
									else if (_.IEVersion < 10) {
										
										$itemInner.hide();
										
										$img
											.load(function() {
												window.setTimeout(function() {
													$itemInner.fadeIn(_.settings.thumbSpeed);
												}, _.settings.thumbDelay + Math.floor(Math.random() * _.settings.thumbDelaySpread));
											});
									
									}
									else {
										
										$itemInner.css('opacity', 0);
										
										$img
											.load(function() {
												$itemInner.h5u_xcss('transition', 'opacity ' + (_.settings.thumbSpeed / 1000.00) + 's ease-in-out');
												
												window.setTimeout(function() {
													$itemInner.css('opacity', 1);
												}, _.settings.thumbDelay + Math.floor(Math.random() * _.settings.thumbDelaySpread));
											});
									
									}
									
									$img.attr('src', $img.attr('src'));
							
							}
					
					});

				// Main.
					if (_.isTouch)
						_.objects.main
							.css('overflow-x', 'auto')
							.css('overflow-y', 'hidden')
							.h5u_xcss('overflow-scrolling', 'touch');
					else
						_.objects.main.css('overflow', 'hidden');
				
				// Scrolling.

					// Scroll Wheel.

						if (_.IEVersion < 9)
							_.objects.main.css('overflow-x', 'scroll');
						else {
							
							var scrollHandler = function(e) {
								var	delta = (e.detail ? e.detail * -10 : e.wheelDelta) * _.settings.scrollFactor;
								_.objects.main.scrollLeft( _.objects.main.scrollLeft() - delta );
								$SZ._parallelism_update();
								e.preventDefault();
								e.stopPropagation();
							};

							var st;
							
							if (_.settings.scrollWheelTarget == 'reel')
								st = _.objects.main[0];
							else
								st = _.objects.window[0];
								
							st.addEventListener('DOMMouseScroll', scrollHandler, false);
							st.addEventListener('mousewheel', scrollHandler, false);
							
						}
						
						if (_.settings.resetScroll)
							window.setTimeout(function() {
								_.objects.main.scrollLeft(0);
							}, 0);

					// Scroll Zones.
						if (!_.isTouch && _.settings.useScrollZones) {
							
							_.objects.body.append('<div class="SZRight" style="right: 0;" />');
							_.objects.body.append('<div class="SZLeft" style="left: 0;" />');
							
							$SZLeft = _.objects.body.children('.SZLeft');
							$SZRight = _.objects.body.children('.SZRight');
							$SZ = $SZLeft.add($SZRight);
							
							$SZ
								.css('position', 'fixed')
								.css('width', _.settings.scrollZoneWidth)
								.css('height', 100)
								.css('z-index', 100)
								.css('background', 'rgba(255,255,255,0)') // Required due to a weird IE bug (affects <=10)
								.css('top', 0);
								
							$SZ._parallelism_update = function() {
								
								if (_.objects.main.scrollLeft() == 0)
									$SZLeft.hide();
								else
									$SZLeft.show();
									
								if (_.objects.main.scrollLeft() + $(window).width() >= _.objects.reel.outerWidth())
									$SZRight.hide();
								else
									$SZRight.show();
							
							};
							
							$SZRight.bind('mouseenter', function(e) {
							
								SZIntervalId = window.setInterval(function() {
									_.objects.main.scrollLeft( _.objects.main.scrollLeft() + (_.settings.scrollZoneAmount * _.settings.scrollFactor) );
									$SZ._parallelism_update();
								}, _.settings.scrollZoneDelay);
								return false;
							
							});

							$SZLeft.bind('mouseenter', function(e) {
							
								SZIntervalId = window.setInterval(function() {
									_.objects.main.scrollLeft( _.objects.main.scrollLeft() - (_.settings.scrollZoneAmount * _.settings.scrollFactor) );
									$SZ._parallelism_update();
								}, _.settings.scrollZoneDelay);
								return false;
							
							});
							
							$SZ.bind('mouseleave', function(e) {
								window.clearInterval(SZIntervalId);
							});
						
						}
						else
							$SZ._parallelism_update = function() {};

					// Scroll Keys.
						if (_.settings.useScrollKeys) {
							
							_.objects.window.keydown(function(e) {
								if ($('.poptrox-popup').is(':visible'))
									return;
								
								switch (e.keyCode)
								{
									case 39:
										window.clearInterval(SZIntervalId);
										_.objects.main.scrollLeft( _.objects.main.scrollLeft() + (_.settings.scrollKeyAmount * _.settings.scrollFactor) );
										$SZ._parallelism_update();
										return false;
										
									case 37:
										window.clearInterval(SZIntervalId);
										_.objects.main.scrollLeft( _.objects.main.scrollLeft() - (_.settings.scrollKeyAmount * _.settings.scrollFactor) );
										$SZ._parallelism_update();
										return false;
										
									default:
										break;
								}
							});							
						
						}

				// Poptrox.
					_.objects.reel.poptrox({
						onPopupClose: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.removeClass('overlayed'); }) : null),
						onPopupOpen: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.addClass('overlayed'); }) : null),
						overlayColor: _.settings.popupOverlayColor,
						overlayOpacity: _.settings.popupOverlayOpacity,
						popupCloserText: '',
						popupLoaderText: 'loading',
						selector: '.thumb a',
						usePopupCaption: true,
						usePopupCloser: false,
						usePopupDefaultStyling: false,
						usePopupNav: true
					});

				// Trigger resize event.
					_.objects.window.trigger('resize');	
			
			},

		// Initializes mobile mode.
			initMobile: function() {

				// Auto styling?
					if (_.settings.autoStyleMobile) {
						
						// Items.
							_.objects.items
								.css('border', 'solid ' + Math.ceil(_.settings.padding / 2) + 'px ' + _.settings.paddingColor);

							_.objects.items.filter('.thumb')
								.css('margin-top', (-1 * Math.ceil(_.settings.padding / 2)) + 'px')
								.filter(':nth-child(2n)')
									.css('border-right', 0);
							
					}

				// Items.
					_.objects.items.each(function() {
						
						var $item = $(this), $img = $item.find('img');
						
						$img
							.css('opacity', 0);
						
						$item
							.css('background-image', 'url("' + $img.attr('src') + '")')
							.css('background-position', 'center center')
							.css('background-size', 'cover');
						
						
					});

				// Poptrox.
					_.objects.reel.poptrox({
						onPopupClose: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.removeClass('overlayed'); }) : null),
						onPopupOpen: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.addClass('overlayed'); }) : null),
						overlayColor: _.settings.popupOverlayColor,
						overlayOpacity: _.settings.popupOverlayOpacity,
						popupSpeed: 0,
						selector: '.thumb a',
						useBodyOverflow: false,
						usePopupCaption: false,
						usePopupCloser: false,
						usePopupDefaultStyling: false,
						usePopupLoader: false,
						usePopupNav: false,
						windowMargin: 0
					});
			
			},

		// Main init method
			init: function() {

				// Skel.
					skel.init({
						reset: 'full',
						prefix: '/static/css/style',
						breakpoints: {
							global: { range: '*', containers: 1200, grid: {gutters: 5} },
							desktop: { range: '641-', containers: 600, grid: {gutters: 5}, viewport: { width: 1280, scalable: false } },
							mobile: { range: '-640', containers: '100%', grid: {gutters: 5}, viewport: { scalable: false } }
						}
					});
					
					_.isTouch = skel.vars.isTouch;
					_.IEVersion = skel.vars.IEVersion;

				// jQuery.
					$.fn.h5u_xcss = function(k, v) { 
						return $(this)
							.css('-webkit-' + k, v)
							.css('-moz-' + k, v)
							.css('-o-' + k, v)
							.css('-ms-' + k, v)
							.css(k, v);
					};

				$(function() {

					// Objects.
						_.objects.window = $(window),
						_.objects.wrapper = $('#wrapper'),
						_.objects.body = $('body'),
						_.objects.main = $('#main'),
						_.objects.reel = $('#reel'),
						_.objects.items = _.objects.main.find('.item');

					// Mode.
						if (skel.isActive('mobile'))
							_.initMobile();
						else
							_.initDesktop();
						
				});

			}
			
}; return _; })(jQuery);

parallelism.init();