From 742c2ca8e7502f5fc32784c0395a3dfa7734ee4d Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 14 Oct 2022 20:29:12 +0200 Subject: [PATCH] wait 5531 @2 --- resources/linkeditor/js/linkeditor.js | 3 + resources/linkeditor/js/linkeditor.loader.js | 6 +- resources/linkeditor/js/linkeditor.panels.js | 73 ++++++++++++++++--- .../link_editor.blade.php | 6 +- 4 files changed, 73 insertions(+), 15 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 0c9c34be9..cdab03804 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -129,6 +129,7 @@ LinkEditor.prototype = { $this.zoom.mouseUp(); $this.rulers.mouseUp(); $this.links.mouseUp(); + $this.panels.mouseup(); }); if (this.single) { @@ -238,11 +239,13 @@ LinkEditor.prototype = { this.setMouseCoordinates(e); } + this.panels.moveHandle(); this.rulers.updateMousePositionRulers(); this.rulers.moveRuler(); this.links.moveDragLink(); this.links.moveResizeLink(); this.zoom.updateMousePosition(); + }, setMouseCoordinates: function (e) { diff --git a/resources/linkeditor/js/linkeditor.loader.js b/resources/linkeditor/js/linkeditor.loader.js index 00624cd92..3c8049c20 100644 --- a/resources/linkeditor/js/linkeditor.loader.js +++ b/resources/linkeditor/js/linkeditor.loader.js @@ -28,15 +28,15 @@ LinkeditorLoader.prototype = { preloadPages: function () { let j = 1; var $this = this; - for (let i = Math.max(1, this.linkeditor.currentPage - 4); i <= Math.min(this.linkeditor.currentPage + 16, FLUIDBOOK_DATA.settings.pages); i++) { + for (let i = Math.max(1, this.linkeditor.currentPage - 2); i <= Math.min(this.linkeditor.currentPage + 6, FLUIDBOOK_DATA.settings.pages); i++) { if ($('.preload[data-page="' + i + '"]').length >= 1) { continue; } setTimeout(function () { var c = $('
'); $("#linkeditor-preload").append(c); - $this._loadPage(i, c); - }, j * 500); + $this._loadPage(i, c, true); + }, j * 1500); j++; } }, diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js index 694c382fb..fe3d02c02 100644 --- a/resources/linkeditor/js/linkeditor.panels.js +++ b/resources/linkeditor/js/linkeditor.panels.js @@ -1,19 +1,20 @@ function LinkeditorPanels(linkeditor) { this.linkeditor = linkeditor; this.sides = ['left', 'right']; + this.maxWidth = 70; + this.minWidth = 7; + 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'); - console.log(open); - var width = Math.min(70, Math.max(12, $this.linkeditor.settings.get(tool + '_width'))); + var width = $this.normalizeWidth($this.linkeditor.settings.get(tool + '_width')); var icon = $("#linkeditor-icon-" + tool); - var panelContainer = $("#linkeditor-" + side + '-panel') + var panelContainer = $("#linkeditor-" + side + '-panel').data('tool', tool); $("#linkeditor-" + side + '-icons').append(icon); panelContainer.append($("#linkeditor-panel-" + tool)); @@ -24,6 +25,49 @@ LinkeditorPanels.prototype = { panelContainer.attr('data-width', width); }); this.linkeditor.resize.resize(); + $(document).on('mousedown', ".linkeditor-sidebar .handle", function (e) { + $this.linkeditor.setMouseCoordinates(e); + $(this).addClass('dragging'); + return false; + }); + + }, + + moveHandle: function () { + var $this = this; + $(".linkeditor-sidebar .handle.dragging").each(function () { + let cssWidth; + let sidebar = $(this).closest('.linkeditor-sidebar'); + if (sidebar.data('side') === 'left') { + cssWidth = $this.linkeditor.mx - 49; + } else { + cssWidth = $this.linkeditor.resize.ww - 49 - $this.linkeditor.mx; + } + let panel = $(sidebar).find('.linkeditor-panel'); + let relativeWidth = 100 * (cssWidth / $this.linkeditor.resize.ww); + + let tool = panel.data('tool'); + // Open/close when drag&drop + if (relativeWidth < $this.thresholdToggle) { + // Close + $this.setPanelState(tool, false); + } else { + $this.setPanelState(tool, true); + } + + let width = $this.normalizeWidth(relativeWidth); + panel.data('width', width); + $this.linkeditor.settings.set(tool + '_width', width); + $this.linkeditor.resize.resize(); + }); + }, + + normalizeWidth: function (w) { + return Math.max(this.minWidth, Math.min(w, this.maxWidth)); + }, + + mouseup: function () { + $(".linkeditor-sidebar .handle.dragging").removeClass('dragging'); }, resize: function (ww) { @@ -36,6 +80,7 @@ LinkeditorPanels.prototype = { $(this).css('width', w); }); }, + toggleLayers: function () { this.togglePanel('layers'); }, @@ -43,18 +88,28 @@ LinkeditorPanels.prototype = { this.togglePanel('form'); }, togglePanel: function (panel) { + this.setPanelState(panel, 'toggle'); + }, + setPanelState: function (panel, newState) { let container = $("#linkeditor-panel-" + panel).closest('.linkeditor-panel'); - container.toggleClass('open'); + var currentState = container.hasClass('open'); + if (currentState === newState) { + return; + } + if (newState === 'toggle') { + newState = !currentState; + } var icon = $("#linkeditor-icon-" + panel); - var opened = container.hasClass('open'); - if (opened) { + if (newState) { + container.addClass('open'); icon.addClass('active'); } else { + container.removeClass('open'); icon.removeClass('active'); } - this.linkeditor.settings.set(panel + '_open', opened); + this.linkeditor.settings.set(panel + '_open', newState); this.linkeditor.resize.resize(); - } + }, }; module.exports = LinkeditorPanels; diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index b94d4c1f8..b3c9d1115 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -33,14 +33,14 @@ data-tooltip="{{__('Liste des liens')}} (F7)" data-key="f7">
-