@themarioga/grid-editor 6.0.0-beta.1 → 6.0.0-beta.3

package/CHANGELOG.md

@@ -5,6 +5,43 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [6.0.0-beta.3] - 2026-09-23
+### Changed
+- Which editor edits a text is shown first in its settings, as a read-only
+  `Editor` field (`panel.editor`), where it was an info tool in its drawer.
+  The `tool.text_info` locale key is gone. A text whose editor is not loaded
+  still says so in its drawer.
+
+
+## [6.0.0-beta.2] - 2026-09-23
+### Added
+- `settings_panel`: where a gear's settings open - a Bootstrap offcanvas at
+  the side, the default; a popover under the gear; a modal; or `'inline'` in
+  the drawer, as before. Each is titled after its node, the node is outlined
+  while they are open, and Escape closes them. The editor opens and places
+  them with Bootstrap's markup and css, and needs neither Popper nor
+  Bootstrap's javascript for it. [example/utilities.html](example/utilities.html)
+  switches between them.
+- `ge.detailsOf(node)` in the plugin handle: a node's settings panel,
+  wherever it is open.
+
+### Changed
+- The settings' fields are Bootstrap 5's own - labelled `form-control-sm`
+  inputs and `form-select-sm` selects - and the preset class buttons
+  `btn-outline-secondary`, where they carried Bootstrap 3's `btn-default`,
+  which Bootstrap 5 has not got.
+
+### Fixed
+- While dragging, the copy that follows the pointer came out unstyled - its
+  drawers laid out as plain links, their settings panels open - because it was
+  appended to the page's body, outside the canvas the editor's styles apply
+  to. It is appended to the list the drag started in, and looks like what it
+  copies.
+- With `drag_handle: 'drawer'` a text could not be dragged: its drawer is
+  small and made of tools, and a drag never starts on a tool. It has a grip at
+  its start now, and an info tool - the text's and an element's - which does
+  nothing when clicked, starts a drag too.
+
 ## [6.0.0-beta.1] - 2026-09-23
 ### Changed
 - **Elements are blocks of the column.** An element sits in a column beside

package/README.md

@@ -362,6 +362,21 @@ $('#myGrid').gridEditor({
 });
 ```
 
+__`settings_panel`:__ Where the settings a gear opens are shown - a node's id, its classes, the presets and the *Responsive* fields. Default `'offcanvas'`.
+
+| Value | Where |
+| --- | --- |
+| `'offcanvas'` | A Bootstrap offcanvas at the side of the window, from the bottom on a phone. It does not move the canvas, and has room for every field |
+| `'popover'` | A Bootstrap popover under the gear, or over it when there is more room there; a press anywhere else puts it away |
+| `'modal'` | A Bootstrap modal |
+| `'inline'` | Unfolded in the drawer itself, as up to 5.x |
+
+Each is titled after its node ("Column settings"), the node is outlined while its settings are open, and Escape closes them. The editor opens and places them itself, with Bootstrap's markup and css: a page needs neither Popper nor Bootstrap's javascript, and the modal is Bootstrap's own when Bootstrap is there. [example/utilities.html](example/utilities.html) switches between the four.
+
+```javascript
+$('#myGrid').gridEditor({ settings_panel: 'popover' });
+```
+
 __`confirm_delete`:__ Whether to ask before deleting a row, column, element or container. Default `true`. The question is asked in a Bootstrap modal the editor builds outside your canvas, in the interface language; a page that loaded Bootstrap's css but not its javascript gets the browser's own confirm instead. Set it to `false` if you cancel `before-delete` and ask in your own way.
 
 __`drag`:__ How a drag behaves, wherever the editor drags something. Named for the gesture rather than for the library underneath, so it survives a change of library. Every gesture works from a touchscreen, which is what `touch_delay` is for: a touch drag that started instantly would take the page's scrolling with it, so a finger has to rest for a moment before it moves anything. Setting `delay` makes both gestures wait that long.

package/dist/grideditor.css

@@ -109,6 +109,9 @@
 /* Dragging by the whole drawer rather than by the move tool */
 .ge-canvas.ge-editing.ge-drag-drawer {
   /* The tools in it are still tools, and do not start a drag */
+  /* An info tool does nothing when clicked, so it is somewhere to hold */
+  /* A text's drawer sits over the text, small, and is mostly tools: a grip
+       at its start says where to take hold of it */
 }
 .ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer {
   cursor: move;
@@ -120,6 +123,154 @@
 .ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer .ge-details {
   cursor: auto;
 }
+.ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer > a.ge-text-info,
+.ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer > a.ge-element-info {
+  cursor: move;
+}
+.ge-canvas.ge-editing.ge-drag-drawer .ge-text-block > .ge-text-drawer {
+  padding-left: 14px;
+}
+.ge-canvas.ge-editing.ge-drag-drawer .ge-text-block > .ge-text-drawer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 6px;
+  height: 14px;
+  transform: translateY(-50%);
+  background-image: radial-gradient(circle, #50637b 1px, transparent 1.3px);
+  background-size: 3px 3px;
+  opacity: 0.7;
+}
+/* A node's settings, wherever settings_panel shows them: in its drawer, or
+   in one of Bootstrap's offcanvas, popover or modal, outside the canvas. The
+   fields are Bootstrap's own - form-control-sm, form-select-sm,
+   btn-outline-secondary - and this only lays them out. */
+.ge-details {
+  font-size: 0.8125rem;
+  /* The utility plugins' fields, folded under one toggle */
+}
+.ge-details .ge-details-general {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ge-details .ge-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+}
+.ge-details .ge-field-label,
+.ge-details .ge-utility-label {
+  color: var(--bs-secondary-color, #6c757d);
+  font-size: 0.75rem;
+}
+.ge-details .ge-presets:empty {
+  display: none;
+}
+.ge-details .ge-utilities {
+  margin-top: 10px;
+  /* The spacing plugin: a side and a value per group */
+}
+.ge-details .ge-utilities > .ge-utilities-toggle {
+  display: block;
+  color: var(--bs-body-color, #333);
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ge-details .ge-utilities > .ge-utilities-toggle::before {
+  content: '\25B8';
+  display: inline-block;
+  width: 1em;
+}
+.ge-details .ge-utilities.ge-open > .ge-utilities-toggle::before {
+  content: '\25BE';
+}
+.ge-details .ge-utilities > .ge-utilities-body {
+  display: none;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px 10px;
+  margin-top: 6px;
+}
+.ge-details .ge-utilities.ge-open > .ge-utilities-body {
+  display: grid;
+}
+.ge-details .ge-utilities .ge-utility {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+}
+.ge-details .ge-utilities .ge-utility-note {
+  color: var(--bs-secondary-color, #666);
+  font-size: 0.6875rem;
+}
+.ge-details .ge-utilities .ge-spacing {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px 10px;
+  grid-column: 1 / -1;
+}
+.ge-details .ge-utilities .ge-spacing-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  /* The group names the field once */
+}
+.ge-details .ge-utilities .ge-spacing-group .ge-utility > .ge-utility-label {
+  display: none;
+}
+.ge-details .ge-utilities .ge-spacing-gutter {
+  grid-column: 1 / -1;
+  color: var(--bs-secondary-color, #666);
+  font-size: 0.6875rem;
+}
+/* In a drawer it is part of the drawer, compact */
+.ge-tools-drawer > .ge-details {
+  font-size: 11px;
+}
+.ge-tools-drawer > .ge-details .ge-utilities > .ge-utilities-body {
+  grid-template-columns: repeat(auto-fill, minmax(120px, 160px));
+}
+/* In one of Bootstrap's, outside the canvas */
+.ge-settings-panel .ge-details {
+  display: block;
+}
+.ge-settings-panel .ge-settings-title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+.ge-settings-offcanvas {
+  /* Beside the canvas rather than over most of it */
+  --bs-offcanvas-width: 340px;
+  --bs-offcanvas-height: 60vh;
+}
+.ge-settings-popover {
+  /* Popper would position it; without Popper that is the editor's job */
+  position: absolute;
+  --bs-popover-max-width: 360px;
+  width: 360px;
+  max-width: calc(100vw - 16px);
+}
+.ge-settings-popover > .popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.ge-settings-popover > .popover-header > .btn-close {
+  font-size: 0.65rem;
+}
+.ge-settings-popover > .popover-body {
+  overflow-y: auto;
+}
+/* The node whose settings are open */
+.ge-canvas.ge-editing .ge-settings-target {
+  outline: 2px solid var(--bs-primary, #0d6efd);
+  outline-offset: 1px;
+}
 /* While editing */
 .ge-canvas.ge-editing {
   /* Content area */
@@ -175,6 +326,7 @@
   width: calc(100% + 2 * 5px);
   /* Its node may align text, and the drawer's tools would follow */
   text-align: left;
+  /* A node's settings, unfolded in its drawer: settings_panel 'inline' */
 }
 .ge-canvas.ge-editing .ge-tools-drawer.ge-picker-open {
   z-index: 200;
@@ -187,102 +339,23 @@
   background: rgba(255, 255, 255, 0.5);
   cursor: pointer;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details {
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details {
+  display: none;
   padding: 5px;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
-  display: none;
-  /* The utility plugins' fields, folded under one toggle */
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a {
-  color: #333;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a.active {
-  color: white;
+  text-align: left;
+  cursor: auto;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a:hover {
-  text-decoration: none;
-  cursor: pointer;
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details .ge-details-general {
+  flex-direction: row;
+  align-items: flex-end;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-id,
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-classes {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 2px 5px;
-  margin-right: 5px;
-  width: 80px;
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details input.ge-id {
+  width: 90px;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-classes {
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details input.ge-classes {
   width: 200px;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities {
-  margin-top: 5px;
-  font-size: 11px;
-  /* The spacing plugin: a side and a value per group */
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle {
-  color: #333;
-  cursor: pointer;
-  text-decoration: none;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle::before {
-  content: '\25B8';
-  display: inline-block;
-  width: 1em;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-toggle::before {
-  content: '\25BE';
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-body {
-  display: none;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-  margin-top: 4px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-body {
-  display: flex;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 0;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility select {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 1px 2px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility-note {
-  color: #666;
-  font-size: 10px;
-  max-width: 160px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group {
-  display: inline-flex;
-  flex-direction: column;
-  /* The group names the field once */
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group > .ge-spacing-side {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 1px 2px;
-  margin-bottom: 2px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group .ge-utility > .ge-utility-label {
-  display: none;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-gutter {
-  flex-basis: 100%;
-  color: #666;
-  font-size: 10px;
-}
 .ge-canvas.ge-editing .row {
   background-color: #efefef;
   border: 1px solid #999999;
@@ -4465,18 +4538,11 @@
   color: #785f33;
 }
 /* The width field, in the section's settings panel beside id and classes */
-.ge-canvas.ge-editing .ge-details .ge-section-width {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+.ge-details .ge-section-width {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   margin: 0;
-  font-size: 11px;
-}
-.ge-canvas.ge-editing .ge-details .ge-section-width select {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 1px 2px;
 }
 .ge-canvas.ge-layout-xs > .container {
   max-width: 100%;