wait #5648 @1.5

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 968f052d3d34790693ebca4abe8b5fe075162582..932a1182dc9d652e814eb08f875747ad369fdbb3 100644 (file)
--- 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 (file)
index 0000000..5ecc892
--- /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 = '<em>' + TRANSLATIONS.empty + '</em>';
+            }
+            var l = '<label class="layer" fb-type="' + type + '"><input name="' + $(this).attr('fb-uid') + '" type="checkbox"> ' + dest + '</label>';
+            $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 2fae748fed59d7b79391dab06ba403c027b0d9cc..6e9cc8d31e460fc070b68db494aa4ed17c29a1bc 100644 (file)
--- 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 + ' <kbd>Ctrl+L</kbd>', 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 d0daa84a0dd4df59fb9b23c5d2434cfc977ae28e..ec8aaabb856cb8e592ccf3085617f3b9890e0350 100644 (file)
--- 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('<div id="linkeditor-panel-' + panel + '"></div>');
                 }
-                $('#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 3894a2855cf0ddf2de71c74b90ada5fe9f1b0bda..6194be854efef48370f676c3ca95fd303a0fc44c 100644 (file)
--- 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 b21013dfaad768f22c4c7f68eda8816e20cb0461..274c210d5aff1bd76877b8843b5df7e1204ea27b 100644 (file)
--- 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 (file)
index 0000000..32c1603
--- /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 fb133a7a818a1802ce0349c64764bdc58e283278..be8d891535678ac1d49edd76a102cc486fb29089 100644 (file)
--- 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 10d2e0a731ce48c9dbdea11b954d8ca7d29d744f..a398e87f3d4763d812624bf768728d8181b1cd8e 100644 (file)
--- 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