move templates to interpreter

pyscriptjs/src/interpreter.ts

@@ -51,6 +51,10 @@ class Element:
         self._id = element_id
         self._element = element
 
+    @property
+    def id(self):
+        return self._id
+
     @property
     def element(self):
         """Return the dom element"""
@@ -115,6 +119,131 @@ class Element:
     def add_class(self, classname):
         self.element.classList.add(classname)
 
+def add_classes(element, class_list):
+  for klass in class_list.split(' '):
+      element.classList.add(klass)
+
+def create(what, id_=None, classes=''):
+  element = document.createElement(what)
+  if id_:
+    element.id = id_
+  add_classes(element, classes)
+  return Element(id_, element)
+
+class PyWidgetTheme:
+  def __init__(self, main_style_classes):
+    self.main_style_classes = main_style_classes
+
+  def theme_it(self, widget):
+    for klass in self.main_style_classes.split(' '):
+      widget.classList.add(klass)
+
+
+class PyListTemplate:
+  theme = PyWidgetTheme("flex flex-col-reverse mt-4")
+  
+
+  def __init__(self, parent):
+    self.parent = parent
+    self._children = []
+    self._id = self.parent.id
+
+  def connect(self):
+    self.md = main_div = document.createElement('div');
+    main_div.id = self._id + "-list-tasks-container"
+
+    if self.theme:
+      self.theme.theme_it(main_div)
+    
+    self.parent.appendChild(main_div)
+
+  def add(self, child):
+    child.register_parent(self)
+    return self._add(child)
+
+  def _add(self, child_elem):
+    console.log("appending child", child_elem.element)
+    self.pre_child_append(child_elem)
+    child_elem.pre_append()
+    self._children.append(child_elem)
+    self.md.appendChild(child_elem.create().element)
+    child_elem.post_append()
+    self.child_appended(child_elem)
+    return child_elem
+
+  def pre_child_append(self, child):
+    pass
+
+  def child_appended(self, child):
+    """Overwrite me to define logic"""
+    pass
+
+
+class PyItemTemplate(Element):
+  label_fields = None
+
+  def __init__(self, data, labels=None, state_key=None, parent=None):
+    self.data = data
+    
+    self.register_parent(parent)
+
+    if not labels:
+      labels = list(self.data.keys())
+    self.labels = labels
+
+    self.state_key = state_key
+
+    super().__init__(self._id)
+
+  def register_parent(self, parent):
+    self._parent = parent
+    if parent:
+      self._id = f"{self._parent._id}-c-{len(self._parent._children)}"
+      self.data['id'] = self._id
+    else:
+      self._id = None
+
+  def create(self):
+    console.log('creating section')
+    new_child = create('section', self._id, "task bg-white my-1")
+    console.log('creating values')
+    
+    console.log('creating innerHtml')
+    new_child._element.innerHTML = f"""
+<label for="flex items-center p-2 ">
+  <input class="mr-2" type="checkbox" class="task-check">
+  <p class="m-0 inline">{self.render_content()}</p>
+</label>
+    """
+
+    console.log('returning')
+    return new_child
+
+  def on_click(self, evt):
+    pass
+
+  def pre_append(self):
+    pass
+
+  def post_append(self):
+    self.element.click = self.on_click
+    self.element.onclick = self.on_click
+
+    self._post_append()
+
+  def _post_append(self):
+    pass
+
+  def strike(self, value):
+    if value:
+      self.add_class("line-through")
+    else:
+      self.remove_class("line-through")
+
+  def render_content(self):
+    return ' - '.join([self.data[f] for f in self.labels])
+    
+
 class OutputCtxManager:
     def __init__(self, out=None, output_to_console=True, append=True):
         self._out = out