@themarioga/grid-editor 8.6.0 → 8.7.0

package/docs/plugins.md

@@ -166,6 +166,7 @@ element, and where there may be several, an array.
 | `ge.snapshotHtml()` | The canvas's markup as `getHtml` gives it, read on a copy so the canvas never leaves editing: what `getHtml({ keepEditing: true })` is. See [Reading on a copy](#reading-on-a-copy) |
 | `ge.setHtml(html)` | The canvas made of other markup, and edited again: the source view closed if it is open, `deinit`, the markup in, `init`. No add or delete events: it is replaced as a whole. A `<script>` in it does not run in the editor |
 | `ge.confirm(message, options, answer)` | A question in the editor's confirm modal, the one deleting asks in. `options`: `title`, `ok`, `cancel` - the texts, the locale's by default - and `danger`, a red ok button. `answer(true)` for ok, `answer(false)` for cancel, the close button or Escape, `answer(null)` when the modal is taken away unanswered: `setLocale`, `destroy`, or another question. The browser's `confirm` without Bootstrap's javascript |
+| `ge.refreshToolbar()` | The toolbar built again, from what the feature plugins' `toolbar`s hold now: for a plugin whose buttons come and go. The category shown with `toolbar_groups`, the preview and the source view stay as they are. Does nothing before the toolbar is first built, and after `destroy` |
 | `ge.toolbarItems(name)` | An array of the toolbar buttons the feature plugin `name` declared, for showing and hiding them |
 | `ge.bareStyle(node, family, property)` | A css property's value on the node with none of the family's classes: what a preview shows when no class applies and that is not a constant |
 | `ge.hostStyle(node, property?)` | `{ value, priority }` of one property of the node's own style, as the host wrote it: never a breakpoint preview's. With no property, the whole of it as css text |
@@ -231,6 +232,37 @@ needs to put a new kind of block on the canvas:
   was dropped, or, when that region will not have it, on the canvas just after
   the block it was dropped in. A `create()` that returns `null` adds nothing:
   that is how a plugin says it could not make one this time.
+- **`toolbar`** can also be a function returning those items, called whenever
+  the toolbar is built - when the editor starts, on `setLocale`, and on
+  `ge.refreshToolbar()`. That is how a plugin offers buttons that change: a
+  user's saved widgets, each a button that adds it again. Change the list,
+  then call `ge.refreshToolbar()`. A button not yet built again still makes
+  what it was built from.
+
+  ```javascript
+  GridEditor.features.widgets = function(ge) {
+      var saved = loadWidgets();   // the plugin's own: wherever it keeps them
+      return {
+          methods: {
+              saveWidget: function(widget) {
+                  saved.push(widget);
+                  ge.refreshToolbar();
+              },
+          },
+          toolbar: function() {
+              return saved.map(function(widget) {
+                  return {
+                      label: widget.name,
+                      kind: 'element',
+                      group: 'widgets',
+                      inColumn: true,
+                      create: function() { return widgetFrom(widget.html); },
+                  };
+              });
+          },
+      };
+  };
+  ```
 
 - **`drawerTools(drawer, node, kind)`** runs for every drawer that has a gear,
   as a utility plugin's does, so a tool can go on any node. The clipboard

package/package.json

@@ -30,10 +30,9 @@
   },
   "homepage": "https://github.com/themarioga/grid-editor#readme",
   "publishConfig": {
-    "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "8.6.0",
+  "version": "8.7.0",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/grideditor.js

@@ -437,6 +437,7 @@ function build(instance, baseElem, optionsOrMethod) {
         var closeOverflowMenu = function() {}; // Folds the toolbar's overflow menu away, when it has one
         var refitToolbar = function() {}; // Works out again what the toolbar's overflow menu holds, when it has one
         var addButtons = []; // The toolbar's add buttons, in toolbar order: { button, home, group }
+        var shownToolbar = {}; // Each feature plugin's toolbar items, as the toolbar was last built with them
         var toolbarGroup = null; // The category shown, with toolbar_groups. Kept when the toolbar is rebuilt
         var warnedHere = {}; // Some warnings are worth saying once per instance, not once per call
         var sortables = []; // Every list made sortable, so deinit destroys exactly those
@@ -1189,8 +1190,10 @@ function build(instance, baseElem, optionsOrMethod) {
             // One with align 'end' goes on the right instead, as an icon,
             // beside the source and preview buttons.
             var endItems = [];
+            shownToolbar = {};
             Object.keys(FEATURES).forEach(function(name) {
-                (FEATURES[name].toolbar || []).forEach(function(item, index) {
+                shownToolbar[name] = toolbarOf(FEATURES[name]);
+                shownToolbar[name].forEach(function(item, index) {
                     var button = featureButton(name, item, index);
 
                     if (item.align === 'end') {
@@ -1355,6 +1358,34 @@ function build(instance, baseElem, optionsOrMethod) {
         }
 
         /** The toolbar off the page, with what keeps its overflow menu up to date. */
+        /** A feature plugin's toolbar items: its array, or what its function returns now. */
+        function toolbarOf(feature) {
+            var items = typeof feature.toolbar === 'function' ? feature.toolbar() : feature.toolbar;
+            return Array.isArray(items) ? items : [];
+        }
+
+        /**
+         * ge.refreshToolbar(): the toolbar built again, from what the plugins'
+         * toolbars hold now - a plugin whose buttons come and go calls it when
+         * they have. The category shown, the preview and the source view stay
+         * as they are; an open overflow menu folds away.
+         */
+        function refreshToolbar() {
+            // Not built yet - the first one reads the toolbars as they are
+            // then - or taken away for good
+            if (!mainControls || destroyed) { return; }
+
+            var previewing = !!dom.one(mainControls, '.gm-preview.active');
+
+            removeMainControls();
+            createMainControls();
+
+            if (previewing) {
+                dom.addClass(dom.one(mainControls, '.gm-preview'), 'active btn-danger');
+            }
+            onScroll();
+        }
+
         function removeMainControls() {
             if (toolbarLifetime) { toolbarLifetime.abort(); }
             toolbarLifetime = null;
@@ -1655,7 +1686,10 @@ function build(instance, baseElem, optionsOrMethod) {
          * to the canvas, just after the top level block the pointer was in.
          */
         function insertFeatureFromToolbar(button, where, source) {
-            var item = FEATURES[button.getAttribute('data-ge-feature')].toolbar[parseInt(button.getAttribute('data-ge-item'), 10)];
+            // The item the button was built from, whatever the plugin's list
+            // says now: it may have changed since, and the toolbar not yet
+            var item = (shownToolbar[button.getAttribute('data-ge-feature')] || [])[parseInt(button.getAttribute('data-ge-item'), 10)];
+            if (!item) { return null; }
             var made = item.create();
             if (!made) { return null; }
             var placed = made;
@@ -2470,6 +2504,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 // A node's drawer: its first child, or for a content area the
                 // one beside it in its text block
                 drawerOf: drawerOf,
+                // The toolbar built again, from the plugins' toolbars as they are now
+                refreshToolbar: refreshToolbar,
                 toolbarItems: function(name) {
                     return mainControls
                         ? dom.all(mainControls, '[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]')