From 837f62241de59f253e3c7de57b049220ac967582 Mon Sep 17 00:00:00 2001
From: Vitaliy Dmytruk <vitaliy@mage2cloud.com>
Date: Wed, 6 Jan 2021 11:24:08 +0200
Subject: [PATCH] Section-mover to move section into content at System Config
 page It is used at Argento Theme Editor and SEO Suite

---
 .../web/css/system-config/section-mover.less  | 72 +++++++++++++++++
 .../web/js/system-config/section-mover.js     | 80 +++++++++++++++++++
 2 files changed, 152 insertions(+)
 create mode 100644 view/adminhtml/web/css/system-config/section-mover.less
 create mode 100644 view/adminhtml/web/js/system-config/section-mover.js

diff --git a/view/adminhtml/web/css/system-config/section-mover.less b/view/adminhtml/web/css/system-config/section-mover.less
new file mode 100644
index 0000000..39669f4
--- /dev/null
+++ b/view/adminhtml/web/css/system-config/section-mover.less
@@ -0,0 +1,72 @@
+.swissup-mover-tab {
+    display: none;
+
+    .swissup-mover-container & {
+        display: block;
+        background: none;
+        border-width: 0 !important;
+
+        .admin__page-nav-title {
+            text-transform: none;
+            border: solid #ccc;
+            border-width: 1px 0 0;
+            background: #f8f8f8;
+
+            &::after {
+                content: none;
+            }
+        }
+
+        &._show {
+            .admin__page-nav-title {
+                background: #f8f8f8;
+                border-width: 1px 0 1px;
+
+                &::after {
+                    content: none;
+                }
+            }
+        }
+
+        .admin__page-nav-item {
+            border-width: 0 !important;
+            margin: 0;
+
+            a {
+                display: block;
+                padding: 1.5rem;
+                margin: 1rem;
+                border-width: 0;
+                text-align: center;
+                border-radius: 5px;
+
+                .img-wrapper {
+                    img {
+                        vertical-align: top;
+                    }
+                }
+            }
+        }
+
+        &.admin__page-nav .admin__page-nav-items {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        &.admin__page-nav._collapsed._show ._collapsible + .admin__page-nav-items {
+            display: flex !important;
+        }
+    }
+}
+
+.swissup-mover-container {
+    .entry-edit-head {
+        display: none;
+    }
+
+    &:last-child {
+        .admin__page-nav-title {
+            border-width: 1px 0 1px;
+        }
+    }
+}
diff --git a/view/adminhtml/web/js/system-config/section-mover.js b/view/adminhtml/web/js/system-config/section-mover.js
new file mode 100644
index 0000000..a75b802
--- /dev/null
+++ b/view/adminhtml/web/js/system-config/section-mover.js
@@ -0,0 +1,80 @@
+define([
+    'jquery'
+], function ($) {
+    'use strict';
+
+    return function (options, element) {
+        /**
+         * [_updateTitle description]
+         */
+        function _updateTitle() {
+            var currentItem;
+
+            currentItem = $('._active', element).text();
+
+            if (currentItem) {
+                $('.admin__page-nav-title', element).html(
+                    options.title.selected.replace('{{itemName}}', currentItem)
+                );
+            } else {
+                $('.admin__page-nav-title', element).html(options.title.no);
+            }
+        }
+
+        /**
+         * Assign image to theme
+         */
+        function _assignImage() {
+            var itemTitle, image, html;
+
+            itemTitle = $(this).text().trim();
+            image = options.images ? options.images[itemTitle] : false;
+
+            if (image) {
+                html = '<div class="img-wrapper"><img src="{{image}}" width="240" /></div>';
+                $(this).prepend(html.replace('{{image}}', image));
+            }
+        }
+
+        /**
+         * [_activateItem description]
+         */
+        function _activateItem() {
+            $(options.itemToActivateWhenSelected).closest('.config-nav-block').collapsible('activate');
+            $(options.itemToActivateWhenSelected).addClass('_active');
+        }
+
+        /**
+         * Update section collapsible status
+         */
+        function _updateCollapsibleStatus() {
+            var currentItem;
+
+            if (typeof $(element).collapsible === 'function') {
+                currentItem = $('._active', element).text();
+
+                $('.admin__page-nav-items', element).css({
+                    display: 'flex'
+                });
+
+                if (currentItem) {
+                    $(element).collapsible('deactivate');
+                    $('.admin__page-nav-items', element).css({
+                        display: 'none'
+                    });
+                    _activateItem();
+                } else {
+                    $(element).collapsible('activate');
+                }
+            } else {
+                setTimeout(_updateCollapsibleStatus, 400);
+            }
+        }
+
+        $(element).detach();
+        $('a', element).each(_assignImage);
+        _updateTitle();
+        _updateCollapsibleStatus();
+        $(element).appendTo(options.destination);
+    };
+});