From: Vincent Vanwaelscappel Date: Thu, 8 Dec 2022 08:50:30 +0000 (+0100) Subject: wip #5531 @2 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a1a91b9dc4daad1e85c32afba4f6b57c881c0d4b;p=fluidbook-toolbox.git wip #5531 @2 --- diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js index b4c0b167d..8ada98b03 100644 --- 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('
'); + }); + + 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 331b68a72..df0fe596a 100644 --- 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 f71cf7a5d..5202e0b01 100644 --- 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 b3ef3d1f9..4b95ad906 100644 --- 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')
@@ -151,7 +157,7 @@ var SETTINGS = @json($settings); + src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"> @endpush @push('linkeditor_styles')