Reload page when dehighlighting a document

Author: svera

internal/webserver/embedded/js/actions.js

@@ -0,0 +1,83 @@
+function send(el, successMessage, errorMessage) {
+    event.preventDefault();
+    let form = el.closest(".send-email")
+
+    let submit = form.querySelector('button');
+    let sendIcon = document.querySelector('.bi-send-fill');
+    let spinner = document.querySelector('.spinner-border');
+
+    submit.setAttribute("disabled", true);
+    spinner.classList.remove("visually-hidden");
+    sendIcon.classList.add("visually-hidden");
+    fetch('/send', {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: new URLSearchParams({
+            'email': form.elements[0].value,
+            'slug': form.elements[1].value,        
+        })
+    })
+    .then((response) => {
+        message = el.querySelector(".send-email-message")
+        message.classList.remove("visually-hidden");
+        if (!response.ok) {
+            message.innerHTML = errorMessage;
+            message.classList.remove("text-success");
+            message.classList.add("text-danger");
+        } else {
+            message.innerHTML = successMessage;
+            message.classList.remove("text-danger");
+            message.classList.add("text-success");
+        }
+        submit.removeAttribute("disabled");
+        sendIcon.classList.remove("visually-hidden");
+        spinner.classList.add("visually-hidden");
+    })
+    .catch(function (error) {
+        // Catch errors
+        console.log(error);
+    });
+}
+
+function highlightToggle(slug, el, method, onDehighlight = "") {
+    event.preventDefault();
+    let parent = el.closest(".actions")
+
+    let highlightLinkParent = parent.querySelector(".highlight");
+    let dehighlightLinkParent = parent.querySelector(".dehighlight");
+    fetch(
+        el.getAttribute("href"), {
+            method: method,
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            credentials: "same-origin",
+            body: new URLSearchParams({
+                'slug': slug,        
+            })
+        }
+    )
+    .then((response) => {
+        if (response.ok) {
+            if (method == "DELETE") {
+                if (onDehighlight == "remove") {
+                    location.reload();
+                    return;
+                }
+                dehighlightLinkParent.classList.add("visually-hidden");
+                highlightLinkParent.classList.remove("visually-hidden");
+            } else {
+                highlightLinkParent.classList.add("visually-hidden");
+                dehighlightLinkParent.classList.remove("visually-hidden");    
+            }
+            return;
+        }
+        console.log(response.body)
+    })
+    .catch(function (error) {
+        // Catch errors
+        console.log(error);
+    });
+}

internal/webserver/embedded/js/delete.js

@@ -0,0 +1,41 @@
+const deleteModal = document.getElementById('deleteModal');
+
+deleteModal.addEventListener('show.bs.modal', event => {
+    const link = event.relatedTarget;
+    const slug = link.getAttribute('data-bs-slug');
+    const modalInputSlug = deleteModal.querySelector('.slug');
+
+    modalInputSlug.value = slug;
+})
+
+deleteModal.addEventListener('hidden.bs.modal', event => {
+    let message = document.getElementById('delete-document-message');
+    message.classList.add("visually-hidden");
+})
+
+function remove(errorMessage) {
+    event.preventDefault();
+    form = document.getElementById("delete-form");
+    fetch('/delete', {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: new URLSearchParams({
+            'slug': form.elements['slug'].value,        
+        })
+    })
+    .then((response) => {
+        if (response.ok) {
+            location.reload();
+        } else {
+            message = document.getElementById("delete-document-message")
+            message.classList.remove("visually-hidden");
+            message.innerHTML = errorMessage;
+        }
+    })
+    .catch(function (error) {
+        // Catch errors
+        console.log(error);
+    });
+}

internal/webserver/embedded/views/actions.js.html

@@ -203,7 +203,5 @@ <h4>{{t $lang "Other documents with similar subjects"}}</h4>
 
 </div>
 
-{{template "partials/delete-modal" .}}
-
-{{template "actions.js" dict "Lang" $lang}}
+<script type="text/javascript" src="/js/actions.js"></script>
 <script type="text/javascript" src="/js/cover-loader.js"></script>

internal/webserver/embedded/views/delete.js.html

@@ -22,7 +22,7 @@ <h2>{{t .Lang "Your highlights" }}</h2>
                         {{$emailFrom := .EmailFrom}}
 
                         {{range $i, $doc := .Highlights}}
-                        <div class="col-6 col-md-3 col-lg-2 pe-0">
+                        <div class="col-6 col-md-3 col-lg-2 pe-0 highlight-block">
                             {{template "partials/related" dict "Lang" $lang "Document" $doc}}
                             <div class="mb-5 actions">
                                 <div class="dropdown">
@@ -31,13 +31,16 @@ <h2>{{t .Lang "Your highlights" }}</h2>
                                         {{t $lang "Actions"}}
                                     </button>
                                     {{ template "partials/actions" dict "Lang" $lang "Document" $doc "EmailSendingConfigured"
-                                    $emailSendingConfigured "Index" $i "Session" $session "EmailFrom" $emailFrom}}
+                                    $emailSendingConfigured "Index" $i "Session" $session "EmailFrom" $emailFrom "OnDehighlight" "remove"}}
                                 </div>                        
                             </div>
                         </div>
                         {{end}}
                     </div>
-                    {{template "actions.js" dict "Lang" $lang}}
+                    {{template "partials/delete-modal" .}}
+
+                    <script type="text/javascript" src="/js/delete.js"></script>
+                    <script type="text/javascript" src="/js/actions.js"></script>
                     <script type="text/javascript" src="/js/cover-loader.js"></script>
                 {{else}}
                     <p>{{t .Lang "You haven't highlighted any document yet."}}</p>

internal/webserver/embedded/views/document.html

@@ -27,7 +27,7 @@
     </li>     
 
     <li class="dehighlight {{if not .Document.Highlighted}}visually-hidden{{end}}">
-        <a href="/highlights" class="dropdown-item dehighlight" onclick='highlightToggle("{{.Document.Slug}}", this, "DELETE")'>
+        <a href="/highlights" class="dropdown-item dehighlight" onclick='highlightToggle("{{.Document.Slug}}", this, "DELETE", "{{.OnDehighlight}}")'>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
             </svg>
@@ -40,7 +40,7 @@
         <li class="dropdown-item disabled">{{t .Lang "Send to email unavailable, no email service configured"}}</li>
     {{else}}
         <li>
-            <form method="post" action="send" onsubmit='send(this)' class="send-email">
+            <form method="post" action="send" onsubmit='send(this, {{t .Lang "Document sent succesfully"}}, {{t .Lang "There was an error sending the document, please try again later"}})' class="send-email">
                 <div class="px-3 py-1">
                     <label for="email" class="form-label">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">

internal/webserver/embedded/views/index.html

@@ -1,7 +1,7 @@
 <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModal" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
-            <form method="post" action="/delete" onsubmit="remove()" id="delete-form">
+            <form method="post" action="/delete" onsubmit='remove({{t .Lang "There was an error deleting the document"}})' id="delete-form">
                 <div class="modal-header">
                     <h1 class="modal-title fs-5" id="deleteModalLabel">{{t .Lang "Delete document"}}</h1>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

internal/webserver/embedded/views/partials/actions.html

@@ -41,7 +41,7 @@ <h4 class="text-start">
                                 {{t $lang "Actions"}}
                             </button>
                             {{ template "partials/actions" dict "Lang" $lang "Document" $document "EmailSendingConfigured"
-                            $emailSendingConfigured "Index" $i "Session" $session "EmailFrom" $emailFrom}}
+                            $emailSendingConfigured "Index" $i "Session" $session "EmailFrom" $emailFrom "OnDehighlight" "remove"}}
                         </div>
                     </div>
                 </div>
@@ -93,6 +93,6 @@ <h5>{{t $lang "Unknown author"}}</h5>
 
 {{template "partials/delete-modal" .}}
 
-{{template "delete.js" dict "Lang" $lang}}
-{{template "actions.js" dict "Lang" $lang}}
+<script type="text/javascript" src="/js/delete.js"></script>
+<script type="text/javascript" src="/js/actions.js"></script>
 <script type="text/javascript" src="/js/cover-loader.js"></script>