@themarioga/grid-editor 8.0.0-beta.2 → 8.0.0

package/src/js/{style → inline-style}/sections.js

@@ -1,5 +1,5 @@
 /**
- * What the style plugin's sections are made of: for each, its inline
+ * What the inline-style plugin's sections are made of: for each, its inline
  * properties and the field each one gets, the Bootstrap 5.3 classes its
  * catalog offers, and which of the merged utility parts it shows.
  *
@@ -48,14 +48,14 @@ var ONLY_ON_ELEMENT = ['element'];
 export var SECTIONS = [
     {
         key: 'size',
-        labelKey: 'style.section_size',
+        labelKey: 'inline_style.section_size',
         properties: [
-            prop('width', { labelKey: 'style.prop_width', notOn: NOT_ON_COLUMN }),
-            prop('height', { labelKey: 'style.prop_height', notOn: NOT_ON_COLUMN }),
-            prop('min-width', { labelKey: 'style.prop_min_width' }),
-            prop('min-height', { labelKey: 'style.prop_min_height' }),
-            prop('max-width', { labelKey: 'style.prop_max_width' }),
-            prop('max-height', { labelKey: 'style.prop_max_height' }),
+            prop('width', { labelKey: 'inline_style.prop_width', notOn: NOT_ON_COLUMN }),
+            prop('height', { labelKey: 'inline_style.prop_height', notOn: NOT_ON_COLUMN }),
+            prop('min-width', { labelKey: 'inline_style.prop_min_width' }),
+            prop('min-height', { labelKey: 'inline_style.prop_min_height' }),
+            prop('max-width', { labelKey: 'inline_style.prop_max_width' }),
+            prop('max-height', { labelKey: 'inline_style.prop_max_height' }),
         ],
         catalog: [
             group(each('w-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
@@ -68,23 +68,23 @@ export var SECTIONS = [
     },
     {
         key: 'spacing',
-        labelKey: 'style.section_spacing',
+        labelKey: 'inline_style.section_spacing',
         properties: [
-            prop('margin-top', { labelKey: 'style.prop_margin_top' }), prop('margin-right', { labelKey: 'style.prop_margin_right' }), prop('margin-bottom', { labelKey: 'style.prop_margin_bottom' }), prop('margin-left', { labelKey: 'style.prop_margin_left' }),
-            prop('padding-top', { labelKey: 'style.prop_padding_top' }), prop('padding-right', { labelKey: 'style.prop_padding_right' }), prop('padding-bottom', { labelKey: 'style.prop_padding_bottom' }), prop('padding-left', { labelKey: 'style.prop_padding_left' }),
+            prop('margin-top', { labelKey: 'inline_style.prop_margin_top' }), prop('margin-right', { labelKey: 'inline_style.prop_margin_right' }), prop('margin-bottom', { labelKey: 'inline_style.prop_margin_bottom' }), prop('margin-left', { labelKey: 'inline_style.prop_margin_left' }),
+            prop('padding-top', { labelKey: 'inline_style.prop_padding_top' }), prop('padding-right', { labelKey: 'inline_style.prop_padding_right' }), prop('padding-bottom', { labelKey: 'inline_style.prop_padding_bottom' }), prop('padding-left', { labelKey: 'inline_style.prop_padding_left' }),
         ],
         catalog: [],
         parts: ['spacing'],
     },
     {
         key: 'border',
-        labelKey: 'style.section_border',
+        labelKey: 'inline_style.section_border',
         properties: [
-            prop('border-width', { labelKey: 'style.prop_border_width' }),
-            prop('border-style', { labelKey: 'style.prop_border_style', type: 'select', values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'] }),
-            prop('border-color', { labelKey: 'style.prop_border_color', type: 'color' }),
-            prop('border-radius', { labelKey: 'style.prop_border_radius' }),
-            prop('box-shadow', { labelKey: 'style.prop_box_shadow', type: 'shadow' }),
+            prop('border-width', { labelKey: 'inline_style.prop_border_width' }),
+            prop('border-style', { labelKey: 'inline_style.prop_border_style', type: 'select', values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'] }),
+            prop('border-color', { labelKey: 'inline_style.prop_border_color', type: 'color' }),
+            prop('border-radius', { labelKey: 'inline_style.prop_border_radius' }),
+            prop('box-shadow', { labelKey: 'inline_style.prop_box_shadow', type: 'shadow' }),
         ],
         catalog: [
             group(['border', 'border-0'].concat(each('border-', SIDES), each('border-', SIDES, '-0')), false),
@@ -99,13 +99,13 @@ export var SECTIONS = [
     },
     {
         key: 'background',
-        labelKey: 'style.section_background',
+        labelKey: 'inline_style.section_background',
         properties: [
-            prop('background-color', { labelKey: 'style.prop_background_color', type: 'color' }),
-            prop('background-image', { labelKey: 'style.prop_background_image', type: 'url' }),
-            prop('background-size', { labelKey: 'style.prop_background_size' }),
-            prop('background-position', { labelKey: 'style.prop_background_position' }),
-            prop('background-repeat', { labelKey: 'style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
+            prop('background-color', { labelKey: 'inline_style.prop_background_color', type: 'color' }),
+            prop('background-image', { labelKey: 'inline_style.prop_background_image', type: 'url' }),
+            prop('background-size', { labelKey: 'inline_style.prop_background_size' }),
+            prop('background-position', { labelKey: 'inline_style.prop_background_position' }),
+            prop('background-repeat', { labelKey: 'inline_style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
         ],
         catalog: [
             group(each('bg-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black', 'transparent']))
@@ -117,12 +117,12 @@ export var SECTIONS = [
     },
     {
         key: 'text',
-        labelKey: 'style.section_text',
+        labelKey: 'inline_style.section_text',
         properties: [
-            prop('color', { labelKey: 'style.prop_color', type: 'color' }),
-            prop('font-size', { labelKey: 'style.prop_font_size' }),
-            prop('text-align', { labelKey: 'style.prop_text_align', type: 'select', values: ['start', 'center', 'end', 'left', 'right', 'justify'] }),
-            prop('text-shadow', { labelKey: 'style.prop_text_shadow', type: 'shadow' }),
+            prop('color', { labelKey: 'inline_style.prop_color', type: 'color' }),
+            prop('font-size', { labelKey: 'inline_style.prop_font_size' }),
+            prop('text-align', { labelKey: 'inline_style.prop_text_align', type: 'select', values: ['start', 'center', 'end', 'left', 'right', 'justify'] }),
+            prop('text-shadow', { labelKey: 'inline_style.prop_text_shadow', type: 'shadow' }),
         ],
         catalog: [
             group(each('text-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black']))
@@ -135,15 +135,15 @@ export var SECTIONS = [
     },
     {
         key: 'typography',
-        labelKey: 'style.section_typography',
+        labelKey: 'inline_style.section_typography',
         properties: [
-            prop('font-family', { labelKey: 'style.prop_font_family' }),
-            prop('font-weight', { labelKey: 'style.prop_font_weight', type: 'select', values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'] }),
-            prop('font-style', { labelKey: 'style.prop_font_style', type: 'select', values: ['normal', 'italic', 'oblique'] }),
-            prop('line-height', { labelKey: 'style.prop_line_height' }),
-            prop('letter-spacing', { labelKey: 'style.prop_letter_spacing' }),
-            prop('text-transform', { labelKey: 'style.prop_text_transform', type: 'select', values: ['none', 'uppercase', 'lowercase', 'capitalize'] }),
-            prop('text-decoration', { labelKey: 'style.prop_text_decoration', type: 'select', values: ['none', 'underline', 'line-through', 'overline'] }),
+            prop('font-family', { labelKey: 'inline_style.prop_font_family' }),
+            prop('font-weight', { labelKey: 'inline_style.prop_font_weight', type: 'select', values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'] }),
+            prop('font-style', { labelKey: 'inline_style.prop_font_style', type: 'select', values: ['normal', 'italic', 'oblique'] }),
+            prop('line-height', { labelKey: 'inline_style.prop_line_height' }),
+            prop('letter-spacing', { labelKey: 'inline_style.prop_letter_spacing' }),
+            prop('text-transform', { labelKey: 'inline_style.prop_text_transform', type: 'select', values: ['none', 'uppercase', 'lowercase', 'capitalize'] }),
+            prop('text-decoration', { labelKey: 'inline_style.prop_text_decoration', type: 'select', values: ['none', 'underline', 'line-through', 'overline'] }),
         ],
         catalog: [
             group(each('fw-', ['lighter', 'light', 'normal', 'medium', 'semibold', 'bold', 'bolder'])),
@@ -158,12 +158,12 @@ export var SECTIONS = [
     },
     {
         key: 'display',
-        labelKey: 'style.section_display',
+        labelKey: 'inline_style.section_display',
         properties: [
-            prop('display', { labelKey: 'style.prop_display', type: 'select', values: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'] }),
-            prop('opacity', { labelKey: 'style.prop_opacity' }),
-            prop('overflow', { labelKey: 'style.prop_overflow', type: 'select', values: ['visible', 'hidden', 'auto', 'scroll', 'clip'] }),
-            prop('visibility', { labelKey: 'style.prop_visibility', type: 'select', values: ['visible', 'hidden'] }),
+            prop('display', { labelKey: 'inline_style.prop_display', type: 'select', values: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'] }),
+            prop('opacity', { labelKey: 'inline_style.prop_opacity' }),
+            prop('overflow', { labelKey: 'inline_style.prop_overflow', type: 'select', values: ['visible', 'hidden', 'auto', 'scroll', 'clip'] }),
+            prop('visibility', { labelKey: 'inline_style.prop_visibility', type: 'select', values: ['visible', 'hidden'] }),
         ],
         catalog: [
             group(each('opacity-', ['0', '25', '50', '75', '100'])),
@@ -174,7 +174,7 @@ export var SECTIONS = [
     },
     {
         key: 'flex',
-        labelKey: 'style.section_flex',
+        labelKey: 'inline_style.section_flex',
         properties: [],
         catalog: [
             group(['vstack', 'hstack'], true, ['row']),
@@ -183,14 +183,14 @@ export var SECTIONS = [
     },
     {
         key: 'position',
-        labelKey: 'style.section_position',
+        labelKey: 'inline_style.section_position',
         properties: [
-            prop('position', { labelKey: 'style.prop_position', type: 'select', values: ['static', 'relative', 'absolute', 'fixed', 'sticky'] }),
-            prop('top', { labelKey: 'style.prop_top', notOn: NOT_ON_COLUMN }),
-            prop('right', { labelKey: 'style.prop_right', notOn: NOT_ON_COLUMN }),
-            prop('bottom', { labelKey: 'style.prop_bottom', notOn: NOT_ON_COLUMN }),
-            prop('left', { labelKey: 'style.prop_left', notOn: NOT_ON_COLUMN }),
-            prop('z-index', { labelKey: 'style.prop_z_index' }),
+            prop('position', { labelKey: 'inline_style.prop_position', type: 'select', values: ['static', 'relative', 'absolute', 'fixed', 'sticky'] }),
+            prop('top', { labelKey: 'inline_style.prop_top', notOn: NOT_ON_COLUMN }),
+            prop('right', { labelKey: 'inline_style.prop_right', notOn: NOT_ON_COLUMN }),
+            prop('bottom', { labelKey: 'inline_style.prop_bottom', notOn: NOT_ON_COLUMN }),
+            prop('left', { labelKey: 'inline_style.prop_left', notOn: NOT_ON_COLUMN }),
+            prop('z-index', { labelKey: 'inline_style.prop_z_index' }),
         ],
         catalog: [
             group(each('position-', ['static', 'relative', 'absolute', 'fixed', 'sticky'])),
@@ -206,7 +206,7 @@ export var SECTIONS = [
     },
     {
         key: 'custom',
-        labelKey: 'style.section_custom',
+        labelKey: 'inline_style.section_custom',
         properties: [],
         catalog: [],
         parts: [],

package/src/js/{style → inline-style}/spacing.js

@@ -1,9 +1,9 @@
 /**
- * Spacing, a part of the style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
+ * Spacing, a part of the inline-style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
  * pt-, px- … and m-{breakpoint}-*, mt-, mx- … classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle and its options: grideditor.style.js puts them in its sections.
+ * handle and its options: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';

package/src/js/{style → inline-style}/sticky.js

@@ -1,10 +1,10 @@
 /**
- * Sticky, a part of the style plugin: sticking a node to the top or the
+ * Sticky, a part of the inline-style plugin: sticking a node to the top or the
  * bottom of the page as it scrolls, per breakpoint, with Bootstrap's
  * sticky-{breakpoint}-top and -bottom classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/textalign.js

@@ -1,9 +1,9 @@
 /**
- * Text alignment, a part of the style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
+ * Text alignment, a part of the inline-style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
  * -center and -end classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/locales/grideditor.es.js

@@ -56,6 +56,7 @@ GridEditor.locales.es = {
     'panel.done': 'Hecho',
     'panel.id': 'Id',
     'panel.classes': 'Clases',
+    'panel.section_general': 'Id y clases',
     'panel.editor': 'Editor',
     'panel.kind_row': 'Fila',
     'panel.kind_column': 'Columna',
@@ -74,6 +75,23 @@ GridEditor.locales.es = {
     'container.add_tabs': 'Pestañas',
     'container.add_tab': 'Añadir pestaña',
     'container.tab_label': 'Pestaña {number}',
+    'container.tabs_section': 'Pestañas',
+    'container.tabs_style': 'Estilo',
+    'container.tabs_style_tabs': 'Pestañas',
+    'container.tabs_style_pills': 'Pills',
+    'container.tabs_style_underline': 'Subrayado',
+    'container.tabs_width': 'Ancho',
+    'container.tabs_width_natural': 'Natural',
+    'container.tabs_width_fill': 'Rellenar',
+    'container.tabs_width_justified': 'Justificado',
+    'container.tabs_align': 'Alineación',
+    'container.tabs_align_start': 'Inicio',
+    'container.tabs_align_center': 'Centro',
+    'container.tabs_align_end': 'Fin',
+    'container.tabs_layout': 'Disposición',
+    'container.tabs_layout_horizontal': 'Horizontal',
+    'container.tabs_layout_vertical': 'Vertical',
+    'container.tabs_layout_vertical_from': 'Vertical desde {breakpoint}',
     'container.add_accordion': 'Acordeón',
     'container.add_accordion_item': 'Añadir apartado',
     'container.accordion_label': 'Apartado {number}',
@@ -169,74 +187,74 @@ GridEditor.locales.es = {
     'utility.float_end': 'Fin',
     'utility.float_none': 'Ninguno',
     'utility.spacing_gutter': 'El relleno lateral de una columna es su espaciado: cambiarlo cambia el espacio entre columnas',
-    'style.section_title': 'Estilo',
-    'style.dialog_title': 'Estilo: {kind}',
-    'style.section_size': 'Tamaño',
-    'style.section_spacing': 'Espaciado',
-    'style.section_border': 'Borde',
-    'style.section_background': 'Fondo',
-    'style.section_text': 'Texto',
-    'style.section_typography': 'Tipografía',
-    'style.section_display': 'Visualización',
-    'style.section_flex': 'Flex',
-    'style.section_position': 'Posición',
-    'style.section_custom': 'CSS libre',
-    'style.all_sizes': 'Se aplica a todos los tamaños',
-    'style.overridden': 'La clase {class} tiene prioridad sobre este valor',
-    'style.invalid': 'Esta propiedad no acepta ese valor',
-    'style.catalog': 'Clases de Bootstrap',
-    'style.shadow_x': 'X',
-    'style.shadow_y': 'Y',
-    'style.shadow_blur': 'Desenfoque',
-    'style.shadow_spread': 'Extensión',
-    'style.shadow_color': 'Color',
-    'style.shadow_inset': 'Interior',
-    'style.shadow_text_mode': 'Editar como texto',
-    'style.prop_width': 'Ancho',
-    'style.prop_height': 'Alto',
-    'style.prop_min_width': 'Ancho mínimo',
-    'style.prop_min_height': 'Alto mínimo',
-    'style.prop_max_width': 'Ancho máximo',
-    'style.prop_max_height': 'Alto máximo',
-    'style.prop_margin_top': 'Margen superior',
-    'style.prop_margin_right': 'Margen derecho',
-    'style.prop_margin_bottom': 'Margen inferior',
-    'style.prop_margin_left': 'Margen izquierdo',
-    'style.prop_padding_top': 'Relleno superior',
-    'style.prop_padding_right': 'Relleno derecho',
-    'style.prop_padding_bottom': 'Relleno inferior',
-    'style.prop_padding_left': 'Relleno izquierdo',
-    'style.prop_border_width': 'Grosor del borde',
-    'style.prop_border_style': 'Estilo del borde',
-    'style.prop_border_color': 'Color del borde',
-    'style.prop_border_radius': 'Radio del borde',
-    'style.prop_box_shadow': 'Sombra',
-    'style.prop_background_color': 'Color de fondo',
-    'style.prop_background_image': 'Imagen de fondo',
-    'style.prop_background_size': 'Tamaño del fondo',
-    'style.prop_background_position': 'Posición del fondo',
-    'style.prop_background_repeat': 'Repetición del fondo',
-    'style.prop_color': 'Color',
-    'style.prop_font_size': 'Tamaño de letra',
-    'style.prop_text_align': 'Alineación',
-    'style.prop_text_shadow': 'Sombra del texto',
-    'style.prop_font_family': 'Fuente',
-    'style.prop_font_weight': 'Grosor de letra',
-    'style.prop_font_style': 'Estilo de letra',
-    'style.prop_line_height': 'Interlineado',
-    'style.prop_letter_spacing': 'Espaciado entre letras',
-    'style.prop_text_transform': 'Mayúsculas',
-    'style.prop_text_decoration': 'Decoración',
-    'style.prop_display': 'Display',
-    'style.prop_opacity': 'Opacidad',
-    'style.prop_overflow': 'Desbordamiento',
-    'style.prop_visibility': 'Visibilidad',
-    'style.prop_position': 'Posición',
-    'style.prop_top': 'Arriba',
-    'style.prop_right': 'Derecha',
-    'style.prop_bottom': 'Abajo',
-    'style.prop_left': 'Izquierda',
-    'style.prop_z_index': 'Z-index',
+    'inline_style.section_title': 'Estilo',
+    'inline_style.dialog_title': 'Estilo: {kind}',
+    'inline_style.section_size': 'Tamaño',
+    'inline_style.section_spacing': 'Espaciado',
+    'inline_style.section_border': 'Borde',
+    'inline_style.section_background': 'Fondo',
+    'inline_style.section_text': 'Texto',
+    'inline_style.section_typography': 'Tipografía',
+    'inline_style.section_display': 'Visualización',
+    'inline_style.section_flex': 'Flex',
+    'inline_style.section_position': 'Posición',
+    'inline_style.section_custom': 'CSS libre',
+    'inline_style.all_sizes': 'Se aplica a todos los tamaños',
+    'inline_style.overridden': 'La clase {class} tiene prioridad sobre este valor',
+    'inline_style.invalid': 'Esta propiedad no acepta ese valor',
+    'inline_style.catalog': 'Clases de Bootstrap',
+    'inline_style.shadow_x': 'X',
+    'inline_style.shadow_y': 'Y',
+    'inline_style.shadow_blur': 'Desenfoque',
+    'inline_style.shadow_spread': 'Extensión',
+    'inline_style.shadow_color': 'Color',
+    'inline_style.shadow_inset': 'Interior',
+    'inline_style.shadow_text_mode': 'Editar como texto',
+    'inline_style.prop_width': 'Ancho',
+    'inline_style.prop_height': 'Alto',
+    'inline_style.prop_min_width': 'Ancho mínimo',
+    'inline_style.prop_min_height': 'Alto mínimo',
+    'inline_style.prop_max_width': 'Ancho máximo',
+    'inline_style.prop_max_height': 'Alto máximo',
+    'inline_style.prop_margin_top': 'Margen superior',
+    'inline_style.prop_margin_right': 'Margen derecho',
+    'inline_style.prop_margin_bottom': 'Margen inferior',
+    'inline_style.prop_margin_left': 'Margen izquierdo',
+    'inline_style.prop_padding_top': 'Relleno superior',
+    'inline_style.prop_padding_right': 'Relleno derecho',
+    'inline_style.prop_padding_bottom': 'Relleno inferior',
+    'inline_style.prop_padding_left': 'Relleno izquierdo',
+    'inline_style.prop_border_width': 'Grosor del borde',
+    'inline_style.prop_border_style': 'Estilo del borde',
+    'inline_style.prop_border_color': 'Color del borde',
+    'inline_style.prop_border_radius': 'Radio del borde',
+    'inline_style.prop_box_shadow': 'Sombra',
+    'inline_style.prop_background_color': 'Color de fondo',
+    'inline_style.prop_background_image': 'Imagen de fondo',
+    'inline_style.prop_background_size': 'Tamaño del fondo',
+    'inline_style.prop_background_position': 'Posición del fondo',
+    'inline_style.prop_background_repeat': 'Repetición del fondo',
+    'inline_style.prop_color': 'Color',
+    'inline_style.prop_font_size': 'Tamaño de letra',
+    'inline_style.prop_text_align': 'Alineación',
+    'inline_style.prop_text_shadow': 'Sombra del texto',
+    'inline_style.prop_font_family': 'Fuente',
+    'inline_style.prop_font_weight': 'Grosor de letra',
+    'inline_style.prop_font_style': 'Estilo de letra',
+    'inline_style.prop_line_height': 'Interlineado',
+    'inline_style.prop_letter_spacing': 'Espaciado entre letras',
+    'inline_style.prop_text_transform': 'Mayúsculas',
+    'inline_style.prop_text_decoration': 'Decoración',
+    'inline_style.prop_display': 'Display',
+    'inline_style.prop_opacity': 'Opacidad',
+    'inline_style.prop_overflow': 'Desbordamiento',
+    'inline_style.prop_visibility': 'Visibilidad',
+    'inline_style.prop_position': 'Posición',
+    'inline_style.prop_top': 'Arriba',
+    'inline_style.prop_right': 'Derecha',
+    'inline_style.prop_bottom': 'Abajo',
+    'inline_style.prop_left': 'Izquierda',
+    'inline_style.prop_z_index': 'Z-index',
     'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
     'warning.already_editing': 'Este elemento ya tiene un editor: se devuelve ese, con las opciones con las que se creó.',
     'warning.destroyed': 'Se ha llamado a {method}() en un editor destruido, y no hace nada.',

package/src/js/plugins/grideditor.alignment.js

@@ -10,7 +10,7 @@
  *   <script src="dist/plugins/grideditor.alignment.min.js"></script>
  *
  * How a row justifies and aligns its columns - justify-content-* and
- * align-items-* - is a flex container's, and the style plugin's Flex section
+ * align-items-* - is a flex container's, and the inline-style plugin's Flex section
  * edits it, on a row and on anything else made flex.
  *
  * A field only, in the settings panel: alignment is set now and then, not

package/src/js/plugins/grideditor.inline-style.js

@@ -0,0 +1,185 @@
+/**
+ * Inline style for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and every row, column,
+ * container, pane, element and section gets a Style accordion in its
+ * settings panel - size, spacing, border, background, text, typography,
+ * display, flex, position and free css - written to the node's own style
+ * attribute, with Bootstrap's classes for each section as chips that put
+ * them in the classes field. What it can ask the editor for is the handle
+ * its factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="dist/grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.inline-style.min.js"></script>
+ *
+ * It also edits spacing, text alignment, display, flex, sticky and float,
+ * Bootstrap's responsive classes, per breakpoint in its sections. On a node
+ * that is flex or grid, the drawer leaves the flow, so the canvas lays the
+ * content out as the page will.
+ *
+ * Where the settings panel has no room for it - a popover, inline in the
+ * drawer - the accordion opens in a dialog, from a Style button.
+ *
+ * inline_style.sections chooses the sections, and in each the properties and
+ * whether it has a catalog; inline_style.spacing is the options of spacing, whose
+ * scale the gaps share, and inline_style.visibility those of the eye.
+ */
+import { GridEditor } from '../grideditor.js';
+import { spacingPart } from '../inline-style/spacing.js';
+import { textalignPart } from '../inline-style/textalign.js';
+import { displayPart } from '../inline-style/display.js';
+import { flexPart } from '../inline-style/flex.js';
+import { floatPart } from '../inline-style/float.js';
+import { stickyPart } from '../inline-style/sticky.js';
+import { drawerflowPart } from '../inline-style/drawerflow.js';
+import { resolveOptions } from '../inline-style/options.js';
+import { createAccordion } from '../inline-style/accordion.js';
+
+Object.assign(GridEditor.locales.en, {
+    'inline_style.section_title': 'Style',
+    'inline_style.dialog_title': 'Style: {kind}',
+    'inline_style.section_size': 'Size',
+    'inline_style.section_spacing': 'Spacing',
+    'inline_style.section_border': 'Border',
+    'inline_style.section_background': 'Background',
+    'inline_style.section_text': 'Text',
+    'inline_style.section_typography': 'Typography',
+    'inline_style.section_display': 'Display',
+    'inline_style.section_flex': 'Flex',
+    'inline_style.section_position': 'Position',
+    'inline_style.section_custom': 'Custom css',
+    'inline_style.all_sizes': 'Applies to every size',
+    'inline_style.overridden': 'The class {class} takes priority over this value',
+    'inline_style.invalid': 'Not a value this property takes',
+    'inline_style.catalog': 'Bootstrap classes',
+    'inline_style.shadow_x': 'X',
+    'inline_style.shadow_y': 'Y',
+    'inline_style.shadow_blur': 'Blur',
+    'inline_style.shadow_spread': 'Spread',
+    'inline_style.shadow_color': 'Color',
+    'inline_style.shadow_inset': 'Inset',
+    'inline_style.shadow_text_mode': 'Edit as text',
+    'inline_style.prop_width': 'Width',
+    'inline_style.prop_height': 'Height',
+    'inline_style.prop_min_width': 'Min width',
+    'inline_style.prop_min_height': 'Min height',
+    'inline_style.prop_max_width': 'Max width',
+    'inline_style.prop_max_height': 'Max height',
+    'inline_style.prop_margin_top': 'Margin top',
+    'inline_style.prop_margin_right': 'Margin right',
+    'inline_style.prop_margin_bottom': 'Margin bottom',
+    'inline_style.prop_margin_left': 'Margin left',
+    'inline_style.prop_padding_top': 'Padding top',
+    'inline_style.prop_padding_right': 'Padding right',
+    'inline_style.prop_padding_bottom': 'Padding bottom',
+    'inline_style.prop_padding_left': 'Padding left',
+    'inline_style.prop_border_width': 'Border width',
+    'inline_style.prop_border_style': 'Border style',
+    'inline_style.prop_border_color': 'Border color',
+    'inline_style.prop_border_radius': 'Border radius',
+    'inline_style.prop_box_shadow': 'Shadow',
+    'inline_style.prop_background_color': 'Background color',
+    'inline_style.prop_background_image': 'Background image',
+    'inline_style.prop_background_size': 'Background size',
+    'inline_style.prop_background_position': 'Background position',
+    'inline_style.prop_background_repeat': 'Background repeat',
+    'inline_style.prop_color': 'Color',
+    'inline_style.prop_font_size': 'Font size',
+    'inline_style.prop_text_align': 'Text align',
+    'inline_style.prop_text_shadow': 'Text shadow',
+    'inline_style.prop_font_family': 'Font family',
+    'inline_style.prop_font_weight': 'Font weight',
+    'inline_style.prop_font_style': 'Font style',
+    'inline_style.prop_line_height': 'Line height',
+    'inline_style.prop_letter_spacing': 'Letter spacing',
+    'inline_style.prop_text_transform': 'Text transform',
+    'inline_style.prop_text_decoration': 'Text decoration',
+    'inline_style.prop_display': 'Display',
+    'inline_style.prop_opacity': 'Opacity',
+    'inline_style.prop_overflow': 'Overflow',
+    'inline_style.prop_visibility': 'Visibility',
+    'inline_style.prop_position': 'Position',
+    'inline_style.prop_top': 'Top',
+    'inline_style.prop_right': 'Right',
+    'inline_style.prop_bottom': 'Bottom',
+    'inline_style.prop_left': 'Left',
+    'inline_style.prop_z_index': 'Z-index',
+});
+
+// The drawer's part last: it asks the browser how the others left the node
+var PARTS = ['spacing', 'textalign', 'display', 'flex', 'float', 'sticky', 'drawerflow'];
+
+GridEditor.utilities['inline-style'] = function(ge) {
+
+    var options = resolveOptions(ge);
+    var parts = {
+        spacing: spacingPart(ge, options.spacing),
+        textalign: textalignPart(ge),
+        display: displayPart(ge, options.visibility),
+        flex: flexPart(ge, options.spacing),
+        float: floatPart(ge),
+        sticky: stickyPart(ge),
+        drawerflow: drawerflowPart(ge),
+    };
+    var accordions = []; // { node, accordion } for every panel built since the last init
+    var context = {
+        sections: options.sections,
+        parts: parts,
+        state: { open: null },
+        opened: function(key) {
+            accordions.forEach(function(entry) { entry.accordion.open(key); });
+        },
+    };
+
+    /** Every part's hook, called in turn. */
+    function each(hook) {
+        return function() {
+            var args = arguments;
+            PARTS.forEach(function(name) {
+                if (parts[name][hook]) { parts[name][hook].apply(null, args); }
+            });
+        };
+    }
+
+    var partsRefresh = each('onRefresh');
+
+    return {
+        // The parts' families, edited in the sections rather than in Responsive
+        families: PARTS.reduce(function(all, name) {
+            return all.concat(parts[name].families.map(function(family) {
+                return Object.assign({}, family, { panel: false });
+            }));
+        }, []),
+
+        panelSection: function(node, kind) {
+            var accordion = createAccordion(ge, node, kind, context);
+            if (!accordion) { return null; }
+
+            accordions.push({ node: node, accordion: accordion });
+
+            return { labelKey: 'inline_style.section_title', titleKey: 'inline_style.dialog_title', body: accordion.element };
+        },
+
+        preview: function(node, kind, breakpoint) {
+            return parts.spacing.preview(node, kind, breakpoint);
+        },
+
+        // After a write, a change of classes or of view: the accordions of
+        // the nodes it touched follow
+        onRefresh: function(scope) {
+            partsRefresh(scope);
+
+            accordions = accordions.filter(function(entry) { return entry.accordion.element.isConnected; });
+            accordions.forEach(function(entry) {
+                if (entry.node === scope || scope.contains(entry.node)) { entry.accordion.render(); }
+            });
+        },
+
+        drawerTools: each('drawerTools'),
+
+        onDeinit: function() {
+            each('onDeinit')();
+            accordions = [];
+        },
+    };
+};