@clarivate/angular-image-viewer/bundles/clarivate-angular-image-viewer.umd.min.js

A configurable Angular image viewer component, compatible with Angular 7.x+

!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/cdk/drag-drop"),require("@angular/common")):"function"==typeof define&&define.amd?define("@clarivate/angular-image-viewer",["exports","@angular/core","@angular/cdk/drag-drop","@angular/common"],o):o(((t=t||self).clarivate=t.clarivate||{},t.clarivate["angular-image-viewer"]={}),t.ng.core,t.ng.cdk.dragDrop,t.ng.common)}(this,(function(t,o,n,e){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */var i=function(){return(i=Object.assign||function(t){for(var o,n=1,e=arguments.length;n<e;n++)for(var i in o=arguments[n])Object.prototype.hasOwnProperty.call(o,i)&&(t[i]=o[i]);return t}).apply(this,arguments)};function r(t,o,n,e){var i,r=arguments.length,a=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,n):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,o,n,e);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(a=(r<3?i(a):r>3?i(o,n,a):i(o,n))||a);return r>3&&a&&Object.defineProperty(o,n,a),a}function a(t,o){return function(n,e){o(n,e,t)}}var s=function(t,o){this.name=t,this.imageIndex=o},c={btnClass:"default",zoomFactor:.1,containerBackgroundColor:"#e4dede",primaryColor:"",wheelZoom:!1,allowFullscreen:!0,allowKeyboardNavigation:!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-refresh",rotateCounterClockwise:"fa fa-undo",next:"fa fa-chevron-right",prev:"fa fa-chevron-left",fullscreen:"fa fa-arrows-alt"}},l=function(){function t(t){this.moduleConfig=t,this.index=0,this.footerTexts=["Image","of","View previous or next image","using < > on the keyboard"],this.indexChange=new o.EventEmitter,this.configChange=new o.EventEmitter,this.customImageEvent=new o.EventEmitter,this.styleHeight="98vh",this.style={transform:"",msTransform:"",oTransform:"",webkitTransform:""},this.fullscreen=!1,this.loading=!0,this.isDragOn=!1,this.scale=1,this.rotation=0,this.hovered=!1}return t.prototype.ngOnChanges=function(t){t.screenHeightOccupied?this.styleHeight="calc(98vh - "+this.screenHeightOccupied+"px)":t.index&&this.reset()},t.prototype.ngOnInit=function(){var t=this.mergeConfig(c,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.fireCustomEvent("next",this.index),this.reset())},t.prototype.prevImage=function(t){this.canNavigate(t)&&this.index>0&&(this.loading=!0,this.index--,this.triggerIndexBinding(),this.fireCustomEvent("prev",this.index),this.reset())},t.prototype.zoomIn=function(){this.scale*=1+this.config.zoomFactor,this.fireCustomEvent("zoomIn",this.scale),this.updateStyle()},t.prototype.zoomOut=function(){this.scale>this.config.zoomFactor&&(this.scale/=1+this.config.zoomFactor),this.fireCustomEvent("zoomOut",this.scale),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.fireCustomEvent("rotateClockwise",this.rotation),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.imageNotFound=function(){},t.prototype.onDragStart=function(t){if(t.source._dragRef._initialTransform&&t.source._dragRef._initialTransform.length>0){var o=t.source._dragRef._initialTransform.split(" rotate")[0],n=this.style.transform.split(" rotate")[1];t.source._dragRef._initialTransform=o+" rotate"+n}else t.source._dragRef._initialTransform=this.style.transform},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,o){this.customImageEvent.emit(new s(t,o))},t.prototype.reset=function(){this.scale=1,this.rotation=0,this.updateStyle(),this.cdkDrag.reset()},t.prototype.onMouseOver=function(){this.hovered=!0},t.prototype.onMouseLeave=function(){this.hovered=!1},t.prototype.canNavigate=function(t){return"keyup"===t.type?this.config.allowKeyboardNavigation&&this.hovered:"click"===t.type?this.hovered:void 0},t.prototype.updateStyle=function(){this.style.transform="rotate("+this.rotation+"deg) scale("+this.scale+")"},t.prototype.mergeConfig=function(t,o){var n=i({},t);return o&&(n=i(i({},t),o),o.btnIcons&&(n.btnIcons=i(i({},t.btnIcons),o.btnIcons))),n},t.ctorParameters=function(){return[{type:void 0,decorators:[{type:o.Optional},{type:o.Inject,args:["config"]}]}]},r([o.ViewChild(n.CdkDrag,{static:!0})],t.prototype,"cdkDrag",void 0),r([o.Input()],t.prototype,"src",void 0),r([o.Input()],t.prototype,"config",void 0),r([o.Input()],t.prototype,"screenHeightOccupied",void 0),r([o.Input()],t.prototype,"index",void 0),r([o.Input()],t.prototype,"imageName",void 0),r([o.Input()],t.prototype,"footerTexts",void 0),r([o.Output()],t.prototype,"indexChange",void 0),r([o.Output()],t.prototype,"configChange",void 0),r([o.Output()],t.prototype,"customImageEvent",void 0),r([o.HostListener("window:keyup.ArrowRight",["$event"])],t.prototype,"nextImage",null),r([o.HostListener("window:keyup.ArrowLeft",["$event"])],t.prototype,"prevImage",null),r([o.HostListener("mouseover")],t.prototype,"onMouseOver",null),r([o.HostListener("mouseleave")],t.prototype,"onMouseLeave",null),t=r([o.Component({selector:"angular-image-viewer",template:'<div [appScreenfull]="fullscreen" class="img-container" [style.backgroundColor]="config.containerBackgroundColor"\n    (wheel)="scrollZoom($event)">\n    <div class="image-name" *ngIf="imageName">\n      <span>{{imageName}}</span>\n    </div>\n\n    <div cdkDrag class="drag-element">\n        <img [src]="src[index]" [ngStyle]="style" alt=""\n            (cdkDragStarted)="onDragStart($event)"\n            (load)="onLoad()" (loadstart)="onLoadStart()" (error)="imageNotFound()" />\n    </div>\n\n    <div class="spinner-container" *ngIf="loading">\n        <div class="spinner"></div>\n    </div>\n\n    <div class="button-container">\n        <button type="button" id="ngx-fs-btn" [class]="config.btnClass" (click)="toggleFullscreen()"\n        [style.color]="config.primaryColor" *ngIf="config.allowFullscreen">\n            <span [class]="config.btnIcons.fullscreen"></span>\n        </button>\n\n        <div class="button-container-bottom">\n            <button type="button" [class]="config.btnClass" *ngFor="let cBtn of config.customBtns"\n            [style.color]="config.primaryColor" (click)="fireCustomEvent(cBtn.name, index)">\n                <span [class]="cBtn.icon"></span>\n            </button>\n\n            <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateCounterClockwise"\n            [style.color]="config.primaryColor" (click)="rotateCounterClockwise()">\n                <span [class]="config.btnIcons.rotateCounterClockwise"></span>\n            </button>\n            <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateClockwise"\n            [style.color]="config.primaryColor" (click)="rotateClockwise()">\n                <span [class]="config.btnIcons.rotateClockwise"></span>\n            </button>\n\n            <div class="button-zoom-in-out-container">\n                <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomIn"\n                [style.color]="config.primaryColor" (click)="zoomIn()">\n                    <span [class]="config.btnIcons.zoomIn"></span>\n                </button>\n                <button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomOut"\n                [style.color]="config.primaryColor" (click)="zoomOut()">\n                    <span [class]="config.btnIcons.zoomOut"></span>\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <div class="nav-button-container" *ngIf="src.length > 1">\n        <button type="button" #prevImg [class]="config.btnClass" (click)="prevImage($event); prevImg.blur()"\n        [style.color]="config.primaryColor"  [disabled]="index === 0">\n            <span [class]="config.btnIcons.prev"></span>\n        </button>\n        <button type="button" #nextImg [class]="config.btnClass" (click)="nextImage($event); nextImg.blur()"\n        [style.color]="config.primaryColor"  [disabled]="index === src.length - 1">\n            <span [class]="config.btnIcons.next"></span>\n        </button>\n    </div>\n    <div class="footer-section">\n        <div class="image-txt-count-left-align"><span>{{footerTexts[0]}} {{index + 1}} {{footerTexts[1]}} {{src.length}}</span></div>\n        <div class="footer-txt-right-align">\n            <span class="footer-txt-right-align-title" [style.color]="config.primaryColor">{{footerTexts[2]}}</span>\n            <span class="footer-txt-right-align-note">{{footerTexts[3]}}</span>\n        </div>\n    </div>\n</div>\n',styles:['.img-container{position:relative;width:100%;height:100%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;overflow:hidden}.img-container .drag-element{position:absolute;top:35px;right:78px;width:calc(100% - 156px);height:calc(100% - 85px);cursor:-webkit-grab;cursor:grab;text-align:center}.img-container .drag-element img{padding:0;max-width:100%;max-height:100%}.img-container .drag-element:active{cursor:-webkit-grabbing;cursor:grabbing}.img-container button{z-index:99}.img-container button:not(:disabled){cursor:pointer}#ngx-fs-btn{top:15px}button.default{height:24px;width:24px;border-radius:31px;opacity:.9;-webkit-transition:opacity .2s;transition:opacity .2s;font-size:12px;background:inherit;background-color:#fff;border:none;box-shadow:0 0 5px rgba(0,0,0,.3490196078)}button.default:focus{outline:0;opacity:1}button.default:hover{opacity:1}button.default:disabled{opacity:.3}.nav-button-container>button{position:relative;right:0;margin:0 10px}.nav-button-container{text-align:right;position:absolute;z-index:98;bottom:60px;left:0;right:10px}.nav-button-container button.default{height:30px;margin:0;font-size:14px}.nav-button-container button.default:first-child{border-radius:4px 0 0 4px}.nav-button-container button.default:last-child{margin-left:10px;border-radius:0 4px 4px 0}.button-container{position:absolute;top:10px;right:10px;width:24px;height:calc(100% - 115px);z-index:98}.button-container .button-container-bottom{position:absolute;bottom:0}.button-container .button-container-bottom button.default{margin-top:10px}.button-container .button-container-bottom .button-zoom-in-out-container{margin-top:15px}.button-container .button-container-bottom .button-zoom-in-out-container button.default{margin:0;border-radius:0;height:30px}.button-container .button-container-bottom .button-zoom-in-out-container button.default:first-child{margin-bottom:1px}.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}.footer-section{position:absolute;bottom:10px;left:0;width:100%;line-height:18px;z-index:98}.footer-section .image-txt-count-left-align{float:left;padding:0 10px;font-family:"Source Sans Pro SemiBold";font-size:14;color:#333}.footer-section .footer-txt-right-align{float:right;padding:0 10px;text-align:right}.footer-section .footer-txt-right-align span.footer-txt-right-align-title{display:block;font-family:"Source Sans Pro SemiBold";font-size:14}.footer-section .footer-txt-right-align span.footer-txt-right-align-note{color:#767676;font-family:"Source Sans Pro";font-size:12}.image-name{position:absolute;top:10px;left:10px;z-index:98;font-family:"Source Sans Pro SemiBold";font-size:16;color:#333}@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)}}']}),a(0,o.Optional()),a(0,o.Inject("config"))],t)}(),u=function(){function t(t){this.el=t}return t.prototype.ngOnChanges=function(t){var o,n;t.fullscreenState.isFirstChange()||(this.fullscreenState?(n=(o=this.el.nativeElement).requestFullscreen||o.webkitRequestFullScreen||o.mozRequestFullScreen||o.msRequestFullScreen)?n.call(o):console.log("FullScreen Request Method Not Supported on this browser."):(n=(o=document).cancelFullscreen||o.webkitExitFullscreen||o.webkitCancelFullScreen||o.mozCancelFullScreen||o.msExitFullScreen)?n.call(o):console.error("Angular Image Viewer: FullScreen Cancel Request Method Not Supported on this browser."))},t.prototype.ngOnInit=function(){},t.ctorParameters=function(){return[{type:o.ElementRef}]},r([o.Input("appScreenfull")],t.prototype,"fullscreenState",void 0),t=r([o.Directive({selector:"[appScreenfull]"})],t)}(),g=function(){function t(){}return t=r([o.NgModule({declarations:[l,u],imports:[e.CommonModule,n.DragDropModule],exports:[l,u,n.DragDropModule]})],t)}();t.AngularImageViewerComponent=l,t.AngularImageViewerModule=g,t.CustomImageEvent=s,t.FullScreenDirective=u,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=clarivate-angular-image-viewer.umd.min.js.map