@themarioga/grid-editor 4.0.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +95 -0
- package/README.md +121 -9
- package/UPGRADING.md +55 -0
- package/dist/grideditor.css +609 -0
- package/dist/grideditor.min.css +1 -1
- package/dist/grideditor.min.css.map +1 -1
- package/dist/jquery.grideditor.bundle.min.js +2 -2
- package/dist/jquery.grideditor.js +1189 -118
- package/dist/jquery.grideditor.min.js +1 -1
- package/dist/jquery.grideditor.min.js.map +1 -1
- package/dist/locales/grideditor.es.js +58 -0
- package/dist/locales/grideditor.es.min.js +1 -1
- package/dist/locales/grideditor.es.min.js.map +1 -1
- package/dist/plugins/grideditor.alignment.js +81 -0
- package/dist/plugins/grideditor.alignment.min.js +2 -0
- package/dist/plugins/grideditor.alignment.min.js.map +1 -0
- package/dist/plugins/grideditor.float.js +56 -0
- package/dist/plugins/grideditor.float.min.js +2 -0
- package/dist/plugins/grideditor.float.min.js.map +1 -0
- package/dist/plugins/grideditor.gutters.js +145 -0
- package/dist/plugins/grideditor.gutters.min.js +2 -0
- package/dist/plugins/grideditor.gutters.min.js.map +1 -0
- package/dist/plugins/grideditor.order.js +206 -0
- package/dist/plugins/grideditor.order.min.js +2 -0
- package/dist/plugins/grideditor.order.min.js.map +1 -0
- package/dist/plugins/grideditor.sections.js +199 -0
- package/dist/plugins/grideditor.sections.min.js +2 -0
- package/dist/plugins/grideditor.sections.min.js.map +1 -0
- package/dist/plugins/grideditor.spacing.js +299 -0
- package/dist/plugins/grideditor.spacing.min.js +2 -0
- package/dist/plugins/grideditor.spacing.min.js.map +1 -0
- package/dist/plugins/grideditor.textalign.js +60 -0
- package/dist/plugins/grideditor.textalign.min.js +2 -0
- package/dist/plugins/grideditor.textalign.min.js.map +1 -0
- package/dist/plugins/grideditor.visibility.js +172 -0
- package/dist/plugins/grideditor.visibility.min.js +2 -0
- package/dist/plugins/grideditor.visibility.min.js.map +1 -0
- package/docs/events.md +32 -2
- package/docs/locale-keys.md +88 -1
- package/docs/plugins.md +141 -3
- package/example/autocols.html +137 -0
- package/example/autosave.html +5 -0
- package/example/basic.html +5 -0
- package/example/breakpoints.html +12 -5
- package/example/ckeditor.html +5 -0
- package/example/containers.html +4 -0
- package/example/elements.html +5 -0
- package/example/index.html +38 -1
- package/example/locale.html +5 -0
- package/example/plugins.html +5 -0
- package/example/summernote.html +5 -0
- package/example/utilities.html +166 -0
- package/example/wrap_content.html +5 -0
- package/package.json +1 -1
- package/src/js/jquery.grideditor.js +1190 -119
- package/src/js/locales/grideditor.es.js +58 -0
- package/src/js/plugins/grideditor.alignment.js +81 -0
- package/src/js/plugins/grideditor.float.js +56 -0
- package/src/js/plugins/grideditor.gutters.js +145 -0
- package/src/js/plugins/grideditor.order.js +206 -0
- package/src/js/plugins/grideditor.sections.js +199 -0
- package/src/js/plugins/grideditor.spacing.js +299 -0
- package/src/js/plugins/grideditor.textalign.js +60 -0
- package/src/js/plugins/grideditor.visibility.js +172 -0
- package/src/less/grideditor.less +299 -0
package/example/index.html
CHANGED
|
@@ -21,6 +21,27 @@
|
|
|
21
21
|
<code>npm run build</code> after changing anything under
|
|
22
22
|
<code>src/</code>.
|
|
23
23
|
</p>
|
|
24
|
+
<p class="text-body-secondary">
|
|
25
|
+
Since 4.0 every gesture works with a finger as well as with a
|
|
26
|
+
mouse — sorting, resizing a column, dragging a button off the
|
|
27
|
+
toolbar — so these are worth opening on a phone. The editor
|
|
28
|
+
needs jQuery, <a href="https://sortablejs.github.io/Sortable/">SortableJS</a>
|
|
29
|
+
and Bootstrap 5; the first demo loads
|
|
30
|
+
<code>jquery.grideditor.bundle.min.js</code> instead, which is the
|
|
31
|
+
editor and SortableJS in one file.
|
|
32
|
+
</p>
|
|
33
|
+
<p class="text-body-secondary">
|
|
34
|
+
New in 5.0: equal and auto columns, columns per row, and sections
|
|
35
|
+
for Bootstrap's containers — see
|
|
36
|
+
<a href="autocols.html">Column sizes and sections</a>. The
|
|
37
|
+
<em>All sizes</em> view now writes one class for every size.
|
|
38
|
+
</p>
|
|
39
|
+
<p class="text-body-secondary">
|
|
40
|
+
Since 4.1: utility plugins, which edit Bootstrap's responsive
|
|
41
|
+
utility classes — visibility, column order, alignment,
|
|
42
|
+
gutters and spacing — per breakpoint. See
|
|
43
|
+
<a href="utilities.html">Responsive utilities</a>.
|
|
44
|
+
</p>
|
|
24
45
|
|
|
25
46
|
<div class="list-group my-4">
|
|
26
47
|
|
|
@@ -29,7 +50,7 @@
|
|
|
29
50
|
<strong>The editor</strong>
|
|
30
51
|
<code class="text-body-secondary">basic.html</code>
|
|
31
52
|
</div>
|
|
32
|
-
<span class="text-body-secondary">tinyMCE in the content areas,
|
|
53
|
+
<span class="text-body-secondary">tinyMCE in the content areas, the drawer as the drag handle, and the bundled build</span>
|
|
33
54
|
</a>
|
|
34
55
|
|
|
35
56
|
<a class="list-group-item list-group-item-action" href="plugins.html">
|
|
@@ -64,6 +85,22 @@
|
|
|
64
85
|
<span class="text-body-secondary">The six breakpoints, the “all sizes” view, and resizing by dragging</span>
|
|
65
86
|
</a>
|
|
66
87
|
|
|
88
|
+
<a class="list-group-item list-group-item-action" href="autocols.html">
|
|
89
|
+
<div class="d-flex justify-content-between">
|
|
90
|
+
<strong>Column sizes and sections</strong>
|
|
91
|
+
<code class="text-body-secondary">autocols.html</code>
|
|
92
|
+
</div>
|
|
93
|
+
<span class="text-body-secondary">Equal and auto columns, columns per row, and Bootstrap's containers as sections</span>
|
|
94
|
+
</a>
|
|
95
|
+
|
|
96
|
+
<a class="list-group-item list-group-item-action" href="utilities.html">
|
|
97
|
+
<div class="d-flex justify-content-between">
|
|
98
|
+
<strong>Responsive utilities</strong>
|
|
99
|
+
<code class="text-body-secondary">utilities.html</code>
|
|
100
|
+
</div>
|
|
101
|
+
<span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters, spacing, text alignment and float</span>
|
|
102
|
+
</a>
|
|
103
|
+
|
|
67
104
|
<a class="list-group-item list-group-item-action" href="locale.html">
|
|
68
105
|
<div class="d-flex justify-content-between">
|
|
69
106
|
<strong>Languages</strong>
|
package/example/locale.html
CHANGED
|
@@ -41,6 +41,11 @@
|
|
|
41
41
|
<title>Grid Editor locale example</title>
|
|
42
42
|
</head>
|
|
43
43
|
<body>
|
|
44
|
+
<!-- Back to the demo index -->
|
|
45
|
+
<div class="container pt-3">
|
|
46
|
+
<a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
44
49
|
|
|
45
50
|
<div class="container">
|
|
46
51
|
|
package/example/plugins.html
CHANGED
|
@@ -111,6 +111,11 @@
|
|
|
111
111
|
<title>Grid Editor plugins example</title>
|
|
112
112
|
</head>
|
|
113
113
|
<body>
|
|
114
|
+
<!-- Back to the demo index -->
|
|
115
|
+
<div class="container pt-3">
|
|
116
|
+
<a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
114
119
|
|
|
115
120
|
<div class="container">
|
|
116
121
|
|
package/example/summernote.html
CHANGED
|
@@ -49,6 +49,11 @@
|
|
|
49
49
|
<title>Grid Editor example</title>
|
|
50
50
|
</head>
|
|
51
51
|
<body>
|
|
52
|
+
<!-- Back to the demo index -->
|
|
53
|
+
<div class="container pt-3">
|
|
54
|
+
<a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
52
57
|
|
|
53
58
|
<div class="container">
|
|
54
59
|
<div id="myGrid">
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
|
|
6
|
+
<!-- CSS dependencies -->
|
|
7
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
|
|
9
|
+
|
|
10
|
+
<!-- Javascript dependencies -->
|
|
11
|
+
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
|
|
12
|
+
<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>
|
|
13
|
+
|
|
14
|
+
<!-- Grid editor CSS -->
|
|
15
|
+
<link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
|
|
16
|
+
|
|
17
|
+
<!-- The editor, and the utility plugins. Each is a file of its own, and
|
|
18
|
+
loading it is what puts its field in the settings panels. -->
|
|
19
|
+
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
|
|
20
|
+
<script src="../dist/jquery.grideditor.min.js"></script>
|
|
21
|
+
<script src="../dist/plugins/grideditor.visibility.min.js"></script>
|
|
22
|
+
<script src="../dist/plugins/grideditor.order.min.js"></script>
|
|
23
|
+
<script src="../dist/plugins/grideditor.alignment.min.js"></script>
|
|
24
|
+
<script src="../dist/plugins/grideditor.gutters.min.js"></script>
|
|
25
|
+
<script src="../dist/plugins/grideditor.spacing.min.js"></script>
|
|
26
|
+
<script src="../dist/plugins/grideditor.textalign.min.js"></script>
|
|
27
|
+
<!-- Float works on elements, so the elements plugin comes first -->
|
|
28
|
+
<script src="../dist/plugins/grideditor.elements.min.js"></script>
|
|
29
|
+
<script src="../dist/plugins/grideditor.float.min.js"></script>
|
|
30
|
+
|
|
31
|
+
<script>
|
|
32
|
+
$(function() {
|
|
33
|
+
$('#myGrid').gridEditor({
|
|
34
|
+
new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
|
|
35
|
+
content_types: [],
|
|
36
|
+
|
|
37
|
+
// Utilities are edited per breakpoint, so this page starts in
|
|
38
|
+
// one. Switch to "All sizes" to see the page as it will render.
|
|
39
|
+
default_view: 'xs',
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// Every change to a utility is announced, like any other operation
|
|
43
|
+
$('#myGrid').on('grideditor:after-utility', function(e, payload) {
|
|
44
|
+
$('#last').text(payload.family + ' at ' + payload.breakpoint + ': ' +
|
|
45
|
+
(payload.from === null ? 'default' : payload.from) + ' → ' +
|
|
46
|
+
(payload.to === null ? 'inherit' : payload.to));
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
$('#output').on('click', function() {
|
|
50
|
+
$('#html').text($('#myGrid').gridEditor('getHtml'));
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<title>Grid Editor utilities example</title>
|
|
56
|
+
</head>
|
|
57
|
+
<body>
|
|
58
|
+
<!-- Back to the demo index -->
|
|
59
|
+
<div class="container pt-3">
|
|
60
|
+
<a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
<div class="container">
|
|
65
|
+
|
|
66
|
+
<div class="row my-3">
|
|
67
|
+
<div class="col-lg-8">
|
|
68
|
+
<h1 class="h4">Responsive utilities</h1>
|
|
69
|
+
<p class="form-text">
|
|
70
|
+
Bootstrap's responsive utility classes, edited per
|
|
71
|
+
breakpoint. Pick a breakpoint in the dropdown and every
|
|
72
|
+
change is written for that breakpoint alone; in
|
|
73
|
+
<strong>All sizes</strong> it is written once, for every
|
|
74
|
+
size. Each drawer's gear has a <strong>Responsive</strong>
|
|
75
|
+
section with a field per utility, which says what the
|
|
76
|
+
breakpoint inherits and from where.
|
|
77
|
+
</p>
|
|
78
|
+
<p class="form-text">
|
|
79
|
+
<strong>Visibility:</strong> the eye in a drawer hides the
|
|
80
|
+
node in the view being edited. It stays on the canvas,
|
|
81
|
+
faded, so you can show it again; in All sizes a badge says
|
|
82
|
+
at which breakpoints it is hidden. The sidebar below is
|
|
83
|
+
hidden on phones and tablets.
|
|
84
|
+
</p>
|
|
85
|
+
<p class="form-text">
|
|
86
|
+
<strong>Order:</strong> the arrows in a column's drawer
|
|
87
|
+
move it earlier or later in the view being edited,
|
|
88
|
+
without moving the markup. In the second row, "Second"
|
|
89
|
+
comes first on phones only.
|
|
90
|
+
</p>
|
|
91
|
+
<p class="form-text">
|
|
92
|
+
<strong>Alignment:</strong> fields in the panel of a row
|
|
93
|
+
(justify and align its columns) and of a column (align
|
|
94
|
+
itself). The third row centres its narrow column from
|
|
95
|
+
small desktop up.
|
|
96
|
+
</p>
|
|
97
|
+
<p class="form-text">
|
|
98
|
+
<strong>Gutters:</strong> fields in a row's panel. A row
|
|
99
|
+
with gutter classes is drawn with its real gutters; the
|
|
100
|
+
second row has none on phones and wide ones from small
|
|
101
|
+
desktop up.
|
|
102
|
+
</p>
|
|
103
|
+
<p class="form-text">
|
|
104
|
+
<strong>Spacing:</strong> a padding and a margin group in
|
|
105
|
+
every panel, each a side and a value. The centred column
|
|
106
|
+
below gets more padding from small desktop up.
|
|
107
|
+
</p>
|
|
108
|
+
<p class="form-text">
|
|
109
|
+
<strong>Text alignment:</strong> a field in every panel.
|
|
110
|
+
The centred column's text is centred from small desktop
|
|
111
|
+
up. <strong>Float:</strong> a field in an element's panel;
|
|
112
|
+
the quote in the last row floats to the end from tablet up,
|
|
113
|
+
with the text flowing round it.
|
|
114
|
+
</p>
|
|
115
|
+
<p class="form-text">Last change: <span id="last">none yet</span></p>
|
|
116
|
+
<button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
|
|
117
|
+
<pre id="html" class="form-text"></pre>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div id="myGrid">
|
|
122
|
+
|
|
123
|
+
<div class="row">
|
|
124
|
+
<div class="col-12 col-md-8">
|
|
125
|
+
<h2 class="h5">Main content</h2>
|
|
126
|
+
<p>Full width on phones and tablets, two thirds from small desktop up.</p>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="col-12 col-md-4 d-none d-md-block">
|
|
129
|
+
<h2 class="h5">Sidebar</h2>
|
|
130
|
+
<p>Only from small desktop up: <code>d-none d-md-block</code>.</p>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="row g-0 g-md-5">
|
|
135
|
+
<div class="col-6">
|
|
136
|
+
<h2 class="h5">First</h2>
|
|
137
|
+
<p>Change the views and the utilities of these two.</p>
|
|
138
|
+
</div>
|
|
139
|
+
<div class="col-6 order-first order-sm-0">
|
|
140
|
+
<h2 class="h5">Second</h2>
|
|
141
|
+
<p>First on phones, with <code>order-first order-sm-0</code>.</p>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<div class="row justify-content-md-center">
|
|
146
|
+
<div class="col-12 col-md-6 py-2 py-md-4 text-md-center">
|
|
147
|
+
<h2 class="h5">Centred</h2>
|
|
148
|
+
<p>Its row has <code>justify-content-md-center</code>, and it has <code>py-2 py-md-4</code>.</p>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="row">
|
|
153
|
+
<div class="col-12">
|
|
154
|
+
<blockquote data-ge-element="quote" data-ge-label="Pull quote" class="float-sm-end ms-sm-3 p-3 border-start border-4">
|
|
155
|
+
A floated element, <code>float-sm-end</code>.
|
|
156
|
+
</blockquote>
|
|
157
|
+
<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>
|
|
158
|
+
<p>A second paragraph, so there is enough text to flow.</p>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
</div> <!-- /#myGrid -->
|
|
163
|
+
</div> <!-- /.container -->
|
|
164
|
+
|
|
165
|
+
</body>
|
|
166
|
+
</html>
|
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
<title>Grid Editor example</title>
|
|
36
36
|
</head>
|
|
37
37
|
<body>
|
|
38
|
+
<!-- Back to the demo index -->
|
|
39
|
+
<div class="container pt-3">
|
|
40
|
+
<a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
38
43
|
<div id="myGrid">
|
|
39
44
|
<h1>Hello!</h1>
|
|
40
45
|
<p>Test</p>
|