',btnTpl:{download:'' +
'' +
"",zoom:'",close:'",// Arrows
arrowLeft:'",arrowRight:'",// This small close button will be appended to your html/inline/ajax content by default,// if "smallBtn" option is not set to false
smallBtn:'"},// Container is injected into this element
parentEl:"body",// Hide browser vertical scrollbars;use at your own risk
hideScrollbar:true,// Focus handling
// ==============
// Try to focus on the first focusable element after opening
autoFocus:true,// Put focus back to active element after closing
backFocus:true,// Do not let user to focus on element outside modal content
trapFocus:true,// Module specific options
// =======================
fullScreen:{autoStart:false},// Set `touch:false` to disable panning/swiping
touch:{vertical:true,// Allow to drag content vertically
momentum:true // Continue movement after releasing mouse/touch when panning},// Hash value when initializing manually,// set `false` to disable hash change
hash:null,// Customize or add new media types
// Example:media:{},slideShow:{autoStart:false,speed:3000},thumbs:{autoStart:false,// Display thumbnails on opening
hideOnClose:true,// Hide thumbnail grid when closing animation starts
parentEl:".fancybox-container",// Container is injected into this element
axis:"y" // Vertical (y) or horizontal (x) scrolling},// Use mousewheel to navigate gallery
// If 'auto' - enabled for images only
wheel:"auto",// Callbacks
//==========
// See Documentation/API/Events for more information
// Example:onInit:$.noop,// When instance has been initialized
beforeLoad:$.noop,// Before the content of a slide is being loaded
afterLoad:$.noop,// When the content of a slide is done loading
beforeShow:$.noop,// Before open animation starts
afterShow:$.noop,// When content is done loading and animating
beforeClose:$.noop,// Before the instance attempts to close. Return false to cancel the close.
afterClose:$.noop,// After instance has been closed
onActivate:$.noop,// When instance is brought to front
onDeactivate:$.noop,// When other instance has been activated
// Interaction
// ===========
// Use options below to customize taken action when user clicks or double clicks on the fancyBox area,// each option can be string or method that returns value.
//
// Possible values:// "close" - close instance
// "next" - move to next gallery item
// "nextOrClose" - move to next gallery item or close if gallery has only one item
// "toggleControls" - show/hide controls
// "zoom" - zoom image (if loaded)
// false - do nothing
// Clicked on the content
clickContent:function (current,event){return current.type === "image" ? "zoom" :false;},// Clicked on the slide
clickSlide:"close",// Clicked on the background (backdrop) element;// if you have not changed the layout,then most likely you need to use `clickSlide` option
clickOutside:"close",// Same as previous two,but for double click
dblclickContent:false,dblclickSlide:false,dblclickOutside:false,// Custom options when mobile device is detected
// =============================================
mobile:{preventCaptionOverlap:false,idleTime:false,clickContent:function (current,event){return current.type === "image" ? "toggleControls" :false;},clickSlide:function (current,event){return current.type === "image" ? "toggleControls" :"close";},dblclickContent:function (current,event){return current.type === "image" ? "zoom" :false;},dblclickSlide:function (current,event){return current.type === "image" ? "zoom" :false;}},// Internationalization
// ====================
lang:"en",i18n:{en:{CLOSE:"Close",NEXT:"Next",PREV:"Previous",ERROR:"The requested content cannot be loaded. Please try again later.",PLAY_START:"Start slideshow",PLAY_STOP:"Pause slideshow",FULL_SCREEN:"Full screen",THUMBS:"Thumbnails",DOWNLOAD:"Download",SHARE:"Share",ZOOM:"Zoom"},de:{CLOSE:"Schließen",NEXT:"Weiter",PREV:"Zurück",ERROR:"Die angeforderten Daten konnten nicht geladen werden. Bitte versuchen Sie es später nochmal.",PLAY_START:"Diaschau starten",PLAY_STOP:"Diaschau beenden",FULL_SCREEN:"Vollbild",THUMBS:"Vorschaubilder",DOWNLOAD:"Herunterladen",SHARE:"Teilen",ZOOM:"Vergrößern"}}};// Few useful variables and methods
// ================================
var $W = $(window);var $D = $(document);var called = 0;// Check if an object is a jQuery object and not a native JavaScript object
// ========================================================================
var isQuery = function (obj){return obj && obj.hasOwnProperty && obj instanceof $;};// Handle multiple browsers for "requestAnimationFrame" and "cancelAnimationFrame"
// ===============================================================================
var requestAFrame = (function (){return (window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// if all else fails,use setTimeout
function (callback){return window.setTimeout(callback,1000 / 60);});})();var cancelAFrame = (function (){return (window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
function (id){window.clearTimeout(id);});})();// Detect the supported transition-end event property name
// =======================================================
var transitionEnd = (function (){var el = document.createElement("fakeelement"),t;var transitions ={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for (t in transitions){if (el.style[t] !== undefined){return transitions[t];}}return "transitionend";})();// Force redraw on an element.
// This helps in cases where the browser doesn't redraw an updated element properly
// ================================================================================
var forceRedraw = function ($el) {
return $el && $el.length && $el[0].offsetHeight;
};
// Exclude array (`buttons`) options from deep merging
// ===================================================
var mergeOpts = function (opts1, opts2) {
var rez = $.extend(true, {}, opts1, opts2);
$.each(opts2, function (key, value) {
if ($.isArray(value)) {
rez[key] = value;
}
});
return rez;
};
// How much of an element is visible in viewport
// =============================================
var inViewport = function (elem) {
var elemCenter, rez;
if (!elem || elem.ownerDocument !== document) {
return false;
}
$(".fancybox-container").css("pointer-events", "none");
elemCenter = {
x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
};
rez = document.elementFromPoint(elemCenter.x, elemCenter.y) === elem;
$(".fancybox-container").css("pointer-events", "");
return rez;
};
// Class definition
// ================
var FancyBox = function (content, opts, index) {
var self = this;
self.opts = mergeOpts({
index: index
}, $.fancybox.defaults);
if ($.isPlainObject(opts)) {
self.opts = mergeOpts(self.opts, opts);
}
if ($.fancybox.isMobile) {
self.opts = mergeOpts(self.opts, self.opts.mobile);
}
self.id = self.opts.id || ++called;
self.currIndex = parseInt(self.opts.index, 10) || 0;
self.prevIndex = null;
self.prevPos = null;
self.currPos = 0;
self.firstRun = true;
// All group items
self.group = [];
// Existing slides (for current, next and previous gallery items)
self.slides = {};
// Create group elements
self.addContent(content);
if (!self.group.length) {
return;
}
self.init();
};
$.extend(FancyBox.prototype, {
// Create DOM structure
// ====================
init: function () {
var self = this,
firstItem = self.group[self.currIndex],
firstItemOpts = firstItem.opts,
$container,
buttonStr;
if (firstItemOpts.closeExisting) {
$.fancybox.close(true);
}
// Hide scrollbars
// ===============
$("body").addClass("fancybox-active");
if (
!$.fancybox.getInstance() &&
firstItemOpts.hideScrollbar !== false &&
!$.fancybox.isMobile &&
document.body.scrollHeight > window.innerHeight
) {
$("head").append(
'"
);
$("body").addClass("compensate-for-scrollbar");
}
// Build html markup and set references
// ====================================
// Build html code for buttons and insert into main template
buttonStr = "";
$.each(firstItemOpts.buttons, function (index, value) {
buttonStr += firstItemOpts.btnTpl[value] || "";
});
// Create markup from base template, it will be initially hidden to
// avoid unnecessary work like painting while initializing is not complete
$container = $(
self.translate(
self,
firstItemOpts.baseTpl
.replace("{{buttons}}", buttonStr)
.replace("{{arrows}}", firstItemOpts.btnTpl.arrowLeft + firstItemOpts.btnTpl.arrowRight)
)
)
.attr("id", "fancybox-container-" + self.id)
.addClass(firstItemOpts.baseClass)
.data("FancyBox", self)
.appendTo(firstItemOpts.parentEl);
// Create object holding references to jQuery wrapped nodes
self.$refs = {
container: $container
};
["bg", "inner", "infobar", "toolbar", "stage", "caption", "navigation"].forEach(function (item) {
self.$refs[item] = $container.find(".fancybox-" + item);
});
self.trigger("onInit");
// Enable events, deactive previous instances
self.activate();
// Build slides, load and reveal content
self.jumpTo(self.currIndex);
},
// Simple i18n support - replaces object keys found in template
// with corresponding values
// ============================================================
translate: function (obj, str) {
var arr = obj.opts.i18n[obj.opts.lang] || obj.opts.i18n.en;
return str.replace(/\{\{(\w+)\}\}/g, function (match, n) {
return arr[n] === undefined ? match : arr[n];
});
},
// Populate current group with fresh content
// Check if each object has valid type and content
// ===============================================
addContent: function (content) {
var self = this,
items = $.makeArray(content),
thumbs;
$.each(items, function (i, item) {
var obj = {},
opts = {},
$item,
type,
found,
src,
srcParts;
// Step 1 - Make sure we have an object
// ====================================
if ($.isPlainObject(item)) {
// We probably have manual usage here, something like
// $.fancybox.open( [ { src : "image.jpg", type : "image" } ] )
obj = item;
opts = item.opts || item;
} else if ($.type(item) === "object" && $(item).length) {
// Here we probably have jQuery collection returned by some selector
$item = $(item);
// Support attributes like `data-options='{"touch" :false}'` and `data-touch='false'`
opts = $item.data() || {};
opts = $.extend(true, {}, opts, opts.options);
// Here we store clicked element
opts.$orig = $item;
obj.src = self.opts.src || opts.src || $item.attr("href");
// Assume that simple syntax is used, for example:
// `$.fancybox.open( $("#test"), {} );`
if (!obj.type && !obj.src) {
obj.type = "inline";
obj.src = item;
}
} else {
// Assume we have a simple html code, for example:
// $.fancybox.open( '
Hi!
' );
obj = {
type: "html",
src: item + ""
};
}
// Each gallery object has full collection of options
obj.opts = $.extend(true, {}, self.opts, opts);
// Do not merge buttons array
if ($.isArray(opts.buttons)) {
obj.opts.buttons = opts.buttons;
}
if ($.fancybox.isMobile && obj.opts.mobile) {
obj.opts = mergeOpts(obj.opts, obj.opts.mobile);
}
// Step 2 - Make sure we have content type, if not - try to guess
// ==============================================================
type = obj.type || obj.opts.type;
src = obj.src || "";
if (!type && src) {
if ((found = src.match(/\.(mp4|mov|ogv|webm)((\?|#).*)?$/i))) {
type = "video";
if (!obj.opts.video.format) {
obj.opts.video.format = "video/" + (found[1] === "ogv" ? "ogg" : found[1]);
}
} else if (src.match(/(^data:image\/[a-z0-9+\/=]*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg|ico)((\?|#).*)?$)/i)) {
type = "image";
} else if (src.match(/\.(pdf)((\?|#).*)?$/i)) {
type = "iframe";
obj = $.extend(true, obj, {
contentType: "pdf",
opts: {
iframe: {
preload: false
}
}
});
} else if (src.charAt(0) === "#") {
type = "inline";
}
}
if (type) {
obj.type = type;
} else {
self.trigger("objectNeedsType", obj);
}
if (!obj.contentType) {
obj.contentType = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1 ? "html" : obj.type;
}
// Step 3 - Some adjustments
// =========================
obj.index = self.group.length;
if (obj.opts.smallBtn == "auto") {
obj.opts.smallBtn = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1;
}
if (obj.opts.toolbar === "auto") {
obj.opts.toolbar = !obj.opts.smallBtn;
}
// Find thumbnail image, check if exists and if is in the viewport
obj.$thumb = obj.opts.$thumb || null;
if (obj.opts.$trigger && obj.index === self.opts.index) {
obj.$thumb = obj.opts.$trigger.find("img:first");
if (obj.$thumb.length) {
obj.opts.$orig = obj.opts.$trigger;
}
}
if (!(obj.$thumb && obj.$thumb.length) && obj.opts.$orig) {
obj.$thumb = obj.opts.$orig.find("img:first");
}
if (obj.$thumb && !obj.$thumb.length) {
obj.$thumb = null;
}
obj.thumb = obj.opts.thumb || (obj.$thumb ? obj.$thumb[0].src : null);
// "caption" is a "special" option, it can be used to customize caption per gallery item
if ($.type(obj.opts.caption) === "function") {
obj.opts.caption = obj.opts.caption.apply(item, [self, obj]);
}
if ($.type(self.opts.caption) === "function") {
obj.opts.caption = self.opts.caption.apply(item, [self, obj]);
}
// Make sure we have caption as a string or jQuery object
if (!(obj.opts.caption instanceof $)) {
obj.opts.caption = obj.opts.caption === undefined ? "" : obj.opts.caption + "";
}
// Check if url contains "filter" used to filter the content
// Example: "ajax.html #something"
if (obj.type === "ajax") {
srcParts = src.split(/\s+/, 2);
if (srcParts.length > 1) {
obj.src = srcParts.shift();
obj.opts.filter = srcParts.shift();
}
}
// Hide all buttons and disable interactivity for modal items
if (obj.opts.modal) {
obj.opts = $.extend(true, obj.opts, {
trapFocus: true,
// Remove buttons
infobar: 0,
toolbar: 0,
smallBtn: 0,
// Disable keyboard navigation
keyboard: 0,
// Disable some modules
slideShow: 0,
fullScreen: 0,
thumbs: 0,
touch: 0,
// Disable click event handlers
clickContent: false,
clickSlide: false,
clickOutside: false,
dblclickContent: false,
dblclickSlide: false,
dblclickOutside: false
});
}
// Step 4 - Add processed object to group
// ======================================
self.group.push(obj);
});
// Update controls if gallery is already opened
if (Object.keys(self.slides).length) {
self.updateControls();
// Update thumbnails, if needed
thumbs = self.Thumbs;
if (thumbs && thumbs.isActive) {
thumbs.create();
thumbs.focus();
}
}
},
// Attach an event handler functions for:
// - navigation buttons
// - browser scrolling, resizing;
// - focusing
// - keyboard
// - detecting inactivity
// ======================================
addEvents: function () {
var self = this;
self.removeEvents();
// Make navigation elements clickable
// ==================================
self.$refs.container
.on("click.fb-close", "[data-fancybox-close]", function (e) {
e.stopPropagation();
e.preventDefault();
self.close(e);
})
.on("touchstart.fb-prev click.fb-prev", "[data-fancybox-prev]", function (e) {
e.stopPropagation();
e.preventDefault();
self.previous();
})
.on("touchstart.fb-next click.fb-next", "[data-fancybox-next]", function (e) {
e.stopPropagation();
e.preventDefault();
self.next();
})
.on("click.fb", "[data-fancybox-zoom]", function (e) {
// Click handler for zoom button
self[self.isScaledDown() ? "scaleToActual" : "scaleToFit"]();
});
// Handle page scrolling and browser resizing
// ==========================================
$W.on("orientationchange.fb resize.fb", function (e) {
if (e && e.originalEvent && e.originalEvent.type === "resize") {
if (self.requestId) {
cancelAFrame(self.requestId);
}
self.requestId = requestAFrame(function () {
self.update(e);
});
} else {
if (self.current && self.current.type === "iframe") {
self.$refs.stage.hide();
}
setTimeout(
function () {
self.$refs.stage.show();
self.update(e);
},
$.fancybox.isMobile ? 600 : 250
);
}
});
$D.on("keydown.fb", function (e) {
var instance = $.fancybox ? $.fancybox.getInstance() : null,
current = instance.current,
keycode = e.keyCode || e.which;
// Trap keyboard focus inside of the modal
// =======================================
if (keycode == 9) {
if (current.opts.trapFocus) {
self.focus(e);
}
return;
}
// Enable keyboard navigation
// ==========================
if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input,textarea,video,audio,select")) {
return;
}
// Backspace and Esc keys
if (keycode === 8 || keycode === 27) {
e.preventDefault();
self.close(e);
return;
}
// Left arrow and Up arrow
if (keycode === 37 || keycode === 38) {
e.preventDefault();
self.previous();
return;
}
// Righ arrow and Down arrow
if (keycode === 39 || keycode === 40) {
e.preventDefault();
self.next();
return;
}
self.trigger("afterKeydown", e, keycode);
});
// Hide controls after some inactivity period
if (self.group[self.currIndex].opts.idleTime) {
self.idleSecondsCounter = 0;
$D.on(
"mousemove.fb-idle mouseleave.fb-idle mousedown.fb-idle touchstart.fb-idle touchmove.fb-idle scroll.fb-idle keydown.fb-idle",
function (e) {
self.idleSecondsCounter = 0;
if (self.isIdle) {
self.showControls();
}
self.isIdle = false;
}
);
self.idleInterval = window.setInterval(function () {
self.idleSecondsCounter++;
if (self.idleSecondsCounter >= self.group[self.currIndex].opts.idleTime && !self.isDragging) {
self.isIdle = true;
self.idleSecondsCounter = 0;
self.hideControls();
}
}, 1000);
}
},
// Remove events added by the core
// ===============================
removeEvents: function () {
var self = this;
$W.off("orientationchange.fb resize.fb");
$D.off("keydown.fb .fb-idle");
this.$refs.container.off(".fb-close .fb-prev .fb-next");
if (self.idleInterval) {
window.clearInterval(self.idleInterval);
self.idleInterval = null;
}
},
// Change to previous gallery item
// ===============================
previous: function (duration) {
return this.jumpTo(this.currPos - 1, duration);
},
// Change to next gallery item
// ===========================
next: function (duration) {
return this.jumpTo(this.currPos + 1, duration);
},
// Switch to selected gallery item
// ===============================
jumpTo: function (pos, duration) {
var self = this,
groupLen = self.group.length,
firstRun,
isMoved,
loop,
current,
previous,
slidePos,
stagePos,
prop,
diff;
if (self.isDragging || self.isClosing || (self.isAnimating && self.firstRun)) {
return;
}
// Should loop?
pos = parseInt(pos, 10);
loop = self.current ? self.current.opts.loop : self.opts.loop;
if (!loop && (pos < 0 || pos >= groupLen)) {
return false;
}
// Check if opening for the first time; this helps to speed things up
firstRun = self.firstRun = !Object.keys(self.slides).length;
// Create slides
previous = self.current;
self.prevIndex = self.currIndex;
self.prevPos = self.currPos;
current = self.createSlide(pos);
if (groupLen > 1) {
if (loop || current.index < groupLen - 1) {
self.createSlide(pos + 1);
}
if (loop || current.index > 0) {
self.createSlide(pos - 1);
}
}
self.current = current;
self.currIndex = current.index;
self.currPos = current.pos;
self.trigger("beforeShow", firstRun);
self.updateControls();
// Validate duration length
current.forcedDuration = undefined;
if ($.isNumeric(duration)) {
current.forcedDuration = duration;
} else {
duration = current.opts[firstRun ? "animationDuration" : "transitionDuration"];
}
duration = parseInt(duration, 10);
// Check if user has swiped the slides or if still animating
isMoved = self.isMoved(current);
// Make sure current slide is visible
current.$slide.addClass("fancybox-slide--current");
// Fresh start - reveal container, current slide and start loading content
if (firstRun) {
if (current.opts.animationEffect && duration) {
self.$refs.container.css("transition-duration", duration + "ms");
}
self.$refs.container.addClass("fancybox-is-open").trigger("focus");
// Attempt to load content into slide
// This will later call `afterLoad` -> `revealContent`
self.loadSlide(current);
self.preload("image");
return;
}
// Get actual slide/stage positions (before cleaning up)
slidePos = $.fancybox.getTranslate(previous.$slide);
stagePos = $.fancybox.getTranslate(self.$refs.stage);
// Clean up all slides
$.each(self.slides, function (index, slide) {
$.fancybox.stop(slide.$slide, true);
});
if (previous.pos !== current.pos) {
previous.isComplete = false;
}
previous.$slide.removeClass("fancybox-slide--complete fancybox-slide--current");
// If slides are out of place, then animate them to correct position
if (isMoved) {
// Calculate horizontal swipe distance
diff = slidePos.left - (previous.pos * slidePos.width + previous.pos * previous.opts.gutter);
$.each(self.slides, function (index, slide) {
slide.$slide.removeClass("fancybox-animated").removeClass(function (index, className) {
return (className.match(/(^|\s)fancybox-fx-\S+/g) || []).join(" ");
});
// Make sure that each slide is in equal distance
// This is mostly needed for freshly added slides, because they are not yet positioned
var leftPos = slide.pos * slidePos.width + slide.pos * slide.opts.gutter;
$.fancybox.setTranslate(slide.$slide, {
top: 0,
left: leftPos - stagePos.left + diff
});
if (slide.pos !== current.pos) {
slide.$slide.addClass("fancybox-slide--" + (slide.pos > current.pos ? "next" : "previous"));
}
// Redraw to make sure that transition will start
forceRedraw(slide.$slide);
// Animate the slide
$.fancybox.animate(
slide.$slide, {
top: 0,
left: (slide.pos - current.pos) * slidePos.width + (slide.pos - current.pos) * slide.opts.gutter
},
duration,
function () {
slide.$slide
.css({
transform: "",
opacity: ""
})
.removeClass("fancybox-slide--next fancybox-slide--previous");
if (slide.pos === self.currPos) {
self.complete();
}
}
);
});
} else if (duration && current.opts.transitionEffect) {
// Set transition effect for previously active slide
prop = "fancybox-animated fancybox-fx-" + current.opts.transitionEffect;
previous.$slide.addClass("fancybox-slide--" + (previous.pos > current.pos ? "next" : "previous"));
$.fancybox.animate(
previous.$slide,
prop,
duration,
function () {
previous.$slide.removeClass(prop).removeClass("fancybox-slide--next fancybox-slide--previous");
},
false
);
}
if (current.isLoaded) {
self.revealContent(current);
} else {
self.loadSlide(current);
}
self.preload("image");
},
// Create new "slide" element
// These are gallery items that are actually added to DOM
// =======================================================
createSlide: function (pos) {
var self = this,
$slide,
index;
index = pos % self.group.length;
index = index < 0 ? self.group.length + index : index;
if (!self.slides[pos] && self.group[index]) {
$slide = $('').appendTo(self.$refs.stage);
self.slides[pos] = $.extend(true, {}, self.group[index], {
pos: pos,
$slide: $slide,
isLoaded: false
});
self.updateSlide(self.slides[pos]);
}
return self.slides[pos];
},
// Scale image to the actual size of the image;
// x and y values should be relative to the slide
// ==============================================
scaleToActual: function (x, y, duration) {
var self = this,
current = self.current,
$content = current.$content,
canvasWidth = $.fancybox.getTranslate(current.$slide).width,
canvasHeight = $.fancybox.getTranslate(current.$slide).height,
newImgWidth = current.width,
newImgHeight = current.height,
imgPos,
posX,
posY,
scaleX,
scaleY;
if (self.isAnimating || self.isMoved() || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
return;
}
self.isAnimating = true;
$.fancybox.stop($content);
x = x === undefined ? canvasWidth * 0.5 : x;
y = y === undefined ? canvasHeight * 0.5 : y;
imgPos = $.fancybox.getTranslate($content);
imgPos.top -= $.fancybox.getTranslate(current.$slide).top;
imgPos.left -= $.fancybox.getTranslate(current.$slide).left;
scaleX = newImgWidth / imgPos.width;
scaleY = newImgHeight / imgPos.height;
// Get center position for original image
posX = canvasWidth * 0.5 - newImgWidth * 0.5;
posY = canvasHeight * 0.5 - newImgHeight * 0.5;
// Make sure image does not move away from edges
if (newImgWidth > canvasWidth) {
posX = imgPos.left * scaleX - (x * scaleX - x);
if (posX > 0) {
posX = 0;
}
if (posX < canvasWidth - newImgWidth) {
posX = canvasWidth - newImgWidth;
}
}
if (newImgHeight > canvasHeight) {
posY = imgPos.top * scaleY - (y * scaleY - y);
if (posY > 0) {
posY = 0;
}
if (posY < canvasHeight - newImgHeight) {
posY = canvasHeight - newImgHeight;
}
}
self.updateCursor(newImgWidth, newImgHeight);
$.fancybox.animate(
$content, {
top: posY,
left: posX,
scaleX: scaleX,
scaleY: scaleY
},
duration || 366,
function () {
self.isAnimating = false;
}
);
// Stop slideshow
if (self.SlideShow && self.SlideShow.isActive) {
self.SlideShow.stop();
}
},
// Scale image to fit inside parent element
// ========================================
scaleToFit: function (duration) {
var self = this,
current = self.current,
$content = current.$content,
end;
if (self.isAnimating || self.isMoved() || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
return;
}
self.isAnimating = true;
$.fancybox.stop($content);
end = self.getFitPos(current);
self.updateCursor(end.width, end.height);
$.fancybox.animate(
$content, {
top: end.top,
left: end.left,
scaleX: end.width / $content.width(),
scaleY: end.height / $content.height()
},
duration || 366,
function () {
self.isAnimating = false;
}
);
},
// Calculate image size to fit inside viewport
// ===========================================
getFitPos: function (slide) {
var self = this,
$content = slide.$content,
$slide = slide.$slide,
width = slide.width || slide.opts.width,
height = slide.height || slide.opts.height,
maxWidth,
maxHeight,
minRatio,
aspectRatio,
rez = {};
if (!slide.isLoaded || !$content || !$content.length) {
return false;
}
maxWidth = $.fancybox.getTranslate(self.$refs.stage).width;
maxHeight = $.fancybox.getTranslate(self.$refs.stage).height;
maxWidth -=
parseFloat($slide.css("paddingLeft")) +
parseFloat($slide.css("paddingRight")) +
parseFloat($content.css("marginLeft")) +
parseFloat($content.css("marginRight"));
maxHeight -=
parseFloat($slide.css("paddingTop")) +
parseFloat($slide.css("paddingBottom")) +
parseFloat($content.css("marginTop")) +
parseFloat($content.css("marginBottom"));
if (!width || !height) {
width = maxWidth;
height = maxHeight;
}
minRatio = Math.min(1, maxWidth / width, maxHeight / height);
width = minRatio * width;
height = minRatio * height;
// Adjust width/height to precisely fit into container
if (width > maxWidth - 0.5) {
width = maxWidth;
}
if (height > maxHeight - 0.5) {
height = maxHeight;
}
if (slide.type === "image") {
rez.top = Math.floor((maxHeight - height) * 0.5) + parseFloat($slide.css("paddingTop"));
rez.left = Math.floor((maxWidth - width) * 0.5) + parseFloat($slide.css("paddingLeft"));
} else if (slide.contentType === "video") {
// Force aspect ratio for the video
// "I say the whole world must learn of our peaceful ways… by force!"
aspectRatio = slide.opts.width && slide.opts.height ? width / height : slide.opts.ratio || 16 / 9;
if (height > width / aspectRatio) {
height = width / aspectRatio;
} else if (width > height * aspectRatio) {
width = height * aspectRatio;
}
}
rez.width = width;
rez.height = height;
return rez;
},
// Update content size and position for all slides
// ==============================================
update: function (e) {
var self = this;
$.each(self.slides, function (key, slide) {
self.updateSlide(slide, e);
});
},
// Update slide content position and size
// ======================================
updateSlide: function (slide, e) {
var self = this,
$content = slide && slide.$content,
width = slide.width || slide.opts.width,
height = slide.height || slide.opts.height,
$slide = slide.$slide;
// First, prevent caption overlap, if needed
self.adjustCaption(slide);
// Then resize content to fit inside the slide
if ($content && (width || height || slide.contentType === "video") && !slide.hasError) {
$.fancybox.stop($content);
$.fancybox.setTranslate($content, self.getFitPos(slide));
if (slide.pos === self.currPos) {
self.isAnimating = false;
self.updateCursor();
}
}
// Then some adjustments
self.adjustLayout(slide);
if ($slide.length) {
$slide.trigger("refresh");
if (slide.pos === self.currPos) {
self.$refs.toolbar
.add(self.$refs.navigation.find(".fancybox-button--arrow_right"))
.toggleClass("compensate-for-scrollbar", $slide.get(0).scrollHeight > $slide.get(0).clientHeight);
}
}
self.trigger("onUpdate", slide, e);
},
// Horizontally center slide
// =========================
centerSlide: function (duration) {
var self = this,
current = self.current,
$slide = current.$slide;
if (self.isClosing || !current) {
return;
}
$slide.siblings().css({
transform: "",
opacity: ""
});
$slide
.parent()
.children()
.removeClass("fancybox-slide--previous fancybox-slide--next");
$.fancybox.animate(
$slide, {
top: 0,
left: 0,
opacity: 1
},
duration === undefined ? 0 : duration,
function () {
// Clean up
$slide.css({
transform: "",
opacity: ""
});
if (!current.isComplete) {
self.complete();
}
},
false
);
},
// Check if current slide is moved (swiped)
// ========================================
isMoved: function (slide) {
var current = slide || this.current,
slidePos,
stagePos;
if (!current) {
return false;
}
stagePos = $.fancybox.getTranslate(this.$refs.stage);
slidePos = $.fancybox.getTranslate(current.$slide);
return (
!current.$slide.hasClass("fancybox-animated") &&
(Math.abs(slidePos.top - stagePos.top) > 0.5 || Math.abs(slidePos.left - stagePos.left) > 0.5)
);
},
// Update cursor style depending if content can be zoomed
// ======================================================
updateCursor: function (nextWidth, nextHeight) {
var self = this,
current = self.current,
$container = self.$refs.container,
canPan,
isZoomable;
if (!current || self.isClosing || !self.Guestures) {
return;
}
$container.removeClass("fancybox-is-zoomable fancybox-can-zoomIn fancybox-can-zoomOut fancybox-can-swipe fancybox-can-pan");
canPan = self.canPan(nextWidth, nextHeight);
isZoomable = canPan ? true : self.isZoomable();
$container.toggleClass("fancybox-is-zoomable", isZoomable);
$("[data-fancybox-zoom]").prop("disabled", !isZoomable);
if (canPan) {
$container.addClass("fancybox-can-pan");
} else if (
isZoomable &&
(current.opts.clickContent === "zoom" || ($.isFunction(current.opts.clickContent) && current.opts.clickContent(current) == "zoom"))
) {
$container.addClass("fancybox-can-zoomIn");
} else if (current.opts.touch && (current.opts.touch.vertical || self.group.length > 1) && current.contentType !== "video") {
$container.addClass("fancybox-can-swipe");
}
},
// Check if current slide is zoomable
// ==================================
isZoomable: function () {
var self = this,
current = self.current,
fitPos;
// Assume that slide is zoomable if:
// - image is still loading
// - actual size of the image is smaller than available area
if (current && !self.isClosing && current.type === "image" && !current.hasError) {
if (!current.isLoaded) {
return true;
}
fitPos = self.getFitPos(current);
if (fitPos && (current.width > fitPos.width || current.height > fitPos.height)) {
return true;
}
}
return false;
},
// Check if current image dimensions are smaller than actual
// =========================================================
isScaledDown: function (nextWidth, nextHeight) {
var self = this,
rez = false,
current = self.current,
$content = current.$content;
if (nextWidth !== undefined && nextHeight !== undefined) {
rez = nextWidth < current.width && nextHeight < current.height;
} else if ($content) {
rez = $.fancybox.getTranslate($content);
rez = rez.width < current.width && rez.height < current.height;
}
return rez;
},
// Check if image dimensions exceed parent element
// ===============================================
canPan: function (nextWidth, nextHeight) {
var self = this,
current = self.current,
pos = null,
rez = false;
if (current.type === "image" && (current.isComplete || (nextWidth && nextHeight)) && !current.hasError) {
rez = self.getFitPos(current);
if (nextWidth !== undefined && nextHeight !== undefined) {
pos = {
width: nextWidth,
height: nextHeight
};
} else if (current.isComplete) {
pos = $.fancybox.getTranslate(current.$content);
}
if (pos && rez) {
rez = Math.abs(pos.width - rez.width) > 1.5 || Math.abs(pos.height - rez.height) > 1.5;
}
}
return rez;
},
// Load content into the slide
// ===========================
loadSlide: function (slide) {
var self = this,
type,
$slide,
ajaxLoad;
if (slide.isLoading || slide.isLoaded) {
return;
}
slide.isLoading = true;
if (self.trigger("beforeLoad", slide) === false) {
slide.isLoading = false;
return false;
}
type = slide.type;
$slide = slide.$slide;
$slide
.off("refresh")
.trigger("onReset")
.addClass(slide.opts.slideClass);
// Create content depending on the type
switch (type) {
case "image":
self.setImage(slide);
break;
case "iframe":
self.setIframe(slide);
break;
case "html":
self.setContent(slide, slide.src || slide.content);
break;
case "video":
self.setContent(
slide,
slide.opts.video.tpl
.replace(/\{\{src\}\}/gi, slide.src)
.replace("{{format}}", slide.opts.videoFormat || slide.opts.video.format || "")
.replace("{{poster}}", slide.thumb || "")
);
break;
case "inline":
if ($(slide.src).length) {
self.setContent(slide, $(slide.src));
} else {
self.setError(slide);
}
break;
case "ajax":
self.showLoading(slide);
ajaxLoad = $.ajax(
$.extend({}, slide.opts.ajax.settings, {
url: slide.src,
success: function (data, textStatus) {
if (textStatus === "success") {
self.setContent(slide, data);
}
},
error: function (jqXHR, textStatus) {
if (jqXHR && textStatus !== "abort") {
self.setError(slide);
}
}
})
);
$slide.one("onReset", function () {
ajaxLoad.abort();
});
break;
default:
self.setError(slide);
break;
}
return true;
},
// Use thumbnail image, if possible
// ================================
setImage: function (slide) {
var self = this,
ghost;
// Check if need to show loading icon
setTimeout(function () {
var $img = slide.$image;
if (!self.isClosing && slide.isLoading && (!$img || !$img.length || !$img[0].complete) && !slide.hasError) {
self.showLoading(slide);
}
}, 50);
//Check if image has srcset
self.checkSrcset(slide);
// This will be wrapper containing both ghost and actual image
slide.$content = $('')
.addClass("fancybox-is-hidden")
.appendTo(slide.$slide.addClass("fancybox-slide--image"));
// If we have a thumbnail, we can display it while actual image is loading
// Users will not stare at black screen and actual image will appear gradually
if (slide.opts.preload !== false && slide.opts.width && slide.opts.height && slide.thumb) {
slide.width = slide.opts.width;
slide.height = slide.opts.height;
ghost = document.createElement("img");
ghost.onerror = function () {
$(this).remove();
slide.$ghost = null;
};
ghost.onload = function () {
self.afterLoad(slide);
};
slide.$ghost = $(ghost)
.addClass("fancybox-image")
.appendTo(slide.$content)
.attr("src", slide.thumb);
}
// Start loading actual image
self.setBigImage(slide);
},
// Check if image has srcset and get the source
// ============================================
checkSrcset: function (slide) {
var srcset = slide.opts.srcset || slide.opts.image.srcset,
found,
temp,
pxRatio,
windowWidth;
// If we have "srcset", then we need to find first matching "src" value.
// This is necessary, because when you set an src attribute, the browser will preload the image
// before any javascript or even CSS is applied.
if (srcset) {
pxRatio = window.devicePixelRatio || 1;
windowWidth = window.innerWidth * pxRatio;
temp = srcset.split(",").map(function (el) {
var ret = {};
el.trim()
.split(/\s+/)
.forEach(function (el, i) {
var value = parseInt(el.substring(0, el.length - 1), 10);
if (i === 0) {
return (ret.url = el);
}
if (value) {
ret.value = value;
ret.postfix = el[el.length - 1];
}
});
return ret;
});
// Sort by value
temp.sort(function (a, b) {
return a.value - b.value;
});
// Ok, now we have an array of all srcset values
for (var j = 0; j < temp.length; j++) {
var el = temp[j];
if ((el.postfix === "w" && el.value >= windowWidth) || (el.postfix === "x" && el.value >= pxRatio)) {
found = el;
break;
}
}
// If not found, take the last one
if (!found && temp.length) {
found = temp[temp.length - 1];
}
if (found) {
slide.src = found.url;
// If we have default width/height values, we can calculate height for matching source
if (slide.width && slide.height && found.postfix == "w") {
slide.height = (slide.width / slide.height) * found.value;
slide.width = found.value;
}
slide.opts.srcset = srcset;
}
}
},
// Create full-size image
// ======================
setBigImage: function (slide) {
var self = this,
img = document.createElement("img"),
$img = $(img);
slide.$image = $img
.one("error", function () {
self.setError(slide);
})
.one("load", function () {
var sizes;
if (!slide.$ghost) {
self.resolveImageSlideSize(slide, this.naturalWidth, this.naturalHeight);
self.afterLoad(slide);
}
if (self.isClosing) {
return;
}
if (slide.opts.srcset) {
sizes = slide.opts.sizes;
if (!sizes || sizes === "auto") {
sizes =
(slide.width / slide.height > 1 && $W.width() / $W.height() > 1 ? "100" : Math.round((slide.width / slide.height) * 100)) +
"vw";
}
$img.attr("sizes", sizes).attr("srcset", slide.opts.srcset);
}
// Hide temporary image after some delay
if (slide.$ghost) {
setTimeout(function () {
if (slide.$ghost && !self.isClosing) {
slide.$ghost.hide();
}
}, Math.min(300, Math.max(1000, slide.height / 1600)));
}
self.hideLoading(slide);
})
.addClass("fancybox-image")
.attr("src", slide.src)
.appendTo(slide.$content);
if ((img.complete || img.readyState == "complete") && $img.naturalWidth && $img.naturalHeight) {
$img.trigger("load");
} else if (img.error) {
$img.trigger("error");
}
},
// Computes the slide size from image size and maxWidth/maxHeight
// ==============================================================
resolveImageSlideSize: function (slide, imgWidth, imgHeight) {
var maxWidth = parseInt(slide.opts.width, 10),
maxHeight = parseInt(slide.opts.height, 10);
// Sets the default values from the image
slide.width = imgWidth;
slide.height = imgHeight;
if (maxWidth > 0) {
slide.width = maxWidth;
slide.height = Math.floor((maxWidth * imgHeight) / imgWidth);
}
if (maxHeight > 0) {
slide.width = Math.floor((maxHeight * imgWidth) / imgHeight);
slide.height = maxHeight;
}
},
// Create iframe wrapper, iframe and bindings
// ==========================================
setIframe: function (slide) {
var self = this,
opts = slide.opts.iframe,
$slide = slide.$slide,
$iframe;
slide.$content = $('')
.css(opts.css)
.appendTo($slide);
$slide.addClass("fancybox-slide--" + slide.contentType);
slide.$iframe = $iframe = $(opts.tpl.replace(/\{rnd\}/g, new Date().getTime()))
.attr(opts.attr)
.appendTo(slide.$content);
if (opts.preload) {
self.showLoading(slide);
// Unfortunately, it is not always possible to determine if iframe is successfully loaded
// (due to browser security policy)
$iframe.on("load.fb error.fb", function (e) {
this.isReady = 1;
slide.$slide.trigger("refresh");
self.afterLoad(slide);
});
// Recalculate iframe content size
// ===============================
$slide.on("refresh.fb", function () {
var $content = slide.$content,
frameWidth = opts.css.width,
frameHeight = opts.css.height,
$contents,
$body;
if ($iframe[0].isReady !== 1) {
return;
}
try {
$contents = $iframe.contents();
$body = $contents.find("body");
} catch (ignore) {}
// Calculate content dimensions, if it is accessible
if ($body && $body.length && $body.children().length) {
// Avoid scrolling to top (if multiple instances)
$slide.css("overflow", "visible");
$content.css({
width: "100%",
"max-width": "100%",
height: "9999px"
});
if (frameWidth === undefined) {
frameWidth = Math.ceil(Math.max($body[0].clientWidth, $body.outerWidth(true)));
}
$content.css("width", frameWidth ? frameWidth : "").css("max-width", "");
if (frameHeight === undefined) {
frameHeight = Math.ceil(Math.max($body[0].clientHeight, $body.outerHeight(true)));
}
$content.css("height", frameHeight ? frameHeight : "");
$slide.css("overflow", "auto");
}
$content.removeClass("fancybox-is-hidden");
});
} else {
self.afterLoad(slide);
}
$iframe.attr("src", slide.src);
// Remove iframe if closing or changing gallery item
$slide.one("onReset", function () {
// This helps IE not to throw errors when closing
try {
$(this)
.find("iframe")
.hide()
.unbind()
.attr("src", "//about:blank");
} catch (ignore) {}
$(this)
.off("refresh.fb")
.empty();
slide.isLoaded = false;
slide.isRevealed = false;
});
},
// Wrap and append content to the slide
// ======================================
setContent: function (slide, content) {
var self = this;
if (self.isClosing) {
return;
}
self.hideLoading(slide);
if (slide.$content) {
$.fancybox.stop(slide.$content);
}
slide.$slide.empty();
// If content is a jQuery object, then it will be moved to the slide.
// The placeholder is created so we will know where to put it back.
if (isQuery(content) && content.parent().length) {
// Make sure content is not already moved to fancyBox
if (content.hasClass("fancybox-content") || content.parent().hasClass("fancybox-content")) {
content.parents(".fancybox-slide").trigger("onReset");
}
// Create temporary element marking original place of the content
slide.$placeholder = $("
")
.hide()
.insertAfter(content);
// Make sure content is visible
content.css("display", "inline-block");
} else if (!slide.hasError) {
// If content is just a plain text, try to convert it to html
if ($.type(content) === "string") {
content = $("
")
.append($.trim(content))
.contents();
}
// If "filter" option is provided, then filter content
if (slide.opts.filter) {
content = $("
")
.html(content)
.find(slide.opts.filter);
}
}
slide.$slide.one("onReset", function () {
// Pause all html5 video/audio
$(this)
.find("video,audio")
.trigger("pause");
// Put content back
if (slide.$placeholder) {
slide.$placeholder.after(content.removeClass("fancybox-content").hide()).remove();
slide.$placeholder = null;
}
// Remove custom close button
if (slide.$smallBtn) {
slide.$smallBtn.remove();
slide.$smallBtn = null;
}
// Remove content and mark slide as not loaded
if (!slide.hasError) {
$(this).empty();
slide.isLoaded = false;
slide.isRevealed = false;
}
});
$(content).appendTo(slide.$slide);
if ($(content).is("video,audio")) {
$(content).addClass("fancybox-video");
$(content).wrap("");
slide.contentType = "video";
slide.opts.width = slide.opts.width || $(content).attr("width");
slide.opts.height = slide.opts.height || $(content).attr("height");
}
slide.$content = slide.$slide
.children()
.filter("div,form,main,video,audio,article,.fancybox-content")
.first();
slide.$content.siblings().hide();
// Re-check if there is a valid content
// (in some cases, ajax response can contain various elements or plain text)
if (!slide.$content.length) {
slide.$content = slide.$slide
.wrapInner("")
.children()
.first();
}
slide.$content.addClass("fancybox-content");
slide.$slide.addClass("fancybox-slide--" + slide.contentType);
self.afterLoad(slide);
},
// Display error message
// =====================
setError: function (slide) {
slide.hasError = true;
slide.$slide
.trigger("onReset")
.removeClass("fancybox-slide--" + slide.contentType)
.addClass("fancybox-slide--error");
slide.contentType = "html";
this.setContent(slide, this.translate(slide, slide.opts.errorTpl));
if (slide.pos === this.currPos) {
this.isAnimating = false;
}
},
// Show loading icon inside the slide
// ==================================
showLoading: function (slide) {
var self = this;
slide = slide || self.current;
if (slide && !slide.$spinner) {
slide.$spinner = $(self.translate(self, self.opts.spinnerTpl))
.appendTo(slide.$slide)
.hide()
.fadeIn("fast");
}
},
// Remove loading icon from the slide
// ==================================
hideLoading: function (slide) {
var self = this;
slide = slide || self.current;
if (slide && slide.$spinner) {
slide.$spinner.stop().remove();
delete slide.$spinner;
}
},
// Adjustments after slide content has been loaded
// ===============================================
afterLoad: function (slide) {
var self = this;
if (self.isClosing) {
return;
}
slide.isLoading = false;
slide.isLoaded = true;
self.trigger("afterLoad", slide);
self.hideLoading(slide);
// Add small close button
if (slide.opts.smallBtn && (!slide.$smallBtn || !slide.$smallBtn.length)) {
slide.$smallBtn = $(self.translate(slide, slide.opts.btnTpl.smallBtn)).appendTo(slide.$content);
}
// Disable right click
if (slide.opts.protect && slide.$content && !slide.hasError) {
slide.$content.on("contextmenu.fb", function (e) {
if (e.button == 2) {
e.preventDefault();
}
return true;
});
// Add fake element on top of the image
// This makes a bit harder for user to select image
if (slide.type === "image") {
$('').appendTo(slide.$content);
}
}
self.adjustCaption(slide);
self.adjustLayout(slide);
if (slide.pos === self.currPos) {
self.updateCursor();
}
self.revealContent(slide);
},
// Prevent caption overlap,
// fix css inconsistency across browsers
// =====================================
adjustCaption: function (slide) {
var self = this,
current = slide || self.current,
caption = current.opts.caption,
preventOverlap = current.opts.preventCaptionOverlap,
$caption = self.$refs.caption,
$clone,
captionH = false;
$caption.toggleClass("fancybox-caption--separate", preventOverlap);
if (preventOverlap && caption && caption.length) {
if (current.pos !== self.currPos) {
$clone = $caption.clone().appendTo($caption.parent());
$clone
.children()
.eq(0)
.empty()
.html(caption);
captionH = $clone.outerHeight(true);
$clone.empty().remove();
} else if (self.$caption) {
captionH = self.$caption.outerHeight(true);
}
current.$slide.css("padding-bottom", captionH || "");
}
},
// Simple hack to fix inconsistency across browsers, described here (affects Edge, too):
// https://bugzilla.mozilla.org/show_bug.cgi?id=748518
// ====================================================================================
adjustLayout: function (slide) {
var self = this,
current = slide || self.current,
scrollHeight,
marginBottom,
inlinePadding,
actualPadding;
if (current.isLoaded && current.opts.disableLayoutFix !== true) {
current.$content.css("margin-bottom", "");
// If we would always set margin-bottom for the content,
// then it would potentially break vertical align
if (current.$content.outerHeight() > current.$slide.height() + 0.5) {
inlinePadding = current.$slide[0].style["padding-bottom"];
actualPadding = current.$slide.css("padding-bottom");
if (parseFloat(actualPadding) > 0) {
scrollHeight = current.$slide[0].scrollHeight;
current.$slide.css("padding-bottom", 0);
if (Math.abs(scrollHeight - current.$slide[0].scrollHeight) < 1) {
marginBottom = actualPadding;
}
current.$slide.css("padding-bottom", inlinePadding);
}
}
current.$content.css("margin-bottom", marginBottom);
}
},
// Make content visible
// This method is called right after content has been loaded or
// user navigates gallery and transition should start
// ============================================================
revealContent: function (slide) {
var self = this,
$slide = slide.$slide,
end = false,
start = false,
isMoved = self.isMoved(slide),
isRevealed = slide.isRevealed,
effect,
effectClassName,
duration,
opacity;
slide.isRevealed = true;
effect = slide.opts[self.firstRun ? "animationEffect" : "transitionEffect"];
duration = slide.opts[self.firstRun ? "animationDuration" : "transitionDuration"];
duration = parseInt(slide.forcedDuration === undefined ? duration : slide.forcedDuration, 10);
if (isMoved || slide.pos !== self.currPos || !duration) {
effect = false;
}
// Check if can zoom
if (effect === "zoom") {
if (slide.pos === self.currPos && duration && slide.type === "image" && !slide.hasError && (start = self.getThumbPos(slide))) {
end = self.getFitPos(slide);
} else {
effect = "fade";
}
}
// Zoom animation
// ==============
if (effect === "zoom") {
self.isAnimating = true;
end.scaleX = end.width / start.width;
end.scaleY = end.height / start.height;
// Check if we need to animate opacity
opacity = slide.opts.zoomOpacity;
if (opacity == "auto") {
opacity = Math.abs(slide.width / slide.height - start.width / start.height) > 0.1;
}
if (opacity) {
start.opacity = 0.1;
end.opacity = 1;
}
// Draw image at start position
$.fancybox.setTranslate(slide.$content.removeClass("fancybox-is-hidden"), start);
forceRedraw(slide.$content);
// Start animation
$.fancybox.animate(slide.$content, end, duration, function () {
self.isAnimating = false;
self.complete();
});
return;
}
self.updateSlide(slide);
// Simply show content if no effect
// ================================
if (!effect) {
slide.$content.removeClass("fancybox-is-hidden");
if (!isRevealed && isMoved && slide.type === "image" && !slide.hasError) {
slide.$content.hide().fadeIn("fast");
}
if (slide.pos === self.currPos) {
self.complete();
}
return;
}
// Prepare for CSS transiton
// =========================
$.fancybox.stop($slide);
//effectClassName = "fancybox-animated fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-fx-" + effect;
effectClassName = "fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-animated fancybox-fx-" + effect;
$slide.addClass(effectClassName).removeClass("fancybox-slide--current"); //.addClass(effectClassName);
slide.$content.removeClass("fancybox-is-hidden");
// Force reflow
forceRedraw($slide);
if (slide.type !== "image") {
slide.$content.hide().show(0);
}
$.fancybox.animate(
$slide,
"fancybox-slide--current",
duration,
function () {
$slide.removeClass(effectClassName).css({
transform: "",
opacity: ""
});
if (slide.pos === self.currPos) {
self.complete();
}
},
true
);
},
// Check if we can and have to zoom from thumbnail
//================================================
getThumbPos: function (slide) {
var rez = false,
$thumb = slide.$thumb,
thumbPos,
btw,
brw,
bbw,
blw;
if (!$thumb || !inViewport($thumb[0])) {
return false;
}
thumbPos = $.fancybox.getTranslate($thumb);
btw = parseFloat($thumb.css("border-top-width") || 0);
brw = parseFloat($thumb.css("border-right-width") || 0);
bbw = parseFloat($thumb.css("border-bottom-width") || 0);
blw = parseFloat($thumb.css("border-left-width") || 0);
rez = {
top: thumbPos.top + btw,
left: thumbPos.left + blw,
width: thumbPos.width - brw - blw,
height: thumbPos.height - btw - bbw,
scaleX: 1,
scaleY: 1
};
return thumbPos.width > 0 && thumbPos.height > 0 ? rez : false;
},
// Final adjustments after current gallery item is moved to position
// and it`s content is loaded
// ==================================================================
complete: function () {
var self = this,
current = self.current,
slides = {},
$el;
if (self.isMoved() || !current.isLoaded) {
return;
}
if (!current.isComplete) {
current.isComplete = true;
current.$slide.siblings().trigger("onReset");
self.preload("inline");
// Trigger any CSS transiton inside the slide
forceRedraw(current.$slide);
current.$slide.addClass("fancybox-slide--complete");
// Remove unnecessary slides
$.each(self.slides, function (key, slide) {
if (slide.pos >= self.currPos - 1 && slide.pos <= self.currPos + 1) {
slides[slide.pos] = slide;
} else if (slide) {
$.fancybox.stop(slide.$slide);
slide.$slide.off().remove();
}
});
self.slides = slides;
}
self.isAnimating = false;
self.updateCursor();
self.trigger("afterShow");
// Autoplay first html5 video/audio
if (!!current.opts.video.autoStart) {
current.$slide
.find("video,audio")
.filter(":visible:first")
.trigger("play")
.one("ended", function () {
if (Document.exitFullscreen) {
Document.exitFullscreen();
} else if (this.webkitExitFullscreen) {
this.webkitExitFullscreen();
}
self.next();
});
}
// Try to focus on the first focusable element
if (current.opts.autoFocus && current.contentType === "html") {
// Look for the first input with autofocus attribute
$el = current.$content.find("input[autofocus]:enabled:visible:first");
if ($el.length) {
$el.trigger("focus");
} else {
self.focus(null, true);
}
}
// Avoid jumping
current.$slide.scrollTop(0).scrollLeft(0);
},
// Preload next and previous slides
// ================================
preload: function (type) {
var self = this,
prev,
next;
if (self.group.length < 2) {
return;
}
next = self.slides[self.currPos + 1];
prev = self.slides[self.currPos - 1];
if (prev && prev.type === type) {
self.loadSlide(prev);
}
if (next && next.type === type) {
self.loadSlide(next);
}
},
// Try to find and focus on the first focusable element
// ====================================================
focus: function (e, firstRun) {
var self = this,
focusableStr = [
"a[href]",
"area[href]",
'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
"select:not([disabled]):not([aria-hidden])",
"textarea:not([disabled]):not([aria-hidden])",
"button:not([disabled]):not([aria-hidden])",
"iframe",
"object",
"embed",
"video",
"audio",
"[contenteditable]",
'[tabindex]:not([tabindex^="-"])'
].join(","),
focusableItems,
focusedItemIndex;
if (self.isClosing) {
return;
}
if (e || !self.current || !self.current.isComplete) {
// Focus on any element inside fancybox
focusableItems = self.$refs.container.find("*:visible");
} else {
// Focus inside current slide
focusableItems = self.current.$slide.find("*:visible" + (firstRun ? ":not(.fancybox-close-small)" : ""));
}
focusableItems = focusableItems.filter(focusableStr).filter(function () {
return $(this).css("visibility") !== "hidden" && !$(this).hasClass("disabled");
});
if (focusableItems.length) {
focusedItemIndex = focusableItems.index(document.activeElement);
if (e && e.shiftKey) {
// Back tab
if (focusedItemIndex < 0 || focusedItemIndex == 0) {
e.preventDefault();
focusableItems.eq(focusableItems.length - 1).trigger("focus");
}
} else {
// Outside or Forward tab
if (focusedItemIndex < 0 || focusedItemIndex == focusableItems.length - 1) {
if (e) {
e.preventDefault();
}
focusableItems.eq(0).trigger("focus");
}
}
} else {
self.$refs.container.trigger("focus");
}
},
// Activates current instance - brings container to the front and enables keyboard,
// notifies other instances about deactivating
// =================================================================================
activate: function () {
var self = this;
// Deactivate all instances
$(".fancybox-container").each(function () {
var instance = $(this).data("FancyBox");
// Skip self and closing instances
if (instance && instance.id !== self.id && !instance.isClosing) {
instance.trigger("onDeactivate");
instance.removeEvents();
instance.isVisible = false;
}
});
self.isVisible = true;
if (self.current || self.isIdle) {
self.update();
self.updateControls();
}
self.trigger("onActivate");
self.addEvents();
},
// Start closing procedure
// This will start "zoom-out" animation if needed and clean everything up afterwards
// =================================================================================
close: function (e, d) {
var self = this,
current = self.current,
effect,
duration,
$content,
domRect,
opacity,
start,
end;
var done = function () {
self.cleanUp(e);
};
if (self.isClosing) {
return false;
}
self.isClosing = true;
// If beforeClose callback prevents closing, make sure content is centered
if (self.trigger("beforeClose", e) === false) {
self.isClosing = false;
requestAFrame(function () {
self.update();
});
return false;
}
// Remove all events
// If there are multiple instances, they will be set again by "activate" method
self.removeEvents();
$content = current.$content;
effect = current.opts.animationEffect;
duration = $.isNumeric(d) ? d : effect ? current.opts.animationDuration : 0;
current.$slide.removeClass("fancybox-slide--complete fancybox-slide--next fancybox-slide--previous fancybox-animated");
if (e !== true) {
$.fancybox.stop(current.$slide);
} else {
effect = false;
}
// Remove other slides
current.$slide
.siblings()
.trigger("onReset")
.remove();
// Trigger animations
if (duration) {
self.$refs.container
.removeClass("fancybox-is-open")
.addClass("fancybox-is-closing")
.css("transition-duration", duration + "ms");
}
// Clean up
self.hideLoading(current);
self.hideControls(true);
self.updateCursor();
// Check if possible to zoom-out
if (
effect === "zoom" &&
!($content && duration && current.type === "image" && !self.isMoved() && !current.hasError && (end = self.getThumbPos(current)))
) {
effect = "fade";
}
if (effect === "zoom") {
$.fancybox.stop($content);
domRect = $.fancybox.getTranslate($content);
start = {
top: domRect.top,
left: domRect.left,
scaleX: domRect.width / end.width,
scaleY: domRect.height / end.height,
width: end.width,
height: end.height
};
// Check if we need to animate opacity
opacity = current.opts.zoomOpacity;
if (opacity == "auto") {
opacity = Math.abs(current.width / current.height - end.width / end.height) > 0.1;
}
if (opacity) {
end.opacity = 0;
}
$.fancybox.setTranslate($content, start);
forceRedraw($content);
$.fancybox.animate($content, end, duration, done);
return true;
}
if (effect && duration) {
$.fancybox.animate(
current.$slide.addClass("fancybox-slide--previous").removeClass("fancybox-slide--current"),
"fancybox-animated fancybox-fx-" + effect,
duration,
done
);
} else {
// If skip animation
if (e === true) {
setTimeout(done, duration);
} else {
done();
}
}
return true;
},
// Final adjustments after removing the instance
// =============================================
cleanUp: function (e) {
var self = this,
instance,
$focus = self.current.opts.$orig,
x,
y;
self.current.$slide.trigger("onReset");
self.$refs.container.empty().remove();
self.trigger("afterClose", e);
// Place back focus
if (!!self.current.opts.backFocus) {
if (!$focus || !$focus.length || !$focus.is(":visible")) {
$focus = self.$trigger;
}
if ($focus && $focus.length) {
x = window.scrollX;
y = window.scrollY;
$focus.trigger("focus");
$("html, body")
.scrollTop(y)
.scrollLeft(x);
}
}
self.current = null;
// Check if there are other instances
instance = $.fancybox.getInstance();
if (instance) {
instance.activate();
} else {
$("body").removeClass("fancybox-active compensate-for-scrollbar");
$("#fancybox-style-noscroll").remove();
}
},
// Call callback and trigger an event
// ==================================
trigger: function (name, slide) {
var args = Array.prototype.slice.call(arguments, 1),
self = this,
obj = slide && slide.opts ? slide : self.current,
rez;
if (obj) {
args.unshift(obj);
} else {
obj = self;
}
args.unshift(self);
if ($.isFunction(obj.opts[name])) {
rez = obj.opts[name].apply(obj, args);
}
if (rez === false) {
return rez;
}
if (name === "afterClose" || !self.$refs) {
$D.trigger(name + ".fb", args);
} else {
self.$refs.container.trigger(name + ".fb", args);
}
},
// Update infobar values, navigation button states and reveal caption
// ==================================================================
updateControls: function () {
var self = this,
current = self.current,
index = current.index,
$container = self.$refs.container,
$caption = self.$refs.caption,
caption = current.opts.caption;
// Recalculate content dimensions
current.$slide.trigger("refresh");
// Set caption
if (caption && caption.length) {
self.$caption = $caption;
$caption
.children()
.eq(0)
.html(caption);
} else {
self.$caption = null;
}
if (!self.hasHiddenControls && !self.isIdle) {
self.showControls();
}
// Update info and navigation elements
$container.find("[data-fancybox-count]").html(self.group.length);
$container.find("[data-fancybox-index]").html(index + 1);
$container.find("[data-fancybox-prev]").prop("disabled", !current.opts.loop && index <= 0);
$container.find("[data-fancybox-next]").prop("disabled", !current.opts.loop && index >= self.group.length - 1);
if (current.type === "image") {
// Re-enable buttons; update download button source
$container
.find("[data-fancybox-zoom]")
.show()
.end()
.find("[data-fancybox-download]")
.attr("href", current.opts.image.src || current.src)
.show();
} else if (current.opts.toolbar) {
$container.find("[data-fancybox-download],[data-fancybox-zoom]").hide();
}
// Make sure focus is not on disabled button/element
if ($(document.activeElement).is(":hidden,[disabled]")) {
self.$refs.container.trigger("focus");
}
},
// Hide toolbar and caption
// ========================
hideControls: function (andCaption) {
var self = this,
arr = ["infobar", "toolbar", "nav"];
if (andCaption || !self.current.opts.preventCaptionOverlap) {
arr.push("caption");
}
this.$refs.container.removeClass(
arr
.map(function (i) {
return "fancybox-show-" + i;
})
.join(" ")
);
this.hasHiddenControls = true;
},
showControls: function () {
var self = this,
opts = self.current ? self.current.opts : self.opts,
$container = self.$refs.container;
self.hasHiddenControls = false;
self.idleSecondsCounter = 0;
$container
.toggleClass("fancybox-show-toolbar", !!(opts.toolbar && opts.buttons))
.toggleClass("fancybox-show-infobar", !!(opts.infobar && self.group.length > 1))
.toggleClass("fancybox-show-caption", !!self.$caption)
.toggleClass("fancybox-show-nav", !!(opts.arrows && self.group.length > 1))
.toggleClass("fancybox-is-modal", !!opts.modal);
},
// Toggle toolbar and caption
// ==========================
toggleControls: function () {
if (this.hasHiddenControls) {
this.showControls();
} else {
this.hideControls();
}
}
});
$.fancybox = {
version: "3.5.7",
defaults: defaults,
// Get current instance and execute a command.
//
// Examples of usage:
//
// $instance = $.fancybox.getInstance();
// $.fancybox.getInstance().jumpTo( 1 );
// $.fancybox.getInstance( 'jumpTo', 1 );
// $.fancybox.getInstance( function() {
// console.info( this.currIndex );
// });
// ======================================================
getInstance: function (command) {
var instance = $('.fancybox-container:not(".fancybox-is-closing"):last').data("FancyBox"),
args = Array.prototype.slice.call(arguments, 1);
if (instance instanceof FancyBox) {
if ($.type(command) === "string") {
instance[command].apply(instance, args);
} else if ($.type(command) === "function") {
command.apply(instance, args);
}
return instance;
}
return false;
},
// Create new instance
// ===================
open: function (items, opts, index) {
return new FancyBox(items, opts, index);
},
// Close current or all instances
// ==============================
close: function (all) {
var instance = this.getInstance();
if (instance) {
instance.close();
// Try to find and close next instance
if (all === true) {
this.close(all);
}
}
},
// Close all instances and unbind all events
// =========================================
destroy: function () {
this.close(true);
$D.add("body").off("click.fb-start", "**");
},
// Try to detect mobile devices
// ============================
isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
// Detect if 'translate3d' support is available
// ============================================
use3d: (function () {
var div = document.createElement("div");
return (
window.getComputedStyle &&
window.getComputedStyle(div) &&
window.getComputedStyle(div).getPropertyValue("transform") &&
!(document.documentMode && document.documentMode < 11)
);
})(),
// Helper function to get current visual state of an element
// returns array[ top, left, horizontal-scale, vertical-scale, opacity ]
// =====================================================================
getTranslate: function ($el) {
var domRect;
if (!$el || !$el.length) {
return false;
}
domRect = $el[0].getBoundingClientRect();
return {
top: domRect.top || 0,
left: domRect.left || 0,
width: domRect.width,
height: domRect.height,
opacity: parseFloat($el.css("opacity"))
};
},
// Shortcut for setting "translate3d" properties for element
// Can set be used to set opacity, too
// ========================================================
setTranslate: function ($el, props) {
var str = "",
css = {};
if (!$el || !props) {
return;
}
if (props.left !== undefined || props.top !== undefined) {
str =
(props.left === undefined ? $el.position().left : props.left) +
"px, " +
(props.top === undefined ? $el.position().top : props.top) +
"px";
if (this.use3d) {
str = "translate3d(" + str + ", 0px)";
} else {
str = "translate(" + str + ")";
}
}
if (props.scaleX !== undefined && props.scaleY !== undefined) {
str += " scale(" + props.scaleX + ", " + props.scaleY + ")";
} else if (props.scaleX !== undefined) {
str += " scaleX(" + props.scaleX + ")";
}
if (str.length) {
css.transform = str;
}
if (props.opacity !== undefined) {
css.opacity = props.opacity;
}
if (props.width !== undefined) {
css.width = props.width;
}
if (props.height !== undefined) {
css.height = props.height;
}
return $el.css(css);
},
// Simple CSS transition handler
// =============================
animate: function ($el, to, duration, callback, leaveAnimationName) {
var self = this,
from;
if ($.isFunction(duration)) {
callback = duration;
duration = null;
}
self.stop($el);
from = self.getTranslate($el);
$el.on(transitionEnd, function (e) {
// Skip events from child elements and z-index change
if (e && e.originalEvent && (!$el.is(e.originalEvent.target) || e.originalEvent.propertyName == "z-index")) {
return;
}
self.stop($el);
if ($.isNumeric(duration)) {
$el.css("transition-duration", "");
}
if ($.isPlainObject(to)) {
if (to.scaleX !== undefined && to.scaleY !== undefined) {
self.setTranslate($el, {
top: to.top,
left: to.left,
width: from.width * to.scaleX,
height: from.height * to.scaleY,
scaleX: 1,
scaleY: 1
});
}
} else if (leaveAnimationName !== true) {
$el.removeClass(to);
}
if ($.isFunction(callback)) {
callback(e);
}
});
if ($.isNumeric(duration)) {
$el.css("transition-duration", duration + "ms");
}
// Start animation by changing CSS properties or class name
if ($.isPlainObject(to)) {
if (to.scaleX !== undefined && to.scaleY !== undefined) {
delete to.width;
delete to.height;
if ($el.parent().hasClass("fancybox-slide--image")) {
$el.parent().addClass("fancybox-is-scaling");
}
}
$.fancybox.setTranslate($el, to);
} else {
$el.addClass(to);
}
// Make sure that `transitionend` callback gets fired
$el.data(
"timer",
setTimeout(function () {
$el.trigger(transitionEnd);
}, duration + 33)
);
},
stop: function ($el, callCallback) {
if ($el && $el.length) {
clearTimeout($el.data("timer"));
if (callCallback) {
$el.trigger(transitionEnd);
}
$el.off(transitionEnd).css("transition-duration", "");
$el.parent().removeClass("fancybox-is-scaling");
}
}
};
// Default click handler for "fancyboxed" links
// ============================================
function _run(e, opts) {
var items = [],
index = 0,
$target,
value,
instance;
// Avoid opening multiple times
if (e && e.isDefaultPrevented()) {
return;
}
e.preventDefault();
opts = opts || {};
if (e && e.data) {
opts = mergeOpts(e.data.options, opts);
}
$target = opts.$target || $(e.currentTarget).trigger("blur");
instance = $.fancybox.getInstance();
if (instance && instance.$trigger && instance.$trigger.is($target)) {
return;
}
if (opts.selector) {
items = $(opts.selector);
} else {
// Get all related items and find index for clicked one
value = $target.attr("data-fancybox") || "";
if (value) {
items = e.data ? e.data.items : [];
items = items.length ? items.filter('[data-fancybox="' + value + '"]') : $('[data-fancybox="' + value + '"]');
} else {
items = [$target];
}
}
index = $(items).index($target);
// Sometimes current item can not be found
if (index < 0) {
index = 0;
}
instance = $.fancybox.open(items, opts, index);
// Save last active element
instance.$trigger = $target;
}
// Create a jQuery plugin
// ======================
$.fn.fancybox = function (options) {
var selector;
options = options || {};
selector = options.selector || false;
if (selector) {
// Use body element instead of document so it executes first
$("body")
.off("click.fb-start", selector)
.on("click.fb-start", selector, {
options: options
}, _run);
} else {
this.off("click.fb-start").on(
"click.fb-start", {
items: this,
options: options
},
_run
);
}
return this;
};
// Self initializing plugin for all elements having `data-fancybox` attribute
// ==========================================================================
$D.on("click.fb-start", "[data-fancybox]", _run);
// Enable "trigger elements"
// =========================
$D.on("click.fb-start", "[data-fancybox-trigger]", function (e) {
$('[data-fancybox="' + $(this).attr("data-fancybox-trigger") + '"]')
.eq($(this).attr("data-fancybox-index") || 0)
.trigger("click.fb-start", {
$trigger: $(this)
});
});
// Track focus event for better accessibility styling
// ==================================================
(function () {
var buttonStr = ".fancybox-button",
focusStr = "fancybox-focus",
$pressed = null;
$D.on("mousedown mouseup focus blur", buttonStr, function (e) {
switch (e.type) {
case "mousedown":
$pressed = $(this);
break;
case "mouseup":
$pressed = null;
break;
case "focusin":
$(buttonStr).removeClass(focusStr);
if (!$(this).is($pressed) && !$(this).is("[disabled]")) {
$(this).addClass(focusStr);
}
break;
case "focusout":
$(buttonStr).removeClass(focusStr);
break;
}
});
})();
})(window, document, jQuery);
// ==========================================================================
//
// Media
// Adds additional media type support
//
// ==========================================================================
(function ($) {
"use strict";
// Object containing properties for each media type
var defaults = {
youtube: {
matcher: /(youtube\.com|youtu\.be|youtube\-nocookie\.com)\/(watch\?(.*&)?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*))(.*)/i,
params: {
autoplay: 1,
autohide: 1,
fs: 1,
rel: 0,
hd: 1,
wmode: "transparent",
enablejsapi: 1,
html5: 1
},
paramPlace: 8,
type: "iframe",
url: "https://www.youtube-nocookie.com/embed/$4",
thumb: "https://img.youtube.com/vi/$4/hqdefault.jpg"
},
vimeo: {
matcher: /^.+vimeo.com\/(.*\/)?([\d]+)(.*)?/,
params: {
autoplay: 1,
hd: 1,
show_title: 1,
show_byline: 1,
show_portrait: 0,
fullscreen: 1
},
paramPlace: 3,
type: "iframe",
url: "//player.vimeo.com/video/$2"
},
instagram: {
matcher: /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i,
type: "image",
url: "//$1/p/$2/media/?size=l"
},
// Examples:
// http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
// https://www.google.com/maps/@37.7852006,-122.4146355,14.65z
// https://www.google.com/maps/@52.2111123,2.9237542,6.61z?hl=en
// https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572
gmap_place: {
matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(((maps\/(place\/(.*)\/)?\@(.*),(\d+.?\d+?)z))|(\?ll=))(.*)?/i,
type: "iframe",
url: function (rez) {
return (
"//maps.google." +
rez[2] +
"/?ll=" +
(rez[9] ? rez[9] + "&z=" + Math.floor(rez[10]) + (rez[12] ? rez[12].replace(/^\//, "&") : "") : rez[12] + "").replace(/\?/, "&") +
"&output=" +
(rez[12] && rez[12].indexOf("layer=c") > 0 ? "svembed" : "embed")
);
}
},
// Examples:
// https://www.google.com/maps/search/Empire+State+Building/
// https://www.google.com/maps/search/?api=1&query=centurylink+field
// https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393
gmap_search: {
matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(maps\/search\/)(.*)/i,
type: "iframe",
url: function (rez) {
return "//maps.google." + rez[2] + "/maps?q=" + rez[5].replace("query=", "q=").replace("api=1", "") + "&output=embed";
}
}
};
// Formats matching url to final form
var format = function (url, rez, params) {
if (!url) {
return;
}
params = params || "";
if ($.type(params) === "object") {
params = $.param(params, true);
}
$.each(rez, function (key, value) {
url = url.replace("$" + key, value || "");
});
if (params.length) {
url += (url.indexOf("?") > 0 ? "&" : "?") + params;
}
return url;
};
$(document).on("objectNeedsType.fb", function (e, instance, item) {
var url = item.src || "",
type = false,
media,
thumb,
rez,
params,
urlParams,
paramObj,
provider;
media = $.extend(true, {}, defaults, item.opts.media);
// Look for any matching media type
$.each(media, function (providerName, providerOpts) {
rez = url.match(providerOpts.matcher);
if (!rez) {
return;
}
type = providerOpts.type;
provider = providerName;
paramObj = {};
if (providerOpts.paramPlace && rez[providerOpts.paramPlace]) {
urlParams = rez[providerOpts.paramPlace];
if (urlParams[0] == "?") {
urlParams = urlParams.substring(1);
}
urlParams = urlParams.split("&");
for (var m = 0; m < urlParams.length; ++m) {
var p = urlParams[m].split("=", 2);
if (p.length == 2) {
paramObj[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
}
}
params = $.extend(true, {}, providerOpts.params, item.opts[providerName], paramObj);
url =
$.type(providerOpts.url) === "function" ? providerOpts.url.call(this, rez, params, item) : format(providerOpts.url, rez, params);
thumb =
$.type(providerOpts.thumb) === "function" ? providerOpts.thumb.call(this, rez, params, item) : format(providerOpts.thumb, rez);
if (providerName === "youtube") {
url = url.replace(/&t=((\d+)m)?(\d+)s/, function (match, p1, m, s) {
return "&start=" + ((m ? parseInt(m, 10) * 60 : 0) + parseInt(s, 10));
});
} else if (providerName === "vimeo") {
url = url.replace("&%23", "#");
}
return false;
});
// If it is found, then change content type and update the url
if (type) {
if (!item.opts.thumb && !(item.opts.$thumb && item.opts.$thumb.length)) {
item.opts.thumb = thumb;
}
if (type === "iframe") {
item.opts = $.extend(true, item.opts, {
iframe: {
preload: false,
attr: {
scrolling: "no"
}
}
});
}
$.extend(item, {
type: type,
src: url,
origSrc: item.src,
contentSource: provider,
contentType: type === "image" ? "image" : provider == "gmap_place" || provider == "gmap_search" ? "map" : "video"
});
} else if (url) {
item.type = item.opts.defaultType;
}
});
// Load YouTube/Video API on request to detect when video finished playing
var VideoAPILoader = {
youtube: {
src: "https://www.youtube.com/iframe_api",
class: "YT",
loading: false,
loaded: false
},
vimeo: {
src: "https://player.vimeo.com/api/player.js",
class: "Vimeo",
loading: false,
loaded: false
},
load: function (vendor) {
var _this = this,
script;
if (this[vendor].loaded) {
setTimeout(function () {
_this.done(vendor);
});
return;
}
if (this[vendor].loading) {
return;
}
this[vendor].loading = true;
script = document.createElement("script");
script.type = "text/javascript";
script.src = this[vendor].src;
if (vendor === "youtube") {
window.onYouTubeIframeAPIReady = function () {
_this[vendor].loaded = true;
_this.done(vendor);
};
} else {
script.onload = function () {
_this[vendor].loaded = true;
_this.done(vendor);
};
}
document.body.appendChild(script);
},
done: function (vendor) {
var instance, $el, player;
if (vendor === "youtube") {
delete window.onYouTubeIframeAPIReady;
}
instance = $.fancybox.getInstance();
if (instance) {
$el = instance.current.$content.find("iframe");
if (vendor === "youtube" && YT !== undefined && YT) {
player = new YT.Player($el.attr("id"), {
events: {
onStateChange: function (e) {
if (e.data == 0) {
instance.next();
}
}
}
});
} else if (vendor === "vimeo" && Vimeo !== undefined && Vimeo) {
player = new Vimeo.Player($el);
player.on("ended", function () {
instance.next();
});
}
}
}
};
$(document).on({
"afterShow.fb": function (e, instance, current) {
if (instance.group.length > 1 && (current.contentSource === "youtube" || current.contentSource === "vimeo")) {
VideoAPILoader.load(current.contentSource);
}
}
});
})(jQuery);
// ==========================================================================
//
// Guestures
// Adds touch guestures, handles click and tap events
//
// ==========================================================================
(function (window, document, $) {
"use strict";
var requestAFrame = (function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// if all else fails, use setTimeout
function (callback) {
return window.setTimeout(callback, 1000 / 60);
}
);
})();
var cancelAFrame = (function () {
return (
window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
}
);
})();
var getPointerXY = function (e) {
var result = [];
e = e.originalEvent || e || window.e;
e = e.touches && e.touches.length ? e.touches : e.changedTouches && e.changedTouches.length ? e.changedTouches : [e];
for (var key in e) {
if (e[key].pageX) {
result.push({
x: e[key].pageX,
y: e[key].pageY
});
} else if (e[key].clientX) {
result.push({
x: e[key].clientX,
y: e[key].clientY
});
}
}
return result;
};
var distance = function (point2, point1, what) {
if (!point1 || !point2) {
return 0;
}
if (what === "x") {
return point2.x - point1.x;
} else if (what === "y") {
return point2.y - point1.y;
}
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
};
var isClickable = function ($el) {
if (
$el.is('a,area,button,[role="button"],input,label,select,summary,textarea,video,audio,iframe') ||
$.isFunction($el.get(0).onclick) ||
$el.data("selectable")
) {
return true;
}
// Check for attributes like data-fancybox-next or data-fancybox-close
for (var i = 0, atts = $el[0].attributes, n = atts.length; i < n; i++) {
if (atts[i].nodeName.substr(0, 14) === "data-fancybox-") {
return true;
}
}
return false;
};
var hasScrollbars = function (el) {
var overflowY = window.getComputedStyle(el)["overflow-y"],
overflowX = window.getComputedStyle(el)["overflow-x"],
vertical = (overflowY === "scroll" || overflowY === "auto") && el.scrollHeight > el.clientHeight,
horizontal = (overflowX === "scroll" || overflowX === "auto") && el.scrollWidth > el.clientWidth;
return vertical || horizontal;
};
var isScrollable = function ($el) {
var rez = false;
while (true) {
rez = hasScrollbars($el.get(0));
if (rez) {
break;
}
$el = $el.parent();
if (!$el.length || $el.hasClass("fancybox-stage") || $el.is("body")) {
break;
}
}
return rez;
};
var Guestures = function (instance) {
var self = this;
self.instance = instance;
self.$bg = instance.$refs.bg;
self.$stage = instance.$refs.stage;
self.$container = instance.$refs.container;
self.destroy();
self.$container.on("touchstart.fb.touch mousedown.fb.touch", $.proxy(self, "ontouchstart"));
};
Guestures.prototype.destroy = function () {
var self = this;
self.$container.off(".fb.touch");
$(document).off(".fb.touch");
if (self.requestId) {
cancelAFrame(self.requestId);
self.requestId = null;
}
if (self.tapped) {
clearTimeout(self.tapped);
self.tapped = null;
}
};
Guestures.prototype.ontouchstart = function (e) {
var self = this,
$target = $(e.target),
instance = self.instance,
current = instance.current,
$slide = current.$slide,
$content = current.$content,
isTouchDevice = e.type == "touchstart";
// Do not respond to both (touch and mouse) events
if (isTouchDevice) {
self.$container.off("mousedown.fb.touch");
}
// Ignore right click
if (e.originalEvent && e.originalEvent.button == 2) {
return;
}
// Ignore taping on links, buttons, input elements
if (!$slide.length || !$target.length || isClickable($target) || isClickable($target.parent())) {
return;
}
// Ignore clicks on the scrollbar
if (!$target.is("img") && e.originalEvent.clientX > $target[0].clientWidth + $target.offset().left) {
return;
}
// Ignore clicks while zooming or closing
if (!current || instance.isAnimating || current.$slide.hasClass("fancybox-animated")) {
e.stopPropagation();
e.preventDefault();
return;
}
self.realPoints = self.startPoints = getPointerXY(e);
if (!self.startPoints.length) {
return;
}
// Allow other scripts to catch touch event if "touch" is set to false
if (current.touch) {
e.stopPropagation();
}
self.startEvent = e;
self.canTap = true;
self.$target = $target;
self.$content = $content;
self.opts = current.opts.touch;
self.isPanning = false;
self.isSwiping = false;
self.isZooming = false;
self.isScrolling = false;
self.canPan = instance.canPan();
self.startTime = new Date().getTime();
self.distanceX = self.distanceY = self.distance = 0;
self.canvasWidth = Math.round($slide[0].clientWidth);
self.canvasHeight = Math.round($slide[0].clientHeight);
self.contentLastPos = null;
self.contentStartPos = $.fancybox.getTranslate(self.$content) || {
top: 0,
left: 0
};
self.sliderStartPos = $.fancybox.getTranslate($slide);
// Since position will be absolute, but we need to make it relative to the stage
self.stagePos = $.fancybox.getTranslate(instance.$refs.stage);
self.sliderStartPos.top -= self.stagePos.top;
self.sliderStartPos.left -= self.stagePos.left;
self.contentStartPos.top -= self.stagePos.top;
self.contentStartPos.left -= self.stagePos.left;
$(document)
.off(".fb.touch")
.on(isTouchDevice ? "touchend.fb.touch touchcancel.fb.touch" : "mouseup.fb.touch mouseleave.fb.touch", $.proxy(self, "ontouchend"))
.on(isTouchDevice ? "touchmove.fb.touch" : "mousemove.fb.touch", $.proxy(self, "ontouchmove"));
if ($.fancybox.isMobile) {
document.addEventListener("scroll", self.onscroll, true);
}
// Skip if clicked outside the sliding area
if (!(self.opts || self.canPan) || !($target.is(self.$stage) || self.$stage.find($target).length)) {
if ($target.is(".fancybox-image")) {
e.preventDefault();
}
if (!($.fancybox.isMobile && $target.parents(".fancybox-caption").length)) {
return;
}
}
self.isScrollable = isScrollable($target) || isScrollable($target.parent());
// Check if element is scrollable and try to prevent default behavior (scrolling)
if (!($.fancybox.isMobile && self.isScrollable)) {
e.preventDefault();
}
// One finger or mouse click - swipe or pan an image
if (self.startPoints.length === 1 || current.hasError) {
if (self.canPan) {
$.fancybox.stop(self.$content);
self.isPanning = true;
} else {
self.isSwiping = true;
}
self.$container.addClass("fancybox-is-grabbing");
}
// Two fingers - zoom image
if (self.startPoints.length === 2 && current.type === "image" && (current.isLoaded || current.$ghost)) {
self.canTap = false;
self.isSwiping = false;
self.isPanning = false;
self.isZooming = true;
$.fancybox.stop(self.$content);
self.centerPointStartX = (self.startPoints[0].x + self.startPoints[1].x) * 0.5 - $(window).scrollLeft();
self.centerPointStartY = (self.startPoints[0].y + self.startPoints[1].y) * 0.5 - $(window).scrollTop();
self.percentageOfImageAtPinchPointX = (self.centerPointStartX - self.contentStartPos.left) / self.contentStartPos.width;
self.percentageOfImageAtPinchPointY = (self.centerPointStartY - self.contentStartPos.top) / self.contentStartPos.height;
self.startDistanceBetweenFingers = distance(self.startPoints[0], self.startPoints[1]);
}
};
Guestures.prototype.onscroll = function (e) {
var self = this;
self.isScrolling = true;
document.removeEventListener("scroll", self.onscroll, true);
};
Guestures.prototype.ontouchmove = function (e) {
var self = this;
// Make sure user has not released over iframe or disabled element
if (e.originalEvent.buttons !== undefined && e.originalEvent.buttons === 0) {
self.ontouchend(e);
return;
}
if (self.isScrolling) {
self.canTap = false;
return;
}
self.newPoints = getPointerXY(e);
if (!(self.opts || self.canPan) || !self.newPoints.length || !self.newPoints.length) {
return;
}
if (!(self.isSwiping && self.isSwiping === true)) {
e.preventDefault();
}
self.distanceX = distance(self.newPoints[0], self.startPoints[0], "x");
self.distanceY = distance(self.newPoints[0], self.startPoints[0], "y");
self.distance = distance(self.newPoints[0], self.startPoints[0]);
// Skip false ontouchmove events (Chrome)
if (self.distance > 0) {
if (self.isSwiping) {
self.onSwipe(e);
} else if (self.isPanning) {
self.onPan();
} else if (self.isZooming) {
self.onZoom();
}
}
};
Guestures.prototype.onSwipe = function (e) {
var self = this,
instance = self.instance,
swiping = self.isSwiping,
left = self.sliderStartPos.left || 0,
angle;
// If direction is not yet determined
if (swiping === true) {
// We need at least 10px distance to correctly calculate an angle
if (Math.abs(self.distance) > 10) {
self.canTap = false;
if (instance.group.length < 2 && self.opts.vertical) {
self.isSwiping = "y";
} else if (instance.isDragging || self.opts.vertical === false || (self.opts.vertical === "auto" && $(window).width() > 800)) {
self.isSwiping = "x";
} else {
angle = Math.abs((Math.atan2(self.distanceY, self.distanceX) * 180) / Math.PI);
self.isSwiping = angle > 45 && angle < 135 ? "y" : "x";
}
if (self.isSwiping === "y" && $.fancybox.isMobile && self.isScrollable) {
self.isScrolling = true;
return;
}
instance.isDragging = self.isSwiping;
// Reset points to avoid jumping, because we dropped first swipes to calculate the angle
self.startPoints = self.newPoints;
$.each(instance.slides, function (index, slide) {
var slidePos, stagePos;
$.fancybox.stop(slide.$slide);
slidePos = $.fancybox.getTranslate(slide.$slide);
stagePos = $.fancybox.getTranslate(instance.$refs.stage);
slide.$slide
.css({
transform: "",
opacity: "",
"transition-duration": ""
})
.removeClass("fancybox-animated")
.removeClass(function (index, className) {
return (className.match(/(^|\s)fancybox-fx-\S+/g) || []).join(" ");
});
if (slide.pos === instance.current.pos) {
self.sliderStartPos.top = slidePos.top - stagePos.top;
self.sliderStartPos.left = slidePos.left - stagePos.left;
}
$.fancybox.setTranslate(slide.$slide, {
top: slidePos.top - stagePos.top,
left: slidePos.left - stagePos.left
});
});
// Stop slideshow
if (instance.SlideShow && instance.SlideShow.isActive) {
instance.SlideShow.stop();
}
}
return;
}
// Sticky edges
if (swiping == "x") {
if (
self.distanceX > 0 &&
(self.instance.group.length < 2 || (self.instance.current.index === 0 && !self.instance.current.opts.loop))
) {
left = left + Math.pow(self.distanceX, 0.8);
} else if (
self.distanceX < 0 &&
(self.instance.group.length < 2 ||
(self.instance.current.index === self.instance.group.length - 1 && !self.instance.current.opts.loop))
) {
left = left - Math.pow(-self.distanceX, 0.8);
} else {
left = left + self.distanceX;
}
}
self.sliderLastPos = {
top: swiping == "x" ? 0 : self.sliderStartPos.top + self.distanceY,
left: left
};
if (self.requestId) {
cancelAFrame(self.requestId);
self.requestId = null;
}
self.requestId = requestAFrame(function () {
if (self.sliderLastPos) {
$.each(self.instance.slides, function (index, slide) {
var pos = slide.pos - self.instance.currPos;
$.fancybox.setTranslate(slide.$slide, {
top: self.sliderLastPos.top,
left: self.sliderLastPos.left + pos * self.canvasWidth + pos * slide.opts.gutter
});
});
self.$container.addClass("fancybox-is-sliding");
}
});
};
Guestures.prototype.onPan = function () {
var self = this;
// Prevent accidental movement (sometimes, when tapping casually, finger can move a bit)
if (distance(self.newPoints[0], self.realPoints[0]) < ($.fancybox.isMobile ? 10 : 5)) {
self.startPoints = self.newPoints;
return;
}
self.canTap = false;
self.contentLastPos = self.limitMovement();
if (self.requestId) {
cancelAFrame(self.requestId);
}
self.requestId = requestAFrame(function () {
$.fancybox.setTranslate(self.$content, self.contentLastPos);
});
};
// Make panning sticky to the edges
Guestures.prototype.limitMovement = function () {
var self = this;
var canvasWidth = self.canvasWidth;
var canvasHeight = self.canvasHeight;
var distanceX = self.distanceX;
var distanceY = self.distanceY;
var contentStartPos = self.contentStartPos;
var currentOffsetX = contentStartPos.left;
var currentOffsetY = contentStartPos.top;
var currentWidth = contentStartPos.width;
var currentHeight = contentStartPos.height;
var minTranslateX, minTranslateY, maxTranslateX, maxTranslateY, newOffsetX, newOffsetY;
if (currentWidth > canvasWidth) {
newOffsetX = currentOffsetX + distanceX;
} else {
newOffsetX = currentOffsetX;
}
newOffsetY = currentOffsetY + distanceY;
// Slow down proportionally to traveled distance
minTranslateX = Math.max(0, canvasWidth * 0.5 - currentWidth * 0.5);
minTranslateY = Math.max(0, canvasHeight * 0.5 - currentHeight * 0.5);
maxTranslateX = Math.min(canvasWidth - currentWidth, canvasWidth * 0.5 - currentWidth * 0.5);
maxTranslateY = Math.min(canvasHeight - currentHeight, canvasHeight * 0.5 - currentHeight * 0.5);
// ->
if (distanceX > 0 && newOffsetX > minTranslateX) {
newOffsetX = minTranslateX - 1 + Math.pow(-minTranslateX + currentOffsetX + distanceX, 0.8) || 0;
}
// <-
if (distanceX < 0 && newOffsetX < maxTranslateX) {
newOffsetX = maxTranslateX + 1 - Math.pow(maxTranslateX - currentOffsetX - distanceX, 0.8) || 0;
}
// \/
if (distanceY > 0 && newOffsetY > minTranslateY) {
newOffsetY = minTranslateY - 1 + Math.pow(-minTranslateY + currentOffsetY + distanceY, 0.8) || 0;
}
// /\
if (distanceY < 0 && newOffsetY < maxTranslateY) {
newOffsetY = maxTranslateY + 1 - Math.pow(maxTranslateY - currentOffsetY - distanceY, 0.8) || 0;
}
return {
top: newOffsetY,
left: newOffsetX
};
};
Guestures.prototype.limitPosition = function (newOffsetX, newOffsetY, newWidth, newHeight) {
var self = this;
var canvasWidth = self.canvasWidth;
var canvasHeight = self.canvasHeight;
if (newWidth > canvasWidth) {
newOffsetX = newOffsetX > 0 ? 0 : newOffsetX;
newOffsetX = newOffsetX < canvasWidth - newWidth ? canvasWidth - newWidth : newOffsetX;
} else {
// Center horizontally
newOffsetX = Math.max(0, canvasWidth / 2 - newWidth / 2);
}
if (newHeight > canvasHeight) {
newOffsetY = newOffsetY > 0 ? 0 : newOffsetY;
newOffsetY = newOffsetY < canvasHeight - newHeight ? canvasHeight - newHeight : newOffsetY;
} else {
// Center vertically
newOffsetY = Math.max(0, canvasHeight / 2 - newHeight / 2);
}
return {
top: newOffsetY,
left: newOffsetX
};
};
Guestures.prototype.onZoom = function () {
var self = this;
// Calculate current distance between points to get pinch ratio and new width and height
var contentStartPos = self.contentStartPos;
var currentWidth = contentStartPos.width;
var currentHeight = contentStartPos.height;
var currentOffsetX = contentStartPos.left;
var currentOffsetY = contentStartPos.top;
var endDistanceBetweenFingers = distance(self.newPoints[0], self.newPoints[1]);
var pinchRatio = endDistanceBetweenFingers / self.startDistanceBetweenFingers;
var newWidth = Math.floor(currentWidth * pinchRatio);
var newHeight = Math.floor(currentHeight * pinchRatio);
// This is the translation due to pinch-zooming
var translateFromZoomingX = (currentWidth - newWidth) * self.percentageOfImageAtPinchPointX;
var translateFromZoomingY = (currentHeight - newHeight) * self.percentageOfImageAtPinchPointY;
// Point between the two touches
var centerPointEndX = (self.newPoints[0].x + self.newPoints[1].x) / 2 - $(window).scrollLeft();
var centerPointEndY = (self.newPoints[0].y + self.newPoints[1].y) / 2 - $(window).scrollTop();
// And this is the translation due to translation of the centerpoint
// between the two fingers
var translateFromTranslatingX = centerPointEndX - self.centerPointStartX;
var translateFromTranslatingY = centerPointEndY - self.centerPointStartY;
// The new offset is the old/current one plus the total translation
var newOffsetX = currentOffsetX + (translateFromZoomingX + translateFromTranslatingX);
var newOffsetY = currentOffsetY + (translateFromZoomingY + translateFromTranslatingY);
var newPos = {
top: newOffsetY,
left: newOffsetX,
scaleX: pinchRatio,
scaleY: pinchRatio
};
self.canTap = false;
self.newWidth = newWidth;
self.newHeight = newHeight;
self.contentLastPos = newPos;
if (self.requestId) {
cancelAFrame(self.requestId);
}
self.requestId = requestAFrame(function () {
$.fancybox.setTranslate(self.$content, self.contentLastPos);
});
};
Guestures.prototype.ontouchend = function (e) {
var self = this;
var swiping = self.isSwiping;
var panning = self.isPanning;
var zooming = self.isZooming;
var scrolling = self.isScrolling;
self.endPoints = getPointerXY(e);
self.dMs = Math.max(new Date().getTime() - self.startTime, 1);
self.$container.removeClass("fancybox-is-grabbing");
$(document).off(".fb.touch");
document.removeEventListener("scroll", self.onscroll, true);
if (self.requestId) {
cancelAFrame(self.requestId);
self.requestId = null;
}
self.isSwiping = false;
self.isPanning = false;
self.isZooming = false;
self.isScrolling = false;
self.instance.isDragging = false;
if (self.canTap) {
return self.onTap(e);
}
self.speed = 100;
// Speed in px/ms
self.velocityX = (self.distanceX / self.dMs) * 0.5;
self.velocityY = (self.distanceY / self.dMs) * 0.5;
if (panning) {
self.endPanning();
} else if (zooming) {
self.endZooming();
} else {
self.endSwiping(swiping, scrolling);
}
return;
};
Guestures.prototype.endSwiping = function (swiping, scrolling) {
var self = this,
ret = false,
len = self.instance.group.length,
distanceX = Math.abs(self.distanceX),
canAdvance = swiping == "x" && len > 1 && ((self.dMs > 130 && distanceX > 10) || distanceX > 50),
speedX = 300;
self.sliderLastPos = null;
// Close if swiped vertically / navigate if horizontally
if (swiping == "y" && !scrolling && Math.abs(self.distanceY) > 50) {
// Continue vertical movement
$.fancybox.animate(
self.instance.current.$slide, {
top: self.sliderStartPos.top + self.distanceY + self.velocityY * 150,
opacity: 0
},
200
);
ret = self.instance.close(true, 250);
} else if (canAdvance && self.distanceX > 0) {
ret = self.instance.previous(speedX);
} else if (canAdvance && self.distanceX < 0) {
ret = self.instance.next(speedX);
}
if (ret === false && (swiping == "x" || swiping == "y")) {
self.instance.centerSlide(200);
}
self.$container.removeClass("fancybox-is-sliding");
};
// Limit panning from edges
// ========================
Guestures.prototype.endPanning = function () {
var self = this,
newOffsetX,
newOffsetY,
newPos;
if (!self.contentLastPos) {
return;
}
if (self.opts.momentum === false || self.dMs > 350) {
newOffsetX = self.contentLastPos.left;
newOffsetY = self.contentLastPos.top;
} else {
// Continue movement
newOffsetX = self.contentLastPos.left + self.velocityX * 500;
newOffsetY = self.contentLastPos.top + self.velocityY * 500;
}
newPos = self.limitPosition(newOffsetX, newOffsetY, self.contentStartPos.width, self.contentStartPos.height);
newPos.width = self.contentStartPos.width;
newPos.height = self.contentStartPos.height;
$.fancybox.animate(self.$content, newPos, 366);
};
Guestures.prototype.endZooming = function () {
var self = this;
var current = self.instance.current;
var newOffsetX, newOffsetY, newPos, reset;
var newWidth = self.newWidth;
var newHeight = self.newHeight;
if (!self.contentLastPos) {
return;
}
newOffsetX = self.contentLastPos.left;
newOffsetY = self.contentLastPos.top;
reset = {
top: newOffsetY,
left: newOffsetX,
width: newWidth,
height: newHeight,
scaleX: 1,
scaleY: 1
};
// Reset scalex/scaleY values; this helps for perfomance and does not break animation
$.fancybox.setTranslate(self.$content, reset);
if (newWidth < self.canvasWidth && newHeight < self.canvasHeight) {
self.instance.scaleToFit(150);
} else if (newWidth > current.width || newHeight > current.height) {
self.instance.scaleToActual(self.centerPointStartX, self.centerPointStartY, 150);
} else {
newPos = self.limitPosition(newOffsetX, newOffsetY, newWidth, newHeight);
$.fancybox.animate(self.$content, newPos, 150);
}
};
Guestures.prototype.onTap = function (e) {
var self = this;
var $target = $(e.target);
var instance = self.instance;
var current = instance.current;
var endPoints = (e && getPointerXY(e)) || self.startPoints;
var tapX = endPoints[0] ? endPoints[0].x - $(window).scrollLeft() - self.stagePos.left : 0;
var tapY = endPoints[0] ? endPoints[0].y - $(window).scrollTop() - self.stagePos.top : 0;
var where;
var process = function (prefix) {
var action = current.opts[prefix];
if ($.isFunction(action)) {
action = action.apply(instance, [current, e]);
}
if (!action) {
return;
}
switch (action) {
case "close":
instance.close(self.startEvent);
break;
case "toggleControls":
instance.toggleControls();
break;
case "next":
instance.next();
break;
case "nextOrClose":
if (instance.group.length > 1) {
instance.next();
} else {
instance.close(self.startEvent);
}
break;
case "zoom":
if (current.type == "image" && (current.isLoaded || current.$ghost)) {
if (instance.canPan()) {
instance.scaleToFit();
} else if (instance.isScaledDown()) {
instance.scaleToActual(tapX, tapY);
} else if (instance.group.length < 2) {
instance.close(self.startEvent);
}
}
break;
}
};
// Ignore right click
if (e.originalEvent && e.originalEvent.button == 2) {
return;
}
// Skip if clicked on the scrollbar
if (!$target.is("img") && tapX > $target[0].clientWidth + $target.offset().left) {
return;
}
// Check where is clicked
if ($target.is(".fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-container")) {
where = "Outside";
} else if ($target.is(".fancybox-slide")) {
where = "Slide";
} else if (
instance.current.$content &&
instance.current.$content
.find($target)
.addBack()
.filter($target).length
) {
where = "Content";
} else {
return;
}
// Check if this is a double tap
if (self.tapped) {
// Stop previously created single tap
clearTimeout(self.tapped);
self.tapped = null;
// Skip if distance between taps is too big
if (Math.abs(tapX - self.tapX) > 50 || Math.abs(tapY - self.tapY) > 50) {
return this;
}
// OK, now we assume that this is a double-tap
process("dblclick" + where);
} else {
// Single tap will be processed if user has not clicked second time within 300ms
// or there is no need to wait for double-tap
self.tapX = tapX;
self.tapY = tapY;
if (current.opts["dblclick" + where] && current.opts["dblclick" + where] !== current.opts["click" + where]) {
self.tapped = setTimeout(function () {
self.tapped = null;
if (!instance.isAnimating) {
process("click" + where);
}
}, 500);
} else {
process("click" + where);
}
}
return this;
};
$(document)
.on("onActivate.fb", function (e, instance) {
if (instance && !instance.Guestures) {
instance.Guestures = new Guestures(instance);
}
})
.on("beforeClose.fb", function (e, instance) {
if (instance && instance.Guestures) {
instance.Guestures.destroy();
}
});
})(window, document, jQuery);
// ==========================================================================
//
// SlideShow
// Enables slideshow functionality
//
// Example of usage:
// $.fancybox.getInstance().SlideShow.start()
//
// ==========================================================================
(function (document, $) {
"use strict";
$.extend(true, $.fancybox.defaults, {
btnTpl: {
slideShow: '"
},
slideShow: {
autoStart: false,
speed: 3000,
progress: true
}
});
var SlideShow = function (instance) {
this.instance = instance;
this.init();
};
$.extend(SlideShow.prototype, {
timer: null,
isActive: false,
$button: null,
init: function () {
var self = this,
instance = self.instance,
opts = instance.group[instance.currIndex].opts.slideShow;
self.$button = instance.$refs.toolbar.find("[data-fancybox-play]").on("click", function () {
self.toggle();
});
if (instance.group.length < 2 || !opts) {
self.$button.hide();
} else if (opts.progress) {
self.$progress = $('').appendTo(instance.$refs.inner);
}
},
set: function (force) {
var self = this,
instance = self.instance,
current = instance.current;
// Check if reached last element
if (current && (force === true || current.opts.loop || instance.currIndex < instance.group.length - 1)) {
if (self.isActive && current.contentType !== "video") {
if (self.$progress) {
$.fancybox.animate(self.$progress.show(), {
scaleX: 1
}, current.opts.slideShow.speed);
}
self.timer = setTimeout(function () {
if (!instance.current.opts.loop && instance.current.index == instance.group.length - 1) {
instance.jumpTo(0);
} else {
instance.next();
}
}, current.opts.slideShow.speed);
}
} else {
self.stop();
instance.idleSecondsCounter = 0;
instance.showControls();
}
},
clear: function () {
var self = this;
clearTimeout(self.timer);
self.timer = null;
if (self.$progress) {
self.$progress.removeAttr("style").hide();
}
},
start: function () {
var self = this,
current = self.instance.current;
if (current) {
self.$button
.attr("title", (current.opts.i18n[current.opts.lang] || current.opts.i18n.en).PLAY_STOP)
.removeClass("fancybox-button--play")
.addClass("fancybox-button--pause");
self.isActive = true;
if (current.isComplete) {
self.set(true);
}
self.instance.trigger("onSlideShowChange", true);
}
},
stop: function () {
var self = this,
current = self.instance.current;
self.clear();
self.$button
.attr("title", (current.opts.i18n[current.opts.lang] || current.opts.i18n.en).PLAY_START)
.removeClass("fancybox-button--pause")
.addClass("fancybox-button--play");
self.isActive = false;
self.instance.trigger("onSlideShowChange", false);
if (self.$progress) {
self.$progress.removeAttr("style").hide();
}
},
toggle: function () {
var self = this;
if (self.isActive) {
self.stop();
} else {
self.start();
}
}
});
$(document).on({
"onInit.fb": function (e, instance) {
if (instance && !instance.SlideShow) {
instance.SlideShow = new SlideShow(instance);
}
},
"beforeShow.fb": function (e, instance, current, firstRun) {
var SlideShow = instance && instance.SlideShow;
if (firstRun) {
if (SlideShow && current.opts.slideShow.autoStart) {
SlideShow.start();
}
} else if (SlideShow && SlideShow.isActive) {
SlideShow.clear();
}
},
"afterShow.fb": function (e, instance, current) {
var SlideShow = instance && instance.SlideShow;
if (SlideShow && SlideShow.isActive) {
SlideShow.set();
}
},
"afterKeydown.fb": function (e, instance, current, keypress, keycode) {
var SlideShow = instance && instance.SlideShow;
// "P" or Spacebar
if (SlideShow && current.opts.slideShow && (keycode === 80 || keycode === 32) && !$(document.activeElement).is("button,a,input")) {
keypress.preventDefault();
SlideShow.toggle();
}
},
"beforeClose.fb onDeactivate.fb": function (e, instance) {
var SlideShow = instance && instance.SlideShow;
if (SlideShow) {
SlideShow.stop();
}
}
});
// Page Visibility API to pause slideshow when window is not active
$(document).on("visibilitychange", function () {
var instance = $.fancybox.getInstance(),
SlideShow = instance && instance.SlideShow;
if (SlideShow && SlideShow.isActive) {
if (document.hidden) {
SlideShow.clear();
} else {
SlideShow.set();
}
}
});
})(document, jQuery);
// ==========================================================================
//
// FullScreen
// Adds fullscreen functionality
//
// ==========================================================================
(function (document, $) {
"use strict";
// Collection of methods supported by user browser
var fn = (function () {
var fnMap = [
["requestFullscreen", "exitFullscreen", "fullscreenElement", "fullscreenEnabled", "fullscreenchange", "fullscreenerror"],
// new WebKit
[
"webkitRequestFullscreen",
"webkitExitFullscreen",
"webkitFullscreenElement",
"webkitFullscreenEnabled",
"webkitfullscreenchange",
"webkitfullscreenerror"
],
// old WebKit (Safari 5.1)
[
"webkitRequestFullScreen",
"webkitCancelFullScreen",
"webkitCurrentFullScreenElement",
"webkitCancelFullScreen",
"webkitfullscreenchange",
"webkitfullscreenerror"
],
[
"mozRequestFullScreen",
"mozCancelFullScreen",
"mozFullScreenElement",
"mozFullScreenEnabled",
"mozfullscreenchange",
"mozfullscreenerror"
],
["msRequestFullscreen", "msExitFullscreen", "msFullscreenElement", "msFullscreenEnabled", "MSFullscreenChange", "MSFullscreenError"]
];
var ret = {};
for (var i = 0; i < fnMap.length; i++) {
var val = fnMap[i];
if (val && val[1] in document) {
for (var j = 0; j < val.length; j++) {
ret[fnMap[0][j]] = val[j];
}
return ret;
}
}
return false;
})();
if (fn) {
var FullScreen = {
request: function (elem) {
elem = elem || document.documentElement;
elem[fn.requestFullscreen](elem.ALLOW_KEYBOARD_INPUT);
},
exit: function () {
document[fn.exitFullscreen]();
},
toggle: function (elem) {
elem = elem || document.documentElement;
if (this.isFullscreen()) {
this.exit();
} else {
this.request(elem);
}
},
isFullscreen: function () {
return Boolean(document[fn.fullscreenElement]);
},
enabled: function () {
return Boolean(document[fn.fullscreenEnabled]);
}
};
$.extend(true, $.fancybox.defaults, {
btnTpl: {
fullScreen: '"
},
fullScreen: {
autoStart: false
}
});
$(document).on(fn.fullscreenchange, function () {
var isFullscreen = FullScreen.isFullscreen(),
instance = $.fancybox.getInstance();
if (instance) {
// If image is zooming, then force to stop and reposition properly
if (instance.current && instance.current.type === "image" && instance.isAnimating) {
instance.isAnimating = false;
instance.update(true, true, 0);
if (!instance.isComplete) {
instance.complete();
}
}
instance.trigger("onFullscreenChange", isFullscreen);
instance.$refs.container.toggleClass("fancybox-is-fullscreen", isFullscreen);
instance.$refs.toolbar
.find("[data-fancybox-fullscreen]")
.toggleClass("fancybox-button--fsenter", !isFullscreen)
.toggleClass("fancybox-button--fsexit", isFullscreen);
}
});
}
$(document).on({
"onInit.fb": function (e, instance) {
var $container;
if (!fn) {
instance.$refs.toolbar.find("[data-fancybox-fullscreen]").remove();
return;
}
if (instance && instance.group[instance.currIndex].opts.fullScreen) {
$container = instance.$refs.container;
$container.on("click.fb-fullscreen", "[data-fancybox-fullscreen]", function (e) {
e.stopPropagation();
e.preventDefault();
FullScreen.toggle();
});
if (instance.opts.fullScreen && instance.opts.fullScreen.autoStart === true) {
FullScreen.request();
}
// Expose API
instance.FullScreen = FullScreen;
} else if (instance) {
instance.$refs.toolbar.find("[data-fancybox-fullscreen]").hide();
}
},
"afterKeydown.fb": function (e, instance, current, keypress, keycode) {
// "F"
if (instance && instance.FullScreen && keycode === 70) {
keypress.preventDefault();
instance.FullScreen.toggle();
}
},
"beforeClose.fb": function (e, instance) {
if (instance && instance.FullScreen && instance.$refs.container.hasClass("fancybox-is-fullscreen")) {
FullScreen.exit();
}
}
});
})(document, jQuery);
// ==========================================================================
//
// Thumbs
// Displays thumbnails in a grid
//
// ==========================================================================
(function (document, $) {
"use strict";
var CLASS = "fancybox-thumbs",
CLASS_ACTIVE = CLASS + "-active";
// Make sure there are default values
$.fancybox.defaults = $.extend(
true, {
btnTpl: {
thumbs: '"
},
thumbs: {
autoStart: false, // Display thumbnails on opening
hideOnClose: true, // Hide thumbnail grid when closing animation starts
parentEl: ".fancybox-container", // Container is injected into this element
axis: "y" // Vertical (y) or horizontal (x) scrolling
}
},
$.fancybox.defaults
);
var FancyThumbs = function (instance) {
this.init(instance);
};
$.extend(FancyThumbs.prototype, {
$button: null,
$grid: null,
$list: null,
isVisible: false,
isActive: false,
init: function (instance) {
var self = this,
group = instance.group,
enabled = 0;
self.instance = instance;
self.opts = group[instance.currIndex].opts.thumbs;
instance.Thumbs = self;
self.$button = instance.$refs.toolbar.find("[data-fancybox-thumbs]");
// Enable thumbs if at least two group items have thumbnails
for (var i = 0, len = group.length; i < len; i++) {
if (group[i].thumb) {
enabled++;
}
if (enabled > 1) {
break;
}
}
if (enabled > 1 && !!self.opts) {
self.$button.removeAttr("style").on("click", function () {
self.toggle();
});
self.isActive = true;
} else {
self.$button.hide();
}
},
create: function () {
var self = this,
instance = self.instance,
parentEl = self.opts.parentEl,
list = [],
src;
if (!self.$grid) {
// Create main element
self.$grid = $('').appendTo(
instance.$refs.container
.find(parentEl)
.addBack()
.filter(parentEl)
);
// Add "click" event that performs gallery navigation
self.$grid.on("click", "a", function () {
instance.jumpTo($(this).attr("data-index"));
});
}
// Build the list
if (!self.$list) {
self.$list = $('
').appendTo(self.$grid);
}
$.each(instance.group, function (i, item) {
src = item.thumb;
if (!src && item.type === "image") {
src = item.src;
}
list.push(
'"
);
});
self.$list[0].innerHTML = list.join("");
if (self.opts.axis === "x") {
// Set fixed width for list element to enable horizontal scrolling
self.$list.width(
parseInt(self.$grid.css("padding-right"), 10) +
instance.group.length *
self.$list
.children()
.eq(0)
.outerWidth(true)
);
}
},
focus: function (duration) {
var self = this,
$list = self.$list,
$grid = self.$grid,
thumb,
thumbPos;
if (!self.instance.current) {
return;
}
thumb = $list
.children()
.removeClass(CLASS_ACTIVE)
.filter('[data-index="' + self.instance.current.index + '"]')
.addClass(CLASS_ACTIVE);
thumbPos = thumb.position();
// Check if need to scroll to make current thumb visible
if (self.opts.axis === "y" && (thumbPos.top < 0 || thumbPos.top > $list.height() - thumb.outerHeight())) {
$list.stop().animate({
scrollTop: $list.scrollTop() + thumbPos.top
},
duration
);
} else if (
self.opts.axis === "x" &&
(thumbPos.left < $grid.scrollLeft() || thumbPos.left > $grid.scrollLeft() + ($grid.width() - thumb.outerWidth()))
) {
$list
.parent()
.stop()
.animate({
scrollLeft: thumbPos.left
},
duration
);
}
},
update: function () {
var that = this;
that.instance.$refs.container.toggleClass("fancybox-show-thumbs", this.isVisible);
if (that.isVisible) {
if (!that.$grid) {
that.create();
}
that.instance.trigger("onThumbsShow");
that.focus(0);
} else if (that.$grid) {
that.instance.trigger("onThumbsHide");
}
// Update content position
that.instance.update();
},
hide: function () {
this.isVisible = false;
this.update();
},
show: function () {
this.isVisible = true;
this.update();
},
toggle: function () {
this.isVisible = !this.isVisible;
this.update();
}
});
$(document).on({
"onInit.fb": function (e, instance) {
var Thumbs;
if (instance && !instance.Thumbs) {
Thumbs = new FancyThumbs(instance);
if (Thumbs.isActive && Thumbs.opts.autoStart === true) {
Thumbs.show();
}
}
},
"beforeShow.fb": function (e, instance, item, firstRun) {
var Thumbs = instance && instance.Thumbs;
if (Thumbs && Thumbs.isVisible) {
Thumbs.focus(firstRun ? 0 : 250);
}
},
"afterKeydown.fb": function (e, instance, current, keypress, keycode) {
var Thumbs = instance && instance.Thumbs;
// "G"
if (Thumbs && Thumbs.isActive && keycode === 71) {
keypress.preventDefault();
Thumbs.toggle();
}
},
"beforeClose.fb": function (e, instance) {
var Thumbs = instance && instance.Thumbs;
if (Thumbs && Thumbs.isVisible && Thumbs.opts.hideOnClose !== false) {
Thumbs.$grid.hide();
}
}
});
})(document, jQuery);
//// ==========================================================================
//
// Share
// Displays simple form for sharing current url
//
// ==========================================================================
(function (document, $) {
"use strict";
$.extend(true, $.fancybox.defaults, {
btnTpl: {
share: '"
},
share: {
url: function (instance, item) {
return (
(!instance.currentHash && !(item.type === "inline" || item.type === "html") ? item.origSrc || item.src : false) || window.location
);
},
tpl: '
"
}
});
function escapeHtml(string) {
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'",
"/": "/",
"`": "`",
"=": "="
};
return String(string).replace(/[&<>"'`=\/]/g,function (s){return entityMap[s];});}$(document).on("click","[data-fancybox-share]",function (){var instance = $.fancybox.getInstance(),current = instance.current || null,url,tpl;if (!current){return;}if ($.type(current.opts.share.url) === "function"){url = current.opts.share.url.apply(current,[instance,current]);}tpl = current.opts.share.tpl
.replace(/\{\{media\}\}/g,current.type === "image" ? encodeURIComponent(current.src) :"")
.replace(/\{\{url\}\}/g,encodeURIComponent(url))
.replace(/\{\{url_raw\}\}/g,escapeHtml(url))
.replace(/\{\{descr\}\}/g,instance.$caption ? encodeURIComponent(instance.$caption.text()) :"");$.fancybox.open({src:instance.translate(instance,tpl),type:"html",opts:{touch:false,animationEffect:false,afterLoad:function (shareInstance,shareCurrent){// Close self if parent instance is closing
instance.$refs.container.one("beforeClose.fb",function (){shareInstance.close(null,0);});// Opening links in a popup window
shareCurrent.$content.find(".fancybox-share__button").click(function (){window.open(this.href,"Share","width=550, height=450");return false;});},mobile:{autoFocus:false}}});});})(document,jQuery);// ==========================================================================
//
// Hash
// Enables linking to each modal
//
// ==========================================================================
(function (window,document,$){"use strict";// Simple $.escapeSelector polyfill (for jQuery prior v3)
if (!$.escapeSelector){$.escapeSelector = function (sel){var rcssescape = /([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;var fcssescape = function (ch,asCodePoint){if (asCodePoint){// U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
if (ch === "\0"){return "\uFFFD";}// Control characters and (dependent upon position) numbers get escaped as code points
return ch.slice(0,-1) + "\\" + ch.charCodeAt(ch.length - 1).toString(16) + " ";}// Other potentially-special ASCII characters get backslash-escaped
return "\\" + ch;};return (sel + "").replace(rcssescape,fcssescape);};}// Get info about gallery name and current index from url
function parseUrl(){var hash = window.location.hash.substr(1),rez = hash.split("-"),index = rez.length > 1 && /^\+?\d+$/.test(rez[rez.length - 1]) ? parseInt(rez.pop(-1),10) || 1 :1,gallery = rez.join("-");return{hash:hash,index:index < 1 ? 1 :index,gallery:gallery};}// Trigger click evnt on links to open new fancyBox instance
function triggerFromurl(/themes/custom/boots/assets/css/url){if (url.gallery !== ""){// If we can find element matching 'data-fancybox' atribute,// then triggering click event should start fancyBox
$("[data-fancybox='" + $.escapeSelector(url.gallery) + "']")
.eq(url.index - 1)
.focus()
.trigger("click.fb-start");}}// Get gallery name from current instance
function getGalleryID(instance){var opts,ret;if (!instance){return false;}opts = instance.current ? instance.current.opts :instance.opts;ret = opts.hash || (opts.$orig ? opts.$orig.data("fancybox") || opts.$orig.data("fancybox-trigger") :"");return ret === "" ? false :ret;}// Start when DOM becomes ready
$(function (){// Check if user has disabled this module
if ($.fancybox.defaults.hash === false){return;}// Update hash when opening/closing fancyBox
$(document).on({"onInit.fb":function (e,instance){var url,gallery;if (instance.group[instance.currIndex].opts.hash === false){return;}url = parseUrl();gallery = getGalleryID(instance);// Make sure gallery start index matches index from hash
if (gallery && url.gallery && gallery == url.gallery){instance.currIndex = url.index - 1;}},"beforeShow.fb":function (e,instance,current,firstRun){var gallery;if (!current || current.opts.hash === false){return;}// Check if need to update window hash
gallery = getGalleryID(instance);if (!gallery){return;}// Variable containing last hash value set by fancyBox
// It will be used to determine if fancyBox needs to close after hash change is detected
instance.currentHash = gallery + (instance.group.length > 1 ? "-" + (current.index + 1) :"");// If current hash is the same (this instance most likely is opened by hashchange),then do nothing
if (window.location.hash === "#" + instance.currentHash){return;}if (firstRun && !instance.origHash){instance.origHash = window.location.hash;}if (instance.hashTimer){clearTimeout(instance.hashTimer);}// Update hash
instance.hashTimer = setTimeout(function (){if ("replaceState" in window.history){window.history[firstRun ? "pushState" :"replaceState"]({},document.title,window.location.pathname + window.location.search + "#" + instance.currentHash);if (firstRun){instance.hasCreatedHistory = true;}}else{window.location.hash = instance.currentHash;}instance.hashTimer = null;},300);},"beforeClose.fb":function (e,instance,current){if (!current || current.opts.hash === false){return;}clearTimeout(instance.hashTimer);// Goto previous history entry
if (instance.currentHash && instance.hasCreatedHistory){window.history.back();}else if (instance.currentHash){if ("replaceState" in window.history){window.history.replaceState({},document.title,window.location.pathname + window.location.search + (instance.origHash || ""));}else{window.location.hash = instance.origHash;}}instance.currentHash = null;}});// Check if need to start/close after url has changed
$(window).on("hashchange.fb",function (){var url = parseUrl(),fb = null;// Find last fancyBox instance that has "hash"
$.each($(".fancybox-container")
.get()
.reverse(),function (index,value){var tmp = $(value).data("FancyBox");if (tmp && tmp.currentHash){fb = tmp;return false;}});if (fb){// Now,compare hash values
if (fb.currentHash !== url.gallery + "-" + url.index && !(url.index === 1 && fb.currentHash == url.gallery)){fb.currentHash = null;fb.close();}}else if (url.gallery !== ""){triggerFromurl(/themes/custom/boots/assets/css/url);}});// Check current hash and trigger click event on matching element to start fancyBox,if needed
setTimeout(function (){if (!$.fancybox.getInstance()){triggerFromurl(/themes/custom/boots/assets/css/parseUrl%28));}},50);});})(window,document,jQuery);// ==========================================================================
//
// Wheel
// Basic mouse weheel support for gallery navigation
//
// ==========================================================================
(function (document,$){"use strict";var prevTime = new Date().getTime();$(document).on({"onInit.fb":function (e,instance,current){instance.$refs.stage.on("mousewheel DOMMouseScroll wheel MozMousePixelScroll",function (e){var current = instance.current,currTime = new Date().getTime();if (instance.group.length < 2 || current.opts.wheel === false || (current.opts.wheel === "auto" && current.type !== "image")){return;}e.preventDefault();e.stopPropagation();if (current.$slide.hasClass("fancybox-animated")){return;}e = e.originalEvent || e;if (currTime - prevTime < 250){return;}prevTime = currTime;instance[(-e.deltaY || -e.deltaX || e.wheelDelta || -e.detail) < 0 ? "next" :"previous"]();});}});})(document,jQuery);}.call(this,__webpack_require__(23)))var __WEBPACK_AMD_DEFINE_FACTORY__,__WEBPACK_AMD_DEFINE_RESULT__;(function (root,factory){if (true){// AMD. Register as an anonymous module.
!(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports,__webpack_require__,exports,module)) :__WEBPACK_AMD_DEFINE_FACTORY__),__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));}else{}}(this,function (){"use strict";var ScrollMagic = function (){_util.log(2,'(COMPATIBILITY NOTICE) -> As of ScrollMagic 2.0.0 you need to use \'new ScrollMagic.Controller()\' to create a new controller instance. Use \'new ScrollMagic.Scene()\' to instance a scene.');};ScrollMagic.version = "2.0.8";// TODO:temporary workaround for chrome's scroll jitter bug
if (typeof (window) !== 'undefined') {
window.addEventListener("mousewheel", void(0));
}
// global const
var PIN_SPACER_ATTRIBUTE = "data-scrollmagic-pin-spacer";
/**
* The main class that is needed once per scroll container.
*
* @class
*
* @example
* // basic initialization
* var controller = new ScrollMagic.Controller();
*
* // passing options
* var controller = new ScrollMagic.Controller({container: "#myContainer", loglevel: 3});
*
* @param {object} [options] - An object containing one or more options for the controller.
* @param {(string|object)} [options.container=window] - A selector, DOM object that references the main container for scrolling.
* @param {boolean} [options.vertical=true] - Sets the scroll mode to vertical (`true`) or horizontal (`false`) scrolling.
* @param {object} [options.globalSceneOptions={}] - These options will be passed to every Scene that is added to the controller using the addScene method. For more information on Scene options see {@link ScrollMagic.Scene}.
* @param {number} [options.loglevel=2] Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.
** `0` => silent
** `1` => errors
** `2` => errors, warnings
** `3` => errors, warnings, debuginfo
* @param {boolean} [options.refreshInterval=100] - Some changes don't call events by default,like changing the container size or moving a scene trigger element.
This interval polls these parameters to fire the necessary events.
If you don't use custom containers, trigger elements or have static layouts, where the positions of the trigger elements don't change,you can set this to 0 disable interval checking and improve performance.
*
*/
ScrollMagic.Controller = function (options){var
NAMESPACE = 'ScrollMagic.Controller',SCROLL_DIRECTION_FORWARD = 'FORWARD',SCROLL_DIRECTION_REVERSE = 'REVERSE',SCROLL_DIRECTION_PAUSED = 'PAUSED',DEFAULT_OPTIONS = CONTROLLER_OPTIONS.defaults;var
Controller = this,_options = _util.extend({},DEFAULT_OPTIONS,options),_sceneObjects = [],_updateScenesOnNextCycle = false,// can be boolean (true => all scenes) or an array of scenes to be updated
_scrollPos = 0,_scrollDirection = SCROLL_DIRECTION_PAUSED,_isDocument = true,_viewPortSize = 0,_enabled = true,_updateTimeout,_refreshTimeout;var construct = function (){for (var key in _options){if (!DEFAULT_OPTIONS.hasOwnProperty(key)){log(2,"WARNING: Unknown option \"" + key + "\"");delete _options[key];}}_options.container = _util.get.elements(_options.container)[0];// check ScrollContainer
if (!_options.container){log(1,"ERROR creating object " + NAMESPACE + ": No valid scroll container supplied");throw NAMESPACE + " init failed.";// cancel}_isDocument = _options.container === window || _options.container === document.body || !document.body.contains(_options.container);// normalize to window
if (_isDocument){_options.container = window;}// update container size immediately
_viewPortSize = getViewportSize();// set event handlers
_options.container.addEventListener("resize",onChange);_options.container.addEventListener("scroll",onChange);var ri = parseInt(_options.refreshInterval,10);_options.refreshInterval = _util.type.Number(ri) ? ri :DEFAULT_OPTIONS.refreshInterval;scheduleRefresh();log(3,"added new " + NAMESPACE + " controller (v" + ScrollMagic.version + ")");};var scheduleRefresh = function (){if (_options.refreshInterval > 0){_refreshTimeout = window.setTimeout(refresh,_options.refreshInterval);}};var getScrollPos = function (){return _options.vertical ? _util.get.scrollTop(_options.container) :_util.get.scrollLeft(_options.container);};var getViewportSize = function (){return _options.vertical ? _util.get.height(_options.container) :_util.get.width(_options.container);};var setScrollPos = this._setScrollPos = function (pos){if (_options.vertical){if (_isDocument){window.scrollTo(_util.get.scrollLeft(),pos);}else{_options.container.scrollTop = pos;}}else{if (_isDocument){window.scrollTo(pos,_util.get.scrollTop());}else{_options.container.scrollLeft = pos;}}};var updateScenes = function (){if (_enabled && _updateScenesOnNextCycle){// determine scenes to update
var scenesToUpdate = _util.type.Array(_updateScenesOnNextCycle) ? _updateScenesOnNextCycle :_sceneObjects.slice(0);// reset scenes
_updateScenesOnNextCycle = false;var oldScrollPos = _scrollPos;// update scroll pos now instead of onChange,as it might have changed since scheduling (i.e. in-browser smooth scroll)
_scrollPos = Controller.scrollPos();var deltaScroll = _scrollPos - oldScrollPos;if (deltaScroll !== 0){// scroll position changed?
_scrollDirection = (deltaScroll > 0) ? SCROLL_DIRECTION_FORWARD :SCROLL_DIRECTION_REVERSE;}// reverse order of scenes if scrolling reverse
if (_scrollDirection === SCROLL_DIRECTION_REVERSE){scenesToUpdate.reverse();}// update scenes
scenesToUpdate.forEach(function (scene,index){log(3,"updating Scene " + (index + 1) + "/" + scenesToUpdate.length + " (" + _sceneObjects.length + " total)");scene.update(true);});if (scenesToUpdate.length === 0 && _options.loglevel >= 3){log(3,"updating 0 Scenes (nothing added to controller)");}}};var debounceUpdate = function (){_updateTimeout = _util.rAF(updateScenes);};var onChange = function (e){log(3,"event fired causing an update:",e.type);if (e.type == "resize"){// resize
_viewPortSize = getViewportSize();_scrollDirection = SCROLL_DIRECTION_PAUSED;}// schedule update
if (_updateScenesOnNextCycle !== true){_updateScenesOnNextCycle = true;debounceUpdate();}};var refresh = function (){if (!_isDocument){// simulate resize event. Only works for viewport relevant param (performance)
if (_viewPortSize != getViewportSize()){var resizeEvent;try{resizeEvent = new Event('resize',{bubbles:false,cancelable:false});}catch (e){// stupid IE
resizeEvent = document.createEvent("Event");resizeEvent.initEvent("resize",false,false);}_options.container.dispatchEvent(resizeEvent);}}_sceneObjects.forEach(function (scene,index){// refresh all scenes
scene.refresh();});scheduleRefresh();};var log = this._log = function (loglevel,output){if (_options.loglevel >= loglevel){Array.prototype.splice.call(arguments,1,0,"(" + NAMESPACE + ") ->");_util.log.apply(window,arguments);}};// for scenes we have getters for each option,but for the controller we don't, so we need to make it available externally for plugins
this._options = _options;
/**
* Sort scenes in ascending order of their start offset.
* @private
*
* @param {array} ScenesArray - an array of ScrollMagic Scenes that should be sorted
* @return {array} The sorted array of Scenes.
*/
var sortScenes = function (ScenesArray) {
if (ScenesArray.length <= 1) {
return ScenesArray;
} else {
var scenes = ScenesArray.slice(0);
scenes.sort(function (a, b) {
return a.scrollOffset() > b.scrollOffset() ? 1 : -1;
});
return scenes;
}
};
/**
* ----------------------------------------------------------------
* public functions
* ----------------------------------------------------------------
*/
/**
* Add one ore more scene(s) to the controller.
* This is the equivalent to `Scene.addTo(controller)`.
* @public
* @example
* // with a previously defined scene
* controller.addScene(scene);
*
* // with a newly created scene.
* controller.addScene(new ScrollMagic.Scene({duration : 0}));
*
* // adding multiple scenes
* controller.addScene([scene, scene2, new ScrollMagic.Scene({duration : 0})]);
*
* @param {(ScrollMagic.Scene|array)} newScene - ScrollMagic Scene or Array of Scenes to be added to the controller.
* @return {Controller} Parent object for chaining.
*/
this.addScene = function (newScene) {
if (_util.type.Array(newScene)) {
newScene.forEach(function (scene, index) {
Controller.addScene(scene);
});
} else if (newScene instanceof ScrollMagic.Scene) {
if (newScene.controller() !== Controller) {
newScene.addTo(Controller);
} else if (_sceneObjects.indexOf(newScene) < 0) {
// new scene
_sceneObjects.push(newScene); // add to array
_sceneObjects = sortScenes(_sceneObjects); // sort
newScene.on("shift.controller_sort", function () { // resort whenever scene moves
_sceneObjects = sortScenes(_sceneObjects);
});
// insert Global defaults.
for (var key in _options.globalSceneOptions) {
if (newScene[key]) {
newScene[key].call(newScene, _options.globalSceneOptions[key]);
}
}
log(3, "adding Scene (now " + _sceneObjects.length + " total)");
}
} else {
log(1, "ERROR: invalid argument supplied for '.addScene()'");
}
return Controller;
};
/**
* Remove one ore more scene(s) from the controller.
* This is the equivalent to `Scene.remove()`.
* @public
* @example
* // remove a scene from the controller
* controller.removeScene(scene);
*
* // remove multiple scenes from the controller
* controller.removeScene([scene, scene2, scene3]);
*
* @param {(ScrollMagic.Scene|array)} Scene - ScrollMagic Scene or Array of Scenes to be removed from the controller.
* @returns {Controller} Parent object for chaining.
*/
this.removeScene = function (Scene) {
if (_util.type.Array(Scene)) {
Scene.forEach(function (scene, index) {
Controller.removeScene(scene);
});
} else {
var index = _sceneObjects.indexOf(Scene);
if (index > -1) {
Scene.off("shift.controller_sort");
_sceneObjects.splice(index, 1);
log(3, "removing Scene (now " + _sceneObjects.length + " left)");
Scene.remove();
}
}
return Controller;
};
/**
* Update one ore more scene(s) according to the scroll position of the container.
* This is the equivalent to `Scene.update()`.
* The update method calculates the scene's start and end position (based on the trigger element,trigger hook,duration and offset) and checks it against the current scroll position of the container.
* It then updates the current scene state accordingly (or does nothing,if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.
* _**Note:** This method gets called constantly whenever Controller detects a change. The only application for you is if you change something outside of the realm of ScrollMagic,like moving the trigger or changing tween parameters._
*@public
*@example
* // update a specific scene on next cycle
* controller.updateScene(scene);*
* // update a specific scene immediately
* controller.updateScene(scene,true);*
* // update multiple scenes scene on next cycle
* controller.updateScene([scene1,scene2,scene3]);*
*@param{ScrollMagic.Scene}Scene - ScrollMagic Scene or Array of Scenes that is/are supposed to be updated.
*@param{boolean}[immediately=false] - If `true` the update will be instant,if `false` it will wait until next update cycle.
This is useful when changing multiple properties of the scene - this way it will only be updated once all new properties are set (updateScenes).
*@return{Controller}Parent object for chaining.
*/
this.updateScene = function (Scene,immediately){if (_util.type.Array(Scene)){Scene.forEach(function (scene,index){Controller.updateScene(scene,immediately);});}else{if (immediately){Scene.update(true);}else if (_updateScenesOnNextCycle !== true && Scene instanceof ScrollMagic.Scene){// if _updateScenesOnNextCycle is true,all connected scenes are already scheduled for update
// prep array for next update cycle
_updateScenesOnNextCycle = _updateScenesOnNextCycle || [];if (_updateScenesOnNextCycle.indexOf(Scene) == -1){_updateScenesOnNextCycle.push(Scene);}_updateScenesOnNextCycle = sortScenes(_updateScenesOnNextCycle);// sort
debounceUpdate();}}return Controller;};this.update = function (immediately){onChange({type:"resize"});// will update size and set _updateScenesOnNextCycle to true
if (immediately){updateScenes();}return Controller;};this.scrollTo = function (scrollTarget,additionalParameter){if (_util.type.Number(scrollTarget)){// excecute
setScrollPos.call(_options.container,scrollTarget,additionalParameter);}else if (scrollTarget instanceof ScrollMagic.Scene){// scroll to scene
if (scrollTarget.controller() === Controller){// check if the controller is associated with this scene
Controller.scrollTo(scrollTarget.scrollOffset(),additionalParameter);}else{log(2,"scrollTo(): The supplied scene does not belong to this controller. Scroll cancelled.",scrollTarget);}}else if (_util.type.Function(scrollTarget)){// assign new scroll function
setScrollPos = scrollTarget;}else{// scroll to element
var elem = _util.get.elements(scrollTarget)[0];if (elem){// if parent is pin spacer,use spacer position instead so correct start position is returned for pinned elements.
while (elem.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)){elem = elem.parentNode;}var
param = _options.vertical ? "top" :"left",// which param is of interest ?
containerOffset = _util.get.offset(_options.container),// container position is needed because element offset is returned in relation to document,not in relation to container.
elementOffset = _util.get.offset(elem);if (!_isDocument){// container is not the document root,so substract scroll Position to get correct trigger element position relative to scrollcontent
containerOffset[param] -= Controller.scrollPos();}Controller.scrollTo(elementOffset[param] - containerOffset[param],additionalParameter);}else{log(2,"scrollTo(): The supplied argument is invalid. Scroll cancelled.",scrollTarget);}}return Controller;};this.scrollPos = function (scrollPosMethod){if (!arguments.length){// get
return getScrollPos.call(Controller);}else{// set
if (_util.type.Function(scrollPosMethod)){getScrollPos = scrollPosMethod;}else{log(2,"Provided value for method 'scrollPos' is not a function. To change the current scroll position use 'scrollTo()'.");}}return Controller;};this.info = function (about){var values ={size:_viewPortSize,// contains height or width (in regard to orientation);vertical:_options.vertical,scrollPos:_scrollPos,scrollDirection:_scrollDirection,container:_options.container,isDocument:_isDocument};if (!arguments.length){// get all as an object
return values;}else if (values[about] !== undefined){return values[about];}else{log(1,"ERROR: option \"" + about + "\" is not available");return;}};this.loglevel = function (newLoglevel){if (!arguments.length){// get
return _options.loglevel;}else if (_options.loglevel != newLoglevel){// set
_options.loglevel = newLoglevel;}return Controller;};this.enabled = function (newState){if (!arguments.length){// get
return _enabled;}else if (_enabled != newState){// set
_enabled = !!newState;Controller.updateScene(_sceneObjects,true);}return Controller;};this.destroy = function (resetScenes){window.clearTimeout(_refreshTimeout);var i = _sceneObjects.length;while (i--){_sceneObjects[i].destroy(resetScenes);}_options.container.removeEventListener("resize",onChange);_options.container.removeEventListener("scroll",onChange);_util.cAF(_updateTimeout);log(3,"destroyed " + NAMESPACE + " (reset: " + (resetScenes ? "true" :"false") + ")");return null;};// INIT
construct();return Controller;};// store pagewide controller options
var CONTROLLER_OPTIONS ={defaults:{container:window,vertical:true,globalSceneOptions:{},loglevel:2,refreshInterval:100}};ScrollMagic.Controller.addOption = function (name,defaultValue){CONTROLLER_OPTIONS.defaults[name] = defaultValue;};// instance extension function for plugins
ScrollMagic.Controller.extend = function (extension){var oldClass = this;ScrollMagic.Controller = function (){oldClass.apply(this,arguments);this.$super = _util.extend({},this);// copy parent state
return extension.apply(this,arguments) || this;};_util.extend(ScrollMagic.Controller,oldClass);// copy properties
ScrollMagic.Controller.prototype = oldClass.prototype;// copy prototype
ScrollMagic.Controller.prototype.constructor = ScrollMagic.Controller;// restore constructor};ScrollMagic.Scene = function (options){var
NAMESPACE = 'ScrollMagic.Scene',SCENE_STATE_BEFORE = 'BEFORE',SCENE_STATE_DURING = 'DURING',SCENE_STATE_AFTER = 'AFTER',DEFAULT_OPTIONS = SCENE_OPTIONS.defaults;var
Scene = this,_options = _util.extend({},DEFAULT_OPTIONS,options),_state = SCENE_STATE_BEFORE,_progress = 0,_scrollOffset ={start:0,end:0},// reflects the controllers's scroll position for the start and end of the scene respectively
_triggerPos = 0,
_enabled = true,
_durationUpdateMethod,
_controller;
/**
* Internal constructor function of the ScrollMagic Scene
* @private
*/
var construct = function () {
for (var key in _options) { // check supplied options
if (!DEFAULT_OPTIONS.hasOwnProperty(key)) {
log(2, "WARNING: Unknown option \"" + key + "\"");
delete _options[key];
}
}
// add getters/setters for all possible options
for (var optionName in DEFAULT_OPTIONS) {
addSceneOption(optionName);
}
// validate all options
validateOption();
};
/*
* ----------------------------------------------------------------
* Event Management
* ----------------------------------------------------------------
*/
var _listeners = {};
/**
* Scene start event.
* Fires whenever the scroll position its the starting point of the scene.
* It will also fire when scrolling back up going over the start position of the scene. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.
*
* For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.
*
* @event ScrollMagic.Scene#start
*
* @example
* scene.on("start", function (event) {
* console.log("Hit start point of scene.");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.progress - Reflects the current progress of the scene
* @property {string} event.state - The current state of the scene `"BEFORE"` or `"DURING"`
* @property {string} event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`, `"FORWARD"` or `"REVERSE"`
*/
/**
* Scene end event.
* Fires whenever the scroll position its the ending point of the scene.
* It will also fire when scrolling back up from after the scene and going over its end position. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.
*
* For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.
*
* @event ScrollMagic.Scene#end
*
* @example
* scene.on("end", function (event) {
* console.log("Hit end point of scene.");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.progress - Reflects the current progress of the scene
* @property {string} event.state - The current state of the scene `"DURING"` or `"AFTER"`
* @property {string} event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`, `"FORWARD"` or `"REVERSE"`
*/
/**
* Scene enter event.
* Fires whenever the scene enters the "DURING" state.
* Keep in mind that it doesn't matter if the scene plays forward or backward:This event always fires when the scene enters its active scroll timeframe,regardless of the scroll-direction.
*
* For details on this event and the order in which it is fired,please review the{@link Scene.progress}method.
*
*@event ScrollMagic.Scene#enter
*
*@example
* scene.on("enter",function (event){* console.log("Scene entered.");*});*
*@property{object}event - The event Object passed to each callback
*@property{string}event.type - The name of the event
*@property{Scene}event.target - The Scene object that triggered this event
*@property{number}event.progress - Reflects the current progress of the scene
*@property{string}event.state - The current state of the scene - always `"DURING"`
*@property{string}event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`,`"FORWARD"` or `"REVERSE"`
*/
this.on = function (names,callback){if (_util.type.Function(callback)){names = names.trim().split(' ');names.forEach(function (fullname){var
nameparts = fullname.split('.'),eventname = nameparts[0],namespace = nameparts[1];if (eventname != "*"){// disallow wildcards
if (!_listeners[eventname]){_listeners[eventname] = [];}_listeners[eventname].push({namespace:namespace || '',callback:callback});}});}else{log(1,"ERROR when calling '.on()': Supplied callback for '" + names + "' is not a valid function!");}return Scene;};this.off = function (names,callback){if (!names){log(1,"ERROR: Invalid event name supplied.");return Scene;}names = names.trim().split(' ');names.forEach(function (fullname,key){var
nameparts = fullname.split('.'),eventname = nameparts[0],namespace = nameparts[1] || '',removeList = eventname === '*' ? Object.keys(_listeners) :[eventname];removeList.forEach(function (remove){var
list = _listeners[remove] || [],i = list.length;while (i--){var listener = list[i];if (listener && (namespace === listener.namespace || namespace === '*') && (!callback || callback == listener.callback)){list.splice(i,1);}}if (!list.length){delete _listeners[remove];}});});return Scene;};this.trigger = function (name,vars){if (name){var
nameparts = name.trim().split('.'),eventname = nameparts[0],namespace = nameparts[1],listeners = _listeners[eventname];log(3,'event fired:',eventname,vars ? "->" :'',vars || '');if (listeners){listeners.forEach(function (listener,key){if (!namespace || namespace === listener.namespace){listener.callback.call(Scene,new ScrollMagic.Event(eventname,listener.namespace,Scene,vars));}});}}else{log(1,"ERROR: Invalid event name supplied.");}return Scene;};// set event listeners
Scene
.on("change.internal",function (e){if (e.what !== "loglevel" && e.what !== "tweenChanges"){// no need for a scene update scene with these options...
if (e.what === "triggerElement"){updateTriggerElementPosition();}else if (e.what === "reverse"){// the only property left that may have an impact on the current scene state. Everything else is handled by the shift event.
Scene.update();}}})
.on("shift.internal",function (e){updateScrollOffset();Scene.update();// update scene to reflect new position});var log = this._log = function (loglevel,output){if (_options.loglevel >= loglevel){Array.prototype.splice.call(arguments,1,0,"(" + NAMESPACE + ") ->");_util.log.apply(window,arguments);}};this.addTo = function (controller){if (!(controller instanceof ScrollMagic.Controller)){log(1,"ERROR: supplied argument of 'addTo()' is not a valid ScrollMagic Controller");}else if (_controller != controller){// new controller
if (_controller){// was associated to a different controller before,so remove it...
_controller.removeScene(Scene);}_controller = controller;validateOption();updateDuration(true);updateTriggerElementPosition(true);updateScrollOffset();_controller.info("container").addEventListener('resize',onContainerResize);controller.addScene(Scene);Scene.trigger("add",{controller:_controller});log(3,"added " + NAMESPACE + " to controller");Scene.update();}return Scene;};this.enabled = function (newState){if (!arguments.length){// get
return _enabled;}else if (_enabled != newState){// set
_enabled = !!newState;Scene.update(true);}return Scene;};this.remove = function (){if (_controller){_controller.info("container").removeEventListener('resize',onContainerResize);var tmpParent = _controller;_controller = undefined;tmpParent.removeScene(Scene);Scene.trigger("remove");log(3,"removed " + NAMESPACE + " from controller");}return Scene;};this.destroy = function (reset){Scene.trigger("destroy",{reset:reset});Scene.remove();Scene.off("*.*");log(3,"destroyed " + NAMESPACE + " (reset: " + (reset ? "true" :"false") + ")");return null;};this.update = function (immediately){if (_controller){if (immediately){if (_controller.enabled() && _enabled){var
scrollPos = _controller.info("scrollPos"),newProgress;if (_options.duration > 0){newProgress = (scrollPos - _scrollOffset.start) / (_scrollOffset.end - _scrollOffset.start);}else{newProgress = scrollPos >= _scrollOffset.start ? 1 :0;}Scene.trigger("update",{startPos:_scrollOffset.start,endPos:_scrollOffset.end,scrollPos:scrollPos});Scene.progress(newProgress);}else if (_pin && _state === SCENE_STATE_DURING){updatePinState(true);// unpin in position}}else{_controller.updateScene(Scene,false);}}return Scene;};this.refresh = function (){updateDuration();updateTriggerElementPosition();// update trigger element position
return Scene;};this.progress = function (progress){if (!arguments.length){// get
return _progress;}else{// set
var
doUpdate = false,oldState = _state,scrollDirection = _controller ? _controller.info("scrollDirection") :'PAUSED',reverseOrForward = _options.reverse || progress >= _progress;if (_options.duration === 0){// zero duration scenes
doUpdate = _progress != progress;_progress = progress < 1 && reverseOrForward ? 0 :1;_state = _progress === 0 ? SCENE_STATE_BEFORE :SCENE_STATE_DURING;}else{// scenes with start and end
if (progress < 0 && _state !== SCENE_STATE_BEFORE && reverseOrForward){// go back to initial state
_progress = 0;_state = SCENE_STATE_BEFORE;doUpdate = true;}else if (progress >= 0 && progress < 1 && reverseOrForward){_progress = progress;_state = SCENE_STATE_DURING;doUpdate = true;}else if (progress >= 1 && _state !== SCENE_STATE_AFTER){_progress = 1;_state = SCENE_STATE_AFTER;doUpdate = true;}else if (_state === SCENE_STATE_DURING && !reverseOrForward){updatePinState();// in case we scrolled backwards mid-scene and reverse is disabled => update the pin position,so it doesn't move back as well.
}
}
if (doUpdate) {
// fire events
var
eventVars = {
progress: _progress,
state: _state,
scrollDirection: scrollDirection
},
stateChanged = _state != oldState;
var trigger = function (eventName) { // tmp helper to simplify code
Scene.trigger(eventName, eventVars);
};
if (stateChanged) { // enter events
if (oldState !== SCENE_STATE_DURING) {
trigger("enter");
trigger(oldState === SCENE_STATE_BEFORE ? "start" : "end");
}
}
trigger("progress");
if (stateChanged) { // leave events
if (_state !== SCENE_STATE_DURING) {
trigger(_state === SCENE_STATE_BEFORE ? "start" : "end");
trigger("leave");
}
}
}
return Scene;
}
};
/**
* Update the start and end scrollOffset of the container.
* The positions reflect what the controller's scroll position will be at the start and end respectively.
* Is called,when:* - Scene event "change" is called with:offset,triggerHook,duration
* - scroll container event "resize" is called
* - the position of the triggerElement changes
* - the controller changes -> addTo()
*@private
*/
var updateScrollOffset = function (){_scrollOffset ={start:_triggerPos + _options.offset};if (_controller && _options.triggerElement){// take away triggerHook portion to get relative to top
_scrollOffset.start -= _controller.info("size") * _options.triggerHook;}_scrollOffset.end = _scrollOffset.start + _options.duration;};var updateDuration = function (suppressEvents){// update duration
if (_durationUpdateMethod){var varname = "duration";if (changeOption(varname,_durationUpdateMethod.call(Scene)) && !suppressEvents){// set
Scene.trigger("change",{what:varname,newval:_options[varname]});Scene.trigger("shift",{reason:varname});}}};var updateTriggerElementPosition = function (suppressEvents){var
elementPos = 0,telem = _options.triggerElement;if (_controller && (telem || _triggerPos > 0)){// either an element exists or was removed and the triggerPos is still > 0
if (telem){// there currently a triggerElement set
if (telem.parentNode){// check if element is still attached to DOM
var
controllerInfo = _controller.info(),containerOffset = _util.get.offset(controllerInfo.container),// container position is needed because element offset is returned in relation to document,not in relation to container.
param = controllerInfo.vertical ? "top" :"left";// which param is of interest ?
// if parent is spacer,use spacer position instead so correct start position is returned for pinned elements.
while (telem.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)){telem = telem.parentNode;}var elementOffset = _util.get.offset(telem);if (!controllerInfo.isDocument){// container is not the document root,so substract scroll Position to get correct trigger element position relative to scrollcontent
containerOffset[param] -= _controller.scrollPos();}elementPos = elementOffset[param] - containerOffset[param];}else{// there was an element,but it was removed from DOM
log(2,"WARNING: triggerElement was removed from DOM and will be reset to",undefined);Scene.triggerElement(undefined);// unset,so a change event is triggered}}var changed = elementPos != _triggerPos;_triggerPos = elementPos;if (changed && !suppressEvents){Scene.trigger("shift",{reason:"triggerElementPosition"});}}};var onContainerResize = function (e){if (_options.triggerHook > 0){Scene.trigger("shift",{reason:"containerResize"});}};var _validate = _util.extend(SCENE_OPTIONS.validate,{// validation for duration handled internally for reference to private var _durationMethod
duration:function (val){if (_util.type.String(val) && val.match(/^(\.|\d)*\d+%$/)){// percentage value
var perc = parseFloat(val) / 100;val = function (){return _controller ? _controller.info("size") * perc :0;};}if (_util.type.Function(val)){// function
_durationUpdateMethod = val;try{val = parseFloat(_durationUpdateMethod.call(Scene));}catch (e){val = -1;// will cause error below}}// val has to be float
val = parseFloat(val);if (!_util.type.Number(val) || val < 0){if (_durationUpdateMethod){_durationUpdateMethod = undefined;throw ["Invalid return value of supplied function for option \"duration\":",val];}else{throw ["Invalid value for option \"duration\":",val];}}return val;}});var validateOption = function (check){check = arguments.length ? [check] :Object.keys(_validate);check.forEach(function (optionName,key){var value;if (_validate[optionName]){// there is a validation method for this option
try{// validate value
value = _validate[optionName](_options[optionName]);}catch (e){// validation failed -> reset to default
value = DEFAULT_OPTIONS[optionName];var logMSG = _util.type.String(e) ? [e] :e;if (_util.type.Array(logMSG)){logMSG[0] = "ERROR: " + logMSG[0];logMSG.unshift(1);// loglevel 1 for error msg
log.apply(this,logMSG);}else{log(1,"ERROR: Problem executing validation callback for option '" + optionName + "':",e.message);}}finally{_options[optionName] = value;}}});};var changeOption = function (varname,newval){var
changed = false,oldval = _options[varname];if (_options[varname] != newval){_options[varname] = newval;validateOption(varname);// resets to default if necessary
changed = oldval != _options[varname];}return changed;};// generate getters/setters for all options
var addSceneOption = function (optionName){if (!Scene[optionName]){Scene[optionName] = function (newVal){if (!arguments.length){// get
return _options[optionName];}else{if (optionName === "duration"){// new duration is set,so any previously set function must be unset
_durationUpdateMethod = undefined;}if (changeOption(optionName,newVal)){// set
Scene.trigger("change",{what:optionName,newval:_options[optionName]});if (SCENE_OPTIONS.shifts.indexOf(optionName) > -1){Scene.trigger("shift",{reason:optionName});}}}return Scene;};}};this.controller = function (){return _controller;};this.state = function (){return _state;};this.scrollOffset = function (){return _scrollOffset.start;};this.triggerPosition = function (){var pos = _options.offset;// the offset is the basis
if (_controller){// get the trigger position
if (_options.triggerElement){// Element as trigger
pos += _triggerPos;}else{// return the height of the triggerHook to start at the beginning
pos += _controller.info("size") * Scene.triggerHook();}}return pos;};var
_pin,_pinOptions;Scene
.on("shift.internal",function (e){var durationChanged = e.reason === "duration";if ((_state === SCENE_STATE_AFTER && durationChanged) || (_state === SCENE_STATE_DURING && _options.duration === 0)){// if [duration changed after a scene (inside scene progress updates pin position)] or [duration is 0,we are in pin phase and some other value changed].
updatePinState();}if (durationChanged){updatePinDimensions();}})
.on("progress.internal",function (e){updatePinState();})
.on("add.internal",function (e){updatePinDimensions();})
.on("destroy.internal",function (e){Scene.removePin(e.reset);});var updatePinState = function (forceUnpin){if (_pin && _controller){var
containerInfo = _controller.info(),pinTarget = _pinOptions.spacer.firstChild;// may be pin element or another spacer,if cascading pins
if (!forceUnpin && _state === SCENE_STATE_DURING){// during scene or if duration is 0 and we are past the trigger
// pinned state
if (_util.css(pinTarget,"position") != "fixed"){// change state before updating pin spacer (position changes due to fixed collapsing might occur.)
_util.css(pinTarget,{"position":"fixed"});// update pin spacer
updatePinDimensions();}var
fixedPos = _util.get.offset(_pinOptions.spacer,true),// get viewport position of spacer
scrollDistance = _options.reverse || _options.duration === 0 ?
containerInfo.scrollPos - _scrollOffset.start // quicker
:Math.round(_progress * _options.duration * 10) / 10;// if no reverse and during pin the position needs to be recalculated using the progress
// add scrollDistance
fixedPos[containerInfo.vertical ? "top" :"left"] += scrollDistance;// set new values
_util.css(_pinOptions.spacer.firstChild,{top:fixedPos.top,left:fixedPos.left});}else{// unpinned state
var
newCSS ={position:_pinOptions.inFlow ? "relative" :"absolute",top:0,left:0},change = _util.css(pinTarget,"position") != newCSS.position;if (!_pinOptions.pushFollowers){newCSS[containerInfo.vertical ? "top" :"left"] = _options.duration * _progress;}else if (_options.duration > 0){// only concerns scenes with duration
if (_state === SCENE_STATE_AFTER && parseFloat(_util.css(_pinOptions.spacer,"padding-top")) === 0){change = true;// if in after state but havent updated spacer yet (jumped past pin)}else if (_state === SCENE_STATE_BEFORE && parseFloat(_util.css(_pinOptions.spacer,"padding-bottom")) === 0){// before
change = true;// jumped past fixed state upward direction}}// set new values
_util.css(pinTarget,newCSS);if (change){// update pin spacer if state changed
updatePinDimensions();}}}};var updatePinDimensions = function (){if (_pin && _controller && _pinOptions.inFlow){// no spacerresize,if original position is absolute
var
after = (_state === SCENE_STATE_AFTER),before = (_state === SCENE_STATE_BEFORE),during = (_state === SCENE_STATE_DURING),vertical = _controller.info("vertical"),pinTarget = _pinOptions.spacer.firstChild,// usually the pined element but can also be another spacer (cascaded pins)
marginCollapse = _util.isMarginCollapseType(_util.css(_pinOptions.spacer,"display")),css ={};// set new size
// if relsize:spacer -> pin | else:pin -> spacer
if (_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth){if (during){_util.css(_pin,{"width":_util.get.width(_pinOptions.spacer)});}else{_util.css(_pin,{"width":"100%"});}}else{// minwidth is needed for cascaded pins.
css["min-width"] = _util.get.width(vertical ? _pin :pinTarget,true,true);css.width = during ? css["min-width"] :"auto";}if (_pinOptions.relSize.height){if (during){// the only padding the spacer should ever include is the duration (if pushFollowers = true),so we need to substract that.
_util.css(_pin,{"height":_util.get.height(_pinOptions.spacer) - (_pinOptions.pushFollowers ? _options.duration :0)});}else{_util.css(_pin,{"height":"100%"});}}else{// margin is only included if it's a cascaded pin to resolve an IE9 bug
css["min-height"] = _util.get.height(vertical ? pinTarget : _pin, true, !marginCollapse); // needed for cascading pins
css.height = during ? css["min-height"] : "auto";
}
// add space for duration if pushFollowers is true
if (_pinOptions.pushFollowers) {
css["padding" + (vertical ? "Top" : "Left")] = _options.duration * _progress;
css["padding" + (vertical ? "Bottom" : "Right")] = _options.duration * (1 - _progress);
}
_util.css(_pinOptions.spacer, css);
}
};
/**
* Updates the Pin state (in certain scenarios)
* If the controller container is not the document and we are mid-pin-phase scrolling or resizing the main document can result to wrong pin positions.
* So this function is called on resize and scroll of the document.
* @private
*/
var updatePinInContainer = function () {
if (_controller && _pin && _state === SCENE_STATE_DURING && !_controller.info("isDocument")) {
updatePinState();
}
};
/**
* Updates the Pin spacer size state (in certain scenarios)
* If container is resized during pin and relatively sized the size of the pin might need to be updated...
* So this function is called on resize of the container.
* @private
*/
var updateRelativePinSpacer = function () {
if (_controller && _pin && // well, duh
_state === SCENE_STATE_DURING && // element in pinned state?
( // is width or height relatively sized, but not in relation to body? then we need to recalc.
((_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) && _util.get.width(window) != _util.get.width(_pinOptions.spacer.parentNode)) ||
(_pinOptions.relSize.height && _util.get.height(window) != _util.get.height(_pinOptions.spacer.parentNode))
)
) {
updatePinDimensions();
}
};
/**
* Is called, when the mousewhel is used while over a pinned element inside a div container.
* If the scene is in fixed state scroll events would be counted towards the body. This forwards the event to the scroll container.
* @private
*/
var onMousewheelOverPin = function (e) {
if (_controller && _pin && _state === SCENE_STATE_DURING && !_controller.info("isDocument")) { // in pin state
e.preventDefault();
_controller._setScrollPos(_controller.info("scrollPos") - ((e.wheelDelta || e[_controller.info("vertical") ? "wheelDeltaY" : "wheelDeltaX"]) / 3 || -e.detail * 30));
}
};
/**
* Pin an element for the duration of the scene.
* If the scene duration is 0 the element will only be unpinned, if the user scrolls back past the start position.
* Make sure only one pin is applied to an element at the same time.
* An element can be pinned multiple times, but only successively.
* _**NOTE:** The option `pushFollowers` has no effect, when the scene duration is 0._
* @method ScrollMagic.Scene#setPin
* @example
* // pin element and push all following elements down by the amount of the pin duration.
* scene.setPin("#pin");
*
* // pin element and keeping all following elements in their place. The pinned element will move past them.
* scene.setPin("#pin", {pushFollowers: false});
*
* @param {(string|object)} element - A Selector targeting an element or a DOM object that is supposed to be pinned.
* @param {object} [settings] - settings for the pin
* @param {boolean} [settings.pushFollowers=true] - If `true` following elements will be "pushed" down for the duration of the pin, if `false` the pinned element will just scroll past them.
Ignored, when duration is `0`.
* @param {string} [settings.spacerClass="scrollmagic-pin-spacer"] - Classname of the pin spacer element, which is used to replace the element.
*
* @returns {Scene} Parent object for chaining.
*/
this.setPin = function (element, settings) {
var
defaultSettings = {
pushFollowers: true,
spacerClass: "scrollmagic-pin-spacer"
};
var pushFollowersActivelySet = settings && settings.hasOwnProperty('pushFollowers');
settings = _util.extend({}, defaultSettings, settings);
// validate Element
element = _util.get.elements(element)[0];
if (!element) {
log(1, "ERROR calling method 'setPin()': Invalid pin element supplied.");
return Scene; // cancel
} else if (_util.css(element, "position") === "fixed") {
log(1, "ERROR calling method 'setPin()': Pin does not work with elements that are positioned 'fixed'.");
return Scene; // cancel
}
if (_pin) { // preexisting pin?
if (_pin === element) {
// same pin we already have -> do nothing
return Scene; // cancel
} else {
// kill old pin
Scene.removePin();
}
}
_pin = element;
var
parentDisplay = _pin.parentNode.style.display,
boundsParams = ["top", "left", "bottom", "right", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom"];
_pin.parentNode.style.display = 'none'; // hack start to force css to return stylesheet values instead of calculated px values.
var
inFlow = _util.css(_pin, "position") != "absolute",
pinCSS = _util.css(_pin, boundsParams.concat(["display"])),
sizeCSS = _util.css(_pin, ["width", "height"]);
_pin.parentNode.style.display = parentDisplay; // hack end.
if (!inFlow && settings.pushFollowers) {
log(2, "WARNING: If the pinned element is positioned absolutely pushFollowers will be disabled.");
settings.pushFollowers = false;
}
window.setTimeout(function () { // wait until all finished, because with responsive duration it will only be set after scene is added to controller
if (_pin && _options.duration === 0 && pushFollowersActivelySet && settings.pushFollowers) {
log(2, "WARNING: pushFollowers =", true, "has no effect, when scene duration is 0.");
}
}, 0);
// create spacer and insert
var
spacer = _pin.parentNode.insertBefore(document.createElement('div'), _pin),
spacerCSS = _util.extend(pinCSS, {
position: inFlow ? "relative" : "absolute",
boxSizing: "content-box",
mozBoxSizing: "content-box",
webkitBoxSizing: "content-box"
});
if (!inFlow) { // copy size if positioned absolutely, to work for bottom/right positioned elements.
_util.extend(spacerCSS, _util.css(_pin, ["width", "height"]));
}
_util.css(spacer, spacerCSS);
spacer.setAttribute(PIN_SPACER_ATTRIBUTE, "");
_util.addClass(spacer, settings.spacerClass);
// set the pin Options
_pinOptions = {
spacer: spacer,
relSize: { // save if size is defined using % values. if so, handle spacer resize differently...
width: sizeCSS.width.slice(-1) === "%",
height: sizeCSS.height.slice(-1) === "%",
autoFullWidth: sizeCSS.width === "auto" && inFlow && _util.isMarginCollapseType(pinCSS.display)
},
pushFollowers: settings.pushFollowers,
inFlow: inFlow, // stores if the element takes up space in the document flow
};
if (!_pin.___origStyle) {
_pin.___origStyle = {};
var
pinInlineCSS = _pin.style,
copyStyles = boundsParams.concat(["width", "height", "position", "boxSizing", "mozBoxSizing", "webkitBoxSizing"]);
copyStyles.forEach(function (val) {
_pin.___origStyle[val] = pinInlineCSS[val] || "";
});
}
// if relative size, transfer it to spacer and make pin calculate it...
if (_pinOptions.relSize.width) {
_util.css(spacer, {
width: sizeCSS.width
});
}
if (_pinOptions.relSize.height) {
_util.css(spacer, {
height: sizeCSS.height
});
}
// now place the pin element inside the spacer
spacer.appendChild(_pin);
// and set new css
_util.css(_pin, {
position: inFlow ? "relative" : "absolute",
margin: "auto",
top: "auto",
left: "auto",
bottom: "auto",
right: "auto"
});
if (_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) {
_util.css(_pin, {
boxSizing: "border-box",
mozBoxSizing: "border-box",
webkitBoxSizing: "border-box"
});
}
// add listener to document to update pin position in case controller is not the document.
window.addEventListener('scroll', updatePinInContainer);
window.addEventListener('resize', updatePinInContainer);
window.addEventListener('resize', updateRelativePinSpacer);
// add mousewheel listener to catch scrolls over fixed elements
_pin.addEventListener("mousewheel", onMousewheelOverPin);
_pin.addEventListener("DOMMouseScroll", onMousewheelOverPin);
log(3, "added pin");
// finally update the pin to init
updatePinState();
return Scene;
};
/**
* Remove the pin from the scene.
* @method ScrollMagic.Scene#removePin
* @example
* // remove the pin from the scene without resetting it (the spacer is not removed)
* scene.removePin();
*
* // remove the pin from the scene and reset the pin element to its initial position (spacer is removed)
* scene.removePin(true);
*
* @param {boolean} [reset=false] - If `false` the spacer will not be removed and the element's position will not be reset.
*@returns{Scene}Parent object for chaining.
*/
this.removePin = function (reset){if (_pin){if (_state === SCENE_STATE_DURING){updatePinState(true);// force unpin at position}if (reset || !_controller){// if there's no controller no progress was made anyway...
var pinTarget = _pinOptions.spacer.firstChild; // usually the pin element, but may be another spacer (cascaded pins)...
if (pinTarget.hasAttribute(PIN_SPACER_ATTRIBUTE)) { // copy margins to child spacer
var
style = _pinOptions.spacer.style,
values = ["margin", "marginLeft", "marginRight", "marginTop", "marginBottom"],
margins = {};
values.forEach(function (val) {
margins[val] = style[val] || "";
});
_util.css(pinTarget, margins);
}
_pinOptions.spacer.parentNode.insertBefore(pinTarget, _pinOptions.spacer);
_pinOptions.spacer.parentNode.removeChild(_pinOptions.spacer);
if (!_pin.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) { // if it's the last pin for this element -> restore inline styles
// TODO:only correctly set for first pin (when cascading) - how to fix?
_util.css(_pin,_pin.___origStyle);delete _pin.___origStyle;}}window.removeEventListener('scroll',updatePinInContainer);window.removeEventListener('resize',updatePinInContainer);window.removeEventListener('resize',updateRelativePinSpacer);_pin.removeEventListener("mousewheel",onMousewheelOverPin);_pin.removeEventListener("DOMMouseScroll",onMousewheelOverPin);_pin = undefined;log(3,"removed pin (reset: " + (reset ? "true" :"false") + ")");}return Scene;};var
_cssClasses,_cssClassElems = [];Scene
.on("destroy.internal",function (e){Scene.removeClassToggle(e.reset);});this.setClassToggle = function (element,classes){var elems = _util.get.elements(element);if (elems.length === 0 || !_util.type.String(classes)){log(1,"ERROR calling method 'setClassToggle()': Invalid " + (elems.length === 0 ? "element" :"classes") + " supplied.");return Scene;}if (_cssClassElems.length > 0){// remove old ones
Scene.removeClassToggle();}_cssClasses = classes;_cssClassElems = elems;Scene.on("enter.internal_class leave.internal_class",function (e){var toggle = e.type === "enter" ? _util.addClass :_util.removeClass;_cssClassElems.forEach(function (elem,key){toggle(elem,_cssClasses);});});return Scene;};this.removeClassToggle = function (reset){if (reset){_cssClassElems.forEach(function (elem,key){_util.removeClass(elem,_cssClasses);});}Scene.off("start.internal_class end.internal_class");_cssClasses = undefined;_cssClassElems = [];return Scene;};// INIT
construct();return Scene;};// store pagewide scene options
var SCENE_OPTIONS ={defaults:{duration:0,offset:0,triggerElement:undefined,triggerHook:0.5,reverse:true,loglevel:2},validate:{offset:function (val){val = parseFloat(val);if (!_util.type.Number(val)){throw ["Invalid value for option \"offset\":",val];}return val;},triggerElement:function (val){val = val || undefined;if (val){var elem = _util.get.elements(val)[0];if (elem && elem.parentNode){val = elem;}else{throw ["Element defined in option \"triggerElement\" was not found:",val];}}return val;},triggerHook:function (val){var translate ={"onCenter":0.5,"onEnter":1,"onLeave":0};if (_util.type.Number(val)){val = Math.max(0,Math.min(parseFloat(val),1));// make sure its betweeen 0 and 1}else if (val in translate){val = translate[val];}else{throw ["Invalid value for option \"triggerHook\": ",val];}return val;},reverse:function (val){return !!val;// force boolean},loglevel:function (val){val = parseInt(val);if (!_util.type.Number(val) || val < 0 || val > 3){throw ["Invalid value for option \"loglevel\":",val];}return val;}},// holder for validation methods. duration validation is handled in 'getters-setters.js'
shifts:["duration","offset","triggerHook"],// list of options that trigger a `shift` event};ScrollMagic.Scene.addOption = function (name,defaultValue,validationCallback,shifts){if (!(name in SCENE_OPTIONS.defaults)){SCENE_OPTIONS.defaults[name] = defaultValue;SCENE_OPTIONS.validate[name] = validationCallback;if (shifts){SCENE_OPTIONS.shifts.push(name);}}else{ScrollMagic._util.log(1,"[static] ScrollMagic.Scene -> Cannot add Scene option '" + name + "', because it already exists.");}};// instance extension function for plugins
// TODO:DOC (private for dev)
ScrollMagic.Scene.extend = function (extension){var oldClass = this;ScrollMagic.Scene = function (){oldClass.apply(this,arguments);this.$super = _util.extend({},this);// copy parent state
return extension.apply(this,arguments) || this;};_util.extend(ScrollMagic.Scene,oldClass);// copy properties
ScrollMagic.Scene.prototype = oldClass.prototype;// copy prototype
ScrollMagic.Scene.prototype.constructor = ScrollMagic.Scene;// restore constructor};ScrollMagic.Event = function (type,namespace,target,vars){vars = vars ||{};for (var key in vars){this[key] = vars[key];}this.type = type;this.target = this.currentTarget = target;this.namespace = namespace || '';this.timeStamp = this.timestamp = Date.now();return this;};var _util = ScrollMagic._util = (function (window){var U ={},i;// parse float and fall back to 0.
var floatval = function (number){return parseFloat(number) || 0;};// get current style IE safe (otherwise IE would return calculated values for 'auto')
var _getComputedStyle = function (elem){return elem.currentStyle ? elem.currentStyle :window.getComputedStyle(elem);};// get element dimension (width or height)
var _dimension = function (which,elem,outer,includeMargin){elem = (elem === document) ? window :elem;if (elem === window){includeMargin = false;}else if (!_type.DomElement(elem)){return 0;}which = which.charAt(0).toUpperCase() + which.substr(1).toLowerCase();var dimension = (outer ? elem['offset' + which] || elem['outer' + which] :elem['client' + which] || elem['inner' + which]) || 0;if (outer && includeMargin){var style = _getComputedStyle(elem);dimension += which === 'Height' ? floatval(style.marginTop) + floatval(style.marginBottom) :floatval(style.marginLeft) + floatval(style.marginRight);}return dimension;};// converts 'margin-top' into 'marginTop'
var _camelCase = function (str){return str.replace(/^[^a-z]+([a-z])/g,'$1').replace(/-([a-z])/g,function (g){return g[1].toUpperCase();});};// extend obj – same as jQuery.extend({},objA,objB)
U.extend = function (obj){obj = obj ||{};for (i = 1;i < arguments.length;i++){if (!arguments[i]){continue;}for (var key in arguments[i]){if (arguments[i].hasOwnProperty(key)){obj[key] = arguments[i][key];}}}return obj;};// check if a css display type results in margin-collapse or not
U.isMarginCollapseType = function (str){return ["block","flex","list-item","table","-webkit-box"].indexOf(str) > -1;};// implementation of requestAnimationFrame
// based on https://gist.github.com/paulirish/1579671
var
lastTime = 0,vendors = ['ms','moz','webkit','o'];var _requestAnimationFrame = window.requestAnimationFrame;var _cancelAnimationFrame = window.cancelAnimationFrame;// try vendor prefixes if the above doesn't work
for (i = 0; !_requestAnimationFrame && i < vendors.length; ++i) {
_requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
_cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + 'CancelRequestAnimationFrame'];
}
// fallbacks
if (!_requestAnimationFrame) {
_requestAnimationFrame = function (callback) {
var
currTime = new Date().getTime(),
timeToCall = Math.max(0, 16 - (currTime - lastTime)),
id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!_cancelAnimationFrame) {
_cancelAnimationFrame = function (id) {
window.clearTimeout(id);
};
}
U.rAF = _requestAnimationFrame.bind(window);
U.cAF = _cancelAnimationFrame.bind(window);
var
loglevels = ["error", "warn", "log"],
console = window.console || {};
console.log = console.log || function () {}; // no console log, well - do nothing then...
// make sure methods for all levels exist.
for (i = 0; i < loglevels.length; i++) {
var method = loglevels[i];
if (!console[method]) {
console[method] = console.log; // prefer .log over nothing
}
}
U.log = function (loglevel) {
if (loglevel > loglevels.length || loglevel <= 0) loglevel = loglevels.length;
var now = new Date(),
time = ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2) + ":" + ("0" + now.getSeconds()).slice(-2) + ":" + ("00" + now.getMilliseconds()).slice(-3),
method = loglevels[loglevel - 1],
args = Array.prototype.splice.call(arguments, 1),
func = Function.prototype.bind.call(console[method], console);
args.unshift(time);
func.apply(console, args);
};
/**
* ------------------------------
* type testing
* ------------------------------
*/
var _type = U.type = function (v) {
return Object.prototype.toString.call(v).replace(/^\[object (.+)\]$/, "$1").toLowerCase();
};
_type.String = function (v) {
return _type(v) === 'string';
};
_type.Function = function (v) {
return _type(v) === 'function';
};
_type.Array = function (v) {
return Array.isArray(v);
};
_type.Number = function (v) {
return !_type.Array(v) && (v - parseFloat(v) + 1) >= 0;
};
_type.DomElement = function (o) {
return (
typeof HTMLElement === "object" || typeof HTMLElement === "function" ? o instanceof HTMLElement || o instanceof SVGElement : //DOM2
o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string"
);
};
/**
* ------------------------------
* DOM Element info
* ------------------------------
*/
// always returns a list of matching DOM elements, from a selector, a DOM element or an list of elements or even an array of selectors
var _get = U.get = {};
_get.elements = function (selector) {
var arr = [];
if (_type.String(selector)) {
try {
selector = document.querySelectorAll(selector);
} catch (e) { // invalid selector
return arr;
}
}
if (_type(selector) === 'nodelist' || _type.Array(selector) || selector instanceof NodeList) {
for (var i = 0, ref = arr.length = selector.length; i < ref; i++) { // list of elements
var elem = selector[i];
arr[i] = _type.DomElement(elem) ? elem : _get.elements(elem); // if not an element, try to resolve recursively
}
} else if (_type.DomElement(selector) || selector === document || selector === window) {
arr = [selector]; // only the element
}
return arr;
};
// get scroll top value
_get.scrollTop = function (elem) {
return (elem && typeof elem.scrollTop === 'number') ? elem.scrollTop : window.pageYOffset || 0;
};
// get scroll left value
_get.scrollLeft = function (elem) {
return (elem && typeof elem.scrollLeft === 'number') ? elem.scrollLeft : window.pageXOffset || 0;
};
// get element height
_get.width = function (elem, outer, includeMargin) {
return _dimension('width', elem, outer, includeMargin);
};
// get element width
_get.height = function (elem, outer, includeMargin) {
return _dimension('height', elem, outer, includeMargin);
};
// get element position (optionally relative to viewport)
_get.offset = function (elem, relativeToViewport) {
var offset = {
top: 0,
left: 0
};
if (elem && elem.getBoundingClientRect) { // check if available
var rect = elem.getBoundingClientRect();
offset.top = rect.top;
offset.left = rect.left;
if (!relativeToViewport) { // clientRect is by default relative to viewport...
offset.top += _get.scrollTop();
offset.left += _get.scrollLeft();
}
}
return offset;
};
/**
* ------------------------------
* DOM Element manipulation
* ------------------------------
*/
U.addClass = function (elem, classname) {
if (classname) {
if (elem.classList)
elem.classList.add(classname);
else
elem.className += ' ' + classname;
}
};
U.removeClass = function (elem, classname) {
if (classname) {
if (elem.classList)
elem.classList.remove(classname);
else
elem.className = elem.className.replace(new RegExp('(^|\\b)' + classname.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
};
// if options is string -> returns css value
// if options is array -> returns object with css value pairs
// if options is object -> set new css values
U.css = function (elem, options) {
if (_type.String(options)) {
return _getComputedStyle(elem)[_camelCase(options)];
} else if (_type.Array(options)) {
var
obj = {},
style = _getComputedStyle(elem);
options.forEach(function (option, key) {
obj[option] = style[_camelCase(option)];
});
return obj;
} else {
for (var option in options) {
var val = options[option];
if (val == parseFloat(val)) { // assume pixel for seemingly numerical values
val += 'px';
}
elem.style[_camelCase(option)] = val;
}
}
};
return U;
}(window || {}));
ScrollMagic.Scene.prototype.addIndicators = function () {
ScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin \'debug.addIndicators\'. Please make sure to include plugins/debug.addIndicators.js');return this;}ScrollMagic.Scene.prototype.removeIndicators = function (){ScrollMagic._util.log(1,'(ScrollMagic.Scene) -> ERROR calling removeIndicators() due to missing Plugin \'debug.addIndicators\'. Please make sure to include plugins/debug.addIndicators.js');return this;}ScrollMagic.Scene.prototype.setTween = function (){ScrollMagic._util.log(1,'(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin \'animation.gsap\'. Please make sure to include plugins/animation.gsap.js');return this;}ScrollMagic.Scene.prototype.removeTween = function (){ScrollMagic._util.log(1,'(ScrollMagic.Scene) -> ERROR calling removeTween() due to missing Plugin \'animation.gsap\'. Please make sure to include plugins/animation.gsap.js');return this;}ScrollMagic.Scene.prototype.setVelocity = function (){ScrollMagic._util.log(1,'(ScrollMagic.Scene) -> ERROR calling setVelocity() due to missing Plugin \'animation.velocity\'. Please make sure to include plugins/animation.velocity.js');return this;}ScrollMagic.Scene.prototype.removeVelocity = function (){ScrollMagic._util.log(1,'(ScrollMagic.Scene) -> ERROR calling removeVelocity() due to missing Plugin \'animation.velocity\'. Please make sure to include plugins/animation.velocity.js');return this;}return ScrollMagic;}));var define = false;(function (root,factory){if (typeof define === 'function' && define.amd){// AMD. Register as an anonymous module.
define(['ScrollMagic'],factory);}else if (true){// CommonJS
factory(__webpack_require__(180));}else{}}(this,function (ScrollMagic){"use strict";var NAMESPACE = "debug.addIndicators";var
console = window.console ||{},err = Function.prototype.bind.call(console.error || console.log || function (){},console);if (!ScrollMagic){err("(" + NAMESPACE + ") -> ERROR: The ScrollMagic main module could not be found. Please make sure it's loaded before this plugin or use an asynchronous loader like requirejs.");}// plugin settings
var
FONT_SIZE = "0.85em",ZINDEX = "9999",EDGE_OFFSET = 15;// minimum edge distance,added to indentation
// overall vars
var
_util = ScrollMagic._util,_autoindex = 0;ScrollMagic.Scene.extend(function (){var
Scene = this,_indicator;var log = function (){if (Scene._log){// not available,when main source minified
Array.prototype.splice.call(arguments,1,0,"(" + NAMESPACE + ")","->");Scene._log.apply(this,arguments);}};Scene.addIndicators = function (options){if (!_indicator){var
DEFAULT_OPTIONS ={name:"",indent:0,parent:undefined,colorStart:"green",colorEnd:"red",colorTrigger:"blue",};options = _util.extend({},DEFAULT_OPTIONS,options);_autoindex++;_indicator = new Indicator(Scene,options);Scene.on("add.plugin_addIndicators",_indicator.add);Scene.on("remove.plugin_addIndicators",_indicator.remove);Scene.on("destroy.plugin_addIndicators",Scene.removeIndicators);// it the scene already has a controller we can start right away.
if (Scene.controller()){_indicator.add();}}return Scene;};Scene.removeIndicators = function (){if (_indicator){_indicator.remove();this.off("*.plugin_addIndicators");_indicator = undefined;}return Scene;};});// add option to globally auto-add indicators to scenes
ScrollMagic.Controller.addOption("addIndicators",false);// extend Controller
ScrollMagic.Controller.extend(function (){var
Controller = this,_info = Controller.info(),_container = _info.container,_isDocument = _info.isDocument,_vertical = _info.vertical,_indicators ={// container for all indicators and methods
groups:[]};var log = function (){if (Controller._log){// not available,when main source minified
Array.prototype.splice.call(arguments,1,0,"(" + NAMESPACE + ")","->");Controller._log.apply(this,arguments);}};if (Controller._indicators){log(2,"WARNING: Scene already has a property '_indicators', which will be overwritten by plugin.");}// add indicators container
this._indicators = _indicators;// event handler for when associated bounds markers need to be repositioned
var handleBoundsPositionChange = function (){_indicators.updateBoundsPositions();};// event handler for when associated trigger groups need to be repositioned
var handleTriggerPositionChange = function (){_indicators.updateTriggerGroupPositions();};_container.addEventListener("resize",handleTriggerPositionChange);if (!_isDocument){window.addEventListener("resize",handleTriggerPositionChange);window.addEventListener("scroll",handleTriggerPositionChange);}// update all related bounds containers
_container.addEventListener("resize",handleBoundsPositionChange);_container.addEventListener("scroll",handleBoundsPositionChange);// updates the position of the bounds container to aligned to the right for vertical containers and to the bottom for horizontal
this._indicators.updateBoundsPositions = function (specificIndicator){var // constant for all bounds
groups = specificIndicator ? [_util.extend({},specificIndicator.triggerGroup,{members:[specificIndicator]})] :// create a group with only one element
_indicators.groups,// use all
g = groups.length,css ={},paramPos = _vertical ? "left" :"top",paramDimension = _vertical ? "width" :"height",edge = _vertical ?
_util.get.scrollLeft(_container) + _util.get.width(_container) - EDGE_OFFSET :_util.get.scrollTop(_container) + _util.get.height(_container) - EDGE_OFFSET,b,triggerSize,group;while (g--){// group loop
group = groups[g];b = group.members.length;triggerSize = _util.get[paramDimension](group.element.firstChild);while (b--){// indicators loop
css[paramPos] = edge - triggerSize;_util.css(group.members[b].bounds,css);}}};// updates the positions of all trigger groups attached to a controller or a specific one,if provided
this._indicators.updateTriggerGroupPositions = function (specificGroup){var // constant vars
groups = specificGroup ? [specificGroup] :_indicators.groups,i = groups.length,container = _isDocument ? document.body :_container,containerOffset = _isDocument ?{top:0,left:0}:_util.get.offset(container,true),edge = _vertical ?
_util.get.width(_container) - EDGE_OFFSET :_util.get.height(_container) - EDGE_OFFSET,paramDimension = _vertical ? "width" :"height",paramTransform = _vertical ? "Y" :"X";var // changing vars
group,elem,pos,elemSize,transform;while (i--){group = groups[i];elem = group.element;pos = group.triggerHook * Controller.info("size");elemSize = _util.get[paramDimension](elem.firstChild.firstChild);transform = pos > elemSize ? "translate" + paramTransform + "(-100%)" :"";_util.css(elem,{top:containerOffset.top + (_vertical ? pos :edge - group.members[0].options.indent),left:containerOffset.left + (_vertical ? edge - group.members[0].options.indent :pos)});_util.css(elem.firstChild.firstChild,{"-ms-transform":transform,"-webkit-transform":transform,"transform":transform});}};// updates the label for the group to contain the name,if it only has one member
this._indicators.updateTriggerGroupLabel = function (group){var
text = "trigger" + (group.members.length > 1 ? "" :" " + group.members[0].options.name),elem = group.element.firstChild.firstChild,doUpdate = elem.textContent !== text;if (doUpdate){elem.textContent = text;if (_vertical){// bounds position is dependent on text length,so update
_indicators.updateBoundsPositions();}}};// add indicators if global option is set
this.addScene = function (newScene){if (this._options.addIndicators && newScene instanceof ScrollMagic.Scene && newScene.controller() === Controller){newScene.addIndicators();}// call original destroy method
this.$super.addScene.apply(this,arguments);};// remove all previously set listeners on destroy
this.destroy = function (){_container.removeEventListener("resize",handleTriggerPositionChange);if (!_isDocument){window.removeEventListener("resize",handleTriggerPositionChange);window.removeEventListener("scroll",handleTriggerPositionChange);}_container.removeEventListener("resize",handleBoundsPositionChange);_container.removeEventListener("scroll",handleBoundsPositionChange);// call original destroy method
this.$super.destroy.apply(this,arguments);};return Controller;});var Indicator = function (Scene,options){var
Indicator = this,_elemBounds = TPL.bounds(),_elemStart = TPL.start(options.colorStart),_elemEnd = TPL.end(options.colorEnd),_boundsContainer = options.parent && _util.get.elements(options.parent)[0],_vertical,_ctrl;var log = function (){if (Scene._log){// not available,when main source minified
Array.prototype.splice.call(arguments,1,0,"(" + NAMESPACE + ")","->");Scene._log.apply(this,arguments);}};options.name = options.name || _autoindex;// prepare bounds elements
_elemStart.firstChild.textContent += " " + options.name;_elemEnd.textContent += " " + options.name;_elemBounds.appendChild(_elemStart);_elemBounds.appendChild(_elemEnd);// set public variables
Indicator.options = options;Indicator.bounds = _elemBounds;// will be set later
Indicator.triggerGroup = undefined;// add indicators to DOM
this.add = function (){_ctrl = Scene.controller();_vertical = _ctrl.info("vertical");var isDocument = _ctrl.info("isDocument");if (!_boundsContainer){// no parent supplied or doesnt exist
_boundsContainer = isDocument ? document.body :_ctrl.info("container");// check if window/document (then use body)}if (!isDocument && _util.css(_boundsContainer,"position") === 'static'){// position mode needed for correct positioning of indicators
_util.css(_boundsContainer,{position:"relative"});}// add listeners for updates
Scene.on("change.plugin_addIndicators",handleTriggerParamsChange);Scene.on("shift.plugin_addIndicators",handleBoundsParamsChange);// updates trigger & bounds (will add elements if needed)
updateTriggerGroup();updateBounds();setTimeout(function (){// do after all execution is finished otherwise sometimes size calculations are off
_ctrl._indicators.updateBoundsPositions(Indicator);},0);log(3,"added indicators");};// remove indicators from DOM
this.remove = function (){if (Indicator.triggerGroup){// if not set there's nothing to remove
Scene.off("change.plugin_addIndicators", handleTriggerParamsChange);
Scene.off("shift.plugin_addIndicators", handleBoundsParamsChange);
if (Indicator.triggerGroup.members.length > 1) {
// just remove from memberlist of old group
var group = Indicator.triggerGroup;
group.members.splice(group.members.indexOf(Indicator), 1);
_ctrl._indicators.updateTriggerGroupLabel(group);
_ctrl._indicators.updateTriggerGroupPositions(group);
Indicator.triggerGroup = undefined;
} else {
// remove complete group
removeTriggerGroup();
}
removeBounds();
log(3, "removed indicators");
}
};
/*
* ----------------------------------------------------------------
* internal Event Handlers
* ----------------------------------------------------------------
*/
// event handler for when bounds params change
var handleBoundsParamsChange = function () {
updateBounds();
};
// event handler for when trigger params change
var handleTriggerParamsChange = function (e) {
if (e.what === "triggerHook") {
updateTriggerGroup();
}
};
/*
* ----------------------------------------------------------------
* Bounds (start / stop) management
* ----------------------------------------------------------------
*/
// adds an new bounds elements to the array and to the DOM
var addBounds = function () {
var v = _ctrl.info("vertical");
// apply stuff we didn't know before...
_util.css(_elemStart.firstChild,{"border-bottom-width":v ? 1 :0,"border-right-width":v ? 0 :1,"bottom":v ? -1 :options.indent,"right":v ? options.indent :-1,"padding":v ? "0 8px" :"2px 4px",});_util.css(_elemEnd,{"border-top-width":v ? 1 :0,"border-left-width":v ? 0 :1,"top":v ? "100%" :"","right":v ? options.indent :"","bottom":v ? "" :options.indent,"left":v ? "" :"100%","padding":v ? "0 8px" :"2px 4px"});// append
_boundsContainer.appendChild(_elemBounds);};// remove bounds from list and DOM
var removeBounds = function (){_elemBounds.parentNode.removeChild(_elemBounds);};// update the start and end positions of the scene
var updateBounds = function (){if (_elemBounds.parentNode !== _boundsContainer){addBounds();// Add Bounds elements (start/end)}var css ={};css[_vertical ? "top" :"left"] = Scene.triggerPosition();css[_vertical ? "height" :"width"] = Scene.duration();_util.css(_elemBounds,css);_util.css(_elemEnd,{display:Scene.duration() > 0 ? "" :"none"});};// adds an new trigger group to the array and to the DOM
var addTriggerGroup = function (){var triggerElem = TPL.trigger(options.colorTrigger);// new trigger element
var css ={};css[_vertical ? "right" :"bottom"] = 0;css[_vertical ? "border-top-width" :"border-left-width"] = 1;_util.css(triggerElem.firstChild,css);_util.css(triggerElem.firstChild.firstChild,{padding:_vertical ? "0 8px 3px 8px" :"3px 4px"});document.body.appendChild(triggerElem);// directly add to body
var newGroup ={triggerHook:Scene.triggerHook(),element:triggerElem,members:[Indicator]};_ctrl._indicators.groups.push(newGroup);Indicator.triggerGroup = newGroup;// update right away
_ctrl._indicators.updateTriggerGroupLabel(newGroup);_ctrl._indicators.updateTriggerGroupPositions(newGroup);};var removeTriggerGroup = function (){_ctrl._indicators.groups.splice(_ctrl._indicators.groups.indexOf(Indicator.triggerGroup),1);Indicator.triggerGroup.element.parentNode.removeChild(Indicator.triggerGroup.element);Indicator.triggerGroup = undefined;};// updates the trigger group -> either join existing or add new one
var updateTriggerGroup = function (){var
triggerHook = Scene.triggerHook(),closeEnough = 0.0001;// Have a group,check if it still matches
if (Indicator.triggerGroup){if (Math.abs(Indicator.triggerGroup.triggerHook - triggerHook) < closeEnough){// _util.log(0,"trigger",options.name,"->","no need to change, still in sync");return;// all good}}// Don't have a group, check if a matching one exists
// _util.log(0, "trigger", options.name, "->", "out of sync!");
var
groups = _ctrl._indicators.groups,
group,
i = groups.length;
while (i--) {
group = groups[i];
if (Math.abs(group.triggerHook - triggerHook) < closeEnough) {
// found a match!
// _util.log(0, "trigger", options.name, "->", "found match");
if (Indicator.triggerGroup) { // do I have an old group that is out of sync?
if (Indicator.triggerGroup.members.length === 1) { // is it the only remaining group?
// _util.log(0, "trigger", options.name, "->", "kill");
// was the last member, remove the whole group
removeTriggerGroup();
} else {
Indicator.triggerGroup.members.splice(Indicator.triggerGroup.members.indexOf(Indicator), 1); // just remove from memberlist of old group
_ctrl._indicators.updateTriggerGroupLabel(Indicator.triggerGroup);
_ctrl._indicators.updateTriggerGroupPositions(Indicator.triggerGroup);
// _util.log(0, "trigger", options.name, "->", "removing from previous member list");
}
}
// join new group
group.members.push(Indicator);
Indicator.triggerGroup = group;
_ctrl._indicators.updateTriggerGroupLabel(group);
return;
}
}
// at this point I am obviously out of sync and don't match any other group
if (Indicator.triggerGroup){if (Indicator.triggerGroup.members.length === 1){// _util.log(0,"trigger",options.name,"->","updating existing");// out of sync but i'm the only member => just change and update
Indicator.triggerGroup.triggerHook = triggerHook;
_ctrl._indicators.updateTriggerGroupPositions(Indicator.triggerGroup);
return;
} else {
// _util.log(0, "trigger", options.name, "->", "removing from previous member list");
Indicator.triggerGroup.members.splice(Indicator.triggerGroup.members.indexOf(Indicator), 1); // just remove from memberlist of old group
_ctrl._indicators.updateTriggerGroupLabel(Indicator.triggerGroup);
_ctrl._indicators.updateTriggerGroupPositions(Indicator.triggerGroup);
Indicator.triggerGroup = undefined; // need a brand new group...
}
}
// _util.log(0, "trigger", options.name, "->", "add a new one");
// did not find any match, make new trigger group
addTriggerGroup();
};
};
/*
* ----------------------------------------------------------------
* Templates for the indicators
* ----------------------------------------------------------------
*/
var TPL = {
start: function (color) {
// inner element (for bottom offset -1, while keeping top position 0)
var inner = document.createElement("div");
inner.textContent = "start";
_util.css(inner, {
position: "absolute",
overflow: "visible",
"border-width": 0,
"border-style": "solid",
color: color,
"border-color": color
});
var e = document.createElement('div');
// wrapper
_util.css(e, {
position: "absolute",
overflow: "visible",
width: 0,
height: 0
});
e.appendChild(inner);
return e;
},
end: function (color) {
var e = document.createElement('div');
e.textContent = "end";
_util.css(e, {
position: "absolute",
overflow: "visible",
"border-width": 0,
"border-style": "solid",
color: color,
"border-color": color
});
return e;
},
bounds: function () {
var e = document.createElement('div');
_util.css(e, {
position: "absolute",
overflow: "visible",
"white-space": "nowrap",
"pointer-events": "none",
"font-size": FONT_SIZE
});
e.style.zIndex = ZINDEX;
return e;
},
trigger: function (color) {
// inner to be above or below line but keep position
var inner = document.createElement('div');
inner.textContent = "trigger";
_util.css(inner, {
position: "relative",
});
// inner wrapper for right: 0 and main element has no size
var w = document.createElement('div');
_util.css(w, {
position: "absolute",
overflow: "visible",
"border-width": 0,
"border-style": "solid",
color: color,
"border-color": color
});
w.appendChild(inner);
// wrapper
var e = document.createElement('div');
_util.css(e, {
position: "fixed",
overflow: "visible",
"white-space": "nowrap",
"pointer-events": "none",
"font-size": FONT_SIZE
});
e.style.zIndex = ZINDEX;
e.appendChild(w);
return e;
},
};
}));
__webpack_require__.r(__webpack_exports__);
/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var masonry_layout_dist_masonry_pkgd_min__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(181);
/* harmony import */ var masonry_layout_dist_masonry_pkgd_min__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(masonry_layout_dist_masonry_pkgd_min__WEBPACK_IMPORTED_MODULE_0__);
if ($(window).width() > 992) {
var msnry = new masonry_layout_dist_masonry_pkgd_min__WEBPACK_IMPORTED_MODULE_0__('.m-grid', {
// options
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true,
gutter: 20
});
}
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(23)))var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_LOCAL_MODULE_1__, __WEBPACK_LOCAL_MODULE_1__factory, __WEBPACK_LOCAL_MODULE_1__module;var __WEBPACK_LOCAL_MODULE_2__, __WEBPACK_LOCAL_MODULE_2__factory, __WEBPACK_LOCAL_MODULE_2__module;var __WEBPACK_LOCAL_MODULE_3__, __WEBPACK_LOCAL_MODULE_3__factory, __WEBPACK_LOCAL_MODULE_3__module;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_4__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_LOCAL_MODULE_5__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_6__;var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
* Masonry PACKAGED v4.2.2
* Cascading grid layout library
* https://masonry.desandro.com
* MIT License
* by David DeSandro
*/
!function(t,e){ true?!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(23)], __WEBPACK_AMD_DEFINE_RESULT__ = (function(i){return e(t,i)}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)):undefined}(window,function(t,e){"use strict";function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t)};return n(e||t.jQuery),i}),function(t,e){ true?!(__WEBPACK_LOCAL_MODULE_1__factory = (e), (__WEBPACK_LOCAL_MODULE_1__module = { id: "ev-emitter/ev-emitter", exports: {}, loaded: false }), __WEBPACK_LOCAL_MODULE_1__ = (typeof __WEBPACK_LOCAL_MODULE_1__factory === 'function' ? (__WEBPACK_LOCAL_MODULE_1__factory.call(__WEBPACK_LOCAL_MODULE_1__module.exports, __webpack_require__, __WEBPACK_LOCAL_MODULE_1__module.exports, __WEBPACK_LOCAL_MODULE_1__module)) : __WEBPACK_LOCAL_MODULE_1__factory), (__WEBPACK_LOCAL_MODULE_1__module.loaded = true), __WEBPACK_LOCAL_MODULE_1__ === undefined && (__WEBPACK_LOCAL_MODULE_1__ = __WEBPACK_LOCAL_MODULE_1__module.exports)):undefined}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;oe;e++){var i=h[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s=200==Math.round(t(o.width)),r.isBoxSizeOuter=s,i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,z=a.borderTopWidth+a.borderBottomWidth,E=d&&s,b=t(r.width);b!==!1&&(a.width=b+(E?0:p+_));var x=t(r.height);return x!==!1&&(a.height=x+(E?0:g+z)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+z),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r}),function(t,e){"use strict"; true?!(__WEBPACK_LOCAL_MODULE_3__factory = (e), (__WEBPACK_LOCAL_MODULE_3__module = { id: "desandro-matches-selector/matches-selector", exports: {}, loaded: false }), __WEBPACK_LOCAL_MODULE_3__ = (typeof __WEBPACK_LOCAL_MODULE_3__factory === 'function' ? (__WEBPACK_LOCAL_MODULE_3__factory.call(__WEBPACK_LOCAL_MODULE_3__module.exports, __webpack_require__, __WEBPACK_LOCAL_MODULE_3__module.exports, __WEBPACK_LOCAL_MODULE_3__module)) : __WEBPACK_LOCAL_MODULE_3__factory), (__WEBPACK_LOCAL_MODULE_3__module.loaded = true), __WEBPACK_LOCAL_MODULE_3__ === undefined && (__WEBPACK_LOCAL_MODULE_3__ = __WEBPACK_LOCAL_MODULE_3__module.exports)):undefined}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;is?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;h>u;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(2>e)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,n=t>1&&i+t>this.cols;i=n?0:i;var o=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=o?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i});
.navbar .form-inline .form-actions{display:none}.toolbar-oriented .toolbar-bar{z-index:1200}.toolbar-horizontal .toolbar-menu.nav{float:left}fieldset.card legend{font-size:1rem}.form-check{margin-bottom:1rem}.form-checkboxes .form-check,.form-radios .form-check{margin-bottom:0}.forum__last-reply{width:20%}.forum-list__forum{width:60%}.js-text-format-wrapper .js-form-type-textarea{margin-bottom:0;}#drupal-off-canvas{box-sizing:initial}