From 867c19f97c8d4da902f8b5ba609779fb80c0d89b Mon Sep 17 00:00:00 2001
From: Las Zenow <zenow@riseup.net>
Date: Fri, 30 Apr 2021 16:48:38 +0000
Subject: [PATCH] De-jquery the javascript
---
css/custom.css | 5 +++++
templates/login.html | 25 ++++++++++---------------
templates/read.html | 15 +++++++--------
3 files changed, 22 insertions(+), 23 deletions(-)
diff --git a/css/custom.css b/css/custom.css
index 6d9fe20..b9a045b 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -22,3 +22,8 @@ a {
body {
background: url(/img/bright_squares.png) repeat 0 0;
}
+iframe {
+ width: 100%;
+ height: 1080px;
+ border: none;
+}
diff --git a/templates/login.html b/templates/login.html
index 7568bd7..b75293f 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,22 +1,16 @@
{{template "header.html" .S}}
<script>
-$(document).ready(function () {
- $("#passCheck").keyup(checkPasswordMatch);
-});
-
function checkPasswordMatch() {
- var password = $("#pass").val();
- var confirmPassword = $("#confirmPass").val();
+ var password = document.forms["createAccount"]["pass"].value;
+ var confirmPassword = document.forms["createAccount"]["confirmPass"].value;
if (password != confirmPassword) {
- $("#passCheck").removeClass("success");
- $("#passCheck").addClass("error");
- $("#passCheckHelp").html("Passwords don't match!");
+ document.getElementById("confirmPass").classList.remove("is-valid");
+ document.getElementById("confirmPass").classList.add("is-invalid");
} else {
- $("#passCheck").removeClass("error");
- $("#passCheck").addClass("success");
- $("#passCheckHelp").html("");
+ document.getElementById("confirmPass").classList.remove("is-invalid");
+ document.getElementById("confirmPass").classList.add("is-valid");
}
}
</script>
@@ -54,7 +48,7 @@ function checkPasswordMatch() {
</div>
<div class="col-sm-4">
<h3>Create an Account</h3>
- <form id="login" method="POST" action="/create_user/" enctype="application/x-www-form-urlencoded">
+ <form id="createAccount" method="POST" action="/create_user/" enctype="application/x-www-form-urlencoded">
<div class="input-group mb-3">
<span class="input-group-text" id="user">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
@@ -69,7 +63,7 @@ function checkPasswordMatch() {
<use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
</svg>
</span>
- <input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass" id="pass">
+ <input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass" id="pass" onchange="checkPasswordMatch()">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="pass">
@@ -77,7 +71,8 @@ function checkPasswordMatch() {
<use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
</svg>
</span>
- <input type="password" class="form-control" placeholder="Confirm password" name="confirmPass" aria-label="Password" aria-describedby="confirmPass" id="confirmPass">
+ <input type="password" class="form-control" placeholder="Confirm password" name="confirmPass" aria-label="Password" aria-describedby="confirmPass" id="confirmPass" onchange="checkPasswordMatch()">
+ <div class="invalid-feedback">Passwords don't match!</div>
</div>
<input class="btn btn-primary" type="submit" name="submit" value="Create" />
</form>
diff --git a/templates/read.html b/templates/read.html
index d2eaf62..ae6a5b6 100644
--- a/templates/read.html
+++ b/templates/read.html
@@ -34,13 +34,6 @@
{{end}}
<div class="col">
- <script type="text/javascript">
- function resizeIframe() {
- var contentHeight = $("#bookContent").contents().find("html").height();
- $("#bookContent").height(ContentHeight);
- }
- </script>
-
{{if not .Book.Active}}
<div class="text-center">
<p class="badge bg-warning">waiting for moderation</p>
@@ -60,7 +53,7 @@
</ul>
</nav>
- <iframe id="bookContent" onload="resizeIframe();" style="width: 100%; height: 1080px; border: 0;" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>
+ <iframe id="bookContent" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>
<nav class="d-flex justify-content-center" arial-label="Book navigation">
<ul class="pagination">
@@ -80,5 +73,11 @@
</div>
+<script>
+var bookContent = document.getElementById("bookContent");
+bookContent.onload = function() {
+ bookContent.style.height = bookContent.contentWindow.document.body.scrollHeight + "px";
+}
+</script>
{{template "footer.html" .S}}