jupyter-widgets / ipywidgets

Interactive Widgets for the Jupyter Notebook
https://ipywidgets.readthedocs.io
BSD 3-Clause "New" or "Revised" License
3.14k stars 948 forks source link

add class management function to the DOMWidget class #3905

Open 12rambau opened 5 months ago

12rambau commented 5 months ago

Problem

I'm creating dashboard application for voila and I started customizing lots of things using a custom css file. To make it work I would need to have total control on the class of my DOM elements and the current class manipulation methods are not aligned with latest javascript functions: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

A real life exemple is the following: I need to update the class of a ipyleaflet map upon clicking on a button I must write:

if self.zoomed: 
    self.m.add_class("fullscreen")
else: 
    self.m.remove_class("fullscreen")

The missing "toggle" method is forcing me to use a proxy member to remember the state of my map. I would like to write something like the following which is easier to understand:

self.m.toggle_class("fullscreen")

Proposed Solution

The missing function are toggle and replace. I see 2 options:

  1. Using the current set-up and add a toggle_class and replace_class methods
  2. Do the same as what I did in ipyvue and create a ClassList method and add the same 4 methods: add, remove, toggle, replace.

I'm happy to contribute and work on a PR once you tell me if it's a wanted feature and what is the prefered solution.