ngx-notion
Version:
An Notion page renderer for Angular
44 lines • 9.74 kB
JavaScript
import { DOCUMENT } from '@angular/common';
import { Component, Inject, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class AssetImageComponent {
constructor(documentRef, renderer) {
this.documentRef = documentRef;
this.renderer = renderer;
this.id = '';
this.caption = '';
}
ngAfterViewInit() {
const modal = this.documentRef.getElementById(`imgModal_${this.id}`);
const img = this.documentRef.getElementById(`image_${this.id}`);
const modalImg = this.documentRef.getElementById(`img_${this.id}`);
const captionText = this.documentRef.getElementById(`caption_${this.id}`);
this.renderer.listen(img, 'click', () => {
this.renderer.setStyle(this.documentRef.body, 'overflow', 'hidden');
modal.style.display = 'block';
modalImg.src = this.value;
captionText.innerHTML = this.caption;
});
var span = this.documentRef.getElementById(`closeImgDialogBtn_${this.id}`);
this.renderer.listen(span, 'click', () => {
this.renderer.removeStyle(this.documentRef.body, 'overflow');
modal.style.display = 'none';
});
}
}
AssetImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetImageComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
AssetImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AssetImageComponent, selector: "asset-image", inputs: { id: "id", value: "value", caption: "caption" }, ngImport: i0, template: "<img id=\"image_{{ id }}\" class=\"asset-image\" [alt]=\"caption\" [src]=\"value\" />\n\n<div id=\"imgModal_{{ id }}\" class=\"modal\">\n <span id=\"closeImgDialogBtn_{{ id }}\" class=\"close-img-dialog-btn\">×</span>\n <img id=\"img_{{ id }}\" class=\"modal-content\">\n <div id=\"caption_{{ id }}\" class=\"caption\"></div>\n</div>\n", styles: ["img{display:block;object-fit:cover;border-radius:1px;pointer-events:auto;width:100%}.asset-image{border-radius:5px;cursor:pointer;transition:.3s}.asset-image:hover{opacity:.9}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;background-color:#000000e6}.modal-content{margin:auto;display:block;width:80%;max-width:700px}.caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.modal-content,.caption{animation-name:zoom;animation-duration:.6s}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.close-img-dialog-btn{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.close-img-dialog-btn:hover,.close-img-dialog-btn:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width: 700px){.modal-content{width:100%}}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetImageComponent, decorators: [{
type: Component,
args: [{ selector: 'asset-image', template: "<img id=\"image_{{ id }}\" class=\"asset-image\" [alt]=\"caption\" [src]=\"value\" />\n\n<div id=\"imgModal_{{ id }}\" class=\"modal\">\n <span id=\"closeImgDialogBtn_{{ id }}\" class=\"close-img-dialog-btn\">×</span>\n <img id=\"img_{{ id }}\" class=\"modal-content\">\n <div id=\"caption_{{ id }}\" class=\"caption\"></div>\n</div>\n", styles: ["img{display:block;object-fit:cover;border-radius:1px;pointer-events:auto;width:100%}.asset-image{border-radius:5px;cursor:pointer;transition:.3s}.asset-image:hover{opacity:.9}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;background-color:#000000e6}.modal-content{margin:auto;display:block;width:80%;max-width:700px}.caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.modal-content,.caption{animation-name:zoom;animation-duration:.6s}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.close-img-dialog-btn{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.close-img-dialog-btn:hover,.close-img-dialog-btn:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width: 700px){.modal-content{width:100%}}\n"] }]
}], ctorParameters: function () { return [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.Renderer2 }]; }, propDecorators: { id: [{
type: Input
}], value: [{
type: Input
}], caption: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNzZXQtaW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW5vdGlvbi9zcmMvbGliL2NvbXBvbmVudHMvYmxvY2tzL2Fzc2V0L2Fzc2V0LWltYWdlL2Fzc2V0LWltYWdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ub3Rpb24vc3JjL2xpYi9jb21wb25lbnRzL2Jsb2Nrcy9hc3NldC9hc3NldC1pbWFnZS9hc3NldC1pbWFnZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDOztBQU9wRSxNQUFNLE9BQU8sbUJBQW1CO0lBVzVCLFlBRVksV0FBcUIsRUFDckIsUUFBbUI7UUFEbkIsZ0JBQVcsR0FBWCxXQUFXLENBQVU7UUFDckIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQVgvQixPQUFFLEdBQVcsRUFBRSxDQUFDO1FBTWhCLFlBQU8sR0FBdUIsRUFBRSxDQUFDO0lBTTlCLENBQUM7SUFFSixlQUFlO1FBQ1gsTUFBTSxLQUFLLEdBQVEsSUFBSSxDQUFDLFdBQVcsQ0FBQyxjQUFjLENBQUMsWUFBWSxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUUxRSxNQUFNLEdBQUcsR0FBUSxJQUFJLENBQUMsV0FBVyxDQUFDLGNBQWMsQ0FBQyxTQUFTLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQ3JFLE1BQU0sUUFBUSxHQUFRLElBQUksQ0FBQyxXQUFXLENBQUMsY0FBYyxDQUFDLE9BQU8sSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDeEUsTUFBTSxXQUFXLEdBQVEsSUFBSSxDQUFDLFdBQVcsQ0FBQyxjQUFjLENBQUMsV0FBVyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUUvRSxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxHQUFHLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRTtZQUNwQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxVQUFVLEVBQUUsUUFBUSxDQUFDLENBQUM7WUFDcEUsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1lBQzlCLFFBQVEsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUMxQixXQUFXLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLElBQUksR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGNBQWMsQ0FBQyxxQkFBcUIsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFM0UsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxHQUFHLEVBQUU7WUFDckMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsVUFBVSxDQUFDLENBQUM7WUFDN0QsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1FBQ2pDLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs7Z0hBckNRLG1CQUFtQixrQkFZaEIsUUFBUTtvR0FaWCxtQkFBbUIsNkdDUmhDLDBWQU9BOzJGRENhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDSSxhQUFhOzBEQWlCRSxRQUFROzBCQUQ1QixNQUFNOzJCQUFDLFFBQVE7b0VBVHBCLEVBQUU7c0JBREQsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sT0FBTztzQkFETixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRE9DVU1FTlQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbmplY3QsIElucHV0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhc3NldC1pbWFnZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2Fzc2V0LWltYWdlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9hc3NldC1pbWFnZS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBBc3NldEltYWdlQ29tcG9uZW50IHtcblxuICAgIEBJbnB1dCgpXG4gICAgaWQ6IHN0cmluZyA9ICcnO1xuXG4gICAgQElucHV0KClcbiAgICB2YWx1ZSE6IHN0cmluZztcblxuICAgIEBJbnB1dCgpXG4gICAgY2FwdGlvbjogc3RyaW5nIHwgdW5kZWZpbmVkID0gJyc7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChET0NVTUVOVClcbiAgICAgICAgcHJpdmF0ZSBkb2N1bWVudFJlZjogRG9jdW1lbnQsXG4gICAgICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICApIHt9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgICAgIGNvbnN0IG1vZGFsOiBhbnkgPSB0aGlzLmRvY3VtZW50UmVmLmdldEVsZW1lbnRCeUlkKGBpbWdNb2RhbF8ke3RoaXMuaWR9YCk7XG5cbiAgICAgICAgY29uc3QgaW1nOiBhbnkgPSB0aGlzLmRvY3VtZW50UmVmLmdldEVsZW1lbnRCeUlkKGBpbWFnZV8ke3RoaXMuaWR9YCk7XG4gICAgICAgIGNvbnN0IG1vZGFsSW1nOiBhbnkgPSB0aGlzLmRvY3VtZW50UmVmLmdldEVsZW1lbnRCeUlkKGBpbWdfJHt0aGlzLmlkfWApO1xuICAgICAgICBjb25zdCBjYXB0aW9uVGV4dDogYW55ID0gdGhpcy5kb2N1bWVudFJlZi5nZXRFbGVtZW50QnlJZChgY2FwdGlvbl8ke3RoaXMuaWR9YCk7XG5cbiAgICAgICAgdGhpcy5yZW5kZXJlci5saXN0ZW4oaW1nLCAnY2xpY2snLCAoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZG9jdW1lbnRSZWYuYm9keSwgJ292ZXJmbG93JywgJ2hpZGRlbicpO1xuICAgICAgICAgICAgbW9kYWwuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7XG4gICAgICAgICAgICBtb2RhbEltZy5zcmMgPSB0aGlzLnZhbHVlO1xuICAgICAgICAgICAgY2FwdGlvblRleHQuaW5uZXJIVE1MID0gdGhpcy5jYXB0aW9uO1xuICAgICAgICB9KTtcblxuICAgICAgICB2YXIgc3BhbiA9IHRoaXMuZG9jdW1lbnRSZWYuZ2V0RWxlbWVudEJ5SWQoYGNsb3NlSW1nRGlhbG9nQnRuXyR7dGhpcy5pZH1gKTtcblxuICAgICAgICB0aGlzLnJlbmRlcmVyLmxpc3RlbihzcGFuLCAnY2xpY2snLCAoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZVN0eWxlKHRoaXMuZG9jdW1lbnRSZWYuYm9keSwgJ292ZXJmbG93Jyk7XG4gICAgICAgICAgICBtb2RhbC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnO1xuICAgICAgICB9KTtcbiAgICB9XG59XG4iLCI8aW1nIGlkPVwiaW1hZ2Vfe3sgaWQgfX1cIiBjbGFzcz1cImFzc2V0LWltYWdlXCIgW2FsdF09XCJjYXB0aW9uXCIgW3NyY109XCJ2YWx1ZVwiIC8+XG5cbjxkaXYgaWQ9XCJpbWdNb2RhbF97eyBpZCB9fVwiIGNsYXNzPVwibW9kYWxcIj5cbiAgPHNwYW4gaWQ9XCJjbG9zZUltZ0RpYWxvZ0J0bl97eyBpZCB9fVwiIGNsYXNzPVwiY2xvc2UtaW1nLWRpYWxvZy1idG5cIj4mdGltZXM7PC9zcGFuPlxuICA8aW1nIGlkPVwiaW1nX3t7IGlkIH19XCIgY2xhc3M9XCJtb2RhbC1jb250ZW50XCI+XG4gIDxkaXYgaWQ9XCJjYXB0aW9uX3t7IGlkIH19XCIgY2xhc3M9XCJjYXB0aW9uXCI+PC9kaXY+XG48L2Rpdj5cbiJdfQ==