@themarioga/grid-editor 3.2.1 → 4.1.0

package/example/utilities.html

@@ -0,0 +1,145 @@
+<!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 utility plugins. Each is a file of its own, and
+         loading it is what puts its field in the settings panels. -->
+    <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.visibility.min.js"></script>
+    <script src="../dist/plugins/grideditor.order.min.js"></script>
+    <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>
+        $(function() {
+            $('#myGrid').gridEditor({
+                new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
+                content_types: [],
+
+                // Utilities are edited per breakpoint, so this page starts in
+                // one. Switch to "All sizes" to see the page as it will render.
+                default_view: 'xs',
+            });
+
+            // Every change to a utility is announced, like any other operation
+            $('#myGrid').on('grideditor:after-utility', function(e, payload) {
+                $('#last').text(payload.family + ' at ' + payload.breakpoint + ': ' +
+                    (payload.from === null ? 'default' : payload.from) + ' → ' +
+                    (payload.to === null ? 'inherit' : payload.to));
+            });
+
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            });
+        });
+    </script>
+
+    <title>Grid Editor utilities 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">
+
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Responsive utilities</h1>
+                <p class="form-text">
+                    Bootstrap's responsive utility classes, edited per
+                    breakpoint. Pick a breakpoint in the dropdown and every
+                    change is written for that breakpoint alone; in
+                    <strong>All sizes</strong> it is written once, for every
+                    size. Each drawer's gear has a <strong>Responsive</strong>
+                    section with a field per utility, which says what the
+                    breakpoint inherits and from where.
+                </p>
+                <p class="form-text">
+                    <strong>Visibility:</strong> the eye in a drawer hides the
+                    node in the view being edited. It stays on the canvas,
+                    faded, so you can show it again; in All sizes a badge says
+                    at which breakpoints it is hidden. The sidebar below is
+                    hidden on phones and tablets.
+                </p>
+                <p class="form-text">
+                    <strong>Order:</strong> the arrows in a column's drawer
+                    move it earlier or later in the view being edited,
+                    without moving the markup. In the second row, "Second"
+                    comes first on phones only.
+                </p>
+                <p class="form-text">
+                    <strong>Alignment:</strong> fields in the panel of a row
+                    (justify and align its columns) and of a column (align
+                    itself). The third row centres its narrow column from
+                    small desktop up.
+                </p>
+                <p class="form-text">
+                    <strong>Gutters:</strong> fields in a row's panel. A row
+                    with gutter classes is drawn with its real gutters; the
+                    second row has none on phones and wide ones from small
+                    desktop up.
+                </p>
+                <p class="form-text">
+                    <strong>Spacing:</strong> a padding and a margin group in
+                    every panel, each a side and a value. The centred column
+                    below gets more padding from small desktop up.
+                </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>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="row">
+                <div class="col-12 col-md-8">
+                    <h2 class="h5">Main content</h2>
+                    <p>Full width on phones and tablets, two thirds from small desktop up.</p>
+                </div>
+                <div class="col-12 col-md-4 d-none d-md-block">
+                    <h2 class="h5">Sidebar</h2>
+                    <p>Only from small desktop up: <code>d-none d-md-block</code>.</p>
+                </div>
+            </div>
+
+            <div class="row g-0 g-md-5">
+                <div class="col-6">
+                    <h2 class="h5">First</h2>
+                    <p>Change the views and the utilities of these two.</p>
+                </div>
+                <div class="col-6 order-first order-sm-0">
+                    <h2 class="h5">Second</h2>
+                    <p>First on phones, with <code>order-first order-sm-0</code>.</p>
+                </div>
+            </div>
+
+            <div class="row justify-content-md-center">
+                <div class="col-12 col-md-6 py-2 py-md-4">
+                    <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> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+
+</body>
+</html>

package/example/wrap_content.html

@@ -9,13 +9,13 @@
     
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
     
     <!-- Grid editor CSS -->
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
     <!-- Grid editor javascript -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/jquery.grideditor.min.js"></script>
     
     <script>
@@ -35,6 +35,11 @@
     <title>Grid Editor 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 id="myGrid">
         <h1>Hello!</h1>
         <p>Test</p>

package/package.json

@@ -21,7 +21,8 @@
     "grunt-contrib-cssmin": "^5.0.0",
     "grunt-contrib-less": "^3.0.0",
     "grunt-contrib-uglify": "^5.2.2",
-    "grunt-contrib-watch": "^1.1.0"
+    "grunt-contrib-watch": "^1.1.0",
+    "sortablejs": "^1.15.6"
   },
   "name": "@themarioga/grid-editor",
   "description": "Visual javascript editor for the bootstrap grid system, written as a jQuery plugin.",
@@ -33,7 +34,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "3.2.1",
+  "version": "4.1.0",
   "main": "dist/jquery.grideditor.js",
   "files": [
     "dist",