Sticky menubar based on JS observer (#189)

Applies fixed positioning to menu bar when the above switch button moves out of the viewport

Author: annda

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();
     }

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;
+        }
     }
 }