Modify Chalkboard "buttons" Option

[mattsigal]

Description

As described in the documentation, the Chalkboard plug-in currently has the option to either show or hide both buttons via the buttons option (defaults to true). It would be great if this option could be slightly expanded to take a few more parameters: true (all on), false (all off), and canvas, chalkboard to manually activate a particular button.

In my use case, I would like a button on each slide to turn on the chalkboard annotation tool, but would prefer to turn off the button for the canvas to make the slides look a little cleaner (in the following image, I would like to keep the paintbrush but remove the canvas):

[mcanouil]

You can use CSS to hide/display the buttons.

---
format:
  revealjs:
    chalkboard: true
    include-in-header:
      - text: |
          <style>
            .slide-chalkboard-buttons.slide-menu-offset span[title="Toggle Notes Canvas (c)"] {
              display: none;
            }
            .slide-chalkboard-buttons.slide-menu-offset span[title="Toggle Chalkboard (b)"] {
              display: none;
            }
          </style>
---

[mattsigal]

Interesting! I've tried incorporating your snippet into the sample Quarto slide deck (with some of the other parameters I usually use). As far as I can tell, the style block is added to the header of the HTML file as it should be but the icons are still appearing?

This is the .qmd template I was testing with:

---
title: "chalkboard"
format: 
  revealjs:
    menu: false
    progress: false
    touch: false
    controls: true
    slide-number: true
    chalkboard: 
      src: chalkboard.json
    include-in-header:
      - text: |
          <style>
          /*
          .slide-chalkboard-buttons.slide-menu-offset span[title="Toggle Notes Canvas (c)"] {
            display: none;
          }
          */
          .slide-chalkboard-buttons.slide-menu-offset span[title="Toggle Chalkboard (b)"] {
            display: none;
          }
          </style>
output:
  revealjs::revealjs_presentation
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1

[mcanouil]

Please share quarto documents as plain text inside code blocks.

The code works (1.7 and 1.8).

[mattsigal]

Appreciate the reply and sorry about the attachment issue. I've updated my post using a plain code block. Thanks for the example! I compared it against what I was running and tracked down the issue -- turns out if you have set menu=false, it turns off that icon but overrides the CSS for the the canvas/chalkboard so they reappear.

Is there any way to hide all three? I prefer only opening the menu when I use the keyboard shortcut.

[mcanouil]

All this is controlled by JavaScript and/or CSS.
So, there is likely a trick that you could figure out the same way I did, i.e., using your browser inspect/developer mode.