wip #5531 @2

diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js
index b4c0b167d142f6d8adf95a8ea47e7387dc063ada..8ada98b0373430af412098392b988f96ebc4b20c 100644 (file)
--- a/resources/linkeditor/js/linkeditor.panels.js
+++ b/resources/linkeditor/js/linkeditor.panels.js
@@ -1,26 +1,32 @@
 function LinkeditorPanels(linkeditor) {
     this.linkeditor = linkeditor;
-    this.sides = ['left', 'right'];
+
     this.maxWidth = 70;
     this.minWidth = 7;
+    this.defaultWidth = 15;
     this.thresholdToggle = 3;
 }
 
 LinkeditorPanels.prototype = {
     init: function () {
         var $this = this;
-        $.each(this.sides, function (k, side) {
-            var tool = $this.linkeditor.settings.get(side + '_tool');
-            var open = $this.linkeditor.settings.get(tool + '_open');
-            var width = $this.normalizeWidth($this.linkeditor.settings.get(tool + '_width'));
-            var icon = $("#linkeditor-icon-" + tool);
-            var panelContainer = $("#linkeditor-" + side + '-panel').data('tool', tool);
-            panelContainer.append($("#linkeditor-panel-" + tool));
+        //this.linkeditor.settings.set('panels_layout', {left: ['layers', 'versions'], right: ['form']})
+        this.sides = this.linkeditor.settings.get('panels_layout', {left: ['layers', 'versions'], right: ['form']});
+        $.each(this.sides, function (side, panels) {
+            var panelsContainer = $("#linkeditor-" + side + '-panel');
+            panelsContainer.data('width', $this.normalizeWidth($this.linkeditor.settings.get(side + '_width', $this.defaultWidth)));
+
+            $.each(panels, function (k, panel) {
+                $("#linkeditor-" + side + " nav").append($("#linkeditor-icon-" + panel));
+                panelsContainer.append('<div id="linkeditor-panel-' + panel + '" data-panel="' + panel + '" class="linkeditor-panel"></div>');
+            });
+
+            var tool = $this.linkeditor.settings.get(side + '_tool', panels[0]);
+            var open = $this.linkeditor.settings.get(side + '_open', side === 'right');
+
             if (open) {
-                icon.addClass('active');
-                panelContainer.addClass('open');
+                $this.setPanelState(tool, true);
             }
-            panelContainer.attr('data-width', width);
         });
         this.linkeditor.resize.resize();
         $(document).on('mousedown', ".linkeditor-sidebar .handle", function (e) {
@@ -36,15 +42,16 @@ LinkeditorPanels.prototype = {
         $(".linkeditor-sidebar .handle.dragging").each(function () {
             let cssWidth;
             let sidebar = $(this).closest('.linkeditor-sidebar');
-            if (sidebar.data('side') === 'left') {
+            let side = sidebar.data('side');
+            if (side === 'left') {
                 cssWidth = $this.linkeditor.mx - 49;
             } else {
                 cssWidth = $this.linkeditor.resize.ww - 49 - $this.linkeditor.mx;
             }
-            let panel = $(sidebar).find('.linkeditor-panel');
+            let panel = $(sidebar).find('.linkeditor-panel-side');
             let relativeWidth = 100 * (cssWidth / $this.linkeditor.resize.ww);
 
-            let tool = panel.data('tool');
+            let tool = $this.linkeditor.settings.get(side + '_tool');
             // Open/close when drag&drop
             if (relativeWidth < $this.thresholdToggle) {
                 // Close
@@ -55,12 +62,15 @@ LinkeditorPanels.prototype = {
 
             let width = $this.normalizeWidth(relativeWidth);
             panel.data('width', width);
-            $this.linkeditor.settings.set(tool + '_width', width);
+            $this.linkeditor.settings.set(side + '_width', width);
             $this.linkeditor.resize.resize();
         });
     },
 
     normalizeWidth: function (w) {
+        if (w === undefined || w === null || w === '') {
+            w = this.defaultWidth;
+        }
         return Math.max(this.minWidth, Math.min(w, this.maxWidth));
     },
 
@@ -69,7 +79,7 @@ LinkeditorPanels.prototype = {
     },
 
     resize: function (ww) {
-        $('.linkeditor-panel.open').each(function () {
+        $('.linkeditor-panel-side.open').each(function () {
             var dw = parseFloat($(this).data('width'));
             if (isNaN(dw)) {
                 return;
@@ -79,6 +89,9 @@ LinkeditorPanels.prototype = {
         });
     },
 
+    toggleVersions: function () {
+        this.togglePanel('versions');
+    },
     toggleLayers: function () {
         this.togglePanel('layers');
     },
@@ -89,8 +102,11 @@ LinkeditorPanels.prototype = {
         this.setPanelState(panel, 'toggle');
     },
     setPanelState: function (panel, newState) {
-        let container = $("#linkeditor-panel-" + panel).closest('.linkeditor-panel');
-        var currentState = container.hasClass('open');
+        var $this = this;
+        var panelDiv = $('#linkeditor-panel-' + panel);
+        let container = panelDiv.closest('.linkeditor-panel-side');
+        let side = panelDiv.closest('[data-side]').data('side');
+        var currentState = panelDiv.hasClass('open');
         if (currentState === newState) {
             return;
         }
@@ -98,14 +114,38 @@ LinkeditorPanels.prototype = {
             newState = !currentState;
         }
         var icon = $("#linkeditor-icon-" + panel);
+
+
         if (newState) {
-            container.addClass('open');
             icon.addClass('active');
+            panelDiv.addClass('open');
         } else {
-            container.removeClass('open');
             icon.removeClass('active');
+            panelDiv.removeClass('open');
+        }
+
+        // Close panels on the same side
+        if (newState) {
+            $(icon).closest('nav').find('[data-panel]').each(function () {
+                if ($(this).data('panel') === panel) {
+                    return;
+                }
+                $this.setPanelState($(this).data('panel'), false);
+            });
+        }
+
+        // Check if a panel is open on this side, if not, hide the panel
+        let sideOpen = $(container).children('.open').length > 0;
+        if (sideOpen) {
+            container.addClass('open');
+        } else {
+            container.removeClass('open');
+        }
+
+        if (newState) {
+            this.linkeditor.settings.set(side + '_tool', panel);
         }
-        this.linkeditor.settings.set(panel + '_open', newState);
+        this.linkeditor.settings.set(side + '_open', newState);
         this.linkeditor.resize.resize();
     },
 

diff --git a/resources/linkeditor/js/linkeditor.settings.js b/resources/linkeditor/js/linkeditor.settings.js
index 331b68a72ded40104e3348283aaea2cf25a7b70e..df0fe596ab562a1572c49a21b73c8511e4e88cab 100644 (file)
--- a/resources/linkeditor/js/linkeditor.settings.js
+++ b/resources/linkeditor/js/linkeditor.settings.js
@@ -9,20 +9,22 @@ LinkeditorSettings.prototype = {
         $.each(SETTINGS, function (k, v) {
             data['linkeditor_' + k] = v;
         });
-        Pace.ignore(function () {
-            $.ajax({
-                url: '/toolbox_setting', method: 'POST', data: {settings: data},
-            })
+
+        $.ajax({
+            url: '/toolbox_setting', method: 'POST', data: {settings: data},
         });
     },
 
-    get: function (key) {
+    get: function (key, defaultValue) {
         var res = SETTINGS[key];
         if (res === 'true') {
             res = true;
         } else if (res === 'false') {
             res = false;
         }
+        if (res === undefined || res === null) {
+            return defaultValue;
+        }
         return res;
     },
 

diff --git a/resources/linkeditor/style/panels.sass b/resources/linkeditor/style/panels.sass
index f71cf7a5d27dadb1ebe3437b927ae7f85815d653..5202e0b01e1b0ae65f1615b9164371ed44661af6 100644 (file)
--- a/resources/linkeditor/style/panels.sass
+++ b/resources/linkeditor/style/panels.sass
@@ -51,7 +51,7 @@
             background-color: #666
 
 
-    .linkeditor-panel
+    .linkeditor-panel-side
         display: none
         margin-left: $sidebar-icons-width
         margin-right: $sidebar-handle-width
@@ -67,6 +67,11 @@
         &.open
             display: block
 
+        .linkeditor-panel
+            display: none
+            &.open
+                display: block
+
     &#linkeditor-right
         border-width: 0 0 0 2px
 
@@ -81,6 +86,6 @@
             right: auto
             left: 0
 
-        .linkeditor-panel
+        .linkeditor-panel-side
             margin-left: $sidebar-handle-width
             margin-right: $sidebar-icons-width

diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index b3ef3d1f97860c2d1d51e112c281c1d052e7fbce..4b95ad906c18f6a5da61ae2817d22ebc8c87d1e3 100644 (file)
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -22,7 +22,11 @@
     $links=!count($links)?'{}':json_encode($links);
     /** @var \App\Models\User $user */
     $user=backpack_user();
-    $settings=['left_tool'=>'layers','layers_open'=>false,'layers_width'=>20,'right_tool'=>'form','form_open'=>true,'form_width'=>20];
+    $settings=[
+        'left_open'=>false, 'left_width'=>20,'left_tool'=>'layers',
+        'right_open'=>true,'right_width'=>20,'right_tool'=>'form',
+        'panels_layout'=>['left'=>['layers','versions'],'right'=>['form']]
+        ];
     foreach ($settings as $k=>$v) {
         $settings[$k]=$user->getToolboxSetting('linkeditor_'.$k,$v);
     }
@@ -33,20 +37,22 @@
     @include('fluidbook_publication.link_editor_icons')
     <div draggable="false" id="linkeditor">
         <div style="display: none" id="panels-setups">
-            <div id="linkeditor-panel-layers">
-            </div>
-            <div id="linkeditor-panel-form">
-            </div>
+            <a href="#" id="linkeditor-icon-layers" data-panel="layers" data-icon="layers"
+               data-action="panels.toggleLayers"
+               data-tooltip="{{__('Liste des liens')}} (F7)"
+               data-key="f7"></a>
+            <a href="#" id="linkeditor-icon-versions" data-panel="versions" data-action="panels.toggleVersions"
+               data-icon="wayback-machine"
+               data-tooltip="{{__('Restaurer une version précédente')}} (F6)" data-key="f6"></a>
+            <a href="#" id="linkeditor-icon-form" data-panel="form" data-icon="settings"
+               data-action="panels.toggleForm"
+               data-tooltip="{{__('Paramètres du lien')}} (F8)" data-key="f8"></a>
         </div>
         <aside id="linkeditor-left" class="linkeditor-sidebar" data-side="left">
             <nav id="linkeditor-left-icons">
-                <a href="#" id="linkeditor-icon-layers" data-icon="layers" data-action="panels.toggleLayers"
-                   data-tooltip="{{__('Liste des liens')}} (F7)"
-                   data-key="f7"></a>
-                <a href="#" id="linkeditor-icon-versions" data-action="panels.toggleVersions" data-icon="wayback-machine"
-                   data-tooltip="{{__('Restaurer une version précédente')}} (F6)" data-key="f6"></a>
+
             </nav>
-            <div id="linkeditor-left-panel" class="linkeditor-panel">
+            <div id="linkeditor-left-panel" class="linkeditor-panel-side">
 
             </div>
             <div class="handle"></div>
@@ -111,10 +117,10 @@
             </div>
         </div>
         <aside id="linkeditor-right" class="linkeditor-sidebar" data-side="right">
-            <nav id="linkeditor-right-icons">            <a href="#" id="linkeditor-icon-form" data-icon="settings" data-action="panels.toggleForm"
-                                                            data-tooltip="{{__('Paramètres du lien')}} (F8)"
-                                                            data-key="f8"></a></nav>
-            <div id="linkeditor-right-panel" class="linkeditor-panel"></div>
+            <nav id="linkeditor-right-icons">
+
+            </nav>
+            <div id="linkeditor-right-panel" class="linkeditor-panel-side"></div>
             <div class="handle"></div>
         </aside>
     </div>
@@ -151,7 +157,7 @@
         var SETTINGS = @json($settings);
     </script>
     <script
-        src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>
+            src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>
 @endpush
 @push('linkeditor_styles')
     <script>window._skipAutoTriggers = true;</script>