@casus-campus/ngx-gallery 0.5.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/casus-campus-ngx-gallery.umd.js +86 -40
- package/bundles/casus-campus-ngx-gallery.umd.js.map +1 -1
- package/casus-campus-ngx-gallery.metadata.json +1 -1
- package/esm2015/lib/cc-custom-options.js +2 -2
- package/esm2015/lib/image/ngx-gallery-image-svg.component.js +1 -1
- package/esm2015/lib/ngx-gallery-arrows/ngx-gallery-arrows.component.js +1 -1
- package/esm2015/lib/ngx-gallery-bullets/ngx-gallery-bullets.component.js +3 -3
- package/esm2015/lib/ngx-gallery-image/ngx-gallery-image.component.js +3 -3
- package/esm2015/lib/ngx-gallery-preview/ngx-gallery-preview.component.js +3 -3
- package/esm2015/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.js +3 -3
- package/esm2015/lib/ngx-gallery-video/ngx-gallery-video.component.js +21 -18
- package/esm2015/lib/ngx-gallery.component.js +15 -3
- package/esm2015/lib/svg/ngx-gallery-svg-icon.component.js +1 -1
- package/esm2015/lib/svg/ngx-gallery-svg-polygon.component.js +1 -1
- package/esm2015/lib/utils/ngx-preview-loader.component.js +12 -3
- package/fesm2015/casus-campus-ngx-gallery.js +61 -36
- package/fesm2015/casus-campus-ngx-gallery.js.map +1 -1
- package/lib/ngx-gallery-video/ngx-gallery-video.component.d.ts +2 -1
- package/lib/ngx-gallery.component.d.ts +1 -0
- package/lib/utils/ngx-preview-loader.component.d.ts +2 -0
- package/package.json +7 -7
- package/bundles/casus-campus-ngx-gallery.umd.min.js +0 -2
- package/bundles/casus-campus-ngx-gallery.umd.min.js.map +0 -1
|
@@ -4,6 +4,28 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['casus-campus'] = global['casus-campus'] || {}, global['casus-campus']['ngx-gallery'] = {}), global.ng.common, global.ng.core, global.ng.platformBrowser, global['@casus-campus/cc-support'], global.rxjs, global.rxjs.operators));
|
|
5
5
|
}(this, (function (exports, common, i0, platformBrowser, ccSupport, rxjs, operators) { 'use strict';
|
|
6
6
|
|
|
7
|
+
function _interopNamespace(e) {
|
|
8
|
+
if (e && e.__esModule) return e;
|
|
9
|
+
var n = Object.create(null);
|
|
10
|
+
if (e) {
|
|
11
|
+
Object.keys(e).forEach(function (k) {
|
|
12
|
+
if (k !== 'default') {
|
|
13
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () {
|
|
17
|
+
return e[k];
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
n['default'] = e;
|
|
24
|
+
return Object.freeze(n);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
28
|
+
|
|
7
29
|
// TODO refactor to interface
|
|
8
30
|
var Arrow = /** @class */ (function () {
|
|
9
31
|
function Arrow(startP, endP, color) {
|
|
@@ -399,11 +421,11 @@
|
|
|
399
421
|
return this.points;
|
|
400
422
|
};
|
|
401
423
|
Polygon.prototype.getSVGPoints = function () {
|
|
402
|
-
return
|
|
424
|
+
return __spreadArray([this.points[0]], __read(this.points)).map(function (point) { return point.getPosX() + ',' + point.getPosY(); })
|
|
403
425
|
.join(' ');
|
|
404
426
|
};
|
|
405
427
|
Polygon.prototype.getSVGPointsPolyline = function () {
|
|
406
|
-
return
|
|
428
|
+
return __spreadArray(__spreadArray([this.points[0]], __read(this.points)), [this.points[0]]).map(function (point) { return point.getPosX() + ',' + point.getPosY(); })
|
|
407
429
|
.join(' ');
|
|
408
430
|
};
|
|
409
431
|
Polygon.prototype.getText = function () {
|
|
@@ -426,7 +448,7 @@
|
|
|
426
448
|
};
|
|
427
449
|
return LogService;
|
|
428
450
|
}());
|
|
429
|
-
LogService.ɵprov =
|
|
451
|
+
LogService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LogService_Factory() { return new LogService(); }, token: LogService, providedIn: "root" });
|
|
430
452
|
LogService.decorators = [
|
|
431
453
|
{ type: i0.Injectable, args: [{
|
|
432
454
|
providedIn: 'root',
|
|
@@ -709,7 +731,7 @@
|
|
|
709
731
|
/* eslint-disable @angular-eslint/component-selector */
|
|
710
732
|
selector: 'cc-imagesvg',
|
|
711
733
|
template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"xMidYMid meet\"\n [attr.width]=\"width\" [attr.height]=\"height\" [attr.viewBox]=\"viewBox\" class=\"ngx-gallery-center\"\n [class.animation]=\"animation\" [class.ngx-gallery-preview-svg]=\"preview\" [class.ngx-gallery-image-svg]=\"!preview\"\n [class.ngx-gallery-grab]=\"classGrab\" [style.transform]=\"styleTransform\" [style.left]=\"posLeft\" [style.top]=\"posTop\"\n (click)=\"$event.stopPropagation()\" #svgElement>\n <svg:g *ngIf=\"!!svgArrows.length\" svg-arrow [svgArrows]=\"svgArrows\"></svg:g>\n <svg:g *ngIf=\"!!svgPolygons.length\" svg-polygon [svgPolygons]=\"svgPolygons\"></svg:g>\n <svg:g *ngIf=\"!!svgIcons.length\" svg-icon [svgIcons]=\"svgIcons\" [scaleFactor]=\"scaleFactor\"></svg:g>\n <svg:g *ngIf=\"!!svgTexts.length\" svg-text [svgTexts]=\"svgTexts\"></svg:g>\n</svg>\n",
|
|
712
|
-
styles: [".ngx-gallery-center{position:absolute;left:0;right:0;bottom:0;margin:auto;top:0}.ngx-gallery-image-svg{margin:0}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}"]
|
|
734
|
+
styles: [".ngx-gallery-center{position:absolute;left:0;right:0;bottom:0;margin:auto;top:0}.ngx-gallery-image-svg{margin:0}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}\n"]
|
|
713
735
|
},] }
|
|
714
736
|
];
|
|
715
737
|
NgxGalleryImageSvgComponent.ctorParameters = function () { return [
|
|
@@ -778,7 +800,7 @@
|
|
|
778
800
|
{ type: i0.Component, args: [{
|
|
779
801
|
selector: 'ngx-gallery-arrows',
|
|
780
802
|
template: "\n <div class=\"ngx-gallery-arrow-wrapper ngx-gallery-arrow-left\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\"\n aria-hidden=\"true\"\n (click)=\"handlePrevClick()\"\n [class.ngx-gallery-disabled]=\"prevDisabled\">\n <i class=\"ngx-gallery-icon-content {{arrowPrevIcon}}\"></i>\n </div>\n </div>\n <div class=\"ngx-gallery-arrow-wrapper ngx-gallery-arrow-right\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\"\n aria-hidden=\"true\"\n (click)=\"handleNextClick()\"\n [class.ngx-gallery-disabled]=\"nextDisabled\">\n <i class=\"ngx-gallery-icon-content {{arrowNextIcon}}\"></i>\n </div>\n </div>\n ",
|
|
781
|
-
styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;z-index:2000;table-layout:fixed}.ngx-gallery-arrow-left{left:
|
|
803
|
+
styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;z-index:2000;table-layout:fixed}.ngx-gallery-arrow-left{left:0px}.ngx-gallery-arrow-right{right:0px}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);background:#ffffff8c;cursor:pointer}.ngx-gallery-arrow.ngx-gallery-disabled{opacity:.6;cursor:default}.ngx-gallery-arrow-left .ngx-gallery-arrow{left:10px}.ngx-gallery-arrow-right .ngx-gallery-arrow{right:10px}\n"]
|
|
782
804
|
},] }
|
|
783
805
|
];
|
|
784
806
|
NgxGalleryArrowsComponent.propDecorators = {
|
|
@@ -806,8 +828,8 @@
|
|
|
806
828
|
NgxGalleryBulletsComponent.decorators = [
|
|
807
829
|
{ type: i0.Component, args: [{
|
|
808
830
|
selector: 'ngx-gallery-bullets',
|
|
809
|
-
template: "\n <div class=\"ngx-gallery-bullet\"\n *ngFor=\"let bullet of getBullets(); let i = index;\" (click)=\"handleChange($event, i)\"\n [ngClass]=\"{ 'ngx-gallery-active': i
|
|
810
|
-
styles: [":host{position:absolute;z-index:2000;display:inline-flex;left:50%;transform:
|
|
831
|
+
template: "\n <div class=\"ngx-gallery-bullet\"\n *ngFor=\"let bullet of getBullets(); let i = index;\" (click)=\"handleChange($event, i)\"\n [ngClass]=\"{ 'ngx-gallery-active': i === active }\">\n </div>\n ",
|
|
832
|
+
styles: [":host{position:absolute;z-index:2000;display:inline-flex;left:50%;transform:translate(-50%);bottom:0px;padding:10px}.ngx-gallery-bullet{width:10px;height:10px;border-radius:50%;cursor:pointer;background:white}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:black}\n"]
|
|
811
833
|
},] }
|
|
812
834
|
];
|
|
813
835
|
NgxGalleryBulletsComponent.propDecorators = {
|
|
@@ -869,7 +891,7 @@
|
|
|
869
891
|
};
|
|
870
892
|
return NgxGalleryHelperService;
|
|
871
893
|
}());
|
|
872
|
-
NgxGalleryHelperService.ɵprov =
|
|
894
|
+
NgxGalleryHelperService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function NgxGalleryHelperService_Factory() { return new NgxGalleryHelperService(i0__namespace.ɵɵinject(i0__namespace.Renderer2)); }, token: NgxGalleryHelperService, providedIn: "root" });
|
|
873
895
|
NgxGalleryHelperService.decorators = [
|
|
874
896
|
{ type: i0.Injectable, args: [{
|
|
875
897
|
providedIn: 'root'
|
|
@@ -1052,8 +1074,8 @@
|
|
|
1052
1074
|
NgxGalleryImageComponent.decorators = [
|
|
1053
1075
|
{ type: i0.Component, args: [{
|
|
1054
1076
|
selector: 'ngx-gallery-image',
|
|
1055
|
-
template: "<div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\"\n *ngFor=\"let image of getImages(); let i = index;\">\n <div class=\"ngx-gallery-image\"\n [ngClass]=\"{\n 'ngx-gallery-active': selectedIndex
|
|
1056
|
-
styles: [":host{width:100%;display:inline-block;position:relative}.ngx-gallery-image-wrapper{
|
|
1077
|
+
template: "<div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\"\n *ngFor=\"let image of getImages(); let i = index;\">\n <div class=\"ngx-gallery-image\"\n [ngClass]=\"{\n 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index,\n 'ngx-gallery-clickable': clickable\n }\"\n *ngIf=\"mtypes[image.index] === 'image' || mtypes[image.index] === 'pdf'\"\n [style.background-image]=\"getSafeUrl(image.src)\"\n [style.background-size]=\"getBackgroundSize(image.index)\"\n (click)=\"handleClick($event, image.index)\" >\n <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n <ng-container *ngFor=\"let action of actions\">\n <ngx-gallery-action\n *ngIf=\"!action.disabled\"\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, image.index)\">\n </ngx-gallery-action>\n </ng-container>\n </div>\n\n <cc-imagesvg\n *ngIf=\"isSVGActive && !!image.addOns.length\"\n [animation]=\"animation\"\n [width]=\"imageWidth[image.index]\"\n [height]=\"imageHeight[image.index]\"\n [viewBox]=\"imageVBox[image.index]\"\n [posLeft]=\"positionX[image.index] + 'px'\"\n [posTop]=\"positionY[image.index] + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"image.addOns\">\n </cc-imagesvg>\n\n <div class=\"ngx-gallery-image-text\"\n *ngIf=\"showDescription && descriptions[image.index]\"\n [innerHTML]=\"descriptions[image.index] | safeHtml\"\n (click)=\"$event.stopPropagation()\">\n </div>\n </div>\n <cc-video\n *ngIf=\"mtypes[image.index] === 'audio' || mtypes[image.index] === 'video'\"\n [selectedIndex]=\"selectedIndex\"\n [image]=\"image\"\n [showDescription]=\"showDescription\"\n [description]=\"showDescription ? descriptions[image.index] : ''\"\n [mediaInfo]=\"mediaInfos[image.index]\"\n></cc-video>\n</div>\n<ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"selectedIndex\" (onChange)=\"show($event)\"></ngx-gallery-bullets>\n<ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\"\n *ngIf=\"arrows\"\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>",
|
|
1078
|
+
styles: [":host{width:100%;display:inline-block;position:relative}.ngx-gallery-image-wrapper{width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0px;border:1px solid #e8e8e8;border-radius:4px;overflow:hidden;background-color:#fff}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-animation-fade .ngx-gallery-image{left:0px;opacity:0;transition:.5s ease-in-out}.ngx-gallery-animation-fade .ngx-gallery-image.ngx-gallery-active{opacity:1}.ngx-gallery-animation-slide .ngx-gallery-image{transition:.5s ease-in-out}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-active{left:0px}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-left{left:-100%}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-right{left:100%}.ngx-gallery-animation-rotate .ngx-gallery-image{transition:1s ease;transform:scale(3.5) rotate(90deg);left:0px;opacity:0}.ngx-gallery-animation-rotate .ngx-gallery-image.ngx-gallery-active{transform:scale(1) rotate(0);opacity:1}.ngx-gallery-animation-zoom .ngx-gallery-image{transition:1s ease;transform:scale(2.5);left:0px;opacity:0}.ngx-gallery-animation-zoom .ngx-gallery-image.ngx-gallery-active{transform:scale(1);opacity:1}.ngx-gallery-image-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0px;z-index:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ngx-gallery-image-text a{color:#fff}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{color:#000}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}\n"]
|
|
1057
1079
|
},] }
|
|
1058
1080
|
];
|
|
1059
1081
|
NgxGalleryImageComponent.ctorParameters = function () { return [
|
|
@@ -1554,8 +1576,8 @@
|
|
|
1554
1576
|
NgxGalleryPreviewComponent.decorators = [
|
|
1555
1577
|
{ type: i0.Component, args: [{
|
|
1556
1578
|
selector: 'ngx-gallery-preview',
|
|
1557
|
-
template: "<ngx-gallery-arrows\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\n\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n <ng-container *ngFor=\"let action of actions\">\n <ngx-gallery-action\n *ngIf=\"!action.disabled\"\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, index)\">\n </ngx-gallery-action>\n </ng-container>\n\n <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n </a>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"! isZoomableOut\" (onClick)=\"zoomOut()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"! isZoomableIn\" (onClick)=\"zoomIn()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (onClick)=\"rotateLeft()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (onClick)=\"rotateRight()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\" (onClick)=\"manageFullscreen()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"mtypes[index] === 'video' && isVideoLowerScreenResolution()\" [icon]=\"fullscreenIcon\" (onClick)=\"fitVideoToScreen = !fitVideoToScreen\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (onClick)=\"close()\"></ngx-gallery-action>\n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n</div>\n\n<ng-container *ngIf=\"mtypes[index] === 'video' || mtypes[index] === 'audio'; then prevVideo; else other\"></ng-container>\n\n<ng-template #other>\n <ng-container *ngIf=\"mtypes[index] === 'campus'; then campus; else img\"></ng-container>\n</ng-template>\n\n<ng-template #campus>\n <iframe *ngIf=\"isOpen\" [src]=\"src\"></iframe>\n</ng-template>\n\n<ng-template #img>\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"closeOnClick && close()\"\n (mouseup)=\"mouseUpHandler($event)\" (mousemove)=\"mouseMoveHandler($event)\"\n (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\"\n\n (click)=\"$event.stopPropagation()\"\n (mouseenter)=\"imageMouseEnter()\"\n (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\"\n (touchstart)=\"mouseDownHandler($event)\"\n >\n <img\n #previewImage\n *ngIf=\"src\"\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n\n [src]=\"src\"\n [class.ngx-gallery-active]=\"!loading\"\n [class.ngx-gallery-grab]=\"canDrag\"\n [style.transform]=\"styleTransform\"\n [style.left]=\"positionLeft + 'px'\"\n [style.top]=\"positionTop + 'px'\"\n\n (click)=\"$event.stopPropagation()\"\n />\n\n <cc-imagesvg\n *ngIf=\"isSVGActive && hasAddOns\"\n [animation]=\"animation\"\n [width]=\"imgWidth\"\n [height]=\"imgHeight\"\n [viewBox]=\"viewBox\"\n [styleTransform]=\"styleTransform\"\n [posLeft]=\"positionLeft + 'px'\"\n [posTop]=\"positionTop + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"ordImages[prevIndex].addOns\"\n [classGrab]=\"canDrag\"\n [preview]=\"true\"\n >\n </cc-imagesvg>\n\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\" (onChange)=\"showAtIndex($event)\">\n </ngx-gallery-bullets>\n\n <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\" (click)=\"$event.stopPropagation()\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #prevVideo>\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"$event.stopPropagation()\">\n <cc-video\n *ngIf=\"isOpen\"\n [selectedIndex]=\"prevIndex\"\n [image]=\"ordImages[prevIndex]\"\n [showDescription]=\"showDescription\"\n [description]=\"descriptions[prevIndex]\"\n [mediaInfo]=\"mediaInfos[prevIndex]\"\n [fitVideoToScreen]=\"fitVideoToScreen\">\n </cc-video>\n </div>\n</ng-template>",
|
|
1558
|
-
styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background
|
|
1579
|
+
template: "<ngx-gallery-arrows\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\n\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n <ng-container *ngFor=\"let action of actions\">\n <ngx-gallery-action\n *ngIf=\"!action.disabled\"\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, index)\">\n </ngx-gallery-action>\n </ng-container>\n\n <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n </a>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"! isZoomableOut\" (onClick)=\"zoomOut()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"! isZoomableIn\" (onClick)=\"zoomIn()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (onClick)=\"rotateLeft()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (onClick)=\"rotateRight()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\" (onClick)=\"manageFullscreen()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"mtypes[index] === 'video' && isVideoLowerScreenResolution()\" [icon]=\"fullscreenIcon\" (onClick)=\"fitVideoToScreen = !fitVideoToScreen\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (onClick)=\"close()\"></ngx-gallery-action>\n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n</div>\n\n<ng-container *ngIf=\"mtypes[index] === 'video' || mtypes[index] === 'audio'; then prevVideo; else other\"></ng-container>\n\n<ng-template #other>\n <ng-container *ngIf=\"mtypes[index] === 'campus'; then campus; else img\"></ng-container>\n</ng-template>\n\n<ng-template #campus>\n <iframe *ngIf=\"isOpen\" [src]=\"src\"></iframe>\n</ng-template>\n\n<ng-template #img>\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"closeOnClick && close()\"\n (mouseup)=\"mouseUpHandler($event)\" (mousemove)=\"mouseMoveHandler($event)\"\n (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\"\n\n (click)=\"$event.stopPropagation()\"\n (mouseenter)=\"imageMouseEnter()\"\n (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\"\n (touchstart)=\"mouseDownHandler($event)\"\n >\n <img\n #previewImage\n *ngIf=\"src\"\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n\n [src]=\"src\"\n [class.ngx-gallery-active]=\"!loading\"\n [class.ngx-gallery-grab]=\"canDrag\"\n [style.transform]=\"styleTransform\"\n [style.left]=\"positionLeft + 'px'\"\n [style.top]=\"positionTop + 'px'\"\n\n (click)=\"$event.stopPropagation()\"\n />\n\n <cc-imagesvg\n *ngIf=\"isSVGActive && hasAddOns\"\n [animation]=\"animation\"\n [width]=\"imgWidth\"\n [height]=\"imgHeight\"\n [viewBox]=\"viewBox\"\n [styleTransform]=\"styleTransform\"\n [posLeft]=\"positionLeft + 'px'\"\n [posTop]=\"positionTop + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"ordImages[prevIndex].addOns\"\n [classGrab]=\"canDrag\"\n [preview]=\"true\"\n >\n </cc-imagesvg>\n\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\" (onChange)=\"showAtIndex($event)\">\n </ngx-gallery-bullets>\n\n <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description | safeHtml\" (click)=\"$event.stopPropagation()\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #prevVideo>\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"$event.stopPropagation()\">\n <cc-video\n *ngIf=\"isOpen\"\n [selectedIndex]=\"prevIndex\"\n [image]=\"ordImages[prevIndex]\"\n [showDescription]=\"showDescription\"\n [description]=\"descriptions[prevIndex]\"\n [mediaInfo]=\"mediaInfos[prevIndex]\"\n [fitVideoToScreen]=\"fitVideoToScreen\">\n </cc-video>\n </div>\n</ng-template>",
|
|
1580
|
+
styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background:white;z-index:1000;display:inline-block}:host{display:none}:host ::ng-deep .ngx-gallery-arrow{font-size:50px}:host ::ng-deep ngx-gallery-bullets{height:5%;align-items:center;padding:0}.ngx-gallery-preview-img{opacity:0;max-width:90%;max-height:90%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.ngx-gallery-active{opacity:1}.ngx-gallery-preview-img.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}.ngx-gallery-icon.ngx-gallery-spinner{font-size:50px;left:0;display:inline-block}:host ::ng-deep .ngx-gallery-preview-top{position:absolute;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}:host ::ng-deep .ngx-gallery-preview-icons{float:right;padding:0 0 15px 20px;background:#ffffff8c}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon{position:relative;margin-right:20px!important;margin-top:15px!important;font-size:25px;cursor:pointer;text-decoration:none}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}.ngx-spinner-wrapper{width:50px;height:50px;display:none}.ngx-spinner-wrapper.ngx-gallery-active{display:inline-block}.ngx-gallery-center{position:absolute;left:0;right:0;bottom:0;margin:auto;top:0}.ngx-gallery-preview-text{position:absolute;bottom:0;width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;flex:0 1 auto;z-index:10}:host ::ng-deep .ngx-gallery-preview-text a{color:#fff}.ngx-gallery-preview-wrapper{width:100%;height:100%;display:flex;flex-flow:column}.ngx-gallery-preview-img-wrapper{flex:1 1 auto;position:relative}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}body{margin:0}iframe{display:block;background:#000;border:none;height:100vh;width:100vw}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0px}\n"]
|
|
1559
1581
|
},] }
|
|
1560
1582
|
];
|
|
1561
1583
|
NgxGalleryPreviewComponent.ctorParameters = function () { return [
|
|
@@ -1851,8 +1873,8 @@
|
|
|
1851
1873
|
NgxGalleryThumbnailsComponent.decorators = [
|
|
1852
1874
|
{ type: i0.Component, args: [{
|
|
1853
1875
|
selector: 'ngx-gallery-thumbnails',
|
|
1854
|
-
template: "<div class=\"ngx-gallery-thumbnails-wrapper ngx-gallery-thumbnail-size-{{size}}\">\n <div class=\"ngx-gallery-thumbnails\"\n [style.transform]=\"'translateX(' + thumbnailsLeft + ')'\"\n [style.marginLeft]=\"thumbnailsMarginLeft\">\n <a *ngFor=\"let image of getImages(); let i = index;\"\n [ngClass]=\"{ 'ngx-gallery-active': i
|
|
1855
|
-
styles: [":host{width:100%;display:inline-block;position:relative;z-index:1;margin-top:15px!important}.ngx-gallery-thumbnails-wrapper{width:100%;height:100%;position:absolute;overflow:hidden}.ngx-gallery-thumbnails-wrapper .ngx-gallery-thumbnail{border:1px solid #e8e8e8;border-radius:4px;overflow:hidden}.ngx-gallery-thumbnails{height:100%;width:100%;position:absolute;left:
|
|
1876
|
+
template: "<div class=\"ngx-gallery-thumbnails-wrapper ngx-gallery-thumbnail-size-{{size}}\">\n <div class=\"ngx-gallery-thumbnails\"\n [style.transform]=\"'translateX(' + thumbnailsLeft + ')'\"\n [style.marginLeft]=\"thumbnailsMarginLeft\">\n <a *ngFor=\"let image of getImages(); let i = index;\"\n [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\n (click)=\"handleClick($event, i)\"\n [href]=\"hasLink(i) ? links[i] : '#'\"\n [target]=\"linkTarget\" class=\"ngx-gallery-thumbnail\"\n [style.background-image]=\"getSafeUrl(image)\"\n [style.width]=\"getThumbnailWidth()\"\n [style.height]=\"getThumbnailHeight()\"\n [style.left]=\"getThumbnailLeft(i)\"\n [style.top]=\"getThumbnailTop(i)\"\n [attr.aria-label]=\"labels[i]\">\n <div class=\"ngx-gallery-icons-wrapper\">\n <ngx-gallery-action *ngFor=\"let action of actions\"\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, i)\">\n </ngx-gallery-action>\n </div>\n <div class=\"ngx-gallery-remaining-count-overlay\"\n *ngIf=\"remainingCount && remainingCountValue && (i === (rows * columns) - 1)\">\n <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\n </div>\n </a>\n </div>\n</div>\n<ngx-gallery-arrows *ngIf=\"canShowArrows()\"\n (onPrevClick)=\"moveLeft()\"\n (onNextClick)=\"moveRight()\"\n [prevDisabled]=\"!canMoveLeft()\"\n [nextDisabled]=\"!canMoveRight()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\n",
|
|
1877
|
+
styles: [":host{width:100%;display:inline-block;position:relative;z-index:1;margin-top:15px!important}.ngx-gallery-thumbnails-wrapper{width:100%;height:100%;position:absolute;overflow:hidden}.ngx-gallery-thumbnails-wrapper .ngx-gallery-thumbnail{border:1px solid #e8e8e8;border-radius:4px;overflow:hidden}.ngx-gallery-thumbnails{height:100%;width:100%;position:absolute;left:0px;transform:translate(0);transition:transform .5s ease-in-out;will-change:transform}.ngx-gallery-thumbnails .ngx-gallery-thumbnail{position:absolute;height:100%;background-position:center;background-repeat:no-repeat;text-decoration:none;background-color:#fff}.ngx-gallery-thumbnail-size-cover .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:cover}.ngx-gallery-thumbnail-size-contain .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:contain}.ngx-gallery-remaining-count-overlay{width:100%;height:100%;position:absolute;left:0px;top:0px;background-color:#0006}.ngx-gallery-remaining-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:30px}\n"]
|
|
1856
1878
|
},] }
|
|
1857
1879
|
];
|
|
1858
1880
|
NgxGalleryThumbnailsComponent.ctorParameters = function () { return [
|
|
@@ -1890,30 +1912,33 @@
|
|
|
1890
1912
|
};
|
|
1891
1913
|
|
|
1892
1914
|
var NgxGalleryVideoComponent = /** @class */ (function () {
|
|
1893
|
-
// constructor(private sanitization: DomSanitizer, private logService: LogService) {}
|
|
1894
1915
|
function NgxGalleryVideoComponent(sanitization, logService) {
|
|
1895
1916
|
this.sanitization = sanitization;
|
|
1896
1917
|
this.logService = logService;
|
|
1897
1918
|
}
|
|
1898
1919
|
NgxGalleryVideoComponent.prototype.ngOnInit = function () {
|
|
1899
|
-
this.width = this.mediaInfo['width'];
|
|
1900
|
-
this.height = this.mediaInfo['height'];
|
|
1901
|
-
var widthRatio = window.innerWidth / this.width;
|
|
1902
|
-
var heightRatio = window.innerHeight / this.height;
|
|
1903
|
-
this.bestFitRatio = Math.min(widthRatio, heightRatio);
|
|
1904
|
-
if (this.fitVideoToScreen) {
|
|
1905
|
-
this.width *= this.bestFitRatio;
|
|
1906
|
-
this.height *= this.bestFitRatio;
|
|
1907
|
-
}
|
|
1908
1920
|
this.logService.log('NgxGalleryVideoComponent.ngOnInit', 'starts ...');
|
|
1921
|
+
this.updateDimensions();
|
|
1909
1922
|
};
|
|
1910
1923
|
NgxGalleryVideoComponent.prototype.ngOnChanges = function () {
|
|
1911
1924
|
this.logService.log('NgxGalleryVideoComponent.onChange', 'starts ...');
|
|
1912
|
-
this.
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
this.
|
|
1925
|
+
this.updateDimensions();
|
|
1926
|
+
};
|
|
1927
|
+
NgxGalleryVideoComponent.prototype.updateDimensions = function () {
|
|
1928
|
+
if (this.mediaInfo['type'].startsWith('video')) {
|
|
1929
|
+
this.width = this.mediaInfo['width'];
|
|
1930
|
+
this.height = this.mediaInfo['height'];
|
|
1931
|
+
this.mediaAlignment = 'center';
|
|
1932
|
+
var widthRatio = window.innerWidth / this.width;
|
|
1933
|
+
var heightRatio = window.innerHeight / this.height;
|
|
1934
|
+
var bestFitRatio = Math.min(widthRatio, heightRatio);
|
|
1935
|
+
if (this.fitVideoToScreen) {
|
|
1936
|
+
this.width *= bestFitRatio;
|
|
1937
|
+
this.height *= bestFitRatio;
|
|
1938
|
+
}
|
|
1939
|
+
}
|
|
1940
|
+
else {
|
|
1941
|
+
this.width = this.height = this.mediaAlignment = null;
|
|
1917
1942
|
}
|
|
1918
1943
|
};
|
|
1919
1944
|
NgxGalleryVideoComponent.prototype.getSafeVideoUrl = function (video) {
|
|
@@ -1928,8 +1953,8 @@
|
|
|
1928
1953
|
{ type: i0.Component, args: [{
|
|
1929
1954
|
/* eslint-disable @angular-eslint/component-selector */
|
|
1930
1955
|
selector: 'cc-video',
|
|
1931
|
-
template: "<div class=\"ngx-gallery-image\" [ngClass]=\"{ 'ngx-gallery-active': selectedIndex
|
|
1932
|
-
styles: [".ngx-gallery-image{display:flex;justify-content:center;
|
|
1956
|
+
template: "<div class=\"ngx-gallery-image\" [ngClass]=\"{ 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index}\"\n [style.align-items]=\"mediaAlignment\">\n <ng-container *ngIf=\"selectedIndex === image.index\">\n <div id=\"player_{{image.id}}\" class=\"player\" title=\"{{showDescription && description ? description : ''}}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n\n <video #mmelement [width]=\"mediaInfo['bwidth']\" [height]=\"mediaInfo['bheight']\"\n title=\"{{showDescription && description ? description : ''}}\" poster=\"{{image.poster}}\"\n autoplay=\"{{image.autoplay ? 'autoplay': ''}}\">\n <ng-container *ngFor=\"let url of image.urls; let i = index\">\n <source [src]=\"getSafeVideoUrl(url.url)\" type=\"{{url.mimeType}}\">\n </ng-container>\n </video>\n <!--\n ratio: 9/10,\n\n // old configured ratio ...\n ratio: {{mediaInfo && mediaInfo ? mediaInfo[\"bwidth\"] / mediaInfo[\"bheight\"] : 1 }},\n -->\n <script-js>\n $(function () {{ '{' }}\n $('#player_{{image.id}}').flowplayer({{ '{' }}\n chromecast: false,\n ratio: 9 / 10,\n title: '{{showDescription && description ? description : ''}}',\n loop: {{image.loop || false }},\n embed: {{ '{' }}\n skin: \"node_modules/flowplayer/dist/skin/skin.css\"\n },\n onBeforeFinish: function(){{ '{' }}\n return false;\n }\n });\n });\n </script-js>\n </div>\n </ng-container>\n <div class=\"ngx-gallery-video-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\">\n </div>\n</div>\n",
|
|
1957
|
+
styles: [".ngx-gallery-image{display:flex;justify-content:center;background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0px;background-color:#fff}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-video-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0px;z-index:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-gallery-video-text-old{width:100%;height:5%;padding:10px;text-align:center;font-size:16px;bottom:0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flowplayer{max-height:95%}video{-o-object-fit:contain;object-fit:contain}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{color:#000}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}\n"]
|
|
1933
1958
|
},] }
|
|
1934
1959
|
];
|
|
1935
1960
|
NgxGalleryVideoComponent.ctorParameters = function () { return [
|
|
@@ -1993,7 +2018,7 @@
|
|
|
1993
2018
|
breakpoint: 1100,
|
|
1994
2019
|
thumbnailsColumns: 2,
|
|
1995
2020
|
thumbnailsMoveSize: 2,
|
|
1996
|
-
image: false,
|
|
2021
|
+
image: false, // small screens - do not show image
|
|
1997
2022
|
};
|
|
1998
2023
|
this.numberOfMedia = initialNumberOfMedia;
|
|
1999
2024
|
this.originalOptions = initialOptions;
|
|
@@ -2232,6 +2257,7 @@
|
|
|
2232
2257
|
this.onOpen = new i0.EventEmitter();
|
|
2233
2258
|
this.onClose = new i0.EventEmitter();
|
|
2234
2259
|
this.onActiveChange = new i0.EventEmitter();
|
|
2260
|
+
this.domRefs = [];
|
|
2235
2261
|
}
|
|
2236
2262
|
PreviewLoaderComponent.prototype.ngOnChanges = function (changes) {
|
|
2237
2263
|
var _this = this;
|
|
@@ -2296,11 +2322,12 @@
|
|
|
2296
2322
|
_this.onOpen.emit(event);
|
|
2297
2323
|
});
|
|
2298
2324
|
this.componentRef.instance.onClose.subscribe(function (event) {
|
|
2299
|
-
_this.onClose.emit(event);
|
|
2300
2325
|
_this.appRef.detachView(_this.componentRef.hostView);
|
|
2301
2326
|
_this.componentRef.destroy();
|
|
2327
|
+
_this.onClose.emit();
|
|
2302
2328
|
});
|
|
2303
2329
|
this.componentRef.instance.onActiveChange.subscribe(function (event) {
|
|
2330
|
+
_this.prevIndex = event;
|
|
2304
2331
|
_this.onActiveChange.emit(event);
|
|
2305
2332
|
});
|
|
2306
2333
|
if (this.isActive) {
|
|
@@ -2315,6 +2342,7 @@
|
|
|
2315
2342
|
this.componentRef = factory.create(this.injector);
|
|
2316
2343
|
this.appRef.attachView(this.componentRef.hostView);
|
|
2317
2344
|
var domElem = this.componentRef.hostView.rootNodes[0];
|
|
2345
|
+
this.domRefs.push(domElem);
|
|
2318
2346
|
var cdkOverlayContainers = document.getElementsByClassName('cdk-overlay-container');
|
|
2319
2347
|
var parentElement;
|
|
2320
2348
|
if (cdkOverlayContainers && cdkOverlayContainers.length) {
|
|
@@ -2325,13 +2353,19 @@
|
|
|
2325
2353
|
}
|
|
2326
2354
|
parentElement.appendChild(domElem);
|
|
2327
2355
|
};
|
|
2356
|
+
PreviewLoaderComponent.prototype.closePreview = function () {
|
|
2357
|
+
this.domRefs.forEach(function (domRef) {
|
|
2358
|
+
domRef.remove();
|
|
2359
|
+
});
|
|
2360
|
+
this.domRefs = [];
|
|
2361
|
+
};
|
|
2328
2362
|
return PreviewLoaderComponent;
|
|
2329
2363
|
}());
|
|
2330
2364
|
PreviewLoaderComponent.decorators = [
|
|
2331
2365
|
{ type: i0.Component, args: [{
|
|
2332
2366
|
selector: 'ngx-gallery-preview-loader',
|
|
2333
2367
|
template: "",
|
|
2334
|
-
styles: ["::ng-deep *{box-sizing:border-box}::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;z-index:1000;display:inline-block}::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:15px!important;margin-top:10px!important;font-size:20px;cursor:pointer}::ng-deep .ngx-gallery-icons-wrapper{float:right}"]
|
|
2368
|
+
styles: ["::ng-deep *{box-sizing:border-box}::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;z-index:1000;display:inline-block}::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:15px!important;margin-top:10px!important;font-size:20px;cursor:pointer}::ng-deep .ngx-gallery-icons-wrapper{float:right}\n"]
|
|
2335
2369
|
},] }
|
|
2336
2370
|
];
|
|
2337
2371
|
PreviewLoaderComponent.ctorParameters = function () { return [
|
|
@@ -2429,6 +2463,7 @@
|
|
|
2429
2463
|
this.breakpoint = undefined;
|
|
2430
2464
|
this.prevBreakpoint = undefined;
|
|
2431
2465
|
this.subscriptions = [];
|
|
2466
|
+
this.previewsOpened = [];
|
|
2432
2467
|
}
|
|
2433
2468
|
NgxGalleryComponent.prototype.ngOnInit = function () {
|
|
2434
2469
|
var _this = this;
|
|
@@ -2531,6 +2566,7 @@
|
|
|
2531
2566
|
this.logService.log('NgxGalleryComponent.openPreview(' + this.name + ')', 'preview called ...');
|
|
2532
2567
|
// TODO: do we need
|
|
2533
2568
|
this.prevIndex = index;
|
|
2569
|
+
this.previewsOpened.push(index);
|
|
2534
2570
|
this.previewLoader.loadPreview();
|
|
2535
2571
|
}
|
|
2536
2572
|
else {
|
|
@@ -2553,6 +2589,16 @@
|
|
|
2553
2589
|
this.styleBox = this.currentOptions.ccpBoxLayout;
|
|
2554
2590
|
this.logService.log('NgxGalleryComponent.onPreviewClose(' + this.name + ')', 'previewEnabled: ' + this.previewEnabled);
|
|
2555
2591
|
this.previewClose.emit();
|
|
2592
|
+
this.previewsOpened.pop();
|
|
2593
|
+
if (this.previewsOpened.length >= 1) {
|
|
2594
|
+
/*Reopens the nested preview to avoid a wrong initialisation of its actions,
|
|
2595
|
+
otherwise those would still refer to the already closed preview.*/
|
|
2596
|
+
this.openPreview(this.previewsOpened.pop());
|
|
2597
|
+
this.previewOpen.emit();
|
|
2598
|
+
}
|
|
2599
|
+
else {
|
|
2600
|
+
this.previewLoader.closePreview();
|
|
2601
|
+
}
|
|
2556
2602
|
if (this.image && this.image.autoPlay) {
|
|
2557
2603
|
this.image.startAutoPlay();
|
|
2558
2604
|
}
|
|
@@ -2770,9 +2816,9 @@
|
|
|
2770
2816
|
this.logService.log('NgxGalleryComponent.setBreakpoint(' + this.name + ')', 'breakpoint - ' + this.breakpoint);
|
|
2771
2817
|
};
|
|
2772
2818
|
NgxGalleryComponent.prototype.sortOptions = function () {
|
|
2773
|
-
this.options =
|
|
2819
|
+
this.options = __spreadArray(__spreadArray([], __read(this.options.filter(function (a) { return a.breakpoint === undefined; }))), __read(this.options
|
|
2774
2820
|
.filter(function (a) { return a.breakpoint !== undefined; })
|
|
2775
|
-
.sort(function (a, b) { return b.breakpoint - a.breakpoint; }));
|
|
2821
|
+
.sort(function (a, b) { return b.breakpoint - a.breakpoint; })));
|
|
2776
2822
|
};
|
|
2777
2823
|
NgxGalleryComponent.prototype.setOptions = function () {
|
|
2778
2824
|
var _this = this;
|
|
@@ -2894,7 +2940,7 @@
|
|
|
2894
2940
|
selector: 'ngx-gallery',
|
|
2895
2941
|
template: "\n<div class=\"ngx-gallery-layout {{currentOptions?.layout}}\" [class.preview-only]=\"!currentOptions?.image\" [ngStyle]=\"styleBox\">\n <!--\n currently resizing window does NOT lead to a resize event, if external video in an iframe is shown\n problem: maximizing and minimizing the video would not be possible!\n -->\n <ng-container *ngIf=\"ccMediaService.isExternalVideo(types[selectedIndex]); else onResizeTmpl\">\n </ng-container>\n\n <ng-template #onResizeTmpl>\n <div (window:resize)=\"onResize($event)\"></div>\n </ng-template>\n\n <ngx-gallery-image *ngIf=\"currentOptions?.image\"\n [name]=\"name\"\n [style.height]=\"getImageHeight()\"\n [images]=\"mediumImages\"\n [imageWidth]=\"imageWidth\"\n [imageHeight]=\"imageHeight\"\n [imageVBox]=\"imageVBox\"\n [hasVideo]=\"hasVideo\"\n [positionX]=\"positionX\"\n [positionY]=\"positionY\"\n [links]=\"currentOptions?.ccpImageAsLink ? links : []\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [mediaInfos]=\"mediaInfos\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [isSVGActive]=\"isSVGActive\"\n [clickable]=\"currentOptions?.preview\"\n [selectedIndex]=\"selectedIndex\"\n [arrows]=\"currentOptions?.imageArrows\"\n [arrowsAutoHide]=\"currentOptions?.imageArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [swipe]=\"currentOptions?.imageSwipe\"\n [animation]=\"currentOptions?.imageAnimation\"\n [size]=\"currentOptions?.imageSize\"\n [autoPlay]=\"currentOptions?.imageAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.imageAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.imageAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.imageInfinityMove\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.imageActions\"\n [descriptions]=\"descriptions\"\n [showDescription]=\"currentOptions?.imageDescription\"\n [bullets]=\"currentOptions?.imageBullets\"\n (onClick)=\"openPreview($event)\"\n (onActiveChange)=\"selectFromImage($event)\">\n </ngx-gallery-image>\n\n <ngx-gallery-thumbnails\n *ngIf=\"currentOptions?.thumbnails\" [style.marginTop]=\"getThumbnailsMarginTop()\"\n [name]=\"name\"\n [style.marginBottom]=\"getThumbnailsMarginBottom()\"\n [style.height]=\"getThumbnailsHeight()\"\n [images]=\"smallImages\"\n [links]=\"currentOptions?.thumbnailsAsLinks ? links : []\"\n [labels]=\"labels\" [linkTarget]=\"currentOptions?.linkTarget\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [selectedIndex]=\"selectedIndex\"\n [columns]=\"currentOptions?.thumbnailsColumns\"\n [rows]=\"currentOptions?.thumbnailsRows\"\n [margin]=\"currentOptions?.thumbnailMargin\"\n [arrows]=\"currentOptions?.thumbnailsArrows\"\n [arrowsAutoHide]=\"currentOptions?.thumbnailsArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [clickable]=\"currentOptions?.image || currentOptions?.preview\"\n [swipe]=\"currentOptions?.thumbnailsSwipe\"\n [size]=\"currentOptions?.thumbnailSize\"\n [moveSize]=\"currentOptions?.thumbnailsMoveSize\"\n [order]=\"currentOptions?.thumbnailsOrder\"\n [remainingCount]=\"currentOptions?.thumbnailsRemainingCount\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.thumbnailActions\"\n (onActiveChange)=\"selectFromThumbnails($event)\">\n </ngx-gallery-thumbnails>\n\n <ngx-gallery-preview-loader\n #previewLoader\n [name]=\"name\"\n [prevIndex]=\"prevIndex\"\n [images]=\"bigImages\"\n [ordImages]=\"mediumImages\"\n [mediaInfos]=\"mediaInfos\"\n [links]=\"currentOptions?.ccpPreviewImageAsLink ? links : []\"\n [descriptions]=\"descriptions\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [showDescription]=\"currentOptions?.previewDescription\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [closeIcon]=\"currentOptions?.closeIcon\"\n [fullscreenIcon]=\"currentOptions?.fullscreenIcon\"\n [spinnerIcon]=\"currentOptions?.spinnerIcon\"\n [swipe]=\"currentOptions?.previewSwipe\"\n [fullscreen]=\"currentOptions?.previewFullscreen\"\n [forceFullscreen]=\"currentOptions?.previewForceFullscreen\"\n [closeOnClick]=\"currentOptions?.previewCloseOnClick\"\n [closeOnEsc]=\"currentOptions?.previewCloseOnEsc\"\n [keyboardNavigation]=\"currentOptions?.previewKeyboardNavigation\"\n [animation]=\"currentOptions?.previewAnimation\"\n [autoPlay]=\"currentOptions?.previewAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.previewAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.previewAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.previewInfinityMove\"\n [isSVGActive]=\"isSVGActive\"\n [zoom]=\"currentOptions?.previewZoom\" [zoomStep]=\"currentOptions?.previewZoomStep\"\n [zoomMax]=\"currentOptions?.previewZoomMax\" [zoomMin]=\"currentOptions?.previewZoomMin\"\n [zoomInIcon]=\"currentOptions?.zoomInIcon\" [zoomOutIcon]=\"currentOptions?.zoomOutIcon\"\n [actions]=\"currentOptions?.actions\"\n [rotate]=\"currentOptions?.previewRotate\"\n [rotateLeftIcon]=\"currentOptions?.rotateLeftIcon\"\n [rotateRightIcon]=\"currentOptions?.rotateRightIcon\"\n [download]=\"currentOptions?.previewDownload\"\n [downloadIcon]=\"currentOptions?.downloadIcon\"\n [bullets]=\"currentOptions?.previewBullets\"\n (onClose)=\"onPreviewClose()\" (onOpen)=\"onPreviewOpen()\"\n (onActiveChange)=\"previewSelect($event)\"\n [isActive]=\"previewEnabled\">\n </ngx-gallery-preview-loader>\n</div>",
|
|
2896
2942
|
providers: [NgxGalleryHelperService, CcMediaService],
|
|
2897
|
-
styles: [":host{display:inline-block}:host>*{float:left}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;z-index:2000;display:inline-block}:host ::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}:host ::ng-deep .ngx-gallery-clickable{cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:5px;margin-top:5px;font-size:20px;cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper{float:right}:host ::ng-deep ngx-gallery-thumbnails .ngx-gallery-arrow{border-radius:80%;padding:4px;background-color:#fff}:host .ngx-gallery-layout{width:100%;height:100%;display:flex;flex-direction:column}:host .ngx-gallery-layout:not(.preview-only){border:1px solid #e8e8e8!important;box-shadow:0 2px 1px -1px
|
|
2943
|
+
styles: [":host{display:inline-block}:host>*{float:left}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;z-index:2000;display:inline-block}:host ::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}:host ::ng-deep .ngx-gallery-clickable{cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:5px;margin-top:5px;font-size:20px;cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper{float:right}:host ::ng-deep ngx-gallery-thumbnails .ngx-gallery-arrow{border-radius:80%;padding:4px;background-color:#fff}:host .ngx-gallery-layout{width:100%;height:100%;display:flex;flex-direction:column}:host .ngx-gallery-layout:not(.preview-only){border:1px solid #e8e8e8!important;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f!important;border-radius:4px;background-color:#fafafa!important;padding:8px 11px!important}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-image{order:2}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-thumbnails{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-image{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-thumbnails{order:2}\n"]
|
|
2898
2944
|
},] }
|
|
2899
2945
|
];
|
|
2900
2946
|
NgxGalleryComponent.ctorParameters = function () { return [
|
|
@@ -2983,7 +3029,7 @@
|
|
|
2983
3029
|
/* eslint-disable @angular-eslint/component-selector */
|
|
2984
3030
|
selector: '[svg-icon]',
|
|
2985
3031
|
template: "<svg:g *ngFor=\"let svgIcon of svgIcons; let i = index\">\n <svg:rect class=\"ngx-gallery-svg-icon-bg\" [attr.x]=\"svgIcon.getPoint().getPosX()\"\n [attr.y]=\"svgIcon.getPoint().getPosY()\" rx=\"2\" ry=\"2\" [attr.width]=\"widths[i]\" [attr.height]=\"heights[i]\"\n fill=\"white\" [attr.stroke]=\"svgIcon.getColor()\" [attr.stroke-width]=\"2 * scaleFactor\">\n </svg:rect>\n <svg:a class=\"ngx-gallery-svg-icon\" (click)=\"open($event, svgIcon)\">\n <svg:image [attr.xlink:href]=\"svgIcon.getIconImageUrl()\" [attr.x]=\"svgIcon.getPoint().getPosX() + 1\"\n [attr.y]=\"svgIcon.getPoint().getPosY() + 1\" [attr.height]=\"heights[i] - 2\" [attr.width]=\"widths[i] - 2\">\n <!--<svg:title>{{ svgIcon.getDescription() }}</svg:title>-->\n </svg:image>\n </svg:a>\n</svg:g>\n",
|
|
2986
|
-
styles: [".ngx-gallery-svg-icon{cursor:pointer}.ngx-gallery-svg-icon-bg{cursor:pointer;fill-opacity:.5}g:hover .ngx-gallery-svg-icon-bg{fill-opacity:.7}"]
|
|
3032
|
+
styles: [".ngx-gallery-svg-icon{cursor:pointer}.ngx-gallery-svg-icon-bg{cursor:pointer;fill-opacity:.5}g:hover .ngx-gallery-svg-icon-bg{fill-opacity:.7}\n"]
|
|
2987
3033
|
},] }
|
|
2988
3034
|
];
|
|
2989
3035
|
NgxGallerySvgIconComponent.ctorParameters = function () { return [
|
|
@@ -3019,7 +3065,7 @@
|
|
|
3019
3065
|
/* eslint-disable @angular-eslint/component-selector */
|
|
3020
3066
|
selector: '[svg-polygon]',
|
|
3021
3067
|
template: "<ng-container *ngFor=\"let svgPolygon of svgPolygons;\">\n <svg:a (click)=\"open($event, svgPolygon)\">\n <svg:polygon [attr.points]=\"svgPolygon.getSVGPoints()\" [attr.fill]=\"svgPolygon.getColor()\"\n [attr.stroke]=\"svgPolygon.getColor()\" class=\"ngx-gallery-svg-polygon\">\n </svg:polygon>\n </svg:a>\n</ng-container>\n",
|
|
3022
|
-
styles: [".ngx-gallery-svg-polygon{fill-opacity:.1;transition:fill-opacity .2s;stroke-width:2;stroke-opacity:1;cursor:pointer}.ngx-gallery-svg-polygon:hover{fill-opacity:.5}"]
|
|
3068
|
+
styles: [".ngx-gallery-svg-polygon{fill-opacity:.1;transition:fill-opacity .2s;stroke-width:2;stroke-opacity:1;cursor:pointer}.ngx-gallery-svg-polygon:hover{fill-opacity:.5}\n"]
|
|
3023
3069
|
},] }
|
|
3024
3070
|
];
|
|
3025
3071
|
NgxGallerySvgPolygonComponent.ctorParameters = function () { return [
|
|
@@ -3060,7 +3106,7 @@
|
|
|
3060
3106
|
var CustomHammerConfig = /** @class */ (function (_super) {
|
|
3061
3107
|
__extends(CustomHammerConfig, _super);
|
|
3062
3108
|
function CustomHammerConfig() {
|
|
3063
|
-
var _this = _super.apply(this,
|
|
3109
|
+
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
|
|
3064
3110
|
_this.overrides = {
|
|
3065
3111
|
pinch: { enable: false },
|
|
3066
3112
|
rotate: { enable: false }
|