ngx-academia-uniandes-library
Version:
This library is used for Academia-Uniandes system.
96 lines • 7.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var file_select_service_1 = require("../file-select/file-select/file-select.service");
var core_2 = require("@ngx-translate/core");
var sweetalert2_1 = require("sweetalert2");
var PhotoGalleryFileInfoComponent = /** @class */ (function () {
function PhotoGalleryFileInfoComponent(cd, fileService, translate) {
this.cd = cd;
this.fileService = fileService;
this.translate = translate;
this.slides = [];
this.slideRemoved = new core_1.EventEmitter();
this.currentIndex = 0;
}
PhotoGalleryFileInfoComponent.prototype.previous = function () {
if (this.currentIndex === 0) {
this.currentIndex = this.slides.length - 1;
}
else {
this.currentIndex--;
}
};
PhotoGalleryFileInfoComponent.prototype.next = function () {
if (this.currentIndex === this.slides.length - 1) {
this.currentIndex = 0;
}
else {
this.currentIndex++;
}
};
PhotoGalleryFileInfoComponent.prototype.getCurrentSlideUrl = function () {
return "url('" + this.slides[this.currentIndex].path + "')";
};
PhotoGalleryFileInfoComponent.prototype.goTo = function (slideIndex) {
this.currentIndex = slideIndex;
};
PhotoGalleryFileInfoComponent.prototype.removeSlide = function (item, index) {
this.slides.splice(index, 1);
if (this.currentIndex >= this.slides.length) {
this.currentIndex = this.slides.length - 1;
}
this.slideRemoved.emit(item);
};
PhotoGalleryFileInfoComponent.prototype.deleteFile = function (item, index) {
var _this = this;
if (this.deleteServiceUrl != null) {
var titleObs = this.translate.instant('areYouSure');
var textObs = this.translate.instant('noRevert');
var confirmButtonTextObs = this.translate.instant('yesDelete');
var declineButtonTextObs = this.translate.instant('cancel');
sweetalert2_1.default({
title: titleObs,
text: textObs,
type: 'warning',
showCancelButton: true,
confirmButtonText: confirmButtonTextObs,
cancelButtonText: declineButtonTextObs
}).then(function (result) {
if (result.value) {
_this.fileService.deleteFile(_this.deleteServiceUrl, { idFile: item.idFile }).subscribe(function (success) {
_this.removeSlide(item, index);
_this.cd.detectChanges();
}, function (error) {
sweetalert2_1.default({
type: 'error',
title: _this.translate.instant('deleteErrorMessage'),
text: _this.translate.instant(error.message)
});
});
}
});
}
};
PhotoGalleryFileInfoComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'app-photo-gallery-file-info',
template: "\n <div class=\"slider\" *ngIf=\"slides.length > 0\">\n <div class=\"card\">\n <div class=\"image-container\">\n <div class=\"previous\">\n <i class=\"fa fa-angle-left\" (click)=\"previous()\"></i>\n </div>\n <div class=\"next\">\n <i class=\"fa fa-angle-right\" (click)=\"next()\"></i>\n </div>\n <img [src]=\"slides[currentIndex].path\" class=\"fade image-selected\" />\n <button type=\"button\" class=\"delete-button\" (click)=\"deleteFile(slides[currentIndex], currentIndex)\">\n <i class=\"fa fa-trash\"></i>\n </button>\n </div>\n\n <!-- Información -->\n <div class=\"slide-info\">\n <h3>{{ slides[currentIndex].name }}</h3>\n <p>{{ slides[currentIndex].description }}</p>\n </div>\n </div>\n </div>\n\n <div class=\"dotsContainer\">\n <div *ngFor=\"let slide of slides; let i = index\" class=\"dot\" (click)=\"goTo(i)\">\n <i class=\"fa fa-square\" [ngClass]=\"{ 'selected': currentIndex === i }\"></i>\n </div>\n </div>\n ",
styles: ["\n .slider {\n display: flex;\n justify-content: center;\n position: relative;\n margin: auto;\n }\n\n .card {\n width: fit-content;\n max-width: 45vw;\n border-radius: 15px;\n box-shadow: 0 6px 12px #757575;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .image-container {\n position: relative;\n width: 100%;\n height: 60vh;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 0;\n }\n\n .previous,\n .next {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n z-index: 1;\n cursor: pointer;\n font-size: 45px;\n color: #757575;\n transition: color 0.3s linear !important;\n }\n\n .previous {\n left: 16px;\n }\n\n .next {\n right: 16px;\n }\n\n .previous:hover,\n .next:hover {\n color: #ffff00;\n }\n\n .delete-button {\n position: absolute;\n top: 8px;\n right: 8px;\n background: rgba(255, 0, 0, 0.75);\n border: none;\n color: white;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n cursor: pointer;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n\n i {\n font-size: 16px;\n }\n }\n }\n\n .slide-info {\n padding: 10px 15px;\n background-color: #f9f9f9;\n text-align: left;\n\n h3 {\n font-size: 1.2rem;\n font-weight: bold;\n margin: 0.5rem 0;\n }\n\n p {\n font-size: 1rem;\n color: #666;\n margin: 0;\n }\n }\n\n .dotsContainer {\n position: absolute;\n right: 0;\n left: 0;\n margin-top: 0.5rem;\n display: flex;\n justify-content: center;\n padding: 0;\n margin-bottom: 1rem;\n }\n\n .dot {\n margin: 0 3px;\n cursor: pointer;\n }\n\n .fa-square {\n font-size: 15px;\n color: #757575;\n transition: color 0.3s linear !important;\n }\n\n .selected,\n .fa-square:hover {\n color: #ffff00;\n }\n\n .fade {\n opacity: 1;\n animation-name: fade;\n animation-duration: 1s;\n }\n\n @keyframes fade {\n from {\n opacity: 0.4;\n }\n\n to {\n opacity: 1;\n }\n }\n "]
},] },
];
/** @nocollapse */
PhotoGalleryFileInfoComponent.ctorParameters = function () { return [
{ type: core_1.ChangeDetectorRef, },
{ type: file_select_service_1.FileSelectService, },
{ type: core_2.TranslateService, },
]; };
PhotoGalleryFileInfoComponent.propDecorators = {
"slides": [{ type: core_1.Input },],
"slideRemoved": [{ type: core_1.Output },],
"deleteServiceUrl": [{ type: core_1.Input },],
};
return PhotoGalleryFileInfoComponent;
}());
exports.PhotoGalleryFileInfoComponent = PhotoGalleryFileInfoComponent;
//# sourceMappingURL=photo-gallery-file-info.component.js.map