From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 22 May 2025 15:13:15 +0000 (+0200)
Subject: wip #7467 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3214dae1245f456578c93844247251d4a80136a9;p=fluidbook-toolbox.git

wip #7467 @4
---

diff --git a/resources/linkeditor-stable/js/linkeditor.accessibility.js b/resources/linkeditor-stable/js/linkeditor.accessibility.js
new file mode 100644
index 000000000..08224ba8e
--- /dev/null
+++ b/resources/linkeditor-stable/js/linkeditor.accessibility.js
@@ -0,0 +1,129 @@
+function LinkeditorAccessibility(linkeditor) {
+    this.linkeditor = linkeditor;
+}
+
+LinkeditorAccessibility.prototype = {
+    init: function () {
+        var $this = this;
+
+        this.container = $("#linkeditor-panel-accessibility");
+        console.log(this.container);
+        this.maskCheckEvents = false;
+
+        $(document).on('click', '#linkeditor-panel-accessibility a.lock', function () {
+            let uid = $(this).closest('.layer').find('input').attr('name');
+            $this.linkeditor.links.locks.toggleLock(uid);
+            return false;
+        });
+
+        $(document).on('click', "#linkeditor-panel-accessibility label", function (e) {
+            if ($this.maskCheckEvents) {
+                return false;
+            }
+            let uid = $(this).find('input').attr('name');
+            let checked = $(this).find('input').prop('checked');
+            var link = $('#linkeditor-links [fb-uid="' + uid + '"]');
+
+            if (!e.ctrlKey) {
+                $this.linkeditor.links.deselectAllLinks();
+                $this.linkeditor.links.selectLink(link);
+            } else {
+                if (checked) {
+                    $this.linkeditor.links.deselectLink(link);
+                } else {
+                    $this.linkeditor.links.selectLink(link);
+                }
+            }
+
+            $this.linkeditor.form.updateLinkForm();
+            return false;
+        });
+
+        $(document).on('click', '#linkeditor-panel-accessibility label span.uid', function () {
+            navigator.clipboard.writeText($(this).attr('fb-uid'));
+            let tippy = $(this).data('tippyinstance');
+            tippy.setContent(TRANSLATIONS.id_copied);
+            tippy.show();
+            return false;
+        });
+
+        this.update();
+    },
+
+    update: function () {
+        if (this.container === undefined) {
+            return;
+        }
+        if (!this.container.hasClass('open')) {
+            return;
+        }
+        var $this = this;
+        this.container.html('');
+        var accessibility = [];
+        $('#linkeditor-links .link:not(.pendingCreate)').each(function () {
+            let type = $(this).attr('fb-type');
+            let dest = $(this).attr('fb-to');
+            if (dest === '') {
+                dest = '<em>' + TRANSLATIONS.empty + '</em>';
+            }
+            var l = '<div class="layer" data-locked="' + ($this.linkeditor.links.locks.isLocked($(this).attr('fb-uid')) ? '1' : '0') + '">';
+            l += '<label class="layer" fb-type="' + type + '">';
+            l += '<input name="' + $(this).attr('fb-uid') + '" type="checkbox"> ';
+            l += dest;
+            l += '<span data-tooltip="' + TRANSLATIONS.click_to_copy_id + '" data-uid="' + $(this).attr('fb-uid') + '" class="uid">#' + $(this).attr('fb-uid') + '</span>';
+            l += '</label>';
+            l += '<a href="#" class="lock" data-icon="lock" data-tooltip="' + TRANSLATIONS['lock'] + '"></a>';
+            l += '</div>';
+            let d = parseInt($(this).attr('fb-calc-depth'));
+            var m = 1;
+            if (d >= 30 && d < 50) {
+                m = 10;
+            }
+            let level = Math.floor((m * d) / 10) / m;
+            accessibility.push({
+                level: level,
+                zindex: parseInt($(this).attr('fb-calc-zindex')),
+                html: l
+            });
+        });
+        accessibility.sort(function (a, b) {
+            return b.zindex - a.zindex;
+        });
+        var seenLevels = {};
+        $.each(accessibility, function (k, v) {
+            if (seenLevels[v.level] === undefined) {
+                seenLevels[v.level] = true;
+                $this.container.append('<h3>' + TRANSLATIONS.level + ' #' + v.level + '</h3>');
+            }
+            $this.container.append(v.html);
+        });
+
+
+        this.updateSelection();
+        this.linkeditor.initTooltips();
+        this.linkeditor.initIcons();
+    },
+
+    updateSelection() {
+
+        if (this.container === undefined || this.container.is(':hidden')) {
+            return;
+        }
+        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 () {
+
+    },
+}
+
+export default LinkeditorAccessibility;
diff --git a/resources/linkeditor-stable/js/linkeditor.js b/resources/linkeditor-stable/js/linkeditor.js
index 6cd5be7a8..3840ca66a 100644
--- a/resources/linkeditor-stable/js/linkeditor.js
+++ b/resources/linkeditor-stable/js/linkeditor.js
@@ -17,10 +17,12 @@ import LinkeditorForm from './linkeditor.form';
 import LinkeditorVersions from './linkeditor.versions';
 import LinkeditorPopup from './linkeditor.popup';
 import LinkeditorLayers from "./linkeditor.layers";
+import LinkeditorAccessibility from "./linkeditor.accessibility";
 import LinkeditorUndo from './linkeditor.undo';
 import LinkeditorClipboard from './linkeditor.clipboard';
 import LinkeditorAccessControl from './linkeditor.accessControl';
 
+
 window.$ = window.jQuery = require('jquery');
 window.key = require('keymaster-reloaded');
 window.tippy = tippy;
@@ -109,6 +111,7 @@ LinkEditor.prototype = {
         this.settings = new LinkeditorSettings(this);
         this.versions = new LinkeditorVersions(this);
         this.layers = new LinkeditorLayers(this);
+        this.accessibility = new LinkeditorAccessibility(this);
         this.popup = new LinkeditorPopup(this);
         this.undo = new LinkeditorUndo(this);
         this.accessControl = new LinkeditorAccessControl(this);
diff --git a/resources/linkeditor-stable/js/linkeditor.panels.js b/resources/linkeditor-stable/js/linkeditor.panels.js
index 615c18bba..0ca2ed66b 100644
--- a/resources/linkeditor-stable/js/linkeditor.panels.js
+++ b/resources/linkeditor-stable/js/linkeditor.panels.js
@@ -42,6 +42,8 @@ LinkeditorPanels.prototype = {
         });
 
         this.linkeditor.layers.init();
+        this.linkeditor.accessibility.init();
+
 
         this.linkeditor.resize.resize();
         $(document).on('mousedown', ".linkeditor-sidebar .handle", function (e) {
@@ -120,7 +122,6 @@ LinkeditorPanels.prototype = {
     },
     togglePanel: function (panel) {
         this.setPanelState(panel, 'toggle');
-        this.linkeditor.layers.update();
     },
     setPanelState: function (panel, newState) {
         var $this = this;
@@ -153,6 +154,15 @@ LinkeditorPanels.prototype = {
                 }
                 $this.setPanelState($(this).data('panel'), false);
             });
+            try {
+                if (panel === 'layers') {
+                    this.linkeditor.layers.update();
+                } else if (panel === 'accessibility') {
+                    this.linkeditor.accessibility.update();
+                }
+            }catch (e){
+
+            }
         }
 
         // Check if a panel is open on this side, if not, hide the panel
@@ -166,7 +176,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/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index e56a52f48..d685bd0b6 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -25,6 +25,7 @@ import LinkeditorForm from './linkeditor.form';
 import LinkeditorVersions from './linkeditor.versions';
 import LinkeditorPopup from './linkeditor.popup';
 import LinkeditorLayers from "./linkeditor.layers";
+import LinkeditorAccessibility from "./linkeditor.accessibility";
 import LinkeditorUndo from './linkeditor.undo';
 import LinkeditorClipboard from './linkeditor.clipboard';
 import LinkeditorAccessControl from './linkeditor.accessControl';