Add progressbar and switch widgets to web platform.

changes/1901.feature.rst

@@ -0,0 +1 @@
+New ProgressBar and Switch widgets were added to the web platform implementation.

docs/reference/data/widgets_by_platform.csv

@@ -13,10 +13,10 @@ Label,General Widget,:class:`~toga.widgets.label.Label`,Text label,|y|,|y|,|y|,|
 MultilineTextInput,General Widget,:class:`~toga.widgets.multilinetextinput.MultilineTextInput`,Multi-line Text Input field,|b|,|b|,|b|,|b|,|b|,
 NumberInput,General Widget,:class:`~toga.widgets.numberinput.NumberInput`,Number Input field,|b|,|b|,|b|,|b|,|b|,
 PasswordInput,General Widget,:class:`~toga.widgets.passwordinput.PasswordInput`,A text input that hides it’s input,|b|,|b|,|b|,|b|,|b|,
-ProgressBar,General Widget,:class:`~toga.widgets.progressbar.ProgressBar`,Progress Bar,|y|,|y|,|y|,|y|,|y|,
+ProgressBar,General Widget,:class:`~toga.widgets.progressbar.ProgressBar`,Progress Bar,|y|,|y|,|y|,|y|,|y|,|b|
 Selection,General Widget,:class:`~toga.widgets.selection.Selection`,Selection,|b|,|b|,|b|,|b|,|b|,
 Slider,General Widget,:class:`~toga.widgets.slider.Slider`,Slider,|y|,|y|,|y|,|y|,|y|,
-Switch,General Widget,:class:`~toga.widgets.switch.Switch`,Switch,|y|,|y|,|y|,|y|,|y|,
+Switch,General Widget,:class:`~toga.widgets.switch.Switch`,Switch,|y|,|y|,|y|,|y|,|y|,|b|
 Table,General Widget,:class:`~toga.widgets.table.Table`,Table of data,|b|,|b|,|b|,,|b|,
 TextInput,General Widget,:class:`~toga.widgets.textinput.TextInput`,Text Input field,|b|,|b|,|b|,|b|,|b|,|b|
 TimePicker,General Widget,:class:`~toga.widgets.timepicker.TimePicker`,An input for times,,,|b|,,|b|,

web/src/toga_web/factory.py

@@ -20,12 +20,14 @@
 # from .widgets.numberinput import NumberInput
 # from .widgets.optioncontainer import OptionContainer
 # from .widgets.passwordinput import PasswordInput
-# from .widgets.progressbar import ProgressBar
+from .widgets.progressbar import ProgressBar
+
 # from .widgets.scrollcontainer import ScrollContainer
 # from .widgets.selection import Selection
 # from .widgets.slider import Slider
 # from .widgets.splitcontainer import SplitContainer
-# from .widgets.switch import Switch
+from .widgets.switch import Switch
+
 # from .widgets.table import Table
 from .widgets.textinput import TextInput
 
@@ -61,12 +63,12 @@ def not_implemented(feature):
     # 'NumberInput',
     # 'OptionContainer',
     # 'PasswordInput',
-    # 'ProgressBar',
+    "ProgressBar",
     # 'ScrollContainer',
     # 'Selection',
     # 'Slider',
     # 'SplitContainer',
-    # 'Switch',
+    "Switch",
     # 'Table',
     "TextInput",
     # 'Tree',

web/src/toga_web/libs.py

@@ -7,6 +7,18 @@
     js = None
 
 
+try:
+    # Try to import pyodide from the PyScript namespace.
+    import pyodide
+except ModuleNotFoundError:
+    # To ensure the code can be imported, provide a js symbol
+    # as a fallback
+    pyodide = None
+
+
+create_proxy = pyodide.create_proxy if pyodide else lambda f: f
+
+
 def create_element(
     tag,
     id=None,

web/src/toga_web/widgets/progressbar.py

@@ -0,0 +1,47 @@
+from .base import Widget
+
+
+class ProgressBar(Widget):
+    def create(self):
+        self.native = self._create_native_widget("sl-progress-bar")
+        self._is_running = False
+        self._value = 0
+        self._max = 0
+
+    def is_running(self):
+        return self._is_running
+
+    def get_value(self):
+        return self._value
+
+    def set_value(self, value):
+        self._value = value
+        self.native.value = self.percentage
+
+    def get_max(self):
+        return self._max
+
+    def set_max(self, value):
+        self._max = value
+        if value is None:
+            if self._is_running:
+                self.native.indeterminate = True
+        else:
+            self.native.value = self.percentage
+            self.native.indeterminate = False
+
+    def start(self):
+        self._is_running = True
+        if self._max is None:
+            self.native.indeterminate = True
+
+    def stop(self):
+        self._is_running = False
+        self.native.indeterminate = False
+
+    @property
+    def percentage(self):
+        if self._max is None or self._max == 0:
+            return 0
+
+        return self._value / self._max * 100

web/src/toga_web/widgets/switch.py

@@ -0,0 +1,27 @@
+from toga_web.libs import create_proxy
+
+from .base import Widget
+
+
+class Switch(Widget):
+    def create(self):
+        self.native = self._create_native_widget("sl-switch")
+        self.native.addEventListener("sl-change", create_proxy(self.dom_onchange))
+
+    def dom_onchange(self, event):
+        self.interface.on_change(None)
+
+    def get_text(self):
+        return self.native.innerHTML
+
+    def set_text(self, text):
+        self.native.innerHTML = text
+
+    def get_value(self):
+        return self.native.checked
+
+    def set_value(self, value):
+        old_value = self.get_value()
+        self.native.checked = value
+        if value != old_value:
+            self.interface.on_change(self.interface)