64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
/**
|
|
* Component to render data for site media (photos and videos)
|
|
* @class SiteMedia
|
|
*/
|
|
export class SiteMedia {
|
|
/**
|
|
* @param {object} data
|
|
*/
|
|
set siteData(data) {
|
|
this._siteData = data;
|
|
}
|
|
|
|
renderPhotos() {
|
|
return `
|
|
<div class="content has-text-centered mb-5 pb-5">
|
|
<p class="is-size-5 mt-3">Fotografie</p>
|
|
<div style="max-width: 70%; margin: 0 auto">
|
|
<p class="is-size-6">Cliccare sull'immagine per aprire la gallery</p>
|
|
<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
|
|
<img src="img/${this._siteData.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>
|
|
`;
|
|
}
|
|
|
|
renderVideos() {
|
|
return `
|
|
<div class="content has-text-centered mb-5 pb-5">
|
|
<p class="is-size-5 mt-3">Video</p>
|
|
<div style="max-width: 70%; margin: 0 auto">
|
|
<p class="is-size-6 has-text-centered">Gallery video</p>
|
|
<figure class="is-relative is-clickable has-text-centered" id="gallery-video">
|
|
<img src="video/${this._siteData.filename.replace('mp4', 'png')}" 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>
|
|
`;
|
|
}
|
|
|
|
renderReconstructions() {
|
|
return `
|
|
<div class="content has-text-centered mb-5 pb-5">
|
|
<p class="is-size-5 mt-3">Ricostruzioni 3D</p>
|
|
<div style="max-width: 70%; margin: 0 auto">
|
|
<p class="is-size-6 has-text-centered">Gallery ricostruzioni 3D</p>
|
|
<figure class="is-relative is-clickable has-text-centered" id="gallery-3d">
|
|
<img src="img/${this._siteData.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>
|
|
`;
|
|
}
|
|
}
|