"use strict"; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; Object.defineProperty(exports, "__esModule", { value: true }); var core_1 = require("@angular/core"); var common_1 = require("@angular/common"); var domhandler_1 = require("../dom/domhandler"); var Lightbox = /** @class */ (function () { function Lightbox(el, renderer, cd) { this.el = el; this.renderer = renderer; this.cd = cd; this.type = 'image'; this.effectDuration = '500ms'; this.autoZIndex = true; this.baseZIndex = 0; } Lightbox.prototype.onImageClick = function (event, image, i, content) { this.index = i; this.loading = true; content.style.width = 32 + 'px'; content.style.height = 32 + 'px'; this.show(); this.displayImage(image); this.preventDocumentClickListener = true; event.preventDefault(); }; Lightbox.prototype.ngAfterViewInit = function () { var _this = this; this.panel = domhandler_1.DomHandler.findSingle(this.el.nativeElement, '.ui-lightbox '); if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.panel); else domhandler_1.DomHandler.appendChild(this.panel, this.appendTo); } this.documentClickListener = this.renderer.listen('document', 'click', function (event) { if (!_this.preventDocumentClickListener && _this.visible) { _this.hide(event); } _this.preventDocumentClickListener = false; _this.cd.markForCheck(); }); }; Lightbox.prototype.onLinkClick = function (event, content) { this.show(); this.preventDocumentClickListener = true; event.preventDefault(); }; Lightbox.prototype.displayImage = function (image) { var _this = this; setTimeout(function () { _this.cd.markForCheck(); _this.currentImage = image; _this.captionText = image.title; _this.center(); }, 1000); }; Lightbox.prototype.show = function () { this.mask = document.createElement('div'); domhandler_1.DomHandler.addMultipleClasses(this.mask, 'ui-widget-overlay ui-dialog-mask'); document.body.appendChild(this.mask); if (this.autoZIndex) { this.zindex = this.baseZIndex + (++domhandler_1.DomHandler.zindex); } this.mask.style.zIndex = this.zindex - 1; this.center(); this.visible = true; }; Lightbox.prototype.hide = function (event) { this.captionText = null; this.index = null; this.currentImage = null; this.visible = false; this.panel.style.left = 'auto'; this.panel.style.top = 'auto'; if (this.mask) { document.body.removeChild(this.mask); this.mask = null; } event.preventDefault(); }; Lightbox.prototype.center = function () { var elementWidth = domhandler_1.DomHandler.getOuterWidth(this.panel); var elementHeight = domhandler_1.DomHandler.getOuterHeight(this.panel); if (elementWidth == 0 && elementHeight == 0) { this.panel.style.visibility = 'hidden'; this.panel.style.display = 'block'; elementWidth = domhandler_1.DomHandler.getOuterWidth(this.panel); elementHeight = domhandler_1.DomHandler.getOuterHeight(this.panel); this.panel.style.display = 'none'; this.panel.style.visibility = 'visible'; } var viewport = domhandler_1.DomHandler.getViewport(); var x = (viewport.width - elementWidth) / 2; var y = (viewport.height - elementHeight) / 2; this.panel.style.left = x + 'px'; this.panel.style.top = y + 'px'; }; Lightbox.prototype.onImageLoad = function (event, content) { var _this = this; var image = event.target; image.style.visibility = 'hidden'; image.style.display = 'block'; var imageWidth = domhandler_1.DomHandler.getOuterWidth(image); var imageHeight = domhandler_1.DomHandler.getOuterHeight(image); image.style.display = 'none'; image.style.visibility = 'visible'; content.style.width = imageWidth + 'px'; content.style.height = imageHeight + 'px'; this.panel.style.left = parseInt(this.panel.style.left) + (domhandler_1.DomHandler.getOuterWidth(this.panel) - imageWidth) / 2 + 'px'; this.panel.style.top = parseInt(this.panel.style.top) + (domhandler_1.DomHandler.getOuterHeight(this.panel) - imageHeight) / 2 + 'px'; setTimeout(function () { _this.cd.markForCheck(); domhandler_1.DomHandler.fadeIn(image, 500); image.style.display = 'block'; //this.captionText = this.currentImage.title; _this.loading = false; }, parseInt(this.effectDuration)); }; Lightbox.prototype.prev = function (placeholder) { this.captionText = null; this.loading = true; placeholder.style.display = 'none'; if (this.index > 0) { this.displayImage(this.images[--this.index]); } }; Lightbox.prototype.next = function (placeholder) { this.captionText = null; this.loading = true; placeholder.style.display = 'none'; if (this.index <= (this.images.length - 1)) { this.displayImage(this.images[++this.index]); } }; Object.defineProperty(Lightbox.prototype, "leftVisible", { get: function () { return this.images && this.images.length && this.index != 0 && !this.loading; }, enumerable: true, configurable: true }); Object.defineProperty(Lightbox.prototype, "rightVisible", { get: function () { return this.images && this.images.length && this.index < (this.images.length - 1) && !this.loading; }, enumerable: true, configurable: true }); Lightbox.prototype.ngOnDestroy = function () { if (this.documentClickListener) { this.documentClickListener(); } if (this.appendTo) { this.el.nativeElement.appendChild(this.panel); } }; __decorate([ core_1.Input(), __metadata("design:type", Array) ], Lightbox.prototype, "images", void 0); __decorate([ core_1.Input(), __metadata("design:type", String) ], Lightbox.prototype, "type", void 0); __decorate([ core_1.Input(), __metadata("design:type", Object) ], Lightbox.prototype, "style", void 0); __decorate([ core_1.Input(), __metadata("design:type", String) ], Lightbox.prototype, "styleClass", void 0); __decorate([ core_1.Input(), __metadata("design:type", Object) ], Lightbox.prototype, "appendTo", void 0); __decorate([ core_1.Input(), __metadata("design:type", String) ], Lightbox.prototype, "easing", void 0); __decorate([ core_1.Input(), __metadata("design:type", Object) ], Lightbox.prototype, "effectDuration", void 0); __decorate([ core_1.Input(), __metadata("design:type", Boolean) ], Lightbox.prototype, "autoZIndex", void 0); __decorate([ core_1.Input(), __metadata("design:type", Number) ], Lightbox.prototype, "baseZIndex", void 0); Lightbox = __decorate([ core_1.Component({ selector: 'p-lightbox', template: "\n