@net7/components 3.8.1 → 3.8.2
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/esm2020/lib/components/text-viewer/text-viewer.mjs +10 -18
- package/fesm2015/net7-components.mjs +9 -17
- package/fesm2015/net7-components.mjs.map +1 -1
- package/fesm2020/net7-components.mjs +9 -17
- package/fesm2020/net7-components.mjs.map +1 -1
- package/lib/components/text-viewer/text-viewer.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1681,6 +1681,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1681
1681
|
class TextViewerComponent {
|
|
1682
1682
|
constructor() {
|
|
1683
1683
|
this.isDisplayed = false;
|
|
1684
|
+
document.addEventListener('pb-page-ready', () => {
|
|
1685
|
+
document.addEventListener('pb-end-update', (ev) => {
|
|
1686
|
+
this.scrollElementsIntoView(ev.detail, 'chapter', '#view1');
|
|
1687
|
+
});
|
|
1688
|
+
});
|
|
1684
1689
|
}
|
|
1685
1690
|
ngOnInit() {
|
|
1686
1691
|
if (!TextViewerComponent._loaded) {
|
|
@@ -1689,20 +1694,9 @@ class TextViewerComponent {
|
|
|
1689
1694
|
s.setAttribute('type', 'module');
|
|
1690
1695
|
s.onload = this.onScriptLoaded;
|
|
1691
1696
|
document.head.appendChild(s);
|
|
1692
|
-
// this.listenToEvent();
|
|
1693
|
-
// console.log("test");
|
|
1694
|
-
window.addEventListener('load', () => {
|
|
1695
|
-
// console.log('load event listener');
|
|
1696
|
-
document.addEventListener('pb-end-update', (ev) => {
|
|
1697
|
-
// console.log(ev);
|
|
1698
|
-
this.scrollElementsIntoView(ev.detail, 'chapter', '#view1');
|
|
1699
|
-
});
|
|
1700
|
-
});
|
|
1701
1697
|
}
|
|
1702
1698
|
}
|
|
1703
1699
|
scrollElementsIntoView(target, type, view) {
|
|
1704
|
-
// console.log(`${type} scroll activated on ${view}`);
|
|
1705
|
-
// console.log(target);
|
|
1706
1700
|
setTimeout(() => {
|
|
1707
1701
|
let element;
|
|
1708
1702
|
if (type === 'chapter') {
|
|
@@ -1714,7 +1708,6 @@ class TextViewerComponent {
|
|
|
1714
1708
|
.shadowRoot.querySelectorAll('pb-highlight');
|
|
1715
1709
|
const highlightId = highlight[highlight.length - 1].id; // s.x
|
|
1716
1710
|
const fragmentNumber = highlightId.replace('.', '\\.');
|
|
1717
|
-
// console.log(fragmentNumber);
|
|
1718
1711
|
element = document
|
|
1719
1712
|
.querySelector(view)
|
|
1720
1713
|
.shadowRoot.querySelector(`#${fragmentNumber}`);
|
|
@@ -1726,7 +1719,6 @@ class TextViewerComponent {
|
|
|
1726
1719
|
.querySelector(`.n7-text-viewer ${view}`)
|
|
1727
1720
|
.shadowRoot.querySelector(`#${key}`);
|
|
1728
1721
|
}
|
|
1729
|
-
// console.log(`element to scroll: ${element}`)
|
|
1730
1722
|
const container = document.querySelector(`.n7-text-viewer ${view}`);
|
|
1731
1723
|
if (element) {
|
|
1732
1724
|
container.scrollTop = element.offsetTop;
|
|
@@ -1744,9 +1736,9 @@ class TextViewerComponent {
|
|
|
1744
1736
|
TextViewerComponent._loaded = true;
|
|
1745
1737
|
}
|
|
1746
1738
|
onClick(payload) {
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
this.emit('click', payload);
|
|
1739
|
+
// FIXME: mettere logica onClick sul boilerplate / progetto
|
|
1740
|
+
// if (!this.emit) return;
|
|
1741
|
+
// this.emit('click', payload);
|
|
1750
1742
|
if (this.isDisplayed === false) {
|
|
1751
1743
|
let target;
|
|
1752
1744
|
let i = 0;
|
|
@@ -1775,7 +1767,7 @@ TextViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
1775
1767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TextViewerComponent, decorators: [{
|
|
1776
1768
|
type: Component,
|
|
1777
1769
|
args: [{ selector: 'n7-text-viewer', template: "<div\n class=\"n7-text-viewer {{data.classes || ''}}\"\n *ngIf=\"data && data.endpoint\"\n>\n\n <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n <pb-document\n *ngFor=\"let doc of data.docs\"\n [path]=\"doc.xml\"\n [odd]=\"doc.odd\"\n [id]=\"doc.id\"\n >\n </pb-document>\n\n <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n <app-header-layout>\n <app-header\n fixed=\"fixed\"\n data-template=\"browse:fix-links\"\n style=\"\n transition-duration: 0ms;\n transform: translate3d(0px, 0px, 0px);\n left: 0px;\n right: 0.399994px;\n \"\n >\n <app-toolbar\n class=\"toolbar\"\n sticky=\"sticky\"\n style=\"transform: translate3d(0px, 0px, 0px)\"\n >\n <paper-icon-button\n *ngIf=\"data.docs.length === 1\"\n id=\"tocToggle\"\n class=\"toc-toggle\"\n icon=\"icons:view-list\"\n role=\"button\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n ></paper-icon-button>\n\n <pb-toggle-feature\n *ngIf=\"data.docs.length === 1\"\n name=\"highlight1\"\n selector=\"tei-app,pb-popover,pb-highlight\"\n default=\"off\"\n action=\"disable\"\n emit=\"transcription\"\n subscribe=\"transcription\"\n >\n <ng-container *ngIf=\"data.labels && data.labels.view\">\n {{data.labels.view}}\n </ng-container>\n <ng-container *ngIf=\"!data.labels || !data.labels.view\">\n <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n </ng-container>\n </pb-toggle-feature>\n\n <ng-container\n *ngIf=\"data.docs?.length == 1 || data.docs[0].translation\"\n >\n <pb-zoom\n emit=\"transcription\"\n direction=\"in\"\n icon=\"icons:zoom-in\"\n ></pb-zoom>\n <pb-zoom\n emit=\"transcription\"\n direction=\"out\"\n icon=\"icons:zoom-out\"\n ></pb-zoom>\n </ng-container>\n\n <ng-container\n *ngIf=\"!data.docs[0].translation && data.docs?.length == 1\"\n >\n <pb-navigation\n emit=\"transcription\"\n keyboard=\"left\"\n subscribe=\"transcription\"\n direction=\"backward\"\n unit=\"page\"\n >\n <paper-icon-button\n icon=\"icons:chevron-left\"\n role=\"button\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n ></paper-icon-button>\n </pb-navigation>\n <pb-navigation\n emit=\"transcription\"\n keyboard=\"right\"\n subscribe=\"transcription\"\n direction=\"forward\"\n unit=\"page\"\n >\n <paper-icon-button\n icon=\"icons:chevron-right\"\n role=\"button\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n ></paper-icon-button>\n </pb-navigation>\n </ng-container>\n\n <ng-container *ngIf=\"data.docs?.length > 1\">\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <paper-icon-button\n *ngIf=\"data.docs?.length > 1\"\n id=\"tocToggle\"\n class=\"toc-toggle\"\n icon=\"icons:view-list\"\n role=\"button\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n ></paper-icon-button>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"!data.docs[0].translation && data.docs?.length > 1\"\n >\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <pb-navigation\n emit=\"transcription\"\n keyboard=\"left\"\n subscribe=\"transcription\"\n direction=\"backward\"\n unit=\"page\"\n >\n <paper-icon-button\n icon=\"icons:chevron-left\"\n role=\"button\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n ></paper-icon-button>\n </pb-navigation>\n </div>\n\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <pb-navigation\n emit=\"transcription\"\n keyboard=\"right\"\n subscribe=\"transcription\"\n direction=\"forward\"\n unit=\"page\"\n >\n <paper-icon-button\n icon=\"icons:chevron-right\"\n role=\"button\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n ></paper-icon-button>\n </pb-navigation>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"data.docs?.length > 1 && !data.docs[0].translation\"\n >\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <pb-zoom\n emit=\"transcription\"\n direction=\"in\"\n icon=\"icons:zoom-in\"\n ></pb-zoom>\n\n <pb-zoom\n emit=\"transcription\"\n direction=\"out\"\n icon=\"icons:zoom-out\"\n ></pb-zoom>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"data.docs.length > 1 && data.labels && data.labels.select.label\"\n >\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <pb-select-feature\n id=\"select-view2\"\n name=\"view2\"\n [label]=\"data.labels && data.labels.select.label ? data.labels.select.label : 'Mostra entit\u00E0'\"\n [items]='[\n {\"name\": data.labels.select.type.all, \n \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n {\"name\": data.labels.select.type.person, \n \"selectors\": \n [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n {\"name\": data.labels.select.type.place, \"selectors\": \n [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n ]'\n subscribe=\"addChannel\"\n emit=\"addChannel\"\n ></pb-select-feature>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"data.docs.length > 1 && (!data.labels || !data.labels.select.label)\"\n >\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <pb-select-feature\n id=\"select-view2\"\n name=\"view2\"\n label=\"Mostra entit\u00E0\"\n [items]='[\n {\"name\": \"Tutto\", \n \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n {\"name\": \"Personaggi\", \n \"selectors\": \n [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n {\"name\": \"Luoghi\", \"selectors\": \n [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n ]'\n subscribe=\"addChannel\"\n emit=\"addChannel\"\n ></pb-select-feature>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"data.docs?.length > 1 && data.docs[1].channel && data.facsimile\"\n >\n <ng-container *ngIf=\"data.labels && data.labels.index.hide\">\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <paper-button raised=\"\" (click)=\"displayIndex()\"\n >{{ !isDisplayed ? data.labels.index.hide :\n data.labels.index.show }}</paper-button\n >\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data.labels || !data.labels.index.hide\">\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <paper-button raised=\"\" (click)=\"displayIndex()\"\n >{{ !isDisplayed ? 'Indici' : 'Riassunto'\n }}</paper-button\n >\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.docs && data.download\">\n <div class=\"n7-text-viewer__toolbar-container-flex\">\n <pb-download\n [type]=\"data.download && data.download.format ? data.download.format: ''\"\n [src]=\"data.docs[0].id\"\n [url]=\"data.download && data.download.file ? data.download.file : ''\"\n dialog=\"downloadDialog\"\n [title]=\"data.download && data.download.format && data.download.label ? data.download.label + ' ' + data.download.format: ''\"\n >\n <paper-button raised=\"\"\n >{{data.download && data.download.format &&\n data.download.label ? data.download.label + ' ' +\n data.download.format: ''}}</paper-button\n >\n </pb-download>\n </div>\n </ng-container>\n\n <pb-progress\n subscribe=\"transcription\"\n indeterminate=\"\"\n bottom-item=\"bottom-item\"\n style=\"visibility: hidden\"\n ></pb-progress>\n </app-toolbar>\n </app-header>\n\n <pb-drawer\n toggle=\"tocToggle\"\n class=\"tocDrawer\"\n emit=\"toc\"\n subscribe=\"transcription\"\n >\n <div class=\"drawer-content\">\n <h3>\n <ng-container *ngIf=\"data.labels && data.labels.toc\">\n {{data.labels.toc}}\n </ng-container>\n <ng-container *ngIf=\"!data.labels || !data.labels.toc\">\n <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n </ng-container>\n </h3>\n <pb-load\n *ngIf=\"data.docs\"\n id=\"toc\"\n url=\"api/document/{doc}/contents?target=transcription&icons=true\"\n [src]=\"data.docs[0].id\"\n subscribe=\"toc\"\n emit=\"toc\"\n expand=\"expand\"\n auto=\"auto\"\n >\n <ng-container *ngIf=\"data.labels && data.labels.loading\">\n {{data.labels.loading}}\n </ng-container>\n <ng-container *ngIf=\"!data.labels || !data.labels.loading\">\n <pb-i18n key=\"dialogs.loading\">Loading</pb-i18n>\n </ng-container>\n </pb-load>\n </div>\n </pb-drawer>\n <main class=\"content-body\">\n <pb-facsimile\n *ngIf=\"data.facsimile\"\n id=\"facsimile\"\n [attr.base-uri]=\"data.facsimile.uri\"\n subscribe=\"transcription\"\n default-zoom-level=\"0\"\n show-navigation-control=\"show-navigation-control\"\n show-navigator=\"show-navigator\"\n >\n </pb-facsimile>\n <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n <!-- NO CHANNEL -->\n <pb-view\n *ngIf=\"!doc.channel\"\n id=\"view{{ $i }}\"\n [src]=\"doc.id\"\n subscribe=\"transcription\"\n emit=\"transcription\"\n [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n column-separator=\".tei-cb\"\n append-footnotes=\"append-footnotes\"\n view=\"{{ doc.view }}\"\n ></pb-view>\n <!-- WITH CHANNEL / MURUCA DEMO -->\n <pb-view\n *ngIf=\"doc.channel && doc.translation\"\n id=\"view{{ $i }}\"\n [src]=\"doc.id\"\n xpath=\"//text[@type='source']\"\n emit=\"{{ doc.channel }}\"\n subscribe=\"{{ doc.channel }}\"\n view=\"{{ doc.view }}\"\n >\n </pb-view>\n <pb-view\n *ngIf=\"doc.channel && doc.translation\"\n id=\"view{{ $i }}\"\n [src]=\"doc.id\"\n xpath=\"{{ doc.xpath }}\"\n emit=\"{{ doc.channel }}\"\n subscribe=\"{{ doc.channel }}\"\n view=\"{{ doc.view }}\"\n >\n <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n </pb-view>\n <!-- WITH CHANNEL / addChannel -->\n <pb-view\n [hidden]=\"isDisplayed\"\n (click)=\"onClick($event)\"\n *ngIf=\"doc.channel && !doc.translation\"\n id=\"view{{ $i }}\"\n [src]=\"doc.id\"\n [odd]=\"doc.odd\"\n emit=\"addChannel\"\n subscribe=\"addChannel\"\n view=\"{{ doc.view }}\"\n >\n <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n </pb-view>\n\n <ng-container *ngIf=\"doc.channel && !doc.translation\">\n <!-- -->\n <pb-view\n [hidden]=\"!isDisplayed\"\n *ngIf=\"doc.channel && !doc.translation\"\n [src]=\"doc.id\"\n [odd]=\"doc.odd\"\n id=\"text-viewer-index\"\n subscribe=\"index\"\n emit=\"letter\"\n >\n <pb-param name=\"mode\" value=\"facets\"></pb-param>\n </pb-view>\n <!-- -->\n </ng-container>\n </ng-container>\n </main>\n </app-header-layout>\n </app-drawer-layout>\n </pb-page>\n</div>\n" }]
|
|
1778
|
-
}], propDecorators: { data: [{
|
|
1770
|
+
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
1779
1771
|
type: Input
|
|
1780
1772
|
}], emit: [{
|
|
1781
1773
|
type: Input
|