From c73ec5f34876d93c11b7cd425a54a2d861daad62 Mon Sep 17 00:00:00 2001
From: Anna Dabrowska <dabrowska@cosmocode.de>
Date: Wed, 1 Nov 2023 12:08:53 +0100
Subject: [PATCH] Sticky menubar based on JS observer (#189)

Applies fixed positioning to menu bar when the above switch button moves out of the viewport
---
 script.js  | 24 ++++++++++++++++++++++++
 style.less |  9 +++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 40a4e6c6..581b2587 100644
--- a/script.js
+++ b/script.js
@@ -167,10 +167,34 @@ function handleEditSession() {
     $toggleEditorButton.on('click', toggleEditor);
 }
 
+/**
+ * when the editor switch button moves out of the view-port, the menubar gets a class
+ * @see https://codepen.io/hey-nick/pen/mLpmMV
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+ */
+
+function menubar() {
+    const editorswitch = document.querySelector('button[name=prosemirror]');
+    const menubar = document.querySelector('#prosemirror__editor div.menubar');
+    const observer = new IntersectionObserver(
+        ([e]) => {
+            return menubar.classList.toggle('prosemirror-menubar-fixed', e.intersectionRatio !== 1);
+        },
+        {
+            root: null,
+            threshold: [0, 1]
+        }
+    );
+    observer.observe(editorswitch);
+}
+
+
 jQuery(function () {
     initializeProsemirror();
     window.proseMirrorIsActive = false;
 
+    jQuery(menubar);
+
     if (jQuery('#dw__editform').find('[name=prosemirror_json]').length) {
         handleEditSession();
     }
diff --git a/style.less b/style.less
index 4a70a8bc..0ecb91a1 100644
--- a/style.less
+++ b/style.less
@@ -85,11 +85,16 @@
     display: block;
 
     .menubar {
-        position: sticky;
-        top: 0; // Users/Theme developers can override this to stick it below a sticky header
         margin-bottom: 0.5rem;
         border: @border-style;
         border-radius: @border-radius;
+
+        &.prosemirror-menubar-fixed {
+            position: fixed;
+            top: 0;
+            border: 3px solid @ini_border;
+            padding: 1em;
+        }
     }
 }