eidolon/static/js/init.js

617 lines
17 KiB
JavaScript
Raw Normal View History

/*
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.
2015-01-11 16:06:43 +00:00
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.
2015-01-11 16:06:43 +00:00
verticalNudge: 60,
// Maximum number of rows.
2015-01-11 16:06:43 +00:00
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: '',
2015-01-12 14:15:52 +00:00
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: {
2015-01-11 16:06:43 +00:00
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();