commit newly seperated files
This commit is contained in:
parent
4de2c57cc8
commit
ea33666aea
@ -6,6 +6,7 @@ from markdown import markdown
|
||||
from glob import glob
|
||||
from json import dump, dumps, load
|
||||
from os import path
|
||||
from subprocess import call
|
||||
import re
|
||||
|
||||
numbers = re.compile("[0-9]+")
|
||||
@ -109,7 +110,7 @@ def render_places():
|
||||
with open("md/" + placename + ".md", "r") as f:
|
||||
md = markdown(f.read())
|
||||
except FileNotFoundError:
|
||||
md = "<h1>No Story (Yet)</h1>"
|
||||
md = ""
|
||||
with open(working_path + "/index.html", "w") as f:
|
||||
f.write(template.render({
|
||||
"count": count,
|
||||
@ -120,6 +121,10 @@ def render_places():
|
||||
"photos_json": photos_json
|
||||
}))
|
||||
|
||||
def copy_files():
|
||||
call("cp js/* html/js/", shell=True)
|
||||
call("cp style.css html/style.css", shell=True)
|
||||
|
||||
if __name__ == "__main__":
|
||||
try:
|
||||
overwrite = "overwrite" in argv
|
||||
@ -130,3 +135,4 @@ if __name__ == "__main__":
|
||||
exit()
|
||||
render_index()
|
||||
render_places()
|
||||
copy_files()
|
||||
|
||||
108
js/imgGallery.js
Normal file
108
js/imgGallery.js
Normal file
@ -0,0 +1,108 @@
|
||||
// `photos` variable populated by script tag in place page html
|
||||
viewState = null;
|
||||
galleryContainer = document.getElementById("galleryContainer");
|
||||
galleryImage = document.getElementById("galleryImage");
|
||||
previewLinks = document.getElementsByClassName("previewLink");
|
||||
headerImage = document.getElementById("headerImage");
|
||||
|
||||
touchDragStartX = null;
|
||||
touchDragThreshold = 75;
|
||||
touchDirection = null;
|
||||
touchLock = false;
|
||||
|
||||
function enlargeImage (filename) {
|
||||
viewState = photos.indexOf(filename);
|
||||
galleryImage.fullRes = filename;
|
||||
galleryImage.src = "/compressed/compressed_" + filename;
|
||||
galleryContainer.style.display = "block";
|
||||
headerImage.style.rotate = "none";
|
||||
};
|
||||
|
||||
function delGallery () {
|
||||
galleryContainer.style.display = "none";
|
||||
galleryImage.src = "";
|
||||
headerImage.style.rotate = "-3deg";
|
||||
};
|
||||
|
||||
function nextImage () {
|
||||
viewState++;
|
||||
if (viewState == previewLinks.length) {
|
||||
viewState = 0;
|
||||
};
|
||||
galleryImage.fullRes = photos[viewState];
|
||||
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
||||
};
|
||||
|
||||
function prevImage () {
|
||||
viewState--;
|
||||
if (viewState == -1) {
|
||||
viewState = previewLinks.length - 1;
|
||||
};
|
||||
galleryImage.fullRes = photos[viewState];
|
||||
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
||||
};
|
||||
|
||||
function imageNewTab () {
|
||||
window.open(galleryImage.fullRes, "_blank")
|
||||
};
|
||||
|
||||
function keyHandler (event) {
|
||||
if (event.key == "ArrowRight" | event.key == "Space") {
|
||||
nextImage();
|
||||
} else if (event.key == "ArrowLeft") {
|
||||
prevImage();
|
||||
} else if (event.key == "Escape" | event.key == "q") {
|
||||
delGallery();
|
||||
}
|
||||
};
|
||||
|
||||
function delGalleryHandler (event) {
|
||||
if (event.target.id == "galleryContainer") {
|
||||
delGallery();
|
||||
};
|
||||
};
|
||||
|
||||
function mouseUpHandler (event) {
|
||||
console.log("mousedown");
|
||||
if (event.clientX > window.innerWidth / 2) {
|
||||
nextImage();
|
||||
} else {
|
||||
prevImage();
|
||||
};
|
||||
};
|
||||
|
||||
function onTouchMove (event) {
|
||||
screenX = event.changedTouches[0].screenX;
|
||||
if (!touchLock && touchDragStartX == null) {
|
||||
touchDragStartX = screenX;
|
||||
};
|
||||
touchDelta = Math.abs(touchDragStartX - screenX);
|
||||
if (!touchLock && (touchDelta > touchDragThreshold)) {
|
||||
touchDirection = touchDragStartX > screenX;
|
||||
touchDragStartX = null;
|
||||
touchLock = true;
|
||||
};
|
||||
};
|
||||
|
||||
function onTouchEnd (event) {
|
||||
touchLock = false;
|
||||
touchDragStartX = null;
|
||||
if (touchDirection == null) {
|
||||
return;
|
||||
};
|
||||
if (touchDirection) {
|
||||
nextImage();
|
||||
} else {
|
||||
prevImage();
|
||||
};
|
||||
touchDirection = null;
|
||||
};
|
||||
|
||||
document.onkeydown = keyHandler;
|
||||
document.body.onclick = delGalleryHandler;
|
||||
galleryImage.addEventListener("mouseup", mouseUpHandler);
|
||||
galleryImage.addEventListener("touchmove", onTouchMove);
|
||||
galleryImage.addEventListener("touchend", onTouchEnd);
|
||||
galleryImage.addEventListener("touchstart", function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
284
style.css
Normal file
284
style.css
Normal file
@ -0,0 +1,284 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: sans-serif;
|
||||
background-color: #B3C8CF;
|
||||
}
|
||||
|
||||
.mainHeader {
|
||||
background-image: url("/compressed/compressed_199.jpg");
|
||||
background-repeat: none;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
height: 7em;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: white;
|
||||
text-shadow: 3px 3px black;
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
padding-top: 0.8em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
h1, h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* in-album image browser */
|
||||
|
||||
.galleryContainer {
|
||||
display: none;
|
||||
background-color: rgba(0, 0, 0 , 0.8);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbar > button {
|
||||
color: white;
|
||||
background-color: #222;
|
||||
border: 2px solid #B3C8CF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* in-album page */
|
||||
|
||||
.locationDisplay {
|
||||
margin-top: 1em;
|
||||
border-left: 0.2em solid black;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.locationTitle {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
/* color: white;
|
||||
text-shadow: 2px 2px black; */
|
||||
}
|
||||
|
||||
.locationState {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.postBody {
|
||||
color: #000;
|
||||
font-size: 125%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
p > a, p > a:visited {
|
||||
color: #50593a;
|
||||
}
|
||||
|
||||
p > a:hover {
|
||||
color: #6f3763;
|
||||
}
|
||||
|
||||
.allphotos > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.headerImageContainer {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.headerImage {
|
||||
margin: 1em;
|
||||
border-radius: 1em;
|
||||
max-width: 500px;
|
||||
rotate: -3deg;
|
||||
box-shadow: 4px 4px 10px black;
|
||||
}
|
||||
|
||||
.indexlink, .indexlink:visited {
|
||||
font-size: 1.3em;
|
||||
color: #007b88;
|
||||
}
|
||||
|
||||
.indexlink:hover {
|
||||
color: white
|
||||
}
|
||||
|
||||
.photoCount {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* index photos */
|
||||
|
||||
@keyframes scaleUp {
|
||||
from {transform: scale(1);}
|
||||
to {transform: scale(1.025);}
|
||||
}
|
||||
|
||||
.tocText {
|
||||
font-size: 1.3em;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tocText:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tocLink, .tocLink:visited {
|
||||
font-size: 1em;
|
||||
color: #007b88;
|
||||
line-height: 2.6ex;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.tocLink:hover, .placeLink:hover {
|
||||
color: #ffffff;
|
||||
text-shadow: 1px 1px 1px #262219, 0 0 0.125em black;
|
||||
}
|
||||
|
||||
.photolinks {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeLink {
|
||||
color: #FFF;
|
||||
font-size: 145%;
|
||||
text-shadow: 2px 2px #39464a;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mainImgContainer {
|
||||
position: relative;
|
||||
margin: 0.75em;
|
||||
}
|
||||
|
||||
.mainImgContainerTop {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
background-color: rgba(15, 15, 15 , 0.7);
|
||||
border-top-right-radius: 0.5em;
|
||||
border-top-left-radius: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.mainImgContainerBottom {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 10px;
|
||||
font-size: 125%;
|
||||
color: white;
|
||||
background-color: rgba(15, 15, 15 , 0.7);
|
||||
border-radius: 0.5em;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
.photolink > a > .mainImgContainer > img {
|
||||
border-radius: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photolink > a > .mainImgContainer:hover {
|
||||
transform: scale(1.025);
|
||||
animation-name: scaleUp;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 650px) {
|
||||
.mainBody {
|
||||
max-width: 110em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.mainHeader {
|
||||
margin: 1em;
|
||||
border: 2px solid #000;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.photolinks {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
.allphotos {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.allphotos > a > .preview {
|
||||
margin: 0.5rem;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
.photolinks {
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
}
|
||||
|
||||
.placeLink {
|
||||
font-size: 145%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.allphotos {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 31%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.2em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.placeLink {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.mainBody {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
position: relative;
|
||||
top: 45%;
|
||||
transform: translateY(-45%);
|
||||
}
|
||||
|
||||
.headerImage {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.placeLink {
|
||||
font-size: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,33 +17,34 @@
|
||||
<div class="mainBody">
|
||||
<div class="postBody">
|
||||
<p>
|
||||
<h1>Work in progress!</h1>
|
||||
This is going to be a photo blog. Right now its just a mess of undescribed photos.
|
||||
A lot of photos have not been uploaded yet and work on CSS and choosing which images
|
||||
are included here are underway. Come back later to see more pictures, descriptive
|
||||
content and better CSS.
|
||||
<h1>Exploring America the Beautiful</h1>
|
||||
This is an extensive collection of photos I have taken while traveling
|
||||
across the United States. I have spent countless hours dedicated to
|
||||
enjoying and capturing the natural wonders that surround us. These
|
||||
photos and trips were made possible by the extensive efforts of
|
||||
individuals across our nation, including people from state parks,
|
||||
Bureau of Land Management, United States Forest Service, National Parks
|
||||
Service, and more. I hope you enjoy these photos as much as I enjoyed
|
||||
taking them.
|
||||
</p>
|
||||
<h4>A collection of {{ total_count }} photos in {{ album_count }} albums.</h4>
|
||||
<h3>A collection of {{ total_count }} photos in {{ album_count }} albums.</h3>
|
||||
<details class="toc">
|
||||
<summary class="tocText">Table of Contents</summary>
|
||||
<br>
|
||||
{% for placename, info in metadata.items() %}
|
||||
<div class="tocEntry">
|
||||
<a class="tocLink" href="/{{ placename }}/">{{ info['title'] }}, {{ info['state'] }} [{{ info["count"] }}]</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<br>
|
||||
</details>
|
||||
<details class="toc">
|
||||
<summary class="tocText">Albums With Stories</summary>
|
||||
<br>
|
||||
{% for placename in posts %}
|
||||
<div class="tocEntry">
|
||||
<a class="tocLink" href="/{{ placename }}">{{ metadata[placename]['title'] }}, {{ metadata[placename]['state'] }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<br>
|
||||
</details>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="photolinks">
|
||||
|
||||
@ -44,100 +44,12 @@
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
|
||||
</div>
|
||||
<script>
|
||||
viewState = null;
|
||||
// jank here for getting photos during html templating
|
||||
photos = JSON.parse('{{ photos_json }}');
|
||||
galleryContainer = document.getElementById("galleryContainer");
|
||||
galleryImage = document.getElementById("galleryImage");
|
||||
previewLinks = document.getElementsByClassName("previewLink");
|
||||
headerImage = document.getElementById("headerImage");
|
||||
|
||||
function enlargeImage (filename) {
|
||||
viewState = photos.indexOf(filename);
|
||||
galleryImage.fullRes = filename;
|
||||
galleryImage.src = "/compressed/compressed_" + filename;
|
||||
galleryContainer.style.display = "block";
|
||||
headerImage.style.rotate = "none";
|
||||
};
|
||||
|
||||
function delGallery () {
|
||||
galleryContainer.style.display = "none";
|
||||
galleryImage.src = "";
|
||||
headerImage.style.rotate = "-3deg";
|
||||
};
|
||||
|
||||
function nextImage () {
|
||||
viewState++;
|
||||
if (viewState == previewLinks.length) {
|
||||
viewState = 0;
|
||||
};
|
||||
galleryImage.fullRes = photos[viewState];
|
||||
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
||||
};
|
||||
|
||||
function prevImage () {
|
||||
viewState--;
|
||||
if (viewState == -1) {
|
||||
viewState = previewLinks.length - 1;
|
||||
};
|
||||
galleryImage.fullRes = photos[viewState];
|
||||
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
||||
};
|
||||
|
||||
function imageNewTab () {
|
||||
window.open(galleryImage.fullRes, "_blank")
|
||||
};
|
||||
|
||||
function dragHandler (event) {
|
||||
|
||||
};
|
||||
|
||||
function keyHandler (event) {
|
||||
if (event.key == "ArrowRight" | event.key == "Space") {
|
||||
nextImage();
|
||||
} else if (event.key == "ArrowLeft") {
|
||||
prevImage();
|
||||
} else if (event.key == "Escape" | event.key == "q") {
|
||||
delGallery();
|
||||
}
|
||||
};
|
||||
|
||||
function clickHandler (event) {
|
||||
if (event.target.id == "galleryContainer") {
|
||||
delGallery();
|
||||
} else if (event.target.id == "galleryImage") {
|
||||
if (event.clientX > window.innerWidth / 2) {
|
||||
nextImage();
|
||||
} else {
|
||||
prevImage();
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// last_pointerx = NaN
|
||||
// function onDown (event) {
|
||||
// // console.log(event);
|
||||
// last_pointerx = event.x;
|
||||
// };
|
||||
|
||||
// function onUp (event) {
|
||||
// if (event.x > last_pointerx) {
|
||||
|
||||
// }
|
||||
// if (last_pointerx > event.x + 50) {
|
||||
// prevImage();
|
||||
// } else {
|
||||
// nextImage();
|
||||
// };
|
||||
// };
|
||||
|
||||
document.onkeydown = keyHandler;
|
||||
document.body.onclick = clickHandler;
|
||||
// galleryImage.addEventListener("touchstart", onDown);
|
||||
// galleryImage.addEventListener("touchend", onUp);
|
||||
</script>
|
||||
<script src="/js/imgGallery.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user