show / hide file name

fnwinter · Sep 21, 2024 · 69491d2 · 69491d2
1 parent 801ee31
commit 69491d2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/cnas/genhtml/photo_builder.py b/cnas/genhtml/photo_builder.py
@@ -1,22 +1,33 @@
 from genhtml.w3c.tag import tag
 
 class photo_builder(tag):
+    div_id = 0
+
     def __init__(self, *args, **kwargs):
         # no inheritance
         super().__init__([], {})
 
         image_file = kwargs.get("src")
         file_path = kwargs.get("path")
-        file_type = kwargs.get("type")
+        file_style = kwargs.get("style")
+
+        photo_builder.div_id += 1
+
+        init_display = "display:visible;"\
+            if file_style == "folder" else "display:none;"
+
+        div_id = f"photo{photo_builder.div_id}"\
+            if file_style != "folder" else ""
 
         self.set_content(
 f"""
-<div data-path="{file_path}" class="column is-one-quarter picture">
+<div data-target="{div_id}" data-path="{file_path}" class="column is-one-quarter picture hoverArea">
   <figure class="image is-square" style="align-items:flex-end; display:flex;">
     <img src="{image_file}" class="rounded" style="z-index:-1;">
     <div
-      class="box is-align-content-center"
-      style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:wrap; background-color:rgba(0, 0, 0, 0.6);">
+      id="{div_id}"
+      class="box is-align-content-center file_name"
+      style="{init_display} width:100%; overflow:hidden; text-overflow:ellipsis; white-space:wrap; background-color:rgba(0, 0, 0, 0.6);">
       {file_path}
     </div>
   </figure>

diff --git a/cnas/pages/gallery.py b/cnas/pages/gallery.py
@@ -53,7 +53,9 @@ def set_current_path(self):
     def get_files(self):
         if self.current_path != self.gallery_path:
             self.files.append(
-                photo_builder(src="static/images/up.png", path=".."))
+                photo_builder(
+                    src="static/images/up.png",
+                    path="..", style="folder"))
 
         # folder
         for _folder in os.listdir(self.current_path):
@@ -62,7 +64,8 @@ def get_files(self):
                 self.files.append(
                     photo_builder(
                         src="static/images/folder.png",
-                        path=_folder))
+                        path=_folder,
+                        style="folder"))
 
         # images
         for _file in os.listdir(self.current_path):

diff --git a/cnas/static/javascripts/cnas_gallery.js b/cnas/static/javascripts/cnas_gallery.js
@@ -29,4 +29,14 @@ $(document).ready(function(){
         handleClick(path);
     });
 
+    $('.hoverArea').hover(
+      function() {
+          const targetDiv = $(this).data('target');
+          $('#' + targetDiv).stop(true, true).fadeIn(500);
+      },
+      function() {
+          const targetDiv = $(this).data('target');
+          $('#' + targetDiv).stop(true, true).fadeOut(500);
+      }
+    );
 });