You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
225 lines
11 KiB
JavaScript
225 lines
11 KiB
JavaScript
"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 <div [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"(type == 'image')\">\n <a *ngFor=\"let image of images; let i = index;\" [href]=\"image.source\" (click)=\"onImageClick($event,image,i,content)\">\n <img [src]=\"image.thumbnail\" [title]=\"image.title\" [alt]=\"image.alt\">\n </a>\n </div>\n <span [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"(type == 'content')\" (click)=\"onLinkClick($event,content)\">\n <ng-content select=\"a\"></ng-content>\n </span>\n <div class=\"ui-lightbox ui-widget ui-corner-all ui-shadow\" [style.display]=\"visible ? 'block' : 'none'\" [style.zIndex]=\"zindex\"\n [ngClass]=\"{'ui-lightbox-loading': loading}\"\n [style.transitionProperty]=\"'all'\" [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\" (click)=\"preventDocumentClickListener=true\">\n <div class=\"ui-lightbox-content-wrapper\">\n <a class=\"ui-state-default ui-lightbox-nav-left ui-corner-right\" [style.zIndex]=\"zindex + 1\" (click)=\"prev(img)\"\n [ngClass]=\"{'ui-helper-hidden':!leftVisible}\"><span class=\"ui-lightbox-nav-icon pi pi-chevron-left\"></span></a>\n <div #content class=\"ui-lightbox-content ui-corner-all\" \n [style.transitionProperty]=\"'width,height'\" [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\">\n <img #img [src]=\"currentImage ? currentImage.source||'' : ''\" (load)=\"onImageLoad($event,content)\" style=\"display:none\">\n <ng-content></ng-content>\n </div>\n <a class=\"ui-state-default ui-lightbox-nav-right ui-corner-left ui-helper-hidden\" [style.zIndex]=\"zindex + 1\" (click)=\"next(img)\"\n [ngClass]=\"{'ui-helper-hidden':!rightVisible}\"><span class=\"ui-lightbox-nav-icon pi pi-chevron-right\"></span></a>\n </div>\n <div class=\"ui-lightbox-caption ui-widget-header\" [style.display]=\"captionText ? 'block' : 'none'\">\n <span class=\"ui-lightbox-caption-text\">{{captionText}}</span><a class=\"ui-lightbox-close ui-corner-all\" tabindex=\"0\" (click)=\"hide($event)\" (keydown.enter)=\"hide($event)\"><span class=\"pi pi-times\"></span></a>\n <div style=\"clear:both\"></div>\n </div>\n </div>\n "
|
|
}),
|
|
__metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2, core_1.ChangeDetectorRef])
|
|
], Lightbox);
|
|
return Lightbox;
|
|
}());
|
|
exports.Lightbox = Lightbox;
|
|
var LightboxModule = /** @class */ (function () {
|
|
function LightboxModule() {
|
|
}
|
|
LightboxModule = __decorate([
|
|
core_1.NgModule({
|
|
imports: [common_1.CommonModule],
|
|
exports: [Lightbox],
|
|
declarations: [Lightbox]
|
|
})
|
|
], LightboxModule);
|
|
return LightboxModule;
|
|
}());
|
|
exports.LightboxModule = LightboxModule;
|
|
//# sourceMappingURL=lightbox.js.map
|