sk-front-lib 0.14.8 → 0.15.3

package/bundles/sk-front-lib-image.umd.min.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../projects/sk-front-lib/image/src/sk-image.component.ts","../../../projects/sk-front-lib/image/src/sk-image.module.ts"],"names":["SkImageComponent","cdRef","platform","dialog","apiService","this","mode","defaultOption","width","height","resizeType","resizeBgColor","filter","blur","clickable","coverBackground","previewColor","currentOption","apiCompleted","isVisible","src","imgId","skfile","option","alt","imageClass","waitSrc","activeSrc","originalSrc","ratio","backgroundColor","imageOpacity","viewerOptions","navbar","backdrop","className","toolbar","zoomIn","zoomOut","oneToOne","reset","movable","rotatable","toggleOnDblclick","Object","defineProperty","prototype","padding-bottom","overflow","background-color","cursor","position","top","left","right","bottom","opacity","background","ngOnChanges","changes","_init","currentValue","id","loadImageByFile","loadImageById","loadImageBySrc","ngAfterViewInit","ngOnDestroy","viewerInstance","destroy","apiServer","getHttpParam","toString","metadata","color","markForCheck","startImageLoad","_this","get","subscribe","result","data","error","showFallbackImage","onIntersection","event","visible","onImageLoad","onImageError","openDialog","Viewer","imageElement","nativeElement","assign","transition","url","show","detectChanges","HttpParams","append","String","Component","args","selector","template","changeDetection","ChangeDetectionStrategy","OnPush","ChangeDetectorRef","Platform","MatDialog","SkApiService","Input","ViewChild","static","NgModule","imports","CommonModule","InViewportModule","MatDialogModule","MatButtonModule","MatIconModule","declarations","exports","entryComponents"],"mappings":"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","sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    Input,\n    OnChanges,\n    OnDestroy,\n    SimpleChanges,\n    ViewChild\n} from '@angular/core';\nimport {Platform} from '@angular/cdk/platform';\nimport {HttpParams} from '@angular/common/http';\nimport {MatDialog} from '@angular/material/dialog';\n\nimport Viewer from 'viewerjs';\n\nimport {SkApiService} from 'sk-front-lib/api';\nimport {SkFile} from \"sk-front-lib/model\";\n\ninterface IMetadata {\n    width?: number;\n    height?: number;\n    color?: string;\n}\n\nexport interface SkImageOptions {\n    mode?: 'img' | 'css';\n    width?: number;\n    height?: number;\n    resizeType?: 'ratio_crop' | 'ratio_fill';\n    resizeBgColor?: string;\n    filter?: 'gray' | '';\n    blur?: number;\n    clickable?: boolean;\n    coverBackground?: string;\n    previewColor?: string;\n}\n\n@Component({\n    selector: 'sk-image',\n    templateUrl: './sk-image.component.html',\n    styleUrls: ['./sk-image.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SkImageComponent implements OnChanges, AfterViewInit, OnDestroy {\n\n    mode: 'skfile' | 'imgId' | 'src' | 'fallback' = 'imgId';\n    defaultOption: SkImageOptions = {\n        mode: 'img',\n        width: 0,\n        height: 0,\n        resizeType: 'ratio_crop',\n        resizeBgColor: '',\n        filter: '',\n        blur: 0,\n        clickable: false,\n        coverBackground: null,\n        previewColor: ''\n    };\n    currentOption: SkImageOptions = {};\n\n    apiCompleted = false;\n    isVisible = false;\n\n    @Input() src: string = null;\n    @Input() imgId: number = null;\n    @Input() skfile: SkFile = null;\n    @Input() option: SkImageOptions = {};\n    @Input() alt = '';\n    @Input() imageClass: string[] = [];\n    waitSrc: string = null;\n    activeSrc: string = null;\n    originalSrc: string = null;\n\n    ratio = 100;\n    backgroundColor = '#fff';\n    imageOpacity = 0;\n\n    @ViewChild('imageElement', {static: false}) imageElement: ElementRef;\n    viewerInstance: Viewer;\n    viewerOptions = {\n        navbar: false,\n        backdrop: 'static',\n        className: 'sk-custom-viewerjs',\n        toolbar: {\n            zoomIn: 1,\n            zoomOut: 1,\n            oneToOne: 1,\n            reset: 1,\n        },\n        movable: true,\n        rotatable: false,\n        toggleOnDblclick: false,\n    };\n\n    constructor(private cdRef: ChangeDetectorRef,\n                private platform: Platform,\n                private dialog: MatDialog,\n                private apiService: SkApiService) {\n    }\n\n    // -----------------------------------------------------------------------------------------------------\n    // @ Accessors\n    // ------------------------------------------1-----------------------------------------------------------\n\n    get containerStyle() {\n        if (this.mode === 'imgId' || this.mode === 'skfile') {\n            return {\n                'padding-bottom': this.ratio + '%',\n                height: '0px',\n                overflow: 'hidden',\n                'background-color': this.backgroundColor,\n                cursor: this.currentOption.clickable ? 'pointer' : 'inherit',\n            };\n        } else {\n            return {\n                'padding-bottom': '0px',\n                height: 'auto',\n                overflow: 'hidden',\n                'background-color': this.backgroundColor\n            };\n        }\n    }\n\n    get imageStyle() {\n        if (this.mode === 'imgId') {\n            return {\n                position: 'absolute',\n                width: '100%',\n                top: '0',\n                left: '0',\n                right: '0',\n                bottom: '0',\n                opacity: this.imageOpacity\n            };\n        } else {\n            return {\n                position: 'relative',\n                width: '100%',\n                opacity: this.imageOpacity\n            };\n        }\n    }\n\n    get coverStyle() {\n        if (this.option.coverBackground) {\n            return {\n                'background': this.option.coverBackground,\n                opacity: this.imageOpacity\n            }\n        } else {\n            return {};\n        }\n    }\n\n\n    // -----------------------------------------------------------------------------------------------------\n    // @ Lifecycle hooks\n    // -----------------------------------------------------------------------------------------------------\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this._init();\n\n        /**\n         * skfile, imgId, src 순서로 우선권을 가진다.\n         */\n        if (!!changes.skfile && !!changes.skfile.currentValue) {\n            this.mode = 'skfile';\n            this.imgId = this.skfile.id;\n            this.loadImageByFile();\n            return;\n        }\n\n        if (!!changes.imgId) {\n            this.mode = 'imgId';\n            this.loadImageById();\n            return;\n        }\n\n        if (!!changes.src) {\n            this.mode = 'src';\n            this.loadImageBySrc();\n            return;\n        }\n    }\n\n    ngAfterViewInit(): void {\n    }\n\n    ngOnDestroy(): void {\n        if (this.viewerInstance) {\n            this.viewerInstance.destroy();\n        }\n    }\n\n    // -----------------------------------------------------------------------------------------------------\n    // @ Public methods\n    // -----------------------------------------------------------------------------------------------------\n\n    loadImageByFile() {\n        this.waitSrc = `${this.apiService.apiServer}/api/public/images/${this.imgId}?${this.getHttpParam().toString()}`;\n        this.originalSrc = `${this.apiService.apiServer}/api/public/images/${this.imgId}`;\n\n        const metadata = this.skfile as IMetadata;\n        if (this.currentOption.width > 0 && this.currentOption.height > 0) {\n            this.ratio = this.currentOption.height / this.currentOption.width * 100;\n        } else {\n            this.ratio = metadata.height / metadata.width * 100;\n        }\n\n        this.backgroundColor = !!this.currentOption.previewColor ? this.currentOption.previewColor :\n            (this.currentOption.filter === 'gray' ? '#fff' : metadata.color);\n\n        this.apiCompleted = true;\n        this.cdRef.markForCheck();\n        this.startImageLoad();\n    }\n\n    loadImageById() {\n        this.apiService.get<SkFile>(`/api/public/images/${this.imgId}/metadata`)\n            .subscribe(\n                result => {\n                    this.skfile = result.data;\n                    this.loadImageByFile();\n                },\n                error => {\n                    this.showFallbackImage();\n                }\n            );\n    }\n\n    loadImageBySrc() {\n        this.waitSrc = this.src;\n        this.apiCompleted = true;\n    }\n\n    showFallbackImage() {\n        this.mode = 'fallback';\n        this.waitSrc = '/assets/images/no_image_available.jpeg';\n        this.apiCompleted = true;\n    }\n\n    onIntersection(event) {\n        if (event.visible) {\n            this.isVisible = true;\n            if (this.apiCompleted) {\n                this.startImageLoad();\n            }\n        }\n    }\n\n    startImageLoad() {\n        if (!this.activeSrc && this.apiCompleted && this.isVisible) {\n            this.activeSrc = this.waitSrc;\n            this.cdRef.markForCheck();\n        }\n    }\n\n    onImageLoad() {\n        this.imageOpacity = 1;\n        this.cdRef.markForCheck();\n    }\n\n    onImageError() {\n        this.activeSrc = null;\n        this.showFallbackImage();\n        this.startImageLoad();\n    }\n\n    openDialog() {\n        if (this.currentOption.clickable && this.mode !== 'fallback') {\n            if (this.viewerInstance) {\n                this.viewerInstance.destroy();\n            }\n\n            this.viewerInstance = new Viewer(this.imageElement.nativeElement, {\n                // Transitions currently break the Viewer when running optimizations during ng build (i.e in prod mode)\n                // TODO: Find a fix for this so we don't have to force disable transitions\n                transition: false,\n                url: 'src-viewer',\n                ...this.viewerOptions,\n            });\n            this.viewerInstance.show();\n        }\n    }\n\n    // -----------------------------------------------------------------------------------------------------\n    // @ Private methods\n    // -----------------------------------------------------------------------------------------------------\n\n    private _init() {\n        this.mode = 'imgId';\n        this.imageOpacity = 0;\n        this.apiCompleted = false;\n        this.activeSrc = null;\n        Object.assign(this.currentOption, this.defaultOption, this.option);\n\n        this.cdRef.detectChanges();\n    }\n\n    private getHttpParam(): HttpParams {\n        const option: SkImageOptions = this.currentOption;\n\n        return new HttpParams()\n            .append('w', String(option.width))\n            .append('h', String(option.height))\n            .append('resize', option.resizeType)\n            .append('bgcolor', option.resizeBgColor)\n            .append('filter', String(option.filter))\n            .append('blur', String(option.blur));\n    }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatDialogModule} from '@angular/material/dialog';\n\nimport {InViewportModule} from 'ng-in-viewport';\n\nimport {SkImageComponent} from './sk-image.component';\nimport {MatButtonModule} from '@angular/material/button';\nimport {MatIconModule} from '@angular/material/icon';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        InViewportModule,\n\n        MatDialogModule,\n        MatButtonModule,\n        MatIconModule\n    ],\n    declarations: [\n        SkImageComponent,\n    ],\n    exports: [\n        SkImageComponent\n    ],\n    entryComponents: [\n    ]\n})\nexport class SkImageModule {\n}\n"]}