first commit
This commit is contained in:
251
libraries/fancybox3/js/thumbs.js
Normal file
251
libraries/fancybox3/js/thumbs.js
Normal file
@@ -0,0 +1,251 @@
|
||||
// ==========================================================================
|
||||
//
|
||||
// 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: '<button data-fancybox-thumbs class="fancybox-button fancybox-button--thumbs" title="{{THUMBS}}">' +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.59 14.59h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76H5.65v-3.76zm8.94-4.47h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76H5.65v-3.76zm8.94-4.47h3.76v3.76h-3.76V5.65zm-4.47 0h3.76v3.76h-3.76V5.65zm-4.47 0h3.76v3.76H5.65V5.65z"/></svg>' +
|
||||
"</button>"
|
||||
},
|
||||
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 = $('<div class="' + CLASS + " " + CLASS + "-" + self.opts.axis + '"></div>').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 = $('<div class="' + CLASS + '__list">').appendTo(self.$grid);
|
||||
}
|
||||
|
||||
$.each(instance.group, function (i, item) {
|
||||
src = item.thumb;
|
||||
|
||||
if (!src && item.type === "image") {
|
||||
src = item.src;
|
||||
}
|
||||
|
||||
list.push(
|
||||
'<a href="javascript:;" tabindex="0" data-index="' +
|
||||
i +
|
||||
'"' +
|
||||
(src && src.length ? ' style="background-image:url(' + src + ')"' : 'class="fancybox-thumbs-missing"') +
|
||||
"></a>"
|
||||
);
|
||||
});
|
||||
|
||||
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);
|
||||
Reference in New Issue
Block a user