From 3c9f0b1fbd1cc65aeb0295ab50e5d1391f2d88ff Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 15 Dec 2022 10:38:11 +0100 Subject: [PATCH] wip #5648 @1 --- app/Jobs/FluidbookCompiler.php | 3 +- app/SubForms/Link/Base.php | 11 ++-- resources/linkeditor/js/linkeditor.js | 1 + resources/linkeditor/js/linkeditor.layers.js | 30 +++++++++-- resources/linkeditor/js/linkeditor.links.js | 50 +++++++++++++++++-- resources/linkeditor/style/inc/_layers.sass | 11 ++++ resources/linkeditor/style/inc/_links.sass | 1 + .../link_editor.blade.php | 1 + 8 files changed, 91 insertions(+), 17 deletions(-) diff --git a/app/Jobs/FluidbookCompiler.php b/app/Jobs/FluidbookCompiler.php index 0b8a786ae..49172d88f 100644 --- a/app/Jobs/FluidbookCompiler.php +++ b/app/Jobs/FluidbookCompiler.php @@ -2538,8 +2538,7 @@ height="0" width="0" style="display:none;visibility:hidden"> 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 455d332df..dfd613597 100644 --- 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 932a1182d..34009a609 100644 --- 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 5ecc89234..0bebf30be 100644 --- 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 = '' + TRANSLATIONS.empty + ''; } var l = ''; - $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('

' + TRANSLATIONS.level + ' #' + v.level + '

'); + } + $this.container.append(v.html); }); + + this.updateSelection(); }, diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 6e9cc8d31..0132f4c27 100644 --- 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 32c16035d..708af77eb 100644 --- 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 92ab99b4a..a38cfc24a 100644 --- 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 9b3657062..ec0e8108c 100644 --- 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); -- 2.39.5