Implement support for Toolbar and Context Menu plugins #438

dhughes-xumak · 2017-07-18T16:34:24Z

Related to #435. This adds options for easily defining additional buttons to the Toolbar and Context Menu. Though multi-select is currently broken, this should support additional custom Context Menu options for multiple selections.

This contribution is graciously provided by XumaK (http://xumak.com/)

XumaK helps reduce the uncertainty and risk that is normally involved for companies trying to transform themselves digitally.

We provide professional services teams with years of experience to deliver the project, using our end-to-end delivery platform, which ensures your project will be on time and on budget. We deliver world class customer solutions through innovative industry leading products.

josdejong · 2017-07-18T19:17:44Z

Thanks a lot, appreciated!

I will review your PR in-depth soon, it looks well taken care of at first sight.

dhughes-xumak · 2017-07-18T19:20:11Z

Great, thanks @josdejong!

We appreciate your quick action and on-going maintenance of this project.

dhughes-xumak · 2017-07-18T20:12:09Z

Some other considerations to improve this feature:

~~Add {string} contextMenuPlugins.submenuTitle property to the test data and documentation.~~
Add {function} contextMenuPlugins.enabled property so each plugin can decide if it should be included in a given context menu. This probably makes it possible to combine contextMenuPlugins and multiContextMenuPlugins into one list.
Convert the built-in context menu actions to use the new plugin architecture (depends on the first two points).
Add a property for defining hotkeys for toolbar and context menu plugins.

Admittedly, my javascript is really rusty and I had some trouble with the context menu click handlers. This is why they are being wrapped at 2a6a65e#diff-0e52f886d57f8a2c0f91f314276ac9a9R1295. I'm sure the handlers could be constructed without needing to wrap them.

~~Get rid of the callback wrapping for contextMenuPlugins/multiContextMenuPlugins. If the selected node(s) are passed to the ContextMenu constructor, then the wrapping would not be necessary.~~

Edit: added two commits to address two of those points.

Add {string} contextMenuPlugins.submenuTitle property to the test data and documentation.
Get rid of the callback wrapping for contextMenuPlugins/multiContextMenuPlugins. If the selected node(s) are passed to the ContextMenu constructor, then the wrapping would not be necessary.

Edit: added one more commit.

Add {function} contextMenuPlugins.enabled property so each plugin can decide if it should be included in a given context menu.
This should make it possible to combine contextMenuPlugins and multiContextMenuPlugins into one configuration list, if desired.

…lick handlers. This allows us to remove the ugly callback wrapping when processing the contextMenuPlugins. Also updates test and documentation.

I noticed that the arrow only renders properly in some cases. For this reason, the submenuTitle only works sometimes.

…e themselves. Includes docs and tests. In the future, it may be preferable for disabled actions to be constructed and appear in the context menu, appearing as disabled (grayed out).

dhughes-xumak

Note for unrelated clean up.

dhughes-xumak · 2017-07-18T23:27:06Z

src/js/JSONEditor.js

@@ -44,6 +44,20 @@ var util = require('./util');
 *                               {boolean} sortObjectKeys If true, object keys are
 *                                                        sorted before display.
 *                                                        false by default.
+ *                               {Object[]} toolbarPlugins  Array of custom toolbar


This docblock is outdated and should be removed entirely. API Doc should be sufficient for documenting this.

josdejong · 2017-07-21T09:19:06Z

I've just checked out your PR @dhughes-xumak, thanks a lot again! You have implemented a solid API, you really know what you're doing and the code looks good.

On a side note: I'm working on a complete new version of the JSONEditor, "v6", see #337. I had planned features that you're implementing right now for v6.1. This means that we'll have to re-implement them some day for v6 (which is ok, most work is figuring out the right API, not the code itself).

Here some points of feedback:

For consistency, it may be better to rename the click callbacks in toolbarPlugins, contextMenuPlugins, and multiContextMenuPlugins all to onClick. Currently the first is onclick and the others are click following the documentation. So far the API is camelCase everywhere, so that's probably the most consistent naming to apply for onClick too.
Currently, the onClick callbacks pass the current node/nodes. The the Node class is non-public and fully undocumented, not really suitable API for public use. That will lead to questions and issues due to misunderstanding or misusing the API. Instead, we could pass the current JSON path instead of the node, like other API's do (onEditable and the onChange of templates). Maybe also rename selectedElements to selectedPaths in the code, and to make it easier to reason about, always pass an array with 1 or multiple paths?
Nice that you've added some validation in _processContextMenuPlugin!
Currently you've implemented toolbarPlugins for the tree mode only. I think we also need it for other modes. We will need a way to configure in whether a toolbar button must be displayed in a specific mode or not. Could be by introducing an extra config option modes: [...] which defaults to all modes, or by passing the current mode with to the callback function that creates the button, so it can decide to return null when in a mode where the button is not applicable.
Can you add an example on how to use toolbar plugins, context menu plugins, and multi context menu plugins in the examples section? (Basically move test_plugins.html to examples, rename it and cleanup a bit where needed).
Currently all actions show green "+" icons (see screenshot). Instead, we should display no icon by default. And probably implement a way to specify custom icons yourself.
Currently, when the text of a menu doesn't fit, it's aligned on the next line which looks quite weird (see "Submenu+click" in the screenshot above). We should do some CSS fixes there.
Multi-select nodes by dragging is currently broken in the editor, so I can't test whether the plugins work there. I haven't looked into the issue itself yet.

EDIT: we can discuss point 6 and 7 in #440

dhughes-xumak · 2017-07-22T16:17:42Z

Currently all actions show green "+" icons (see screenshot). Instead, we should display no icon by default. And probably implement a way to specify custom icons yourself.

Commit bde68cf adds a jsoneditor-plugin class and the corresponding styles to remove the default '+' icon.

Currently, it sets the icon background to transparent for context menus and #d3d3d3 for toolbars. If a plugin icon is added to the icon sheet, that should be used as the default.

Updated test_plugins to test and demonstrate icon overrides for plugins.

josdejong · 2017-07-24T09:50:07Z

@dhughes-xumak That looks way better already :)

I've just fixed the issue with the broken multiselection (see 2110d25, will do a release today), and have done some adjustments in the css of the context menu so it wraps long text neatly.

This resolves points 6, 7, and 8.

So the left over action points are now:

Rename click callbacks to onClick for all three menus.
Pass JSON path instead of Node to onClick
Implement support for toolbar plugins in all modes
Add an example in the examples section
Integrate undo/redo functionality into the plugins

josdejong · 2017-07-24T09:58:42Z

(the merge conflict that's there now is just two new blocks of CSS inserted at the same location)

josdejong · 2017-11-15T18:55:48Z

@dhughes-xumak this PR is still open, are you still interested in completing it?

dhughes-xumak · 2017-11-15T19:01:56Z

No, sorry. It would be great to see this included in the project, but I will not be completing it.

josdejong · 2017-11-15T19:27:37Z

Ok clear! At least we have a nice start :)

If anyone is interested in finishing this feature please let me know.

dhughes-xumak added 3 commits July 17, 2017 23:02

Implement toolbar plugins

eb48486

Implement context menu plugins

2a6a65e

Create test for toolbar and context menu plugin support

2dd41d7

dhughes-xumak closed this Jul 18, 2017

dhughes-xumak reopened this Jul 18, 2017

dhughes-xumak added 2 commits July 18, 2017 13:36

Add a selectedElements parameter to ContextMenu to pass to actions' c…

a8e3ae9

…lick handlers. This allows us to remove the ugly callback wrapping when processing the contextMenuPlugins. Also updates test and documentation.

Add contextMenuPlugin.submenuTitle to docs and test.

fbd082d

I noticed that the arrow only renders properly in some cases. For this reason, the submenuTitle only works sometimes.

dhughes-xumak force-pushed the feature/toolbar-and-contextmenu-plugins branch from cc82e94 to fbd082d Compare July 18, 2017 21:07

Add contextMenuPlugin.enabled property so plugins can enable/disabl…

f33365d

…e themselves. Includes docs and tests. In the future, it may be preferable for disabled actions to be constructed and appear in the context menu, appearing as disabled (grayed out).

dhughes-xumak commented Jul 18, 2017

View reviewed changes

This was referenced Jul 20, 2017

customising insert options #116

Closed

Dynamic Context Menu #284

Open

josdejong mentioned this pull request Jul 21, 2017

ContextMenu display issues #440

Closed

dhughes-xumak mentioned this pull request Jul 21, 2017

Allow for custom History actions #442

Open

Add class to plugin actions for setting default icons

bde68cf

Merge branch 'develop' into feature/toolbar-and-contextmenu-plugins

231ab37

Lucaszw mentioned this pull request Nov 15, 2017

Custom Context Menu Items #484

Closed

josdejong added the help wanted label Nov 15, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement support for Toolbar and Context Menu plugins #438

Implement support for Toolbar and Context Menu plugins #438

dhughes-xumak commented Jul 18, 2017 •

edited

josdejong commented Jul 18, 2017

dhughes-xumak commented Jul 18, 2017

dhughes-xumak commented Jul 18, 2017 •

edited

dhughes-xumak left a comment

dhughes-xumak Jul 18, 2017

josdejong commented Jul 21, 2017 •

edited

dhughes-xumak commented Jul 22, 2017

josdejong commented Jul 24, 2017

josdejong commented Jul 24, 2017

josdejong commented Nov 15, 2017

dhughes-xumak commented Nov 15, 2017

josdejong commented Nov 15, 2017

Implement support for Toolbar and Context Menu plugins #438

Are you sure you want to change the base?

Implement support for Toolbar and Context Menu plugins #438

Conversation

dhughes-xumak commented Jul 18, 2017 • edited

josdejong commented Jul 18, 2017

dhughes-xumak commented Jul 18, 2017

dhughes-xumak commented Jul 18, 2017 • edited

dhughes-xumak left a comment

Choose a reason for hiding this comment

dhughes-xumak Jul 18, 2017

Choose a reason for hiding this comment

josdejong commented Jul 21, 2017 • edited

dhughes-xumak commented Jul 22, 2017

josdejong commented Jul 24, 2017

josdejong commented Jul 24, 2017

josdejong commented Nov 15, 2017

dhughes-xumak commented Nov 15, 2017

josdejong commented Nov 15, 2017

dhughes-xumak commented Jul 18, 2017 •

edited

dhughes-xumak commented Jul 18, 2017 •

edited

josdejong commented Jul 21, 2017 •

edited