float.py

from __future__ import annotations

from typing import ClassVar, List

import param

from ..config import config as pn_config
from ..io.resources import CDN_DIST, bundled_files
from ..reactive import ReactiveHTML
from ..util import classproperty
from .base import ListLike

POSITIONS = [
    'center',
    'left-top',
    'center-top',
    'right-top',
    'right-center',
    'right-bottom',
    'center-bottom',
    'left-bottom',
    'left-center',
]

STATUS = [
    "normalized",
    "maximized",
    "minimized",
    "smallified",
    "smallifiedmax",
    "closed"
]

class FloatPanel(ListLike, ReactiveHTML):
    """
    Float provides a floating panel layout.
    """

    config = param.Dict({}, doc="""
       Additional jsPanel configuration with precedence over
       parameter values.""")

    contained = param.Boolean(default=True, doc="""
       Whether the component is contained within parent container
       or completely free floating.""")

    position = param.Selector(default='right-top', objects=POSITIONS, doc="""
       The initial position if the container is free-floating.""")

    offsetx = param.Integer(default=None, bounds=(0, None), doc="""
       Horizontal offset in pixels.""")

    offsety = param.Integer(default=None, bounds=(0, None), doc="""
       Vertical offset in pixels.""")

    theme = param.String(default="primary", doc="""
        The theme which can be one of:

        - Built-ins: 'default', 'primary', 'secondary', 'info',
          'success', 'warning', 'danger', 'light', 'dark' and 'none'
        - HEX, RGB and HSL color values like '#123456' Any
          standardized color name like 'forestgreen' and color names
          from the Material Design Color System like 'purple900'
        - Additionally a theme string may include one of the modifiers
          'filled', 'filledlight', 'filleddark' or 'fillcolor'
          separated from the theme color by a space like 'primary""")

    status = param.Selector(default="normalized", objects=STATUS, doc="""
        The current status of the panel.""")

    _extension_name = 'floatpanel'

    _template = """
    <div id="float" class="bk-root" style="padding:8px;padding-right:30px">
      {% for obj in objects %}
      <div id="flex-item">${obj}</div>
      {% endfor %}
    </div>
    """

    _rename = {'loading': None}

    _scripts = {
        "render": """
        if (state.panel) {
          view.run_script('close')
        }
        var config = {
          headerTitle: data.name,
          content: float,
          theme: data.theme,
          id: 'jsPanel'+data.id,
          position: view.run_script('get_position'),
          contentSize: `${model.width} ${model.height}`,
          onstatuschange: function() {
            data.status = this.status
          },
          onbeforeclose: function() {
           data.status = 'closed'
           return true
          }
        }
        if (data.contained) {
          config.container = view.container
        }
        config = {...config, ...data.config}
        state.panel = jsPanel.create(config);
        """,
        "name": "state.panel.setHeaderTitle(data.name)",
        "status": """
        var action = data.status.replace('ied', 'y').replace('d', '')
        if (action === 'close') {
          state.closed = true
        } else if (state.closed) {
          view.run_script('close')
          return
        }
        state.panel[action]()
        """,
        "close": "try { state.panel.close() } catch {}",
        "get_position": """
        return {
            at: data.position,
            my: data.position,
            offsetX: data.offsetx,
            offsetY: data.offsety,
        }
        """,
        "reposition": """
        if (data.contained) {
          view.run_script('contained')
          return
        }
        state.panel.reposition(view.run_script('get_position'));
        """,
        "contained": "delete state.panel; view.invalidate_render();",
        "theme": "state.panel.setTheme(data.theme)",
        "remove": "view.run_script('close'); state.panel = undefined;",
        "offsetx": "view.run_script('reposition')",
        "offsety": "view.run_script('reposition')",
        "position": "if (!data.contained) { view.run_script('reposition') }",
    }

    __css_raw__ = [f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/jspanel.css"]

    __javascript_raw__ = [
        f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/jspanel.js",
        f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal.js",
        f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip.js",
        f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint.js",
        f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout.js",
        f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu.js",
        f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock.js",
    ]

    __js_require__ = {
        'paths': {
            'jspanel': f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/jspanel",
            'jspanel-modal': f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal",
            'jspanel-tooltip': f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip",
            'jspanel-hint': f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint",
            'jspanel-layout': f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout",
            'jspanel-contextmenu': f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu",
            'jspanel-dock': f"{pn_config.npm_cdn}/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock",
        },
        'exports': {
            'jspanel': 'jsPanel'
        },
        'shim': {
            'jspanel': {
                'exports': 'jsPanel'
            }
        }
    }

    _stylesheets: ClassVar[List[str]] = [
        f'{CDN_DIST}css/floatpanel.css'
    ]

    @classproperty
    def __js_skip__(cls):
        return {
            'jsPanel': cls.__javascript__,
        }

    @classproperty
    def __javascript__(cls):
        return bundled_files(cls)

    @classproperty
    def __css__(cls):
        return bundled_files(cls, 'css')

    def __init__(self, *objects, name='', **params):
        super().__init__(objects=list(objects), name=name, **params)

    def select(self, selector=None):
        """
        Iterates over the Viewable and any potential children in the
        applying the Selector.

        Arguments
        ---------
        selector: type or callable or None
          The selector allows selecting a subset of Viewables by
          declaring a type or callable function to filter by.

        Returns
        -------
        viewables: list(Viewable)
        """
        objects = super().select(selector)
        for obj in self:
            objects += obj.select(selector)
        return objects