@themarioga/grid-editor 7.2.0 → 7.3.0

package/src/js/plugins/grideditor.visibility.js

@@ -17,155 +17,16 @@
  *
  * utilities.visibility.drawer: false leaves the eye out of the drawers, and
  * the panel field is the only control.
+ *
+ * Deprecated since 7.3, and gone in 8.0: grideditor.style.js carries this
+ * plugin's families, and edits them in its own sections. This file is that
+ * part on its own, as it was, and says so once per editor. Loaded beside
+ * the style plugin, it stands down.
  */
 import { GridEditor } from '../grideditor.js';
-import * as dom from '../dom.js';
-
-Object.assign(GridEditor.locales.en, {
-    'utility.visibility': 'Visibility',
-    'utility.visibility_hidden': 'Hidden',
-    'utility.visibility_shown': 'Shown',
-    'tool.hide_in_view': 'Hide in this view',
-    'tool.show_in_view': 'Show in this view',
-    'badge.hidden_in': 'Hidden at {breakpoints}',
-});
-
-/** A node that carries any class of the family, at any breakpoint. */
-var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
-
-var NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
+import { visibilityPart } from '../style/visibility.js';
 
 GridEditor.utilities.visibility = function(ge) {
-
-    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);
-
-    /** What "shown" is written as on this kind of node. */
-    function shown(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, 'visibility', 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]);
-    }
-
-    /**
-     * 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 a d-*-block on top of it. 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) ? shown(kind) : null;
-        }
-
-        ge.setUtility(node, 'visibility', value, { source: 'tool' });
-    }
-
-    /**
-     * The canvas shows each node as the view sees it. ge-visibility keeps a
-     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,
-     * and 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;
-
-            dom.toggleClass(node, 'ge-visibility', carries);
-            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-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {
-            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');
-            node.removeAttribute('data-ge-hidden-in');
-            dom.dropEmptyClass(node);
-        });
-    }
-
-    return {
-        families: [{
-            name: 'visibility',
-            prefix: 'd',
-            values: ['none', 'block', 'flex'],
-            appliesTo: ['row', 'column', 'text', 'element', 'container'],
-            labelKey: 'utility.visibility',
-
-            /** Hidden, or shown the way this kind of node is shown. */
-            choices: function(node, kind) {
-                return ['none', shown(kind)];
-            },
-
-            label: function(value) {
-                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');
-            },
-        }],
-
-        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,
-    };
+    ge.warn('the "visibility" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
+    return visibilityPart(ge, ge.settings.utilities.visibility);
 };

package/src/js/style/accordion.js

@@ -0,0 +1,157 @@
+/**
+ * The style plugin's accordion for one node: a section per group of
+ * properties, each with the merged utilities' per breakpoint fields, the
+ * inline fields and the catalog - as far as each applies to the node.
+ *
+ * Bootstrap's accordion markup, opened and closed here, so it needs none of
+ * Bootstrap's javascript. One section is open at a time, and the one the
+ * user opened last is open again on the next node's panel.
+ */
+import * as dom from '../dom.js';
+import { offeredOn } from './sections.js';
+import { createStyleField, renderStyleField } from './fields.js';
+import { createCatalog, renderCatalog } from './catalog.js';
+import { createCustom } from './custom.js';
+
+/** The kinds of node that take inline style: not a text, nor plain content. */
+export function takesInlineStyle(node, kind) {
+    if (kind === 'row' || kind === 'column' || kind === 'element' || kind === 'section') { return true; }
+    if (dom.is(node, '[data-ge-container]')) { return true; }
+
+    // A pane of a container, whatever its container calls it
+    return !!dom.child(node, '.ge-tools-drawer.ge-pane-drawer');
+}
+
+/** Whether a merged family applies to the node, as the editor decides it. */
+function familyApplies(family, node, kind) {
+    if (kind === 'plain') { kind = 'text'; }
+    if (family.appliesTo.indexOf(kind) !== -1) { return true; }
+
+    return family.appliesTo.indexOf('container') !== -1 && dom.is(node, '[data-ge-container]');
+}
+
+/**
+ * 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.
+ */
+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;
+}
+
+/**
+ * `context` is the plugin's: its resolved sections, its parts by name, the
+ * state it keeps for the editor ({ open }) and `opened(key)`, called when
+ * the user opens or closes a section.
+ */
+export function createAccordion(ge, node, kind, context) {
+    var inline = takesInlineStyle(node, kind);
+    var accordion = dom.element('div', { 'class': 'accordion ge-style' });
+    var fields = [];
+    var catalogs = [];
+    var notes = [];
+    var custom = null;
+    var customItem = null;
+    var changed = function() { render(); };
+
+    function item(key, labelKey) {
+        var entry = accordion.appendChild(dom.element('div', { 'class': 'accordion-item', 'data-ge-style-section': key }));
+        var header = entry.appendChild(dom.element('h2', { 'class': 'accordion-header' }));
+        var button = header.appendChild(dom.element('button', {
+            type: 'button',
+            'class': 'accordion-button collapsed',
+            'aria-expanded': 'false',
+        }, ge.t(labelKey)));
+        var collapse = entry.appendChild(dom.element('div', { 'class': 'accordion-collapse collapse' }));
+        var body = collapse.appendChild(dom.element('div', { 'class': 'accordion-body' }));
+
+        button.addEventListener('click', function() {
+            var opening = !dom.hasClass(collapse, 'show');
+            context.state.open = opening ? key : null;
+            // Every panel is built on init, so the others are told as well:
+            // whoever opened Border on one node wants it on the next
+            context.opened(context.state.open);
+        });
+
+        return { entry: entry, body: body };
+    }
+
+    function toggle(entry, shown) {
+        dom.toggleClass(dom.one(entry, '.accordion-collapse'), 'show', shown);
+        var button = dom.one(entry, '.accordion-button');
+        dom.toggleClass(button, 'collapsed', !shown);
+        button.setAttribute('aria-expanded', shown ? 'true' : 'false');
+    }
+
+    Object.keys(context.sections).forEach(function(key) {
+        var resolved = context.sections[key];
+        var section = resolved.section;
+
+        if (section.custom) {
+            if (inline) { customItem = item(key, section.labelKey); }
+            return;
+        }
+
+        var parts = section.parts.map(function(name) {
+            return context.parts[name] ? partContent(ge, context.parts[name], node, kind) : null;
+        }).filter(Boolean);
+        var properties = inline ? resolved.properties.filter(function(property) { return offeredOn(property, kind); }) : [];
+        var catalog = inline && resolved.catalog ? createCatalog(ge, node, kind, section.catalog) : null;
+
+        if (!parts.length && !properties.length && !catalog) { return; }
+
+        var body = item(key, section.labelKey).body;
+        parts.forEach(function(part) { body.appendChild(dom.addClass(part, 'ge-style-part')); });
+
+        if (properties.length) {
+            var note = body.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-all-sizes' }, ge.t('style.all_sizes')));
+            notes.push(note);
+
+            var grid = body.appendChild(dom.element('div', { 'class': 'ge-style-fields' }));
+            properties.forEach(function(property) {
+                var field = createStyleField(ge, node, property, changed);
+                fields.push(field);
+                grid.appendChild(field);
+            });
+        }
+
+        if (catalog) {
+            catalogs.push(catalog);
+            body.appendChild(catalog);
+        }
+    });
+
+    // Last, since it shows what the fields made above do not
+    if (customItem) {
+        custom = createCustom(ge, node, fields.map(function(field) {
+            return field.getAttribute('data-ge-style-property');
+        }), changed);
+        customItem.body.appendChild(custom.element);
+        accordion.appendChild(customItem.entry);
+    }
+
+    if (!accordion.children.length) { return null; }
+
+    /** Open this section and no other; null closes them all. */
+    function open(key) {
+        dom.all(accordion, '.accordion-item').forEach(function(entry) {
+            toggle(entry, entry.getAttribute('data-ge-style-section') === key);
+        });
+    }
+
+    open(context.state.open);
+
+    /** Fill everything from the node again: after a write, a change of classes or view. */
+    function render() {
+        fields.forEach(renderStyleField);
+        catalogs.forEach(function(catalog) { renderCatalog(catalog, node); });
+        if (custom) { custom.render(); }
+        notes.forEach(function(note) { dom.toggle(note, ge.view() !== 'all'); });
+    }
+
+    render();
+
+    return { element: accordion, render: render, open: open };
+}

package/src/js/style/catalog.js

@@ -0,0 +1,76 @@
+/**
+ * The style plugin's catalog: Bootstrap's classes for what a section
+ * styles, as chips that put a class on the node or take it off.
+ *
+ * A chip never touches the node itself. It writes the panel's classes
+ * field and fires its change, as the user typing there would, so the
+ * editor keeps the node's own classes apart from its editing ones, and the
+ * Responsive section and the preview follow. Within an exclusive group,
+ * choosing one class takes the others off.
+ */
+import * as dom from '../dom.js';
+import { offeredOn } from './sections.js';
+
+function classesOf(node) {
+    return (node.getAttribute('class') || '').split(/\s+/).filter(Boolean);
+}
+
+/** Put a class on or off through the node's classes field. */
+function choose(ge, node, group, name) {
+    var details = ge.detailsOf(node);
+    var input = details ? dom.one(details, '.ge-classes') : null;
+    if (!input) { return; }
+
+    var on = classesOf(node).indexOf(name) !== -1;
+    var list = input.value.split(/\s+/).filter(Boolean).filter(function(each) {
+        if (each === name) { return false; }
+        return !(group.exclusive && !on && group.classes.indexOf(each) !== -1);
+    });
+
+    if (!on) { list.push(name); }
+
+    input.value = list.join(' ');
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+/**
+ * A section's catalog for a node, or null when none of its groups is
+ * offered on this kind of node.
+ */
+export function createCatalog(ge, node, kind, groups) {
+    var offered = groups.filter(function(group) { return offeredOn(group, kind); });
+    if (!offered.length) { return null; }
+
+    var box = dom.element('div', { 'class': 'ge-style-catalog' });
+    box.appendChild(dom.element('span', { 'class': 'ge-style-label' }, ge.t('style.catalog')));
+
+    offered.forEach(function(group) {
+        var row = box.appendChild(dom.element('div', { 'class': 'ge-style-chips' }));
+
+        group.classes.forEach(function(name) {
+            var chip = row.appendChild(dom.element('button', {
+                type: 'button',
+                'class': 'btn btn-sm btn-outline-secondary ge-style-chip',
+                'data-ge-class': name,
+                'aria-pressed': 'false',
+            }, name));
+
+            chip.addEventListener('click', function() { choose(ge, node, group, name); });
+        });
+    });
+
+    renderCatalog(box, node);
+
+    return box;
+}
+
+/** A chip is pressed while its class is on the node. */
+export function renderCatalog(box, node) {
+    var classes = classesOf(node);
+
+    dom.all(box, '.ge-style-chip').forEach(function(chip) {
+        var on = classes.indexOf(chip.getAttribute('data-ge-class')) !== -1;
+        dom.toggleClass(chip, 'active', on);
+        chip.setAttribute('aria-pressed', on ? 'true' : 'false');
+    });
+}

package/src/js/style/custom.js

@@ -0,0 +1,84 @@
+/**
+ * The style plugin's free css: a textarea with every declaration of the
+ * node's own style that no field on show stands for - whatever the host
+ * wrote that the sections have no field for, and what a section the host
+ * turned off or narrowed would have shown.
+ *
+ * Compared longhand by longhand, which is how the browser holds a style: a
+ * margin written as a shorthand is its four sides, and a field for
+ * border-width stands for the four border-*-width. Editing the textarea
+ * writes those declarations again; the browser drops what it cannot
+ * parse, and the textarea shows what was kept.
+ */
+import * as dom from '../dom.js';
+
+/** The longhands a property sets, as the browser expands it. */
+function longhands(property) {
+    var probe = document.createElement('div').style;
+    var list = [];
+
+    probe.setProperty(property, 'initial');
+    for (var i = 0; i < probe.length; i++) { list.push(probe[i]); }
+
+    return list.length ? list : [property];
+}
+
+function declaration(cssText) {
+    var style = document.createElement('div').style;
+    style.cssText = cssText;
+    return style;
+}
+
+/** `properties` are the ones the node's fields on show stand for. */
+export function createCustom(ge, node, properties, changed) {
+    var covered = {};
+    properties.forEach(function(property) {
+        longhands(property).forEach(function(longhand) { covered[longhand] = true; });
+    });
+
+    var box = dom.element('div', { 'class': 'ge-style-custom' });
+    var textarea = box.appendChild(dom.element('textarea', {
+        'class': 'form-control form-control-sm font-monospace ge-style-custom-css',
+        rows: '4',
+        spellcheck: 'false',
+        'aria-label': ge.t('style.section_custom'),
+    }));
+
+    /** The declarations of the host's style no field stands for. */
+    function free() {
+        var style = declaration(ge.hostStyle(node));
+        var rest = document.createElement('div').style;
+
+        for (var i = 0; i < style.length; i++) {
+            var name = style[i];
+            if (!covered[name]) { rest.setProperty(name, style.getPropertyValue(name), style.getPropertyPriority(name)); }
+        }
+
+        return rest;
+    }
+
+    textarea.addEventListener('change', function() {
+        var before = free();
+        var wanted = declaration(textarea.value);
+        var i;
+
+        for (i = 0; i < before.length; i++) {
+            if (wanted.getPropertyValue(before[i]) === '') { ge.setHostStyle(node, before[i], ''); }
+        }
+        for (i = 0; i < wanted.length; i++) {
+            ge.setHostStyle(node, wanted[i], wanted.getPropertyValue(wanted[i]), wanted.getPropertyPriority(wanted[i]));
+        }
+
+        render();
+        changed();
+    });
+
+    function render() {
+        if (document.activeElement === textarea) { return; }
+        textarea.value = free().cssText.replace(/; /g, ';\n');
+    }
+
+    render();
+
+    return { element: box, render: render };
+}