For #63 webpack setup; clear base.html

.gitignore

@@ -22,3 +22,4 @@ docs
 .coverage
 reqs/req.txt
 reqs/req.in
+node_modules

src/assets/scripts/bookmarks.js

@@ -0,0 +1,40 @@
+import { getCookie } from "./utils";
+// bookmarks
+const jsBox = document.getElementById("jsBox");
+const bmarkDiv = document.getElementById("bmarkDiv");
+const formBook = document.querySelector("#bookmark");
+if(bmarkDiv){
+const fd = new FormData();
+fd.append("csrfmiddlewaretoken",getCookie("csrftoken"))
+formBook.addEventListener("submit",(e)=>{
+  e.preventDefault();
+  const url = formBook.getAttribute("action");
+  fd.append("post_uuid",formBook.post_uuid.value),
+  fd.append("user_id",formBook.user_id.value)
+
+  fetch(url,{
+    method:"POST",
+    headers:{ "x-requested-with": "XMLHttpRequest"},
+    body:fd
+    }).then((resp)=>resp.json())
+      .then((data)=>{
+        if(data.status_code ===200){
+          let msg = data.msg;
+          jsBox.classList.add("green","slide");
+          jsBox.textContent=  msg;
+          if(data.del_button){
+            bmarkDiv.remove();
+          }
+        }
+        else if(data.status_code ===404){
+          //  add error flash msg
+            jsBox.classList.add("red","slide");
+            jsBox.textContent= "Failed to add to bookmarks";
+           throw new Error(message="Failed to add to bookmarks");
+          }
+      })
+      .catch((err)=>{
+        console.log(err["message"]);
+      })
+})
+}

src/assets/scripts/categs.js

@@ -0,0 +1,42 @@
+//click button Categories-> toggle categs
+document.addEventListener('click',(e)=>{
+    let isCategBut = e.target.matches("[data-dropdown-but]");
+      if(!isCategBut&&e.target.closest("[data-dropdown]")!=null){
+         return
+      }
+      if(isCategBut){
+        // click button will show<->hide all categories
+        const but = document.getElementById("show-cats")
+        const ulMenu = document.querySelector(".root-cats");
+        if(!but.classList.contains('hide')){
+          but.classList.add("hide")
+          but.innerHTML="Show Categories";
+          ulMenu.classList.remove("to-show")
+        }else{
+          but.classList.remove('hide')
+          but.innerHTML="Hide categories";
+          ulMenu.classList.add("to-show");
+        }
+      }
+    });
+      // help func to outroll (sub)categs;
+      //maybe: custom click event(?)
+      // by now: mouseover -> outroll categs; click -> make request
+      let catSideBar = document.querySelector(".root-cats");
+      if(catSideBar){
+        catSideBar.addEventListener("mouseover",(e)=>{
+            const isDropDownLink = e.target.matches('[data-dropdown-link]');
+            if(!isDropDownLink&&e.target.closest("[data-li]")!=null){
+              return
+            }
+            if(isDropDownLink){
+              // get ul children (sibling "a" tag enbed in "li")
+              let currentDropDown = e.target.nextElementSibling;
+              // e.target is a a tag node-link to-toggle
+              currentDropDown.classList.add("to-block");
+        }
+    })
+}
+
+
+

src/static/js/resize_img.js → src/assets/scripts/checkState.js

@@ -1,6 +1,81 @@
+import { formatFileSize,checkExt,fileToDataUri } from "./utils";
+import { sendAvaUpdate } from "./sendAvaForm";
+const checkInp = (checkbox,inp)=>{
+    /*
+    func for upload image:
+    1.should help to send only one state to the server:
+    either remove avatar or update the old one;
+    2.toggle class 'disabled' on submit button
+     */
+    if(checkbox){
+        // checkbox(remove avatar) present in DOM:
+        // checked vs unchecked
+        checkbox.addEventListener("change",(e)=>{
+        if(checkbox.checked){
+            // checkbox checked = avatar should be removed
+          inp.value = null //
+          butSubmit.classList.remove("disabled")
+         }
+         else{
+          butSubmit.classList.add("disabled")
+        }
+
+       });
+       inp.addEventListener("change",()=>{
+        if(inp.value){
+          checkbox.checked = false;
+          butSubmit.classList.remove("disabled")
+
+        }else{
+          butSubmit.classList.add("disabled");
+        }
+      })
+
+    }
+    else{
+        // checkbox present in DOM but not
+        // state can contain either "remove img"
+        // or "attach img" but not both
+        if(checkbox!=null){
+          // remove existed avatar (clear image input if user attached img occasionally);
+          checkbox.addEventListener("change",(e)=>{
+          if(checkbox.checked){
+            inp.value = null
+            butSubmit.classList.remove("disabled")
+          }else{
+            butSubmit.classList.add("disabled")
+          }
+          });
+        inp.addEventListener("change",()=>{
+          if(inp.value){
+            checkbox.checked = false;
+            butSubmit.classList.remove("disabled");
+          }else{
+            butSubmit.classList.add("disabled");
+          }
+        })
+        }else{
+       // checkbox NOT in DOM (avatar == default static image)
+        inp.addEventListener("change",()=>{
+        // toggle class 'disabled' on submit button
+          if(inp.value){
+            butSubmit.classList.remove("disabled")
+          }else{
+            butSubmit.classList.add("disabled")
+
+          }
+        })
+
+      }
+    }
+}
+// canvas flow
 let canvas,ctx,avatar,newImgUrl,serverErrMsg;
   const WIDTH = 600;
   const form = document.getElementById("upForm");
+  if(form){
+
+
   const url = form.getAttribute("action");
   const checkbox = document.querySelector("#avatar-clear_id");
   const inp = document.querySelector("#imgInp");
@@ -14,7 +89,11 @@ let canvas,ctx,avatar,newImgUrl,serverErrMsg;
   function init(){
     canvas = document.createElement("canvas");
     ctx = canvas.getContext('2d');
-    form.addEventListener("submit",upload);
+    if(form){
+      const url = form.getAttribute("action");
+      form.addEventListener("submit",upload);
+
+    }
   }
   async function upload(e){
     e.preventDefault()
@@ -39,18 +118,14 @@ let canvas,ctx,avatar,newImgUrl,serverErrMsg;
       }
       const res = await fileToDataUri(file) // base64 encoded
       if(res){
-      // console.log("res is",res)
         let img = new Image();
         img.src = res // base64 encoded
-      // console.log("img created",img.src)
         img.onload = function(e){
-
-          let initialWidth = img.width;
           let initialHeight = img.height;
+          let initialWidth = img.width;
           if(initialSize <300000)  {
-      // file(less 300KB) without resizing
-      // console.log("size is small",img)
-      //console.log("file is rel small; upload as it is");
+          // file(less 300KB) without resizing
+
             sendAvaUpdate(url,avatar=file)
           }
           else if(initialWidth <WIDTH)  {
@@ -71,14 +146,15 @@ let canvas,ctx,avatar,newImgUrl,serverErrMsg;
         }
       }else{
       // error during reader file load
-        console.log("line 128 ")
         jsErr.textContent = "Something went wrong; uplaod file failed"
         }
       }
       else{
       //file detached; remove existing avatar
-      console.log("file detached; removing exisitnig avatar")
+      // console.log("file detached; removing exisitnig avatar")
       sendAvaUpdate(url,avatar=false);
     }
-
+  }
 }
+
+

src/assets/scripts/index.js

@@ -0,0 +1,34 @@
+console.log("with css");
+import "./utils";
+import "./categs";
+import "./checkState";
+import "./bookmarks"
+
+
+//  third parties
+import * as bootstrap from 'bootstrap';
+window.bootstrap = bootstrap;
+
+window.htmx = require('htmx.org');
+
+// css
+import "../styles/index.css";
+
+const modal = new bootstrap.Modal(document.getElementById("modal"));
+  htmx.on("htmx:afterSwap", (e) => {
+    // Response targeting #dialog => show the modal
+    if (e.detail.target.id == "dialog") {
+      modal.show()
+    }
+  })
+  htmx.on("htmx:beforeSwap", (e) => {
+  // Empty response targeting #dialog => hide the modal
+  if (e.detail.target.id == "dialog" && !e.detail.xhr.response) {
+    modal.hide()
+    e.detail.shouldSwap = false
+  }
+})
+// form with errors->cancel-> open again(form + err should flush)
+  htmx.on("hidden.bs.modal", () => {
+    document.getElementById("dialog").innerHTML = ""
+  })

src/assets/scripts/sendAvaForm.js

@@ -0,0 +1,34 @@
+import { getCookie } from "./utils";
+const sendAvaUpdate = function(url,avatar) {
+    const fd = new FormData();
+      fd.append("csrfmiddlewaretoken",getCookie("csrftoken"));
+      fd.append('avatar',avatar)
+      fetch(url,{
+        method:"POST",
+        headers:{ "x-requested-with": "XMLHttpRequest"},
+        body:fd
+        }).then((resp)=>resp.json())
+          .then((data)=>{
+            if(data.status_code ===200){
+              setTimeout(
+                window.location.reload(),3000
+              )
+            }
+            else if(data.status_code ===404){
+              jsErr.classList.remove("visually-hidden");
+              jsErr.textContent = "Failed upload avatar";
+              data.err.avatar.forEach((err)=>{
+                let div = document.createElement("div")
+                div.classList.add("errorlist");
+                div.innerHTML = `${err}`;
+                errDiv.appendChild(div)
+              });
+               throw new Error(message="Custom error: upload failed");
+              }
+          })
+          .catch((err)=>{
+            console.log(err["message"]);
+    })
+  }
+
+  export {sendAvaUpdate}