fix sticky positioning of ckeditor toolbar, fixes #4945

Closes #4945

Merge request studip/studip!3893

3 files changed, 60 insertions, 48 deletions

diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js
index 7fdb316..c32b751 100644
--- a/resources/assets/javascripts/bootstrap/application.js
+++ b/resources/assets/javascripts/bootstrap/application.js
@@ -358,6 +358,25 @@ jQuery(document).on('click', 'a[data-behaviour~="ajax-toggle"]', function (event
     });
 }(jQuery));
 
+/* Fix issue with ckeditor toolbar positioning */
+(() => {
+    let lastTop = null;
+    STUDIP.Scroll.addHandler('cke-fix', () => {
+        const topBarHeight = document.getElementById('top-bar')?.offsetHeight ?? 0;
+        const contentBarHeight = document.getElementById('contentbar')?.offsetHeight ?? 0;
+        const top = topBarHeight + contentBarHeight;
+
+        if (lastTop !== top) {
+            STUDIP.CSS.removeRule('.ck .ck-sticky-panel .ck-sticky-panel__content_sticky');
+
+            STUDIP.CSS.addRule(
+                '.ck-sticky-panel .ck-sticky-panel__content_sticky',
+                {top: `${top}px !important`}
+            );
+        }
+    })
+})();
+
 STUDIP.domReady(function () {
     const loginForm = document.getElementById('login-form');
     if (!loginForm) {
diff --git a/resources/assets/javascripts/lib/css.js b/resources/assets/javascripts/lib/css.js
index 79d40da..415a0a7 100644
--- a/resources/assets/javascripts/lib/css.js
+++ b/resources/assets/javascripts/lib/css.js
@@ -6,50 +6,54 @@
  * @license GPL2 or any later version
  * @since Stud.IP 3.1
  */
+
 // "Private" stylesheet rules are applied to, generated from a dynamically
 // inserted style tag in the document's header
-var sheet = null;
+let sheet = null;
 
-/**
- * Dynamically add a ruleset for a given selector to the current site
- *
- * @param {string} selector - CSS selector to add rules for
- * @param {object} css - Actual css rules as hash object
- * @param {array} vendors - Optional array of vendor prefixes to apply
- */
-function addRule(selector, css, vendors) {
-    vendors = vendors || [];
-    vendors.push('');
 
-    var style, propText;
-    if (sheet === null) {
-        style = document.createElement('style');
-        sheet = document.head.appendChild(style).sheet;
-    }
+// Expose functions to global STUDIP object, namespaced under CSS
+class CSS {
+    /**
+     * Dynamically add a ruleset for a given selector to the current site
+     *
+     * @param {string} selector - CSS selector to add rules for
+     * @param {object} css - Actual css rules as hash object
+     * @param {array} vendors - Optional array of vendor prefixes to apply
+     */
+    static addRule(selector, css, vendors) {
+        vendors = vendors ?? [];
+        vendors.push('');
 
-    propText = Object.keys(css)
-        .map(function(p) {
-            var result = [],
-                i;
-            for (i = 0; i < vendors.length; i += 1) {
-                result.push(vendors[i] + p + ':' + css[p]);
-            }
-            return result.join(';');
-        })
-        .join(';');
+        if (sheet === null) {
+            let style = document.createElement('style');
+            sheet = document.head.appendChild(style).sheet;
+        }
 
-    sheet.insertRule(selector + '{' + propText + '}', sheet.cssRules.length);
-}
+        let propText = Object.keys(css)
+            .map(p => {
+                let result = [];
+                for (let i = 0; i < vendors.length; i += 1) {
+                    result.push(vendors[i] + p + ':' + css[p]);
+                }
+                return result.join(';');
+            })
+            .join(';');
 
-/**
- * Removes a currently added, dynamic ruleset.
- *
- * @param {string} selector - CSS selector to remove rules for
- */
-function removeRule(selector) {
-    var i;
-    if (sheet !== null) {
-        for (i = sheet.cssRules.length - 1; i >= 0; i -= 1) {
+        sheet.insertRule(selector + '{' + propText + '}', sheet.cssRules.length);
+    }
+
+    /**
+     * Removes a currently added, dynamic ruleset.
+     *
+     * @param {string} selector - CSS selector to remove rules for
+     */
+    static removeRule(selector) {
+        if (sheet === null) {
+            return;
+        }
+
+        for (let i = sheet.cssRules.length - 1; i >= 0; i -= 1) {
             if (sheet.cssRules[i].selectorText === selector) {
                 sheet.deleteRule(i);
             }
@@ -57,10 +61,4 @@ function removeRule(selector) {
     }
 }
 
-// Expose functions to global STUDIP object, namespaced under CSS
-const CSS = {
-    addRule,
-    removeRule
-};
-
 export default CSS;
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 3f2de92..9d231b5 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -681,11 +681,6 @@ html:not(.responsive-display):not(.fullscreen-mode) {
             margin-top: -5px;
             width: 100%;
         }
-
-        // See https://github.com/ckeditor/ckeditor5/issues/5465 why this is necessary
-        .ck .ck-sticky-panel .ck-sticky-panel__content_sticky {
-            top: 120px !important;
-        }
     }
 
 }