From e8da49137b056b1975cc59c8d7ed79e48f18d562 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 13 Dec 2022 19:12:34 +0100 Subject: [PATCH] wip #5645 @3 --- package-lock.json | 2 +- resources/linkeditor/js/linkeditor.js | 41 ++++++++++- resources/linkeditor/js/linkeditor.links.js | 68 +++++++++++++++++++ .../linkeditor/style/inc/_contextmenu.sass | 8 +++ resources/linkeditor/style/style.sass | 1 + .../link_editor.blade.php | 4 ++ 6 files changed, 122 insertions(+), 2 deletions(-) create mode 100644 resources/linkeditor/style/inc/_contextmenu.sass diff --git a/package-lock.json b/package-lock.json index a2037b847..1c3654d12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "FluidbookToolbox", + "name": "application", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 267fe243b..ff87fb93a 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -35,6 +35,8 @@ window.key.filter = function (event) { require('jquery.scrollto'); require('jquery-contextmenu'); +import 'jquery-contextmenu/dist/jquery.contextMenu.css'; + require('jquery-form'); require('spectrum-colorpicker'); import 'spectrum-colorpicker/spectrum.css'; @@ -66,6 +68,8 @@ function LinkEditor() { this.editorRect = null; this.currentPage = -1; + this.rightClick = false; + this.dimensionProperties = ['left', 'top', 'width', 'height']; this.init(); @@ -73,6 +77,8 @@ function LinkEditor() { LinkEditor.prototype = { init: function () { + var $this = this; + this.toolbar = new LinkeditorToolbar(this); this.resize = new LinkeditorResize(this); this.rulers = new LinkeditorRulers(this); @@ -108,6 +114,22 @@ LinkEditor.prototype = { initEvents: function () { var $this = this; + + $(document).on('mousedown', '*', function (e) { + $this.rightClick = e.which !== 1; + return true; + }); + + $(document).on('mouseup', '*', function (e) { + if ($this.rightClick) { + setTimeout(function () { + $this.rightClick = false; + }, 100); + } + $this.rightClick = false; + return true; + }); + $(window).on('hashchange', function () { $this.changePage(); }); @@ -133,6 +155,7 @@ LinkEditor.prototype = { } $this.rulers.moveRuler(); }); + $(window).on('keyup', function (e) { if (e.keyCode == 32) { $this.zoom.resetZoomDrag(); @@ -144,8 +167,11 @@ LinkEditor.prototype = { }); $(document).on('mousedown', "#linkeditor-editor", function (e) { - var deselectAll = true; $this.setMouseCoordinates(e); + if ($this.rightClick) { + return true; + } + var deselectAll = true; if ($(this).hasClass('duplicate')) { $this.links.duplicateLinkClick(); return; @@ -172,11 +198,18 @@ LinkEditor.prototype = { }); $(window).on('mousemove', function (e) { + $this.setMouseCoordinates(e); + if ($this.rightClick) { + return true; + } $this.updateMousePosition(e); }); $(window).on('mouseup', function (e) { $this.setMouseCoordinates(e); + if ($this.rightClick) { + return true; + } $this.panels.mouseup(); $this.zoom.mouseUp(); $this.rulers.mouseUp(); @@ -198,6 +231,9 @@ LinkEditor.prototype = { width: this.fw, height: this.ph }); + this.links.initEvents(); + + this.resize.resize(); this.changePage(); }, @@ -305,6 +341,9 @@ LinkEditor.prototype = { if (e !== undefined) { this.setMouseCoordinates(e); } + if (this.rightClick) { + return; + } this.panels.moveHandle(); this.rulers.updateMousePositionRulers(); diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 0a64a14d5..9144f6477 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -15,8 +15,15 @@ var LinkeditorLinks = function (linkeditor) { LinkeditorLinks.prototype = { init: function () { + + }, + + initEvents: function () { let $this = this; $(document).on('mousedown', '.link .corners div', function (e) { + if ($this.linkeditor.rightClick) { + return true; + } e.preventDefault(); e.stopPropagation(); $this.deselectAllLinks(); @@ -26,6 +33,9 @@ LinkeditorLinks.prototype = { }); $(document).on('mousedown', '.link', function (e) { + if ($this.linkeditor.rightClick) { + return true; + } e.preventDefault(); e.stopPropagation(); if (!$(this).hasClass('selected')) { @@ -40,6 +50,7 @@ LinkeditorLinks.prototype = { key('ctrl+a', function () { $this.selectAll(); + return false; }); key('del', function () { $this.deleteSelection(); @@ -81,6 +92,63 @@ LinkeditorLinks.prototype = { } }); + $.contextMenu({ + selector: '#linkeditor-canvas,.link', + + events: { + preShow: function (e) { + if ($(e).is('.link:not(.selected)')) { + $this.deselectAllLinks(); + $this.selectLink(e); + } + }, + }, + build: function ($triggerElement, e) { + var res = { + callback: function () { + + } + }; + var selection = $(".link.selected"); + var multiple = selection.length > 1; + var hasSelection = selection.length > 0; + + res.items = { + 'select_all': { + isHtmlName: true, + name: TRANSLATIONS.select_all + ' Ctrl+A', + callback: function () { + $this.selectAll(); + }, + } + }; + if (hasSelection && !multiple && selection.is('[fb-type=6]')) { + res.items = $.extend(res.items, { + 'sep_image_link': '---------', + "image_link": { + isHtmlName: true, + name: TRANSLATIONS.edit_image_link + ' Ctrl+L', callback: function () { + $this.linkeditor.changePage(selection.attr('fb-uid')); + } + }, + }); + } + if (hasSelection) { + res.items = $.extend(res.items, { + 'sep0': '---------', + "delete": { + isHtmlName: true, + name: (multiple ? TRANSLATIONS.delete_selection : TRANSLATIONS.delete_link) + ' Del', + callback: function () { + $this.deleteSelection(); + } + }, + }); + } + return res; + }, + }); + setInterval(function () { $this.checkLastSelectedLink(); }, 250); diff --git a/resources/linkeditor/style/inc/_contextmenu.sass b/resources/linkeditor/style/inc/_contextmenu.sass new file mode 100644 index 000000000..3894a2855 --- /dev/null +++ b/resources/linkeditor/style/inc/_contextmenu.sass @@ -0,0 +1,8 @@ +.context-menu-item + kbd + float: right + margin-left: 20px + border-radius: 2px + border: 1px solid currentColor + padding: 2px 4px + opacity: 0.6 diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass index b53c01da4..fb133a7a8 100644 --- a/resources/linkeditor/style/style.sass +++ b/resources/linkeditor/style/style.sass @@ -140,4 +140,5 @@ body, #linkeditor, html @import "inc/_form" @import "inc/_versions" @import "inc/_popup" +@import "inc/_contextmenu" diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index 6b61ceec5..dc67a0c34 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -24,6 +24,10 @@ 'before_restore_message'=>__("Sauvegarde avant la restauration des liens"), 'restore_version_tooltip'=>__('Restaurer cette version'), 'export_version_tooltip'=>__('Exporter les liens au format xlsx'), + 'delete_link'=>__('Supprimer le lien'), + 'edit_image_link'=>__('Editer les liens de l\'image'), + 'delete_selection'=>__('Supprimer la sélection'), + 'select_all'=>__('Tout sélectionner'), ]; $rulers=!count($rulers)?'{}':json_encode($rulers); -- 2.39.5