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.
181 lines
4.5 KiB
181 lines
4.5 KiB
// ========================================================================== |
|
// |
|
// 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);
|
|
|