wired-elements-ipybus.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "d7a38a85-20b5-45e4-b6df-2152b9346948",
   "metadata": {},
   "source": [
    "# Wired Elements: experimenting Web Components"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "edf6655c-b256-4b9a-a370-a8863f4392d6",
   "metadata": {},
   "source": [
    "* https://github.com/rough-stuff/wired-elements\n",
    "* https://github.com/gbrault/ipybus"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "06631031-93ce-4692-bcfe-5f8635d05a8e",
   "metadata": {},
   "source": [
    "## Libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "3f7ea62d-07af-4ecc-87b7-3583abfb57de",
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import HTML\n",
    "import ipybus"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ee800515-4e3e-4f26-ab70-aa7bf9e5d42d",
   "metadata": {},
   "source": [
    "## Backend: the ipybus widget"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "06e3ae33-d0d7-4e1c-8f2b-119503f794db",
   "metadata": {
    "tags": []
   },
   "source": [
    "### Widgets python implementation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "e98cf56c-14e5-405c-a9ba-c9c34182e439",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b87a0000f14944c68073c910a2538a3e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Base(variable='wired_components')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "feedback = ipybus.Base()\n",
    "feedback.variable = 'wired_components'\n",
    "def feedback_change(value):\n",
    "    global monnom\n",
    "    monnom.value = value['new']\n",
    "feedback.observe(feedback_change,names='value')\n",
    "feedback  # needed, else will not trigger exchanges"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "30fb5a22-3772-42a5-a37d-f8aca44b7837",
   "metadata": {},
   "source": [
    "## Frontend"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1f444025-d26e-431b-8c96-20937ed4893e",
   "metadata": {},
   "source": [
    "### Widget javascript implementation: Using Web Components"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "0ee1ada7-b525-458e-aff2-510e8461634e",
   "metadata": {},
   "outputs": [],
   "source": [
    "class LoadModule(object):\n",
    "    \"\"\"This class is loading modules\"\"\"\n",
    "    def _repr_javascript_(self):\n",
    "        return '''\n",
    "debugger;\n",
    "const modulename = 'wired-elements';\n",
    "let module = document.getElementById('modulename'+'.js');\n",
    "if (module === null){\n",
    "    let css_urls = [{\"url\": 'https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap', \"rel\": \"stylesheet\"},\n",
    "                        {\"url\": \"/files/Video/Labwidgets/style.css\", \"rel\": \"stylesheet\", \"type\": \"text/css\"}\n",
    "                       ];\n",
    "    let js_urls = [{\"url\": 'https://unpkg.com/wired-elements?module', \"id\": modulename+'.js'}\n",
    "                  ];\n",
    "    for (const css_url in css_urls){\n",
    "        let fileref = document.createElement('link');\n",
    "        fileref.rel = css_urls[css_url].rel;\n",
    "        if ('type' in css_urls[css_url]){\n",
    "            fileref.type = css_urls[css_url].type;\n",
    "        }\n",
    "        fileref.href = css_urls[css_url].url;\n",
    "        document.head.append(fileref);\n",
    "    }\n",
    "    for (const js_url in js_urls){\n",
    "        let script_= document.createElement('script');\n",
    "        script_.src = js_urls[js_url].url;\n",
    "        script_.type = \"module\"\n",
    "        script_.id = js_urls[js_url].id\n",
    "        document.head.appendChild(script_);\n",
    "    }\n",
    "}\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "d8ebf9b5-46d0-4d7b-a645-bbb071c85963",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "debugger;\n",
       "const modulename = 'wired-elements';\n",
       "let module = document.getElementById('modulename'+'.js');\n",
       "if (module === null){\n",
       "    let css_urls = [{\"url\": 'https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap', \"rel\": \"stylesheet\"},\n",
       "                        {\"url\": \"/files/Video/Labwidgets/style.css\", \"rel\": \"stylesheet\", \"type\": \"text/css\"}\n",
       "                       ];\n",
       "    let js_urls = [{\"url\": 'https://unpkg.com/wired-elements?module', \"id\": modulename+'.js'}\n",
       "                  ];\n",
       "    for (const css_url in css_urls){\n",
       "        let fileref = document.createElement('link');\n",
       "        fileref.rel = css_urls[css_url].rel;\n",
       "        if ('type' in css_urls[css_url]){\n",
       "            fileref.type = css_urls[css_url].type;\n",
       "        }\n",
       "        fileref.href = css_urls[css_url].url;\n",
       "        document.head.append(fileref);\n",
       "    }\n",
       "    for (const js_url in js_urls){\n",
       "        let script_= document.createElement('script');\n",
       "        script_.src = js_urls[js_url].url;\n",
       "        script_.type = \"module\"\n",
       "        script_.id = js_urls[js_url].id\n",
       "        document.head.appendChild(script_);\n",
       "    }\n",
       "}\n"
      ],
      "text/plain": [
       "<__main__.LoadModule at 0x7f396c555dc0>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "LoadModule()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "4e9197c7-80de-4c79-9cb1-de12fc23c130",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<main>\n",
       "  <wired-card elevation=\"5\">\n",
       "    <h1>wired-elements demo</h1>\n",
       "  </wired-card>\n",
       "  <section>\n",
       "    <wired-input placeholder=\"your name\"></wired-input>\n",
       "    <wired-button elevation=\"2\">Submit</wired-button>\n",
       "  </section>\n",
       "</main>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d7b1a1cdd43547aeb0b046f12568c7c4",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Label(value='')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "monnom = widgets.Label()\n",
    "wired = HTML(\"\"\"\n",
    "<main>\n",
    "  <wired-card elevation=\"5\">\n",
    "    <h1>wired-elements demo</h1>\n",
    "  </wired-card>\n",
    "  <section>\n",
    "    <wired-input placeholder=\"your name\"></wired-input>\n",
    "    <wired-button elevation=\"2\">Submit</wired-button>\n",
    "  </section>\n",
    "</main>\n",
    "\"\"\")\n",
    "display(wired,monnom)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "adf73337-4da8-45bb-a344-5569366b199b",
   "metadata": {},
   "outputs": [],
   "source": [
    "class SubmitLink(object):\n",
    "    \"\"\"This class implement the submit button action\"\"\"\n",
    "    def _repr_javascript_(self):\n",
    "        return '''debugger;\n",
    "const name = document.querySelector(\"wired-input\");\n",
    "const button = document.querySelector(\"wired-button\");\n",
    "button.addEventListener(\"click\", () => {\n",
    "    // window.alert(`Hello ${name.value.trim()}!`);\n",
    "    wired_components.set('value',name.value.trim());\n",
    "    wired_components.save();\n",
    "});\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "3d2dfede-85dc-4f73-a06b-03dd82276105",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "debugger;\n",
       "const name = document.querySelector(\"wired-input\");\n",
       "const button = document.querySelector(\"wired-button\");\n",
       "button.addEventListener(\"click\", () => {\n",
       "    // window.alert(`Hello ${name.value.trim()}!`);\n",
       "    wired_components.set('value',name.value.trim());\n",
       "    wired_components.save();\n",
       "});\n"
      ],
      "text/plain": [
       "<__main__.SubmitLink at 0x7f396c446790>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "SubmitLink()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ef8f2397-a60a-4975-b18f-d4f0d92de7a5",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}