/*! * views.js - lightweight vanilla JavaScript image viewer * @version 0.1.1 * @author Adrian Klimek * @link https://adrianklimek.github.io/views/ * @copyright Adrian Klimek 2016-2017 * @license MIT */ !function(a,b){"function"==typeof define&&define.amd?define(b):"object"==typeof module&&module.exports?module.exports=b():a.Views=b()}(this,function(){"use strict";function a(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function b(b,c){var d={defaultTheme:!0,prefix:"",loader:"",closeButton:'',anywhereToClose:!0,openAnimationDuration:0,closeAnimationDuration:0};if(this.options="object"==typeof c?a(d,c):d,void 0===b)throw new Error('Views [constructor]: "element" parameter is required');if("object"==typeof b)this.element=b;else{if("string"!=typeof b)throw new Error('Views [constructor]: wrong "element" parameter');this.element=document.querySelector(b)}this.init()}return b.prototype.init=function(){if(this.onOpen=function(){},this.onClose=function(){},this.css={view:"position:fixed;top:0;left:0;width:100%;height:100%;padding:50px 15px;box-sizing:border-box;cursor:pointer;z-index:9999;",image:"max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:50px 15px;box-sizing:border-box;",closeButton:"width:24px;height:24px;position:absolute;top:11px;right:11px;-webkit-filter:drop-shadow(0 0 12px rgba(0,0,0,.07));filter:drop-shadow(0 0 12px rgba(0,0,0,.07));",background:"position:absolute;top:0;left:0;height:100%;width:100%;opacity:.75;background-color:#000;"},""!==this.options.prefix&&"string"==typeof this.options.prefix&&(this.options.prefix+="-"),this.names={id:{view:this.options.prefix+"views-wrapper",closeButton:this.options.prefix+"views-close"},class:{opening:this.options.prefix+"views-opening",closing:this.options.prefix+"views-closing",loading:this.options.prefix+"views-loading",image:this.options.prefix+"views-image",viewerWrapper:this.options.prefix+"views-content",loader:this.options.prefix+"views-loader",background:this.options.prefix+"views-background"}},this.href=this.element.href,"string"!=typeof this.href)throw new Error("Views [init]: href attribute is missing a value");this.element.addEventListener("click",this,!1)},b.prototype.open=function(){this.onOpen();var a,b=this;this.view=document.createElement("div"),this.viewWrapper=document.createElement("div"),this.closeButton=document.createElement("div"),this.loader=document.createElement("div"),this.view.addEventListener("click",this,!1),this.options.openAnimationDuration&&(this.view.className+=" "+this.names.class.opening,setTimeout(function(){b.animationDelay("open")},this.options.openAnimationDuration)),this.viewWrapper.className=this.names.class.viewerWrapper,this.view.id=this.names.id.view,this.view.className+=" "+this.names.class.loading,this.options.defaultTheme&&(this.view.style.cssText=this.css.view,this.closeButton.style.cssText=this.css.closeButton,a='style="'+this.css.background+'"'),this.closeButton.id=this.names.id.closeButton,this.closeButton.innerHTML=this.options.closeButton,this.loader.className=this.names.class.loader,this.loader.innerHTML=this.options.loader,this.viewWrapper.appendChild(this.closeButton),this.viewWrapper.appendChild(this.loader),this.view.innerHTML='
",this.view.appendChild(this.viewWrapper),document.body.appendChild(this.view),this.loadImage(this.href)},b.prototype.close=function(){this.onClose();var a=this;this.view.classList.remove(this.names.class.opening),this.view.classList.add(this.names.class.closing),this.view.removeEventListener("click",this),this.options.closeAnimationDuration?setTimeout(function(){a.animationDelay("close")},this.options.closeAnimationDuration):this.remove()},b.prototype.remove=function(){document.body.removeChild(this.view)},b.prototype.loadImage=function(a){var b=new Image;b.addEventListener("load",this,!1),b.className=this.names.class.image,b.style.cssText=this.css.image,b.src=a},b.prototype.animationDelay=function(a){switch(a){case"open":this.view.classList.remove(this.names.class.opening);break;case"close":this.remove()}},b.prototype.handleEvent=function(a){var b="on"+a.type;this[b]&&this[b](a)},b.prototype.onclick=function(a){switch(a.currentTarget){case this.element:a.preventDefault(),this.open();break;case this.view:(this.options.anywhereToClose||a.target==this.closeButton)&&this.close()}},b.prototype.onload=function(a){a.currentTarget.classList.contains(this.names.class.image)&&(this.viewWrapper.removeChild(this.loader),this.viewWrapper.appendChild(a.target),this.view.classList.remove(this.names.class.loading))},b.prototype.on=function(a,b){switch("function"!=typeof b&&console.log('Views [on]: "callback" parameter is required'),a){case"open":this.onOpen=b;break;case"close":this.onClose=b;break;default:console.log('Views [on]: wrong or missing "type" parameter')}},b});