first round of fixes while running tests

pyscript · fpliger · Jul 3, 2024 · Jun 4, 2024 · Jun 4, 2024 · Jun 4, 2024
commit 903a63f86bd4607e7238792a5627ce6ff212f4ce
diff --git a/pyscript.core/src/stdlib/pyscript/event_handling.py b/pyscript.core/src/stdlib/pyscript/event_handling.py
@@ -19,16 +19,16 @@ def when(event_type=None, selector=None):
     """
 
     def decorator(func):
+
+        from pyscript.web.elements import Element, ElementCollection
         if isinstance(selector, str):
             elements = document.querySelectorAll(selector)
         else:
             # TODO: This is a hack that will be removed when pyscript becomes a package
             #       and we can better manage the imports without circular dependencies
-            from pyweb import pydom
-
-            if isinstance(selector, pydom.Element):
+            if isinstance(selector, Element):
                 elements = [selector._js]
-            elif isinstance(selector, pydom.ElementCollection):
+            elif isinstance(selector, ElementCollection):
                 elements = [el._js for el in selector]
             else:
                 raise ValueError(
@@ -39,7 +39,6 @@ def decorator(func):
             sig = inspect.signature(func)
             # Function doesn't receive events
             if not sig.parameters:
-
                 def wrapper(*args, **kwargs):
                     func()
 

diff --git a/pyscript.core/src/stdlib/pyscript/web/dom.py b/pyscript.core/src/stdlib/pyscript/web/dom.py
diff --git a/pyscript.core/src/stdlib/pyscript/web/elements.py b/pyscript.core/src/stdlib/pyscript/web/elements.py
@@ -31,7 +31,7 @@ def warn(*args, **kwargs):
     def JsProxy(obj):
         return obj
 
-from pyscript import document, when, window
+from pyscript import document, window
 # from pyscript.web import dom as pydom
 
 #: A flag to show if MicroPython is the current Python interpreter.
@@ -1392,3 +1392,87 @@ def __init__(self, layout, content=None, gap=None, **kwargs):
         # TODO: This should be a property
         if not gap is None:
             self.style["gap"] = gap
+
+
+class StyleCollection:
+    def __init__(self, collection: "ElementCollection") -> None:
+        self._collection = collection
+
+    def __get__(self, obj, objtype=None):
+        return obj._get_attribute("style")
+
+    def __getitem__(self, key):
+        return self._collection._get_attribute("style")[key]
+
+    def __setitem__(self, key, value):
+        for element in self._collection._elements:
+            element.style[key] = value
+
+    def remove(self, key):
+        for element in self._collection._elements:
+            element.style.remove(key)
+
+
+class ElementCollection:
+    def __init__(self, elements: [Element]) -> None:
+        self._elements = elements
+        self.style = StyleCollection(self)
+
+    def __getitem__(self, key):
+        # If it's an integer we use it to access the elements in the collection
+        if isinstance(key, int):
+            return self._elements[key]
+        # If it's a slice we use it to support slice operations over the elements
+        # in the collection
+        elif isinstance(key, slice):
+            return ElementCollection(self._elements[key])
+
+        # If it's anything else (basically a string) we use it as a selector
+        # TODO: Write tests!
+        elements = self._element.querySelectorAll(key)
+        return ElementCollection([Element(el) for el in elements])
+
+    def __len__(self):
+        return len(self._elements)
+
+    def __eq__(self, obj):
+        """Check if the element is the same as the other element by comparing
+        the underlying JS element"""
+        return isinstance(obj, ElementCollection) and obj._elements == self._elements
+
+    def _get_attribute(self, attr, index=None):
+        if index is None:
+            return [getattr(el, attr) for el in self._elements]
+
+        # As JQuery, when getting an attr, only return it for the first element
+        return getattr(self._elements[index], attr)
+
+    def _set_attribute(self, attr, value):
+        for el in self._elements:
+            setattr(el, attr, value)
+
+    @property
+    def html(self):
+        return self._get_attribute("html")
+
+    @html.setter
+    def html(self, value):
+        self._set_attribute("html", value)
+
+    @property
+    def value(self):
+        return self._get_attribute("value")
+
+    @value.setter
+    def value(self, value):
+        self._set_attribute("value", value)
+
+    @property
+    def children(self):
+        return self._elements
+
+    def __iter__(self):
+        yield from self._elements
+
+    def __repr__(self):
+        return f"{self.__class__.__name__} (length: {len(self._elements)}) {self._elements}"
diff --git a/pyscript.core/test/pyscript_dom/tests/test_dom.py b/pyscript.core/test/pyscript_dom/tests/test_dom.py
@@ -4,23 +4,13 @@
 from pyscript import document, when
 # from pyweb import pydom
 from pyscript.web import dom
+from pyscript.web import elements as el
 
 
 class TestDocument:
     def test__element(self):
         assert dom._js == document
 
-    def test_no_parent(self):
-        assert dom.parent is None
-
-    def test_create_element(self):
-        new_el = dom.create("div")
-        assert isinstance(new_el, dom.BaseElement)
-        assert new_el._js.tagName == "DIV"
-        # EXPECT the new element to be associated with the document
-        assert new_el.parent == None
-
-
 def test_getitem_by_id():
     # GIVEN an existing element on the page with a known text content
     id_ = "test_id_selector"
@@ -33,7 +23,7 @@ def test_getitem_by_id():
     # the JS document.querySelector API would return
     assert document.querySelector(selector).innerHTML == div.html == txt
     # EXPECT the results to be of the right types
-    assert isinstance(div, dom.BaseElement)
+    assert isinstance(div, el.BaseElement)
     assert isinstance(result, dom.ElementCollection)
 
 
@@ -77,8 +67,8 @@ def test_query(self):
 
         # EXPECT the new element to be associated with the parent
         assert div.parent == parent_div
-        # EXPECT the new element to be a BaseElement
-        assert isinstance(div, dom.BaseElement)
+        # EXPECT the new element to be a el.BaseElement
+        assert isinstance(div, el.BaseElement)
         # EXPECT the div attributes to be == to how they are configured in the page
         assert div.html == "Child 1"
         assert div.id == "test_selector_w_children_child_1"
@@ -105,7 +95,7 @@ def test_append_element(self):
         id_ = "element-append-tests"
         div = dom[f"#{id_}"][0]
         len_children_before = len(div.children)
-        new_el = div.create("p")
+        new_el = el.p('new element')
         div.append(new_el)
         assert len(div.children) == len_children_before + 1
         assert div.children[-1] == new_el
@@ -114,7 +104,7 @@ def test_append_js_element(self):
         id_ = "element-append-tests"
         div = dom[f"#{id_}"][0]
         len_children_before = len(div.children)
-        new_el = div.create("p")
+        new_el = el.p('new element')
         div.append(new_el._js)
         assert len(div.children) == len_children_before + 1
         assert div.children[-1] == new_el
@@ -243,9 +233,10 @@ def on_click(event):
 
 class TestCreation:
     def test_create_document_element(self):
-        new_el = dom.create("div")
+        # TODO: This test should probably be removed since it's testing the elements module
+        new_el = el.div
         new_el.id = "new_el_id"
-        assert isinstance(new_el, dom.BaseElement)
+        assert isinstance(new_el, el.BaseElement)
         assert
7777
 new_el._js.tagName == "DIV"
         # EXPECT the new element to be associated with the document
         assert new_el.parent == None
@@ -259,11 +250,13 @@ def test_create_element_child(self):
 
         # Creating an element from another element automatically creates that element
         # as a child of the original element
-        new_el = parent_div.create(
-            "p", classes=["code-description"], html="Ciao PyScripters!"
-        )
+        # new_el = parent_div.create(
+        #     "p", classes=["code-description"], html="Ciao PyScripters!"
+        # )
+        new_el = el.p(classes=["code-description"], html="Ciao PyScripters!")
+        parent_div.append(new_el)
 
-        assert isinstance(new_el, dom.BaseElement)
+        assert isinstance(new_el, el.BaseElement)
         assert new_el._js.tagName == "P"
         # EXPECT the new element to be associated with the document
         assert new_el.parent == parent_div