123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893 |
- /*
- * 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);
|