From dea0b115b76e7287e2d1a8ecf2819680ea0bf2dc Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Sat, 5 Dec 2020 10:46:55 +0100
Subject: [PATCH] Opacity change of script messages on mouse scroll
---
stable.user.js | 80 +++++++++++++++++++++++++++++++++++---------------
1 file changed, 56 insertions(+), 24 deletions(-)
diff --git a/stable.user.js b/stable.user.js
index f2e1539..737b2dd 100755
--- a/stable.user.js
+++ b/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 @@
}
}
})
+ return {
+ messageElement: mainDiv,
+ removeMessage: () => {
+ mainDiv.parentNode.removeChild(mainDiv)
+ },
+ }
} catch (e) {
Exception(e, 'script error at showing message:')
}
-
- return {
- messageElement: mainDiv,
- removeMessage: () => {
- mainDiv.parentNode.removeChild(mainDiv)
- },
- }
}
// 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, {