Refactor components (WIP)
This commit is contained in:
parent
40cc2ef88b
commit
77d42a2c27
@ -462,12 +462,36 @@
|
|||||||
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
|
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Underwater modal -->
|
<!-- Underwater modal -->
|
||||||
<div class="modal" id="underwater-data" data-controller="modal biblio marker" data-modal-target="modal">
|
<div class="modal" id="underwater-data" data-controller="modal tabs marker" data-modal-target="modal">
|
||||||
<div class="modal-background" data-action="click->modal#close"></div>
|
<div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
|
||||||
<div class="modal-content has-background-white">
|
<div class="modal-content has-background-white">
|
||||||
<div id="underwater-sheet"></div>
|
<div class="tabs is-centered">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active" id="for-underwater-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="fas fa-info-circle" aria-hidden="true"></i></span>
|
||||||
|
<span>Scheda</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||||
|
<span>Immagini</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="fas fa-book" aria-hidden="true"></i></span>
|
||||||
|
<span>Documenti</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
|
<div class="data-tabs" id="underwater-sheet" data-tabs-target="content"></div>
|
||||||
|
<div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
|
||||||
|
<div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
|
||||||
|
</div>
|
||||||
|
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Reuse modal -->
|
<!-- Reuse modal -->
|
||||||
<div class="modal" id="reuse-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
|
<div class="modal" id="reuse-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
|
||||||
@ -477,9 +501,7 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li class="is-active" id="for-reuse-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
|
<li class="is-active" id="for-reuse-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small"
|
<span class="icon is-small"><i class="fas fa-info-circle" aria-hidden="true"></i></span>
|
||||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
|
||||||
></span>
|
|
||||||
<span>Scheda</span>
|
<span>Scheda</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { GisState } from "../state.js";
|
import Utils from "./utils.js";
|
||||||
/**
|
/**
|
||||||
* @class Finding
|
* @class Finding
|
||||||
*/
|
*/
|
||||||
@ -50,64 +50,25 @@ export class Finding {
|
|||||||
</p>
|
</p>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
renderImages() {
|
|
||||||
let content = `<div class="content has-text-centered">
|
|
||||||
<p class="is-size-5 mt-3">Immagini</p>`;
|
|
||||||
content += `
|
|
||||||
<div style="max-width: 70%; margin: 0 auto">
|
|
||||||
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
|
|
||||||
<figure class="is-relative is-clickable has-text-centered" id="finding-gallery">
|
|
||||||
<img src="img/${this.images[0].filename}" width="300"/>
|
|
||||||
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
|
|
||||||
<i class="is-flex fa fa-2x fa-play-circle"></i>
|
|
||||||
</div>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
return content;
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* @param {HTMLElement} imageContainer
|
* @param {HTMLElement} imageContainer
|
||||||
* @param {Function} gallery
|
* @param {Function} gallery
|
||||||
*/
|
*/
|
||||||
async setImages(imageContainer, gallery) {
|
async setImages(imageContainer, gallery) {
|
||||||
let record = await this.fetchData(`${GisState.apiUrl}/finding/${this._data.id}`)
|
if (this._data.images?.length) {
|
||||||
|
imageContainer.innerHTML = Utils.renderImages('finding-gallery', this._data.images);
|
||||||
if (record.images.length) {
|
gallery('finding-gallery', this._data.images);
|
||||||
this.images = record.images;
|
} else
|
||||||
imageContainer.innerHTML = this.renderImages();
|
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
|
||||||
gallery('finding-gallery', this.images);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @param {number} recordId
|
* @param {number} recordId
|
||||||
*/
|
*/
|
||||||
async biblio(recordId) {
|
async biblio(recordId) {
|
||||||
let finding = await this.fetchData(`${GisState.apiUrl}/finding/${recordId}`);
|
let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId);
|
||||||
|
this.biblioElements = biblioElements;
|
||||||
|
|
||||||
let citations = '';
|
return citations;
|
||||||
|
|
||||||
if (finding.bibliography.length) {
|
|
||||||
finding.bibliography.forEach(record => {
|
|
||||||
citations += `
|
|
||||||
<span class="is-clickable has-text-link"
|
|
||||||
data-action="click->biblio#open"
|
|
||||||
id="cit-${record.id}">
|
|
||||||
${record.citation}</span>`;
|
|
||||||
|
|
||||||
citations += record.pages?.length ? `, ${record.pages};` : ';';
|
|
||||||
|
|
||||||
this.biblioElements.push(`
|
|
||||||
<div class="p-2 mt-2" id="ref-${record.id}">
|
|
||||||
<p class="p-3">${record.reference}</p>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return citations.trim().slice(0, -1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getReference(id) {
|
getReference(id) {
|
||||||
@ -116,8 +77,4 @@ export class Finding {
|
|||||||
return ref.match(regex);
|
return ref.match(regex);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchData(url) {
|
|
||||||
return await fetch(url).then(res => res.json());
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { GisState } from "../state.js";
|
import Utils from "./utils.js";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component to render data for not conserved assets
|
* Component to render data for not conserved assets
|
||||||
@ -51,116 +51,27 @@ export class NotConserved {
|
|||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
renderImages() {
|
|
||||||
let content = `<div class="content has-text-centered">
|
|
||||||
<p class="is-size-5 mt-3">Immagini</p>`;
|
|
||||||
content += `
|
|
||||||
<div style="max-width: 70%; margin: 0 auto">
|
|
||||||
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
|
|
||||||
<figure class="is-relative is-clickable has-text-centered" id="not-conserved-gallery">
|
|
||||||
<img src="img/${this.images[0].filename}" width="300"/>
|
|
||||||
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
|
|
||||||
<i class="is-flex fa fa-2x fa-play-circle"></i>
|
|
||||||
</div>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
return content;
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* @param {HTMLElement} imageContainer
|
* @param {HTMLElement} imageContainer
|
||||||
* @param {Function} gallery
|
* @param {Function} gallery
|
||||||
*/
|
*/
|
||||||
async setImages(imageContainer, gallery) {
|
setImages(imageContainer, gallery) {
|
||||||
if (this._data.images.length) {
|
if (this._data.images.length) {
|
||||||
this.images = this._data.images;
|
imageContainer.innerHTML = Utils.renderImages('not-conserved-gallery', this._data.images);
|
||||||
imageContainer.innerHTML = this.renderImages();
|
gallery('not-conserved-gallery', this._data.images);
|
||||||
gallery('not-conserved-gallery', this.images);
|
|
||||||
} else
|
} else
|
||||||
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
|
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
|
||||||
}
|
}
|
||||||
|
|
||||||
async renderDocs() {
|
async renderDocs() {
|
||||||
let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${this._data.id}`);
|
return await Utils.generateDocsTable(this._data, 'not_conserved');
|
||||||
|
|
||||||
this.documentation = record.documents.filter(d => d.type === 'documentazione')
|
|
||||||
this.publications = record.documents.filter(d => d.type === 'pubblicazione');
|
|
||||||
|
|
||||||
let content = `
|
|
||||||
<div class="has-bottom-border">
|
|
||||||
<div class="p-2">
|
|
||||||
<table class="p-4 table is-fullwidth is-striped">
|
|
||||||
<thead>
|
|
||||||
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
|
|
||||||
<tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
`;
|
|
||||||
|
|
||||||
for (const doc of this.documentation) {
|
|
||||||
content += `
|
|
||||||
<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
|
|
||||||
<i class="fa fa-download mr-2"></i> PDF
|
|
||||||
</a></td></tr>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
if (this.publications.length) {
|
|
||||||
content += `
|
|
||||||
</tbody>
|
|
||||||
<thead>
|
|
||||||
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
|
|
||||||
<tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
`;
|
|
||||||
for (const doc of this.publications) {
|
|
||||||
content += `
|
|
||||||
<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
|
|
||||||
<i class="fa fa-download mr-2"></i> PDF
|
|
||||||
</a></td></tr>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
content += `
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (!this.publications.length && !this.documentation.length) {
|
|
||||||
content = '<p class="has-text-centered">Nessun documento disponibile.</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
return content;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async biblio(recordId) {
|
async biblio(recordId) {
|
||||||
let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${recordId}`);
|
let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId);
|
||||||
|
this.biblioElements = biblioElements;
|
||||||
|
|
||||||
let citations = '';
|
return citations;
|
||||||
|
|
||||||
if (record.bibliography.length) {
|
|
||||||
record.bibliography.forEach(record => {
|
|
||||||
citations += `
|
|
||||||
<span class="is-clickable has-text-link"
|
|
||||||
data-action="click->biblio#open"
|
|
||||||
id="cit-${record.id}">
|
|
||||||
${record.citation.trim()}</span>`;
|
|
||||||
|
|
||||||
citations += record.pages?.length ? `, ${record.pages};` : ';';
|
|
||||||
|
|
||||||
this.biblioElements.push(`
|
|
||||||
<div class="p-2 mt-2" id="ref-${record.id}">
|
|
||||||
<p class="p-3">${record.reference}</p>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return citations.trim().slice(0, -1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getReference(id) {
|
getReference(id) {
|
||||||
@ -169,8 +80,4 @@ export class NotConserved {
|
|||||||
return ref.match(regex);
|
return ref.match(regex);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchData(url) {
|
|
||||||
return await fetch(url).then(res => res.json());
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import Utils from "./utils.js";
|
||||||
/**
|
/**
|
||||||
* @class Underwater
|
* @class Underwater
|
||||||
*/
|
*/
|
||||||
@ -34,8 +35,19 @@ export class Underwater {
|
|||||||
</p>
|
</p>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} imageContainer
|
||||||
|
* @param {Function} gallery
|
||||||
|
*/
|
||||||
|
setImages(imageContainer, gallery) {
|
||||||
|
if (this._data.images?.length) {
|
||||||
|
imageContainer.innerHTML = Utils.renderImages('underwater-gallery', this._data.images);
|
||||||
|
gallery('underwater-gallery', this._data.images);
|
||||||
|
} else
|
||||||
|
imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
|
||||||
|
}
|
||||||
|
|
||||||
async fetchData(url) {
|
async renderDocs() {
|
||||||
return await fetch(url).then(res => res.json());
|
return await Utils.generateDocsTable(this._data, 'underwater');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
152
webgis/js/components/utils.js
Normal file
152
webgis/js/components/utils.js
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
import { GisState } from "../state.js";
|
||||||
|
/**
|
||||||
|
* @namespace Utils
|
||||||
|
*/
|
||||||
|
const Utils = {};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {string} galleryId The image gallery's id
|
||||||
|
* @param {Object} imagesData
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
Utils.renderImages = function (galleryId, imagesData) {
|
||||||
|
let content = `<div class="content has-text-centered">
|
||||||
|
<p class="is-size-5 mt-3">Immagini</p>`;
|
||||||
|
content += `
|
||||||
|
<div style="max-width: 70%; margin: 0 auto">
|
||||||
|
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
|
||||||
|
<figure class="is-relative is-clickable has-text-centered" id="not-conserved-gallery">
|
||||||
|
<img src="img/${imagesData[0].filename}" width="300"/>
|
||||||
|
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
|
||||||
|
<i class="is-flex fa fa-2x fa-play-circle"></i>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Object} imagesData
|
||||||
|
* @param {HTMLElement} imageContainer
|
||||||
|
* @param {Function} galleryGenerator The function that creates the image gallery
|
||||||
|
* @param {string} galleryId The image gallery's id
|
||||||
|
*/
|
||||||
|
Utils.setImages = function(imagesData, imageContainer, galleryGenerator, galleryId) {
|
||||||
|
imageContainer.innerHTML = Utils.renderImages(galleryId);
|
||||||
|
galleryGenerator(galleryId, imagesData);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {Object} data The component's data
|
||||||
|
* @param {String} resourceUri The resource URI to be used for API calls
|
||||||
|
* @returns {String} The table HTML
|
||||||
|
*/
|
||||||
|
Utils.generateDocsTable = async function(data, resourceUri) {
|
||||||
|
let record = await Utils.fetchData(`${GisState.apiUrl}/${resourceUri}/${data.id}`);
|
||||||
|
|
||||||
|
// TODO Horrible??
|
||||||
|
if (record instanceof Error) return '<p class="has-text-centered">Nessun documento disponibile.</p>';
|
||||||
|
|
||||||
|
const documentation = record.documents.filter(d => d.type === 'documentazione')
|
||||||
|
const publications = record.documents.filter(d => d.type === 'pubblicazione');
|
||||||
|
|
||||||
|
let content = `
|
||||||
|
<div class="has-bottom-border">
|
||||||
|
<div class="p-2">
|
||||||
|
<table class="p-4 table is-fullwidth is-striped">
|
||||||
|
<thead>
|
||||||
|
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
|
||||||
|
<tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
`;
|
||||||
|
|
||||||
|
for (const doc of documentation) {
|
||||||
|
content += `
|
||||||
|
<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
|
||||||
|
<i class="fa fa-download mr-2"></i> PDF
|
||||||
|
</a></td></tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
if (publications.length) {
|
||||||
|
content += `
|
||||||
|
</tbody>
|
||||||
|
<thead>
|
||||||
|
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
|
||||||
|
<tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
`;
|
||||||
|
for (const doc of publications) {
|
||||||
|
content += `
|
||||||
|
<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
|
||||||
|
<i class="fa fa-download mr-2"></i> PDF
|
||||||
|
</a></td></tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
content += `
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
if (publications.length === 0 && documentation.length === 0) {
|
||||||
|
content = '<p class="has-text-centered">Nessun documento disponibile.</p>';
|
||||||
|
}
|
||||||
|
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {String} recordUri The record URI used for API calls
|
||||||
|
* @param {Number} recordId This record's ID
|
||||||
|
* @returns {{citations:String,biblioElements:String[]}}
|
||||||
|
*/
|
||||||
|
Utils.buildBibliography = async function(recordUri, recordId) {
|
||||||
|
let record = await Utils.fetchData(`${GisState.apiUrl}/${recordUri}/${recordId}`);
|
||||||
|
let biblioElements = [];
|
||||||
|
|
||||||
|
let citations = '';
|
||||||
|
|
||||||
|
if (record.bibliography.length) {
|
||||||
|
record.bibliography.forEach(record => {
|
||||||
|
citations += `
|
||||||
|
<span class="is-clickable has-text-link"
|
||||||
|
data-action="click->biblio#open"
|
||||||
|
id="cit-${record.id}">
|
||||||
|
${record.citation.trim()}
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
citations += record.pages?.length ? `, ${record.pages};` : ';';
|
||||||
|
|
||||||
|
biblioElements.push(`
|
||||||
|
<div class="p-2 mt-2" id="ref-${record.id}">
|
||||||
|
<p class="p-3">${record.reference}</p>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const bibliography = {
|
||||||
|
citations: citations.trim().slice(0, -1),
|
||||||
|
biblioElements
|
||||||
|
}
|
||||||
|
|
||||||
|
return bibliography;
|
||||||
|
}
|
||||||
|
|
||||||
|
Utils.fetchData = async function(url) {
|
||||||
|
return await fetch(url).then(res => res.ok ? res.json() : new Error())
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Utils;
|
@ -24,9 +24,6 @@ export default class extends Controller {
|
|||||||
let ul = this.renderMenuItems(group, municipality);
|
let ul = this.renderMenuItems(group, municipality);
|
||||||
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
|
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
|
||||||
?.appendChild(ul);
|
?.appendChild(ul);
|
||||||
|
|
||||||
if (group === 'reuse' && municipality === 'Capri') console.log(ul);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -212,6 +212,8 @@ UI.openUnderwaterModal = function (data, selector) {
|
|||||||
// For Stimulus biblio_controller
|
// For Stimulus biblio_controller
|
||||||
//GisState.bibliography = underwater;
|
//GisState.bibliography = underwater;
|
||||||
underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html);
|
underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html);
|
||||||
|
underwater.renderDocs().then(html => modal.querySelector('#documents').innerHTML = html);
|
||||||
|
underwater.setImages(modal.querySelector('#photos'), this.imageGallery);
|
||||||
modal.classList.add('is-active');
|
modal.classList.add('is-active');
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user