move templates to interpreter

pyscriptjs/examples/pylist.py

@@ -3,116 +3,6 @@ from xml.dom.pulldom import END_ELEMENT
 from js import console, HTMLElement, document
 
 
-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, data, labels):
-    child = PyItem(self, data, labels)
-    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):
-  def __init__(self, parent, data, labels):
-    self._parent = parent
-    self.id = f"{self._parent.id}-c-{len(self._parent._children)}"
-    self.data = data
-    self.data['id'] = self.id
-    self.labels = labels
-
-    super().__init__(self.id)
-
-  def create(self):
-    console.log('creating section')
-    new_child = create('section', self.id, "task bg-white my-1")
-    console.log('creating values')
-    values = ' - '.join([self.data[f] for f in self.labels])
-    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">{values}</p>
-</label>
-    """
-
-    # check = new_child.select('input').element
-    # check.onclick = self.check_task
-    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")
-    
-
 class PyList(PyListTemplate):
   pass
 
@@ -124,14 +14,11 @@ class PyItem(PyItemTemplate):
   
     self.select('input').element.checked = self.data['done']
 
+  def display(self):
+    return self.data['content']
+
 
 def add_task(*ags, **kws):
-  console.log(new_task_content.value) 
+  task = { "content": new_task_content.value,  "done": False, "created_at": dt.now() }
-  console.log('adding1', myList)
+  myList.add(PyItem(task, labels=['content'], state_key="done"))
-  task = {
-    "content": new_task_content.value, 
-    "done": False,
-    "created_at": dt.now()
-  }
-  myList.add(task, ['content'])
   new_task_content.clear()

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