Archives
/
fastgallery
mirror of https://github.com/tonimelisma/fastgallery
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

URI coding for JS and last TODOs for templates

Browse Source
pull/3/head
Toni Melisma 4 years ago
parent c199331383
commit 45710bef37
No known key found for this signature in database
GPG Key ID: FFF9A7EDDEA34756
3 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File

4
cmd/fastgallery/main.go
Unescape Escape View File

@ -44,6 +44,7 @@ var optDryRun = false
var optCleanUp = false
// templates
// TODO move templates externally
const rawTemplate = `<!DOCTYPE html>
<html lang="en">
<head>
@ -355,6 +356,7 @@ func getHTMLRelPath(originalRelPath string, newRootDir string, sourceRootDir str
}
func createHTML(subdirectories []directory, files []file, sourceRootDir string, htmlDirectoryPath string) {
// TODO include root directory assets and link relatively
htmlFilePath := filepath.Join(htmlDirectoryPath, "index.html")
var data htmlData
@ -451,7 +453,7 @@ func resizeThumbnailVideo(source string, destination string) {
image, err := vips.NewImageFromFile(destination)
checkError(err)
// TODO don't load overlay separately
// TODO preload overlay globally to reduce overhead
playbuttonOverlayImage, err := vips.NewImageFromFile(assetPlaybuttonImage)
checkError(err)

8
web/fastgallery.js
Unescape Escape View File

@ -57,7 +57,7 @@ const displayModal = (display) => {
const preload = (number) => {
var preloadLink = document.createElement("link")
preloadLink.rel = "prefetch"
preloadLink.href = pictures[number].fullsize
preloadLink.href = encodeURI(pictures[number].fullsize)
const fileExtension = preloadLink.href.split("\.").pop()
if (fileExtension == videoExtension) {
preloadLink.as = "video"
@ -110,9 +110,9 @@ const changePicture = (number) => {
window.location.hash = thumbnailFilename.substring(thumbnailFilename.indexOf("/") + 1)
const fileExtension = pictures[number].fullsize.split("\.").pop()
if (fileExtension == videoExtension) {
document.getElementById("modalMedia").innerHTML = "<video controls><source src=\"" + pictures[number].fullsize + "\" type=\"" + videoMIMEType + "\"></video>"
document.getElementById("modalMedia").innerHTML = "<video controls><source src=\"" + encodeURI(pictures[number].fullsize) + "\" type=\"" + videoMIMEType + "\"></video>"
} else {
document.getElementById("modalMedia").innerHTML = "<img src=\"" + pictures[number].fullsize + "\" alt=\"" + pictures[number].fullsize.substring(pictures[number].fullsize.indexOf("/") + 1) + "\" class=\"modalImage\">"
document.getElementById("modalMedia").innerHTML = "<img src=\"" + encodeURI(pictures[number].fullsize) + "\" alt=\"" + pictures[number].fullsize.substring(pictures[number].fullsize.indexOf("/") + 1) + "\" class=\"modalImage\">"
}
document.getElementById("modalDescription").innerHTML = pictures[number].fullsize.substring(pictures[number].fullsize.indexOf("/") + 1)
document.getElementById("modalDownload").href = pictures[number].original
@ -122,7 +122,7 @@ const changePicture = (number) => {
// if URL links directly to thumbnail via hash link, open modal for that pic on page load
const hashNavigate = () => {
if (window.location.hash) {
const thumbnail = decodeURIComponent(window.location.hash.substring(1))
const thumbnail = decodeURI(window.location.hash.substring(1))
id = pictures.findIndex(item => item.thumbnail.substring(item.thumbnail.indexOf("/") + 1) == thumbnail)
if (id != -1 && id >= 0 && id < pictures.length) {
changePicture(id)

57
web/template.html
Unescape Escape View File

@ -19,11 +19,13 @@
<a href="temp2">
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/temp2/2018-10-14 15.59.20.jpg" alt="diipadaapa">
</a>
<span class="width-fit css-truncate css-truncate-target"><i data-feather="folder" width="15" height="15"></i> temp2</span>
<span class="width-fit css-truncate css-truncate-target"><i data-feather="folder" width="15"
height="15"></i> temp2</span>
</div>
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(0);displayModal(true);">
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg">
<span class="d-flex flex-justify-center width-fit css-truncate css-truncate-target">2018-03-31 16.48.28.jpg</span>
<span class="d-flex flex-justify-center width-fit css-truncate css-truncate-target">2018-03-31
16.48.28.jpg</span>
</div>
<div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3" onclick="changePicture(1);displayModal(true);">
<img class="box border border-gray box-shadow width-fit" src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg">
@ -96,32 +98,33 @@
<i data-feather="chevron-right"></i>
</div>
</div>
</div>
<!-- Statically generated javascript array of pictures on this page -->
<script>
const pictures = [{
thumbnail: "_thumbnails/2018-03-31 16.48.28.jpg",
fullsize: "_pictures/2018-03-31 16.48.28.jpg",
original: "_original/2018-03-31 16.48.28.jpg"
}, {
thumbnail: "_thumbnails/2018-07-16 17.28.12 -000.jpg",
fullsize: "_pictures/2018-07-16 17.28.12 -000.mp4",
original: "_original/2018-07-16 17.28.12 -000.mp4"
}, {
thumbnail: "_thumbnails/2018-11-10 12.36.05.jpg",
fullsize: "_pictures/2018-11-10 12.36.05.jpg",
original: "_original/2018-11-10 12.36.05.jpg"
}, {
thumbnail: "_thumbnails/2016-05-01 18.20.21.jpg",
fullsize: "_pictures/2016-05-01 18.20.21.jpg",
original: "_original/2016-05-01 18.20.21.jpg"
}]
</script>
<script src="feather.min.js"></script>
<script>
feather.replace()
</script>
<script src="fastgallery.js"></script>
<!-- Statically generated javascript array of pictures on this page -->
<script>
const pictures = [{
thumbnail: "_thumbnails/2018-03-31 16.48.28.jpg",
fullsize: "_pictures/2018-03-31 16.48.28.jpg",
original: "_original/2018-03-31 16.48.28.jpg"
}, {
thumbnail: "_thumbnails/2018-07-16 17.28.12 -000.jpg",
fullsize: "_pictures/2018-07-16 17.28.12 -000.mp4",
original: "_original/2018-07-16 17.28.12 -000.mp4"
}, {
thumbnail: "_thumbnails/2018-11-10 12.36.05.jpg",
fullsize: "_pictures/2018-11-10 12.36.05.jpg",
original: "_original/2018-11-10 12.36.05.jpg"
}, {
thumbnail: "_thumbnails/2016-05-01 18.20.21.jpg",
fullsize: "_pictures/2016-05-01 18.20.21.jpg",
original: "_original/2016-05-01 18.20.21.jpg"
}]
</script>
<script src="feather.min.js"></script>
<script>
feather.replace()
</script>
<script src="fastgallery.js"></script>
</body>

Write Preview
Loading…
Cancel
Save