Start JS integration

This commit is contained in:
Sam Ireland 2021-01-03 02:26:38 +00:00
parent e2d1117cc5
commit c1282f6833
7 changed files with 52 additions and 3 deletions

23
html/main.js Normal file
View File

@ -0,0 +1,23 @@
const toggleView = () => {
const postsSection = document.querySelector(".posts-section");
const commentsSection = document.querySelector(".comments-section");
if (commentsSection.style.display === "none") {
commentsSection.style.display = "block";
postsSection.style.display = "none";
} else {
postsSection.style.display = "block";
commentsSection.style.display = "none";
}
}
window.addEventListener("load", function() {
const postsSection = document.querySelector(".posts-section");
const commentsSection = document.querySelector(".comments-section");
if (commentsSection) {
commentsSection.style.display = "none";
const toggleButton = document.createElement("button");
toggleButton.innerText = "toggle";
toggleButton.addEventListener("click", toggleView);
document.body.insertBefore(toggleButton, postsSection);
}
})

View File

@ -3,8 +3,8 @@
<title><!--title--></title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
<style></style>
<script></script>
</head>
<body>
<!--post-->
<div class="comments">

View File

@ -3,12 +3,16 @@
<title>Saved Posts</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
<style></style>
<script></script>
</head>
<body>
<section class="posts-section">
<h1>Saved Posts</h1>
<!--posts-->
</section>
<section class="comments-section">
<h1>Saved Comments</h1>
</section>
<!--comments-->
</body>
</html>

View File

@ -121,4 +121,22 @@ h1 {
font-weight: bold;
font-size: 20px;
padding: 8px 16px;
}
button {
border: 1px solid #1abc9c60;
color: #1abc9c;
border-radius: 5px;
padding: 4px 8px;;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 16px;
font-weight: bold;
top: 10px;
background-color: #1abc9c20;
}
button:hover {
background-color: #1abc9c40;
}

View File

@ -3,8 +3,8 @@
<title>Upvoted Posts</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
<style></style>
<script></script>
</head>
<body>
<h1>Upvoted Posts</h1>
<!--posts-->

View File

@ -93,6 +93,8 @@ with open(os.path.join("html", html_file)) as f:
html = f.read()
with open(os.path.join("html", "style.css")) as f:
html = html.replace("<style></style>", f"<style>\n{f.read()}\n</style>")
with open(os.path.join("html", "main.js")) as f:
html = html.replace("<script></script>", f"<script>\n{f.read()}\n</script>")
html = html.replace("<!--posts-->", "\n".join(posts_html))
html = html.replace("<!--comments-->", "\n".join(comments_html))
with open(os.path.join(location, html_file), "w") as f:

View File

@ -178,6 +178,8 @@ def create_post_page_html(post, post_html):
))
with open(os.path.join("html", "style.css")) as f:
html = html.replace("<style></style>", f"<style>\n{f.read()}\n</style>")
with open(os.path.join("html", "main.js")) as f:
html = html.replace("<script></script>", f"<script>\n{f.read()}\n</script>")
comments_html = []
post.comments.replace_more(limit=0)
for comment in post.comments: