-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathphotoswipe-fullscreen.esm.min.js
8 lines (8 loc) · 2.64 KB
/
photoswipe-fullscreen.esm.min.js
1
2
3
4
5
6
7
8
const defaultOptions={fullscreenTitle:'Toggle fullscreen'};class PhotoSwipeFullscreen{constructor(lightbox,options){this.options={...defaultOptions,...options};this.lightbox=lightbox;this.lightbox.on('init',()=>{this.initPlugin(this.lightbox.pswp)})}
initPlugin(pswp){this.fullscreenAPI=this.getFullscreenAPI();const fullscreenSVG='<svg aria-hidden="true" class="pswp__icn" viewBox="0 0 32 32" width="32" height="32">'+'<use class="pswp__icn-shadow" xlink:href="#pswp__icn-fullscreen-exit"/>'+'<use class="pswp__icn-shadow" xlink:href="#pswp__icn-fullscreen-request"/>'+'<path id="pswp__icn-fullscreen-request" transform="translate(4,4)" d="M20 3h2v6h-2V5h-4V3h4zM4 3h4v2H4v4H2V3h2zm16 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z" /></g>'+'<path id="pswp__icn-fullscreen-exit" style="display:none" transform="translate(4,4)" d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"/>'+'</svg>';if(this.fullscreenAPI){pswp.on('uiRegister',()=>{pswp.ui.registerElement({name:'fullscreen-button',title:this.options.fullscreenTitle,order:9,isButton:!0,html:fullscreenSVG,onClick:(event,el)=>{this.toggleFullscreen()}});pswp.events.add(document,'keydown',(e)=>{if(e.keyCode==70){this.toggleFullscreen();e.preventDefault()}})})}
this.lightbox.on('close',()=>{if(this.fullscreenAPI&&this.fullscreenAPI.isFullscreen()){this.fullscreenAPI.exit()}})}
toggleFullscreen(){if(this.fullscreenAPI){if(this.fullscreenAPI.isFullscreen()){this.fullscreenAPI.exit();setTimeout(function(){document.getElementById('pswp__icn-fullscreen-exit').style.display='none';document.getElementById('pswp__icn-fullscreen-request').style.display='inline'},300)}else{this.fullscreenAPI.request(document.querySelector(`.pswp`));setTimeout(function(){document.getElementById('pswp__icn-fullscreen-exit').style.display='inline';document.getElementById('pswp__icn-fullscreen-request').style.display='none'},300)}}}
getFullscreenAPI(){let api;let enterFS;let exitFS;let elementFS;let changeEvent;let errorEvent;if(document.fullscreenEnabled){enterFS='requestFullscreen';exitFS='exitFullscreen';elementFS='fullscreenElement';changeEvent='fullscreenchange';errorEvent='fullscreenerror'}else if(document.webkitFullscreenEnabled){enterFS='webkitRequestFullscreen';exitFS='webkitExitFullscreen';elementFS='webkitFullscreenElement';changeEvent='webkitfullscreenchange';errorEvent='webkitfullscreenerror'}
if(enterFS){api={request:function(el){if(enterFS==='webkitRequestFullscreen'){el[enterFS](Element.ALLOW_KEYBOARD_INPUT)}else{el[enterFS]()}},exit:function(){return document[exitFS]()},isFullscreen:function(){return document[elementFS]},change:changeEvent,error:errorEvent}}
return api}}
export default PhotoSwipeFullscreen