@themarioga/grid-editor 4.1.0 → 5.0.0

package/example/breakpoints.html

@@ -23,9 +23,10 @@
                 new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
                 content_types: [],
 
-                // The default: every size and offset change is written to all
-                // six breakpoints at once. Switch the dropdown to a single
-                // breakpoint to tune that one on its own.
+                // The default: a size or offset change is written once, as the
+                // class with no breakpoint, and replaces what the breakpoints
+                // said. Switch the dropdown to a single breakpoint to tune
+                // that one on its own.
                 default_view: 'all',
 
                 // A host that wants the old three-mode feel can offer three
@@ -55,8 +56,9 @@
                 <p class="form-text">
                     The dropdown on the right of the toolbar picks the layout
                     mode. In <strong>All sizes</strong> the canvas renders as
-                    the browser would, and the width and indent tools write
-                    every breakpoint at once. Pick a single breakpoint and the
+                    the browser would, and the width and indent tools write one
+                    class for every size (<code>col-4</code>), replacing what
+                    the breakpoints had. Pick a single breakpoint and the
                     canvas narrows to that tier's width, that tier's classes
                     become the effective ones whatever your window is doing,
                     and the tools write only that tier.

package/example/index.html

@@ -31,7 +31,13 @@
             editor and SortableJS in one file.
         </p>
         <p class="text-body-secondary">
-            New in 4.1: utility plugins, which edit Bootstrap's responsive
+            New in 5.0: equal and auto columns, columns per row, and sections
+            for Bootstrap's containers &mdash; see
+            <a href="autocols.html">Column sizes and sections</a>. The
+            <em>All sizes</em> view now writes one class for every size.
+        </p>
+        <p class="text-body-secondary">
+            Since 4.1: utility plugins, which edit Bootstrap's responsive
             utility classes &mdash; visibility, column order, alignment,
             gutters and spacing &mdash; per breakpoint. See
             <a href="utilities.html">Responsive utilities</a>.
@@ -79,12 +85,20 @@
                 <span class="text-body-secondary">The six breakpoints, the &ldquo;all sizes&rdquo; view, and resizing by dragging</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="autocols.html">
+                <div class="d-flex justify-content-between">
+                    <strong>Column sizes and sections</strong>
+                    <code class="text-body-secondary">autocols.html</code>
+                </div>
+                <span class="text-body-secondary">Equal and auto columns, columns per row, and Bootstrap's containers as sections</span>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="utilities.html">
                 <div class="d-flex justify-content-between">
                     <strong>Responsive utilities</strong>
                     <code class="text-body-secondary">utilities.html</code>
                 </div>
-                <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters and spacing</span>
+                <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters, spacing, text alignment and float</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="locale.html">

package/example/utilities.html

@@ -23,6 +23,10 @@
     <script src="../dist/plugins/grideditor.alignment.min.js"></script>
     <script src="../dist/plugins/grideditor.gutters.min.js"></script>
     <script src="../dist/plugins/grideditor.spacing.min.js"></script>
+    <script src="../dist/plugins/grideditor.textalign.min.js"></script>
+    <!-- Float works on elements, so the elements plugin comes first -->
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+    <script src="../dist/plugins/grideditor.float.min.js"></script>
 
     <script>
         $(function() {
@@ -101,6 +105,13 @@
                     every panel, each a side and a value. The centred column
                     below gets more padding from small desktop up.
                 </p>
+                <p class="form-text">
+                    <strong>Text alignment:</strong> a field in every panel.
+                    The centred column's text is centred from small desktop
+                    up. <strong>Float:</strong> a field in an element's panel;
+                    the quote in the last row floats to the end from tablet up,
+                    with the text flowing round it.
+                </p>
                 <p class="form-text">Last 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>
@@ -132,12 +143,22 @@
             </div>
 
             <div class="row justify-content-md-center">
-                <div class="col-12 col-md-6 py-2 py-md-4">
+                <div class="col-12 col-md-6 py-2 py-md-4 text-md-center">
                     <h2 class="h5">Centred</h2>
                     <p>Its row has <code>justify-content-md-center</code>, and it has <code>py-2 py-md-4</code>.</p>
                 </div>
             </div>
 
+            <div class="row">
+                <div class="col-12">
+                    <blockquote data-ge-element="quote" data-ge-label="Pull quote" class="float-sm-end ms-sm-3 p-3 border-start border-4">
+                        A floated element, <code>float-sm-end</code>.
+                    </blockquote>
+                    <p>The text of the content area flows round the quote from tablet up, and runs under it on phones, where it does not float. Switch between Phone and Tablet in the dropdown to see it move, or choose another float in the element's panel.</p>
+                    <p>A second paragraph, so there is enough text to flow.</p>
+                </div>
+            </div>
+
         </div> <!-- /#myGrid -->
     </div> <!-- /.container -->
 

package/package.json

@@ -34,7 +34,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "4.1.0",
+  "version": "5.0.0",
   "main": "dist/jquery.grideditor.js",
   "files": [
     "dist",