@themarioga/grid-editor 7.3.0 → 8.0.0-beta.2
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 +60 -0
- package/README.md +27 -30
- package/UPGRADING.md +55 -0
- package/dist/grideditor.bundle.min.js +3 -3
- package/dist/grideditor.css +47 -6
- package/dist/grideditor.d.ts +3 -3
- package/dist/grideditor.esm.js +7 -58
- package/dist/grideditor.jquery.js +0 -13
- package/dist/grideditor.jquery.min.js +1 -1
- package/dist/grideditor.jquery.min.js.map +3 -3
- package/dist/grideditor.js +7 -58
- package/dist/grideditor.min.css +1 -1
- package/dist/grideditor.min.css.map +1 -1
- package/dist/grideditor.min.js +2 -2
- package/dist/grideditor.min.js.map +3 -3
- package/dist/locales/grideditor.es.esm.js +13 -6
- package/dist/locales/grideditor.es.js +13 -6
- package/dist/locales/grideditor.es.min.js +1 -1
- package/dist/locales/grideditor.es.min.js.map +2 -2
- package/dist/plugins/grideditor.accordion.min.js.map +2 -2
- package/dist/plugins/grideditor.alignment.esm.js +11 -38
- package/dist/plugins/grideditor.alignment.js +11 -38
- package/dist/plugins/grideditor.alignment.min.js +1 -1
- package/dist/plugins/grideditor.alignment.min.js.map +3 -3
- package/dist/plugins/grideditor.card.min.js.map +1 -1
- package/dist/plugins/grideditor.ckeditor.esm.js +0 -5
- package/dist/plugins/grideditor.ckeditor.js +0 -5
- package/dist/plugins/grideditor.ckeditor.min.js +1 -1
- package/dist/plugins/grideditor.ckeditor.min.js.map +3 -3
- package/dist/plugins/grideditor.clipboard.min.js.map +1 -1
- package/dist/plugins/grideditor.codemirror-inline.min.js.map +1 -1
- package/dist/plugins/grideditor.codemirror.min.js.map +1 -1
- package/dist/plugins/grideditor.elements.min.js.map +2 -2
- package/dist/plugins/grideditor.gutters.min.js.map +1 -1
- package/dist/plugins/grideditor.order.min.js.map +1 -1
- package/dist/plugins/grideditor.popup.min.js.map +1 -1
- package/dist/plugins/grideditor.sections.min.js.map +2 -2
- package/dist/plugins/grideditor.style.esm.js +393 -60
- package/dist/plugins/grideditor.style.js +387 -56
- package/dist/plugins/grideditor.style.min.js +4 -2
- package/dist/plugins/grideditor.style.min.js.map +4 -4
- package/dist/plugins/grideditor.summernote.min.js.map +2 -2
- package/dist/plugins/grideditor.tabs.min.js.map +2 -2
- package/dist/plugins/grideditor.tinymce.esm.js +1 -8
- package/dist/plugins/grideditor.tinymce.js +1 -8
- package/dist/plugins/grideditor.tinymce.min.js +1 -1
- package/dist/plugins/grideditor.tinymce.min.js.map +3 -3
- package/docs/events.md +4 -6
- package/docs/locale-keys.md +18 -13
- package/docs/plugins.md +15 -35
- package/example/ckeditor.html +0 -5
- package/example/index.html +5 -4
- package/example/style.html +16 -4
- package/example/utilities.html +12 -11
- package/package.json +1 -1
- package/src/js/dom.js +1 -2
- package/src/js/grideditor.jquery.js +7 -28
- package/src/js/grideditor.js +12 -81
- package/src/js/locales/grideditor.es.js +13 -6
- package/src/js/plugins/grideditor.alignment.js +21 -50
- package/src/js/plugins/grideditor.ckeditor.js +10 -23
- package/src/js/plugins/grideditor.style.js +18 -12
- package/src/js/plugins/grideditor.summernote.js +4 -5
- package/src/js/plugins/grideditor.tinymce.js +4 -17
- package/src/js/style/accordion.js +14 -3
- package/src/js/style/display.js +229 -0
- package/src/js/style/drawerflow.js +118 -0
- package/src/js/style/flex.js +156 -0
- package/src/js/style/float.js +2 -4
- package/src/js/style/options.js +5 -20
- package/src/js/style/sections.js +42 -15
- package/src/js/style/spacing.js +2 -4
- package/src/js/style/sticky.js +39 -0
- package/src/js/style/textalign.js +2 -4
- package/src/js/text/grideditor.text.js +1 -1
- package/src/less/grideditor.less +40 -10
- package/types/grideditor.d.ts +3 -3
- package/dist/plugins/grideditor.float.esm.js +0 -43
- package/dist/plugins/grideditor.float.js +0 -47
- package/dist/plugins/grideditor.float.min.js +0 -1
- package/dist/plugins/grideditor.float.min.js.map +0 -7
- package/dist/plugins/grideditor.spacing.esm.js +0 -327
- package/dist/plugins/grideditor.spacing.js +0 -329
- package/dist/plugins/grideditor.spacing.min.js +0 -1
- package/dist/plugins/grideditor.spacing.min.js.map +0 -7
- package/dist/plugins/grideditor.textalign.esm.js +0 -49
- package/dist/plugins/grideditor.textalign.js +0 -53
- package/dist/plugins/grideditor.textalign.min.js +0 -1
- package/dist/plugins/grideditor.textalign.min.js.map +0 -7
- package/dist/plugins/grideditor.visibility.esm.js +0 -167
- package/dist/plugins/grideditor.visibility.js +0 -169
- package/dist/plugins/grideditor.visibility.min.js +0 -1
- package/dist/plugins/grideditor.visibility.min.js.map +0 -7
- package/src/js/plugins/grideditor.float.js +0 -29
- package/src/js/plugins/grideditor.spacing.js +0 -31
- package/src/js/plugins/grideditor.textalign.js +0 -27
- package/src/js/plugins/grideditor.visibility.js +0 -32
- package/src/js/style/visibility.js +0 -160
package/src/js/style/sections.js
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
var COLORS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
|
|
11
11
|
var SIDES = ['top', 'end', 'bottom', 'start'];
|
|
12
|
+
var OPACITIES = ['10', '25', '50', '75', '100'];
|
|
12
13
|
|
|
13
14
|
function each(prefix, values, suffix) {
|
|
14
15
|
return values.map(function(value) { return prefix + value + (suffix || ''); });
|
|
@@ -17,10 +18,10 @@ function each(prefix, values, suffix) {
|
|
|
17
18
|
/**
|
|
18
19
|
* A catalog group: the classes it offers and whether they exclude each
|
|
19
20
|
* other, so choosing one takes the others off. `notOn` names the kinds of
|
|
20
|
-
* node it is never offered on.
|
|
21
|
+
* node it is never offered on, `onlyOn` the only ones it is.
|
|
21
22
|
*/
|
|
22
|
-
function group(classes, exclusive, notOn) {
|
|
23
|
-
return { classes: classes, exclusive: exclusive !== false, notOn: notOn || [] };
|
|
23
|
+
function group(classes, exclusive, notOn, onlyOn) {
|
|
24
|
+
return { classes: classes, exclusive: exclusive !== false, notOn: notOn || [], onlyOn: onlyOn || null };
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
/**
|
|
@@ -41,6 +42,9 @@ function prop(name, options) {
|
|
|
41
42
|
|
|
42
43
|
var NOT_ON_COLUMN = ['column'];
|
|
43
44
|
|
|
45
|
+
/** The image classes are for the markup an element holds. */
|
|
46
|
+
var ONLY_ON_ELEMENT = ['element'];
|
|
47
|
+
|
|
44
48
|
export var SECTIONS = [
|
|
45
49
|
{
|
|
46
50
|
key: 'size',
|
|
@@ -57,6 +61,8 @@ export var SECTIONS = [
|
|
|
57
61
|
group(each('w-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
|
|
58
62
|
group(each('h-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
|
|
59
63
|
group(['mw-100', 'mh-100', 'vw-100', 'vh-100', 'min-vw-100', 'min-vh-100'], false, NOT_ON_COLUMN),
|
|
64
|
+
group(['img-fluid', 'img-thumbnail'], false, [], ONLY_ON_ELEMENT),
|
|
65
|
+
group(each('object-fit-', ['contain', 'cover', 'fill', 'scale', 'none']), true, [], ONLY_ON_ELEMENT),
|
|
60
66
|
],
|
|
61
67
|
parts: [],
|
|
62
68
|
},
|
|
@@ -83,7 +89,8 @@ export var SECTIONS = [
|
|
|
83
89
|
catalog: [
|
|
84
90
|
group(['border', 'border-0'].concat(each('border-', SIDES), each('border-', SIDES, '-0')), false),
|
|
85
91
|
group(each('border-', ['1', '2', '3', '4', '5'])),
|
|
86
|
-
group(each('border-', COLORS.concat(['black', 'white']))),
|
|
92
|
+
group(each('border-', COLORS.concat(['black', 'white'])).concat(each('border-', COLORS, '-subtle'))),
|
|
93
|
+
group(each('border-opacity-', OPACITIES)),
|
|
87
94
|
group(['rounded'].concat(each('rounded-', ['0', '1', '2', '3', '4', '5', 'circle', 'pill']))),
|
|
88
95
|
group(each('rounded-', SIDES), false),
|
|
89
96
|
group(['shadow-none', 'shadow-sm', 'shadow', 'shadow-lg']),
|
|
@@ -101,8 +108,10 @@ export var SECTIONS = [
|
|
|
101
108
|
prop('background-repeat', { labelKey: 'style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
|
|
102
109
|
],
|
|
103
110
|
catalog: [
|
|
104
|
-
group(each('bg-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black', 'transparent']))
|
|
111
|
+
group(each('bg-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black', 'transparent']))
|
|
112
|
+
.concat(each('bg-', COLORS, '-subtle'), each('text-bg-', COLORS))),
|
|
105
113
|
group(['bg-gradient'], false),
|
|
114
|
+
group(each('bg-opacity-', OPACITIES)),
|
|
106
115
|
],
|
|
107
116
|
parts: [],
|
|
108
117
|
},
|
|
@@ -116,7 +125,9 @@ export var SECTIONS = [
|
|
|
116
125
|
prop('text-shadow', { labelKey: 'style.prop_text_shadow', type: 'shadow' }),
|
|
117
126
|
],
|
|
118
127
|
catalog: [
|
|
119
|
-
group(each('text-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black']))
|
|
128
|
+
group(each('text-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black']))
|
|
129
|
+
.concat(each('text-', COLORS, '-emphasis'), ['text-body-emphasis'])),
|
|
130
|
+
group(each('text-opacity-', ['25', '50', '75', '100'])),
|
|
120
131
|
group(each('fs-', ['1', '2', '3', '4', '5', '6'])),
|
|
121
132
|
group(each('text-decoration-', ['none', 'underline', 'line-through'])),
|
|
122
133
|
],
|
|
@@ -159,7 +170,16 @@ export var SECTIONS = [
|
|
|
159
170
|
group(each('overflow-', ['auto', 'hidden', 'visible', 'scroll'])),
|
|
160
171
|
group(['visible', 'invisible']),
|
|
161
172
|
],
|
|
162
|
-
parts: ['
|
|
173
|
+
parts: ['display'],
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
key: 'flex',
|
|
177
|
+
labelKey: 'style.section_flex',
|
|
178
|
+
properties: [],
|
|
179
|
+
catalog: [
|
|
180
|
+
group(['vstack', 'hstack'], true, ['row']),
|
|
181
|
+
],
|
|
182
|
+
parts: ['flex'],
|
|
163
183
|
},
|
|
164
184
|
{
|
|
165
185
|
key: 'position',
|
|
@@ -180,8 +200,9 @@ export var SECTIONS = [
|
|
|
180
200
|
group(each('end-', ['0', '50', '100'])),
|
|
181
201
|
group(['translate-middle', 'translate-middle-x', 'translate-middle-y']),
|
|
182
202
|
group(['z-n1', 'z-0', 'z-1', 'z-2', 'z-3']),
|
|
203
|
+
group(['fixed-top', 'fixed-bottom']),
|
|
183
204
|
],
|
|
184
|
-
parts: ['float'],
|
|
205
|
+
parts: ['float', 'sticky'],
|
|
185
206
|
},
|
|
186
207
|
{
|
|
187
208
|
key: 'custom',
|
|
@@ -199,6 +220,8 @@ export function section(key) {
|
|
|
199
220
|
|
|
200
221
|
/** Whether a property or a catalog group is offered on this kind of node. */
|
|
201
222
|
export function offeredOn(item, kind) {
|
|
223
|
+
if (item.onlyOn && item.onlyOn.indexOf(kind) === -1) { return false; }
|
|
224
|
+
|
|
202
225
|
return item.notOn.indexOf(kind) === -1;
|
|
203
226
|
}
|
|
204
227
|
|
|
@@ -208,6 +231,10 @@ var COLOR = '(?:' + COLORS.join('|') + '|black|white)';
|
|
|
208
231
|
var BG = '(?:' + COLORS.join('|') + '|body|body-secondary|body-tertiary|white|black|transparent)';
|
|
209
232
|
var TEXT_COLOR = '(?:' + COLORS.join('|') + '|body|body-secondary|body-tertiary|white|black|muted|black-50|white-50)';
|
|
210
233
|
var BORDER = 'border(?:-(?:top|end|bottom|start))?(?:-0)?';
|
|
234
|
+
var SUBTLE = '(?:' + COLORS.join('|') + ')-subtle';
|
|
235
|
+
var EMPHASIS = '(?:' + COLORS.join('|') + '|body)-emphasis';
|
|
236
|
+
var TEXT_BG = 'text-bg-(?:' + COLORS.join('|') + ')';
|
|
237
|
+
var STICKY = 'sticky-' + BREAKPOINT;
|
|
211
238
|
|
|
212
239
|
function spacing(key, side) {
|
|
213
240
|
var sides = { top: '[ty]?', bottom: '[by]?', left: '[sx]?', right: '[ex]?' }[side];
|
|
@@ -236,12 +263,12 @@ var SETS = {
|
|
|
236
263
|
'padding-left': spacing('p', 'left'),
|
|
237
264
|
'border-width': new RegExp('^(?:' + BORDER + '|border-[1-5])$'),
|
|
238
265
|
'border-style': new RegExp('^' + BORDER + '$'),
|
|
239
|
-
'border-color': new RegExp('^(?:' + BORDER + '|border-' + COLOR + ')$'),
|
|
266
|
+
'border-color': new RegExp('^(?:' + BORDER + '|border-' + COLOR + '|border-' + SUBTLE + ')$'),
|
|
240
267
|
'border-radius': /^rounded(?:-(?:[0-5]|circle|pill|top|end|bottom|start))?$/,
|
|
241
268
|
'box-shadow': /^shadow(?:-(?:none|sm|lg))?$/,
|
|
242
|
-
'background-color': new RegExp('^bg-' + BG + '$'),
|
|
269
|
+
'background-color': new RegExp('^(?:bg-' + BG + '|bg-' + SUBTLE + '|' + TEXT_BG + ')$'),
|
|
243
270
|
'background-image': /^bg-gradient$/,
|
|
244
|
-
'color': new RegExp('^text-' + TEXT_COLOR + '$'),
|
|
271
|
+
'color': new RegExp('^(?:text-' + TEXT_COLOR + '|text-' + EMPHASIS + '|' + TEXT_BG + ')$'),
|
|
245
272
|
'font-size': /^fs-[1-6]$/,
|
|
246
273
|
'text-align': new RegExp('^text-' + BREAKPOINT + '(?:start|center|end)$'),
|
|
247
274
|
'text-decoration': /^text-decoration-(?:none|underline|line-through)$/,
|
|
@@ -250,13 +277,13 @@ var SETS = {
|
|
|
250
277
|
'font-style': /^fst-(?:italic|normal)$/,
|
|
251
278
|
'line-height': /^lh-(?:1|sm|base|lg)$/,
|
|
252
279
|
'text-transform': /^text-(?:lowercase|uppercase|capitalize)$/,
|
|
253
|
-
'display': new RegExp('^d-' + BREAKPOINT + '(?:none|inline|inline-block|block|grid|inline-grid|table|table-row|table-cell|flex|inline-flex)$'),
|
|
280
|
+
'display': new RegExp('^(?:d-' + BREAKPOINT + '(?:none|inline|inline-block|block|grid|inline-grid|table|table-row|table-cell|flex|inline-flex)|vstack|hstack)$'),
|
|
254
281
|
'opacity': /^opacity-(?:0|25|50|75|100)$/,
|
|
255
282
|
'overflow': /^overflow-(?:auto|hidden|visible|scroll)$/,
|
|
256
283
|
'visibility': /^(?:visible|invisible)$/,
|
|
257
|
-
'position':
|
|
258
|
-
'top':
|
|
259
|
-
'bottom':
|
|
284
|
+
'position': new RegExp('^(?:position-(?:static|relative|absolute|fixed|sticky)|fixed-(?:top|bottom)|' + STICKY + '(?:top|bottom))$'),
|
|
285
|
+
'top': new RegExp('^(?:top-(?:0|50|100)|fixed-top|' + STICKY + 'top)$'),
|
|
286
|
+
'bottom': new RegExp('^(?:bottom-(?:0|50|100)|fixed-bottom|' + STICKY + 'bottom)$'),
|
|
260
287
|
'left': /^start-(?:0|50|100)$/,
|
|
261
288
|
'right': /^end-(?:0|50|100)$/,
|
|
262
289
|
'z-index': /^z-(?:n1|[0-3])$/,
|
package/src/js/style/spacing.js
CHANGED
|
@@ -2,10 +2,8 @@
|
|
|
2
2
|
* Spacing, a part of the style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
|
|
3
3
|
* pt-, px- … and m-{breakpoint}-*, mt-, mx- … classes.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* grideditor.style.js puts it in its sections; the deprecated
|
|
8
|
-
* grideditor.spacing.js still registers it on its own, as it always did.
|
|
5
|
+
* Its families, and whatever it does on the canvas, as a function of the
|
|
6
|
+
* handle and its options: grideditor.style.js puts them in its sections.
|
|
9
7
|
*/
|
|
10
8
|
import { GridEditor } from '../grideditor.js';
|
|
11
9
|
import * as dom from '../dom.js';
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Sticky, a part of the style plugin: sticking a node to the top or the
|
|
3
|
+
* bottom of the page as it scrolls, per breakpoint, with Bootstrap's
|
|
4
|
+
* sticky-{breakpoint}-top and -bottom classes.
|
|
5
|
+
*
|
|
6
|
+
* Its families, and whatever it does on the canvas, as a function of the
|
|
7
|
+
* handle: grideditor.style.js puts them in its sections.
|
|
8
|
+
*/
|
|
9
|
+
import { GridEditor } from '../grideditor.js';
|
|
10
|
+
|
|
11
|
+
Object.assign(GridEditor.locales.en, {
|
|
12
|
+
'utility.sticky': 'Sticky',
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
/** What Bootstrap's sticky-top and sticky-bottom are. */
|
|
16
|
+
var STUCK = {
|
|
17
|
+
top: { position: 'sticky', top: '0', 'z-index': '1020' },
|
|
18
|
+
bottom: { position: 'sticky', bottom: '0', 'z-index': '1020' },
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export function stickyPart(ge) {
|
|
22
|
+
return {
|
|
23
|
+
families: [{
|
|
24
|
+
name: 'sticky',
|
|
25
|
+
prefix: 'sticky',
|
|
26
|
+
values: ['top', 'bottom'],
|
|
27
|
+
appliesTo: ['row', 'column', 'element', 'container'],
|
|
28
|
+
labelKey: 'utility.sticky',
|
|
29
|
+
panel: false,
|
|
30
|
+
|
|
31
|
+
/** With no class applying here, where the node is without one. */
|
|
32
|
+
preview: function(value, node) {
|
|
33
|
+
if (value !== null) { return STUCK[value]; }
|
|
34
|
+
|
|
35
|
+
return { position: ge.bareStyle(node, 'sticky', 'position') };
|
|
36
|
+
},
|
|
37
|
+
}],
|
|
38
|
+
};
|
|
39
|
+
}
|
|
@@ -2,10 +2,8 @@
|
|
|
2
2
|
* Text alignment, a part of the style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
|
|
3
3
|
* -center and -end classes.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* grideditor.style.js puts it in its sections; the deprecated
|
|
8
|
-
* grideditor.textalign.js still registers it on its own, as it always did.
|
|
5
|
+
* Its families, and whatever it does on the canvas, as a function of the
|
|
6
|
+
* handle: grideditor.style.js puts them in its sections.
|
|
9
7
|
*/
|
|
10
8
|
import { GridEditor } from '../grideditor.js';
|
|
11
9
|
|
|
@@ -210,7 +210,7 @@ if (!GridEditor.features.text) {
|
|
|
210
210
|
var before = readBefore.get(block);
|
|
211
211
|
var open = before ? attributesOf(block) : null;
|
|
212
212
|
|
|
213
|
-
// Every content area is told
|
|
213
|
+
// Every content area is told: one whose editor never
|
|
214
214
|
// started is the plugin's to ignore
|
|
215
215
|
if (text) { text.stop([block]); }
|
|
216
216
|
|
package/src/less/grideditor.less
CHANGED
|
@@ -474,6 +474,14 @@
|
|
|
474
474
|
width: 360px;
|
|
475
475
|
max-width: calc(100vw - 16px);
|
|
476
476
|
|
|
477
|
+
/* Bootstrap's css leaves the arrow's position to Popper, which puts it on
|
|
478
|
+
as an inline style. Without it the arrow stays in the flow, a strip as
|
|
479
|
+
tall as the arrow above the header; out of it, the top or bottom of
|
|
480
|
+
.bs-popover-bottom and .bs-popover-top hang it outside the edge */
|
|
481
|
+
> .popover-arrow {
|
|
482
|
+
position: absolute;
|
|
483
|
+
}
|
|
484
|
+
|
|
477
485
|
> .popover-header {
|
|
478
486
|
display: flex;
|
|
479
487
|
align-items: center;
|
|
@@ -1107,18 +1115,19 @@
|
|
|
1107
1115
|
.ge-layout-modes();
|
|
1108
1116
|
|
|
1109
1117
|
/*
|
|
1110
|
-
* The
|
|
1111
|
-
* there would be nothing left to click to show it again - and shown
|
|
1112
|
-
*
|
|
1113
|
-
* which are !important too.
|
|
1118
|
+
* The style plugin's display. A node Bootstrap would hide is kept on the
|
|
1119
|
+
* canvas - there would be nothing left to click to show it again - and shown
|
|
1120
|
+
* as it would be if it were not hidden, which data-ge-display says. The
|
|
1121
|
+
* selectors outweigh Bootstrap's d-* classes, which are !important too.
|
|
1114
1122
|
*/
|
|
1123
|
+
@ge-displays: inline, inline-block, block, grid, inline-grid, flex, inline-flex;
|
|
1124
|
+
|
|
1115
1125
|
.ge-canvas.ge-editing {
|
|
1116
|
-
|
|
1117
|
-
display
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
}
|
|
1126
|
+
each(@ge-displays, {
|
|
1127
|
+
[data-ge-display="@{value}"] {
|
|
1128
|
+
display: @value !important;
|
|
1129
|
+
}
|
|
1130
|
+
});
|
|
1122
1131
|
|
|
1123
1132
|
.ge-hidden-in-view {
|
|
1124
1133
|
opacity: .45;
|
|
@@ -1148,6 +1157,27 @@
|
|
|
1148
1157
|
}
|
|
1149
1158
|
}
|
|
1150
1159
|
|
|
1160
|
+
/*
|
|
1161
|
+
* The style plugin's drawer on a flex or grid node: out of the flow, on top
|
|
1162
|
+
* and as wide as the node, over a transparent top border as tall as it is.
|
|
1163
|
+
* The border's width comes with the node's data-ge-drawer-out, from a rule
|
|
1164
|
+
* per height the plugin writes. The selectors outweigh Bootstrap's border
|
|
1165
|
+
* classes and the drawer's own margins, which the spacing part sets inline.
|
|
1166
|
+
*/
|
|
1167
|
+
.ge-canvas.ge-editing .ge-drawer-out {
|
|
1168
|
+
position: relative;
|
|
1169
|
+
border-top-style: solid !important;
|
|
1170
|
+
border-top-color: transparent !important;
|
|
1171
|
+
|
|
1172
|
+
> .ge-tools-drawer {
|
|
1173
|
+
position: absolute;
|
|
1174
|
+
left: 0;
|
|
1175
|
+
right: 0;
|
|
1176
|
+
width: auto !important;
|
|
1177
|
+
margin: 0 !important;
|
|
1178
|
+
}
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1151
1181
|
/* The order plugin: a column ordered by class in this view says where */
|
|
1152
1182
|
.ge-canvas.ge-editing .column[data-ge-order]::before {
|
|
1153
1183
|
content: attr(data-ge-order);
|
package/types/grideditor.d.ts
CHANGED
|
@@ -54,7 +54,7 @@ export interface PresetClass {
|
|
|
54
54
|
|
|
55
55
|
/** A content filter: run on init and deinit with the canvas. A string names a function on window. */
|
|
56
56
|
/** A section of the style plugin's accordion. */
|
|
57
|
-
export type StyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'position' | 'custom';
|
|
57
|
+
export type StyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'flex' | 'position' | 'custom';
|
|
58
58
|
|
|
59
59
|
/** A section on or off, or on with some of its properties and without its catalog. */
|
|
60
60
|
export type StyleSection = boolean | { properties?: string[]; catalog?: boolean };
|
|
@@ -63,9 +63,9 @@ export type StyleSection = boolean | { properties?: string[]; catalog?: boolean
|
|
|
63
63
|
export interface StyleOptions {
|
|
64
64
|
/** Every section is on unless it is turned off here. */
|
|
65
65
|
sections?: Partial<Record<StyleSectionKey, StyleSection>>;
|
|
66
|
-
/**
|
|
66
|
+
/** The spacing section: the values offered, and what 0 to 5 come to - for the gaps too. */
|
|
67
67
|
spacing?: { values?: string[]; scale?: string[] };
|
|
68
|
-
/**
|
|
68
|
+
/** The eye that hides and shows a node, the display family's: false leaves it out of the drawers. */
|
|
69
69
|
visibility?: { drawer?: boolean };
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
// src/js/plugins/grideditor.float.js
|
|
2
|
-
import { GridEditor as GridEditor2 } from "../grideditor.esm.js";
|
|
3
|
-
|
|
4
|
-
// src/js/style/float.js
|
|
5
|
-
import { GridEditor } from "../grideditor.esm.js";
|
|
6
|
-
Object.assign(GridEditor.locales.en, {
|
|
7
|
-
"utility.float": "Float",
|
|
8
|
-
"utility.float_start": "Start",
|
|
9
|
-
"utility.float_end": "End",
|
|
10
|
-
"utility.float_none": "None"
|
|
11
|
-
});
|
|
12
|
-
var CSS = { start: "left", end: "right", none: "none" };
|
|
13
|
-
function floatPart(ge) {
|
|
14
|
-
function label(value) {
|
|
15
|
-
if (value === "start") {
|
|
16
|
-
return ge.t("utility.float_start");
|
|
17
|
-
}
|
|
18
|
-
if (value === "end") {
|
|
19
|
-
return ge.t("utility.float_end");
|
|
20
|
-
}
|
|
21
|
-
return ge.t("utility.float_none");
|
|
22
|
-
}
|
|
23
|
-
return {
|
|
24
|
-
families: [{
|
|
25
|
-
name: "float",
|
|
26
|
-
prefix: "float",
|
|
27
|
-
values: ["start", "end", "none"],
|
|
28
|
-
appliesTo: ["element"],
|
|
29
|
-
labelKey: "utility.float",
|
|
30
|
-
label,
|
|
31
|
-
/** With no class applying here, whatever the host's css floats it as. */
|
|
32
|
-
preview: function(value, node) {
|
|
33
|
-
return { float: value === null ? ge.bareStyle(node, "float", "float") : CSS[value] };
|
|
34
|
-
}
|
|
35
|
-
}]
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// src/js/plugins/grideditor.float.js
|
|
40
|
-
GridEditor2.utilities.float = function(ge) {
|
|
41
|
-
ge.warn('the "float" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
|
|
42
|
-
return floatPart(ge);
|
|
43
|
-
};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
(() => {
|
|
2
|
-
// src/js/register.js
|
|
3
|
-
var GridEditor = window.GridEditor;
|
|
4
|
-
if (!GridEditor || typeof GridEditor.get !== "function") {
|
|
5
|
-
throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
// src/js/style/float.js
|
|
9
|
-
Object.assign(GridEditor.locales.en, {
|
|
10
|
-
"utility.float": "Float",
|
|
11
|
-
"utility.float_start": "Start",
|
|
12
|
-
"utility.float_end": "End",
|
|
13
|
-
"utility.float_none": "None"
|
|
14
|
-
});
|
|
15
|
-
var CSS = { start: "left", end: "right", none: "none" };
|
|
16
|
-
function floatPart(ge) {
|
|
17
|
-
function label(value) {
|
|
18
|
-
if (value === "start") {
|
|
19
|
-
return ge.t("utility.float_start");
|
|
20
|
-
}
|
|
21
|
-
if (value === "end") {
|
|
22
|
-
return ge.t("utility.float_end");
|
|
23
|
-
}
|
|
24
|
-
return ge.t("utility.float_none");
|
|
25
|
-
}
|
|
26
|
-
return {
|
|
27
|
-
families: [{
|
|
28
|
-
name: "float",
|
|
29
|
-
prefix: "float",
|
|
30
|
-
values: ["start", "end", "none"],
|
|
31
|
-
appliesTo: ["element"],
|
|
32
|
-
labelKey: "utility.float",
|
|
33
|
-
label,
|
|
34
|
-
/** With no class applying here, whatever the host's css floats it as. */
|
|
35
|
-
preview: function(value, node) {
|
|
36
|
-
return { float: value === null ? ge.bareStyle(node, "float", "float") : CSS[value] };
|
|
37
|
-
}
|
|
38
|
-
}]
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// src/js/plugins/grideditor.float.js
|
|
43
|
-
GridEditor.utilities.float = function(ge) {
|
|
44
|
-
ge.warn('the "float" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
|
|
45
|
-
return floatPart(ge);
|
|
46
|
-
};
|
|
47
|
-
})();
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(()=>{var i=window.GridEditor;if(!i||typeof i.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");Object.assign(i.locales.en,{"utility.float":"Float","utility.float_start":"Start","utility.float_end":"End","utility.float_none":"None"});var n={start:"left",end:"right",none:"none"};function o(t){function e(r){return r==="start"?t.t("utility.float_start"):r==="end"?t.t("utility.float_end"):t.t("utility.float_none")}return{families:[{name:"float",prefix:"float",values:["start","end","none"],appliesTo:["element"],labelKey:"utility.float",label:e,preview:function(r,l){return{float:r===null?t.bareStyle(l,"float","float"):n[r]}}}]}}i.utilities.float=function(t){return t.warn('the "float" plugin is deprecated and will be removed in 8.0: load grideditor.style.js'),o(t)};})();
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/js/register.js", "../../src/js/style/float.js", "../../src/js/plugins/grideditor.float.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * What a plugin's or a locale's classic script imports in place of the\n * editor: the GridEditor the page already loaded.\n *\n * The build points `import { GridEditor } from '../grideditor.js'` here for\n * the classic scripts, so each registers on the editor the page has rather\n * than bringing its own. Loaded before the editor there is nothing to\n * register on, and saying so is better than a TypeError three calls later.\n */\nvar GridEditor = window.GridEditor;\n\nif (!GridEditor || typeof GridEditor.get !== 'function') {\n throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +\n 'its locales and grideditor.jquery.js');\n}\n\nexport { GridEditor };\nexport default GridEditor;\n", "/**\n * Float, a part of the style plugin: floating an element per breakpoint, with Bootstrap's\n * float-{breakpoint}-start, -end and -none classes.\n *\n * The part is what the float plugin was up to 7.2 - its families, and\n * whatever it did on the canvas - as a function of the handle.\n * grideditor.style.js puts it in its sections; the deprecated\n * grideditor.float.js still registers it on its own, as it always did.\n */\nimport { GridEditor } from '../grideditor.js';\n\nObject.assign(GridEditor.locales.en, {\n 'utility.float': 'Float',\n 'utility.float_start': 'Start',\n 'utility.float_end': 'End',\n 'utility.float_none': 'None',\n});\n\n/** Start and end are left and right: Bootstrap's css is left to right. */\nvar CSS = { start: 'left', end: 'right', none: 'none' };\n\nexport function floatPart(ge) {\n\n function label(value) {\n if (value === 'start') { return ge.t('utility.float_start'); }\n if (value === 'end') { return ge.t('utility.float_end'); }\n\n return ge.t('utility.float_none');\n }\n\n return {\n families: [{\n name: 'float',\n prefix: 'float',\n values: ['start', 'end', 'none'],\n appliesTo: ['element'],\n labelKey: 'utility.float',\n label: label,\n\n /** With no class applying here, whatever the host's css floats it as. */\n preview: function(value, node) {\n return { float: value === null ? ge.bareStyle(node, 'float', 'float') : CSS[value] };\n },\n }],\n };\n}\n", "/**\n * Floating elements for grid-editor.\n *\n * A utility plugin: load this file after the editor and after the elements\n * plugin, and an element can float to the start or the end of its content\n * area per breakpoint, with the text around it, using Bootstrap's\n * float-{breakpoint}-start, -end and -none classes. What it can ask the\n * editor for is the handle its factory is called with, described in\n * docs/plugins.md.\n *\n * <script src=\"dist/grideditor.min.js\"></script>\n * <script src=\"dist/plugins/grideditor.elements.min.js\"></script>\n * <script src=\"dist/plugins/grideditor.float.min.js\"></script>\n *\n * Elements only. A floated row or column stops being part of the grid, and a\n * container sits beside the content areas rather than in their text.\n *\n * Deprecated since 7.3, and gone in 8.0: grideditor.style.js carries this\n * plugin's families, and edits them in its own sections. This file is that\n * part on its own, as it was, and says so once per editor. Loaded beside\n * the style plugin, it stands down.\n */\nimport { GridEditor } from '../grideditor.js';\nimport { floatPart } from '../style/float.js';\n\nGridEditor.utilities.float = function(ge) {\n ge.warn('the \"float\" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');\n return floatPart(ge);\n};\n"],
|
|
5
|
-
"mappings": "MASA,IAAIA,EAAa,OAAO,WAExB,GAAI,CAACA,GAAc,OAAOA,EAAW,KAAQ,WACzC,MAAM,IAAI,MAAM,wHAC0B,ECF9C,OAAO,OAAOC,EAAW,QAAQ,GAAI,CACjC,gBAAiB,QACjB,sBAAuB,QACvB,oBAAqB,MACrB,qBAAsB,MAC1B,CAAC,EAGD,IAAIC,EAAM,CAAE,MAAO,OAAQ,IAAK,QAAS,KAAM,MAAO,EAE/C,SAASC,EAAUC,EAAI,CAE1B,SAASC,EAAMC,EAAO,CAClB,OAAIA,IAAU,QAAkBF,EAAG,EAAE,qBAAqB,EACtDE,IAAU,MAAgBF,EAAG,EAAE,mBAAmB,EAE/CA,EAAG,EAAE,oBAAoB,CACpC,CAEA,MAAO,CACH,SAAU,CAAC,CACP,KAAM,QACN,OAAQ,QACR,OAAQ,CAAC,QAAS,MAAO,MAAM,EAC/B,UAAW,CAAC,SAAS,EACrB,SAAU,gBACV,MAAOC,EAGP,QAAS,SAASC,EAAOC,EAAM,CAC3B,MAAO,CAAE,MAAOD,IAAU,KAAOF,EAAG,UAAUG,EAAM,QAAS,OAAO,EAAIL,EAAII,CAAK,CAAE,CACvF,CACJ,CAAC,CACL,CACJ,CCpBAE,EAAW,UAAU,MAAQ,SAASC,EAAI,CACtC,OAAAA,EAAG,KAAK,uFAAuF,EACxFC,EAAUD,CAAE,CACvB",
|
|
6
|
-
"names": ["GridEditor", "GridEditor", "CSS", "floatPart", "ge", "label", "value", "node", "GridEditor", "ge", "floatPart"]
|
|
7
|
-
}
|