Opacity change of script messages on mouse scroll

This commit is contained in:
mrfry 2020-12-05 10:46:55 +01:00
parent 50b6b93a46
commit dea0b115b7

View file

@ -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, {