@themarioga/grid-editor 3.2.0 → 4.0.0

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

@@ -69,6 +69,8 @@
         'view.lg': 'Escritorio',
         'view.xl': 'Escritorio grande',
         'view.xxl': 'Pantalla panorámica',
+        'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
+        'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
         'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
         'error.ckeditor_missing': '¡CKEditor no está disponible! Asegúrate de haber cargado los archivos js de ckeditor y del adaptador de jQuery.',
         'error.summernote_missing': '¡Summernote no está disponible! Asegúrate de haber cargado el archivo js de Summernote.',

package/src/js/plugins/grideditor.accordion.js

@@ -99,6 +99,14 @@ $.fn.gridEditor.containers.accordion = function(ge) {
 
     return {
         labelKey: 'container.add_accordion',
+
+        // Items sort within their accordion and into any other one
+        onSortable: function(sortable) {
+            sortable(ge.canvas.find('.ge-container-accordion > .accordion'), {
+                draggable: '.ge-accordion-item',
+                group: 'accordion',
+            });
+        },
         addPaneKey: 'container.add_accordion_item',
         paneKind: 'accordion-item',
 

package/src/js/plugins/grideditor.elements.js

@@ -127,13 +127,13 @@ $.fn.gridEditor.features.elements = function(ge) {
         onContentReady: markElements,
 
         /** Elements move within a content area and between them. */
-        onSortable: function(shared) {
+        onSortable: function(sortable) {
             if (!elementsEnabled()) { return; }
 
-            ge.canvas.find('.ge-content').sortable($.extend({
-                items: '> .ge-element',
-                connectWith: '.ge-canvas .ge-content',
-            }, shared, ge.settings.sortable_options));
+            sortable(ge.canvas.find('.ge-content'), {
+                draggable: '.ge-element',
+                group: 'element',
+            });
         },
     };
 };

package/src/js/plugins/grideditor.tabs.js

@@ -73,6 +73,14 @@ $.fn.gridEditor.containers.tabs = function(ge) {
 
     return {
         labelKey: 'container.add_tabs',
+
+        // A tab strip sorts its own tabs, and the panes follow them. No
+        // group: a tab belongs to the strip it was made in.
+        onSortable: function(sortable) {
+            sortable(ge.canvas.find('.ge-container-tabs > .nav-tabs'), {
+                draggable: '.ge-tab',
+            });
+        },
         addPaneKey: 'container.add_tab',
         paneKind: 'tab',
 

package/src/less/grideditor.less

@@ -106,7 +106,24 @@
 }
 
 /* The button following the pointer must not be what the pointer is over */
+.ge-drag-helper {
+    opacity: .85;
+    pointer-events: none;
+
+    .ge-tools-drawer {
+        pointer-events: none;
+    }
+}
+
+/* A toolbar button that can be carried onto the canvas */
+.ge-palette-button {
+    cursor: move;
+    touch-action: none;
+}
+
 .ge-toolbar-helper {
+    position: absolute;
+    z-index: 1000;
     pointer-events: none;
     opacity: 0.85;
 }
@@ -131,10 +148,9 @@
     
     .ge-tools-drawer {
         /* Positioned, so a tool can hang a picker off itself. Deliberately
-           not stacked above anything the rest of the time: jQuery UI's resize
-           handle carries an inline z-index of 90 and runs down the column's
-           edge, and a drawer sitting over it would take the clicks meant for
-           the handle. */
+           not stacked above anything the rest of the time: the resize handle
+           runs down the column's edge, and a drawer sitting over it would take
+           the clicks meant for the handle. */
         position: relative;
         -webkit-touch-callout: none;
 
@@ -423,12 +439,18 @@
         }
     }
     
-    /* Sorting */
-    .ui-sortable-placeholder {
+    /* Sorting. The dragged node stays in the list and shows where it would
+       land - that is the placeholder - while a copy of it follows the
+       pointer. */
+    .ge-drag-placeholder {
         background: fadeout(yellow, 80%);
-        visibility: visible !important;
+        opacity: 1;
         min-height: 50px;
         max-height: 100px;
+
+        > * {
+            visibility: hidden;
+        }
     }
 
     /* A size change should read as a movement rather than a jump, but not
@@ -437,23 +459,26 @@
     .column {
         transition: width 120ms ease, margin-left 120ms ease;
     }
-    .column.ui-resizable-resizing {
+    .column.ge-resizing {
         transition: none;
         /* Follow the pointer in pixels: the layout mode's max-width is what
            the column will snap back into once the drag lands */
         max-width: none;
     }
 
-    /* Resizing. jQuery UI's own stylesheet is not a dependency, so the handle
-       is styled here: a grip on the column's edge, clear of the drawer, which
-       is what keeps the resize gesture and the sort gesture apart */
-    .column > .ui-resizable-handle {
+    /* Resizing: a grip on the column's edge, clear of the drawer, which is
+       what keeps the resize gesture and the sort gesture apart */
+    .column > .ge-resize-handle {
         position: absolute;
         display: block;
         z-index: 10;
+
+        /* The gesture is the editor's, not the page's: without this a touch
+           drag on the handle scrolls instead of resizing */
+        touch-action: none;
     }
-    .column > .ui-resizable-e,
-    .column > .ui-resizable-w {
+    .column > .ge-resize-e,
+    .column > .ge-resize-w {
         top: 0;
         bottom: 0;
         width: 8px;
@@ -464,10 +489,10 @@
             background: @colColor;
         }
     }
-    .column > .ui-resizable-e {
+    .column > .ge-resize-e {
         right: -1px;
     }
-    .column > .ui-resizable-w {
+    .column > .ge-resize-w {
         left: -1px;
     }
 
@@ -479,13 +504,13 @@
         font-size: 11px;
         color: @colTextColor;
     }
-    .column.ui-resizable-resizing > .ge-tools-drawer > .ge-resize-size {
+    .column.ge-resizing > .ge-tools-drawer > .ge-resize-size {
         display: block;
     }
 }
 
 /* The handle belongs to editing, and never to the output */
-.ge-canvas:not(.ge-editing) .ui-resizable-handle {
+.ge-canvas:not(.ge-editing) .ge-resize-handle {
     display: none;
 }