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