From 96be901d191fd7ca6641729d3794188fa4009708 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 10 Jul 2025 15:39:55 +0200
Subject: [PATCH] wip #7634 @3:00

---
 resources/markdowneditor/js/markdowneditor.js | 47 +++++++++++++++----
 resources/markdowneditor/style/style.sass     | 23 +++++++--
 .../markdown_editor.blade.php                 |  9 ++--
 3 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/resources/markdowneditor/js/markdowneditor.js b/resources/markdowneditor/js/markdowneditor.js
index 0a41ecb8d..06c5799e4 100644
--- a/resources/markdowneditor/js/markdowneditor.js
+++ b/resources/markdowneditor/js/markdowneditor.js
@@ -7,7 +7,6 @@ $.ajaxSetup({
     }
 });
 
-
 function MarkdownEditor() {
     this.mobileFirst = FLUIDBOOK_DATA.settings.mobileNavigationType === 'mobilefirst';
     this.single = ['mobilefirst', 'portrait'].indexOf(FLUIDBOOK_DATA.settings.mobileNavigationType) >= 0 || FLUIDBOOK_DATA.settings.pages <= 1;
@@ -15,28 +14,56 @@ function MarkdownEditor() {
     this.rasterizePages = this.splitPages(FLUIDBOOK_DATA.settings.rasterizePages);
     this.vectorPages = this.splitPages(FLUIDBOOK_DATA.settings.vectorPages);
     this.noCache = '?t=' + (new Date(FLUIDBOOK_DATA.composition_updated_at)).getTime();
-    this.currentPage = Math.max(0,parseInt(window.location.hash.substring(1))) || 0;
+    this.currentPage = Math.max(1,parseInt(window.location.hash.substring(1))) || 1;
     this.editor = null;
     this.init()
 }
 
 MarkdownEditor.prototype = {
     init: function() {
+        const $this = this
         this.markdown();
-        this.loadPage(2)
+        this.loadPage()
+
+        $(window).on('hashchange', function () {
+            /*if ($this.maskHashEvent) {
+                return;
+            }*/
+            $this.currentPage = Math.max(1,parseInt(window.location.hash.substring(1))) || 1
+            $this.loadPage();
+        });
+
+        $(window).on('mousemove', function (e) {
+            let x = e.pageX;
+            let w = $(this).innerWidth()
+            let ratio= Math.min(33.33, x / w * 100)
+
+            if($(".handle").hasClass("dragging")) {
+                requestAnimationFrame(function() {
+                    $("#markdown-preview").width(ratio+'%')
+                })
+            }
+        })
+
+        $(document).on('mousedown', '.handle', function (e) {
+            $(this).addClass("dragging")
+        })
+
+        $(document).on('mouseup', function (e) {
+            $(".handle").removeClass("dragging")
+        })
     },
 
     loadPage: function() {
-        this.loadPageHtml(this.currentPage, 'left');
         if (!this.single) {
-            this.loadPageHtml(this.currentPage + 1, 'right');
+            this.loadPageHtml(this.currentPage);
         }
 
         this.setContentMarkdown()
     },
 
-    loadPageHtml: function(p,side) {
-        const container = document.querySelector("#markdown-page-"+side)
+    loadPageHtml: function(p) {
+        const container = document.querySelector("#markdown-page")
         var imageFormat = FLUIDBOOK_DATA.settings.imageFormat ?? 'jpg';
 
         var c = '<div class="contents">';
@@ -80,7 +107,6 @@ MarkdownEditor.prototype = {
     },
 
     setContentMarkdown: function() {
-        if(this.currentPage === 0) this.currentPage = 1
         const $this = this
         $.ajax({
             url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id +'/markdown',
@@ -101,6 +127,11 @@ MarkdownEditor.prototype = {
         });
 
         this.editor.getMarkdown();
+    },
+
+    moveHandle: function () {
+        var $this = this;
+        $(".linkeditor-sidebar .handle.dragging")
     }
 
     /*isSpecialPage: function (page) {
diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index dcdc8ce81..99209664f 100644
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -6,12 +6,27 @@ body
         display: flex
         height: 100vh
         overflow: hidden
+
+        #editor
+            height: 100% !important
+
     &-container,
     &-editor-container
-        height: 100% !important
+        height: 100%
 
     &-editor-container
-        width: 100%
+        flex: 1
+        position: relative
+
+        .handle
+            width: 3px
+            height: 100%
+            background-color: #666
+            position: absolute
+            top: 0
+            left: 0
+            cursor: col-resize
+
     &-container
         position: relative
         width: calc(100% / 3)
@@ -30,5 +45,5 @@ body
         align-items: center
 
     &-page
-        width: 50%
-        position: relative
+        width: 100%
+        //position: relative
diff --git a/resources/views/fluidbook_publication/markdown_editor.blade.php b/resources/views/fluidbook_publication/markdown_editor.blade.php
index 490c863d5..1899019cb 100644
--- a/resources/views/fluidbook_publication/markdown_editor.blade.php
+++ b/resources/views/fluidbook_publication/markdown_editor.blade.php
@@ -9,13 +9,16 @@
 
 @section('content')
     <div class="markdown-editor">
+        <div class="markdown-preview-nav"></div>
         <div id="markdown-preview" class="markdown-container">
             <div class="markdown-wrapper">
-                <div draggable="false" class="markdown-page" id="markdown-page-left"></div>
-                <div draggable="false" class="markdown-page" id="markdown-page-right"></div>
+                <div draggable="false" class="markdown-page" id="markdown-page"></div>
             </div>
         </div>
-        <div id="editor" class="markdown-editor-container"></div>
+        <div class="markdown-editor-container">
+            <div id="editor"></div>
+            <div class="handle"></div>
+        </div>
     </div>
 @endsection
 
-- 
2.39.5