feat: index page button show up on hovering entry

MenxLi · MenxLi · commit 288560da52c9 · 2022-10-15T21:20:27.000+08:00
diff --git a/RBMWeb/frontend/favicon.ico b/RBMWeb/frontend/favicon.ico
diff --git a/RBMWeb/frontend/src/index.ts b/RBMWeb/frontend/src/index.ts
@@ -5,10 +5,18 @@ import { DataFilter } from "./dataFilter.js";
 import {BACKENDURL, FRONTENDURL} from "./config.js";
 import { getLogger } from "./libs/logging.js";
 import { checkUsrInfo, eraseUsrInfo } from "./login.js";
+import { sleep } from "./libs/timeUtils.js";
 
 
-// Global storage of the dataInfoList
+// Global storages ===========
+// the dataInfoList
 var g_datalist: DataInfoT[];
+// last dataEntry with action shown
+var g_prevActEntry: null|DataEntryElement
+
+interface DataEntryElement extends HTMLDivElement{
+    dataInfo: DataInfoT
+}
 
 function render(dataInfoList: DataInfoT[]){
 
@@ -43,6 +51,99 @@ function initSearch(dataInfoList: DataInfoT[]){
 }
 
 function showData(dataInfoList: DataInfoT[]){
+    function showEntryAct(entry: DataEntryElement){
+        if (entry.querySelector("div.entryAct")){
+            // If already has act entry, skip re-triggering this function
+            return;
+        }
+        // Add elements
+        entry.innerHTML += `
+        <div class="entryAct gradIn">
+        </div>
+        `
+        const acts: HTMLInputElement[] = new Array()
+        const entryFrame = entry.querySelector("div.entryAct")!;
+        const actView = document.createElement("input");
+        actView.value = "View"
+        acts.push(actView);
+        const actNote = document.createElement("input");
+        actNote.value = "Note"
+        acts.push(actNote);
+        const actDiscuss = document.createElement("input");
+        actDiscuss.value = "Discuss"
+        acts.push(actDiscuss);
+
+        for (const act of acts){
+            act.type = "button";
+            act.classList.add("smoothTrans");
+            entryFrame.appendChild(act);
+        }
+
+        // Set callbacks for the actions
+        function getOpenFileFunction(): () => void{
+            const uid = entry.dataInfo.uuid;
+            let destURL: string;
+            if (entry.dataInfo["has_file"] && entry.dataInfo["file_type"]===".pdf"){
+                destURL = `${BACKENDURL}/doc/${uid}`
+            }
+            else if (entry.dataInfo["has_file"] && entry.dataInfo["file_type"]===".hpack"){
+                destURL = `${BACKENDURL}/doc/${uid}//`
+            }
+            else if (entry.dataInfo.url){
+                destURL = entry.dataInfo.url;
+            }
+            return () => {
+                // if (destURL) window.location.href = destURL;
+                if (destURL) window.open(destURL, '_blank')?.focus();
+            }
+        }
+        function getOpenNoteFunction(): ()=>void {
+            const uid = entry.dataInfo.uuid;
+            return () => {
+                const dest = `${BACKENDURL}/comment/${uid}/`;
+                // Simulate a mouse click:
+                // it will somehow omit the last '/'
+                // window.location.href = `${BACKENDURL}/comment/${uid}/`;
+                //
+                // Use this instead
+                window.open(dest, '_blank')?.focus();
+            }
+        }
+        function getOpenDiscussionFunction(): ()=>void {
+            const uid = entry.dataInfo.uuid;
+            return () => {
+                alert("Not implemented yet.")
+            }
+        }
+        actView.addEventListener("click", getOpenFileFunction());
+        actNote.addEventListener("click", getOpenNoteFunction());
+        actDiscuss.addEventListener("click", getOpenDiscussionFunction());
+
+        // May be remove other entry frame
+        if (g_prevActEntry != null && g_prevActEntry.classList == entry.classList){
+            // compare if prev activated entry is the current one
+            // This may be unnecessary because we are not re-triggering this function 
+            // by previous condition checking
+            getLogger('rbm').debug("Staying in same entry");
+        }
+        else{
+            // Remove previous entry's action frame
+            if (g_prevActEntry){
+                removeEntryAct(g_prevActEntry);
+            }
+            // save this as global
+            g_prevActEntry = entry;
+        }
+    }
+    function removeEntryAct(entry: HTMLDivElement){
+        // remove entry action frame if it exists
+        const actFrame = entry.querySelector("div.entryAct");
+        if (actFrame){
+            entry.removeChild(actFrame);
+        }
+    }
+
+
     const selectorDiv: HTMLDivElement = document.querySelector("div.selector")!;
     // first, clear selector_frame 
     removeChilds(selectorDiv);
@@ -51,41 +152,45 @@ function showData(dataInfoList: DataInfoT[]){
     // add valid data into it
     for (const dataInfo of dataInfoList){
         idx += 1;
-        const dataEntry = document.createElement("div");
+        const dataEntry = <DataEntryElement>document.createElement("div");
+        dataEntry.dataInfo = dataInfo;
         dataEntry.classList.add("dataEntry");
         dataEntry.innerHTML = `
-        <div class="yearAuthor">
-            <label class="year">${dataInfo.year}</label> 
-            <label class="author">${dataInfo.author}</label>
+        <div class="entryInfo">
+            <div class="yearAuthor">
+                <label class="year">${dataInfo.year}</label> 
+                <label class="author">${dataInfo.author}</label>
+            </div>
+            <label class="title">${dataInfo.title}</label>
         </div>
-        <label class="title">${dataInfo.title}</label>
         `
         selectorDiv.appendChild(dataEntry);
 
         // animation property
         const delay = 0.05*idx + Math.random()*0.1;
         dataEntry.classList.add("gradIn2");
         dataEntry.classList.add("smoothTrans");
-        dataEntry.classList.add("hoverMaxout105");
-        dataEntry.classList.add("hoverBlueWhite");
+        dataEntry.classList.add("hoverMaxout103");
+        // dataEntry.classList.add("hoverBlueWhite");
+        dataEntry.classList.add(dataInfo.uuid);
         dataEntry.style.animationDelay = delay.toString() + "s";
 
-        // on click
-        function getOnClickFunction(): () => void{
-            const uid = dataInfo.uuid;
-            let destURL: string;
-            if (dataInfo["has_file"] && dataInfo["file_type"]===".pdf"){
-                destURL = `${BACKENDURL}/doc/${uid}`
-            }
-            else if (dataInfo["has_file"] && dataInfo["file_type"]===".hpack"){
-                destURL = `${BACKENDURL}/doc/${uid}`
-            }
-            return () => {
-                if (destURL) window.location.href = destURL;
-            }
-        }
 
-        dataEntry.addEventListener("click", getOnClickFunction());
+        dataEntry.addEventListener("mouseover", 
+                                   (function(){ return () => { showEntryAct(dataEntry); }})()
+                                  )
+        dataEntry.addEventListener("mouseleave",
+                                   (function(){ 
+                                       return async () => { 
+                                           // to remove act frame when mouse move out of the entry 
+                                           // and not entering another entry
+                                           // delay execution is used to resolve
+                                           // flashing when hoveing betweeing two entries
+                                           await sleep(200);
+                                           removeEntryAct(dataEntry); 
+                                       }
+                                   })()
+                                  )
     }
 }
 
diff --git a/RBMWeb/frontend/src/libs/timeUtils.ts b/RBMWeb/frontend/src/libs/timeUtils.ts
@@ -1,5 +1,9 @@
 import {getLogger} from "./logging.js";
 
+export function sleep(ms: number): Promise<void>{
+    return new Promise(r => setTimeout(r, ms));
+}
+
 /*
  * return locale time in format: yyyy-mm-dd hh:mm:ss
 * */
diff --git a/RBMWeb/frontend/style/common.css b/RBMWeb/frontend/style/common.css
@@ -3,6 +3,22 @@
     --max-width: 1600px;
     --font-color-gray: #444;
     --font-song: "宋体", SimSun, STSong;
+
+    --cw: #eee;
+    --cd: #2f2d2e;
+
+    /* --c1: #c9e4ca; */
+    /* --c2: #87bba2; */
+    /* --c3: #55828b; */
+    /* --c4: #3b6064; */
+    /* --c5: #364958; */
+
+    --c1: #BDD8EA;
+    --c2: #CCAAE4;
+    --c3: #3B6B8A;
+    --c4: #AD6CB5;
+    --c5: #142852;
+    --c6: #4E1B45;
 }
 
 *{
@@ -48,6 +64,10 @@ input[type="button"]{
     transform: scale(1.05);
 }
 
+.hoverMaxout103:hover{
+    transform: scale(1.05);
+}
+
 .hoverBlueWhite:hover{
     background-color: var(--bg-blue);
     color: white;
diff --git a/RBMWeb/frontend/style/index.css b/RBMWeb/frontend/style/index.css
@@ -15,16 +15,28 @@ input.search_bar{
 div.dataEntry {
     border-radius: 8px;
     border-width: 1px;
-    border-color: #cde;
+    border-color: var(--c2);
     border-style: solid;
 
-    background-color: #def;
+    background-color: var(--c1);
     padding: 10px;
     padding-left: 20px;
     padding-right: 20px;
     margin-top: 8px;
     margin-bottom: 8px;
 
+    display: flex;
+    flex-direction: column;
+}
+
+
+div.dataEntry:hover {
+    box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.25);
+    color: var(--cw);
+    background-color: var(--c6);
+}
+
+div.entryInfo{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -39,3 +51,44 @@ div.yearAuthor {
     min-width: 150px;
     max-width: 200px;
 }
+
+
+div.entryAct{
+    margin-top: 8px;
+    margin-bottom: 8px;
+    width: 100%;
+    max-width: 800px;
+    align-self: center;
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+div.entryAct input[type=button]{
+
+    min-height: 20px;
+    /* min-width: 80px; */
+
+    width: 30%;
+    /* max-width: 400px; */
+
+    margin-right: 10px;
+    margin-left: 10px;
+
+    padding: 2px;
+    background-color: var(--c4);;
+    color: #eee;
+
+    border-radius: 5px;
+    border: 1px solid var(--c2);;
+    box-shadow: none;
+}
+
+div.entryAct input[type=button]:hover{
+    background-color: var(--c3);
+}
+
+/*  */
+/* [> sibling selector ~ <] */
+/* div.entryInfo:hover ~ div.entryAct, div.entryAct:hover{ */
+/*     opacity: 0.5; */
+/* } */
diff --git a/RBMWeb/server.py b/RBMWeb/server.py
@@ -131,6 +131,7 @@ class CommentHandler(tornado.web.StaticFileHandler, RequestHandlerBase):
     # Serve comment (Notes) as webpage
     def get(self, path):
         global db_reader
+        print("Get comment request: {}".format(path))
         self.setDefaultHeader()
         psplit = path.split("/")
         uuid = psplit[0]
@@ -362,9 +363,11 @@ def __init__(self) -> None:
         frontend_root = os.path.join(root, "frontend")
         frontend_root_old = os.path.join(root, "frontendV0")
         handlers = [
+            # Frontend
             (r'/(favicon.ico)', tornado.web.StaticFileHandler, {"path": frontend_root}),
             (r"/frontend/(.*)", tornado.web.StaticFileHandler, {"path": frontend_root, "default_filename" : "index.html"}),
             (r"/main/(.*)", tornado.web.StaticFileHandler, {"path": frontend_root_old, "default_filename" : "index.html"}),
+            # Backend
             (r"/doc/(.*)", DocHandler),
             (r"/hdoc/(.*)", HDocHandler, {"path": "/"}),
             (r"/filelist", FileListHandler),
