[IMP] website: add quick move buttons for sections and columns

This commit adds buttons to move sections up or down and to move columns
left or right, which is more user-friendly than drag-and-drop in some
cases.

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2088265

1 files changed, 33 insertions, 0 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index ea8e048b9fe..8d26b20038d 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1848,4 +1848,37 @@ options.registry.SectionStretch = options.Class.extend({
         this.$el.find('[data-toggle-container-fluid]').toggleClass('active', isFluid);
     },
 });
+
+/**
+ * Allows snippets to be moved before the preceding element or after the following.
+ */
+options.registry.SnippetMove = options.Class.extend({
+
+    /**
+     * @override
+     */
+    isTopOption: function () {
+        return true;
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Moves the snippet around.
+     *
+     * @see this.selectClass for parameters
+     */
+    moveSnippet: function (previewMode, value, $opt) {
+        switch (value) {
+            case 'prev':
+                this.$target.prev().before(this.$target);
+                break;
+            case 'next':
+                this.$target.next().after(this.$target);
+                break;
+        }
+    },
+});
 });