ok
Mini Shell
/*
* Lightcase - jQuery Plugin
* The smart and flexible Lightbox Plugin.
*
* @author Cornel Boppart <cornel@bopp-art.com>
* @copyright Author
*
* @version 2.5.0 (11/03/2018)
*/
;(function ($) {
'use strict';
var _self = {
cache: {},
support: {},
objects: {},
/**
* Initializes the plugin
*
* @param {object} options
* @return {object}
*/
init: function (options) {
return this.each(function () {
$(this).unbind('click.lightcase').bind('click.lightcase', function (event) {
event.preventDefault();
$(this).lightcase('start', options);
});
});
},
/**
* Starts the plugin
*
* @param {object} options
* @return {void}
*/
start: function (options) {
_self.origin = lightcase.origin = this;
_self.settings = lightcase.settings = $.extend(true, {
idPrefix: 'lightcase-',
classPrefix: 'lightcase-',
attrPrefix: 'lc-',
transition: 'elastic',
transitionOpen: null,
transitionClose: null,
transitionIn: null,
transitionOut: null,
cssTransitions: true,
speedIn: 250,
speedOut: 250,
width: null,
height: null,
maxWidth: 800,
maxHeight: 500,
forceWidth: false,
forceHeight: false,
liveResize: true,
fullScreenModeForMobile: true,
mobileMatchExpression: /(iphone|ipod|ipad|android|blackberry|symbian)/,
disableShrink: false,
fixedRatio: true,
shrinkFactor: .75,
overlayOpacity: .9,
slideshow: false,
slideshowAutoStart: true,
breakBeforeShow: false,
timeout: 5000,
swipe: true,
useKeys: true,
useCategories: true,
useAsCollection: false,
navigateEndless: true,
closeOnOverlayClick: true,
title: null,
caption: null,
showTitle: true,
showCaption: true,
showSequenceInfo: true,
inline: {
width: 'auto',
height: 'auto'
},
ajax: {
width: 'auto',
height: 'auto',
type: 'get',
dataType: 'html',
data: {}
},
iframe: {
width: 800,
height: 500,
frameborder: 0
},
flash: {
width: 400,
height: 205,
wmode: 'transparent'
},
video: {
width: 400,
height: 225,
poster: '',
preload: 'auto',
controls: true,
autobuffer: true,
autoplay: true,
loop: false
},
attr: 'data-rel',
href: null,
type: null,
typeMapping: {
'image': 'jpg,jpeg,gif,png,bmp',
'flash': 'swf',
'video': 'mp4,mov,ogv,ogg,webm',
'iframe': 'html,php',
'ajax': 'json,txt',
'inline': '#'
},
errorMessage: function () {
return '<p class="' + _self.settings.classPrefix + 'error">' + _self.settings.labels['errorMessage'] + '</p>';
},
labels: {
'errorMessage': 'Source could not be found...',
'sequenceInfo.of': ' of ',
'close': 'Close',
'navigator.prev': 'Prev',
'navigator.next': 'Next',
'navigator.play': 'Play',
'navigator.pause': 'Pause'
},
markup: function () {
_self.objects.body.append(
_self.objects.overlay = $('<div id="' + _self.settings.idPrefix + 'overlay"></div>'),
_self.objects.loading = $('<div id="' + _self.settings.idPrefix + 'loading" class="' + _self.settings.classPrefix + 'icon-spin"></div>'),
_self.objects.case = $('<div id="' + _self.settings.idPrefix + 'case" aria-hidden="true" role="dialog"></div>')
);
_self.objects.case.after(
_self.objects.close = $('<a href="#" class="' + _self.settings.classPrefix + 'icon-close"><span>' + _self.settings.labels['close'] + '</span></a>'),
_self.objects.nav = $('<div id="' + _self.settings.idPrefix + 'nav"></div>')
);
_self.objects.nav.append(
_self.objects.prev = $('<a href="#" class="' + _self.settings.classPrefix + 'icon-prev"><span>' + _self.settings.labels['navigator.prev'] + '</span></a>').hide(),
_self.objects.next = $('<a href="#" class="' + _self.settings.classPrefix + 'icon-next"><span>' + _self.settings.labels['navigator.next'] + '</span></a>').hide(),
_self.objects.play = $('<a href="#" class="' + _self.settings.classPrefix + 'icon-play"><span>' + _self.settings.labels['navigator.play'] + '</span></a>').hide(),
_self.objects.pause = $('<a href="#" class="' + _self.settings.classPrefix + 'icon-pause"><span>' + _self.settings.labels['navigator.pause'] + '</span></a>').hide()
);
_self.objects.case.append(
_self.objects.content = $('<div id="' + _self.settings.idPrefix + 'content"></div>'),
_self.objects.info = $('<div id="' + _self.settings.idPrefix + 'info"></div>')
);
_self.objects.content.append(
_self.objects.contentInner = $('<div class="' + _self.settings.classPrefix + 'contentInner"></div>')
);
_self.objects.info.append(
_self.objects.sequenceInfo = $('<div id="' + _self.settings.idPrefix + 'sequenceInfo"></div>'),
_self.objects.title = $('<h4 id="' + _self.settings.idPrefix + 'title"></h4>'),
_self.objects.caption = $('<p id="' + _self.settings.idPrefix + 'caption"></p>')
);
},
onInit: {},
onStart: {},
onBeforeCalculateDimensions: {},
onAfterCalculateDimensions: {},
onBeforeShow: {},
onFinish: {},
onResize: {},
onClose: {},
onCleanup: {}
},
options,
// Load options from data-lc-options attribute
_self.origin.data ? _self.origin.data('lc-options') : {});
_self.objects.document = $('html');
_self.objects.body = $('body');
// Call onInit hook functions
_self._callHooks(_self.settings.onInit);
_self.objectData = _self._setObjectData(this);
_self._addElements();
_self._open();
_self.dimensions = _self.getViewportDimensions();
},
/**
* Getter method for objects
*
* @param {string} name
* @return {object}
*/
get: function (name) {
return _self.objects[name];
},
/**
* Getter method for objectData
*
* @return {object}
*/
getObjectData: function () {
return _self.objectData;
},
/**
* Sets the object data
*
* @param {object} object
* @return {object} objectData
*/
_setObjectData: function (object) {
var $object = $(object),
objectData = {
this: $(object),
title: _self.settings.title || $object.attr(_self._prefixAttributeName('title')) || $object.attr('title'),
caption: _self.settings.caption || $object.attr(_self._prefixAttributeName('caption')) || $object.children('img').attr('alt'),
url: _self._determineUrl(),
requestType: _self.settings.ajax.type,
requestData: _self.settings.ajax.data,
requestDataType: _self.settings.ajax.dataType,
rel: $object.attr(_self._determineAttributeSelector()),
type: _self.settings.type || _self._verifyDataType(_self._determineUrl()),
isPartOfSequence: _self.settings.useAsCollection || _self._isPartOfSequence($object.attr(_self.settings.attr), ':'),
isPartOfSequenceWithSlideshow: _self._isPartOfSequence($object.attr(_self.settings.attr), ':slideshow'),
currentIndex: $(_self._determineAttributeSelector()).index($object),
sequenceLength: $(_self._determineAttributeSelector()).length
};
// Add sequence info to objectData
objectData.sequenceInfo = (objectData.currentIndex + 1) + _self.settings.labels['sequenceInfo.of'] + objectData.sequenceLength;
// Add next/prev index
objectData.prevIndex = objectData.currentIndex - 1;
objectData.nextIndex = objectData.currentIndex + 1;
return objectData;
},
/**
* Prefixes a data attribute name with defined name from 'settings.attrPrefix'
* to ensure more uniqueness for all lightcase related/used attributes.
*
* @param {string} name
* @return {string}
*/
_prefixAttributeName: function (name) {
return 'data-' + _self.settings.attrPrefix + name;
},
/**
* Determines the link target considering 'settings.href' and data attributes
* but also with a fallback to the default 'href' value.
*
* @return {string}
*/
_determineLinkTarget: function () {
return _self.settings.href || $(_self.origin).attr(_self._prefixAttributeName('href')) || $(_self.origin).attr('href');
},
/**
* Determines the attribute selector to use, depending on
* whether categorized collections are beeing used or not.
*
* @return {string} selector
*/
_determineAttributeSelector: function () {
var $origin = $(_self.origin),
selector = '';
if (typeof _self.cache.selector !== 'undefined') {
selector = _self.cache.selector;
} else if (_self.settings.useCategories === true && $origin.attr(_self._prefixAttributeName('categories'))) {
var categories = $origin.attr(_self._prefixAttributeName('categories')).split(' ');
$.each(categories, function (index, category) {
if (index > 0) {
selector += ',';
}
selector += '[' + _self._prefixAttributeName('categories') + '~="' + category + '"]';
});
} else {
selector = '[' + _self.settings.attr + '="' + $origin.attr(_self.settings.attr) + '"]';
}
_self.cache.selector = selector;
return selector;
},
/**
* Determines the correct resource according to the
* current viewport and density.
*
* @return {string} url
*/
_determineUrl: function () {
var dataUrl = _self._verifyDataUrl(_self._determineLinkTarget()),
width = 0,
density = 0,
supportLevel = '',
url;
$.each(dataUrl, function (index, src) {
switch (_self._verifyDataType(src.url)) {
case 'video':
var video = document.createElement('video'),
videoType = _self._verifyDataType(src.url) + '/' + _self._getFileUrlSuffix(src.url);
// Check if browser can play this type of video format
if (supportLevel !== 'probably' && supportLevel !== video.canPlayType(videoType) && video.canPlayType(videoType) !== '') {
supportLevel = video.canPlayType(videoType);
url = src.url;
}
break;
default:
if (
// Check density
_self._devicePixelRatio() >= src.density &&
src.density >= density &&
// Check viewport width
_self._matchMedia()('screen and (min-width:' + src.width + 'px)').matches &&
src.width >= width
) {
width = src.width;
density = src.density;
url = src.url;
}
break;
}
});
return url;
},
/**
* Normalizes an url and returns information about the resource path,
* the viewport width as well as density if defined.
*
* @param {string} url Path to resource in format of an url or srcset
* @return {object}
*/
_normalizeUrl: function (url) {
var srcExp = /^\d+$/;
return url.split(',').map(function (str) {
var src = {
width: 0,
density: 0
};
str.trim().split(/\s+/).forEach(function (url, i) {
if (i === 0) {
return src.url = url;
}
var value = url.substring(0, url.length - 1),
lastChar = url[url.length - 1],
intVal = parseInt(value, 10),
floatVal = parseFloat(value);
if (lastChar === 'w' && srcExp.test(value)) {
src.width = intVal;
} else if (lastChar === 'h' && srcExp.test(value)) {
src.height = intVal;
} else if (lastChar === 'x' && !isNaN(floatVal)) {
src.density = floatVal;
}
});
return src;
});
},
/**
* Verifies if the link is part of a sequence
*
* @param {string} rel
* @param {string} expression
* @return {boolean}
*/
_isPartOfSequence: function (rel, expression) {
var getSimilarLinks = $('[' + _self.settings.attr + '="' + rel + '"]'),
regexp = new RegExp(expression);
return (regexp.test(rel) && getSimilarLinks.length > 1);
},
/**
* Verifies if the slideshow should be enabled
*
* @return {boolean}
*/
isSlideshowEnabled: function () {
return (_self.objectData.isPartOfSequence && (_self.settings.slideshow === true || _self.objectData.isPartOfSequenceWithSlideshow === true));
},
/**
* Loads the new content to show
*
* @return {void}
*/
_loadContent: function () {
if (_self.cache.originalObject) {
_self._restoreObject();
}
_self._createObject();
},
/**
* Creates a new object
*
* @return {void}
*/
_createObject: function () {
var $object;
// Create object
switch (_self.objectData.type) {
case 'image':
$object = $(new Image());
$object.attr({
// The time expression is required to prevent the binding of an image load
'src': _self.objectData.url,
'alt': _self.objectData.title
});
break;
case 'inline':
$object = $('<div class="' + _self.settings.classPrefix + 'inlineWrap"></div>');
$object.html(_self._cloneObject($(_self.objectData.url)));
// Add custom attributes from _self.settings
$.each(_self.settings.inline, function (name, value) {
$object.attr(_self._prefixAttributeName(name), value);
});
break;
case 'ajax':
$object = $('<div class="' + _self.settings.classPrefix + 'inlineWrap"></div>');
// Add custom attributes from _self.settings
$.each(_self.settings.ajax, function (name, value) {
if (name !== 'data') {
$object.attr(_self._prefixAttributeName(name), value);
}
});
break;
case 'flash':
$object = $('<embed src="' + _self.objectData.url + '" type="application/x-shockwave-flash"></embed>');
// Add custom attributes from _self.settings
$.each(_self.settings.flash, function (name, value) {
$object.attr(name, value);
});
break;
case 'video':
$object = $('<video></video>');
$object.attr('src', _self.objectData.url);
// Add custom attributes from _self.settings
$.each(_self.settings.video, function (name, value) {
$object.attr(name, value);
});
break;
default:
$object = $('<iframe></iframe>');
$object.attr({
'src': _self.objectData.url
});
// Add custom attributes from _self.settings
$.each(_self.settings.iframe, function (name, value) {
$object.attr(name, value);
});
break;
}
_self._addObject($object);
_self._loadObject($object);
},
/**
* Adds the new object to the markup
*
* @param {object} $object
* @return {void}
*/
_addObject: function ($object) {
// Add object to content holder
_self.objects.contentInner.html($object);
// Start loading
_self._loading('start');
// Call onStart hook functions
_self._callHooks(_self.settings.onStart);
// Add sequenceInfo to the content holder or hide if its empty
if (_self.settings.showSequenceInfo === true && _self.objectData.isPartOfSequence) {
_self.objects.sequenceInfo.html(_self.objectData.sequenceInfo);
_self.objects.sequenceInfo.show();
} else {
_self.objects.sequenceInfo.empty();
_self.objects.sequenceInfo.hide();
}
// Add title to the content holder or hide if its empty
if (_self.settings.showTitle === true && _self.objectData.title !== undefined && _self.objectData.title !== '') {
_self.objects.title.html(_self.objectData.title);
_self.objects.title.show();
} else {
_self.objects.title.empty();
_self.objects.title.hide();
}
// Add caption to the content holder or hide if its empty
if (_self.settings.showCaption === true && _self.objectData.caption !== undefined && _self.objectData.caption !== '') {
_self.objects.caption.html(_self.objectData.caption);
_self.objects.caption.show();
} else {
_self.objects.caption.empty();
_self.objects.caption.hide();
}
},
/**
* Loads the new object
*
* @param {object} $object
* @return {void}
*/
_loadObject: function ($object) {
// Load the object
switch (_self.objectData.type) {
case 'inline':
if ($(_self.objectData.url)) {
_self._showContent($object);
} else {
_self.error();
}
break;
case 'ajax':
$.ajax(
$.extend({}, _self.settings.ajax, {
url: _self.objectData.url,
type: _self.objectData.requestType,
dataType: _self.objectData.requestDataType,
data: _self.objectData.requestData,
success: function (data, textStatus, jqXHR) {
// Check for X-Ajax-Location
if (jqXHR.getResponseHeader('X-Ajax-Location')) {
_self.objectData.url = jqXHR.getResponseHeader('X-Ajax-Location');
_self._loadObject($object);
}
else {
// Unserialize if data is transferred as json
if (_self.objectData.requestDataType === 'json') {
_self.objectData.data = data;
} else {
$object.html(data);
}
_self._showContent($object);
}
},
error: function (jqXHR, textStatus, errorThrown) {
_self.error();
}
})
);
break;
case 'flash':
_self._showContent($object);
break;
case 'video':
if (typeof($object.get(0).canPlayType) === 'function' || _self.objects.case.find('video').length === 0) {
_self._showContent($object);
} else {
_self.error();
}
break;
default:
if (_self.objectData.url) {
$object.on('load', function () {
_self._showContent($object);
});
$object.on('error', function () {
_self.error();
});
} else {
_self.error();
}
break;
}
},
/**
* Throws an error message if something went wrong
*
* @return {void}
*/
error: function () {
_self.objectData.type = 'error';
var $object = $('<div class="' + _self.settings.classPrefix + 'inlineWrap"></div>');
$object.html(_self.settings.errorMessage);
_self.objects.contentInner.html($object);
_self._showContent(_self.objects.contentInner);
},
/**
* Calculates the dimensions to fit content
*
* @param {object} $object
* @return {void}
*/
_calculateDimensions: function ($object) {
_self._cleanupDimensions();
if (!$object) return;
// Set default dimensions
var dimensions = {
ratio: 1,
objectWidth: $object.attr('width') ? $object.attr('width') : $object.attr(_self._prefixAttributeName('width')),
objectHeight: $object.attr('height') ? $object.attr('height') : $object.attr(_self._prefixAttributeName('height'))
};
if (!_self.settings.disableShrink) {
// Add calculated maximum width/height to dimensions
dimensions.maxWidth = parseInt(_self.dimensions.windowWidth * _self.settings.shrinkFactor);
dimensions.maxHeight = parseInt(_self.dimensions.windowHeight * _self.settings.shrinkFactor);
// If the auto calculated maxWidth/maxHeight greather than the user-defined one, use that.
if (dimensions.maxWidth > _self.settings.maxWidth) {
dimensions.maxWidth = _self.settings.maxWidth;
}
if (dimensions.maxHeight > _self.settings.maxHeight) {
dimensions.maxHeight = _self.settings.maxHeight;
}
// Calculate the difference between screen width/height and image width/height
dimensions.differenceWidthAsPercent = parseInt(100 / dimensions.maxWidth * dimensions.objectWidth);
dimensions.differenceHeightAsPercent = parseInt(100 / dimensions.maxHeight * dimensions.objectHeight);
switch (_self.objectData.type) {
case 'image':
case 'flash':
case 'video':
case 'iframe':
case 'ajax':
case 'inline':
if (_self.objectData.type === 'image' || _self.settings.fixedRatio === true) {
if (dimensions.differenceWidthAsPercent > 100 && dimensions.differenceWidthAsPercent > dimensions.differenceHeightAsPercent) {
dimensions.objectWidth = dimensions.maxWidth;
dimensions.objectHeight = parseInt(dimensions.objectHeight / dimensions.differenceWidthAsPercent * 100);
}
if (dimensions.differenceHeightAsPercent > 100 && dimensions.differenceHeightAsPercent > dimensions.differenceWidthAsPercent) {
dimensions.objectWidth = parseInt(dimensions.objectWidth / dimensions.differenceHeightAsPercent * 100);
dimensions.objectHeight = dimensions.maxHeight;
}
if (dimensions.differenceHeightAsPercent > 100 && dimensions.differenceWidthAsPercent < dimensions.differenceHeightAsPercent) {
dimensions.objectWidth = parseInt(dimensions.maxWidth / dimensions.differenceHeightAsPercent * dimensions.differenceWidthAsPercent);
dimensions.objectHeight = dimensions.maxHeight;
}
break;
}
case 'error':
if (!isNaN(dimensions.objectWidth) && dimensions.objectWidth > dimensions.maxWidth) {
dimensions.objectWidth = dimensions.maxWidth;
}
break;
default:
if ((isNaN(dimensions.objectWidth) || dimensions.objectWidth > dimensions.maxWidth) && !_self.settings.forceWidth) {
dimensions.objectWidth = dimensions.maxWidth;
}
if (((isNaN(dimensions.objectHeight) && dimensions.objectHeight !== 'auto') || dimensions.objectHeight > dimensions.maxHeight) && !_self.settings.forceHeight) {
dimensions.objectHeight = dimensions.maxHeight;
}
break;
}
}
if (_self.settings.forceWidth) {
try {
dimensions.objectWidth = _self.settings[_self.objectData.type].width;
} catch (e) {
dimensions.objectWidth = _self.settings.width || dimensions.objectWidth;
}
dimensions.maxWidth = null;
}
if ($object.attr(_self._prefixAttributeName('max-width'))) {
dimensions.maxWidth = $object.attr(_self._prefixAttributeName('max-width'));
}
if (_self.settings.forceHeight) {
try {
dimensions.objectHeight = _self.settings[_self.objectData.type].height;
} catch (e) {
dimensions.objectHeight = _self.settings.height || dimensions.objectHeight;
}
dimensions.maxHeight = null;
}
if ($object.attr(_self._prefixAttributeName('max-height'))) {
dimensions.maxHeight = $object.attr(_self._prefixAttributeName('max-height'));
}
_self._adjustDimensions($object, dimensions);
},
/**
* Adjusts the dimensions
*
* @param {object} $object
* @param {object} dimensions
* @return {void}
*/
_adjustDimensions: function ($object, dimensions) {
// Adjust width and height
$object.css({
'width': dimensions.objectWidth,
'height': dimensions.objectHeight,
'max-width': dimensions.maxWidth,
'max-height': dimensions.maxHeight
});
_self.objects.contentInner.css({
'width': $object.outerWidth(),
'height': $object.outerHeight(),
'max-width': '100%'
});
_self.objects.case.css({
'width': _self.objects.contentInner.outerWidth(),
'max-width': '100%'
});
// Adjust margin
_self.objects.case.css({
'margin-top': parseInt(-(_self.objects.case.outerHeight() / 2)),
'margin-left': parseInt(-(_self.objects.case.outerWidth() / 2))
});
},
/**
* Handles the _loading
*
* @param {string} process
* @return {void}
*/
_loading: function (process) {
if (process === 'start') {
_self.objects.case.addClass(_self.settings.classPrefix + 'loading');
_self.objects.loading.show();
} else if (process === 'end') {
_self.objects.case.removeClass(_self.settings.classPrefix + 'loading');
_self.objects.loading.hide();
}
},
/**
* Gets the client screen dimensions
*
* @return {object} dimensions
*/
getViewportDimensions: function () {
return {
windowWidth: $(window).innerWidth(),
windowHeight: $(window).innerHeight()
};
},
/**
* Verifies the url
*
* @param {string} dataUrl
* @return {object} dataUrl Clean url for processing content
*/
_verifyDataUrl: function (dataUrl) {
if (!dataUrl || dataUrl === undefined || dataUrl === '') {
return false;
}
if (dataUrl.indexOf('#') > -1) {
dataUrl = dataUrl.split('#');
dataUrl = '#' + dataUrl[dataUrl.length - 1];
}
return _self._normalizeUrl(dataUrl.toString());
},
//
/**
* Tries to get the (file) suffix of an url
*
* @param {string} url
* @return {string}
*/
_getFileUrlSuffix: function (url) {
var re = /(?:\.([^.]+))?$/;
return re.exec(url.toLowerCase())[1];
},
/**
* Verifies the data type of the content to load
*
* @param {string} url
* @return {string|boolean} Array key if expression matched, else false
*/
_verifyDataType: function (url) {
var typeMapping = _self.settings.typeMapping;
// Early abort if dataUrl couldn't be verified
if (!url) {
return false;
}
// Verify the dataType of url according to typeMapping which
// has been defined in settings.
for (var key in typeMapping) {
if (typeMapping.hasOwnProperty(key)) {
var suffixArr = typeMapping[key].split(',');
for (var i = 0; i < suffixArr.length; i++) {
var suffix = suffixArr[i].toLowerCase(),
regexp = new RegExp('\.(' + suffix + ')$', 'i'),
str = url.toLowerCase().split('?')[0].substr(-5);
if (regexp.test(str) === true || (key === 'inline' && (url.indexOf(suffix) > -1))) {
return key;
}
}
}
}
// If no expression matched, return 'iframe'.
return 'iframe';
},
/**
* Extends html markup with the essential tags
*
* @return {void}
*/
_addElements: function () {
if (typeof _self.objects.case !== 'undefined' && $('#' + _self.objects.case.attr('id')).length) {
return;
}
_self.settings.markup();
},
/**
* Shows the loaded content
*
* @param {object} $object
* @return {void}
*/
_showContent: function ($object) {
// Add data attribute with the object type
_self.objects.document.attr(_self._prefixAttributeName('type'), _self.objectData.type);
_self.cache.object = $object;
// Call onBeforeShow hook functions
_self._callHooks(_self.settings.onBeforeShow);
if (_self.settings.breakBeforeShow) return;
_self.show();
},
/**
* Starts the 'inTransition'
* @return {void}
*/
_startInTransition: function () {
switch (_self.transition.in()) {
case 'scrollTop':
case 'scrollRight':
case 'scrollBottom':
case 'scrollLeft':
case 'scrollHorizontal':
case 'scrollVertical':
_self.transition.scroll(_self.objects.case, 'in', _self.settings.speedIn);
_self.transition.fade(_self.objects.contentInner, 'in', _self.settings.speedIn);
break;
case 'elastic':
if (_self.objects.case.css('opacity') < 1) {
_self.transition.zoom(_self.objects.case, 'in', _self.settings.speedIn);
_self.transition.fade(_self.objects.contentInner, 'in', _self.settings.speedIn);
}
case 'fade':
case 'fadeInline':
_self.transition.fade(_self.objects.case, 'in', _self.settings.speedIn);
_self.transition.fade(_self.objects.contentInner, 'in', _self.settings.speedIn);
break;
default:
_self.transition.fade(_self.objects.case, 'in', 0);
break;
}
// End loading.
_self._loading('end');
_self.isBusy = false;
// Set index of the first item opened
if (!_self.cache.firstOpened) {
_self.cache.firstOpened = _self.objectData.this;
}
// Fade in the info with delay
_self.objects.info.hide();
setTimeout(function () {
_self.transition.fade(_self.objects.info, 'in', _self.settings.speedIn);
}, _self.settings.speedIn);
// Call onFinish hook functions
_self._callHooks(_self.settings.onFinish);
},
/**
* Processes the content to show
*
* @return {void}
*/
_processContent: function () {
_self.isBusy = true;
// Fade out the info at first
_self.transition.fade(_self.objects.info, 'out', 0);
switch (_self.settings.transitionOut) {
case 'scrollTop':
case 'scrollRight':
case 'scrollBottom':
case 'scrollLeft':
case 'scrollVertical':
case 'scrollHorizontal':
if (_self.objects.case.is(':hidden')) {
_self.transition.fade(_self.objects.contentInner, 'out', 0);
_self.transition.fade(_self.objects.case, 'out', 0, 0, function () {
_self._loadContent();
});
} else {
_self.transition.scroll(_self.objects.case, 'out', _self.settings.speedOut, function () {
_self._loadContent();
});
}
break;
case 'fade':
if (_self.objects.case.is(':hidden')) {
_self.transition.fade(_self.objects.case, 'out', 0, 0, function () {
_self._loadContent();
});
} else {
_self.transition.fade(_self.objects.case, 'out', _self.settings.speedOut, 0, function () {
_self._loadContent();
});
}
break;
case 'fadeInline':
case 'elastic':
if (_self.objects.case.is(':hidden')) {
_self.transition.fade(_self.objects.case, 'out', 0, 0, function () {
_self._loadContent();
});
} else {
_self.transition.fade(_self.objects.contentInner, 'out', _self.settings.speedOut, 0, function () {
_self._loadContent();
});
}
break;
default:
_self.transition.fade(_self.objects.case, 'out', 0, 0, function () {
_self._loadContent();
});
break;
}
},
/**
* Handles events for gallery buttons
*
* @return {void}
*/
_handleEvents: function () {
_self._unbindEvents();
_self.objects.nav.children().not(_self.objects.close).hide();
// If slideshow is enabled, show play/pause and start timeout.
if (_self.isSlideshowEnabled()) {
// Only start the timeout if slideshow autostart is enabled and slideshow is not pausing
if (
(_self.settings.slideshowAutoStart === true || _self.isSlideshowStarted) &&
!_self.objects.nav.hasClass(_self.settings.classPrefix + 'paused')
) {
_self._startTimeout();
} else {
_self._stopTimeout();
}
}
if (_self.settings.liveResize) {
_self._watchResizeInteraction();
}
_self.objects.close.click(function (event) {
event.preventDefault();
_self.close();
});
if (_self.settings.closeOnOverlayClick === true) {
_self.objects.overlay.css('cursor', 'pointer').click(function (event) {
event.preventDefault();
_self.close();
});
}
if (_self.settings.useKeys === true) {
_self._addKeyEvents();
}
if (_self.objectData.isPartOfSequence) {
_self.objects.nav.attr(_self._prefixAttributeName('ispartofsequence'), true);
_self.objects.nav.data('items', _self._setNavigation());
_self.objects.prev.click(function (event) {
event.preventDefault();
if (_self.settings.navigateEndless === true || !_self.item.isFirst()) {
_self.objects.prev.unbind('click');
_self.cache.action = 'prev';
_self.objects.nav.data('items').prev.click();
if (_self.isSlideshowEnabled()) {
_self._stopTimeout();
}
}
});
_self.objects.next.click(function (event) {
event.preventDefault();
if (_self.settings.navigateEndless === true || !_self.item.isLast()) {
_self.objects.next.unbind('click');
_self.cache.action = 'next';
_self.objects.nav.data('items').next.click();
if (_self.isSlideshowEnabled()) {
_self._stopTimeout();
}
}
});
if (_self.isSlideshowEnabled()) {
_self.objects.play.click(function (event) {
event.preventDefault();
_self._startTimeout();
});
_self.objects.pause.click(function (event) {
event.preventDefault();
_self._stopTimeout();
});
}
// Enable swiping if activated
if (_self.settings.swipe === true) {
if ($.isPlainObject($.event.special.swipeleft)) {
_self.objects.case.on('swipeleft', function (event) {
event.preventDefault();
_self.objects.next.click();
if (_self.isSlideshowEnabled()) {
_self._stopTimeout();
}
});
}
if ($.isPlainObject($.event.special.swiperight)) {
_self.objects.case.on('swiperight', function (event) {
event.preventDefault();
_self.objects.prev.click();
if (_self.isSlideshowEnabled()) {
_self._stopTimeout();
}
});
}
}
}
},
/**
* Adds the key events
*
* @return {void}
*/
_addKeyEvents: function () {
$(document).bind('keyup.lightcase', function (event) {
// Do nothing if lightcase is in process
if (_self.isBusy) {
return;
}
switch (event.keyCode) {
// Escape key
case 27:
_self.objects.close.click();
break;
// Backward key
case 37:
if (_self.objectData.isPartOfSequence) {
_self.objects.prev.click();
}
break;
// Forward key
case 39:
if (_self.objectData.isPartOfSequence) {
_self.objects.next.click();
}
break;
}
});
},
/**
* Starts the slideshow timeout
*
* @return {void}
*/
_startTimeout: function () {
_self.isSlideshowStarted = true;
_self.objects.play.hide();
_self.objects.pause.show();
_self.cache.action = 'next';
_self.objects.nav.removeClass(_self.settings.classPrefix + 'paused');
_self.timeout = setTimeout(function () {
_self.objects.nav.data('items').next.click();
}, _self.settings.timeout);
},
/**
* Stops the slideshow timeout
*
* @return {void}
*/
_stopTimeout: function () {
_self.objects.play.show();
_self.objects.pause.hide();
_self.objects.nav.addClass(_self.settings.classPrefix + 'paused');
clearTimeout(_self.timeout);
},
/**
* Sets the navigator buttons (prev/next)
*
* @return {object} items
*/
_setNavigation: function () {
var $links = $((_self.cache.selector || _self.settings.attr)),
sequenceLength = _self.objectData.sequenceLength - 1,
items = {
prev: $links.eq(_self.objectData.prevIndex),
next: $links.eq(_self.objectData.nextIndex)
};
if (_self.objectData.currentIndex > 0) {
_self.objects.prev.show();
} else {
items.prevItem = $links.eq(sequenceLength);
}
if (_self.objectData.nextIndex <= sequenceLength) {
_self.objects.next.show();
} else {
items.next = $links.eq(0);
}
if (_self.settings.navigateEndless === true) {
_self.objects.prev.show();
_self.objects.next.show();
}
return items;
},
/**
* Item information/status
*
*/
item: {
/**
* Verifies if the current item is first item.
*
* @return {boolean}
*/
isFirst: function () {
return (_self.objectData.currentIndex === 0);
},
/**
* Verifies if the current item is first item opened.
*
* @return {boolean}
*/
isFirstOpened: function () {
return _self.objectData.this.is(_self.cache.firstOpened);
},
/**
* Verifies if the current item is last item.
*
* @return {boolean}
*/
isLast: function () {
return (_self.objectData.currentIndex === (_self.objectData.sequenceLength - 1));
}
},
/**
* Clones the object for inline elements
*
* @param {object} $object
* @return {object} $clone
*/
_cloneObject: function ($object) {
var $clone = $object.clone(),
objectId = $object.attr('id');
// If element is hidden, cache the object and remove
if ($object.is(':hidden')) {
_self._cacheObjectData($object);
$object.attr('id', _self.settings.idPrefix + 'temp-' + objectId).empty();
} else {
// Prevent duplicated id's
$clone.removeAttr('id');
}
return $clone.show();
},
/**
* Verifies if it is a mobile device
*
* @return {boolean}
*/
isMobileDevice: function () {
var deviceAgent = navigator.userAgent.toLowerCase(),
agentId = deviceAgent.match(_self.settings.mobileMatchExpression);
return agentId ? true : false;
},
/**
* Verifies if css transitions are supported
*
* @return {string|boolean} The transition prefix if supported, else false.
*/
isTransitionSupported: function () {
var body = _self.objects.body.get(0),
isTransitionSupported = false,
transitionMapping = {
'transition': '',
'WebkitTransition': '-webkit-',
'MozTransition': '-moz-',
'OTransition': '-o-',
'MsTransition': '-ms-'
};
for (var key in transitionMapping) {
if (transitionMapping.hasOwnProperty(key) && key in body.style) {
_self.support.transition = transitionMapping[key];
isTransitionSupported = true;
}
}
return isTransitionSupported;
},
/**
* Transition types
*
*/
transition: {
/**
* Returns the correct transition type according to the status of interaction.
*
* @return {string} Transition type
*/
in: function () {
if (_self.settings.transitionOpen && !_self.cache.firstOpened) {
return _self.settings.transitionOpen;
}
return _self.settings.transitionIn;
},
/**
* Fades in/out the object
*
* @param {object} $object
* @param {string} type
* @param {number} speed
* @param {number} opacity
* @param {function} callback
* @return {void} Animates an object
*/
fade: function ($object, type, speed, opacity, callback) {
var isInTransition = type === 'in',
startTransition = {},
startOpacity = $object.css('opacity'),
endTransition = {},
endOpacity = opacity ? opacity: isInTransition ? 1 : 0;
if (!_self.isOpen && isInTransition) return;
startTransition['opacity'] = startOpacity;
endTransition['opacity'] = endOpacity;
$object.css(_self.support.transition + 'transition', 'none');
$object.css(startTransition).show();
// Css transition
if (_self.support.transitions) {
endTransition[_self.support.transition + 'transition'] = speed + 'ms ease';
setTimeout(function () {
$object.css(endTransition);
setTimeout(function () {
$object.css(_self.support.transition + 'transition', '');
if (callback && (_self.isOpen || !isInTransition)) {
callback();
}
}, speed);
}, 15);
} else {
// Fallback to js transition
$object.stop();
$object.animate(endTransition, speed, callback);
}
},
/**
* Scrolls in/out the object
*
* @param {object} $object
* @param {string} type
* @param {number} speed
* @param {function} callback
* @return {void} Animates an object
*/
scroll: function ($object, type, speed, callback) {
var isInTransition = type === 'in',
transition = isInTransition ? _self.settings.transitionIn : _self.settings.transitionOut,
direction = 'left',
startTransition = {},
startOpacity = isInTransition ? 0 : 1,
startOffset = isInTransition ? '-50%' : '50%',
endTransition = {},
endOpacity = isInTransition ? 1 : 0,
endOffset = isInTransition ? '50%' : '-50%';
if (!_self.isOpen && isInTransition) return;
switch (transition) {
case 'scrollTop':
direction = 'top';
break;
case 'scrollRight':
startOffset = isInTransition ? '150%' : '50%';
endOffset = isInTransition ? '50%' : '150%';
break;
case 'scrollBottom':
direction = 'top';
startOffset = isInTransition ? '150%' : '50%';
endOffset = isInTransition ? '50%' : '150%';
break;
case 'scrollHorizontal':
startOffset = isInTransition ? '150%' : '50%';
endOffset = isInTransition ? '50%' : '-50%';
break;
case 'scrollVertical':
direction = 'top';
startOffset = isInTransition ? '-50%' : '50%';
endOffset = isInTransition ? '50%' : '150%';
break;
}
if (_self.cache.action === 'prev') {
switch (transition) {
case 'scrollHorizontal':
startOffset = isInTransition ? '-50%' : '50%';
endOffset = isInTransition ? '50%' : '150%';
break;
case 'scrollVertical':
startOffset = isInTransition ? '150%' : '50%';
endOffset = isInTransition ? '50%' : '-50%';
break;
}
}
startTransition['opacity'] = startOpacity;
startTransition[direction] = startOffset;
endTransition['opacity'] = endOpacity;
endTransition[direction] = endOffset;
$object.css(_self.support.transition + 'transition', 'none');
$object.css(startTransition).show();
// Css transition
if (_self.support.transitions) {
endTransition[_self.support.transition + 'transition'] = speed + 'ms ease';
setTimeout(function () {
$object.css(endTransition);
setTimeout(function () {
$object.css(_self.support.transition + 'transition', '');
if (callback && (_self.isOpen || !isInTransition)) {
callback();
}
}, speed);
}, 15);
} else {
// Fallback to js transition
$object.stop();
$object.animate(endTransition, speed, callback);
}
},
/**
* Zooms in/out the object
*
* @param {object} $object
* @param {string} type
* @param {number} speed
* @param {function} callback
* @return {void} Animates an object
*/
zoom: function ($object, type, speed, callback) {
var isInTransition = type === 'in',
startTransition = {},
startOpacity = $object.css('opacity'),
startScale = isInTransition ? 'scale(0.75)' : 'scale(1)',
endTransition = {},
endOpacity = isInTransition ? 1 : 0,
endScale = isInTransition ? 'scale(1)' : 'scale(0.75)';
if (!_self.isOpen && isInTransition) return;
startTransition['opacity'] = startOpacity;
startTransition[_self.support.transition + 'transform'] = startScale;
endTransition['opacity'] = endOpacity;
$object.css(_self.support.transition + 'transition', 'none');
$object.css(startTransition).show();
// Css transition
if (_self.support.transitions) {
endTransition[_self.support.transition + 'transform'] = endScale;
endTransition[_self.support.transition + 'transition'] = speed + 'ms ease';
setTimeout(function () {
$object.css(endTransition);
setTimeout(function () {
$object.css(_self.support.transition + 'transform', '');
$object.css(_self.support.transition + 'transition', '');
if (callback && (_self.isOpen || !isInTransition)) {
callback();
}
}, speed);
}, 15);
} else {
// Fallback to js transition
$object.stop();
$object.animate(endTransition, speed, callback);
}
}
},
/**
* Calls all the registered functions of a specific hook
*
* @param {object} hooks
* @return {void}
*/
_callHooks: function (hooks) {
if (typeof(hooks) === 'object') {
$.each(hooks, function(index, hook) {
if (typeof(hook) === 'function') {
hook.call(_self.origin);
}
});
}
},
/**
* Caches the object data
*
* @param {object} $object
* @return {void}
*/
_cacheObjectData: function ($object) {
$.data($object, 'cache', {
id: $object.attr('id'),
content: $object.html()
});
_self.cache.originalObject = $object;
},
/**
* Restores the object from cache
*
* @return void
*/
_restoreObject: function () {
var $object = $('[id^="' + _self.settings.idPrefix + 'temp-"]');
$object.attr('id', $.data(_self.cache.originalObject, 'cache').id);
$object.html($.data(_self.cache.originalObject, 'cache').content);
},
/**
* Executes functions for a window resize.
* It stops an eventual timeout and recalculates dimensions.
*
* @param {object} dimensions
* @return {void}
*/
resize: function (event, dimensions) {
if (!_self.isOpen) return;
if (_self.isSlideshowEnabled()) {
_self._stopTimeout();
}
if (typeof dimensions === 'object' && dimensions !== null) {
if (dimensions.width) {
_self.cache.object.attr(
_self._prefixAttributeName('width'),
dimensions.width
);
}
if (dimensions.maxWidth) {
_self.cache.object.attr(
_self._prefixAttributeName('max-width'),
dimensions.maxWidth
);
}
if (dimensions.height) {
_self.cache.object.attr(
_self._prefixAttributeName('height'),
dimensions.height
);
}
if (dimensions.maxHeight) {
_self.cache.object.attr(
_self._prefixAttributeName('max-height'),
dimensions.maxHeight
);
}
}
_self.dimensions = _self.getViewportDimensions();
_self._calculateDimensions(_self.cache.object);
// Call onResize hook functions
_self._callHooks(_self.settings.onResize);
},
/**
* Watches for any resize interaction and caches the new sizes.
*
* @return {void}
*/
_watchResizeInteraction: function () {
$(window).resize(_self.resize);
},
/**
* Stop watching any resize interaction related to _self.
*
* @return {void}
*/
_unwatchResizeInteraction: function () {
$(window).off('resize', _self.resize);
},
/**
* Switches to the fullscreen mode
*
* @return {void}
*/
_switchToFullScreenMode: function () {
_self.settings.shrinkFactor = 1;
_self.settings.overlayOpacity = 1;
$('html').addClass(_self.settings.classPrefix + 'fullScreenMode');
},
/**
* Enters into the lightcase view
*
* @return {void}
*/
_open: function () {
_self.isOpen = true;
_self.support.transitions = _self.settings.cssTransitions ? _self.isTransitionSupported() : false;
_self.support.mobileDevice = _self.isMobileDevice();
if (_self.support.mobileDevice) {
$('html').addClass(_self.settings.classPrefix + 'isMobileDevice');
if (_self.settings.fullScreenModeForMobile) {
_self._switchToFullScreenMode();
}
}
if (!_self.settings.transitionIn) {
_self.settings.transitionIn = _self.settings.transition;
}
if (!_self.settings.transitionOut) {
_self.settings.transitionOut = _self.settings.transition;
}
switch (_self.transition.in()) {
case 'fade':
case 'fadeInline':
case 'elastic':
case 'scrollTop':
case 'scrollRight':
case 'scrollBottom':
case 'scrollLeft':
case 'scrollVertical':
case 'scrollHorizontal':
if (_self.objects.case.is(':hidden')) {
_self.objects.close.css('opacity', 0);
_self.objects.overlay.css('opacity', 0);
_self.objects.case.css('opacity', 0);
_self.objects.contentInner.css('opacity', 0);
}
_self.transition.fade(_self.objects.overlay, 'in', _self.settings.speedIn, _self.settings.overlayOpacity, function () {
_self.transition.fade(_self.objects.close, 'in', _self.settings.speedIn);
_self._handleEvents();
_self._processContent();
});
break;
default:
_self.transition.fade(_self.objects.overlay, 'in', 0, _self.settings.overlayOpacity, function () {
_self.transition.fade(_self.objects.close, 'in', 0);
_self._handleEvents();
_self._processContent();
});
break;
}
_self.objects.document.addClass(_self.settings.classPrefix + 'open');
_self.objects.case.attr('aria-hidden', 'false');
},
/**
* Shows the lightcase by starting the transition
*/
show: function () {
// Call onCalculateDimensions hook functions
_self._callHooks(_self.settings.onBeforeCalculateDimensions);
_self._calculateDimensions(_self.cache.object);
// Call onAfterCalculateDimensions hook functions
_self._callHooks(_self.settings.onAfterCalculateDimensions);
_self._startInTransition();
},
/**
* Escapes from the lightcase view
*
* @return {void}
*/
close: function () {
_self.isOpen = false;
if (_self.isSlideshowEnabled()) {
_self._stopTimeout();
_self.isSlideshowStarted = false;
_self.objects.nav.removeClass(_self.settings.classPrefix + 'paused');
}
_self.objects.loading.hide();
_self._unbindEvents();
_self._unwatchResizeInteraction();
$('html').removeClass(_self.settings.classPrefix + 'open');
_self.objects.case.attr('aria-hidden', 'true');
_self.objects.nav.children().hide();
_self.objects.close.hide();
// Call onClose hook functions
_self._callHooks(_self.settings.onClose);
// Fade out the info at first
_self.transition.fade(_self.objects.info, 'out', 0);
switch (_self.settings.transitionClose || _self.settings.transitionOut) {
case 'fade':
case 'fadeInline':
case 'scrollTop':
case 'scrollRight':
case 'scrollBottom':
case 'scrollLeft':
case 'scrollHorizontal':
case 'scrollVertical':
_self.transition.fade(_self.objects.case, 'out', _self.settings.speedOut, 0, function () {
_self.transition.fade(_self.objects.overlay, 'out', _self.settings.speedOut, 0, function () {
_self.cleanup();
});
});
break;
case 'elastic':
_self.transition.zoom(_self.objects.case, 'out', _self.settings.speedOut, function () {
_self.transition.fade(_self.objects.overlay, 'out', _self.settings.speedOut, 0, function () {
_self.cleanup();
});
});
break;
default:
_self.cleanup();
break;
}
},
/**
* Unbinds all given events
*
* @return {void}
*/
_unbindEvents: function () {
// Unbind overlay event
_self.objects.overlay.unbind('click');
// Unbind key events
$(document).unbind('keyup.lightcase');
// Unbind swipe events
_self.objects.case.unbind('swipeleft').unbind('swiperight');
// Unbind navigator events
_self.objects.prev.unbind('click');
_self.objects.next.unbind('click');
_self.objects.play.unbind('click');
_self.objects.pause.unbind('click');
// Unbind close event
_self.objects.close.unbind('click');
},
/**
* Cleans up the dimensions
*
* @return {void}
*/
_cleanupDimensions: function () {
var opacity = _self.objects.contentInner.css('opacity');
_self.objects.case.css({
'width': '',
'height': '',
'top': '',
'left': '',
'margin-top': '',
'margin-left': ''
});
_self.objects.contentInner.removeAttr('style').css('opacity', opacity);
_self.objects.contentInner.children().removeAttr('style');
},
/**
* Cleanup after aborting lightcase
*
* @return {void}
*/
cleanup: function () {
_self._cleanupDimensions();
_self.objects.loading.hide();
_self.objects.overlay.hide();
_self.objects.case.hide();
_self.objects.prev.hide();
_self.objects.next.hide();
_self.objects.play.hide();
_self.objects.pause.hide();
_self.objects.document.removeAttr(_self._prefixAttributeName('type'));
_self.objects.nav.removeAttr(_self._prefixAttributeName('ispartofsequence'));
_self.objects.contentInner.empty().hide();
_self.objects.info.children().empty();
if (_self.cache.originalObject) {
_self._restoreObject();
}
// Call onCleanup hook functions
_self._callHooks(_self.settings.onCleanup);
// Restore cache
_self.cache = {};
},
/**
* Returns the supported match media or undefined if the browser
* doesn't support match media.
*
* @return {mixed}
*/
_matchMedia: function () {
return window.matchMedia || window.msMatchMedia;
},
/**
* Returns the devicePixelRatio if supported. Else, it simply returns
* 1 as the default.
*
* @return {number}
*/
_devicePixelRatio: function () {
return window.devicePixelRatio || 1;
},
/**
* Checks if method is public
*
* @return {boolean}
*/
_isPublicMethod: function (method) {
return (typeof _self[method] === 'function' && method.charAt(0) !== '_');
},
/**
* Exports all public methods to be accessible, callable
* from global scope.
*
* @return {void}
*/
_export: function () {
window.lightcase = {};
$.each(_self, function (property) {
if (_self._isPublicMethod(property)) {
lightcase[property] = _self[property];
}
});
}
};
_self._export();
$.fn.lightcase = function (method) {
// Method calling logic (only public methods are applied)
if (_self._isPublicMethod(method)) {
return _self[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return _self.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.lightcase');
}
};
})(jQuery);
Zerion Mini Shell 1.0