From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 17 Jul 2025 13:32:04 +0000 (+0200)
Subject: wip #7634
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=909e6db13e301eebbb4a6e95884ee9e62dd377fe;p=fluidbook-toolbox.git

wip #7634
---

diff --git a/resources/linkeditor/js/linkeditor.toolbar.js b/resources/linkeditor/js/linkeditor.toolbar.js
index bf6d6205b..743263875 100644
--- a/resources/linkeditor/js/linkeditor.toolbar.js
+++ b/resources/linkeditor/js/linkeditor.toolbar.js
@@ -6,7 +6,7 @@ function LinkeditorToolbar(linkeditor) {
 LinkeditorToolbar.prototype = {
     init: function () {
         var $this = this;
-        $("#linkeditor-page-field input").on('change', function () {
+        $("#markdowneditor-page-field input").on('change', function () {
             $this.linkeditor.changePage($(this).val());
             $(this).blur();
             return false;
diff --git a/resources/markdowneditor/js/markdowneditor.js b/resources/markdowneditor/js/markdowneditor.js
index 51377faf0..6fec34928 100644
--- a/resources/markdowneditor/js/markdowneditor.js
+++ b/resources/markdowneditor/js/markdowneditor.js
@@ -1,4 +1,5 @@
 import Editor from '@toast-ui/editor';
+import MarkdowneditorToolbar from "./markdowneditor.toolbar";
 window.$ = window.jQuery = require('jquery');
 
 $.ajaxSetup({
@@ -21,17 +22,19 @@ function MarkdownEditor() {
 
 MarkdownEditor.prototype = {
     init: function() {
+        this.toolbar = new MarkdowneditorToolbar(this);
+
         const $this = this
         this.initIcons();
         this.markdown();
-        this.loadPage();
+        this.changePage();
 
         $(window).on('hashchange', function () {
             /*if ($this.maskHashEvent) {
                 return;
             }*/
             $this.currentPage = Math.max(1,parseInt(window.location.hash.substring(1))) || 1
-            $this.loadPage();
+            $this.changePage();
         });
 
         $(window).on('mousemove', function (e) {
@@ -152,10 +155,65 @@ MarkdownEditor.prototype = {
         this.editor.getMarkdown();
     },
 
-    moveHandle: function () {
-        var $this = this;
-        $(".linkeditor-sidebar .handle.dragging")
-    }
+    changePage: function(page) {
+        if (page === undefined) {
+            let h = window.location.hash;
+            if (h.length === 0) {
+                page = 0;
+            } else {
+                page = window.location.hash.substring(1);
+            }
+        }
+        this.currentPage = this.normalizePage(page)
+        this.loadPage();
+
+        window.location.hash = '#' + this.currentPage;
+        $("#markdowneditor-page-field input").val(this.currentPage);
+    },
+
+    firstPage: function () {
+        this.changePage(1);
+    },
+
+    nextPage: function () {
+        this.changePage(this.currentPage + 1);
+    },
+
+    previousPage: function () {
+        this.changePage(this.currentPage - 1);
+    },
+
+    lastPage: function () {
+        this.changePage(FLUIDBOOK_DATA.settings.pages);
+    },
+
+    normalizePage: function (page) {
+        page = parseInt(page);
+        return Math.max(1, Math.min(page, FLUIDBOOK_DATA.settings.pages));
+    },
+
+    runAction: function (act, args) {
+        if (args === undefined) {
+            args = [];
+        }
+        if (typeof args === 'string') {
+            args = [args];
+        }
+        var a = act.split('.');
+        var o = this;
+        let po = this;
+        for (let i in a) {
+            po = o;
+            o = o[a[i]];
+        }
+
+        try {
+            return o.apply(po, args);
+        } catch (e) {
+            console.log(e);
+            console.error('Error while calling ' + act, args);
+        }
+    },
 
     /*isSpecialPage: function (page) {
         if (page === undefined) {
diff --git a/resources/markdowneditor/js/markdowneditor.toolbar.js b/resources/markdowneditor/js/markdowneditor.toolbar.js
new file mode 100644
index 000000000..c36ffb107
--- /dev/null
+++ b/resources/markdowneditor/js/markdowneditor.toolbar.js
@@ -0,0 +1,22 @@
+function MarkdowneditorToolbar(markdowneditor) {
+    this.markdowneditor = markdowneditor;
+    this.init();
+}
+
+MarkdowneditorToolbar.prototype = {
+    init: function () {
+        var $this = this;
+
+        $("#linkeditor-page-field input").on('change', function () {
+            $this.markdowneditor.changePage($(this).val());
+            $(this).blur();
+            return false;
+        });
+
+        $(document).on('click', '[data-action]', function () {
+            $this.markdowneditor.runAction($(this).data('action'), $(this).is('[data-action-args]') ? $(this).data('action-args') : []);
+            return false;
+        });
+    }
+};
+export default MarkdowneditorToolbar;
diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index 88a9045cc..cd4eb42ff 100644
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -34,7 +34,7 @@ body
         div
             display: inline-block
             vertical-align: top
-        #linkeditor-page-field
+        #markdowneditor-page-field
             padding: 2px 10px
             border-radius: 5px
             cursor: text
@@ -68,6 +68,7 @@ body
 
     &-toolbar-center
         justify-content: center
+        align-items: center
 
     &-revision
         height: 100vh
@@ -100,6 +101,8 @@ body
         position: absolute
         top: 0
         width: 100%
+        display: flex
+        align-items: center
     &-editor
         display: flex
         height: 100vh
diff --git a/resources/views/fluidbook_publication/markdown_editor.blade.php b/resources/views/fluidbook_publication/markdown_editor.blade.php
index 9d978b1a4..a8e07c7a3 100644
--- a/resources/views/fluidbook_publication/markdown_editor.blade.php
+++ b/resources/views/fluidbook_publication/markdown_editor.blade.php
@@ -40,7 +40,7 @@
                     <a href="#" data-action="previousPage" data-icon="previous-page"
                        data-tooltip="{{__('Aller à la page précédente')}}"></a>
                     <div data-tooltip="{{__('Aller à une page')}} (Ctrl+G)" data-key="ctrl+g"
-                         data-action="focusPageField" id="linkeditor-page-field">
+                         data-action="focusPageField" id="markdowneditor-page-field">
                         <input type="number" pattern="[0-9]+" step="0" min="0" max="{{$fbdata['settings']['pages']}}">
                         / {{$fbdata['settings']['pages']}}</div>
                     <a href="#" data-action="nextPage" data-icon="next-page"