change photo_build with w3c

cnas/genhtml/photo_builder.py

@@ -1,36 +1,50 @@
 from genhtml.w3c.tag import tag
+from genhtml.w3c.figure import figure
+from genhtml.w3c.div import div
+from genhtml.w3c.image import image
 
 class photo_builder(tag):
-    div_id = 0
+    auto_index = 0
 
     def __init__(self, *args, **kwargs):
         # no inheritance
         super().__init__([], {})
 
+        photo_builder.auto_index += 1
+
         image_file = kwargs.get("src")
         file_path = kwargs.get("path")
-        file_style = kwargs.get("style")
-
-        photo_builder.div_id += 1
-
-        display = "display:visible;"\
-            if file_style == "folder" else "display:none;"
-
-        div_id = f"photo{photo_builder.div_id}"\
-            if file_style != "folder" else ""
-
-        class_type = "folder" if file_style == "folder" else "picture"
-
-        self.set_content(
-f"""
-<div data-target="{div_id}" data-path="{file_path}" class="column is-one-quarter {class_type} hoverArea modal-button js-modal-trigger">
-  <figure class="image is-square div-bottom">
-    <img src="{image_file}" class="rounded" style="z-index:-1;">
-    <div id="{div_id}" class="box is-align-content-center"
-      style="{display} width:100%; background-color:rgba(0,0,0,0.6);">
-      <div class="center-text">{file_path}</div>
-    </div>
-  </figure>
-</div>
-"""
-        ).make_element()
+        file_type = kwargs.get("type")
+
+        if file_type == "folder":
+            div_id = ""
+            display_class = "display:visible;"
+        else:
+            div_id = f"photo_{photo_builder.auto_index}"
+            display_class = "display:none;"
+
+        _div = div(
+            figure(
+                image(
+                    src=f"{image_file}",
+                    style="z-index:-1;",
+                    class_="rounded"
+                ),
+                div(
+                    div(class_="center-text",
+                        content=f"{file_path}"),
+                    id_=f"{div_id}",
+                    class_="box is-align-content-center",
+                    style=f"{display_class} width:100%;"\
+                          f"background-color:rgba(0,0,0,0.6);",
+
+                    ),
+                    class_="image is-squre div-bottom",
+                ),
+                data_target=f"{div_id}",
+                data_path=f"{file_path}",
+                class_=f"column is-one-quarter modal-button"\
+                      f"js-modal-trigger hoverArea {file_type}"
+            )
+
+        self.append(_div)

cnas/genhtml/w3c/br.py

@@ -1,5 +1,6 @@
 from genhtml.w3c.tag import tag
 
+
 class br(tag):
     def __init__(self, *args, **kwargs):
         super().__init__([], {})

cnas/genhtml/w3c/figure.py

@@ -0,0 +1,7 @@
+from genhtml.w3c.tag import tag
+
+
+class figure(tag):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.set_tag("figure").make_element()

cnas/genhtml/w3c/hr.py

@@ -1,5 +1,6 @@
 from genhtml.w3c.tag import tag
 
+
 class hr(tag):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)

cnas/genhtml/w3c/script.py

@@ -1,5 +1,6 @@
 from genhtml.w3c.tag import tag
 
+
 class script(tag):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)

cnas/genhtml/w3c/tag.py

@@ -27,10 +27,8 @@ def __init__(self, *args, **kwargs):
             if isinstance(_t, tag):
                 self._children.append(str(_t))
         for key, value in kwargs.items():
-            if key == "data_path":
-                key = "data-path"
-            if key == "py_click":
-                key = "py-click"
+            if key in ["data_path", "py_click", "data_target"]:
+                key = key.replace("_", "-")
             if key == "content":
                 self._content = value
             else:
@@ -58,20 +56,33 @@ def set_tag(self, tag_, is_void_element = False):
         self._is_void_element = is_void_element
         return self
 
+    def safe_value(self, value):
+        if " " in value:
+            return f"'{value}'"
+        return value
+
+    def safe_key(self, key):
+        reserved_ = ["class_", "type_", "id_"]
+        if key in reserved_:
+            key = key[:-1]
+        return key
+
     def make_element(self):
         if self._tag == "":
             return self
 
         _attr = ""
         for _key, _value in self._attributes.items():
-            # class is python keyword
-            _key = "class" if "class_" == _key else _key
-            _attr += f" {_key}={_value}"
+            # if key is reserved python keyword,
+            # remove the underscore at the end of the keyword.
+            __key = self.safe_key(_key)
+            __value = self.safe_value(_value)
+            _attr += f" {__key}={__value}"
 
         if self._is_void_element:
-            self._open_tag = f"<{self._tag}{_attr}/>"
+            self._open_tag = f"<{self._tag} {_attr} />"
         else:
-            self._open_tag = f"<{self._tag}{_attr}>"
+            self._open_tag = f"<{self._tag} {_attr} >"
             self._close_tag = f"</{self._tag}>"
         return self
 

cnas/pages/gallery.py

@@ -98,7 +98,7 @@ def __str__(self):
             br()
         )
 
-        _div = div(class_="'columns is-multiline'")
+        _div = div(class_="columns is-multiline")
         _div.append(
             div(id="rel_path", data_path=f"{self.r_path}"))
 

cnas/pages/index.py

@@ -20,20 +20,20 @@ def __str__(self):
                 _body.append(para(content="index"))
                 _body.append(
                     script(
-                        type="py",
+                        type_="py",
                         src="'static/main.py'",
                         config="'static/pyscript.toml'"
                     )
                 )
                 _body.append(
                     button(
-                        id="get_joke",
+                        id_="get_joke",
                         py_click="get_joke"
                     ).set_content("button")
                 )
                 _body.append(
                     div(
-                        id="jokes"
+                        id_="jokes"
                     )
                 )