From fbbcd9e96881374c39674c2db586944c08ca71c8 Mon Sep 17 00:00:00 2001 From: Vincent Donato Date: Thu, 28 Sep 2023 14:43:35 -0700 Subject: [PATCH] feat: Add new forceActionsMenu embed option (#1242) --- README.md | 1 + src/embed.ts | 3 ++- test/embed.test.ts | 12 ++++++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index bbe7c788..b40c889d 100644 --- a/README.md +++ b/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.
_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. | diff --git a/src/embed.ts b/src/embed.ts index ce411d3d..8a5ef521 100644 --- a/src/embed.ts +++ b/src/embed.ts @@ -96,6 +96,7 @@ export interface EmbedOptions { 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); diff --git a/test/embed.test.ts b/test/embed.test.ts index 4ee26d16..e1d54f01 100644 --- a/test/embed.test.ts +++ b/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, {