{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5c557435-c052-4622-8023-81ed6f63f231",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension('floatpanel')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a44c5eae-9c73-4626-96ff-019cf959d647",
   "metadata": {},
   "source": [
    "The `FloatPanel` layout provides a draggable container which can be placed inside its parent or be completely free floating. It is built on-top of [jsPanel](https://jspanel.de/) and is highly customizable. It has a list-like API with methods to `append`, `extend`, `clear`, `insert`, `pop`, `remove` and `__setitem__`, which make it possible to interactively update and modify the layout. Components inside it are laid out like a `Column`.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "* **`contained`** (boolean): Whether the component is contained within the parent container or completely free floating.\n",
    "* **`config`** (dict): Additional [jsPanel configuration](https://jspanel.de/#options/overview) with precedence over parameter values.\n",
    "* **`objects`** (list): The list of objects to display in the Column, should not generally be modified directly except when replaced in its entirety.\n",
    "* **`position`**: The initial position if the container is free-floating.\n",
    "* **`offsetx`** (int): Horizontal offset in pixels.\n",
    "* **`offsety`** (int): Vertical offset in pixels.\n",
    "* **`theme`** (str): The theme can be one of:\n",
    "    - Built-ins: 'default', 'primary', 'secondary', 'info',\n",
    "      'success', 'warning', 'danger', 'light', 'dark' and 'none'\n",
    "    - HEX, RGB and HSL color values like '#123456' Any\n",
    "      standardized color name like 'forestgreen' and color names\n",
    "      from the Material Design Color System like 'purple900'\n",
    "    - Additionally a theme string may include one of the modifiers\n",
    "      'filled', 'filledlight', 'filleddark' or 'fillcolor'\n",
    "      separated from the theme color by a space like 'primary\n",
    "* **`status`** (str): Current status on the Panel, can be one of \"normalized\", \"maximized\", \"minimized\", \"smallified\", \"smallifiedmax\" or \"closed\" .\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2b3a8784-7e78-4414-a1a5-600b0ff14664",
   "metadata": {},
   "source": [
    "A `FloatPanel` layout can either be instantiated as empty and populated after the fact or using a list of objects provided as positional arguments. If the objects are not already panel components they will each be converted to one using the `pn.panel` conversion method.\n",
    "\n",
    "When laying out the `FloatPanel` it can either be `contained` in another container:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9fd46bf9-a63e-457c-bcc2-a1578b8f9bda",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "w1 = pn.widgets.TextInput(name='Text:')\n",
    "w2 = pn.widgets.FloatSlider(name='Slider')\n",
    "\n",
    "floatpanel = pn.layout.FloatPanel(w1, w2, name='Basic FloatPanel', margin=20)\n",
    "\n",
    "pn.Column('**Example: Basic `FloatPanel`**', floatpanel, height=250)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bc468940-9679-4d8e-b491-53f442d7d746",
   "metadata": {},
   "source": [
    "Alternatively we can make the `FloatPanel` free floating:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "090d239b-c073-4d57-acc7-2beb8408edcf",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "pn.layout.FloatPanel(\"Try dragging me around.\", name=\"Free Floating FloatPanel\", contained=False, position='center')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1789615a-b143-4bdd-9279-2a755e8b493b",
   "metadata": {},
   "source": [
    "### Configuration\n",
    "\n",
    "As mentioned the `FloatPanel` is highly customizable via the `config` parameter. As an example lets remove the *close* button."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "060cdf46-b7bc-47f7-ae28-f9bf725cba8d",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "config = {\"headerControls\": {\"close\": \"remove\"}}\n",
    "\n",
    "pn.Column(\n",
    "    \"Example: `FloatPanel` without *close button*\",\n",
    "    pn.layout.FloatPanel(\"You can't close me!\", name='FloatPanel without close button', margin=20, config=config),\n",
    "    height=200,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c01e2c2b-1a16-4d50-8d77-55c66813750e",
   "metadata": {
    "tags": []
   },
   "source": [
    "For more configuration options check out the excellent [jsPanel docs](https://jspanel.de/)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "558852dd-9a11-4099-bae3-6da3e38f79f9",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `FloatPanel` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b49ed4d6-b06b-47e1-a917-88ff3141936b",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "floatpanel = pn.layout.FloatPanel(w1, w2, name='FloatPanel with Controls', margin=20)\n",
    "\n",
    "pn.Row(floatpanel.controls(jslink=True), floatpanel)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}