wip #5648 @1

diff --git a/app/Jobs/FluidbookCompiler.php b/app/Jobs/FluidbookCompiler.php
index 0b8a786ae9bb5c774accc4654c1e135eabb8b436..49172d88febc8a1c3b50596001b1e1cecf08e6cc 100644 (file)
--- a/app/Jobs/FluidbookCompiler.php
+++ b/app/Jobs/FluidbookCompiler.php
@@ -2538,8 +2538,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 
     public function getBookSurface()
     {
-        $s = $this->width * $this->height;
-        return $s;
+        return $this->width * $this->height;
     }
 
     protected function _sortLinksByDepth($a, $b)

diff --git a/app/SubForms/Link/Base.php b/app/SubForms/Link/Base.php
index 455d332dfc386b6f63faf09f4e9a3177194cd703..dfd613597f5cf8e7f25631393b3ac3bf77fc512c 100644 (file)
--- a/app/SubForms/Link/Base.php
+++ b/app/SubForms/Link/Base.php
@@ -310,6 +310,7 @@ class Base extends Form
     {
         $options = ['interactive', 'inline'];
         $combi = [];
+        $configs = [];
         foreach (self::types() as $type) {
             if (!isset($type['class'])) {
                 continue;
@@ -327,7 +328,7 @@ class Base extends Form
                 if ($field instanceof SelectFromArray) {
                     $optionsChoices[$option] = array_keys($field->getAttribute('options'));
                 } else if ($field instanceof Checkbox) {
-                    $optionsChoices[$option] = [false, true];
+                    $optionsChoices[$option] = [0, 1];
                 } else {
 
                 }
@@ -336,6 +337,8 @@ class Base extends Form
                 $optionsChoices['alternative'] = ['file.jpg', 'file.zip'];
             }
 
+            $configs[$type['type']] = $optionsChoices;
+
             foreach ($optionsChoices as $option => $choices) {
                 foreach ($choices as $k => $v) {
                     $optionsChoices[$option][$k] = $option . '|' . $v;
@@ -345,13 +348,13 @@ class Base extends Form
             $combi[$type['type']] = self::_combinations(array_values($optionsChoices));
 
         }
+
         $id = 1;
         $base = ['top' => 1, 'left' => 1, 'width' => 1, 'height' => 1, 'to' => '-', 'inline' => 'inline', 'page' => 2, 'target' => '_blank', 'extra' => '', 'alternative' => '', 'interactive' => false];
         $compiler = new FluidbookCompiler($fluidbook);
 
         /** @var Link $instances */
         $instances = [];
-        $iconfigs = [];
 
         foreach ($combi as $type => $config) {
             if (!count($config)) {
@@ -368,8 +371,6 @@ class Base extends Form
                         $ee = explode('|', $item);
                         $c[$ee[0]] = $ee[1];
                     }
-                    $iconfigs[$type . '/' . $settings] = ['type' => $type] + $c + $base;
-
                     $instances[$type . '/' . $settings] = Link::getInstance(base64_encode($id), ['type' => $type] + $c + $base, $compiler);
                     $id++;
                 }
@@ -384,7 +385,7 @@ class Base extends Form
             }
             $res[$k] = $depth;
         }
-        return $res;
+        return ['depths' => $res, 'configs' => $configs];
     }
 
     /**

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 932a1182dc9d652e814eb08f875747ad369fdbb3..34009a6099ac553de28095a39f8d0fa173bfa9a1 100644 (file)
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -66,6 +66,7 @@ function LinkEditor() {
     this.fs = 1;
     this.mx = 0;
     this.my = 0;
+    this.bookSurface = this.pw * this.ph;
 
     this.fluidbookRect = null;
     this.canvasRect = null;

diff --git a/resources/linkeditor/js/linkeditor.layers.js b/resources/linkeditor/js/linkeditor.layers.js
index 5ecc892345861810d0ab7c50dc4a05d0cef6f63b..0bebf30bede538a636d947c1f6f2045cce1e91e8 100644 (file)
--- a/resources/linkeditor/js/linkeditor.layers.js
+++ b/resources/linkeditor/js/linkeditor.layers.js
@@ -1,3 +1,5 @@
+const {parse} = require("../../../public/packages/tinymce");
+
 function LinkeditorLayers(linkeditor) {
     this.linkeditor = linkeditor;
 }
@@ -13,10 +15,10 @@ LinkeditorLayers.prototype = {
             if ($this.maskCheckEvents) {
                 return;
             }
-            var link=$('#linkeditor-links [fb-uid="'+$(this).attr('name')+'"]');
-            if($(this).prop('checked')){
+            var link = $('#linkeditor-links [fb-uid="' + $(this).attr('name') + '"]');
+            if ($(this).prop('checked')) {
                 $this.linkeditor.links.selectLink(link);
-            }else{
+            } else {
                 $this.linkeditor.links.deselectLink(link);
             }
 
@@ -34,6 +36,7 @@ LinkeditorLayers.prototype = {
         }
         var $this = this;
         this.container.html('');
+        var layers = [];
         $('#linkeditor-links .link:not(.pendingCreate)').each(function () {
             let type = $(this).attr('fb-type');
             let dest;
@@ -44,12 +47,29 @@ LinkeditorLayers.prototype = {
                 default:
                     dest = $(this).attr('fb-to');
             }
-            if (dest == '') {
+            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);
+            layers.push({
+                level: Math.round(parseInt($(this).attr('fb-calc-depth')) / 10),
+                zindex: parseInt($(this).attr('fb-calc-zindex')),
+                html: l
+            });
+        });
+        layers.sort(function (a, b) {
+            return b.zindex - a.zindex;
+        });
+        var seenLevels = {};
+        $.each(layers, 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();
     },
 

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 6e9cc8d31e460fc070b68db494aa4ed17c29a1bc..0132f4c276927bcede47dee4cbdfda8f272de306 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -237,7 +237,7 @@ LinkeditorLinks.prototype = {
         $(link).addClass('pendingCreate');
         this.startResizeLink('se');
         this.linkeditor.form.updateLinkForm();
-        this.linkeditor.layers.update();
+        this.updateLayers();
     },
 
     startResizeLink: function (corner) {
@@ -386,7 +386,7 @@ LinkeditorLinks.prototype = {
             LINKS[id][k] = v;
         });
         this.linkeditor.rulers.updateMagnetValues();
-        this.linkeditor.layers.update();
+        this.updateLayers();
     },
 
     startDragLink: function () {
@@ -536,7 +536,7 @@ LinkeditorLinks.prototype = {
             }
             $this.addLink(link, side);
         });
-        this.linkeditor.layers.update();
+        this.updateLayers();
     },
 
     addLink: function (link) {
@@ -593,10 +593,15 @@ LinkeditorLinks.prototype = {
         this.deselectAllLinks();
         this.selectLink($(link));
         this.linkeditor.form.updateFormData();
-        this.linkeditor.layers.update();
+
         return $(link);
     },
 
+    updateLayers: function () {
+        this.updateDepths();
+        this.linkeditor.layers.update();
+    },
+
     deleteSelection: function () {
         var $this = this;
         this.linkeditor.form.emptyForm();
@@ -627,7 +632,7 @@ LinkeditorLinks.prototype = {
         if (triggerChange === true) {
             this.linkeditor.hasChanged();
         }
-        this.linkeditor.layers.update();
+        this.updateLayers();
     },
 
     selectAll: function () {
@@ -638,6 +643,41 @@ LinkeditorLinks.prototype = {
         this.linkeditor.layers.updateSelection();
     },
 
+    updateDepths: function () {
+        var $this = this;
+        $("#linkeditor-links .link").each(function () {
+            let calcDepth = parseInt($(this).attr('fb-zindex'));
+            if (calcDepth === -1) {
+                calcDepth = $this.findDefaultLinkDepth($(this));
+            }
+            let linkWidth = parseFloat($(this).attr('fb-width'));
+            let linkHeight = parseFloat($(this).attr('fb-height'));
+            let zindex = ((calcDepth + 1) * 10000) - Math.min(9999, Math.max(1, Math.round(9999 * ((linkWidth * linkHeight) / $this.linkeditor.bookSurface))));
+            $(this).attr('fb-calc-depth', calcDepth);
+            $(this).attr('fb-calc-zindex', zindex);
+            $(this).css('z-index', zindex);
+        });
+    },
+
+    findDefaultLinkDepth: function (link) {
+        var conf = DEPTH.configs[$(link).attr('fb-type')];
+        var key = $(link).attr('fb-type');
+        var settings = [];
+        $.each(conf, function (k, v) {
+            let val = $(link).attr('fb-' + k);
+            if (k === 'alternative') {
+                let e = val.split('.');
+                let ext = e.pop().toLowerCase();
+                val = (['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg'].indexOf(ext) >= 0) ? 'file.jpg' : 'file.zip';
+            }
+            settings.push(k + '|' + val);
+        });
+        if (settings.length > 0) {
+            key += '/' + settings.join(',');
+        }
+        return DEPTH.depths[key];
+    },
+
     clear: function () {
         $("#linkeditor-links").html('');
     },

diff --git a/resources/linkeditor/style/inc/_layers.sass b/resources/linkeditor/style/inc/_layers.sass
index 32c16035d8a6ffe6a7beba5336283e37a57c897c..708af77eb65b6bc5921b94a3f347c840bbb8dcec 100644 (file)
--- a/resources/linkeditor/style/inc/_layers.sass
+++ b/resources/linkeditor/style/inc/_layers.sass
@@ -4,6 +4,17 @@
     @include dark-theme
         color: $color-dark
 
+    h3
+        border-bottom: 1px solid currentColor
+        padding: 3px 10px
+        font-style: italic
+        font-weight: 500
+        background-color: rgba(0,0,0,0.5)
+        color: $color-dark
+        @include dark-theme
+            background-color: rgba(255,255,255,0.5)
+            color: $color
+
     label
         display: block
         border-bottom: 1px solid currentColor

diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index 92ab99b4ae50fb4a7306d440d475e50a61a76bd1..a38cfc24a76ba2d23bcacd63e4beef0a8e3ec326 100644 (file)
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -14,6 +14,7 @@
 
         &.selected
             cursor: move
+            z-index: 1000000 !important
 
             .corners
                 visibility: visible

diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 9b3657062986038c66ba8ee0c5e34157ccfc29aa..ec0e8108c3ffd5d2f768987e4a493f4df3752701 100644 (file)
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -49,6 +49,7 @@
         'error_open_image_link'=>__('Impossible d\'ajouter des liens au contenu de ce lien'),
         'empty'=>__('Vide'),
         'copy_link_id'=>__('Copier l\'identifiant unique'),
+        'level'=>__('Niveau'),
     ];
 
     $rulers=!count($rulers)?'{}':json_encode($rulers);