Merge branch 'master' into new_result_processing

stable.user.js

@@ -21,7 +21,7 @@
 
 // ==UserScript==
 // @name         Moodle/Elearning/KMOOC test help
-// @version      2.0.1.18
+// @version      2.0.1.21
 // @description  Online Moodle/Elearning/KMOOC test help
 // @author       MrFry
 // @match        https://elearning.uni-obuda.hu/main/*
@@ -101,6 +101,11 @@
   var lastestVersion = ''
   var subjInfo
 
+  // array, where elems are added to shadow-root, but its position should be at target.
+  var updatableElements = [] // { elem: ..., target: ... }
+  var elementUpdaterInterval = -1
+  const overlayElemUpdateInterval = 2 // seconds
+
   if (getVal('ISDEVEL')) {
     console.log('Moodle script running in developement mode!')
     infoExpireTime = 1
@@ -512,24 +517,33 @@
     overlay.appendChild(toAppend)
   }
 
-  function createHoverOver(target) {
+  function createHoverOver(appendTo) {
     const overlayElement = document.createElement('div')
     overlay.append(overlayElement)
-    let currX, currY, currWidth, currHeight
-    let { left, top, width, height } = target.getBoundingClientRect()
-    left += window.scrollX
-    top += window.scrollY
 
-    SetStyle(overlayElement, {
+    updatableElements.push({ elem: overlayElement, target: appendTo })
-      pointerEvents: 'none',
+
-      userSelect: 'none',
+    if (elementUpdaterInterval === -1) {
-      position: 'absolute',
+      elementUpdaterInterval = setInterval(() => {
-      zIndex: 999999,
+        updatableElements.forEach(({ elem, target }) => {
-      top: top + 'px',
+          let currX, currY, currWidth, currHeight
-      left: left + 'px',
+          let { left, top, width, height } = target.getBoundingClientRect()
-      width: width + 'px',
+          left += window.scrollX
-      height: height - 10 + 'px',
+          top += window.scrollY
-    })
+
+          SetStyle(elem, {
+            pointerEvents: 'none',
+            userSelect: 'none',
+            position: 'absolute',
+            zIndex: 999999,
+            top: top + 'px',
+            left: left + 'px',
+            width: width + 'px',
+            height: height - 10 + 'px',
+          })
+        })
+      }, overlayElemUpdateInterval * 1000)
+    }
 
     return overlayElement
   }
@@ -1285,6 +1299,25 @@
           mainDiv.style.top = mousePosition.y + offset[1] + 'px'
         }
       })
+
+      const xrow = document.createElement('div')
+      SetStyle(xrow, {
+        height: '20px',
+        display: 'flex',
+        justifyContent: 'flex-end',
+      })
+      mainDiv.appendChild(xrow)
+
+      const xButton = CreateNodeWithText(xrow, '❌', 'div')
+      SetStyle(xButton, {
+        margin: '5px',
+        cursor: 'pointer',
+      })
+      xButton.addEventListener('mousedown', e => {
+        e.stopPropagation()
+        mainDiv.parentNode.removeChild(mainDiv)
+      })
+
       // ------------------------------------------------------------------
       var matchPercent = msgItem[0][0].p
       if (isSimpleMessage) {
@@ -1400,16 +1433,17 @@
           percentTextBox.innerText = relevantQuestion.p + '%'
         }
 
+        const buttonStyle = {
+          color: 'white',
+          backgroundColor: 'transparent',
+          margin: buttonMargin,
+          border: 'none',
+          fontSize: '30px',
+          cursor: 'pointer',
+          userSelect: 'none',
+        }
         var buttonMargin = '2px 2px 2px 2px' // uniform button margin
         if (msgItem[currItem].length > 1) {
-          const buttonStyle = {
-            color: 'white',
-            backgroundColor: 'transparent',
-            margin: buttonMargin,
-            border: 'none',
-            fontSize: '30px',
-            cursor: 'pointer',
-          }
           // PREV SUGG BUTTON ------------------------------------------------------------------------------------------------------------
           var prevSuggButton = CreateNodeWithText(
             prevSuggestionCell,
@@ -1443,8 +1477,8 @@
         } else {
           // if there are multiple items to display
           // PREV QUESTION BUTTON ------------------------------------------------------------------------------------------------------------
-          var prevButton = CreateNodeWithText(prevQuestionCell, '^', 'button')
+          var prevButton = CreateNodeWithText(prevQuestionCell, '⬆️', 'div')
-          prevButton.style.margin = buttonMargin // fancy margin
+          SetStyle(prevButton, buttonStyle)
 
           // event listener
           prevButton.addEventListener('click', function() {
@@ -1452,8 +1486,8 @@
             SetQuestionText()
           })
           // NEXT QUESTION BUTTON ------------------------------------------------------------------------------------------------------------
-          var nextButton = CreateNodeWithText(nextQuestionCell, 'ˇ', 'button')
+          var nextButton = CreateNodeWithText(nextQuestionCell, '⬇️', 'div')
-          nextButton.style.margin = buttonMargin // fancy margin
+          SetStyle(nextButton, buttonStyle)
 
           // event listener
           nextButton.addEventListener('click', function() {