nicolo/caprigis
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Support videos

Browse Source
This commit is contained in:
Nicolò P
2024-11-30 18:37:01 +01:00
parent c895894b0d
commit 1393b779ff
8 changed files with 92 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
webgis/js/components/SiteMedia.js Normal file
View File

@@ -0,0 +1,46 @@
/**
* 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>
`;
}
}

31
webgis/js/components/SitePhotos.js
View File

@@ -1,31 +0,0 @@
/**
* Component to render data for site photos
* @class SitePhotos
*/
export class SitePhotos {
/**
* @param {object} data
*/
set siteData(data) {
this._siteData = data;
}
render() {
let content = `<div class="content has-text-centered">
<p class="is-size-5 mt-3">Fotografie</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="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>
`;
return content;
}
}

26
webgis/js/components/SiteSurveys.js
View File

@@ -11,21 +11,19 @@ export class SiteSurveys {
}
render() {
let content = `<div class="has-text-centered has-bottom-border mb-5 pb-5">
<p class="is-size-5 mt-3">Rilievi CNR-ISPC, elaborazioni grafiche</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 has-text-centered is-clickable" id="gallery-1">
<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>
return `
<div class="has-text-centered mb-5 pb-5">
<p class="is-size-5 mt-3">Rilievi CNR-ISPC, elaborazioni grafiche</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 has-text-centered is-clickable" id="gallery-1">
<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>
</div>
`;
return content;
}
}