From: Vincent Vanwaelscappel Date: Wed, 14 Dec 2022 17:53:54 +0000 (+0100) Subject: wait #5648 @1.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ebe852f2bdb56162bc9e6b6e07a059da3da6ce2a;p=fluidbook-toolbox.git wait #5648 @1.5 --- diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 968f052d3..932a1182d 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -18,6 +18,7 @@ import LinkeditorPanels from './linkeditor.panels'; import LinkeditorForm from './linkeditor.form'; import LinkeditorVersions from './linkeditor.versions'; import LinkeditorPopup from './linkeditor.popup'; +import LinkeditorLayers from "./linkeditor.layers"; window.$ = window.jQuery = require('jquery'); window.key = require('keymaster-reloaded'); @@ -45,6 +46,7 @@ require('select2'); import 'select2/dist/css/select2.css'; import 'select2-bootstrap-theme/dist/select2-bootstrap.css'; + window.MD5 = require("crypto-js/md5"); $.ajaxSetup({ @@ -96,6 +98,7 @@ LinkEditor.prototype = { this.form = new LinkeditorForm(this); this.settings = new LinkeditorSettings(this); this.versions = new LinkeditorVersions(this); + this.layers = new LinkeditorLayers(this); this.popup = new LinkeditorPopup(this); this.initEvents(); diff --git a/resources/linkeditor/js/linkeditor.layers.js b/resources/linkeditor/js/linkeditor.layers.js new file mode 100644 index 000000000..5ecc89234 --- /dev/null +++ b/resources/linkeditor/js/linkeditor.layers.js @@ -0,0 +1,72 @@ +function LinkeditorLayers(linkeditor) { + this.linkeditor = linkeditor; +} + +LinkeditorLayers.prototype = { + init: function () { + var $this = this; + + this.container = $("#linkeditor-panel-layers"); + this.maskCheckEvents = false; + + $(document).on('change', "#linkeditor-panel-layers :checkbox", function () { + if ($this.maskCheckEvents) { + return; + } + var link=$('#linkeditor-links [fb-uid="'+$(this).attr('name')+'"]'); + if($(this).prop('checked')){ + $this.linkeditor.links.selectLink(link); + }else{ + $this.linkeditor.links.deselectLink(link); + } + + }); + + this.update(); + }, + + update: function () { + if (this.container === undefined) { + return; + } + if (!this.container.hasClass('open')) { + return; + } + var $this = this; + this.container.html(''); + $('#linkeditor-links .link:not(.pendingCreate)').each(function () { + let type = $(this).attr('fb-type'); + let dest; + switch (type) { + case '6': + dest = $(this).attr('fb-alternative'); + break; + default: + dest = $(this).attr('fb-to'); + } + if (dest == '') { + dest = '' + TRANSLATIONS.empty + ''; + } + var l = ''; + $this.container.append(l); + }); + this.updateSelection(); + }, + + updateSelection() { + var $this = this; + this.maskCheckEvents = true; + setTimeout(function () { + $this.maskCheckEvents = false; + }, 100); + $('#linkeditor-links .link').each(function () { + let checkbox = $this.container.find('input[name=' + $(this).attr('fb-uid') + ']'); + checkbox.prop('checked', $(this).is('.selected')); + }); + }, + + resize: function () { + + }, +}; +module.exports = LinkeditorLayers; diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 2fae748fe..6e9cc8d31 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -97,14 +97,20 @@ LinkeditorLinks.prototype = { }); $.contextMenu({ - selector: '#linkeditor-canvas,.link', - + selector: '#linkeditor-canvas,.link,#linkeditor-panel-layers, #linkeditor-panel-layers label', events: { preShow: function (e) { if ($(e).is('.link:not(.selected)')) { $this.deselectAllLinks(); $this.selectLink(e); } + if ($(e).is('#linkeditor-panel-layers label')) { + let input = $(e).find('input'); + if (!input.prop('checked')) { + $this.deselectAllLinks(); + $this.selectLink($('.link[fb-uid=' + input.attr('name') + ']')); + } + } }, }, build: function ($triggerElement, e) { @@ -126,16 +132,25 @@ LinkeditorLinks.prototype = { }, } }; - if (hasSelection && !multiple && selection.is('[fb-type=6]')) { + if (hasSelection && !multiple) { res.items = $.extend(res.items, { - 'sep_image_link': '---------', - "image_link": { + 'sep_link': '---------', + 'copy_link_id': { + isHtmlName: true, + name: TRANSLATIONS.copy_link_id, + callback: function () { + navigator.clipboard.writeText(selection.attr('fb-uid')); + }, + } + }); + if (selection.is('[fb-type=6]')) { + res.items.image_link = { isHtmlName: true, name: TRANSLATIONS.edit_image_link + ' Ctrl+L', callback: function () { $this.openImageLink(); } - }, - }); + }; + } } if (hasSelection) { res.items = $.extend(res.items, { @@ -173,6 +188,7 @@ LinkeditorLinks.prototype = { } this.deselectAllLinks(); this.selectLink($(link)); + this.linkeditor.layers.updateSelection(); this.linkeditor.form.focusAndSelectDestinationField(); }, @@ -195,7 +211,7 @@ LinkeditorLinks.prototype = { if (this.getCurrentSelection().length === 0) { return this.selectFirstLink(); } - return this.selectLinkAndSelectToField(this._getLinkByIndexOffset(1)); + this.selectLinkAndSelectToField(this._getLinkByIndexOffset(1)); }, _getLinkByIndexOffset(way) { @@ -221,6 +237,7 @@ LinkeditorLinks.prototype = { $(link).addClass('pendingCreate'); this.startResizeLink('se'); this.linkeditor.form.updateLinkForm(); + this.linkeditor.layers.update(); }, startResizeLink: function (corner) { @@ -369,6 +386,7 @@ LinkeditorLinks.prototype = { LINKS[id][k] = v; }); this.linkeditor.rulers.updateMagnetValues(); + this.linkeditor.layers.update(); }, startDragLink: function () { @@ -435,6 +453,7 @@ LinkeditorLinks.prototype = { this.linkeditor.form.updateLinkForm(); this.lastSelectedLink = l; + this.linkeditor.layers.updateSelection(); }, checkLastSelectedLink: function () { @@ -461,6 +480,11 @@ LinkeditorLinks.prototype = { this.linkeditor.form.saveFormDataInLink(); this.linkeditor.form.updateLinkForm(); $(".link.selected").removeClass('selected'); + this.linkeditor.layers.updateSelection(); + }, + + deselectLink: function (link) { + $(link).removeClass('selected'); }, offsetSelectedLinks: function (dim, value) { @@ -512,6 +536,7 @@ LinkeditorLinks.prototype = { } $this.addLink(link, side); }); + this.linkeditor.layers.update(); }, addLink: function (link) { @@ -568,6 +593,7 @@ LinkeditorLinks.prototype = { this.deselectAllLinks(); this.selectLink($(link)); this.linkeditor.form.updateFormData(); + this.linkeditor.layers.update(); return $(link); }, @@ -601,6 +627,7 @@ LinkeditorLinks.prototype = { if (triggerChange === true) { this.linkeditor.hasChanged(); } + this.linkeditor.layers.update(); }, selectAll: function () { @@ -608,6 +635,7 @@ LinkeditorLinks.prototype = { $('.link').each(function () { $this.selectLink($(this)); }); + this.linkeditor.layers.updateSelection(); }, clear: function () { diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js index d0daa84a0..ec8aaabb8 100644 --- a/resources/linkeditor/js/linkeditor.panels.js +++ b/resources/linkeditor/js/linkeditor.panels.js @@ -18,12 +18,12 @@ LinkeditorPanels.prototype = { $.each(panels, function (k, panel) { $("#linkeditor-" + side + " nav").append($("#linkeditor-icon-" + panel)); - if($('#linkeditor-panel-' + panel).length>0){ + if ($('#linkeditor-panel-' + panel).length > 0) { panelsContainer.append($('#linkeditor-panel-' + panel)); - }else { + } else { panelsContainer.append('
'); } - $('#linkeditor-panel-' + panel).attr('data-panel',panel).addClass('linkeditor-panel'); + $('#linkeditor-panel-' + panel).attr('data-panel', panel).addClass('linkeditor-panel'); }); var tool = $this.linkeditor.settings.get(side + '_tool', panels[0]); @@ -33,6 +33,9 @@ LinkeditorPanels.prototype = { $this.setPanelState(tool, true); } }); + + this.linkeditor.layers.init(); + this.linkeditor.resize.resize(); $(document).on('mousedown', ".linkeditor-sidebar .handle", function (e) { $this.linkeditor.setMouseCoordinates(e); @@ -106,6 +109,7 @@ LinkeditorPanels.prototype = { }, togglePanel: function (panel) { this.setPanelState(panel, 'toggle'); + this.linkeditor.layers.update(); }, setPanelState: function (panel, newState) { var $this = this; @@ -151,6 +155,7 @@ LinkeditorPanels.prototype = { if (newState) { this.linkeditor.settings.set(side + '_tool', panel); } + this.linkeditor.layers.update(); this.linkeditor.settings.set(side + '_open', newState); this.linkeditor.resize.resize(); }, diff --git a/resources/linkeditor/style/inc/_contextmenu.sass b/resources/linkeditor/style/inc/_contextmenu.sass index 3894a2855..6194be854 100644 --- a/resources/linkeditor/style/inc/_contextmenu.sass +++ b/resources/linkeditor/style/inc/_contextmenu.sass @@ -1,3 +1,6 @@ +.context-menu-list + z-index: 100000 !important + .context-menu-item kbd float: right diff --git a/resources/linkeditor/style/inc/_form.sass b/resources/linkeditor/style/inc/_form.sass index b21013dfa..274c210d5 100644 --- a/resources/linkeditor/style/inc/_form.sass +++ b/resources/linkeditor/style/inc/_form.sass @@ -27,6 +27,31 @@ textarea, input[type="text"], input[type="number"], input[type="email"], input[t input[type="checkbox"] margin-right: 8px + appearance: none + position: relative + cursor: pointer + + &::before + content: '' + display: inline-block + width: 14px + height: 14px + border: 1px solid currentColor + border-radius: 2px + vertical-align: baseline + + &:checked + &::after + content: '' + display: block + width: 12px + height: 12px + position: absolute + top: 1px + left: 1px + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) + background-color: currentColor + input[type=number] &, &:hover diff --git a/resources/linkeditor/style/inc/_layers.sass b/resources/linkeditor/style/inc/_layers.sass new file mode 100644 index 000000000..32c16035d --- /dev/null +++ b/resources/linkeditor/style/inc/_layers.sass @@ -0,0 +1,19 @@ +#linkeditor-panel-layers + font-size: 11px + color: $color + @include dark-theme + color: $color-dark + + label + display: block + border-bottom: 1px solid currentColor + padding: 5px 10px + cursor: pointer + + input + color: #fff + position: relative + top: 2px + + &::before + border: 0 diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass index fb133a7a8..be8d89153 100644 --- a/resources/linkeditor/style/style.sass +++ b/resources/linkeditor/style/style.sass @@ -141,4 +141,5 @@ body, #linkeditor, html @import "inc/_versions" @import "inc/_popup" @import "inc/_contextmenu" +@import "inc/_layers" diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index 10d2e0a73..a398e87f3 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -46,6 +46,8 @@ 'delete_selection'=>__('Supprimer la sélection'), 'select_all'=>__('Tout sélectionner'), 'error_open_image_link'=>__('Impossible d\'ajouter des liens au contenu de ce lien'), + 'empty'=>__('Vide'), + 'copy_link_id'=>__('Copier l\'identifiant unique'), ]; $rulers=!count($rulers)?'{}':json_encode($rulers); @@ -264,7 +266,7 @@ background-color: {{\Cubist\Util\Graphics\Color::colorToCSS($type['color'],0.25)}}; } - .linkeditor-linktype[data-type="{{$type['type']}}"]::before { + .linkeditor-linktype[data-type="{{$type['type']}}"]::before, label[fb-type="{{$type['type']}}"] input[type="checkbox"]::before { background-color: {{$type['color']}}; } @endif