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

package/src/js/plugins/grideditor.float.js

@@ -1,29 +0,0 @@
-/**
- * Floating elements for grid-editor.
- *
- * A utility plugin: load this file after the editor and after the elements
- * plugin, and an element can float to the start or the end of its content
- * area per breakpoint, with the text around it, using Bootstrap's
- * float-{breakpoint}-start, -end and -none classes. What it can ask the
- * editor for is the handle its factory is called with, described in
- * docs/plugins.md.
- *
- *   <script src="dist/grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.elements.min.js"></script>
- *   <script src="dist/plugins/grideditor.float.min.js"></script>
- *
- * Elements only. A floated row or column stops being part of the grid, and a
- * container sits beside the content areas rather than in their text.
- *
- * 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 { floatPart } from '../style/float.js';
-
-GridEditor.utilities.float = function(ge) {
-    ge.warn('the "float" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
-    return floatPart(ge);
-};

package/src/js/plugins/grideditor.spacing.js

@@ -1,31 +0,0 @@
-/**
- * Spacing for grid-editor.
- *
- * A utility plugin: load this file after the editor and every row, column,
- * element and container can have its padding and margin set per breakpoint,
- * with Bootstrap's p-{breakpoint}-*, pt-, px- … and m-{breakpoint}-*, mt-, mx-
- * … classes. What it can ask the editor for is the handle its factory is
- * called with, described in docs/plugins.md.
- *
- *   <script src="dist/grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.spacing.min.js"></script>
- *
- * Fourteen families would be fourteen fields, so the panel has two, padding
- * and margin, each a choice of side and a value for that side.
- *
- * utilities.spacing.values narrows the values offered, and
- * utilities.spacing.scale is what 0 to 5 come to, for a page that changed
- * Bootstrap's $spacers.
- *
- * 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 { spacingPart } from '../style/spacing.js';
-
-GridEditor.utilities.spacing = function(ge) {
-    ge.warn('the "spacing" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
-    return spacingPart(ge, ge.settings.utilities.spacing);
-};

package/src/js/plugins/grideditor.textalign.js

@@ -1,27 +0,0 @@
-/**
- * Text alignment for grid-editor.
- *
- * A utility plugin: load this file after the editor and a row, column,
- * element or container can align its text per breakpoint, with Bootstrap's
- * text-{breakpoint}-start, -center and -end classes. What it can ask the
- * editor for is the handle its factory is called with, described in
- * docs/plugins.md.
- *
- *   <script src="dist/grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.textalign.min.js"></script>
- *
- * The class aligns everything inside the node that does not align itself: a
- * paragraph the rich text editor gave its own text-align keeps it.
- *
- * 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 { textalignPart } from '../style/textalign.js';
-
-GridEditor.utilities.textalign = function(ge) {
-    ge.warn('the "textalign" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
-    return textalignPart(ge);
-};

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

@@ -1,32 +0,0 @@
-/**
- * Visibility for grid-editor.
- *
- * A utility plugin: load this file after the editor and every row, column,
- * element and container can be hidden at some breakpoints and shown at
- * others, with Bootstrap's d-{breakpoint}-none and d-{breakpoint}-block (or
- * -flex, for a row, which is a flex container and stops being a grid as a
- * block). What it can ask the editor for is the handle its factory is called
- * with, described in docs/plugins.md.
- *
- *   <script src="dist/grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.visibility.min.js"></script>
- *
- * A hidden node is never hidden from the editor, which would leave nothing to
- * click to show it again. It stays on the canvas, faded and striped in a view
- * where it is hidden, and in the all view says at which breakpoints it is.
- *
- * 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 { visibilityPart } from '../style/visibility.js';
-
-GridEditor.utilities.visibility = function(ge) {
-    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/visibility.js

@@ -1,160 +0,0 @@
-/**
- * Visibility, a part of the style plugin: hiding and showing per breakpoint, with Bootstrap's d-{breakpoint}-none
- * and d-{breakpoint}-block or -flex classes, and the eye in the drawers.
- *
- * The part is what the visibility plugin was up to 7.2 - its families, and
- * whatever it did on the canvas - as a function of the handle and its options.
- * grideditor.style.js puts it in its sections; the deprecated
- * grideditor.visibility.js still registers it on its own, as it always did.
- */
-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]';
-
-export function visibilityPart(ge, given) {
-
-    var options = Object.assign({ drawer: true }, given);
-
-    /** 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,
-    };
-}