Opacity change of script messages on mouse scroll

stable.user.js

@@ -88,7 +88,7 @@
   // forcing pages for testing. unless you test, do not set these to true!
   setVal('ISDEVEL', true)
   // only one of these should be true for testing
-  const forceTestPage = true
+  const forceTestPage = false
   const forceResultPage = false
   const forceDefaultPage = false
 
@@ -100,6 +100,8 @@
     'https://qmining.frylabs.net/moodle-test-userscript/stable.user.js?up'
 
   const motdShowCount = 3 /* Ammount of times to show motd */
+  const messageOpacityDelta = 0.1
+  const minMessageOpacity = 0.2
   let infoExpireTime = 60 // Every n seconds basic info should be loaded from server
   var uid = 0
   var cid = 0
@@ -1495,6 +1497,29 @@
     return resultNode
   }
 
+  function addOpacityChangeEvent(elem) {
+    if (!elem.id) {
+      console.warn('element must have ID to add opacity change event!')
+      return
+    }
+
+    let currOpacity = getVal(`${elem.id}_opacity`)
+    elem.addEventListener('mousewheel', e => {
+      const isUp = e.deltaY < 0
+      if (isUp) {
+        if (currOpacity + messageOpacityDelta <= 1) {
+          currOpacity = currOpacity + messageOpacityDelta
+        }
+      } else {
+        if (currOpacity - messageOpacityDelta > minMessageOpacity) {
+          currOpacity = currOpacity - messageOpacityDelta
+        }
+      }
+      elem.style.opacity = currOpacity
+      setVal(`${elem.id}_opacity`, currOpacity)
+    })
+  }
+
   // shows a message with "msg" text, "matchPercent" tip and transp, and "timeout" time
   function ShowMessage(msgItem, timeout, funct) {
     // msgItem help:
@@ -1504,9 +1529,9 @@
     // msgItem[][].p <- a questions precent
     // msgItem[][].m <- a questions message
     try {
-      var defMargin = '0px 5px'
-      var isSimpleMessage = false
-      var simpleMessageText = ''
+      let defMargin = '0px 5px'
+      let isSimpleMessage = false
+      let simpleMessageText = ''
       if (msgItem.isSimple) {
         // parsing msgItem for easier use
         simpleMessageText = msgItem.m
@@ -1524,12 +1549,13 @@
         isSimpleMessage = true
       }
 
-      var appedtTo = overlay // will be appended here
-      var width = window.innerWidth - window.innerWidth / 6 // with of the box
-      var startFromTop = 25 // top distance
+      const appedtTo = overlay // will be appended here
+      const startFromTop = 25 // top distance
+      let width = window.innerWidth - window.innerWidth / 6 // with of the box
 
-      var mainDiv = document.createElement('div') // the main divider, wich items will be attached to
-      mainDiv.setAttribute('id', 'messageMainDiv')
+      const mainDiv = document.createElement('div') // the main divider, wich items will be attached to
+      const id = 'scriptMessage'
+      mainDiv.setAttribute('id', id)
       if (funct) {
         addEventListener(mainDiv, 'click', funct)
       }
@@ -1546,10 +1572,14 @@
         borderRadius: '5px',
         top: startFromTop + 'px',
         left: (window.innerWidth - width) / 2 + 'px',
-        opacity: '1',
+        opacity: getVal(`${id}_opacity`),
         cursor: funct ? 'pointer' : 'move',
       })
-      mainDiv.setAttribute('id', 'scriptMessage')
+
+      // ------------------------------------------------------------------
+      // transparencity
+      // ------------------------------------------------------------------
+      addOpacityChangeEvent(mainDiv)
       // ------------------------------------------------------------------
       // moving msg
       // ------------------------------------------------------------------
@@ -1837,27 +1867,24 @@
           }
         }
       })
-    } catch (e) {
-      Exception(e, 'script error at showing message:')
-    }
-
       return {
         messageElement: mainDiv,
         removeMessage: () => {
           mainDiv.parentNode.removeChild(mainDiv)
         },
       }
+    } catch (e) {
+      Exception(e, 'script error at showing message:')
+    }
   }
 
   // shows a fancy menu
   function ShowMenu() {
     try {
-      var appedtTo = overlay // will be appended here
-
-      // mainDiv.style.left = (window.innerWidth - width) / 2 + 'px';
-
-      var menuButtonDiv = document.createElement('div')
-      menuButtonDiv.setAttribute('id', 'menuButtonDiv')
+      const appedtTo = overlay // will be appended here
+      const menuButtonDiv = document.createElement('div')
+      const id = 'menuButtonDiv'
+      menuButtonDiv.setAttribute('id', id)
       SetStyle(menuButtonDiv, {
         width: '600px',
         // height: buttonHeight + 'px',
@@ -1871,7 +1898,12 @@
         background: '#262626',
         border: '3px solid #99f',
         borderRadius: '5px',
+        opacity: getVal(`${id}_opacity`),
       })
+      // ------------------------------------------------------------------
+      // transparencity
+      // ------------------------------------------------------------------
+      addOpacityChangeEvent(menuButtonDiv)
 
       const xButton = CreateNodeWithText(menuButtonDiv, '❌', 'div')
       SetStyle(xButton, {