@themarioga/grid-editor 4.1.0 → 5.0.0

package/dist/plugins/grideditor.sections.js

@@ -0,0 +1,199 @@
+/**
+ * Sections for grid-editor.
+ *
+ * A feature plugin: load this file after the editor and the canvas can hold
+ * sections - Bootstrap's .container, .container-fluid and .container-{bp} -
+ * each grouping rows at a width of its own. What it can ask the editor for is
+ * the handle its factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.sections.min.js"></script>
+ *
+ * Called sections, not containers, because a container is what the tabs,
+ * accordion, popup and card plugins make. A section is recognised by its
+ * Bootstrap class alone, and only as a child of the canvas: a .container
+ * somewhere inside an element's markup is that element's business.
+ *
+ * sections.widths narrows the widths the field offers.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'section.add': 'Section',
+    'section.width': 'Width',
+    'section.fixed': 'Fixed',
+    'section.fluid': 'Full width',
+    'section.from': 'Fixed from {breakpoint}',
+    'tool.add_row_to_section': 'Add row',
+    'tool.delete_section': 'Remove section',
+    'confirm.delete_section': 'Delete this section and everything in it?',
+});
+
+/** Each width, and the class that gives it. */
+var WIDTHS = {
+    fixed: 'container',
+    fluid: 'container-fluid',
+    sm: 'container-sm',
+    md: 'container-md',
+    lg: 'container-lg',
+    xl: 'container-xl',
+    xxl: 'container-xxl',
+};
+
+var ORDER = ['fixed', 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'];
+
+$.fn.gridEditor.features.sections = function(ge) {
+
+    var options = $.extend({ widths: ORDER }, ge.settings.sections);
+
+    function widthOf(section) {
+        var found = null;
+
+        $.each(WIDTHS, function(width, className) {
+            if (!found && section.hasClass(className)) { found = width; }
+        });
+
+        return found;
+    }
+
+    function isSection(node) {
+        return node.parent()[0] === ge.canvas[0] && widthOf(node) !== null;
+    }
+
+    function sections() {
+        return ge.canvas.children().filter(function() { return isSection($(this)); });
+    }
+
+    function label(width) {
+        if (width === 'fixed') { return ge.t('section.fixed'); }
+        if (width === 'fluid') { return ge.t('section.fluid'); }
+
+        return ge.t('section.from', { breakpoint: width });
+    }
+
+    /**
+     * Change a section's width, announced like a utility: the width is its
+     * one container class, the same at every breakpoint.
+     */
+    function setWidth(section, width, source) {
+        var from = widthOf(section);
+        if (from === width || !WIDTHS[width]) { return false; }
+
+        return ge.operate(function() {
+            var payload = ge.payloadFor('section', section, {
+                family: 'section',
+                breakpoint: 'all',
+                tiers: [],
+                from: from,
+                to: width,
+                source: source || 'api',
+            });
+
+            if (!ge.emit('before-utility', payload)) {
+                section.find('> .ge-tools-drawer .ge-section-width select').val(from);
+                return false;
+            }
+
+            section.removeClass(WIDTHS[from]).addClass(WIDTHS[width]);
+            ge.emit('after-utility', payload);
+
+            return true;
+        });
+    }
+
+    function widthField(section) {
+        var select = $('<select />');
+        var current = widthOf(section);
+        var offered = options.widths.indexOf(current) === -1 ? options.widths.concat([current]) : options.widths;
+
+        ORDER.forEach(function(width) {
+            if (offered.indexOf(width) === -1) { return; }
+            $('<option />').attr('value', width).text(label(width)).appendTo(select);
+        });
+
+        select.val(current).on('change', function() { setWidth(section, this.value, 'panel'); });
+
+        return $('<label class="ge-utility ge-section-width" />')
+            .append($('<span class="ge-utility-label" />').text(ge.t('section.width')))
+            .append(select);
+    }
+
+    function createControls(section) {
+        var drawer = $('<div class="ge-tools-drawer ge-section-drawer" />').prependTo(section);
+
+        ge.createMoveTool(drawer);
+        ge.addSettingsTool(drawer, section, ge.settings.section_classes || []).append(widthField(section));
+
+        ge.createTool(drawer, ge.t('tool.add_row_to_section'), 'ge-add-row', 'bi bi-plus-circle', function() {
+            ge.place(ge.rowFromLayout([12]), 'row', { appendTo: section });
+        });
+
+        ge.createTool(drawer, ge.t('tool.delete_section'), 'ge-delete-section', 'bi bi-trash', function() {
+            ge.deleteNode('section', section, ge.t('confirm.delete_section'), function(removed) {
+                section.slideUp(removed);
+            });
+        });
+    }
+
+    function mark() {
+        sections().each(function() {
+            var section = $(this).addClass('ge-section');
+            if (!section.children('.ge-tools-drawer').length) { createControls(section); }
+        });
+    }
+
+    function unmark() {
+        ge.canvas.children('.ge-section').removeClass('ge-section');
+    }
+
+    /** createSection(options): a section, detached unless a placement is given. */
+    function createSection(settings) {
+        settings = settings || {};
+
+        var section = $('<div />').addClass(WIDTHS[settings.width] || WIDTHS.fixed);
+
+        (settings.rows || [[12]]).forEach(function(layout) {
+            ge.rowFromLayout(layout).appendTo(section);
+        });
+
+        return ge.place(section, 'section', settings);
+    }
+
+    return {
+        methods: {
+            createSection: createSection,
+        },
+
+        kindOf: function(node) {
+            return node.hasClass('ge-section') ? 'section' : null;
+        },
+
+        // A section is a block the canvas moves, and a region rows move in
+        blocks: '.ge-section',
+        regions: '.ge-section',
+
+        /** A section goes on the canvas and nowhere else, and holds rows and nothing else. */
+        accepts: function(region, node) {
+            if (node.hasClass('ge-section') || isSectionMade(node)) { return region[0] === ge.canvas[0]; }
+            if (region.hasClass('ge-section')) { return node.hasClass('row'); }
+
+            return true;
+        },
+
+        toolbar: [{
+            labelKey: 'section.add',
+            kind: 'section',
+            create: function() { return createSection(); },
+        }],
+
+        onInit: mark,
+        onDeinit: unmark,
+    };
+
+    /** A section the toolbar just made, before init has marked it. */
+    function isSectionMade(node) {
+        return !node.parent().length && widthOf(node) !== null;
+    }
+};
+
+})(jQuery);

package/dist/plugins/grideditor.sections.min.js

@@ -0,0 +1,2 @@
+(c=>{c.extend(c.fn.gridEditor.locales.en,{"section.add":"Section","section.width":"Width","section.fixed":"Fixed","section.fluid":"Full width","section.from":"Fixed from {breakpoint}","tool.add_row_to_section":"Add row","tool.delete_section":"Remove section","confirm.delete_section":"Delete this section and everything in it?"});var r={fixed:"container",fluid:"container-fluid",sm:"container-sm",md:"container-md",lg:"container-lg",xl:"container-xl",xxl:"container-xxl"},l=["fixed","sm","md","lg","xl","xxl","fluid"];c.fn.gridEditor.features.sections=function(s){var o=c.extend({widths:l},s.settings.sections);function a(n){var i=null;return c.each(r,function(e,t){!i&&n.hasClass(t)&&(i=e)}),i}function e(){return s.canvas.children().filter(function(){return(e=c(this)).parent()[0]===s.canvas[0]&&null!==a(e);var e})}function n(e){var t=c("<select />"),n=a(e),i=-1===o.widths.indexOf(n)?o.widths.concat([n]):o.widths;return l.forEach(function(e){-1!==i.indexOf(e)&&c("<option />").attr("value",e).text("fixed"===(e=e)?s.t("section.fixed"):"fluid"===e?s.t("section.fluid"):s.t("section.from",{breakpoint:e})).appendTo(t)}),t.val(n).on("change",function(){var t,n,i,o;t=e,n=this.value,i="panel",(o=a(t))!==n&&r[n]&&s.operate(function(){var e=s.payloadFor("section",t,{family:"section",breakpoint:"all",tiers:[],from:o,to:n,source:i||"api"});return s.emit("before-utility",e)?(t.removeClass(r[o]).addClass(r[n]),s.emit("after-utility",e),!0):(t.find("> .ge-tools-drawer .ge-section-width select").val(o),!1)})}),c('<label class="ge-utility ge-section-width" />').append(c('<span class="ge-utility-label" />').text(s.t("section.width"))).append(t)}function t(e){e=e||{};var t=c("<div />").addClass(r[e.width]||r.fixed);return(e.rows||[[12]]).forEach(function(e){s.rowFromLayout(e).appendTo(t)}),s.place(t,"section",e)}return{methods:{createSection:t},kindOf:function(e){return e.hasClass("ge-section")?"section":null},blocks:".ge-section",regions:".ge-section",accepts:function(e,t){var n;return t.hasClass("ge-section")||!(n=t).parent().length&&null!==a(n)?e[0]===s.canvas[0]:!e.hasClass("ge-section")||t.hasClass("row")},toolbar:[{labelKey:"section.add",kind:"section",create:function(){return t()}}],onInit:function(){e().each(function(){var t,e=c(this).addClass("ge-section");e.children(".ge-tools-drawer").length||(t=e,e=c('<div class="ge-tools-drawer ge-section-drawer" />').prependTo(t),s.createMoveTool(e),s.addSettingsTool(e,t,s.settings.section_classes||[]).append(n(t)),s.createTool(e,s.t("tool.add_row_to_section"),"ge-add-row","bi bi-plus-circle",function(){s.place(s.rowFromLayout([12]),"row",{appendTo:t})}),s.createTool(e,s.t("tool.delete_section"),"ge-delete-section","bi bi-trash",function(){s.deleteNode("section",t,s.t("confirm.delete_section"),function(e){t.slideUp(e)})}))})},onDeinit:function(){s.canvas.children(".ge-section").removeClass("ge-section")}}}})(jQuery);
+//# sourceMappingURL=grideditor.sections.min.js.map

package/dist/plugins/grideditor.sections.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.sections.min.js","sources":["../../src/js/plugins/grideditor.sections.js"],"names":["$","extend","fn","gridEditor","locales","en","section.add","section.width","section.fixed","section.fluid","section.from","tool.add_row_to_section","tool.delete_section","confirm.delete_section","WIDTHS","fixed","fluid","sm","md","lg","xl","xxl","ORDER","features","sections","ge","options","widths","settings","widthOf","section","found","each","width","className","hasClass","canvas","children","filter","node","this","parent","widthField","select","current","offered","indexOf","concat","forEach","attr","text","t","breakpoint","appendTo","val","on","source","from","value","operate","payload","payloadFor","family","tiers","to","emit","removeClass","addClass","find","append","createSection","rows","layout","rowFromLayout","place","methods","kindOf","blocks","regions","accepts","region","length","toolbar","labelKey","kind","create","onInit","drawer","prependTo","createMoveTool","addSettingsTool","section_classes","createTool","deleteNode","removed","slideUp","onDeinit","jQuery"],"mappings":"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"}

package/dist/plugins/grideditor.textalign.js

@@ -0,0 +1,60 @@
+/**
+ * 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/jquery.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.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.text_align': 'Text alignment',
+    'utility.text_start': 'Start',
+    'utility.text_center': 'Center',
+    'utility.text_end': 'End',
+});
+
+/** Start and end are left and right: Bootstrap's css is left to right. */
+var CSS = { start: 'left', center: 'center', end: 'right' };
+
+$.fn.gridEditor.utilities.textalign = function(ge) {
+
+    function label(value) {
+        if (value === 'start') { return ge.t('utility.text_start'); }
+        if (value === 'center') { return ge.t('utility.text_center'); }
+
+        return ge.t('utility.text_end');
+    }
+
+    return {
+        families: [{
+            name: 'text-align',
+            prefix: 'text',
+            values: ['start', 'center', 'end'],
+            appliesTo: ['row', 'column', 'element', 'container'],
+            labelKey: 'utility.text_align',
+            label: label,
+
+            /**
+             * With no class applying here, the node aligns as its parent
+             * does - or as the host's css says - which only the browser can
+             * tell, so it is asked with the classes out of the way. Parents
+             * are previewed before their children, so the parent's answer is
+             * already the view's.
+             */
+            preview: function(value, node) {
+                return { 'text-align': value === null ? ge.bareStyle(node, 'text-align', 'text-align') : CSS[value] };
+            },
+        }],
+    };
+};
+
+})(jQuery);

package/dist/plugins/grideditor.textalign.min.js

@@ -0,0 +1,2 @@
+(t=>{t.extend(t.fn.gridEditor.locales.en,{"utility.text_align":"Text alignment","utility.text_start":"Start","utility.text_center":"Center","utility.text_end":"End"});var n={start:"left",center:"center",end:"right"};t.fn.gridEditor.utilities.textalign=function(i){return{families:[{name:"text-align",prefix:"text",values:["start","center","end"],appliesTo:["row","column","element","container"],labelKey:"utility.text_align",label:function(t){return"start"===t?i.t("utility.text_start"):"center"===t?i.t("utility.text_center"):i.t("utility.text_end")},preview:function(t,e){return{"text-align":null===t?i.bareStyle(e,"text-align","text-align"):n[t]}}}]}}})(jQuery);
+//# sourceMappingURL=grideditor.textalign.min.js.map

package/dist/plugins/grideditor.textalign.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.textalign.min.js","sources":["../../src/js/plugins/grideditor.textalign.js"],"names":["$","extend","fn","gridEditor","locales","en","utility.text_align","utility.text_start","utility.text_center","utility.text_end","CSS","start","center","end","utilities","textalign","ge","families","name","prefix","values","appliesTo","labelKey","label","value","t","preview","node","text-align","bareStyle","jQuery"],"mappings":"CAeUA,IAEVA,EAAEC,OAAOD,EAAEE,GAAGC,WAAWC,QAAQC,GAAI,CACjCC,qBAAsB,iBACtBC,qBAAsB,QACtBC,sBAAuB,SACvBC,mBAAoB,KACxB,CAAC,EAGD,IAAIC,EAAM,CAAEC,MAAO,OAAQC,OAAQ,SAAUC,IAAK,OAAQ,EAE1Db,EAAEE,GAAGC,WAAWW,UAAUC,UAAY,SAASC,GAS3C,MAAO,CACHC,SAAU,CAAC,CACPC,KAAM,aACNC,OAAQ,OACRC,OAAQ,CAAC,QAAS,SAAU,OAC5BC,UAAW,CAAC,MAAO,SAAU,UAAW,aACxCC,SAAU,qBACVC,MAdR,SAAeC,GACX,MAAc,UAAVA,EAA4BR,EAAGS,EAAE,oBAAoB,EAC3C,WAAVD,EAA6BR,EAAGS,EAAE,qBAAqB,EAEpDT,EAAGS,EAAE,kBAAkB,CAClC,EAkBQC,QAAS,SAASF,EAAOG,GACrB,MAAO,CAAEC,aAAwB,OAAVJ,EAAiBR,EAAGa,UAAUF,EAAM,aAAc,YAAY,EAAIjB,EAAIc,EAAO,CACxG,CACJ,EACJ,CACJ,CAEC,GAAEM,MAAM"}

package/docs/events.md

@@ -73,19 +73,24 @@ The payload
 {
     kind: 'row',          // row | column | content | element
                           // tabs | accordion | popup | tab | accordion-item
+                          // section, with the sections plugin
     node: jQuery,         // the node added, deleted, moved or resized
     parent: jQuery,       // where it is going, or where it came from on a delete
     canvas: jQuery,
     breakpoint: 'lg',     // the view at the time: a breakpoint key, or 'all'
-    source: 'tool',       // tool | api | dragdrop | panel
+    source: 'tool',       // tool | api | dragdrop | panel (a width chosen in the panel)
 
     // move only
     from: { parent: jQuery, index: 2 },
     to:   { parent: jQuery, index: 0 },
 
-    // resize and indent only: units, not pixels
+    // resize and indent only: units, not pixels. A size can also be
+    // 'equal' or 'auto', and null when the width field chose "inherit"
     from: 6,
     to: 7,
+    cleared: [            // the all view only: the breakpoints' own sizes or
+        { breakpoint: 'md', value: 4 },     // offsets, which the write took off
+    ],
 
     // a pane inside a container
     container: jQuery,
@@ -104,6 +109,12 @@ The payload
 }
 ```
 
+A section's width change is announced as a utility change too, with
+`family: 'section'`, `breakpoint: 'all'` and the widths - `'fixed'`, `'fluid'`,
+`'md'` - as `from` and `to`: a section has one container class, whatever the
+breakpoint. Adding a section fires `before-add-section` and `after-add-section`,
+with the generic pair.
+
 `view-change` carries no node: its payload is `canvas`, `breakpoint` (the new
 view), `from` and `to`. A utility's `breakpoint` is the view it was written
 in, which `setUtility` can be asked to make a different one from the view on

package/docs/locale-keys.md

@@ -30,6 +30,8 @@ The tools in a drawer, and the buttons in the toolbar above the canvas.
 | `tool.add_row` | Add row | Column drawer, adds a nested row |
 | `tool.add_column` | Add column\n(hold to choose the width) | Row drawer. A click adds a column, holding the tool offers the widths. Two lines |
 | `tool.column_size` | {size} of 12 | Tooltip of a width in that picker |
+| `tool.column_equal` | Equal: shares what the row has left | The `equal` choice in that picker, which adds a `col` |
+| `tool.column_auto` | Auto: as wide as its content | The `auto` choice in that picker, which adds a `col-auto` |
 | `tool.delete_row` | Remove row | Row drawer |
 | `tool.delete_column` | Remove col | Column drawer |
 | `tool.delete_element` | Remove element | Element drawer |
@@ -57,6 +59,7 @@ row.*
 | Key | English | Where |
 | --- | --- | --- |
 | `row.add` | Add row {layout} | Tooltip of each toolbar add-row button. `{layout}` is the column layout, as in `6-6` |
+| `row.add_row_cols` | Add a row of {columns} columns, {counts} per row | Tooltip of a toolbar button for a `{ row_cols, columns }` layout. `{counts}` reads like `1, md: 3` |
 
 
 container.*
@@ -80,6 +83,23 @@ The containers: tabs, accordions and popups, and the panes inside them.
 | `container.card_footer` | Card footer | Text of a new card's footer, when it has one |
 
 
+section.*
+---------
+
+The sections plugin: Bootstrap's `.container` and its kin, on the canvas.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `section.add` | Section | Toolbar button that adds a section |
+| `section.width` | Width | Label of a section's width field, in its settings panel |
+| `section.fixed` | Fixed | Its choice for `container` |
+| `section.fluid` | Full width | Its choice for `container-fluid` |
+| `section.from` | Fixed from {breakpoint} | Its choice for `container-{bp}`. `{breakpoint}` is the key |
+| `tool.add_row_to_section` | Add row | Section drawer, adds a row to the section |
+| `tool.delete_section` | Remove section | Section drawer |
+| `confirm.delete_section` | Delete this section and everything in it? | Asked before a section is deleted |
+
+
 confirm.*
 ---------
 
@@ -113,7 +133,7 @@ key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
 
 | Key | English | Where |
 | --- | --- | --- |
-| `view.all` | All sizes | The default view, which writes every breakpoint at once |
+| `view.all` | All sizes | The default view, which writes one class for every breakpoint |
 | `view.xs` | Phone | Layout mode writing `col-*` and `offset-*` |
 | `view.sm` | Tablet | Layout mode writing `col-sm-*` and `offset-sm-*` |
 | `view.md` | Small desktop | Layout mode writing `col-md-*` and `offset-md-*` |
@@ -131,6 +151,11 @@ The labels of each utility and its values are the plugins' own keys.
 | Key | English | Where |
 | --- | --- | --- |
 | `utility.section` | Responsive: {view} | The section's fold toggle. `{view}` is the label of the view being edited |
+| `utility.col_width` | Width | The column width field, in a column's Responsive section |
+| `utility.col_equal` | Equal | Its choice for `col` / `col-{bp}` |
+| `utility.col_auto` | Auto | Its choice for `col-auto` / `col-{bp}-auto` |
+| `utility.col_from_row` | From the row: {count} | The width field's empty choice when the row's row-cols sizes the column. `{count}` is `badge.row_cols` |
+| `utility.row_cols` | Columns per row | The row-cols field, in a row's Responsive section |
 | `utility.default` | Default | The empty choice of a field when nothing below the view sets the utility, and always in the all view |
 | `utility.inherit` | Inherit: {value} (from {breakpoint}) | The empty choice in a breakpoint view when a smaller breakpoint sets the utility. `{breakpoint}` is its key, `sm` |
 | `utility.varies` | Changes at {breakpoints}; choosing here replaces that | Note under a field in the all view when breakpoints set their own value. `{breakpoints}` is a list of keys |
@@ -159,6 +184,14 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.side_b` | Bottom | The side of `pb-*` and `mb-*` |
 | `utility.side_s` | Start | The side of `ps-*` and `ms-*` |
 | `utility.side_e` | End | The side of `pe-*` and `me-*` |
+| `utility.text_align` | Text alignment | Label of the textalign plugin's field |
+| `utility.text_start` | Start | Its choice for `text-*-start` |
+| `utility.text_center` | Center | Its choice for `text-*-center` |
+| `utility.text_end` | End | Its choice for `text-*-end` |
+| `utility.float` | Float | Label of the float plugin's field, on an element |
+| `utility.float_start` | Start | Its choice for `float-*-start` |
+| `utility.float_end` | End | Its choice for `float-*-end` |
+| `utility.float_none` | None | Its choice for `float-*-none` |
 | `utility.spacing_gutter` | A column's side padding is its gutter: changing it changes the gutter | Note in a column's spacing group while it carries side padding |
 
 
@@ -171,6 +204,8 @@ markup `getHtml` returns.
 | Key | English | Where |
 | --- | --- | --- |
 | `badge.hidden_in` | Hidden at {breakpoints} | Corner of a node hidden at some breakpoints, in the all view. `{breakpoints}` is a list of keys |
+| `badge.row_cols` | {count} per row | Corner of a row whose row-cols sizes its columns in the view being edited |
+| `badge.row_cols_auto` | As wide as their content | The same, for `row-cols-auto` |
 | `badge.order` | Order: {value} | Corner of a column ordered by class in the view being edited |
 
 

package/docs/plugins.md

@@ -118,11 +118,13 @@ not change without a major version.
 | `ge.operate(body)` | Run `body` as one operation, so a handler calling back in is queued |
 | `ge.kindOf(node)` | What an event calls a node: `row`, `column`, `element`, a container's type… |
 | `ge.view()` | The view being edited: a breakpoint key, or `'all'` |
-| `ge.viewTiers()` | The breakpoint keys that view writes: one, or all six |
+| `ge.viewTiers()` | The breakpoint key that view writes: the one being edited, or `xs` - the class with no breakpoint - in the all view |
 | `ge.breakpoints` | Every breakpoint key, smallest first |
 | `ge.getUtility(node, family, view?)` | A utility's value, as in the public method |
 | `ge.setUtility(node, family, value, options?)` | Write one through the events. `options` is a view key or `{ view, source }` |
 | `ge.utilityField(node, family)` | A panel field for one family, for a plugin that builds its own panel |
+| `ge.rowFromLayout(layout)` | A detached row from a layout: `[8, 4]`, `['auto', 'equal']` or `{ row_cols, columns }` |
+| `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 |
 
 The add, delete and move events for a container and its panes are fired by the
 editor, not by the plugin: `createPaneControls` handles a pane's delete, and
@@ -143,10 +145,29 @@ $.fn.gridEditor.features.elements = function(ge) {
         onDeinit: function() { … },      // every deinit: take it out again
         onContentReady: function(area) { … },  // a rich text editor just took over
         onSortable: function(sortable) { … },  // declare your own sortable lists
+        blocks: '.ge-section',            // more blocks the canvas and the columns move
+        regions: '.ge-section',           // more lists those blocks move in
+        accepts: function(region, node) { … },  // false turns a block away from a region
+        toolbar: [{ labelKey: …, kind: …, create: function() { … } }],  // buttons beside the containers'
     };
 };
 ```
 
+The last four are what the sections plugin is made of, and what a plugin
+needs to put a new kind of block on the canvas:
+
+- **`blocks`** is a selector added to what the canvas and every column move -
+  rows, content areas and containers, the editor's own blocks.
+- **`regions`** is a selector for more lists those blocks move in, in the same
+  group, so a row dragged from the canvas can land in one.
+- **`accepts(region, node)`** can turn a block away from a list: `false` and the
+  drag will not drop it there, whoever's block and whoever's list. With none of
+  these hooks, every block goes everywhere, as before.
+- **`toolbar`** adds buttons beside the containers'. A click appends what
+  `create()` returns to the canvas, announced as `kind`; a drop puts it where it
+  was dropped, or, when that region will not have it, on the canvas just after
+  the block it was dropped in.
+
 - **`onSortable(sortable)`** is handed the function the editor makes all of its
   own lists with. A plugin describes a list; it never touches the drag toolkit
   itself, which is what keeps `drag_handle`, the cancel selector and the move
@@ -208,6 +229,8 @@ $.fn.gridEditor.utilities.order = function(ge) {
             label: function(value) { … },  // an option's text, optional: the value itself otherwise
             choices: function(node, kind) { … },   // what to offer this node, optional: every value otherwise
             panel: false,                          // optional: no field of its own, see "A panel of your own"
+            className: function(breakpoint, value) { … },   // optional, for classes not spelled {prefix}-{bp}-{value}
+            write: function(node, value, view, source) { … }, // optional, a write that is some other operation
             preview: function(value, node, kind) { // what the value looks like, see below
                 return { order: value === null ? 0 : value };
             },
@@ -239,7 +262,10 @@ What the editor does with a family:
   breakpoint view each node that carries a family's class gets
   `preview(value)` — the value that applies there, or `null` — as inline
   `!important` styles. Return what `null` looks like too: a wider breakpoint's
-  class is still live in a wide window and has to be overruled. The all view
+  class is still live in a wide window and has to be overruled. When what
+  `null` looks like depends on the page — `text-align` inherits, the host's
+  css may float an element — `ge.bareStyle(node, family, property)` asks the
+  browser. Parents are previewed before their children. The all view
   previews nothing, since every breakpoint there is live and what Bootstrap
   shows is the truth. The styles come off on `deinit`, leaving the host's own
   `style` as it was, so `getHtml` never sees them.
@@ -275,6 +301,13 @@ set the top padding. A plugin-level `preview(node, kind, breakpoint)` is called
 for every node in a breakpoint view, after the families' own, and returns the
 styles for the node or an empty object.
 
+Two escape hatches, which the column width uses: `className(breakpoint,
+value)` spells the classes of a family that does not follow the pattern
+(`col`, `col-md`, `col-md-auto`), and `write(node, value, view, source)` does a
+write some other way than a utility change - the width field's writes are
+resizes, through the resize events. The editor still checks the value and the
+node before it calls `write`.
+
 Two plugins cannot declare the same family name: the second one is ignored,
 with a warning.
 

package/example/autocols.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+
+    <!-- The editor, and the sections plugin: equal and auto sizes and
+         columns per row are the editor's own, sections are a plugin -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script src="../dist/plugins/grideditor.sections.min.js"></script>
+
+    <script>
+        $(function() {
+            $('#myGrid').gridEditor({
+                content_types: [],
+
+                // Sizes are numbers, 'equal' (col) or 'auto' (col-auto), and a
+                // layout can be a row with columns per row
+                new_row_layouts: [
+                    [12], [6, 6], ['auto', 'equal'], ['equal', 'equal', 'equal'],
+                    { row_cols: { xs: 1, sm: 2, lg: 4 }, columns: 4 },
+                ],
+
+                default_view: 'lg',
+            });
+
+            // A width chosen anywhere - tools, edge, panel - is a resize
+            $('#myGrid').on('grideditor:after-resize', function(e, payload) {
+                $('#last').text('width at ' + payload.breakpoint + ': ' +
+                    (payload.from === null ? 'from the row' : payload.from) + ' → ' +
+                    (payload.to === null ? 'inherit' : payload.to) +
+                    (payload.cleared && payload.cleared.length ? ' (took off ' + payload.cleared.map(function(entry) {
+                        return entry.breakpoint;
+                    }).join(', ') + ')' : ''));
+            });
+
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            });
+        });
+    </script>
+
+    <title>Grid Editor column sizes and sections example</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+
+    <div class="container-fluid px-4">
+
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Column sizes, columns per row, and sections</h1>
+                <p class="form-text">
+                    <strong>Equal and auto.</strong> A column is a number of
+                    twelfths, <em>equal</em> (<code>col</code>: an equal share
+                    of what the row has left) or <em>auto</em>
+                    (<code>col-auto</code>: as wide as its content), at each
+                    breakpoint. Every size is in the <em>Width</em> field of a
+                    column's settings, under Responsive; the width tools and
+                    dragging an edge turn an equal or auto column into a
+                    number, starting from the width it has.
+                </p>
+                <p class="form-text">
+                    <strong>Columns per row.</strong> A row's
+                    <em>Columns per row</em> field shares the line out among
+                    the columns that have no size of their own. The second
+                    section's cards are one per line on phones, two on
+                    tablets, four on desktops.
+                </p>
+                <p class="form-text">
+                    <strong>Sections.</strong> Bootstrap's containers, grouping
+                    rows. Drag rows in and out of them, choose their width in
+                    their settings, and switch views to see each one as wide
+                    as its container would be. <strong>All sizes</strong>
+                    writes one class for every size.
+                </p>
+                <p class="form-text">Last width change: <span id="last">none yet</span></p>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="container">
+                <div class="row">
+                    <div class="col-auto">
+                        <h2 class="h5">Auto</h2>
+                        <p>As wide as this.</p>
+                    </div>
+                    <div class="col">
+                        <h2 class="h5">Equal</h2>
+                        <p>Takes what the auto column leaves.</p>
+                    </div>
+                    <div class="col-3">
+                        <h2 class="h5">Three</h2>
+                        <p>A fixed quarter.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container-lg">
+                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4">
+                    <div class="col"><h2 class="h6">Card one</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card two</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card three</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card four</h2><p>Shared out by the row.</p></div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-12">
+                    <h2 class="h5">A row outside any section</h2>
+                    <p>Full width of the canvas. Drag it into one of the sections above.</p>
+                </div>
+            </div>
+
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container-fluid -->
+
+</body>
+</html>