add PyListTemplate and PyItemTemplate so that classes implementing list and list item widgets can subclass from it and hide complexity to users

fpliger · fpliger · commit a6d00318c39a · 2022-04-20T12:48:25.000-05:00
diff --git a/pyscriptjs/examples/pylist.py b/pyscriptjs/examples/pylist.py
@@ -14,8 +14,19 @@ def create(what, id_=None, classes=''):
   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")
+  
 
-class PyList:
   def __init__(self, parent):
     self.parent = parent
     self._children = []
@@ -25,8 +36,8 @@ def connect(self):
     self.md = main_div = document.createElement('div');
     main_div.id = self.id + "-list-tasks-container"
 
-    for klass in "flex flex-col-reverse mt-4".split(' '):
-      main_div.classList.add(klass)
+    if self.theme:
+      self.theme.theme_it(main_div)
     
     self.parent.appendChild(main_div)
 
@@ -35,12 +46,24 @@ def add(self, data, labels):
     return self._add(child)
 
   def _add(self, child_elem):
-    self._children.append(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
 
-class PyItem(Element):
+  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)}"
@@ -63,22 +86,48 @@ def create(self):
 </label>
     """
 
-    check = new_child.select('input').element
-    check.onclick = self.check_task
+    # check = new_child.select('input').element
+    # check.onclick = self.check_task
     console.log('returning')
     return new_child
 
-  def check_task(self, evt=None):
-    self.data['done'] = not self.data['done']
-    if self.data['done']:
+  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
+
+
+class PyItem(PyItemTemplate):
+  def on_click(self, evt=None):
+    self.data['done'] = not self.data['done']
+    self.strike(self.data['done'])
   
+    self.select('input').element.checked = self.data['done']
+
+
 def add_task(*ags, **kws):
   console.log(new_task_content.value) 
-  console.log('adding', myList)
+  console.log('adding1', myList)
   task = {
     "content": new_task_content.value, 
     "done": False,
diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte
@@ -53,7 +53,7 @@
       for (let initializer of $postInitializers){
         initializer();
       }
-    }, 5000);
+    }, 3000);
 
   }
 
diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts
@@ -176,13 +176,14 @@ export class BaseEvalElement extends HTMLElement {
         }
 
         connectedCallback() {
-            console.log(this.name, 'connected!!!!')
+            console.log(this.name, 'OOOOOOO connected!!!!')
             this.eval(this.code).then(() => {
                 this.proxy = this.proxyClass(this);
                 console.log('proxy', this.proxy);
                 this.proxy.connect();
                 this.registerWidget();
               });
+              console.log(this.name, 'DOOOOONE connected!!!!')
         }
 
         async registerWidget(){

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@`
`53`	`53`	`for (let initializer of $postInitializers){`
`54`	`54`	`initializer();`
`55`	`55`	`}`
`56`		`- }, 5000);`
	`56`	`+ }, 3000);`
`57`	`57`
`58`	`58`	`}`
`59`	`59`
Original file line number	Diff line number	Diff line change
`@@ -176,13 +176,14 @@ export class BaseEvalElement extends HTMLElement {`
`176`	`176`	`}`
`177`	`177`
`178`	`178`	`connectedCallback() {`
`179`		`- console.log(this.name, 'connected!!!!')`
	`179`	`+ console.log(this.name, 'OOOOOOO connected!!!!')`
`180`	`180`	`this.eval(this.code).then(() => {`
`181`	`181`	`this.proxy = this.proxyClass(this);`
`182`	`182`	`console.log('proxy', this.proxy);`
`183`	`183`	`this.proxy.connect();`
`184`	`184`	`this.registerWidget();`
`185`	`185`	`});`
	`186`	`+ console.log(this.name, 'DOOOOONE connected!!!!')`
`186`	`187`	`}`
`187`	`188`
`188`	`189`	`async registerWidget(){`