From f0e70a5180bb7cf3c9394c4b2c0915313a285371 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 13 Sep 2022 13:11:21 +0200
Subject: [PATCH] wait #5450 @2

---
 app/Models/ToolSVGSprite.php                  | 12 +++--
 resources/tools/svgsprite/svgsprite.js        | 38 ++++++++++++++++
 .../link_editor.blade.php                     | 34 +++++++++++++-
 .../link_editor_icons.blade.php               | 44 +++++++++++++++++++
 4 files changed, 123 insertions(+), 5 deletions(-)
 create mode 100644 resources/tools/svgsprite/svgsprite.js
 create mode 100644 resources/views/fluidbook_publication/link_editor_icons.blade.php

diff --git a/app/Models/ToolSVGSprite.php b/app/Models/ToolSVGSprite.php
index 3f0623399..153e6ab3d 100644
--- a/app/Models/ToolSVGSprite.php
+++ b/app/Models/ToolSVGSprite.php
@@ -46,14 +46,20 @@ class ToolSVGSprite extends ToolboxModel
 
     public function generate()
     {
-        $res = '<div class="svg-sprite" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"></svg></div>';
+        $res = '<div class="svg-sprite" style="height: 0;width: 0;position: absolute;" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">';
         foreach ($this->icons as $icon) {
             if (preg_match('/<svg(.*)viewBox="([^\"]+)"([^>]*)>(.*)<\/svg>/m', $icon['svgcode'], $matches)) {
-                $res .= '<symbol id="' . $this->prefix . $icon['iconname'] . '" viewBox="' . $matches[2] . '">' . $matches[4] . '</symbol>';
+                $svg = $matches[4];
+                $svg = preg_replace('/#[0-9a-fA-F]{6}/', 'currentColor', $svg);
+                $res .= '<symbol id="' . $this->prefix . $icon['iconname'] . '" viewBox="' . $matches[2] . '">' . $svg . '</symbol>';
             }
         }
 
-        $res .= '</svg/></div>';
+        $res .= '</svg></div>' . "\n";
+        $res .= '<script>' . "\n";
+        $res .= file_get_contents(resource_path('tools/svgsprite/svgsprite.js')) . "\n";
+        $res .= '</script>';
+
         return $res;
     }
 
diff --git a/resources/tools/svgsprite/svgsprite.js b/resources/tools/svgsprite/svgsprite.js
new file mode 100644
index 000000000..5d88ba35e
--- /dev/null
+++ b/resources/tools/svgsprite/svgsprite.js
@@ -0,0 +1,38 @@
+function getSpriteIcon(icon, attrs, dimensions) {
+    var a = [];
+    var iconSymbol = $('svg symbol[id="' + icon + '"]');
+    if (iconSymbol.length > 1) {
+        $('svg symbol[id="' + icon + '"]:not(:last)').remove();
+        iconSymbol = $('svg symbol[id="' + icon + '"]');
+    }
+
+    if (iconSymbol.length == 0) {
+        return ''; // Bail out because symbol doesn't exist
+    }
+
+    if (attrs == undefined) {
+        attrs = {};
+    }
+    if (attrs.viewBox == null) {
+        attrs.viewBox = iconSymbol.get(0).attributes.viewBox.value;
+    }
+    if (dimensions === true) {
+        var vb = attrs.viewBox.split(' ');
+        attrs.x = vb[0];
+        attrs.y = vb[1];
+        attrs.width = vb[2];
+        attrs.height = vb[3];
+    }
+    if (attrs.class == null) {
+        attrs.class = icon;
+    } else {
+        attrs.class += ' ' + icon;
+    }
+
+    attrs.class += ' nav-icon svg-icon'; // Common class for all icons
+
+    $.each(attrs, function (k, v) {
+        a.push(k + '="' + v + '"');
+    });
+    return '<svg ' + a.join(' ') + ' aria-hidden="true"><use xlink:href="#' + icon + '" /></svg>';
+}
diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 9eea3b4fe..ea618d2b4 100644
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -1,15 +1,44 @@
 @php
     $title='#'.$id.' - '.__('Editeur de liens');
     $fluidbook->getLinksAndRulers($links,$rulers);
+    $fbdata=$fluidbook->getPageData()->getRawData();
 @endphp
 @extends('layouts.empty')
 
+@include('fluidbook_publication.link_editor_icons')
+
 @section('content')
     <div draggable="false" id="linkeditor">
         <aside id="linkeditor-left"></aside>
         <div id="linkeditor-main">
             <div draggable="false" id="linkeditor-toolbar">
-                <a href="#" data-icon=""></a>
+                <nav id="linkeditor-toolbar-left">
+                    <a href="#" data-icon="save" data-action="save" data-tooltip="{{__('Sauvegarder')}}"></a>
+                    <a href="#" data-action="version" data-icon="wayback-machine"
+                       data-tooltip="{{__('Restaurer une version précédente')}}"></a>
+                    <div class="separator"></div>
+                    <a href="#" data-action="zoom-reset" data-icon="zoom-reset"
+                       data-tooltip="{{__('Réinitialiser le zoom')}}"></a>
+                </nav>
+                <nav id="linkeditor-toolbar-center">
+                    <a href="#" data-action="first-page" data-icon="first-page"
+                       data-tooltip="{{__('Aller à la couverture')}}"></a>
+                    <a href="#" data-action="previous-page" data-icon="previous-page"
+                       data-tooltip="{{__('Aller à la page précédente')}}"></a>
+                    <div class="linkedito-page-field"><input type="text"> / {{$fbdata['settings']['pages']}}</div>
+                    <a href="#" data-action="next-page" data-icon="next-page"
+                       data-tooltip="{{__('Aller à la page suivante')}}"></a>
+                    <a href="#" data-action="last-page" data-icon="last-page"
+                       data-tooltip="{{__('Aller à la dernière page')}}"></a>
+                    <div class="separator"></div>
+                    <a href="#" data-action="page-background" data-icon="landscape"
+                       data-tooltip="{{__('Editer les liens du fond')}}"></a>
+                    <a href="#" data-action="page-aftersearch" data-icon="search"
+                       data-tooltip="{{__('Editer les liens de l\'image supplémentaire du menu')}}"></a>
+                </nav>
+                <nav id="linkeditor-toolbar-right">
+
+                </nav>
             </div>
             <div id="linkeditor-editor">
                 <div draggable="false" id="linkeditor-rulers">
@@ -30,9 +59,10 @@
         <aside id="linkeditor-right"></aside>
     </div>
 @endsection
+
 @push('after_scripts')
     <script>
-        var FLUIDBOOK_DATA = @json($fluidbook->getPageData()->getRawData());
+        var FLUIDBOOK_DATA = @json($fbdata);
         var LINKS =@json($links);
         var RULERS =@json($rulers);
     </script>
diff --git a/resources/views/fluidbook_publication/link_editor_icons.blade.php b/resources/views/fluidbook_publication/link_editor_icons.blade.php
new file mode 100644
index 000000000..c1fd75b2d
--- /dev/null
+++ b/resources/views/fluidbook_publication/link_editor_icons.blade.php
@@ -0,0 +1,44 @@
+<div class="svg-sprite" style="height: 0;width: 0;position: absolute;" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="linkeditor-save" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m13.5 12.5a1 1 0 0 1 -1 1h-11a1 1 0 0 1 -1-1v-9l3-3h9a1 1 0 0 1 1 1z"/><path d="m3.5 8.5h7v5h-7z"/><path d="m4.5.5h6v4h-6z"/></g></symbol><symbol id="linkeditor-first-page" viewBox="0 0 14.941 18.664"><clipPath id="a"><path d="m0 0h18.664v10.883h-18.664z"/></clipPath><g clip-path="url(#a)" transform="matrix(0 -1 1 0 4.059 18.664)"><path d="m0 8.557 8.557-8.557 8.557 8.557" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" transform="translate(.775 1.551)"/></g><path d="m13.909 0h-13.909" fill="none" stroke="currentColor" stroke-width="2" transform="matrix(0 1 -1 0 1 2.377)"/></symbol><symbol id="linkeditor-last-page" viewBox="0 0 14.941 18.664"><clipPath id="a"><path d="m0 0h18.664v10.883h-18.664z"/></clipPath><g clip-path="url(#a)" transform="matrix(0 1 -1 0 10.882 0)"><path d="m0 8.557 8.557-8.557 8.557 8.557" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" transform="translate(.775 1.551)"/></g><path d="m13.909 0h-13.909" fill="none" stroke="currentColor" stroke-width="2" transform="matrix(0 -1 1 0 13.941 16.287)"/></symbol><symbol id="linkeditor-next-page" viewBox="0 0 10.883 18.664"><clipPath id="a"><path d="m0 0h18.664v10.883h-18.664z"/></clipPath><g clip-path="url(#a)" transform="matrix(0 1 -1 0 10.883 0)"><path d="m0 8.557 8.557-8.557 8.557 8.557" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" transform="translate(.775 1.551)"/></g></symbol><symbol id="linkeditor-previous-page" viewBox="0 0 10.883 18.664"><clipPath id="a"><path d="m0 0h18.664v10.883h-18.664z"/></clipPath><g clip-path="url(#a)" transform="matrix(0 -1 1 0 0 18.664)"><path d="m0 8.557 8.557-8.557 8.557 8.557" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" transform="translate(.775 1.551)"/></g></symbol><symbol id="linkeditor-landscape" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><path d="m2.157.715h15.714a1.429 1.429 0 0 1 1.429 1.429v15.714a1.428 1.428 0 0 1 -1.428 1.428h-15.715a1.429 1.429 0 0 1 -1.429-1.429v-15.713a1.429 1.429 0 0 1 1.429-1.429z"/><circle cx="13.214" cy="6.786" r="2.5"/><path d="m13.429 19.286a10.513 10.513 0 0 0 -10.571-8.571 11.247 11.247 0 0 0 -2.143.2"/><path d="m19.286 14.157a11.151 11.151 0 0 0 -3.571-.586 11.271 11.271 0 0 0 -4.472.915"/></g></symbol><symbol id="linkeditor-settings" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><circle cx="2.857" cy="2.857" r="2.143"/><path d="m0 0h14.286" transform="translate(5 2.857)"/><circle cx="10" cy="10" r="2.143"/><path d="m0 0h7.143" transform="translate(.714 10)"/><path d="m0 0h7.143" transform="translate(12.143 10)"/><circle cx="17.143" cy="17.143" r="2.143"/><path d="m14.286 0h-14.286" transform="translate(.714 17.143)"/></g></symbol><symbol id="linkeditor-wayback-machine" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><path d="m.714 10a9.285 9.285 0 1 0 9.286-9.286 10.331 10.331 0 0 0 -7.143 2.857"/><path d="m3.571.714-.714 2.857 2.857.714"/><path d="m10 5v5.714l-3.714 1.857"/></g></symbol><symbol id="linkeditor-tooltip" viewBox="0 0 21.667 17.846"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><path d="m0 0h20.238" transform="translate(.715 17.131)"/><path d="m13.463 11.9-2.63 2.63-2.633-2.63h-2.958a1.316 1.316 0 0 1 -1.316-1.316v-8.554a1.316 1.316 0 0 1 1.316-1.316h11.183a1.316 1.316 0 0 1 1.316 1.316v8.552a1.316 1.316 0 0 1 -1.316 1.318z"/></g></symbol><symbol id="linkeditor-search" viewBox="0 0 20.322 16.684"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><path d="m17.571 11.417a.4.4 0 1 0 .211-.763l-7.81-5.354a.791.791 0 0 0 -1.237.7l.61 9.473a.4.4 0 1 0 .762.211l2.722-3.893z"/><path d="m8.029 7.509h-6.42a.894.894 0 0 1 -.894-.894v-5.007a.894.894 0 0 1 .894-.894h17.105a.894.894 0 0 1 .894.894v5.007a.894.894 0 0 1 -.894.894h-5.314"/></g></symbol><symbol id="linkeditor-archives" viewBox="0 0 19.851 20"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><path d="m.714 0h3.571a.715.715 0 0 1 .715.715v17.142a.714.714 0 0 1 -.714.714h-3.572a.714.714 0 0 1 -.714-.714v-17.143a.714.714 0 0 1 .714-.714z" transform="translate(.715 .714)"/><path d="m.714 0h3.571a.715.715 0 0 1 .715.715v14.285a.714.714 0 0 1 -.714.714h-3.572a.714.714 0 0 1 -.714-.714v-14.286a.714.714 0 0 1 .714-.714z" transform="translate(5.715 3.571)"/><path d="m.714 0h2.857a.715.715 0 0 1 .715.715v14.285a.714.714 0 0 1 -.714.714h-2.858a.714.714 0 0 1 -.714-.714v-14.286a.714.714 0 0 1 .714-.714z" transform="matrix(.97005881 -.24287013 .24287013 .97005881 11.315 4.048)"/><path d="m0 0h5" transform="translate(.714 14.286)"/><path d="m0 0h5" transform="translate(5.714 12.857)"/><path d="m0 1.029 4.114-1.029" transform="translate(14.286 14.685)"/></g></symbol><symbol id="linkeditor-layers" viewBox="0 0 20 19.997"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><path d="m10.671 9.854a1.686 1.686 0 0 1 -1.343 0l-8.143-3.771a.8.8 0 0 1 0-1.429l8.143-3.8a1.686 1.686 0 0 1 1.343 0l8.143 3.771a.8.8 0 0 1 0 1.429z"/><path d="m19.286 10.5-8.714 4.014a1.427 1.427 0 0 1 -1.186 0l-8.671-4.014"/><path d="m19.286 15.14-8.714 4.014a1.427 1.427 0 0 1 -1.186 0l-8.671-4.014"/></g></symbol><symbol id="linkeditor-copy" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><rect height="15" rx="1.429" width="15" x="4.286" y="4.286"/><path d="m.714 15v-12.857a1.429 1.429 0 0 1 1.429-1.429h12.857"/></g></symbol><symbol id="linkeditor-link" viewBox="0 0 19.974 20.017"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.429"><path d="m5.723 9.28-4.586 4.543a1.428 1.428 0 0 0 -.008 2.02l.008.008 3.029 3.029a1.428 1.428 0 0 0 2.02.008l.008-.008 4.543-4.586"/><path d="m14.294 10.737 4.543-4.543a1.428 1.428 0 0 0 .008-2.02l-.008-.008-2.986-3.029a1.428 1.428 0 0 0 -2.02-.008l-.008.008-4.543 4.586"/><path d="m5.714 0-5.714 5.714" transform="translate(7.151 7.151)"/></g></symbol></svg></div>
+@push('after_scripts')
+    <script>
+        function getSpriteIcon(icon, attrs, dimensions) {
+            var a = [];
+            var iconSymbol = $('svg symbol[id="' + icon + '"]');
+            if (iconSymbol.length > 1) {
+                $('svg symbol[id="' + icon + '"]:not(:last)').remove();
+                iconSymbol = $('svg symbol[id="' + icon + '"]');
+            }
+
+            if (iconSymbol.length == 0) {
+                return ''; // Bail out because symbol doesn't exist
+            }
+
+            if (attrs == undefined) {
+                attrs = {};
+            }
+            if (attrs.viewBox == null) {
+                attrs.viewBox = iconSymbol.get(0).attributes.viewBox.value;
+            }
+            if (dimensions === true) {
+                var vb = attrs.viewBox.split(' ');
+                attrs.x = vb[0];
+                attrs.y = vb[1];
+                attrs.width = vb[2];
+                attrs.height = vb[3];
+            }
+            if (attrs.class == null) {
+                attrs.class = icon;
+            } else {
+                attrs.class += ' ' + icon;
+            }
+
+            attrs.class += ' nav-icon svg-icon'; // Common class for all icons
+
+            $.each(attrs, function (k, v) {
+                a.push(k + '="' + v + '"');
+            });
+            return '<svg ' + a.join(' ') + ' aria-hidden="true"><use xlink:href="#' + icon + '" /></svg>';
+        }
+
+    </script>
+@endpush
-- 
2.39.5