Message box redesign, now dragable

This commit is contained in:
mrfry 2020-11-12 13:53:39 +01:00
parent 37b7d43115
commit ad61c7052a

View file

@ -1182,7 +1182,7 @@
cid = getVal('clientId')
overlay.querySelector(
'#infoMainDiv'
).innerText = `${subjInfo.subjects} tárgy, ${subjInfo.questions} kérdés. Felh #${uid}`
).innerText = `${subjInfo.subjects} tárgy, ${subjInfo.questions} kérdés. User ID: ${uid}`
// FIXME: if cwith() throws an unhandled error it sais server is not avaible
cwith()
})
@ -1797,13 +1797,40 @@
padding: '0px',
background: '#222d32',
color: '#ffffff',
borderColor: '#035a8f',
border: 'none',
border: '3px solid #99f',
borderRadius: '5px',
top: startFromTop + 'px',
left: (window.innerWidth - width) / 2 + 'px',
opacity: '0.9',
opacity: '1',
cursor: 'move',
userSelect: 'none',
})
mainDiv.setAttribute('id', 'scriptMessage')
// ------------------------------------------------------------------
// moving msg
// ------------------------------------------------------------------
let isMouseDown = false
let offset = [0, 0]
let mousePosition
mainDiv.addEventListener('mousedown', e => {
isMouseDown = true
offset = [mainDiv.offsetLeft - e.clientX, mainDiv.offsetTop - e.clientY]
})
mainDiv.addEventListener('mouseup', e => {
isMouseDown = false
})
mainDiv.addEventListener('mousemove', e => {
e.preventDefault()
if (isMouseDown) {
mousePosition = {
x: e.clientX,
y: e.clientY,
}
mainDiv.style.left = mousePosition.x + offset[0] + 'px'
mainDiv.style.top = mousePosition.y + offset[1] + 'px'
}
})
// ------------------------------------------------------------------
var matchPercent = msgItem[0][0].p
if (isSimpleMessage) {
var simpleMessageParagrapg = document.createElement('p') // new paragraph
@ -1907,27 +1934,37 @@
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,
'<',
'button'
'⬅️',
'div'
)
prevSuggButton.style.margin = buttonMargin // fancy margin
SetStyle(prevSuggButton, buttonStyle)
prevSuggButton.addEventListener('click', function() {
prevSuggButton.addEventListener('mousedown', function(e) {
e.stopPropagation()
ChangeCurrRelevantQuestionIndex(-1)
SetQuestionText()
})
// NEXT SUGG BUTTON ------------------------------------------------------------------------------------------------------------
var nextSuggButton = CreateNodeWithText(
nextSuggestionCell,
'>',
'button'
'➡️',
'div'
)
nextSuggButton.style.margin = buttonMargin // fancy margin
SetStyle(nextSuggButton, buttonStyle)
nextSuggButton.addEventListener('click', function() {
nextSuggButton.addEventListener('mousedown', function(e) {
e.stopPropagation()
ChangeCurrRelevantQuestionIndex(1)
SetQuestionText()
})
@ -2008,6 +2045,8 @@
padding: '0px',
margin: '0px',
background: '#262626',
border: '3px solid #99f',
borderRadius: '5px',
})
var tbl = document.createElement('table')