Iterate

Author: martinRenou

examples/simple-yjs-widget/notebooks/simple.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "id": "2a245ed3-5838-4be6-ad5e-9fa75b9c7ab0",
    "metadata": {},
    "outputs": [],
@@ -13,7 +13,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "id": "6d9538c9-4858-4c9d-b347-18965660115d",
    "metadata": {},
    "outputs": [],
@@ -31,7 +31,7 @@
     "\n",
     "    @property\n",
     "    def value(self):\n",
-    "        return self._state.get('value')\n",
+    "        return self._state['value']\n",
     "\n",
     "    @value.setter\n",
     "    def value(self, v):\n",
@@ -64,28 +64,55 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "id": "8cfb218c-e6fe-48da-a6ee-599bfe524e15",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.ywidget-view+json": {
+       "model_id": "4a2524e43c7244d9b93aeb95383cdc85",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "<__main__.MySlider object at 0x7fe44436af90>"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
    "source": [
     "w = MySlider()\n",
     "w"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 4,
    "id": "9269a3f1-a061-478f-8728-7393a4aec2d0",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "50.0"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
    "source": [
     "w.value"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 5,
    "id": "8ac7ea5c-8315-44eb-aa62-f223f86d267d",
    "metadata": {},
    "outputs": [],
@@ -95,7 +122,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 6,
    "id": "bd2c92fb-9653-4de5-8a20-d463205f3a9e",
    "metadata": {},
    "outputs": [],
@@ -105,9 +132,30 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 7,
    "id": "3a5680c6-77ae-4f71-a982-b3447dcb4fd0",
    "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "36.0"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "w.value"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "839e129b-4040-4293-9287-abe4bfd5491d",
+   "metadata": {},
    "outputs": [],
    "source": []
   }

examples/simple-yjs-widget/src/index.ts

@@ -30,20 +30,29 @@ class MySlider {
 
     this._stateChanged();
 
+    this.slider.onchange = this._sliderChanged.bind(this);
+
     node.appendChild(this.slider);
   }
 
   _stateChanged(): void {
-    this.slider.setAttribute('min', this.state.get('min'));
-    this.slider.setAttribute('max', this.state.get('max'));
-    this.slider.setAttribute('value', this.state.get('value'));
-    this.slider.setAttribute('step', this.state.get('step'));
+    this.slider.min = this.state.get('min');
+    this.slider.max = this.state.get('max');
+    this.slider.value = this.state.get('value');
+    this.slider.step = this.state.get('step');
+  }
+
+  _sliderChanged(): void {
+    this.state.set('min', parseInt(this.slider.min ?? '0'));
+    this.state.set('max', parseInt(this.slider.max ?? '100'));
+    this.state.set('value', parseInt(this.slider.value ?? '50'));
+    this.state.set('step', parseInt(this.slider.step ?? '1'));
   }
 
   state: Y.Map<any>;
   yModel: IJupyterYModel;
   node: HTMLElement;
-  slider: HTMLElement;
+  slider: HTMLInputElement;
 }
 
 const simple: JupyterFrontEndPlugin<void> = {