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.
182 lines
4.5 KiB
182 lines
4.5 KiB
4 years ago
|
// ==========================================================================
|
||
|
//
|
||
|
// SlideShow
|
||
|
// Enables slideshow functionality
|
||
|
//
|
||
|
// Example of usage:
|
||
|
// $.fancybox.getInstance().SlideShow.start()
|
||
|
//
|
||
|
// ==========================================================================
|
||
|
(function(document, $) {
|
||
|
"use strict";
|
||
|
|
||
|
$.extend(true, $.fancybox.defaults, {
|
||
|
btnTpl: {
|
||
|
slideShow:
|
||
|
'<button data-fancybox-play class="fancybox-button fancybox-button--play" title="{{PLAY_START}}">' +
|
||
|
'<svg viewBox="0 0 40 40">' +
|
||
|
'<path d="M13,12 L27,20 L13,27 Z" />' +
|
||
|
'<path d="M15,10 v19 M23,10 v19" />' +
|
||
|
"</svg>" +
|
||
|
"</button>"
|
||
|
},
|
||
|
slideShow: {
|
||
|
autoStart: false,
|
||
|
speed: 3000
|
||
|
}
|
||
|
});
|
||
|
|
||
|
var SlideShow = function(instance) {
|
||
|
this.instance = instance;
|
||
|
this.init();
|
||
|
};
|
||
|
|
||
|
$.extend(SlideShow.prototype, {
|
||
|
timer: null,
|
||
|
isActive: false,
|
||
|
$button: null,
|
||
|
|
||
|
init: function() {
|
||
|
var self = this;
|
||
|
|
||
|
self.$button = self.instance.$refs.toolbar.find("[data-fancybox-play]").on("click", function() {
|
||
|
self.toggle();
|
||
|
});
|
||
|
|
||
|
if (self.instance.group.length < 2 || !self.instance.group[self.instance.currIndex].opts.slideShow) {
|
||
|
self.$button.hide();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
set: function(force) {
|
||
|
var self = this;
|
||
|
|
||
|
// Check if reached last element
|
||
|
if (
|
||
|
self.instance &&
|
||
|
self.instance.current &&
|
||
|
(force === true || self.instance.current.opts.loop || self.instance.currIndex < self.instance.group.length - 1)
|
||
|
) {
|
||
|
self.timer = setTimeout(function() {
|
||
|
if (self.isActive) {
|
||
|
self.instance.jumpTo((self.instance.currIndex + 1) % self.instance.group.length);
|
||
|
}
|
||
|
}, self.instance.current.opts.slideShow.speed);
|
||
|
} else {
|
||
|
self.stop();
|
||
|
self.instance.idleSecondsCounter = 0;
|
||
|
self.instance.showControls();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
clear: function() {
|
||
|
var self = this;
|
||
|
|
||
|
clearTimeout(self.timer);
|
||
|
|
||
|
self.timer = null;
|
||
|
},
|
||
|
|
||
|
start: function() {
|
||
|
var self = this;
|
||
|
var current = self.instance.current;
|
||
|
|
||
|
if (current) {
|
||
|
self.isActive = true;
|
||
|
|
||
|
self.$button
|
||
|
.attr("title", current.opts.i18n[current.opts.lang].PLAY_STOP)
|
||
|
.removeClass("fancybox-button--play")
|
||
|
.addClass("fancybox-button--pause");
|
||
|
|
||
|
self.set(true);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
stop: function() {
|
||
|
var self = this;
|
||
|
var current = self.instance.current;
|
||
|
|
||
|
self.clear();
|
||
|
|
||
|
self.$button
|
||
|
.attr("title", current.opts.i18n[current.opts.lang].PLAY_START)
|
||
|
.removeClass("fancybox-button--pause")
|
||
|
.addClass("fancybox-button--play");
|
||
|
|
||
|
self.isActive = false;
|
||
|
},
|
||
|
|
||
|
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();
|
||
|
var SlideShow = instance && instance.SlideShow;
|
||
|
|
||
|
if (SlideShow && SlideShow.isActive) {
|
||
|
if (document.hidden) {
|
||
|
SlideShow.clear();
|
||
|
} else {
|
||
|
SlideShow.set();
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
})(document, window.jQuery || jQuery);
|