feat: Add new forceActionsMenu embed option (#1242)

README.md

@@ -180,6 +180,7 @@ var opt = {
 | `config`      | String / Object | _String_ : A URL string from which to load a [Vega](https://vega.github.io/vega/docs/config/)/[Vega-Lite](https://vega.github.io/vega-lite/docs/config.html) or [Vega-Lite](https://vega.github.io/vega-lite/docs/config.html) configuration file. This URL will be subject to standard browser security restrictions. Typically this URL will point to a file on the same host and port number as the web page itself. <br> _Object_ : A Vega/Vega-Lite configuration as a parsed JSON object to override the default configuration options. |
 | `theme`       | String        | If specified, tells Vega-Embed use the theme from [Vega Themes](https://github.com/vega/vega-themes). **Experimental: we may update themes with minor version updates of Vega-Embed.** |
 | `defaultStyle` | Boolean or String | If set to `true` (default), the embed actions are shown in a menu. Set to `false` to use simple links. Provide a string to set the style sheet (not supported in usermeta). |
+| `forceActionsMenu` | Boolean | If set to `true`, the embed actions are shown in a menu like they would be if the `defaultStyle` option were truthy. This can be useful when setting `defaultStyle` to `false` and defining menu styles in the parent application.
 | `bind`        | String or Element | The element that should contain any input elements bound to signals. |
 | `renderer`    | String        | The renderer to use for the view. One of `"canvas"` (default) or `"svg"`. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_renderer) for details. May be a custom value if passing your own `viewClass` option. |
 | `logLevel`    | Level         | Sets the current log level. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_logLevel) for details. |

src/embed.ts

@@ -96,6 +96,7 @@ export interface EmbedOptions<S = string, R = Renderers> {
   ast?: boolean;
   expr?: typeof expressionInterpreter;
   viewClass?: typeof View;
+  forceActionsMenu?: boolean;
 }
 
 const NAMES: {[key in Mode]: string} = {
@@ -434,7 +435,7 @@ async function _embed(
   if (actions !== false) {
     let wrapper = element;
 
-    if (opts.defaultStyle !== false) {
+    if (opts.defaultStyle !== false || opts.forceActionsMenu) {
       const details = document.createElement('details');
       details.title = i18n.CLICK_TO_VIEW_ACTIONS;
       element.append(details);

test/embed.test.ts

@@ -124,6 +124,18 @@ test('does not set has-actions if actions are not specified', async () => {
   expect(el.querySelector('.has-actions')).toBeNull();
 });
 
+test('shows actions in menu if defaultStyle and forceActionsMenu are both false', async () => {
+  const el = document.createElement('div');
+  await embed(el, vlSpec, {defaultStyle: false, forceActionsMenu: false});
+  expect(el.querySelector('details')).toBeNull();
+});
+
+test('shows actions in menu if defaultStyle is false and forceActionsMenu is true', async () => {
+  const el = document.createElement('div');
+  await embed(el, vlSpec, {defaultStyle: false, forceActionsMenu: true});
+  expect(el.querySelector('details')).not.toBeNull();
+});
+
 test('add fix-x class when needed', async () => {
   const el = document.createElement('div');
   await embed(el, {