1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/dom')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/lightbox', ['exports', '@angular/core', '@angular/common', 'primeng/dom'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.lightbox = {}), global.ng.core, global.ng.common, global.primeng.dom));
|
5 | }(this, (function (exports, core, common, dom) { 'use strict';
|
6 |
|
7 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
8 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
9 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
10 | 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;
|
11 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
12 | };
|
13 | var Lightbox = (function () {
|
14 | function Lightbox(el, renderer, cd) {
|
15 | this.el = el;
|
16 | this.renderer = renderer;
|
17 | this.cd = cd;
|
18 | this.type = 'image';
|
19 | this.effectDuration = '500ms';
|
20 | this.autoZIndex = true;
|
21 | this.baseZIndex = 0;
|
22 | this.closeOnEscape = true;
|
23 | }
|
24 | Lightbox.prototype.onImageClick = function (event, image, i, content) {
|
25 | this.index = i;
|
26 | this.loading = true;
|
27 | content.style.width = 32 + 'px';
|
28 | content.style.height = 32 + 'px';
|
29 | this.preventDocumentClickListener = true;
|
30 | this.show();
|
31 | this.displayImage(image);
|
32 | event.preventDefault();
|
33 | };
|
34 | Lightbox.prototype.ngAfterViewInit = function () {
|
35 | this.panel = dom.DomHandler.findSingle(this.el.nativeElement, '.ui-lightbox ');
|
36 | if (this.appendTo) {
|
37 | if (this.appendTo === 'body')
|
38 | document.body.appendChild(this.panel);
|
39 | else
|
40 | dom.DomHandler.appendChild(this.panel, this.appendTo);
|
41 | }
|
42 | };
|
43 | Lightbox.prototype.onLinkClick = function (event, content) {
|
44 | this.preventDocumentClickListener = true;
|
45 | this.show();
|
46 | event.preventDefault();
|
47 | };
|
48 | Lightbox.prototype.displayImage = function (image) {
|
49 | var _this = this;
|
50 | setTimeout(function () {
|
51 | _this.cd.markForCheck();
|
52 | _this.currentImage = image;
|
53 | _this.captionText = image.title;
|
54 | _this.center();
|
55 | }, 1000);
|
56 | };
|
57 | Lightbox.prototype.show = function () {
|
58 | this.mask = document.createElement('div');
|
59 | dom.DomHandler.addMultipleClasses(this.mask, 'ui-widget-overlay ui-dialog-mask');
|
60 | document.body.appendChild(this.mask);
|
61 | if (this.autoZIndex) {
|
62 | this.zindex = this.baseZIndex + (++dom.DomHandler.zindex);
|
63 | }
|
64 | this.mask.style.zIndex = this.zindex - 1;
|
65 | this.center();
|
66 | this.visible = true;
|
67 | this.bindGlobalListeners();
|
68 | };
|
69 | Lightbox.prototype.hide = function (event) {
|
70 | this.captionText = null;
|
71 | this.index = null;
|
72 | this.currentImage = null;
|
73 | this.visible = false;
|
74 | if (this.mask) {
|
75 | document.body.removeChild(this.mask);
|
76 | this.mask = null;
|
77 | }
|
78 | this.unbindGlobalListeners();
|
79 | event.preventDefault();
|
80 | };
|
81 | Lightbox.prototype.center = function () {
|
82 | var elementWidth = dom.DomHandler.getOuterWidth(this.panel);
|
83 | var elementHeight = dom.DomHandler.getOuterHeight(this.panel);
|
84 | if (elementWidth == 0 && elementHeight == 0) {
|
85 | this.panel.style.visibility = 'hidden';
|
86 | this.panel.style.display = 'block';
|
87 | elementWidth = dom.DomHandler.getOuterWidth(this.panel);
|
88 | elementHeight = dom.DomHandler.getOuterHeight(this.panel);
|
89 | this.panel.style.display = 'none';
|
90 | this.panel.style.visibility = 'visible';
|
91 | }
|
92 | };
|
93 | Lightbox.prototype.onImageLoad = function (event, content) {
|
94 | var _this = this;
|
95 | var image = event.target;
|
96 | image.style.visibility = 'hidden';
|
97 | image.style.display = 'block';
|
98 | var imageWidth = dom.DomHandler.getOuterWidth(image);
|
99 | var imageHeight = dom.DomHandler.getOuterHeight(image);
|
100 | image.style.display = 'none';
|
101 | image.style.visibility = 'visible';
|
102 | content.style.width = imageWidth + 'px';
|
103 | content.style.height = imageHeight + 'px';
|
104 | this.panel.style.left = parseInt(this.panel.style.left) + (dom.DomHandler.getOuterWidth(this.panel) - imageWidth) / 2 + 'px';
|
105 | this.panel.style.top = parseInt(this.panel.style.top) + (dom.DomHandler.getOuterHeight(this.panel) - imageHeight) / 2 + 'px';
|
106 | setTimeout(function () {
|
107 | _this.cd.markForCheck();
|
108 | dom.DomHandler.fadeIn(image, 500);
|
109 | image.style.display = 'block';
|
110 |
|
111 | _this.loading = false;
|
112 | }, parseInt(this.effectDuration));
|
113 | };
|
114 | Lightbox.prototype.prev = function (placeholder) {
|
115 | this.captionText = null;
|
116 | this.loading = true;
|
117 | placeholder.style.display = 'none';
|
118 | if (this.index > 0) {
|
119 | this.displayImage(this.images[--this.index]);
|
120 | }
|
121 | };
|
122 | Lightbox.prototype.next = function (placeholder) {
|
123 | this.captionText = null;
|
124 | this.loading = true;
|
125 | placeholder.style.display = 'none';
|
126 | if (this.index <= (this.images.length - 1)) {
|
127 | this.displayImage(this.images[++this.index]);
|
128 | }
|
129 | };
|
130 | Lightbox.prototype.bindGlobalListeners = function () {
|
131 | var _this = this;
|
132 | this.documentClickListener = this.renderer.listen('document', 'click', function (event) {
|
133 | if (!_this.preventDocumentClickListener && _this.visible) {
|
134 | _this.hide(event);
|
135 | }
|
136 | _this.preventDocumentClickListener = false;
|
137 | _this.cd.markForCheck();
|
138 | });
|
139 | if (this.closeOnEscape && !this.documentEscapeListener) {
|
140 | this.documentEscapeListener = this.renderer.listen('document', 'keydown', function (event) {
|
141 | if (event.which == 27) {
|
142 | if (parseInt(_this.panel.style.zIndex) === (dom.DomHandler.zindex + _this.baseZIndex)) {
|
143 | _this.hide(event);
|
144 | }
|
145 | }
|
146 | });
|
147 | }
|
148 | };
|
149 | Lightbox.prototype.unbindGlobalListeners = function () {
|
150 | if (this.documentEscapeListener) {
|
151 | this.documentEscapeListener();
|
152 | this.documentEscapeListener = null;
|
153 | }
|
154 | if (this.documentClickListener) {
|
155 | this.documentClickListener();
|
156 | this.documentClickListener = null;
|
157 | }
|
158 | };
|
159 | Object.defineProperty(Lightbox.prototype, "leftVisible", {
|
160 | get: function () {
|
161 | return this.images && this.images.length && this.index != 0 && !this.loading;
|
162 | },
|
163 | enumerable: true,
|
164 | configurable: true
|
165 | });
|
166 | Object.defineProperty(Lightbox.prototype, "rightVisible", {
|
167 | get: function () {
|
168 | return this.images && this.images.length && this.index < (this.images.length - 1) && !this.loading;
|
169 | },
|
170 | enumerable: true,
|
171 | configurable: true
|
172 | });
|
173 | Lightbox.prototype.ngOnDestroy = function () {
|
174 | this.unbindGlobalListeners();
|
175 | if (this.appendTo) {
|
176 | this.el.nativeElement.appendChild(this.panel);
|
177 | }
|
178 | };
|
179 | Lightbox.ctorParameters = function () { return [
|
180 | { type: core.ElementRef },
|
181 | { type: core.Renderer2 },
|
182 | { type: core.ChangeDetectorRef }
|
183 | ]; };
|
184 | __decorate([
|
185 | core.Input()
|
186 | ], Lightbox.prototype, "images", void 0);
|
187 | __decorate([
|
188 | core.Input()
|
189 | ], Lightbox.prototype, "type", void 0);
|
190 | __decorate([
|
191 | core.Input()
|
192 | ], Lightbox.prototype, "style", void 0);
|
193 | __decorate([
|
194 | core.Input()
|
195 | ], Lightbox.prototype, "styleClass", void 0);
|
196 | __decorate([
|
197 | core.Input()
|
198 | ], Lightbox.prototype, "appendTo", void 0);
|
199 | __decorate([
|
200 | core.Input()
|
201 | ], Lightbox.prototype, "easing", void 0);
|
202 | __decorate([
|
203 | core.Input()
|
204 | ], Lightbox.prototype, "effectDuration", void 0);
|
205 | __decorate([
|
206 | core.Input()
|
207 | ], Lightbox.prototype, "autoZIndex", void 0);
|
208 | __decorate([
|
209 | core.Input()
|
210 | ], Lightbox.prototype, "baseZIndex", void 0);
|
211 | __decorate([
|
212 | core.Input()
|
213 | ], Lightbox.prototype, "closeOnEscape", void 0);
|
214 | Lightbox = __decorate([
|
215 | core.Component({
|
216 | selector: 'p-lightbox',
|
217 | 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 ",
|
218 | changeDetection: core.ChangeDetectionStrategy.Default
|
219 | })
|
220 | ], Lightbox);
|
221 | return Lightbox;
|
222 | }());
|
223 | var LightboxModule = (function () {
|
224 | function LightboxModule() {
|
225 | }
|
226 | LightboxModule = __decorate([
|
227 | core.NgModule({
|
228 | imports: [common.CommonModule],
|
229 | exports: [Lightbox],
|
230 | declarations: [Lightbox]
|
231 | })
|
232 | ], LightboxModule);
|
233 | return LightboxModule;
|
234 | }());
|
235 |
|
236 | exports.Lightbox = Lightbox;
|
237 | exports.LightboxModule = LightboxModule;
|
238 |
|
239 | Object.defineProperty(exports, '__esModule', { value: true });
|
240 |
|
241 | })));
|
242 |
|