mirror of https://github.com/IoTcat/ushio-img.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
6.8 KiB
259 lines
6.8 KiB
// ========================================================================== |
|
// |
|
// Thumbs |
|
// Displays thumbnails in a grid |
|
// |
|
// ========================================================================== |
|
(function(document, $) { |
|
"use strict"; |
|
|
|
var CLASS = "fancybox-thumbs", |
|
CLASS_ACTIVE = CLASS + "-active", |
|
CLASS_LOAD = CLASS + "-loading"; |
|
|
|
// 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 viewBox="0 0 120 120">' + |
|
'<path d="M30,30 h14 v14 h-14 Z M50,30 h14 v14 h-14 Z M70,30 h14 v14 h-14 Z M30,50 h14 v14 h-14 Z M50,50 h14 v14 h-14 Z M70,50 h14 v14 h-14 Z M30,70 h14 v14 h-14 Z M50,70 h14 v14 h-14 Z M70,70 h14 v14 h-14 Z" />' + |
|
"</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, |
|
first, |
|
second; |
|
|
|
self.instance = instance; |
|
|
|
instance.Thumbs = self; |
|
|
|
self.opts = instance.group[instance.currIndex].opts.thumbs; |
|
|
|
// Enable thumbs if at least two group items have thumbnails |
|
first = instance.group[0]; |
|
first = first.opts.thumb || (first.opts.$thumb && first.opts.$thumb.length ? first.opts.$thumb.attr("src") : false); |
|
|
|
if (instance.group.length > 1) { |
|
second = instance.group[1]; |
|
second = second.opts.thumb || (second.opts.$thumb && second.opts.$thumb.length ? second.opts.$thumb.attr("src") : false); |
|
} |
|
|
|
self.$button = instance.$refs.toolbar.find("[data-fancybox-thumbs]"); |
|
|
|
if (self.opts && first && second && first && second) { |
|
self.$button.show().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", "li", function() { |
|
instance.jumpTo($(this).attr("data-index")); |
|
}); |
|
} |
|
|
|
// Build the list |
|
if (!self.$list) { |
|
self.$list = $("<ul>").appendTo(self.$grid); |
|
} |
|
|
|
$.each(instance.group, function(i, item) { |
|
src = item.opts.thumb || (item.opts.$thumb ? item.opts.$thumb.attr("data-original") : null); //适配性修改 |
|
|
|
if (!src && item.type === "image") { |
|
src = item.src; |
|
} |
|
|
|
list.push( |
|
'<li data-index="' + |
|
i + |
|
'" tabindex="0" class="' + |
|
CLASS_LOAD + |
|
'"' + |
|
(src && src.length ? ' style="background-image:url(' + src + ')" />' : "") + |
|
"></li>" |
|
); |
|
}); |
|
|
|
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, window.jQuery || jQuery);
|
|
|