@udhsin/ngx-image-viewer/bundles/udhsin-ngx-image-viewer.umd.min.js

A configurable Angular image viewer component, compatible with Angular 2+

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@udhsin/ngx-image-viewer",["exports","@angular/core","@angular/common"],n):n(((t=t||self).udhsin=t.udhsin||{},t.udhsin["ngx-image-viewer"]={}),t.ng.core,t.ng.common)}(this,(function(t,n,e){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var o=function(){return(o=Object.assign||function(t){for(var n,e=1,o=arguments.length;e<o;e++)for(var r in n=arguments[e])Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r]);return t}).apply(this,arguments)};function r(t,n,e,o){var r,i=arguments.length,s=i<3?n:null===o?o=Object.getOwnPropertyDescriptor(n,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,n,e,o);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(s=(i<3?r(s):i>3?r(n,e,s):r(n,e))||s);return i>3&&s&&Object.defineProperty(n,e,s),s}function i(t,n){return function(e,o){n(e,o,t)}}var s=function(t,n){this.name=t,this.imageIndex=n},a={btnClass:"default",zoomFactor:.1,containerBackgroundColor:"#ccc",wheelZoom:!1,allowFullscreen:!0,allowKeyboardNavigation:!0,alignCenter:!0,btnShow:{zoomIn:!0,zoomOut:!0,rotateClockwise:!0,rotateCounterClockwise:!0,next:!0,prev:!0},btnIcons:{zoomIn:"fa fa-plus",zoomOut:"fa fa-minus",rotateClockwise:"fa fa-repeat",rotateCounterClockwise:"fa fa-undo",next:"fa fa-arrow-right",prev:"fa fa-arrow-left",fullscreen:"fa fa-arrows-alt"}},c=function(){function t(t){this.moduleConfig=t,this.index=0,this.indexChange=new n.EventEmitter,this.configChange=new n.EventEmitter,this.customEvent=new n.EventEmitter,this.style={transform:"",msTransform:"",oTransform:"",webkitTransform:""},this.fullscreen=!1,this.loading=!0,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.hovered=!1}return t.prototype.ngOnInit=function(){var t=this.mergeConfig(a,this.moduleConfig);this.config=this.mergeConfig(t,this.config),this.triggerConfigBinding()},t.prototype.nextImage=function(t){this.canNavigate(t)&&this.index<this.src.length-1&&(this.loading=!0,this.index++,this.triggerIndexBinding(),this.reset())},t.prototype.prevImage=function(t){this.canNavigate(t)&&this.index>0&&(this.loading=!0,this.index--,this.triggerIndexBinding(),this.reset())},t.prototype.zoomIn=function(){this.scale*=1+this.config.zoomFactor,this.updateStyle()},t.prototype.zoomOut=function(){this.scale>this.config.zoomFactor&&(this.scale/=1+this.config.zoomFactor),this.updateStyle()},t.prototype.scrollZoom=function(t){if(this.config.wheelZoom)return t.deltaY>0?this.zoomOut():this.zoomIn(),!1},t.prototype.rotateClockwise=function(){this.rotation+=90,this.updateStyle()},t.prototype.rotateCounterClockwise=function(){this.rotation-=90,this.updateStyle()},t.prototype.onLoad=function(){this.loading=!1},t.prototype.onLoadStart=function(){this.loading=!0},t.prototype.onDragOver=function(t){this.translateX+=t.clientX-this.prevX,this.translateY+=t.clientY-this.prevY,this.prevX=t.clientX,this.prevY=t.clientY,this.updateStyle()},t.prototype.onDragStart=function(t){t.dataTransfer&&t.dataTransfer.setDragImage&&t.dataTransfer.setDragImage(t.target.nextElementSibling,0,0),this.prevX=t.clientX,this.prevY=t.clientY},t.prototype.toggleFullscreen=function(){this.fullscreen=!this.fullscreen,this.fullscreen||this.reset()},t.prototype.triggerIndexBinding=function(){this.indexChange.emit(this.index)},t.prototype.triggerConfigBinding=function(){this.configChange.next(this.config)},t.prototype.fireCustomEvent=function(t,n){this.customEvent.emit(new s(t,n))},t.prototype.reset=function(){this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.updateStyle()},t.prototype.onMouseOver=function(){this.hovered=!0},t.prototype.onMouseLeave=function(){this.hovered=!1},t.prototype.canNavigate=function(t){return null==t||this.config.allowKeyboardNavigation&&this.hovered},t.prototype.updateStyle=function(){this.style.transform="translate("+this.translateX+"px, "+this.translateY+"px) rotate("+this.rotation+"deg) scale("+this.scale+")",this.style.msTransform=this.style.transform,this.style.webkitTransform=this.style.transform,this.style.oTransform=this.style.transform},t.prototype.mergeConfig=function(t,n){var e=o({},t);return n&&(e=o(o({},t),n),n.btnIcons&&(e.btnIcons=o(o({},t.btnIcons),n.btnIcons))),e},t.ctorParameters=function(){return[{type:void 0,decorators:[{type:n.Optional},{type:n.Inject,args:["config"]}]}]},r([n.Input()],t.prototype,"src",void 0),r([n.Input()],t.prototype,"index",void 0),r([n.Input()],t.prototype,"config",void 0),r([n.Output()],t.prototype,"indexChange",void 0),r([n.Output()],t.prototype,"configChange",void 0),r([n.Output()],t.prototype,"customEvent",void 0),r([n.HostListener("window:keyup.ArrowRight",["$event"])],t.prototype,"nextImage",null),r([n.HostListener("window:keyup.ArrowLeft",["$event"])],t.prototype,"prevImage",null),r([n.HostListener("mouseover")],t.prototype,"onMouseOver",null),r([n.HostListener("mouseleave")],t.prototype,"onMouseLeave",null),t=r([n.Component({selector:"ngx-image-viewer",template:'<div\r\n  [ngxToggleFullscreen]="fullscreen"\r\n  class="img-container"\r\n  [ngClass]="{\'align-center\': config.alignCenter}"\r\n  [style.backgroundColor]="config.containerBackgroundColor"\r\n  (wheel)="scrollZoom($event)"\r\n  (dragover)="onDragOver($event)"\r\n>\r\n  <img\r\n    [src]="src[index]"\r\n    [ngStyle]="style"\r\n    alt="Image not found..."\r\n    (dragstart)="onDragStart($event)"\r\n    (load)="onLoad()"\r\n    (loadstart)="onLoadStart()"\r\n  />\r\n  \x3c!-- Div below will be used to hide the \'ghost\' image when dragging --\x3e\r\n  <div></div>\r\n  <div class="spinner-container" *ngIf="loading">\r\n    <div class="spinner"></div>\r\n  </div>\r\n\r\n  <button\r\n    type="button"\r\n    [class]="config.btnClass"\r\n    *ngIf="config.btnShow.rotateCounterClockwise"\r\n    (click)="rotateCounterClockwise()"\r\n  >\r\n    <span [class]="config.btnIcons.rotateCounterClockwise"></span>\r\n  </button>\r\n  <button\r\n    type="button"\r\n    [class]="config.btnClass"\r\n    *ngIf="config.btnShow.rotateClockwise"\r\n    (click)="rotateClockwise()"\r\n  >\r\n    <span [class]="config.btnIcons.rotateClockwise"></span>\r\n  </button>\r\n\r\n  <button\r\n    type="button"\r\n    [class]="config.btnClass"\r\n    *ngIf="config.btnShow.zoomOut"\r\n    (click)="zoomOut()"\r\n  >\r\n    <span [class]="config.btnIcons.zoomOut"></span>\r\n  </button>\r\n  <button\r\n    type="button"\r\n    [class]="config.btnClass"\r\n    *ngIf="config.btnShow.zoomIn"\r\n    (click)="zoomIn()"\r\n  >\r\n    <span [class]="config.btnIcons.zoomIn"></span>\r\n  </button>\r\n\r\n  <button\r\n    type="button"\r\n    [class]="config.btnClass"\r\n    *ngFor="let cBtn of config.customBtns"\r\n    (click)="fireCustomEvent(cBtn.name, index)"\r\n  >\r\n    <span [class]="cBtn.icon"></span>\r\n  </button>\r\n\r\n  <button\r\n    type="button"\r\n    id="ngx-fs-btn"\r\n    [class]="config.btnClass"\r\n    (click)="toggleFullscreen()"\r\n    *ngIf="config.allowFullscreen"\r\n  >\r\n    <span [class]="config.btnIcons.fullscreen"></span>\r\n  </button>\r\n\r\n  <div class="nav-button-container" *ngIf="src.length > 1">\r\n    <button\r\n      type="button"\r\n      [class]="config.btnClass"\r\n      (click)="prevImage($event)"\r\n      [disabled]="index === 0"\r\n    >\r\n      <span [class]="config.btnIcons.prev"></span>\r\n    </button>\r\n    <button\r\n      type="button"\r\n      [class]="config.btnClass"\r\n      (click)="nextImage($event)"\r\n      [disabled]="index === src.length - 1"\r\n    >\r\n      <span [class]="config.btnIcons.next"></span>\r\n    </button>\r\n  </div>\r\n</div>\r\n',styles:[".img-container{height:100%;width:100%;overflow:hidden;position:relative}.img-container.align-center{display:flex}.img-container.align-center img{margin:auto!important}.img-container img{z-index:2;margin:0 auto;display:block;max-width:100%;max-height:100%}.img-container button{z-index:99;position:absolute;right:15px}.img-container button:not(:disabled){cursor:pointer}.img-container button.default{height:40px;width:40px;border:1px solid #555;border-radius:50%;background-color:#fff;opacity:.7;transition:opacity .2s}.img-container button.default:hover{opacity:1}.img-container button.default:disabled{opacity:.25}.img-container>button:nth-of-type(1):not(#ngx-fs-btn){bottom:15px}.img-container>button:nth-of-type(2):not(#ngx-fs-btn){bottom:65px}.img-container>button:nth-of-type(3):not(#ngx-fs-btn){bottom:115px}.img-container>button:nth-of-type(4):not(#ngx-fs-btn){bottom:165px}.img-container>button:nth-of-type(5):not(#ngx-fs-btn){bottom:215px}.img-container>button:nth-of-type(6):not(#ngx-fs-btn){bottom:265px}.img-container>button:nth-of-type(7):not(#ngx-fs-btn){bottom:315px}#ngx-fs-btn{top:15px}.nav-button-container{text-align:center;position:absolute;z-index:98;bottom:10px;left:0;right:0}.nav-button-container>button{position:relative;right:0;margin:0 10px}.spinner-container{position:absolute;left:0;right:0;top:0;bottom:0;width:60px;height:60px;margin:auto;padding:10px;background-color:rgba(0,0,0,.4);border-radius:25%}.spinner{border-width:7px;border-style:solid;border-color:#ccc #ccc #222;border-radius:50%;height:100%;width:100%;box-sizing:border-box;-webkit-animation:2s linear infinite rotation;animation:2s linear infinite rotation}@keyframes rotation{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(359deg)}}@-webkit-keyframes rotation{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(359deg)}}"]}),i(0,n.Optional()),i(0,n.Inject("config"))],t)}(),l=function(){function t(t,n){this.el=t,this.document=n,this.element=this.el.nativeElement,this.isEnabled=this.document.fullscreenEnabled}return t.prototype.ngOnChanges=function(){this.isFullscreen&&this.isEnabled?this.openFullscreen():this.isEnabled&&this.closeFullscreen()},t.prototype.openFullscreen=function(){var t=this.element.requestFullscreen||this.element.mozRequestFullScreen||this.element.msRequestFullscreen||this.element.webkitRequestFullscreen;t&&t.call(this.element)},t.prototype.closeFullscreen=function(){if(this.document.fullscreenElement){var t=this.document.exitFullscreen||this.document.mozCancelFullScreen||this.document.webkitExitFullscreen||this.document.msExitFullscreen;t&&t.call(this.document)}},t.ctorParameters=function(){return[{type:n.ElementRef},{type:void 0,decorators:[{type:n.Inject,args:[e.DOCUMENT]}]}]},r([n.Input("ngxToggleFullscreen")],t.prototype,"isFullscreen",void 0),t=r([n.Directive({selector:"[ngxToggleFullscreen]"}),i(1,n.Inject(e.DOCUMENT))],t)}(),u=function(){function t(){}var o;return o=t,t.forRoot=function(t){return{ngModule:o,providers:[{provide:"config",useValue:t}]}},t=o=r([n.NgModule({imports:[e.CommonModule],declarations:[c,l],exports:[c,l]})],t)}();t.CustomEvent=s,t.ImageViewerComponent=c,t.ImageViewerModule=u,t.ToggleFullscreenDirective=l,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=udhsin-ngx-image-viewer.umd.min.js.map