@themarioga/grid-editor 3.2.1 → 4.1.0

package/src/js/jquery.grideditor.js

@@ -32,6 +32,8 @@ var METHODS = {
     addTab:           { value: true },
     addAccordionItem: { value: true },
     setLocale:        {},
+    getUtility:       { value: true },
+    setUtility:       { value: true },
 };
 
 /**
@@ -45,14 +47,17 @@ var PLACEMENTS = ['appendTo', 'prependTo', 'insertAfter', 'insertBefore'];
  * runs in: a size written for a tier applies to every wider tier that does not
  * override it. Every size and offset class grid-editor reads or writes comes
  * from this table, so adding a tier is a row here and nothing else.
+ *
+ * `infix` is what Bootstrap's utility classes put between the property and
+ * the value - `order-md-2`, `d-none` - and is empty for the smallest tier.
  */
 var BREAKPOINTS = [
-    { key: 'xs', colPrefix: 'col-', offsetPrefix: 'offset-', min: 0, preview: 400, labelKey: 'view.xs' },
-    { key: 'sm', colPrefix: 'col-sm-', offsetPrefix: 'offset-sm-', min: 576, preview: 576, labelKey: 'view.sm' },
-    { key: 'md', colPrefix: 'col-md-', offsetPrefix: 'offset-md-', min: 768, preview: 768, labelKey: 'view.md' },
-    { key: 'lg', colPrefix: 'col-lg-', offsetPrefix: 'offset-lg-', min: 992, preview: 992, labelKey: 'view.lg' },
-    { key: 'xl', colPrefix: 'col-xl-', offsetPrefix: 'offset-xl-', min: 1200, preview: 1200, labelKey: 'view.xl' },
-    { key: 'xxl', colPrefix: 'col-xxl-', offsetPrefix: 'offset-xxl-', min: 1400, preview: null, labelKey: 'view.xxl' },
+    { key: 'xs', infix: '', colPrefix: 'col-', offsetPrefix: 'offset-', min: 0, preview: 400, labelKey: 'view.xs' },
+    { key: 'sm', infix: 'sm', colPrefix: 'col-sm-', offsetPrefix: 'offset-sm-', min: 576, preview: 576, labelKey: 'view.sm' },
+    { key: 'md', infix: 'md', colPrefix: 'col-md-', offsetPrefix: 'offset-md-', min: 768, preview: 768, labelKey: 'view.md' },
+    { key: 'lg', infix: 'lg', colPrefix: 'col-lg-', offsetPrefix: 'offset-lg-', min: 992, preview: 992, labelKey: 'view.lg' },
+    { key: 'xl', infix: 'xl', colPrefix: 'col-xl-', offsetPrefix: 'offset-xl-', min: 1200, preview: 1200, labelKey: 'view.xl' },
+    { key: 'xxl', infix: 'xxl', colPrefix: 'col-xxl-', offsetPrefix: 'offset-xxl-', min: 1400, preview: null, labelKey: 'view.xxl' },
 ];
 
 /**
@@ -111,13 +116,29 @@ var NESTED_SETTINGS = {
     },
     resize: {
         enabled: true,
-        handles: 'e', // Which edges carry a handle, as jQuery UI names them
+        handles: 'e', // Which edges carry a handle: 'e', 'w', or 'e, w'
         balance: 'next', // 'next' takes the units out of the following column
     },
+    drag: {
+        delay: 0, // Milliseconds to hold before a drag starts
+        touch_delay: 100, // The same for touch, where 0 eats the page's scrolling
+        threshold: 3, // Pixels of movement before a gesture counts as a drag
+        animation: 150, // Milliseconds of reordering animation, 0 for none
+        scroll: true, // Scroll the page when a drag reaches its edge
+    },
+};
+
+/** Settings 4.0 took away, and what a host should reach for instead. */
+var REMOVED_SETTINGS = {
+    sortable_options: 'drag',
+    resizable_options: 'resize',
 };
 
 var warned = {};
 
+/** Editors on the page, counted so each one's sortable groups are its own. */
+var editorCounter = 0;
+
 /**
  * Translate one key.
  *
@@ -242,7 +263,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             'container_tools'   : [], // Host tools on container drawers
             'tab_tools'         : [], // Host tools on tab drawers
             'accordion_tools'   : [], // Host tools on accordion item drawers
-            'plugins'           : null, // Container plugins to use; null means every one loaded
+            'plugins'           : null, // Plugins to use, of any kind; null means every one loaded
+            'utilities'         : {}, // Options for the utility plugins, by plugin name
             'elements'          : NESTED_SETTINGS.elements, // Element level controls, below the column
             'custom_filter'     : '',
             'content_types'     : ['tinymce'],
@@ -252,13 +274,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             'layout_modes'      : VIEW_KEYS.slice(), // Which views the dropdown offers
             'default_view'      : ALL_VIEW,
             'resize'            : NESTED_SETTINGS.resize, // Resizing a column by dragging its edge
-            'resizable_options' : {}, // Merged into every jQuery UI resizable
             'source_textarea'   : '',
             'locale'            : 'en', // Code of a locale in $.fn.gridEditor.locales
             'locale_strings'    : {}, // Overrides for individual keys
             'callbacks'         : {}, // before_*/after_* functions, the events by another route
             'confirm_delete'    : true, // Ask before deleting a row or a column
-            'sortable_options'  : {} // Merged into every jQuery UI sortable
+            'drag'              : NESTED_SETTINGS.drag // How a drag behaves, whatever drives it
         }, optionsOrMethod);
 
         // Merged rather than replaced, so `elements: { auto: true }` keeps the
@@ -267,6 +288,18 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             settings[name] = $.extend({}, defaults, settings[name]);
         });
 
+        // Both handed out the drag toolkit's own options, which 4.0 stops
+        // promising: there is no widget underneath a host should be reaching
+        // for. What they were used for is a setting of the editor's now.
+        $.each(REMOVED_SETTINGS, function(name, replacement) {
+            if (optionsOrMethod && optionsOrMethod[name] !== undefined) {
+                warn($.fn.gridEditor.t(settings, 'warning.setting_removed', {
+                    setting: name,
+                    replacement: replacement,
+                }));
+            }
+        });
+
 
         // Elems
         var canvas,
@@ -282,6 +315,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         var sizePicker = null; // The open column size picker, if there is one
         var dropMarker = null; // The line showing where a dragged toolbar button would land
         var warnedHere = {}; // Deprecations are worth saying once per instance, not once per call
+        var sortables = []; // Every list made sortable, so deinit destroys exactly those
+        var instanceId = ++editorCounter; // Scopes the sortable groups to this editor
 
         // Before anything else, because the instance handle hands the canvas
         // to hosts and the rest of setup() runs at the end of this function
@@ -719,6 +754,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // when their editor is ready, and the drawers go back in.
             canvas.on('ge-rte-ready', '.ge-content', function() {
                 plugins('onContentReady', $(this));
+                refreshPreviews($(this));
             });
         }
 
@@ -874,26 +910,82 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         function makeToolbarDraggable() {
+            var buttons = mainControls.find('[data-ge-toolbar]')
+                .removeClass('ge-palette-button')
+                .off('pointerdown.ge-palette')
+            ;
+
             if (!toolbarDrags()) { return; }
 
-            mainControls.find('[data-ge-toolbar]').draggable({
-                helper: function() { return $(this).clone().addClass('ge-toolbar-helper'); },
-                appendTo: 'body',
-                zIndex: 1000,
-                cursorAt: { top: 14, left: 14 },
+            buttons.addClass('ge-palette-button').on('pointerdown.ge-palette', startToolbarDrag);
+        }
 
-                start: function() { canvas.addClass('ge-dropping'); },
-                drag: function(e) { showDropMarker(e.pageX, e.pageY); },
+        /**
+         * A toolbar button carried onto the canvas.
+         *
+         * Nothing happens until the pointer has moved far enough to mean it:
+         * below that the gesture is a click, and the button's own handler
+         * adds the block at the end of the canvas as it always has - which is
+         * also what keeps the add column tool's hold-to-pick working.
+         */
+        function startToolbarDrag(e) {
+            var button = $(e.currentTarget);
+            var startX = e.pageX;
+            var startY = e.pageY;
+            var helper = null;
 
-                stop: function(e) {
-                    var where = dropPlaceAt(e.pageX, e.pageY);
+            if (e.button) { return; }
 
-                    canvas.removeClass('ge-dropping');
-                    hideDropMarker();
+            function far(move) {
+                return Math.abs(move.pageX - startX) + Math.abs(move.pageY - startY) >
+                    settings.drag.threshold;
+            }
 
-                    if (where) { insertFromToolbar($(this), where); }
-                },
-            });
+            function onMove(move) {
+                if (!helper) {
+                    if (!far(move)) { return; }
+
+                    helper = button.clone()
+                        .addClass('ge-toolbar-helper')
+                        .appendTo('body')
+                    ;
+                    canvas.addClass('ge-dropping');
+                }
+
+                helper.css({ left: move.pageX - 14, top: move.pageY - 14 });
+                showDropMarker(move.pageX, move.pageY);
+            }
+
+            function onUp(up) {
+                $(document)
+                    .off('pointermove.ge-toolbar', onMove)
+                    .off('pointerup.ge-toolbar pointercancel.ge-toolbar', onUp)
+                ;
+
+                if (!helper) { return; }
+
+                helper.remove();
+                canvas.removeClass('ge-dropping');
+                hideDropMarker();
+
+                // The click that follows a drag would add the block a second
+                // time, at the end of the canvas
+                button.one('click', function(click) {
+                    click.preventDefault();
+                    click.stopImmediatePropagation();
+                });
+
+                var where = dropPlaceAt(up.pageX, up.pageY);
+                if (where) { insertFromToolbar(button, where); }
+            }
+
+            // On the document, not on the button: until the gesture is far
+            // enough along to be a drag there is nothing to capture the
+            // pointer with, and the pointer has left the button by then
+            $(document)
+                .on('pointermove.ge-toolbar', onMove)
+                .on('pointerup.ge-toolbar pointercancel.ge-toolbar', onUp)
+            ;
         }
 
         /**
@@ -1051,6 +1143,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             makeSortable();
             makeResizable();
             switchLayout(curView);
+            refreshPreviews(canvas);
         }
 
         function deinit() {
@@ -1071,6 +1164,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             hideDropMarker();
             canvas.find('.ge-tools-drawer').remove();
             plugins('onDeinit');
+            // After the rich text editors have let go of their content areas:
+            // one that rebuilt its area's DOM brought the preview styles back
+            // with it, and the attribute recording them came back too
+            clearPreviews(canvas);
             unmarkContainers();
             removeSortable();
             removeResizable();
@@ -1151,6 +1248,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 if (wanted(name)) { FEATURES[name] = factory(api); }
             });
 
+            $.each($.fn.gridEditor.utilities, function(name, factory) {
+                if (!wanted(name)) { return; }
+
+                UTILITIES[name] = factory(api);
+                (UTILITIES[name].families || []).forEach(function(family) {
+                    registerFamily(name, UTILITIES[name], family);
+                });
+            });
+
             $.each(FEATURES, function(name, feature) {
                 $.each(feature.methods || {}, function(method, implementation) {
                     featureMethods[method] = implementation;
@@ -1158,7 +1264,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
 
             (settings.plugins || []).forEach(function(name) {
-                if (CONTAINERS[name] || FEATURES[name]) { return; }
+                if (CONTAINERS[name] || FEATURES[name] || UTILITIES[name]) { return; }
 
                 warnOnceHere('plugin:' + name, 'the "' + name + '" plugin is not loaded: ' +
                     'include dist/plugins/grideditor.' + name + '.js after the editor');
@@ -1168,7 +1274,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         /**
          * A hook every loaded plugin may have. Containers first, since a
          * feature that looks at the canvas - elements, say - wants the
-         * containers already marked.
+         * containers already marked, and utilities last, since they decorate
+         * nodes the other two may have just made.
          */
         function plugins(hook, argument) {
             $.each(CONTAINERS, function(type, definition) {
@@ -1177,6 +1284,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             $.each(FEATURES, function(name, feature) {
                 if (feature[hook]) { feature[hook](argument); }
             });
+            $.each(UTILITIES, function(name, utility) {
+                if (utility[hook]) { utility[hook](argument); }
+            });
         }
 
         /** What a plugin is handed. See docs/plugins.md. */
@@ -1202,9 +1312,491 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 emit: emit,
                 payloadFor: payloadFor,
                 operate: operate,
+                kindOf: kindOf,
+                view: getView,
+                viewTiers: function() {
+                    return tiersFor(curView).map(function(tier) { return tier.key; });
+                },
+                breakpoints: BREAKPOINTS.map(function(tier) { return tier.key; }),
+                getUtility: getUtility,
+                setUtility: setUtility,
+                utilityField: utilityField,
             };
         }
 
+        /* --------------------------------------------------------------
+         * Utilities: Bootstrap's responsive utility classes.
+         *
+         * A utility plugin declares families - order, d, justify-content -
+         * and this is everything that reads or writes one. Every family is
+         * spelled the way Bootstrap spells them all, {prefix}-{infix}-{value}
+         * with no infix at the smallest tier, and cascades the way the size
+         * classes do: a tier that says nothing takes the nearest smaller one.
+         *
+         * The canvas cannot show a breakpoint's utilities by itself. A
+         * per-breakpoint view narrows the canvas, not the viewport, and
+         * Bootstrap's utilities answer to the viewport with !important. So
+         * each node gets what its classes mean at the view being edited,
+         * as inline !important styles, recorded in an attribute so they come
+         * off again - exactly those, leaving the host's own style alone.
+         * -------------------------------------------------------------- */
+
+        var FAMILIES = {}; // Every family the utility plugins declare, by name
+        var UTILITY_NODES = '.row, .column, .ge-element, [data-ge-container]';
+        var PREVIEW_ATTR = 'data-ge-preview';
+        var utilitiesOpen = false; // Whether the panels show their Responsive section unfolded
+
+        function registerFamily(pluginName, utility, family) {
+            var name = family.name || family.prefix;
+
+            if (FAMILIES[name]) {
+                warn('the "' + pluginName + '" plugin declares the utility "' + name +
+                    '", which the "' + FAMILIES[name].plugin + '" plugin already declared: ignored');
+                return;
+            }
+
+            FAMILIES[name] = {
+                plugin: pluginName,
+                family: $.extend({}, family, {
+                    name: name,
+                    values: family.values.map(String),
+                    appliesTo: family.appliesTo || utility.appliesTo || ['row', 'column'],
+                }),
+            };
+        }
+
+        /** The family a caller named, or null and a warning when no plugin declares it. */
+        function familyNamed(name, method) {
+            if (FAMILIES[name]) { return FAMILIES[name].family; }
+
+            warnOnceHere('utility:' + name, method + '(' + JSON.stringify(name) + '): no loaded ' +
+                'plugin declares that utility');
+            return null;
+        }
+
+        /**
+         * Whether a family applies to a kind of node. A container answers to
+         * `container` and to its own type, so a plugin can take them all or
+         * name the ones it means.
+         */
+        function appliesTo(family, kind) {
+            if (family.appliesTo.indexOf(kind) !== -1) { return true; }
+
+            return !!CONTAINERS[kind] && family.appliesTo.indexOf('container') !== -1;
+        }
+
+        function familiesFor(kind) {
+            return $.map(FAMILIES, function(entry) {
+                return appliesTo(entry.family, kind) ? entry.family : null;
+            });
+        }
+
+        function utilityClass(family, tier, value) {
+            return family.prefix + (tier.infix ? '-' + tier.infix : '') + '-' + value;
+        }
+
+        /** The value a node carries a class for at exactly this tier, or null. */
+        function ownUtility(node, family, tier) {
+            var classes = (node.attr('class') || '').split(/\s+/);
+
+            for (var i = 0; i < family.values.length; i++) {
+                if (classes.indexOf(utilityClass(family, tier, family.values[i])) !== -1) {
+                    return family.values[i];
+                }
+            }
+
+            return null;
+        }
+
+        /**
+         * The tier below this one that decides the value here, and what it
+         * says, when this tier says nothing itself. Null when nothing below
+         * says anything either.
+         */
+        function inheritedUtility(node, family, tier) {
+            for (var i = BREAKPOINTS.indexOf(tier) - 1; i >= 0; i--) {
+                var value = ownUtility(node, family, BREAKPOINTS[i]);
+                if (value !== null) { return { tier: BREAKPOINTS[i], value: value }; }
+            }
+
+            return null;
+        }
+
+        /** What applies at a tier: its own class, or what it inherits. */
+        function effectiveUtility(node, family, tier) {
+            var own = ownUtility(node, family, tier);
+            if (own !== null) { return own; }
+
+            var inherited = inheritedUtility(node, family, tier);
+            return inherited ? inherited.value : null;
+        }
+
+        /** Every tier the node carries a class of this family for. */
+        function utilityTiers(node, family) {
+            return BREAKPOINTS.map(function(tier) {
+                return { tier: tier, value: ownUtility(node, family, tier) };
+            }).filter(function(entry) { return entry.value !== null; });
+        }
+
+        function writeUtility(node, family, tier, value) {
+            family.values.forEach(function(candidate) {
+                node.removeClass(utilityClass(family, tier, candidate));
+            });
+
+            if (value !== null) { node.addClass(utilityClass(family, tier, value)); }
+            if (!node.attr('class')) { node.removeAttr('class'); }
+        }
+
+        /**
+         * What a view reads. A breakpoint reads what applies there. The all
+         * view reads the class with no infix, since that is what it writes:
+         * the one class that means "the same at every size".
+         */
+        function readUtility(node, family, view) {
+            return view === ALL_VIEW
+                ? ownUtility(node, family, BREAKPOINTS[0])
+                : effectiveUtility(node, family, breakpoint(view));
+        }
+
+        /**
+         * What writing `value` in a view comes to, or null when it changes
+         * nothing. A breakpoint writes its own tier and nothing else. The all
+         * view writes the class with no infix and clears the family from
+         * every other tier, and says what it cleared: choosing one value for
+         * every size is choosing it over what the sizes said.
+         */
+        function planUtility(node, family, view, value) {
+            if (view !== ALL_VIEW) {
+                var tier = breakpoint(view);
+                if (ownUtility(node, family, tier) === value) { return null; }
+
+                return { writes: [{ tier: tier, value: value }], cleared: [] };
+            }
+
+            var writes = [];
+            var cleared = [];
+
+            utilityTiers(node, family).forEach(function(entry) {
+                if (entry.tier === BREAKPOINTS[0]) { return; }
+
+                writes.push({ tier: entry.tier, value: null });
+                cleared.push({ breakpoint: entry.tier.key, value: entry.value });
+            });
+
+            if (ownUtility(node, family, BREAKPOINTS[0]) !== value) {
+                writes.unshift({ tier: BREAKPOINTS[0], value: value });
+            }
+
+            return writes.length ? { writes: writes, cleared: cleared } : null;
+        }
+
+        /** getUtility(node, family, view?): the value that applies, or null. */
+        function getUtility(node, name, view) {
+            node = $(node).first();
+
+            var family = familyNamed(name, 'getUtility');
+            if (!family || !node.length) { return null; }
+
+            var key = view === undefined ? curView : viewKey(view);
+            if (key === null) {
+                warn('getUtility(' + JSON.stringify(view) + '): no such layout mode');
+                return null;
+            }
+
+            return readUtility(node, family, key);
+        }
+
+        /**
+         * setUtility(node, family, value, view?): write a value through the
+         * events. Null is "inherit". The last argument is a view key, or
+         * { view, source } from a plugin that wants its tool named in the
+         * payload. False when a handler canceled or nothing changed.
+         */
+        function setUtility(node, name, value, options) {
+            options = typeof options == 'string' ? { view: options } : (options || {});
+            node = $(node).first();
+
+            var family = familyNamed(name, 'setUtility');
+            if (!family || !node.length) { return false; }
+
+            var view = options.view === undefined ? curView : viewKey(options.view);
+            if (view === null) {
+                warn('setUtility(' + JSON.stringify(options.view) + '): no such layout mode');
+                return false;
+            }
+
+            value = value === null || value === undefined || value === '' ? null : String(value);
+            if (value !== null && family.values.indexOf(value) === -1) {
+                warn('setUtility: ' + JSON.stringify(value) + ' is not a value of "' + name +
+                    '", which takes ' + JSON.stringify(family.values));
+                return false;
+            }
+
+            var kind = kindOf(node);
+            if (!appliesTo(family, kind)) {
+                warn('setUtility: "' + name + '" does not apply to a ' + kind);
+                return false;
+            }
+
+            var plan = planUtility(node, family, view, value);
+            if (!plan) { return false; }
+
+            return operate(function() {
+                var payload = payloadFor(kind, node, {
+                    family: name,
+                    breakpoint: view,
+                    tiers: plan.writes.map(function(write) { return write.tier.key; }),
+                    from: readUtility(node, family, view),
+                    to: value,
+                    cleared: plan.cleared,
+                    source: options.source || 'api',
+                });
+
+                if (!emit('before-utility', payload)) {
+                    // The panel already shows the value that was refused
+                    refreshUtilities(node);
+                    return false;
+                }
+
+                plan.writes.forEach(function(write) {
+                    writeUtility(node, family, write.tier, write.value);
+                });
+                refreshUtilities(node);
+                emit('after-utility', payload);
+
+                return true;
+            });
+        }
+
+        /** Bring a node's panel and preview up to date with its classes. */
+        function refreshUtilities(node) {
+            var details = node.children('.ge-tools-drawer').children('.ge-details');
+
+            details.children('.ge-classes').val(hostClasses(node).join(' '));
+            details.children('.ge-utilities').each(function() { renderUtilities($(this)); });
+            refreshPreviews(node);
+        }
+
+        /* Preview */
+
+        function utilityNodes(scope) {
+            return scope.find(UTILITY_NODES).addBack(UTILITY_NODES);
+        }
+
+        /**
+         * Put what each node's utilities mean at the view being edited on the
+         * node itself. Only nodes that carry a class of a family get anything,
+         * and they get the family's answer for the view even when that is
+         * "nothing": a wider tier's class is still live in a wide window, and
+         * has to be overruled.
+         *
+         * The all view gets nothing. Its canvas is not narrowed, every tier is
+         * live, and what Bootstrap shows is the truth.
+         */
+        function refreshPreviews(scope) {
+            clearPreviews(scope);
+
+            if (curView !== ALL_VIEW) { previewTier(scope, breakpoint(curView)); }
+
+            // Whatever a plugin marks the canvas with to show its utilities
+            // goes stale at the same moments the preview does
+            plugins('onRefresh', scope);
+        }
+
+        function previewTier(scope, tier) {
+            utilityNodes(scope).each(function() {
+                var node = $(this);
+                var kind = kindOf(node);
+                var styles = {};
+
+                familiesFor(kind).forEach(function(family) {
+                    if (!family.preview || !utilityTiers(node, family).length) { return; }
+
+                    $.extend(styles, family.preview(effectiveUtility(node, family, tier), node, kind));
+                });
+
+                // A plugin whose families settle one property between them
+                // previews the node as a whole
+                $.each(UTILITIES, function(name, utility) {
+                    if (utility.preview) { $.extend(styles, utility.preview(node, kind, tier.key)); }
+                });
+
+                if (!$.isEmptyObject(styles)) { applyPreview(node, styles); }
+            });
+        }
+
+        /**
+         * Set inline !important styles, which is the one thing that beats
+         * Bootstrap's own !important, and remember what each property was so
+         * it can be put back. The record is an attribute rather than jQuery
+         * data because a rich text editor rebuilds the DOM of the area it
+         * edits, and the record has to come back with the node.
+         */
+        function applyPreview(node, styles) {
+            var style = node[0].style;
+            var was = {};
+
+            $.each(styles, function(property, value) {
+                was[property] = [style.getPropertyValue(property), style.getPropertyPriority(property)];
+                style.setProperty(property, String(value), 'important');
+            });
+
+            node.attr(PREVIEW_ATTR, JSON.stringify(was));
+        }
+
+        function clearPreviews(scope) {
+            scope.find('[' + PREVIEW_ATTR + ']').addBack('[' + PREVIEW_ATTR + ']').each(function() {
+                var node = $(this);
+                var style = this.style;
+                var was = {};
+
+                try { was = JSON.parse(node.attr(PREVIEW_ATTR)) || {}; } catch (error) { /* a mangled record: drop it */ }
+
+                $.each(was, function(property, before) {
+                    if (before && before[0]) {
+                        style.setProperty(property, before[0], before[1]);
+                    } else {
+                        style.removeProperty(property);
+                    }
+                });
+
+                node.removeAttr(PREVIEW_ATTR);
+                if (!node.attr('style')) { node.removeAttr('style'); }
+            });
+        }
+
+        /* The panel */
+
+        /**
+         * The Responsive section of a node's settings panel: one field per
+         * family that applies to the node, reading and writing the view being
+         * edited, and whatever fields a plugin builds itself. Folded until the
+         * user unfolds one, and then unfolded on every node, since whoever
+         * wanted it on one wants it on the next.
+         */
+        function createUtilitiesSection(node) {
+            var kind = kindOf(node);
+            var fields = familiesFor(kind)
+                .filter(function(family) { return family.panel !== false; })
+                .map(function(family) { return createField(node, family); });
+
+            $.each(UTILITIES, function(name, utility) {
+                var own = utility.panel ? utility.panel(node, kind) : null;
+                if (own && own.length) { fields.push(own); }
+            });
+
+            if (!fields.length) { return null; }
+
+            var section = $('<div class="ge-utilities" />')
+                .toggleClass('ge-open', utilitiesOpen)
+                .data('ge-node', node)
+            ;
+
+            $('<a class="ge-utilities-toggle" />')
+                .appendTo(section)
+                .on('click', function() {
+                    utilitiesOpen = !section.hasClass('ge-open');
+                    canvas.find('.ge-utilities').toggleClass('ge-open', utilitiesOpen);
+                })
+            ;
+
+            var body = $('<div class="ge-utilities-body" />').appendTo(section);
+            fields.forEach(function(field) { field.appendTo(body); });
+
+            renderUtilities(section);
+
+            return section;
+        }
+
+        /**
+         * One family's field: its label, a select that writes through
+         * setUtility, and a note. Filled by renderField, again whenever the
+         * view or the node's classes change.
+         */
+        function createField(node, family) {
+            var field = $('<label class="ge-utility" />').attr('data-ge-family', family.name);
+
+            $('<span class="ge-utility-label" />')
+                .text(family.labelKey ? t(family.labelKey) : family.name)
+                .appendTo(field)
+            ;
+            $('<select />')
+                .appendTo(field)
+                .on('change', function() {
+                    setUtility(node, family.name, this.value, { source: 'panel' });
+                })
+            ;
+            $('<small class="ge-utility-note" />').appendTo(field);
+
+            return field;
+        }
+
+        /** ge.utilityField(node, family): a field a plugin places in a panel of its own. */
+        function utilityField(node, name) {
+            var family = familyNamed(name, 'utilityField');
+            if (!family) { return $(); }
+
+            var field = createField(node, family);
+            renderField(field, node);
+
+            return field;
+        }
+
+        /** Fill a section's fields, the families' and the plugins' own, for the view being edited. */
+        function renderUtilities(section) {
+            var node = section.data('ge-node');
+
+            section.children('.ge-utilities-toggle')
+                .text(t('utility.section', { view: t(labelKeyFor(curView)) }));
+
+            section.find('.ge-utility').each(function() { renderField($(this), node); });
+        }
+
+        function renderField(field, node) {
+            var family = FAMILIES[field.attr('data-ge-family')].family;
+            var select = field.children('select').empty();
+            var choices = family.choices ? family.choices(node, kindOf(node)) : family.values;
+            var own, blank, note = '';
+
+            if (curView === ALL_VIEW) {
+                own = ownUtility(node, family, BREAKPOINTS[0]);
+                blank = t('utility.default');
+
+                var varies = utilityTiers(node, family).filter(function(entry) {
+                    return entry.tier !== BREAKPOINTS[0];
+                });
+                if (varies.length) {
+                    note = t('utility.varies', {
+                        breakpoints: varies.map(function(entry) { return entry.tier.key; }).join(', '),
+                    });
+                }
+            } else {
+                var tier = breakpoint(curView);
+                var inherited = inheritedUtility(node, family, tier);
+
+                own = ownUtility(node, family, tier);
+                blank = inherited
+                    ? t('utility.inherit', { value: labelOf(family, inherited.value), breakpoint: inherited.tier.key })
+                    : t('utility.default');
+            }
+
+            // A value the markup carries is shown even when the family
+            // would not offer it here, rather than shown as something else
+            if (own !== null && choices.indexOf(own) === -1) { choices = choices.concat([own]); }
+
+            $('<option value="" />').text(blank).appendTo(select);
+            choices.forEach(function(value) {
+                $('<option />').attr('value', value).text(labelOf(family, value)).appendTo(select);
+            });
+
+            select.val(own === null ? '' : own);
+            field.children('.ge-utility-note').text(note).toggle(note !== '');
+        }
+
+        function labelOf(family, value) {
+            return family.label ? family.label(value) : value;
+        }
+
         /* --------------------------------------------------------------
          * Containers: tabs, accordions and popups.
          *
@@ -1220,6 +1812,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
         var CONTAINERS = {}; // The container plugins in use, by the type each builds
         var FEATURES = {}; // The feature plugins in use, by name
+        var UTILITIES = {}; // The utility plugins in use, by name
         var featureMethods = {}; // The methods those features contribute
         var containerCounter = 0;
 
@@ -1526,9 +2119,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             var room = spare(row, leadingTier());
 
-            // The drawer it hangs off is raised while it is open: every
-            // drawer sits above jQuery UI's handles, so without this the
-            // drawer of the column below takes the clicks meant for the picker
+            // The drawer it hangs off is raised while it is open: drawers sit
+            // below the resize handles, so without this the drawer of the
+            // column below takes the clicks meant for the picker
             tool.closest('.ge-tools-drawer').addClass('ge-picker-open');
 
             sizePicker = $('<div class="ge-size-picker" />').appendTo(tool);
@@ -1788,6 +2381,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 details.toggle();
             });
 
+            // Beside the gear, because every node that has one is a node a
+            // utility may apply to, whichever plugin built its drawer
+            var kind = kindOf(node);
+            $.each(UTILITIES, function(name, utility) {
+                if (utility.drawerTools) { utility.drawerTools(drawer, node, kind); }
+            });
+
             return details.appendTo(drawer);
         }
 
@@ -1816,6 +2416,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 .appendTo(detailsDiv)
                 .on('change', function() {
                     setHostClasses(container, this.value);
+                    refreshUtilities(container);
                 })
             ;
 
@@ -1828,11 +2429,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     .on('click', function() {
                         btn.toggleClass('active btn-primary');
                         container.toggleClass(rowClass.cssClass, btn.hasClass('active'));
+                        refreshUtilities(container);
                     })
                     .appendTo(classGroup)
                 ;
             });
 
+            var utilities = createUtilitiesSection(container);
+            if (utilities) { utilities.appendTo(detailsDiv); }
+
             return detailsDiv;
         }
 
@@ -1981,9 +2586,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * Drag resize leaves an inline pixel width behind, and jQuery UI adds
-         * its own. Neither belongs in the markup a host saves, or in the
-         * canvas once the size class has been written.
+         * Drag resize leaves an inline pixel width behind: the column follows
+         * the pointer in pixels while the gesture lasts. It does not belong in
+         * the markup a host saves, or in the canvas once the size class has
+         * been written.
          */
         function stripPixelWidths(scope) {
             scope.find('.column').addBack('.column').each(function() {
@@ -1997,112 +2603,196 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
         }
 
-        function makeSortable() {
-            var wholeDrawer = settings.drag_handle === 'drawer';
-
-            var shared = {
-                handle: wholeDrawer ? '> .ge-tools-drawer' : '> .ge-tools-drawer .ge-move',
+        /**
+         * A group name, scoped to this editor.
+         *
+         * Two editors on one page must not drag into each other, since a node
+         * carries its drawer - and the events that go with it - from the
+         * editor that made it.
+         */
+        function groupName(name) {
+            return 'ge-' + name + '-' + instanceId;
+        }
 
+        /** What must never start a drag, whatever the handle is. */
+        function dragCancelSelector() {
+            return settings.drag_handle === 'drawer'
                 // With the whole drawer as the handle, the tools inside it are
                 // still tools: a drag starting on one would swallow its click,
                 // and the settings panel has fields to type in
-                cancel: wholeDrawer
-                    ? '.ge-tools-drawer > a, .ge-details, input, textarea, button, select, option'
-                    : 'input, textarea, button, select, option',
+                ? '.ge-tools-drawer > a, .ge-details, input, textarea, button, select, option'
+                : 'input, textarea, button, select, option';
+        }
 
-                start: sortStart,
-                stop: sortStop,
-                helper: 'clone',
-            };
+        /**
+         * Every sortable list the editor makes, core's and a plugin's alike,
+         * is made here.
+         *
+         * A caller says what moves (`draggable`) and what the list connects to
+         * (`group`, or none for a list that sorts only within itself); the
+         * handle, the filter, the callbacks and the drag settings are this
+         * function's business. That is the whole point of it: the toolkit
+         * underneath is named in one place, so replacing it is one function
+         * and not thirty call sites.
+         */
+        function sortable(lists, options) {
+            if (!lists.length || !window.Sortable) { return; }
 
-            canvas.find('.row').sortable($.extend({
-                items: '> .column',
-                connectWith: '.ge-canvas .row',
-                tolerance: 'pointer',
-            }, shared, settings.sortable_options));
+            var wholeDrawer = settings.drag_handle === 'drawer';
+            var cancel = dragCancelSelector();
+            var soloGroup = 0;
+
+            lists.each(function() {
+                var list = this;
+
+                // A list with no group sorts only within itself, which is what
+                // a tab strip wants: a name of its own, closed both ways
+                var group = options.group
+                    ? { name: groupName(options.group) }
+                    : { name: groupName(options.draggable + '-' + (++soloGroup)), pull: false, put: false };
+
+                sortables.push(window.Sortable.create(list, $.extend({
+                    group: group,
+                    draggable: options.draggable,
+                    handle: wholeDrawer ? '.ge-tools-drawer' : '.ge-tools-drawer .ge-move',
+
+                    /**
+                     * Two refusals in one, because SortableJS asks once.
+                     *
+                     * A tool or a form field never starts a drag, as the
+                     * cancel list said before. And only a direct child of
+                     * this list moves: the selector is matched against every
+                     * descendant, so without this the canvas would pick up a
+                     * row nested three columns down and drag that.
+                     */
+                    filter: function(e, item) {
+                        if ($(e.target).closest(cancel, list).length) { return true; }
+
+                        return !item || item.parentNode !== list;
+                    },
+
+                    // A filtered pointerdown is still a click on a tool
+                    preventOnFilter: false,
+
+                    // The HTML5 drag and drop API cannot be driven by
+                    // synthetic events, so the tests could not exist without
+                    // this; it also gives one helper across browsers
+                    forceFallback: true,
+                    fallbackOnBody: true,
+
+                    ghostClass: 'ge-drag-placeholder',
+                    chosenClass: 'ge-drag-chosen',
+                    dragClass: 'ge-drag-helper',
+                    fallbackClass: 'ge-drag-helper',
+
+                    animation: settings.drag.animation,
+
+                    // One delay, which applies to both gestures or to touch
+                    // alone: a touch drag that starts instantly takes the
+                    // page's scrolling with it, a mouse drag has no such
+                    // problem, and asking for `delay` means asking for both
+                    delay: settings.drag.delay || settings.drag.touch_delay,
+                    delayOnTouchOnly: !settings.drag.delay,
+
+                    touchStartThreshold: settings.drag.threshold,
+                    scroll: settings.drag.scroll,
+
+                    onStart: sortStart,
+                    onEnd: sortEnd,
+                }, options.options || {})));
+            });
+        }
 
-            canvas.add(canvas.find('.column')).sortable($.extend({
-                items: '> .row, > .ge-content',
-                connectWith: '.ge-canvas, .ge-canvas .column',
-            }, shared, settings.sortable_options));
+        function makeSortable() {
+            if (!window.Sortable) {
+                warnOnceHere('sortable_missing', t('error.sortable_missing'));
+                return;
+            }
 
-            // A tab strip sorts its own tabs, and the panes follow them
-            canvas.find('.ge-container-tabs > .nav-tabs').sortable($.extend({
-                items: '> .ge-tab',
-            }, shared, settings.sortable_options));
+            sortable(canvas.find('.row'), {
+                draggable: '.column',
+                group: 'column',
+            });
 
-            // Accordion items sort within their accordion and into any other
-            canvas.find('.ge-container-accordion > .accordion').sortable($.extend({
-                items: '> .ge-accordion-item',
-                connectWith: '.ge-canvas .ge-container-accordion > .accordion',
-            }, shared, settings.sortable_options));
+            sortable(canvas.add(canvas.find('.column')), {
+                draggable: '.row, .ge-content, [data-ge-container]',
+                group: 'block',
+            });
 
             // A plugin makes its own: only it knows which of its parts move
-            plugins('onSortable', shared);
-
-            /**
-             * jQuery UI cannot refuse a drag once it has started, so a
-             * canceled before-move is remembered here and undone on drop
-             * (spec 2.4). The node carries the mark, because with connected
-             * lists the drop is not always reported by the list that started
-             * the drag.
-             */
-            function sortStart(e, ui) {
-                ui.placeholder.css({ height: ui.item.outerHeight()});
-
-                var node = ui.item;
-                var from = positionOf(node);
-
-                node.data('ge-move-from', from);
-                node.removeData('ge-move-canceled');
+            plugins('onSortable', sortable);
+        }
 
-                operate(function() {
-                    var moving = emit('before-move', payloadFor(kindOf(node), node, {
-                        parent: from.parent,
-                        source: 'dragdrop',
-                        from: from,
-                    }));
+        /**
+         * A drag cannot be refused once it has started, so a canceled
+         * before-move is remembered here and undone on drop (spec 2.4). The
+         * node carries the mark, because with connected lists the drop is not
+         * always reported by the list that started the drag.
+         */
+        function sortStart(e) {
+            var node = $(e.item);
+            var from = positionOf(node);
 
-                    if (!moving) { node.data('ge-move-canceled', true); }
-                });
-            }
+            node.data('ge-move-from', from);
+            node.removeData('ge-move-canceled');
 
-            function sortStop(e, ui) {
-                var node = ui.item;
-                var from = node.data('ge-move-from') || positionOf(node);
+            operate(function() {
+                var moving = emit('before-move', payloadFor(kindOf(node), node, {
+                    parent: from.parent,
+                    source: 'dragdrop',
+                    from: from,
+                }));
 
-                node.removeData('ge-move-from');
+                if (!moving) { node.data('ge-move-canceled', true); }
+            });
+        }
 
-                if (node.data('ge-move-canceled')) {
-                    node.removeData('ge-move-canceled');
-                    $(this).sortable('cancel');
-                    return;
-                }
+        /** Put a node back where a refused drag found it. */
+        function putBack(node, from) {
+            var siblings = from.parent.children().not('.ge-tools-drawer').not(node);
 
-                var to = positionOf(node);
-                if (to.parent[0] === from.parent[0] && to.index === from.index) {
-                    return; // A drag that went nowhere is not a move
-                }
+            if (!siblings.length || from.index >= siblings.length) {
+                node.appendTo(from.parent);
+            } else {
+                node.insertBefore(siblings.eq(from.index));
+            }
+        }
 
-                var container = node.closest('[data-ge-container]');
-                var definition = CONTAINERS[containerTypeOf(container)];
-                if (definition && definition.afterPaneMove) {
-                    definition.afterPaneMove(container, node, from);
-                }
+        function sortEnd(e) {
+            var node = $(e.item);
+            var from = node.data('ge-move-from') || positionOf(node);
 
-                // No init() here, unlike an add: the node brought its drawer
-                // with it, and jQuery UI is still finishing the drag, so this
-                // is the wrong moment to rebuild the widgets it is using.
-                operate(function() {
-                    emit('after-move', payloadFor(kindOf(node), node, {
-                        parent: to.parent,
-                        source: 'dragdrop',
-                        from: from,
-                        to: to,
-                        container: container.length ? container : undefined,
-                    }));
-                });
+            node.removeData('ge-move-from');
+
+            if (node.data('ge-move-canceled')) {
+                node.removeData('ge-move-canceled');
+                putBack(node, from);
+                return;
+            }
+
+            var to = positionOf(node);
+            if (to.parent[0] === from.parent[0] && to.index === from.index) {
+                return; // A drag that went nowhere is not a move
             }
+
+            var container = node.closest('[data-ge-container]');
+            var definition = CONTAINERS[containerTypeOf(container)];
+            if (definition && definition.afterPaneMove) {
+                definition.afterPaneMove(container, node, from);
+            }
+
+            // No init() here, unlike an add: the node brought its drawer
+            // with it, and the drag is still being finished, so this is the
+            // wrong moment to rebuild the lists it is using.
+            operate(function() {
+                emit('after-move', payloadFor(kindOf(node), node, {
+                    parent: to.parent,
+                    source: 'dragdrop',
+                    from: from,
+                    to: to,
+                    container: container.length ? container : undefined,
+                }));
+            });
         }
 
         /**
@@ -2119,24 +2809,74 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             canvas.find('.column').each(function() {
                 var col = $(this);
-                if (col.data('ui-resizable')) { return; }
+                if (col.find('> .ge-resize-handle').length) { return; }
 
                 $('<span class="ge-resize-size" />').appendTo(col.find('> .ge-tools-drawer'));
 
-                col.resizable($.extend({
-                    handles: settings.resize.handles,
-                    start: resizeStart,
-                    resize: resizeMove,
-                    stop: resizeStop,
-                }, settings.resizable_options));
+                $.each(resizeEdges(), function(_, edge) {
+                    $('<span class="ge-resize-handle" />')
+                        .addClass('ge-resize-' + edge)
+                        .attr('data-ge-edge', edge)
+                        .on('pointerdown', startResizeDrag)
+                        .appendTo(col)
+                    ;
+                });
             });
         }
 
+        /** Which edges carry a handle: 'e', 'w', or both. */
+        function resizeEdges() {
+            return String(settings.resize.handles).split(',')
+                .map(function(edge) { return edge.trim(); })
+                .filter(function(edge) { return edge === 'e' || edge === 'w'; });
+        }
+
+        /**
+         * One resize gesture, from the pointer going down on a handle to it
+         * coming up again.
+         *
+         * The pointer is captured, so a fast drag that leaves the column
+         * behind keeps resizing it, and a refused before-resize simply never
+         * starts: nothing is written and the column does not move.
+         */
+        function startResizeDrag(e) {
+            var handle = $(e.currentTarget);
+            var col = handle.parent();
+            var west = handle.attr('data-ge-edge') === 'w';
+            var startX = e.pageX;
+            var startWidth = col.outerWidth();
+
+            e.preventDefault();
+
+            if (!resizeStart(col)) { return; }
+
+            col.addClass('ge-resizing');
+            if (e.pointerId !== undefined && handle[0].setPointerCapture) {
+                handle[0].setPointerCapture(e.pointerId);
+            }
+
+            function widthAt(move) {
+                var delta = move.pageX - startX;
+
+                return Math.max(1, startWidth + (west ? -delta : delta));
+            }
+
+            function onMove(move) {
+                col.css('width', widthAt(move) + 'px');
+                resizeMove(col, widthAt(move));
+            }
+
+            function onUp(up) {
+                handle.off('pointermove', onMove).off('pointerup pointercancel', onUp);
+                col.removeClass('ge-resizing');
+                resizeStop(col, widthAt(up));
+            }
+
+            handle.on('pointermove', onMove).on('pointerup pointercancel', onUp);
+        }
+
         function removeResizable() {
-            canvas.find('.column').each(function() {
-                var col = $(this);
-                if (col.data('ui-resizable')) { col.resizable('destroy'); }
-            });
+            canvas.find('.ge-resize-handle').remove();
 
             canvas.find('.ge-resize-size').remove();
             stripPixelWidths(canvas);
@@ -2189,16 +2929,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * A canceled before-resize refuses the drag.
-         *
-         * jQuery UI's resizable ignores false from its start handler - unlike
-         * draggable, and unlike what the spec assumed - so the refusal is
-         * carried on the column and every step of the drag returns false,
-         * which the widget does honour. Nothing is written and the column ends
-         * where it began.
-         */
-        function resizeStart(e, ui) {
-            var col = $(this);
+         * A canceled before-resize refuses the gesture before it begins, so
+         * nothing is written and the column does not move. Under jQuery UI
+         * this took a flag on the column and a refusal from every step of the
+         * drag, because resizable ignores false from its start handler.
+         */
+        function resizeStart(col) {
             var from = currentSize(col);
 
             var allowed = operate(function() {
@@ -2209,40 +2945,27 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 }));
             });
 
-            if (!allowed) {
-                col.data('ge-resize-refused', true);
-                return false;
-            }
+            if (!allowed) { return false; }
 
             col.data('ge-resize-from', from);
             resizeReadout(col, sizeLabel(from));
 
-            return undefined;
+            return true;
         }
 
-        function resizeMove(e, ui) {
-            var col = $(this);
-
-            if (col.data('ge-resize-refused')) { return false; }
-
-            resizeReadout(col, sizeLabel(snapUnits(col, ui.size.width)));
-
-            return undefined;
+        function resizeMove(col, width) {
+            resizeReadout(col, sizeLabel(snapUnits(col, width)));
         }
 
-        function resizeStop(e, ui) {
-            var col = $(this);
+        function resizeStop(col, width) {
             var from = col.data('ge-resize-from');
-            var units = snapUnits(col, ui.size.width);
+            var units = snapUnits(col, width);
 
             col.removeData('ge-resize-from');
             resizeReadout(col, '');
             stripPixelWidths(col);
 
-            if (col.data('ge-resize-refused') || from === undefined) {
-                col.removeData('ge-resize-refused');
-                return;
-            }
+            if (from === undefined) { return; }
 
             // A drag of a couple of pixels lands on the size it started from,
             // and is not a resize
@@ -2275,18 +2998,17 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             if (plan) { writeSize(next, plan); }
         }
 
+        /**
+         * Undo every list `sortable()` made, and only those.
+         *
+         * The registry is what makes that exact: deinit() is a public method,
+         * so it can be called twice, and a list the host made sortable itself
+         * is none of the editor's business.
+         */
         function removeSortable() {
-            // Only where a sortable was actually made: deinit() is a public
-            // method now, and jQuery UI throws when asked to destroy a widget
-            // that is not there, so calling deinit() twice would fail.
-            // jQuery UI marks what it made, so a plugin's sortables come
-            // away with the editor's without the core knowing about them
-            canvas.find('.ui-sortable').addBack('.ui-sortable').each(function() {
-                var node = $(this);
-                if (node.data('ui-sortable')) {
-                    node.sortable('destroy');
-                }
-            });
+            $.each(sortables, function(_, instance) { instance.destroy(); });
+
+            sortables = [];
         }
 
         function createRow() {
@@ -2476,10 +3198,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     var child = $(this);
 
                     // The editor's own furniture is not content and not a
-                    // boundary either. jQuery UI's resize handle used to be
-                    // treated as content and wrapped into a content area of
-                    // its own on the next init.
-                    if (child.is('.ge-tools-drawer, .ui-resizable-handle')) { return; }
+                    // boundary either. The resize handle used to be treated as
+                    // content and wrapped into a content area of its own on
+                    // the next init.
+                    if (child.is('.ge-tools-drawer, .ge-resize-handle')) { return; }
 
                     // A container sits in the column beside the content
                     // areas, not inside one, so it ends a run of loose
@@ -2556,7 +3278,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 return;
             }
 
+            var from = curView;
             switchLayout(key);
+
+            if (key === from) { return; }
+
+            canvas.find('.ge-utilities').each(function() { renderUtilities($(this)); });
+            refreshPreviews(canvas);
+            plugins('onViewChange', key);
+            emit('view-change', { canvas: canvas, breakpoint: key, from: from, to: key });
         }
 
         function getView() {
@@ -2600,6 +3330,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 return addPaneTo(container, 'accordion', options);
             },
             setLocale: setLocale,
+            getUtility: getUtility,
+            setUtility: setUtility,
             canvas: canvas,
             settings: settingsCopy(),
         };
@@ -2651,6 +3383,18 @@ $.fn.gridEditor.containers = {};
  */
 $.fn.gridEditor.features = {};
 
+/**
+ * Utility plugins: Bootstrap's responsive utility classes - order-md-2,
+ * d-lg-none - edited per breakpoint. A plugin declares families of classes
+ * and the editor reads them, writes them, puts them in the settings panel and
+ * previews them in each view. Same factory, same `plugins` setting.
+ *
+ *   $.fn.gridEditor.utilities.order = function(ge) {
+ *       return { families: [{ name: 'order', prefix: 'order', values: [...] }] };
+ *   };
+ */
+$.fn.gridEditor.utilities = {};
+
 /** Translator for the editor integrations, which get settings and no instance. */
 $.fn.gridEditor.t = translate;
 
@@ -2702,6 +3446,12 @@ $.fn.gridEditor.locales = {
         'view.lg': 'Desktop',
         'view.xl': 'Large desktop',
         'view.xxl': 'Widescreen',
+        'utility.section': 'Responsive: {view}',
+        'utility.default': 'Default',
+        'utility.inherit': 'Inherit: {value} (from {breakpoint})',
+        'utility.varies': 'Changes at {breakpoints}; choosing here replaces that',
+        'error.sortable_missing': 'SortableJS not available! Make sure you loaded the Sortable js file; dragging is off without it.',
+        'warning.setting_removed': 'The {setting} setting was removed in 4.0. Use {replacement} instead.',
         'error.tinymce_missing': 'tinyMCE not available! Make sure you loaded the tinyMCE js file.',
         'error.ckeditor_missing': 'CKEditor not available! Make sure you loaded the ckeditor and jquery adapter js files.',
         'error.summernote_missing': 'Summernote not available! Make sure you loaded the Summernote js file.',