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.
170 lines
4.5 KiB
170 lines
4.5 KiB
4 years ago
|
// ==========================================================================
|
||
|
//
|
||
|
// 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 browser does not have Full Screen API, then simply unset default button template and stop
|
||
|
if (!fn) {
|
||
|
if ($ && $.fancybox) {
|
||
|
$.fancybox.defaults.btnTpl.fullScreen = false;
|
||
|
}
|
||
|
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
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:
|
||
|
'<button data-fancybox-fullscreen class="fancybox-button fancybox-button--fullscreen" title="{{FULL_SCREEN}}">' +
|
||
|
'<svg viewBox="0 0 40 40">' +
|
||
|
'<path d="M9,12 v16 h22 v-16 h-22 v8" />' +
|
||
|
"</svg>" +
|
||
|
"</button>"
|
||
|
},
|
||
|
fullScreen: {
|
||
|
autoStart: false
|
||
|
}
|
||
|
});
|
||
|
|
||
|
$(document).on({
|
||
|
"onInit.fb": function(e, instance) {
|
||
|
var $container;
|
||
|
|
||
|
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).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.current.$content.css("transition", "none");
|
||
|
|
||
|
instance.isAnimating = false;
|
||
|
|
||
|
instance.update(true, true, 0);
|
||
|
}
|
||
|
|
||
|
instance.trigger("onFullscreenChange", isFullscreen);
|
||
|
|
||
|
instance.$refs.container.toggleClass("fancybox-is-fullscreen", isFullscreen);
|
||
|
}
|
||
|
});
|
||
|
})(document, window.jQuery || jQuery);
|