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

@ -86,7 +86,7 @@
// only one of these should be true for testing // only one of these should be true for testing
setVal('ISDEVEL', false) setVal('ISDEVEL', false)
const forceTestPage = false const forceTestPage = false
const forceResultPage = false const forceResultPage = false
const forceDefaultPage = false const forceDefaultPage = false
const logElementGetting = false const logElementGetting = false
const log = true const log = true
@ -1182,7 +1182,7 @@
cid = getVal('clientId') cid = getVal('clientId')
overlay.querySelector( overlay.querySelector(
'#infoMainDiv' '#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 // FIXME: if cwith() throws an unhandled error it sais server is not avaible
cwith() cwith()
}) })
@ -1797,13 +1797,40 @@
padding: '0px', padding: '0px',
background: '#222d32', background: '#222d32',
color: '#ffffff', color: '#ffffff',
borderColor: '#035a8f', border: '3px solid #99f',
border: 'none', borderRadius: '5px',
top: startFromTop + 'px', top: startFromTop + 'px',
left: (window.innerWidth - width) / 2 + 'px', left: (window.innerWidth - width) / 2 + 'px',
opacity: '0.9', opacity: '1',
cursor: 'move',
userSelect: 'none',
}) })
mainDiv.setAttribute('id', 'scriptMessage') 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 var matchPercent = msgItem[0][0].p
if (isSimpleMessage) { if (isSimpleMessage) {
var simpleMessageParagrapg = document.createElement('p') // new paragraph var simpleMessageParagrapg = document.createElement('p') // new paragraph
@ -1907,27 +1934,37 @@
var buttonMargin = '2px 2px 2px 2px' // uniform button margin var buttonMargin = '2px 2px 2px 2px' // uniform button margin
if (msgItem[currItem].length > 1) { if (msgItem[currItem].length > 1) {
const buttonStyle = {
color: 'white',
backgroundColor: 'transparent',
margin: buttonMargin,
border: 'none',
fontSize: '30px',
cursor: 'pointer',
}
// PREV SUGG BUTTON ------------------------------------------------------------------------------------------------------------ // PREV SUGG BUTTON ------------------------------------------------------------------------------------------------------------
var prevSuggButton = CreateNodeWithText( var prevSuggButton = CreateNodeWithText(
prevSuggestionCell, 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) ChangeCurrRelevantQuestionIndex(-1)
SetQuestionText() SetQuestionText()
}) })
// NEXT SUGG BUTTON ------------------------------------------------------------------------------------------------------------ // NEXT SUGG BUTTON ------------------------------------------------------------------------------------------------------------
var nextSuggButton = CreateNodeWithText( var nextSuggButton = CreateNodeWithText(
nextSuggestionCell, 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) ChangeCurrRelevantQuestionIndex(1)
SetQuestionText() SetQuestionText()
}) })
@ -2008,6 +2045,8 @@
padding: '0px', padding: '0px',
margin: '0px', margin: '0px',
background: '#262626', background: '#262626',
border: '3px solid #99f',
borderRadius: '5px',
}) })
var tbl = document.createElement('table') var tbl = document.createElement('table')