wip #7634

diff --git a/resources/markdowneditor/js/markdowneditor.js b/resources/markdowneditor/js/markdowneditor.js
index 6fec349284448cf5a05750d222c5b2f67264126b..3d59bcb13e94ffa8fa9b0477b9083338e5152e40 100644 (file)
--- a/resources/markdowneditor/js/markdowneditor.js
+++ b/resources/markdowneditor/js/markdowneditor.js
@@ -38,18 +38,25 @@ MarkdownEditor.prototype = {
         });
 
         $(window).on('mousemove', function (e) {
-            let x = e.pageX;
-            let w = $(this).innerWidth()
-            let ratio = x / w * 100
+            let panelWidth = $("#markdown-revision")[0].getBoundingClientRect().width
+            var x = e.pageX
+            var w = $(this).innerWidth()
 
             if($(".handle").hasClass("dragging")) {
+                if($(".handle.dragging").hasClass("preview-handle")) {
+                    x = Math.max(0, e.pageX - panelWidth)
+                    w = $(this).innerWidth() - panelWidth
+                }
+
+                let ratio = x / w * 100
+
                 $("body").addClass("user-select-none")
                 requestAnimationFrame(function() {
                     $(".handle.dragging").parent().width(ratio+'%')
                 })
 
-                if($("#markdown-page img")[0].getBoundingClientRect().top < $("body")[0].getBoundingClientRect().top
-                || $("#markdown-page img")[0].getBoundingClientRect().bottom > $("body")[0].getBoundingClientRect().bottom){
+                if($("#markdown-preview img")[0].getBoundingClientRect().top < $("#markdown-preview")[0].getBoundingClientRect().top
+                || $("#markdown-preview img")[0].getBoundingClientRect().bottom > $("body")[0].getBoundingClientRect().bottom){
                     $("#markdown-preview").addClass("overtake")
                 }else {
                     $("#markdown-preview").removeClass("overtake")
@@ -82,7 +89,7 @@ MarkdownEditor.prototype = {
     },
 
     loadPageHtml: function(p) {
-        const container = document.querySelector("#markdown-page")
+        const container = document.querySelector("#markdown-preview .markdown-wrapper")
         var imageFormat = FLUIDBOOK_DATA.settings.imageFormat ?? 'jpg';
 
         var c = '<div class="contents">';

diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index cd4eb42ffecffbf30024b6ae0a196501a502fe90..c6353ead24bf79018b5711bf448f430376bb2b62 100644 (file)
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -138,6 +138,7 @@ body
         flex-shrink: 0
         align-items: center
         justify-content: center
+        overflow: hidden
 
         &.overtake
             overflow: auto

diff --git a/resources/views/fluidbook_publication/markdown_editor.blade.php b/resources/views/fluidbook_publication/markdown_editor.blade.php
index a8e07c7a375e934cf1c400ba50f1b4d63ba34a19..ebc6f76209b3a015d6d49ab1955ca44633e38236 100644 (file)
--- a/resources/views/fluidbook_publication/markdown_editor.blade.php
+++ b/resources/views/fluidbook_publication/markdown_editor.blade.php
@@ -11,7 +11,7 @@
 @section('content')
     @include('fluidbook_publication.link_editor_icons')
     <div class="markdown">
-        <div class="markdown-revision">
+        <div id="markdown-revision" class="markdown-revision">
             <div class="markdown-revision-nav">
                 <a href="#" id="linkeditor-icon-versions" data-panel="form" data-icon="wayback-machine"
                    data-action="panels.toggleForm"
@@ -54,9 +54,8 @@
             </div>
             <div id="markdown-preview" class="markdown-container">
                 <div class="markdown-wrapper">
-                    <div draggable="false" class="markdown-page" id="markdown-page"></div>
                 </div>
-                <div class="handle"></div>
+                <div class="handle preview-handle"></div>
             </div>
             <div class="markdown-editor-container">
                 <div id="editor"></div>