@themarioga/grid-editor 7.2.0 → 8.0.0-beta.2

package/src/js/style/fields.js

@@ -0,0 +1,382 @@
+/**
+ * The style plugin's inline fields: one per css property, each writing the
+ * node's own style through ge.setHostStyle, never by hand, so the preview
+ * of a breakpoint view neither shows in them nor eats what they write.
+ *
+ * A field is filled from the node by renderStyleField, again whenever the
+ * plugin asks: after a write elsewhere, after the classes change. A value
+ * the browser refused stays in its field, marked invalid, until it is put
+ * right or emptied; nothing is written meanwhile.
+ */
+import * as dom from '../dom.js';
+import { overriding } from './sections.js';
+
+var renderers = new WeakMap(); // field -> what fills it from the node
+var fieldCounter = 0;
+
+function classesOf(node) {
+    return (node.getAttribute('class') || '').split(/\s+/).filter(Boolean);
+}
+
+/**
+ * Write what the user typed: trimmed, with a trailing !important taken as
+ * the priority. Without one, the property keeps the priority it had.
+ */
+function write(ge, node, property, raw) {
+    var text = String(raw === null || raw === undefined ? '' : raw).trim();
+    var important = /\s*!\s*important\s*$/i.exec(text);
+    var priority;
+
+    if (important) {
+        text = text.slice(0, important.index).trim();
+        priority = 'important';
+    }
+
+    return ge.setHostStyle(node, property, text, priority);
+}
+
+function mark(input, ok, ge) {
+    dom.toggleClass(input, 'is-invalid', !ok);
+    if (ok) {
+        input.removeAttribute('title');
+    } else {
+        input.setAttribute('title', ge.t('style.invalid'));
+    }
+}
+
+/** Put a value in an input, unless it holds something refused that is still being put right. */
+function fill(input, value) {
+    if (!dom.hasClass(input, 'is-invalid')) { input.value = value; }
+}
+
+function textInput(className) {
+    return dom.element('input', { type: 'text', 'class': 'form-control form-control-sm ' + (className || '') });
+}
+
+/* Colors */
+
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/** What a color picker can show of a value: a six digit hex, or nothing. */
+function pickable(value) {
+    var match = HEX.exec(value.trim());
+    if (!match) { return null; }
+
+    var hex = match[1];
+    if (hex.length === 3) { hex = hex.split('').map(function(c) { return c + c; }).join(''); }
+
+    return '#' + hex.toLowerCase();
+}
+
+/** A picker and a text beside it, which takes what a picker cannot: rgba, var(), transparent. */
+function colorControl(onValue) {
+    var box = dom.element('div', { 'class': 'input-group input-group-sm ge-style-color' });
+    var picker = box.appendChild(dom.element('input', { type: 'color', 'class': 'form-control form-control-color' }));
+    var text = box.appendChild(textInput());
+
+    picker.addEventListener('input', function() {
+        dom.removeClass(text, 'is-invalid');
+        text.value = picker.value;
+        onValue(picker.value, text);
+    });
+    text.addEventListener('change', function() {
+        var hex = pickable(text.value);
+        if (hex) { picker.value = hex; }
+        onValue(text.value, text);
+    });
+
+    return {
+        element: box,
+        set: function(value) {
+            fill(text, value);
+            var hex = pickable(value);
+            if (hex) { picker.value = hex; }
+        },
+    };
+}
+
+/* Background images */
+
+var URL_VALUE = /^url\(\s*(["']?)(.*)\1\s*\)$/i;
+
+/** What the field shows of a background-image: the url itself, or the value as it is. */
+function shownUrl(value) {
+    var match = URL_VALUE.exec(value.trim());
+    if (!match) { return value; }
+
+    return match[1] ? match[2].replace(/\\(["\\])/g, '$1') : match[2];
+}
+
+/** A url becomes url("…"); a gradient, none or any other css function goes as it is. */
+function urlValue(text) {
+    text = text.trim();
+    if (text === '' || /^(?:none|inherit|initial|unset|revert)$/i.test(text) || /^[a-z-]+\(/i.test(text)) { return text; }
+
+    return 'url("' + text.replace(/(["\\])/g, '\\$1') + '")';
+}
+
+/* Shadows */
+
+/** Split at spaces and commas outside parentheses. */
+function tokens(value) {
+    var list = [];
+    var depth = 0;
+    var current = '';
+
+    for (var i = 0; i < value.length; i++) {
+        var c = value.charAt(i);
+
+        if (c === '(') { depth++; }
+        if (c === ')') { depth--; }
+
+        if (depth === 0 && (c === ' ' || c === ',')) {
+            if (current) { list.push(current); }
+            if (c === ',') { list.push(','); }
+            current = '';
+        } else {
+            current += c;
+        }
+    }
+    if (current) { list.push(current); }
+
+    return list;
+}
+
+var LENGTH = /^-?(?:\d*\.)?\d+(?:[a-z%]+)?$/i;
+
+/** The lengths of a shadow, in the order css writes them; a text shadow has no spread. */
+var SHADOW_PARTS = [
+    { name: 'x', labelKey: 'style.shadow_x' },
+    { name: 'y', labelKey: 'style.shadow_y' },
+    { name: 'blur', labelKey: 'style.shadow_blur' },
+    { name: 'spread', labelKey: 'style.shadow_spread' },
+];
+
+/**
+ * One shadow as the builder's parts, or null when the value is something
+ * the builder cannot hold: several shadows, var(), a keyword.
+ */
+function parseShadow(value, box) {
+    value = value.trim();
+    if (value === '') { return { inset: false, lengths: [], color: '' }; }
+    if (/var\(/i.test(value)) { return null; }
+
+    var list = tokens(value);
+    if (list.indexOf(',') !== -1) { return null; }
+
+    var inset = false;
+    var lengths = [];
+    var colors = [];
+
+    list.forEach(function(token) {
+        if (box && token.toLowerCase() === 'inset') {
+            inset = true;
+        } else if (LENGTH.test(token)) {
+            lengths.push(token);
+        } else {
+            colors.push(token);
+        }
+    });
+
+    if (colors.length > 1 || lengths.length < 2 || lengths.length > (box ? 4 : 3)) { return null; }
+    if (colors.length && /^(?:none|inherit|initial|unset|revert)$/i.test(colors[0])) { return null; }
+
+    return { inset: inset, lengths: lengths, color: colors[0] || '' };
+}
+
+function composeShadow(parts, box) {
+    var lengths = parts.lengths.slice();
+
+    // A later length needs the earlier ones: a spread needs a blur
+    for (var i = lengths.length - 1; i >= 0; i--) {
+        if (lengths[i] === '' && lengths.slice(i + 1).some(Boolean)) { lengths[i] = '0'; }
+    }
+    lengths = lengths.filter(Boolean);
+
+    if (!lengths.length && !parts.color && !parts.inset) { return ''; }
+    while (lengths.length < 2) { lengths.push('0'); }
+
+    return (box && parts.inset ? 'inset ' : '') + lengths.join(' ') + (parts.color ? ' ' + parts.color : '');
+}
+
+/**
+ * The shadow field: a builder for one shadow - x, y, blur, the spread and
+ * inset for a box - and the value as text when it is more than the
+ * builder holds, or when the user asks for the text.
+ */
+function shadowControl(ge, node, property, changed) {
+    var box = property === 'box-shadow';
+    var holder = dom.element('div', { 'class': 'ge-style-shadow' });
+    var textMode = false;
+
+    function writeValue(value, input) {
+        var ok = write(ge, node, property, value);
+        mark(input, ok, ge);
+        if (ok) { changed(); }
+        return ok;
+    }
+
+    function builder(parts) {
+        holder.innerHTML = '';
+        var grid = holder.appendChild(dom.element('div', { 'class': 'ge-style-shadow-builder' }));
+        var names = box ? SHADOW_PARTS : SHADOW_PARTS.slice(0, 3);
+        var inputs = names.map(function(part, i) {
+            var cell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part' }));
+            cell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t(part.labelKey)));
+            var input = cell.appendChild(textInput('ge-style-shadow-' + part.name));
+            input.value = parts.lengths[i] || '';
+            return input;
+        });
+
+        var colorCell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part ge-style-shadow-color' }));
+        colorCell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t('style.shadow_color')));
+        var color = colorControl(function() { update(); });
+        colorCell.appendChild(color.element);
+        color.set(parts.color);
+
+        var inset = null;
+        if (box) {
+            var insetCell = grid.appendChild(dom.element('label', { 'class': 'form-check ge-style-shadow-inset' }));
+            inset = insetCell.appendChild(dom.element('input', { type: 'checkbox', 'class': 'form-check-input' }));
+            insetCell.appendChild(dom.element('span', { 'class': 'form-check-label' }, ge.t('style.shadow_inset')));
+            inset.checked = parts.inset;
+            inset.addEventListener('change', function() { update(); });
+        }
+
+        inputs.forEach(function(input) { input.addEventListener('change', function() { update(); }); });
+
+        var toText = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-style-shadow-mode' }, ge.t('style.shadow_text_mode')));
+        toText.addEventListener('click', function(e) {
+            e.preventDefault();
+            textMode = true;
+            render();
+        });
+
+        function update() {
+            var value = composeShadow({
+                inset: inset ? inset.checked : false,
+                lengths: inputs.map(function(input) { return input.value.trim(); }),
+                color: dom.one(color.element, 'input[type="text"]').value.trim(),
+            }, box);
+            writeValue(value, inputs[0]);
+        }
+    }
+
+    function text(value) {
+        holder.innerHTML = '';
+        var input = holder.appendChild(textInput('ge-style-shadow-text'));
+        input.value = value;
+        input.addEventListener('change', function() {
+            if (input.value.trim() === '') {
+                if (writeValue('', input)) {
+                    textMode = false;
+                    render();
+                }
+                return;
+            }
+            writeValue(input.value, input);
+        });
+    }
+
+    var shown = null; // The value the builder or the text was last built for
+
+    function render() {
+        if (holder.querySelector('.is-invalid')) { return; }
+
+        var value = ge.hostStyle(node, property).value;
+        var parts = parseShadow(value, box);
+
+        // Built again only when the value changed under it: building takes
+        // the focus from whichever of its inputs the user moved on to
+        if (value === shown && holder.firstChild && textMode === !!holder.querySelector('.ge-style-shadow-text')) { return; }
+        shown = value;
+
+        if (textMode || !parts) {
+            textMode = !!value || textMode;
+            text(value);
+        } else {
+            builder(parts);
+        }
+    }
+
+    return { element: holder, render: render, value: function() { return ge.hostStyle(node, property).value; } };
+}
+
+/**
+ * The field for one property of a node. `changed` is called after every
+ * write that went through, so the plugin can bring the rest of its
+ * sections up to date.
+ */
+export function createStyleField(ge, node, property, changed) {
+    var field = dom.element('div', { 'class': 'ge-style-field', 'data-ge-style-property': property.name });
+    var label = field.appendChild(dom.element('label', { 'class': 'ge-style-label' }, ge.t(property.labelKey)));
+    var render;
+
+    function current() {
+        return ge.hostStyle(node, property.name).value;
+    }
+
+    function commit(value, input) {
+        var ok = write(ge, node, property.name, value);
+        mark(input, ok, ge);
+        if (ok) { changed(); }
+    }
+
+    if (property.type === 'select') {
+        var select = field.appendChild(dom.element('select', { 'class': 'form-select form-select-sm' }));
+        select.addEventListener('change', function() { commit(select.value, select); });
+        render = function() {
+            var value = current();
+            var values = property.values.slice();
+            if (value && values.indexOf(value) === -1) { values.push(value); }
+
+            select.innerHTML = '';
+            select.appendChild(dom.element('option', { value: '' }, ''));
+            values.forEach(function(each) { select.appendChild(dom.element('option', { value: each }, each)); });
+            select.value = value;
+        };
+    } else if (property.type === 'color') {
+        var color = colorControl(function(value, input) { commit(value, input); });
+        field.appendChild(color.element);
+        render = function() { color.set(current()); };
+    } else if (property.type === 'url') {
+        var url = field.appendChild(textInput());
+        url.addEventListener('change', function() { commit(urlValue(url.value), url); });
+        render = function() { fill(url, shownUrl(current())); };
+    } else if (property.type === 'shadow') {
+        var shadow = shadowControl(ge, node, property.name, changed);
+        field.appendChild(shadow.element);
+        render = shadow.render;
+    } else {
+        var input = field.appendChild(textInput());
+        input.addEventListener('change', function() { commit(input.value, input); });
+        render = function() { fill(input, current()); };
+    }
+
+    var control = field.querySelector('input, select');
+    if (control) {
+        control.id = 'ge-style-field-' + (++fieldCounter);
+        label.setAttribute('for', control.id);
+    }
+
+    field.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-overridden' }));
+
+    renderers.set(field, function() {
+        render();
+
+        // A Bootstrap utility on the node wins over the value: every one is !important
+        var winner = current() ? overriding(property.name, classesOf(node)) : null;
+        var note = dom.child(field, '.ge-style-overridden');
+        note.textContent = winner ? ge.t('style.overridden', { 'class': winner }) : '';
+        dom.toggle(note, !!winner);
+    });
+    renderStyleField(field);
+
+    return field;
+}
+
+/** Fill a field from its node again. */
+export function renderStyleField(field) {
+    var render = renderers.get(field);
+    if (render) { render(); }
+}

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/{plugins/grideditor.float.js → style/float.js}

@@ -1,19 +1,9 @@
 /**
- * Floating elements for grid-editor.
+ * Float, a part of the style plugin: floating an element per breakpoint, with Bootstrap's
+ * float-{breakpoint}-start, -end and -none classes.
  *
- * 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.
+ * 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';
 
@@ -27,7 +17,7 @@ Object.assign(GridEditor.locales.en, {
 /** Start and end are left and right: Bootstrap's css is left to right. */
 var CSS = { start: 'left', end: 'right', none: 'none' };
 
-GridEditor.utilities.float = function(ge) {
+export function floatPart(ge) {
 
     function label(value) {
         if (value === 'start') { return ge.t('utility.float_start'); }
@@ -51,4 +41,4 @@ GridEditor.utilities.float = function(ge) {
             },
         }],
     };
-};
+}

package/src/js/style/options.js

@@ -0,0 +1,60 @@
+/**
+ * The style plugin's settings, `style` in the editor's options:
+ *
+ *   style: {
+ *       sections: { border: { properties: [...], catalog: false }, position: false, … },
+ *       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.
+ */
+import { SECTIONS, section } from './sections.js';
+
+/**
+ * What each section shows: { key: { properties, catalog } } for the ones
+ * that are on, in the sections' own order.
+ */
+function resolveSections(ge, given) {
+    var resolved = {};
+
+    Object.keys(given || {}).forEach(function(key) {
+        if (!section(key)) { ge.warn('style.sections: there is no "' + key + '" section: ignored'); }
+    });
+
+    SECTIONS.forEach(function(each) {
+        var option = given && given[each.key] !== undefined ? given[each.key] : true;
+        if (option === false) { return; }
+
+        var own = each.properties.map(function(property) { return property.name; });
+        var properties = each.properties;
+        var catalog = true;
+
+        if (option && typeof option === 'object') {
+            if (Array.isArray(option.properties)) {
+                option.properties.forEach(function(name) {
+                    if (own.indexOf(name) === -1) {
+                        ge.warn('style.sections.' + each.key + ': "' + name + '" is not one of its properties: ignored');
+                    }
+                });
+                properties = option.properties.filter(function(name) { return own.indexOf(name) !== -1; })
+                    .map(function(name) { return each.properties[own.indexOf(name)]; });
+            }
+            if (option.catalog === false) { catalog = false; }
+        }
+
+        resolved[each.key] = { section: each, properties: properties, catalog: catalog };
+    });
+
+    return resolved;
+}
+
+export function resolveOptions(ge) {
+    var style = ge.settings.style || {};
+
+    return {
+        sections: resolveSections(ge, style.sections),
+        spacing: style.spacing,
+        visibility: style.visibility,
+    };
+}