@themarioga/grid-editor 7.3.0 → 8.0.0-beta.3

package/src/js/plugins/grideditor.tinymce.js

@@ -10,11 +10,10 @@
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
  *
- * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
- * loaded on its own, like every plugin. It imports what every text editor
- * shares - text blocks, the Text button, createText, making the host's plain
- * content a text - from src/js/text/grideditor.text.js, which the build puts
- * in its classic script, installed once however many editors a page loads.
+ * It imports what every text editor shares - text blocks, the Text button,
+ * createText, making the host's plain content a text - from
+ * src/js/text/grideditor.text.js, which the build puts in its classic
+ * script, installed once however many editors a page loads.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';
@@ -22,7 +21,6 @@ import '../text/grideditor.text.js';
 
 Object.assign(GridEditor.locales.en, {
     'text.tinymce': 'tinyMCE',
-    'warning.oninit_removed': 'tinyMCE\'s oninit option was removed in 7.0 and is ignored: use init_instance_callback.',
 });
 
 // tinyMCE snapshots the target element's attributes when an inline editor is
@@ -42,9 +40,6 @@ var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
 var editors = new WeakMap();
 var pendingRemove = new WeakSet();
 
-// Said once per page, however many editors are on it
-var warnedOninit = false;
-
 GridEditor.texts.tinymce = function(ge) {
     return {
         labelKey: 'text.tinymce',
@@ -57,13 +52,6 @@ GridEditor.texts.tinymce = function(ge) {
             var settings = ge.settings;
             var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
 
-            // 'oninit' was the pre-6 name for init_instance_callback, honoured
-            // through 6.x and gone in 7.0
-            if (userConfig.oninit && !warnedOninit) {
-                warnedOninit = true;
-                ge.warn(ge.t('warning.oninit_removed'));
-            }
-
             contentAreas.forEach(function(contentArea) {
                 if (dom.hasClass(contentArea, 'active')) { return; }
 
@@ -147,7 +135,6 @@ GridEditor.texts.tinymce = function(ge) {
                 // We always edit the element we were handed, so a selector in the
                 // user config would only fight with target
                 delete configuration.selector;
-                delete configuration.oninit;
 
                 window.tinymce.init(configuration);
             });

package/src/js/style/accordion.js

@@ -32,13 +32,24 @@ function familyApplies(family, node, kind) {
 
 /**
  * What a merged part shows in its section for a node: the spacing part
- * its own panel, the others the field of their one family.
+ * its own panel, the others a field per family that applies to it - one,
+ * or flex's eleven, together.
  */
 function partContent(ge, part, node, kind) {
     if (part.panel) { return part.panel(node, kind); }
 
-    var family = part.families[0];
-    return familyApplies(family, node, kind) ? ge.utilityField(node, family.name) : null;
+    var fields = part.families.filter(function(family) {
+        return familyApplies(family, node, kind);
+    }).map(function(family) {
+        return ge.utilityField(node, family.name);
+    });
+
+    if (fields.length < 2) { return fields[0] || null; }
+
+    var box = dom.element('div', { 'class': 'ge-style-part-fields' });
+    fields.forEach(function(field) { box.appendChild(field); });
+
+    return box;
 }
 
 /**

package/src/js/style/display.js

@@ -0,0 +1,229 @@
+/**
+ * Display, a part of the style plugin: how a node is displayed per
+ * breakpoint, hidden included, with Bootstrap's d-{breakpoint}-* classes,
+ * and the eye in the drawers that hides and shows it.
+ *
+ * Its families, and whatever it does on the canvas, as a function of the
+ * handle and its options: grideditor.style.js puts them in its sections.
+ */
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
+
+Object.assign(GridEditor.locales.en, {
+    'utility.display': 'Display',
+    'utility.visibility_hidden': 'Hidden',
+    'tool.hide_in_view': 'Hide in this view',
+    'tool.show_in_view': 'Show in this view',
+    'badge.hidden_in': 'Hidden at {breakpoints}',
+});
+
+/** Bootstrap's display values, less its table ones. */
+var VALUES = ['none', 'inline', 'inline-block', 'block', 'grid', 'inline-grid', 'flex', 'inline-flex'];
+
+/** A node that carries any class of the family, at any breakpoint. */
+var CLASS_PATTERN = new RegExp('(?:^|\\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:' + VALUES.join('|') + ')(?:\\s|$)');
+var NONE_PATTERN = /^d-(?:(?:sm|md|lg|xl|xxl)-)?none$/;
+
+var NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
+
+/** What the canvas shows a hidden node as, in a view where Bootstrap hides it. */
+var SHOWN_ATTR = 'data-ge-display';
+
+export function displayPart(ge, given) {
+
+    var options = Object.assign({ drawer: true }, given);
+
+    /**
+     * What a kind of node is offered: a row is a flex container or it is no
+     * grid, and a text is a block of text.
+     */
+    function choices(kind) {
+        if (kind === 'row') { return ['none', 'flex']; }
+        if (kind === 'text' || kind === 'plain') { return ['none', 'block']; }
+
+        return VALUES;
+    }
+
+    /** What "shown" is written as on this kind of node, when nothing below says. */
+    function shownByDefault(kind) {
+        return kind === 'row' ? 'flex' : 'block';
+    }
+
+    function applies(node, kind) {
+        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||
+            dom.is(node, '[data-ge-container]');
+    }
+
+    function hiddenAt(node, view) {
+        return ge.getUtility(node, 'display', view) === 'none';
+    }
+
+    /** The breakpoints at which the node is hidden, smallest first. */
+    function hiddenTiers(node) {
+        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });
+    }
+
+    /**
+     * Whether the node is hidden in the view being edited. In the all view
+     * that means hidden at every breakpoint, since "hidden at some" is what
+     * the badge is for.
+     */
+    function hiddenHere(node) {
+        return ge.view() === 'all'
+            ? hiddenTiers(node).length === ge.breakpoints.length
+            : hiddenAt(node, ge.view());
+    }
+
+    /** What the breakpoint below the view shows, which an inherit falls back to. */
+    function hiddenBelow(node) {
+        var index = ge.breakpoints.indexOf(ge.view());
+
+        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
+    }
+
+    /**
+     * How the nearest breakpoint below this one that shows the node shows
+     * it, or null when none below does.
+     */
+    function shownBelow(node, view) {
+        for (var i = ge.breakpoints.indexOf(view) - 1; i >= 0; i--) {
+            var value = ge.getUtility(node, 'display', ge.breakpoints[i]);
+
+            if (value === null) { return null; }
+            if (value !== 'none') { return value; }
+        }
+
+        return null;
+    }
+
+    /**
+     * Hide or show the node in the view being edited, with as few classes as
+     * that takes. In a breakpoint view that is often none at all: showing a
+     * node the breakpoint below shows removes this breakpoint's d-*-none
+     * rather than writing another class on top of it. Showing one that the
+     * breakpoint below hides writes the display it had further down, so a
+     * flex column comes back flex. In the all view a node is hidden
+     * everywhere or shown everywhere, and shown is no class.
+     */
+    function toggle(node, kind) {
+        var hide = !hiddenHere(node);
+        var value;
+
+        if (ge.view() === 'all') {
+            value = hide ? 'none' : null;
+        } else if (hide) {
+            value = hiddenBelow(node) ? null : 'none';
+        } else {
+            value = hiddenBelow(node) ? (shownBelow(node, ge.view()) || shownByDefault(kind)) : null;
+        }
+
+        ge.setUtility(node, 'display', value, { source: 'tool' });
+    }
+
+    /**
+     * A node Bootstrap hides in this view stays on the canvas, shown as it
+     * would be if it were not hidden: with its classes' none taken off for
+     * the moment it takes to ask the browser.
+     */
+    function shownAs(node) {
+        var original = node.getAttribute('class');
+
+        node.setAttribute('class', original.split(/\s+/).filter(function(name) {
+            return !NONE_PATTERN.test(name);
+        }).join(' '));
+
+        var display = getComputedStyle(node).display;
+        node.setAttribute('class', original);
+
+        // The canvas has a rule for each of Bootstrap's values, and a block for anything else
+        return display !== 'none' && VALUES.indexOf(display) !== -1 ? display : 'block';
+    }
+
+    /**
+     * The canvas shows each node as the view sees it. A node Bootstrap would
+     * hide is kept on the canvas with the display it would have, and
+     * ge-hidden-in-view fades it; data-ge-hidden-in carries the badge text
+     * for the all view.
+     */
+    function mark(scope) {
+        dom.selfAndAll(scope, NODES).forEach(function(node) {
+            var kind = ge.kindOf(node);
+            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');
+            var tiers = carries ? hiddenTiers(node) : [];
+            var here = carries && hiddenHere(node);
+            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
+
+            node.removeAttribute(SHOWN_ATTR);
+            if (carries && getComputedStyle(node).display === 'none') {
+                node.setAttribute(SHOWN_ATTR, shownAs(node));
+            }
+
+            dom.toggleClass(node, 'ge-hidden-in-view', here);
+
+            if (partly) {
+                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
+            } else {
+                node.removeAttribute('data-ge-hidden-in');
+            }
+
+            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {
+                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {
+                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));
+                    dom.all(tool, 'i').forEach(function(icon) {
+                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
+                    });
+                });
+            });
+        });
+    }
+
+    function unmark() {
+        dom.all(ge.canvas, '.ge-hidden-in-view, [data-ge-hidden-in], [' + SHOWN_ATTR + ']').forEach(function(node) {
+            dom.removeClass(node, 'ge-hidden-in-view');
+            node.removeAttribute('data-ge-hidden-in');
+            node.removeAttribute(SHOWN_ATTR);
+            dom.dropEmptyClass(node);
+        });
+    }
+
+    return {
+        families: [{
+            name: 'display',
+            prefix: 'd',
+            values: VALUES,
+            appliesTo: ['row', 'column', 'text', 'element', 'container'],
+            labelKey: 'utility.display',
+
+            choices: function(node, kind) {
+                return choices(kind);
+            },
+
+            label: function(value) {
+                return value === 'none' ? ge.t('utility.visibility_hidden') : value;
+            },
+
+            /**
+             * What the view being edited displays the node as. Hidden is
+             * shown the way the breakpoints below show it, since the canvas
+             * keeps a hidden node, faded; with no class applying, it is what
+             * the node is without any.
+             */
+            preview: function(value, node) {
+                if (value === 'none') { value = shownBelow(node, ge.view()); }
+
+                return { display: value === null ? ge.bareStyle(node, 'display', 'display') : value };
+            },
+        }],
+
+        drawerTools: function(drawer, node, kind) {
+            if (!options.drawer || !applies(node, kind)) { return; }
+
+            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {
+                toggle(node, kind);
+            });
+        },
+
+        onRefresh: mark,
+        onDeinit: unmark,
+    };
+}

package/src/js/style/drawerflow.js

@@ -0,0 +1,118 @@
+/**
+ * The drawer of a flex or grid node, a part of the style plugin.
+ *
+ * A drawer is its node's first child, in the flow: in a row, which wraps,
+ * it is a line of its own above the columns, but in anything else that
+ * lays its children out - a column made flex, a row that does not wrap, a
+ * grid - it would be one of the items, beside the content or in a cell of
+ * its own. So on such a node the drawer leaves the flow: it sits on top, as
+ * wide as the node, over a transparent top border as tall as it is, and
+ * the content is laid out below as the page would lay it out.
+ *
+ * The node's own style is the host's, so what is written on it is an
+ * attribute, and the border comes from a rule per height, here.
+ */
+import * as dom from '../dom.js';
+
+var NODES = '.row, .column, .ge-element, [data-ge-container]';
+var OUT_CLASS = 'ge-drawer-out';
+var OUT_ATTR = 'data-ge-drawer-out';
+
+/** The space left between the drawer and the content, as the editor's frame leaves it. */
+var GAP = 5;
+
+var LAYS_OUT = /^(?:inline-)?(?:flex|grid)$/;
+
+export function drawerflowPart(ge) {
+
+    var sheet = null;
+    var heights = {};
+    var observer = null;
+
+    /** The rule for a node whose drawer takes this much room. */
+    function rule(room) {
+        if (heights[room]) { return; }
+        heights[room] = true;
+
+        if (!sheet) {
+            sheet = document.head.appendChild(dom.element('style', { 'data-ge-drawer-flow': '' }));
+        }
+
+        var node = '.ge-canvas.ge-editing [' + OUT_ATTR + '="' + room + '"]';
+        sheet.appendChild(document.createTextNode(
+            node + ' { border-top-width: ' + room + 'px !important; }\n' +
+            node + ' > .ge-tools-drawer { top: -' + room + 'px; }\n'
+        ));
+    }
+
+    /** Whether the node lays its drawer out as an item of its own. */
+    function laysOut(node) {
+        var style = getComputedStyle(node);
+
+        if (!LAYS_OUT.test(style.display)) { return false; }
+
+        // A row as the grid has it: its drawer is a line of its own already
+        return !(dom.hasClass(node, 'row') && style.flexDirection === 'row' && style.flexWrap === 'wrap');
+    }
+
+    function measure(node, drawer) {
+        var room = Math.ceil(drawer.offsetHeight) + GAP;
+
+        rule(room);
+        node.setAttribute(OUT_ATTR, String(room));
+    }
+
+    /** A drawer that grows - its tools wrap, its settings unfold - takes more room. */
+    function watch(drawer) {
+        if (typeof ResizeObserver === 'undefined') { return; }
+
+        if (!observer) {
+            observer = new ResizeObserver(function(entries) {
+                entries.forEach(function(entry) {
+                    var node = entry.target.parentNode;
+                    if (node && dom.hasClass(node, OUT_CLASS)) { measure(node, entry.target); }
+                });
+            });
+        }
+        observer.observe(drawer);
+    }
+
+    function mark(scope) {
+        dom.selfAndAll(scope, NODES).forEach(function(node) {
+            var drawer = dom.child(node, '.ge-tools-drawer');
+            if (!drawer) { return; }
+
+            if (laysOut(node)) {
+                dom.addClass(node, OUT_CLASS);
+                measure(node, drawer);
+                watch(drawer);
+            } else if (dom.hasClass(node, OUT_CLASS)) {
+                dom.removeClass(node, OUT_CLASS);
+                node.removeAttribute(OUT_ATTR);
+                dom.dropEmptyClass(node);
+                if (observer) { observer.unobserve(drawer); }
+            }
+        });
+    }
+
+    function unmark() {
+        if (observer) { observer.disconnect(); }
+        observer = null;
+
+        dom.all(ge.canvas, '.' + OUT_CLASS).forEach(function(node) {
+            dom.removeClass(node, OUT_CLASS);
+            node.removeAttribute(OUT_ATTR);
+            dom.dropEmptyClass(node);
+        });
+
+        if (sheet) { sheet.remove(); }
+        sheet = null;
+        heights = {};
+    }
+
+    return {
+        families: [],
+        onRefresh: mark,
+        onDeinit: unmark,
+    };
+}

package/src/js/style/flex.js

@@ -0,0 +1,156 @@
+/**
+ * Flex, a part of the style plugin: a flex container's direction, wrap,
+ * alignment and gaps, and how its children grow, shrink and fill, per
+ * breakpoint, with Bootstrap's flex-{breakpoint}-*, justify-content-*,
+ * align-items-*, align-content-*, gap-* and row-/column-gap-* classes.
+ *
+ * Its families, and whatever it does on the canvas, as a function of the
+ * handle and the spacing options, whose scale the gaps share:
+ * grideditor.style.js puts them in its Flex section.
+ */
+import { GridEditor } from '../grideditor.js';
+
+Object.assign(GridEditor.locales.en, {
+    'utility.flex_direction': 'Direction',
+    'utility.flex_wrap': 'Wrap',
+    'utility.justify_content': 'Justify columns',
+    'utility.align_items': 'Align columns',
+    'utility.align_content': 'Align lines',
+    'utility.gap': 'Gap',
+    'utility.row_gap': 'Row gap',
+    'utility.column_gap': 'Column gap',
+    'utility.flex_fill': 'Fill',
+    'utility.flex_grow': 'Grow',
+    'utility.flex_shrink': 'Shrink',
+});
+
+/** What Bootstrap's value names come to in css. */
+var FLEX = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+    baseline: 'baseline',
+    stretch: 'stretch',
+};
+
+var GAPS = ['0', '1', '2', '3', '4', '5'];
+
+/** Bootstrap's $spacers. */
+var SCALE = ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'];
+
+/** A flex container: a row is one already, and has its gutters for gaps. */
+var CONTAINERS = ['row', 'column', 'element', 'container'];
+
+/** What sits in a flex container and can grow, shrink or fill it. */
+var ITEMS = ['column', 'element', 'container'];
+
+export function flexPart(ge, spacing) {
+
+    var scale = (spacing && spacing.scale) || SCALE;
+
+    /** A family whose preview is its one css property, the node's own without a class. */
+    function family(definition) {
+        var property = definition.property || definition.name;
+
+        return Object.assign({
+            prefix: definition.name,
+            panel: false,
+            preview: function(value, node) {
+                var styles = {};
+                styles[property] = value === null ? ge.bareStyle(node, definition.name, property) : definition.css(value);
+                return styles;
+            },
+        }, definition);
+    }
+
+    /** An alignment family: its values are Bootstrap's names, and without a class it is normal. */
+    function alignment(definition) {
+        return family(Object.assign({
+            appliesTo: CONTAINERS,
+            preview: function(value) {
+                var styles = {};
+                styles[definition.name] = value === null ? 'normal' : FLEX[value];
+                return styles;
+            },
+        }, definition));
+    }
+
+    function gap(definition) {
+        return family(Object.assign({
+            values: GAPS,
+            appliesTo: ITEMS,
+            css: function(value) { return scale[value]; },
+        }, definition));
+    }
+
+    function same(value) {
+        return value;
+    }
+
+    return {
+        families: [
+            family({
+                name: 'flex-direction',
+                prefix: 'flex',
+                labelKey: 'utility.flex_direction',
+                values: ['row', 'row-reverse', 'column', 'column-reverse'],
+                appliesTo: CONTAINERS,
+                css: same,
+            }),
+            family({
+                name: 'flex-wrap',
+                prefix: 'flex',
+                labelKey: 'utility.flex_wrap',
+                values: ['wrap', 'nowrap', 'wrap-reverse'],
+                appliesTo: CONTAINERS,
+                css: same,
+            }),
+            alignment({
+                name: 'justify-content',
+                labelKey: 'utility.justify_content',
+                values: ['start', 'center', 'end', 'between', 'around', 'evenly'],
+            }),
+            alignment({
+                name: 'align-items',
+                labelKey: 'utility.align_items',
+                values: ['start', 'center', 'end', 'baseline', 'stretch'],
+            }),
+            alignment({
+                name: 'align-content',
+                labelKey: 'utility.align_content',
+                values: ['start', 'center', 'end', 'between', 'around', 'stretch'],
+            }),
+            gap({ name: 'gap', labelKey: 'utility.gap' }),
+            gap({ name: 'row-gap', labelKey: 'utility.row_gap' }),
+            gap({ name: 'column-gap', labelKey: 'utility.column_gap' }),
+            family({
+                name: 'flex-fill',
+                prefix: 'flex',
+                property: 'flex',
+                labelKey: 'utility.flex_fill',
+                values: ['fill'],
+                appliesTo: ITEMS,
+                css: function() { return '1 1 auto'; },
+            }),
+            family({
+                name: 'flex-grow',
+                prefix: 'flex',
+                labelKey: 'utility.flex_grow',
+                values: ['grow-0', 'grow-1'],
+                appliesTo: ITEMS,
+                css: function(value) { return value.slice(-1); },
+            }),
+            family({
+                name: 'flex-shrink',
+                prefix: 'flex',
+                labelKey: 'utility.flex_shrink',
+                values: ['shrink-0', 'shrink-1'],
+                appliesTo: ITEMS,
+                css: function(value) { return value.slice(-1); },
+            }),
+        ],
+    };
+}

package/src/js/style/float.js

@@ -2,10 +2,8 @@
  * Float, a part of the style plugin: floating an element per breakpoint, with Bootstrap's
  * float-{breakpoint}-start, -end and -none classes.
  *
- * The part is what the float plugin was up to 7.2 - its families, and
- * whatever it did on the canvas - as a function of the handle.
- * grideditor.style.js puts it in its sections; the deprecated
- * grideditor.float.js still registers it on its own, as it always did.
+ * Its families, and whatever it does on the canvas, as a function of the
+ * handle: grideditor.style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/style/options.js

@@ -3,13 +3,11 @@
  *
  *   style: {
  *       sections: { border: { properties: [...], catalog: false }, position: false, … },
- *       spacing: { values, scale },   // what utilities.spacing was
- *       visibility: { drawer },       // what utilities.visibility was
+ *       spacing: { values, scale },   // the values offered, and what 0 to 5 come to
+ *       visibility: { drawer },       // false leaves the eye out of the drawers
  *   }
  *
- * Every section is on unless it is turned off. utilities.spacing and
- * utilities.visibility are still read, for 7.x, when the new key is not
- * there, and said to be deprecated.
+ * Every section is on unless it is turned off.
  */
 import { SECTIONS, section } from './sections.js';
 
@@ -51,25 +49,12 @@ function resolveSections(ge, given) {
     return resolved;
 }
 
-/** An option of a merged part: the new key, or the old one, deprecated. */
-function partOption(ge, style, name) {
-    if (style[name] !== undefined) { return style[name]; }
-
-    var old = (ge.settings.utilities || {})[name];
-    if (old !== undefined) {
-        ge.warn('utilities.' + name + ' is deprecated and will be removed in 8.0: use style.' + name);
-        return old;
-    }
-
-    return undefined;
-}
-
 export function resolveOptions(ge) {
     var style = ge.settings.style || {};
 
     return {
         sections: resolveSections(ge, style.sections),
-        spacing: partOption(ge, style, 'spacing'),
-        visibility: partOption(ge, style, 'visibility'),
+        spacing: style.spacing,
+        visibility: style.visibility,
     };
 }