@magicbruno/fm_viewer/dist/js/FM_Viewe_Autoinstall.min.js

Simple web file viewer

!function(e){class t{constructor(e){this.xDown=null,this.yDown=null,this.options=e||{},this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),document.addEventListener("touchstart",this.handleTouchStart,!1),document.addEventListener("touchmove",this.handleTouchMove,!1)}onLeft(){this.options.onLeft&&this.options.onLeft()}onRight(){this.options.onRight&&this.options.onRight()}onUp(){this.options.onUp&&this.options.onUp()}onDown(){this.options.onDown&&this.options.onDown()}static getTouches(e){return e.touches}handleTouchStart(e){e=t.getTouches(e)[0];this.xDown=e.clientX,this.yDown=e.clientY}handleTouchMove(e){var t;this.xDown&&this.yDown&&(t=e.touches[0].clientX,e=e.touches[0].clientY,t=this.xDown-t,e=this.yDown-e,Math.abs(t)>Math.abs(e)?0<t&&this.options.onLeft?this.onLeft():this.options.onRight&&this.onRight():0<e&&this.options.onUp?this.onUp():this.options.onDown&&this.onDown(),this.xDown=null,this.yDown=null)}}e.MBSwiper=new t}(window);class MB_File{constructor(e,t,i,s){this.Url=e,this.Name=this.Url.substring(this.Url.lastIndexOf("/")+1);e=this.Name.indexOf("?"),-1!==e&&(this.Name=this.Name.substring(0,e)),this.gallery=i,this.title=s||"",e=this.Name.lastIndexOf(".");let n="";if(-1<e&&(n=this.Name.substring(e)),this.extension=n,this.directory=this.Url.substring(0,this.Url.lastIndexOf("/")+1),this.supportPdf()&&(this.filetypes.iframe=[".pdf"]),t)this.Type=t;else for(const l in this.filetypes)-1<this.filetypes[l].indexOf(this.extension)&&(this.Type=l);this.id=Math.floor(1e10*Math.random())}id=0;Name="";Url="";ext="";gallery="";filetypes={image:".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp".split(","),video:".mov,.mpeg,.mp4".split(","),audio:".mp3,.wav".split(",")};Type="other";title="";get isSameOrigin(){var e=window.location.href,t=this.Url,t=new URL(t),e=new URL(e);return t.host===e.host&&(t.port===e.port&&t.protocol===e.protocol)}supportPdf(){return navigator.mimeTypes["application/pdf"]||e("AcroPDF.PDF")||e("PDF.PdfCtrl")||/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;function e(e){try{return new ActiveXObject(e)}catch(e){}}}}class FM_Viewer{constructor(e){try{var t;this.element=document.querySelector(e),this.element||(t="fm-"+Math.floor(1e9*Math.random()),this.element=document.createElement("div"),this.element.classList.add("fm-viewer"),this.element.classList.add("off-screen"),this.element.id=t,this.element.innerHTML=this.viewerTemplate,document.body.appendChild(this.element)),this.btnDownload=this.element.querySelector('[data-action="download-file"]'),this.btnPrevious=this.element.querySelector('[data-action="previous"]'),this.btnNext=this.element.querySelector('[data-action="next"]'),this.btnClose=this.element.querySelector('[data-action="close-viewer"]'),this.btnFullScreenToggle=this.element.querySelector('[data-action="toggle-fullscreen"]'),this.btnFullScreenOn=this.element.querySelector('[data-action="fullscreen-on"]'),this.btnFullScreenOff=this.element.querySelector('[data-action="fullscreen-off"]'),this.title=this.element.querySelector(".viewer-title")}catch(e){console.log(e)}this.initButtons(),this.element.addEventListener("fullscreenchange",e=>{let t=null;this.btnFullScreenToggle&&(t=self.btnFullScreenToggle.querySelector(".fa")),document.fullscreenElement?(t&&(t.classList.remove("fa-arrows-alt"),t.classList.add("fa-compress")),this.btnFullScreenOn&&this.btnFullScreenOn.classList.add("d-none"),this.btnFullScreenOff&&this.btnFullScreenOff.classList.remove("d-none")):(t&&(t.classList.add("fa-arrows-alt"),t.classList.remove("fa-compress")),this.btnFullScreenOn&&this.btnFullScreenOn.classList.remove("d-none"),this.btnFullScreenOff&&this.btnFullScreenOff.classList.add("d-none"))}),this.vimeoRegex=/http(?:s?):\/\/vimeo.com\/(\d{9})/gi,this.youtubeRegex=/http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)(&(amp;)?‌​[\w\?‌​=]*)?/gi}element=null;files=[];_currentFile=-1;btnNext=null;btnPrevious=null;btnClose=null;btnDownload=null;btnFullScreenToggle=null;btnFullScreenOn=null;btnFullScreenOff=null;title=null;_currentId=0;gallery=[];galleryIndex=0;vimeoRegex=null;youtubeRegex=null;set currentId(t){this._currentId=t;for(let e=0;e<this.files.length;e++)if(this.files[e].id==t){this.currentFile=e;break}this.galleryIndex=this.gallery.indexOf(t)}get currentId(){return this._currentId}get currentFile(){return this._currentFile}set currentFile(e){this._currentFile=e}get nextItem(){return this.galleryIndex++,this.galleryIndex>=this.gallery.length&&(this.galleryIndex=0),this.gallery[this.galleryIndex]}get previousItem(){return this.galleryIndex--,this.galleryIndex<0&&(this.galleryIndex=this.gallery.length-1),this.gallery[this.galleryIndex]}get viewerTemplate(){return`<nav class="fm-navbar" role="navigation">
                    <h3 class="viewer-title"></h3>
                    <ul class="fm-navbar-nav" style="margin-left:auto">
                        <li class="">
                            <button type="button" data-action="download-file" title="Scarica" class="btn btn-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M.6 13.7c0-.6.6-1.1 1.1-1.1s1.1.6 1.1 1.1v5.7c0 1.3 1 2.3 2.3 2.3h13.6c1.3 0 2.3-1 2.3-2.3v-5.7c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v5.7c0 2.5-2 4.5-4.5 4.5H5.2c-2.5 0-4.5-2-4.5-4.5-.1-3.4-.1-5.3-.1-5.7z"
                                        opacity=".5" fill="#fff" />
                                    <path
                                        d="M12 16c-.6 0-1.1-.5-1.1-1.1V1.2c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v13.6c0 .7-.5 1.2-1.1 1.2z"
                                        fill-rule="evenodd" clip-rule="evenodd" fill="#fff" />
                                    <path
                                        d="M16.9 9.5c.4-.5 1.1-.5 1.6 0s.4 1.2 0 1.6l-5.7 5.7c-.4.4-1.1.4-1.6 0l-5.7-5.1c-.5-.4-.5-1.1-.1-1.6.5-.5 1.2-.5 1.7-.1l4.9 4.4 4.9-4.9z"
                                        fill="#fff" />
                                </svg>
                            </button>
                        </li>
                        <li class="">
                            <button type="button" data-action="previous" title="Precedente" class="btn btn-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M18.4 2.9c.7-.7.7-1.8 0-2.4-.7-.7-1.8-.7-2.4 0L5.6 10.8c-.6.6-.6 1.7 0 2.4L15 23.4c.6.7 1.7.7 2.4.1s.7-1.7.1-2.4L9.2 12l9.2-9.1z"
                                        fill="#fff" />
                                </svg>
                            </button>
                        </li>
                        <li class="">
                            <button type="button" data-action="next" title="Successivo" class="btn btn-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M5.6 2.9C5 2.3 5 1.2 5.6.5c.7-.7 1.8-.7 2.4 0l10.3 10.3c.6.6.7 1.7.1 2.4L9 23.4c-.6.7-1.7.7-2.4.1s-.7-1.7-.1-2.4l8.3-9.1-9.2-9.1z"
                                        fill="#fff" />
                                </svg>
                            </button>
                        </li>
                        <li class="">
                            <button type="button" data-action="fullscreen-on" title="Fullscreen on" class="btn btn-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M9.9 12L2.2 4.3c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0L12 9.9 21.3.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L14.1 12l9.3 9.3c.6.6.6 1.5 0 2.1s-1.5.6-2.1 0L12 14.1l-7.7 7.7c-.6.6-1.5.6-2.1 0s-.6-1.5 0-2.1L9.9 12z"
                                        opacity=".7" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" />
                                    <path
                                        d="M3 21h4.5c1 .2 1.5.7 1.5 1.5s-.5 1.3-1.5 1.5H0v-7.5c0-1 .5-1.5 1.5-1.5s1.5.5 1.5 1.5V21zm18 0v-4.5c.2-1 .7-1.5 1.5-1.5s1.3.5 1.5 1.5V24h-7.5c-1 0-1.5-.5-1.5-1.5s.5-1.5 1.5-1.5H21zm0-18h-4.5c-1-.2-1.5-.7-1.5-1.5S15.5.2 16.5 0H24v7.5c0 1-.5 1.5-1.5 1.5S21 8.5 21 7.5V3zM3 3v4.5C2.8 8.5 2.3 9 1.5 9S.2 8.5 0 7.5V0h7.5C8.5 0 9 .5 9 1.5S8.5 3 7.5 3H3z"
                                        fill="#fff" />
                                </svg>
                            </button>
                        </li>
                        <li class="">
                            <button type="button" data-action="fullscreen-off" title="Fullscreen off" class="btn btn-dark">
                                <svg version="1.1" id="prefix__Livello_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0"
                                    viewBox="0 0 24 24" xml:space="preserve">
                                    <style>
                                        .prefix__st2 {
                                            fill: none;
                                            stroke: #fff;
                                            stroke-width: 2.9537;
                                            stroke-linecap: round;
                                            stroke-miterlimit: 10
                                        }
                                    </style>
                                    <path id="prefix__Bound" fill="none" d="M0 0h24v24H0z" />
                                    <path id="prefix__Combined-Shape_00000038379922521257236590000010407855033361335999_"
                                        d="M6.1 17.9H1.7c-1-.1-1.5-.6-1.5-1.5s.4-1.3 1.5-1.5H9v7.4c0 1-.4 1.5-1.5 1.5S6 23.4 6 22.3v-4.4zm11.8 0v4.4c-.1 1-.6 1.5-1.5 1.5s-1.3-.4-1.5-1.5V15h7.4c1 0 1.5.4 1.5 1.5s-.4 1.5-1.5 1.5h-4.4zm0-11.8h4.4c1 .1 1.5.6 1.5 1.5s-.4 1.3-1.5 1.4H15V1.7c0-1 .4-1.5 1.5-1.5S18 .6 18 1.7v4.4zm-11.8 0V1.7C6.2.7 6.7.2 7.6.2S8.9.6 9 1.7V9H1.7C.7 9 .2 8.6.2 7.5S.6 6 1.7 6h4.4z"
                                        fill="#fff" />
                                    <path class="prefix__st2"
                                        d="M7.3 7.1L1.8 1.7M22.3 22.2l-5.4-5.5M7.3 16.9l-5.5 5.4M22.5 1.7L17 7.1" />
                                    <circle cx="12" cy="12.1" r="2.2" opacity=".7" fill="#fff" />
                                </svg>
                            </button>
                        </li>
                        <li class="">
                            <button type="button" data-action="close-viewer" title="Chiudi" class="btn btn-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <g fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
                                        <path
                                            d="M.616 20.556L20.556.616a2.006 2.006 0 012.828 0c.778.777.778 2.05 0 2.828l-19.94 19.94a2.006 2.006 0 01-2.828 0 2.006 2.006 0 010-2.828z" />
                                        <path
                                            d="M3.444.616l19.94 19.94c.778.778.778 2.05 0 2.828a2.006 2.006 0 01-2.828 0L.616 3.444a2.006 2.006 0 010-2.828 2.006 2.006 0 012.828 0z" />
                                    </g>
                                </svg>
                            </button>
                        </li>
                    </ul>
                </nav>`}initLinks(){var t=document.querySelectorAll("[data-fmviewer]");const i=this;for(let e=0;e<t.length;e++){const f=t[e];if(f.dataset.viewerId){var s=f.dataset.viewerId,n=f.getAttribute("data-fmviewer")||"",l=f.href,r=f.getAttribute("data-type"),o=f.getAttribute("title")||"";for(let e=0;e<this.files.length;e++){const m=this.files[e];if(m.id==s){m.Url=l,m.Name=m.Url.substring(m.Url.lastIndexOf("/")+1);var a=m.Name.indexOf("?"),a=(-1!==a&&(m.Name=m.Name.substring(0,a)),m.gallery=n,m.title=o||"",m.Name.lastIndexOf("."));let e="";if(-1<a&&(e=m.Name.substring(a)),m.extension=e,m.directory=m.Url.substring(0,m.Url.lastIndexOf("/")+1),m.supportPdf()&&(m.filetypes.iframe=[".pdf"]),r)m.Type=r;else for(const p in m.filetypes)-1<m.filetypes[p].indexOf(m.extension)&&(m.Type=p);break}}}else{var c=f.getAttribute("data-fmviewer")||"",h=f.href,d=f.getAttribute("data-type"),u=f.getAttribute("title")||"";const g=new MB_File(h,d,c,u);i.files.push(g),f.dataset.viewerId=g.id,f.addEventListener("click",function(e){e.preventDefault(),i.show(g)})}}}refresh(){this.initLinks()}addItemToGallery(e,t){var i;0==e.length?e.push(t):(i=!1,e.every(e=>{if(e.Url==t.Url)return!(i=!0)}),i||e.push(t))}initButtons(){const t=this;this.btnClose&&this.btnClose.addEventListener("click",e=>{e.stopPropagation(),t.hide()}),this.btnNext&&this.btnNext.addEventListener("click",e=>{e.stopPropagation(),t.next()}),this.btnPrevious&&this.btnPrevious.addEventListener("click",e=>{e.stopPropagation(),t.previous()}),this.btnDownload&&this.btnDownload.addEventListener("click",e=>{e.stopPropagation(),t.downloadCurrent()}),this.btnFullScreenToggle&&this.btnFullScreenToggle.addEventListener("click",e=>{e.stopPropagation(),t.toggleFullScreen()}),this.btnFullScreenOn&&this.btnFullScreenOn.addEventListener("click",e=>{e.stopPropagation(),t.toggleFullScreen()}),this.btnFullScreenOff&&this.btnFullScreenOff.addEventListener("click",e=>{e.stopPropagation(),t.toggleFullScreen()}),"close-viewer"===this.element.dataset.action&&this.element.addEventListener("click",e=>t.hide()),document.addEventListener("DOMContentLoaded",()=>t.initLinks())}show(t){window.MBSwiper.options={onLeft:()=>this.next(),onRight:()=>this.previous(),onUp:()=>this.hide()},this.element.classList.remove("off-screen"),this.gallery=[];var i=[];for(let e=0;e<this.files.length;e++){var s=this.files[e];s.gallery&&s.gallery==t.gallery&&i.push(s.id)}this.gallery=0<i.length?i:[t.id],this.render(t.id),1<this.gallery.length?(this.btnNext.classList.remove("d-none"),this.btnPrevious.classList.remove("d-none")):this.gallery&&(this.btnNext.classList.add("d-none"),this.btnPrevious.classList.add("d-none"))}hide(){const t=this;document.fullscreenElement&&document.exitFullscreen(),this.hideCurrentFile().then(e=>t.element.classList.add("off-screen")),this.currentFile=-1,window.MBSwiper.options={onLeft:null,onRight:null,onUp:null}}render(e){const t=this;this.hideCurrentFile().then(()=>{t.currentId=e,this.showCurrentFile().then(e=>{e.title&&t.title&&(t.title.innerHTML=e.title,t.title.classList.remove("d-none"))})})}hideCurrentFile(e){const i=this,s=e||"fade-out";return new Promise(e=>{if(-1==i.currentFile)e(!0);else{const t=i.element.querySelector(".viewer-content");i.title&&(i.title.innerHTML="",i.title.classList.add("d-none")),t?(t.classList.add(s),setTimeout(()=>{t.remove(),e(!0)},500)):e(!1)}})}showCurrentFile(e){let i=this.files[this.currentFile];const s=e||"fade-in";return i.isSameOrigin&&this.btnDownload?this.btnDownload.classList.remove("d-none"):this.btnDownload&&this.btnDownload.classList.add("d-none"),new Promise((e,t)=>{switch(i.Type){case"image":this.showCurrentImage(s).then(()=>{e(i)}).catch(e=>t(e));break;case"video":case"audio":this.showVideo(s).then(()=>{e(i)}).catch(e=>t(e));break;case"iframe":this.showIframe(s).then(()=>{e(i)}).catch(e=>t(e));break;default:this.showUnHandledFile(s).then(()=>{e(i)}).catch(e=>t(e))}})}showCurrentImage(e){const i=this,s=e||"fade-in";i.element.classList.add("loading");let n=this.files[this.currentFile];return new Promise(e=>{let t=document.createElement("img");t.classList.add("viewer-content"),t.classList.add(s),t.addEventListener("load",()=>{i.element.appendChild(t),i.element.classList.remove("loading"),setTimeout(()=>{t.classList.remove(s),setTimeout(()=>e(!0),400)},300)}),t.src=n.Url,t.addEventListener("click",e=>e.stopPropagation())})}showIframe(e){const i=e||"fade-in",s=this;s.element.classList.add("loading");let n=this.files[this.currentFile];return new Promise(e=>{let t=document.createElement("iframe");t.classList.add("viewer-content"),t.setAttribute("allowfullscreen","true"),t.setAttribute("allow","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"),t.classList.add(i),t.src=s.convertUrl(n.Url),s.element.appendChild(t),s.element.classList.remove("loading"),setTimeout(()=>{t.classList.remove(i),setTimeout(()=>e(!0),400)},300)})}convertUrl(e){return this.vimeoRegex.test(e)?"https://player.vimeo.com/video/"+e.replace(this.vimeoRegex,"$1"):this.youtubeRegex.test(e)?"https://www.youtube.com/embed/"+e.replace(this.youtubeRegex,"$1"):e}showVideo(e){const i=e||"fade-in",s=this;s.element.classList.add("loading");let n=this.files[this.currentFile];return new Promise(e=>{let t=document.createElement("video");t.classList.add("viewer-content"),t.classList.add(i),t.src=n.Url,t.setAttribute("controls","true"),t.setAttribute("autoplay","true"),t.addEventListener("click",e=>e.stopPropagation()),s.element.appendChild(t),s.element.classList.remove("loading"),setTimeout(()=>{t.classList.remove(i),setTimeout(()=>e(!0),400)},300)})}showUnHandledFile(e){const i=e||"fade-in",s=this;s.element.classList.add("loading");let n=this.files[this.currentFile];return new Promise(e=>{let t=document.createElement("div");t.classList.add("viewer-content","text-white","text-center",i),t.style.width="80%",t.style.height="80%",t.style.display="flex",t.style.justifyContent="center",t.style.alignItems="center",t.innerHTML=`   <div>
                                    <h3>Anteprima non disponibile</h3> 
                                    <p>Viewer non è in grado di visualizzare il file</p>
                                    <div><a href="${n.Url}" download="${n.Name}" class="btn btn-warning">Scarica "${n.Name}"</a></div>
                                </div>`,t.addEventListener("click",e=>e.stopPropagation()),s.element.appendChild(t),s.element.classList.remove("loading"),setTimeout(()=>{t.classList.remove(i),setTimeout(()=>e(!0),400)},300)})}downloadCurrent(){var e=this.files[this.currentFile].Url,t=this.files[this.currentFile].Name;let i=document.createElement("a");i.download=t,i.href=e,i.click()}next(){const t=this;this.hideCurrentFile("fade-left").then(e=>{t.currentId=t.nextItem,t.showCurrentFile("fade-right").then(e=>{e.title&&t.title&&(t.title.innerHTML=e.title,t.title.classList.remove("d-none"))})})}previous(){const t=this;this.hideCurrentFile("fade-right").then(e=>{t.currentId=t.previousItem,t.showCurrentFile("fade-left").then(e=>{e.title&&t.title&&(t.title.innerHTML=e.title,t.title.classList.remove("d-none"))})})}toggleFullScreen(){const e=this.element;document.fullscreenElement?document.exitFullscreen():e.requestFullscreen().catch(e=>{window.Swal?Swal.fire({icon:"error",text:`Impossibile impostare la modalità "fullscreen": ${e.message} (${e.name})`}):console.error(`Impossibile impostare la modalità "fullscreen": ${e.message} (${e.name})`)})}}window.FM_Viewer=new FMViewer;