/**
* Fancybox wrapper.
*
* @author Htmlstream
* @version 1.0
* @requires
*
*/
;
(function ($) {
'use strict';
$.HSCore.components.HSFancyBox = {
/**
*
*
* @var Object _baseConfig
*/
_baseConfig: {
parentEl: 'html',
baseClass: 'u-fancybox-theme',
slideClass: 'u-fancybox-slide',
speed: 1000,
slideSpeedCoefficient: 1,
infobar: false,
fullScreen: true,
thumbs: true,
closeBtn: true,
baseTpl: '
' +
'
' +
'
' +
'
' +
'
' +
'
{{BUTTONS}}
' +
'
' +
'
' +
'
' +
'
' +
'
',
animationEffect: 'fade'
},
/**
*
*
* @var jQuery pageCollection
*/
pageCollection: $(),
/**
* Initialization of Fancybox wrapper.
*
* @param String selector (optional)
* @param Object config (optional)
*
* @return jQuery pageCollection - collection of initialized items.
*/
init: function (selector, config) {
if (!selector) return;
var $collection = $(selector);
if (!$collection.length) return;
config = config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig;
this.initFancyBox(selector, config);
},
initFancyBox: function (el, conf) {
var $fancybox = $(el);
$fancybox.on('click', function () {
var $this = $(this),
animationDuration = $this.data('speed'),
isGroup = $this.data('fancybox'),
isInfinite = Boolean($this.data('is-infinite')),
isSlideShowAutoStart = Boolean($this.data('is-slideshow-auto-start')),
slideShowSpeed = $this.data('slideshow-speed');
$.fancybox.defaults.animationDuration = animationDuration;
if (isInfinite === true) {
$.fancybox.defaults.loop = true;
}
if (isSlideShowAutoStart === true) {
$.fancybox.defaults.slideShow.autoStart = true;
} else {
$.fancybox.defaults.slideShow.autoStart = false;
}
if (isGroup) {
$.fancybox.defaults.transitionEffect = 'slide';
$.fancybox.defaults.slideShow.speed = slideShowSpeed;
}
});
$fancybox.fancybox($.extend(true, {}, conf, {
beforeShow: function (instance, slide) {
var $fancyModal = $(instance.$refs.container),
$fancyOverlay = $(instance.$refs.bg[0]),
$fancySlide = $(instance.current.$slide),
animateIn = instance.current.opts.$orig[0].dataset.animateIn,
animateOut = instance.current.opts.$orig[0].dataset.animateOut,
speed = instance.current.opts.$orig[0].dataset.speed,
overlayBG = instance.current.opts.$orig[0].dataset.overlayBg,
overlayBlurBG = instance.current.opts.$orig[0].dataset.overlayBlurBg;
if (animateIn && $('body').hasClass('u-first-slide-init')) {
var $fancyPrevSlide = $(instance.slides[instance.prevPos].$slide);
$fancySlide.addClass('has-animation');
$fancyPrevSlide.addClass('animated ' + animateOut);
setTimeout(function () {
$fancySlide.addClass('animated ' + animateIn);
}, speed / 2);
} else if (animateIn) {
var $fancyPrevSlide = $(instance.slides[instance.prevPos].$slide);
$fancySlide.addClass('has-animation');
$fancySlide.addClass('animated ' + animateIn);
$('body').addClass('u-first-slide-init');
$fancySlide.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function (e) {
$fancySlide.removeClass(animateIn);
});
}
if (speed) {
$fancyOverlay.css('transition-duration', speed + 'ms');
} else {
$fancyOverlay.css('transition-duration', '1000ms');
}
if (overlayBG) {
$fancyOverlay.css('background-color', overlayBG);
}
if (overlayBlurBG) {
$('body').addClass('u-blur-30');
}
},
beforeClose: function (instance, slide) {
var $fancyModal = $(instance.$refs.container),
$fancySlide = $(instance.current.$slide),
animateIn = instance.current.opts.$orig[0].dataset.animateIn,
animateOut = instance.current.opts.$orig[0].dataset.animateOut,
overlayBlurBG = instance.current.opts.$orig[0].dataset.overlayBlurBg;
if (animateOut) {
$fancySlide.removeClass(animateIn).addClass(animateOut);
$('body').removeClass('u-first-slide-init')
}
if (overlayBlurBG) {
$('body').removeClass('u-blur-30')
}
}
}));
}
}
})(jQuery);