diff --git a/stable.user.js b/stable.user.js index 0da4ef0..085ccb2 100755 --- a/stable.user.js +++ b/stable.user.js @@ -110,9 +110,9 @@ // Devel vars // ------------------------------------------------------------------------------ // forcing pages for testing. unless you test, do not set these to true! - setVal('ISDEVEL', false) + setVal('ISDEVEL', true) // only one of these should be true for testing - const forceTestPage = false + const forceTestPage = true const forceResultPage = false const forceDefaultPage = false // ------------------------------------------------------------------------------ @@ -1664,8 +1664,229 @@ }) } - // shows a message with "msg" text, "matchPercent" tip and transp, and "timeout" time + function addMoveEventListener(elem) { + let isMouseDown = false + let offset = [0, 0] + let mousePosition + elem.addEventListener('mousedown', e => { + isMouseDown = true + offset = [elem.offsetLeft - e.clientX, elem.offsetTop - e.clientY] + }) + elem.addEventListener('mouseup', () => { + isMouseDown = false + }) + elem.addEventListener('mousemove', e => { + if (isMouseDown) { + mousePosition = { + x: e.clientX, + y: e.clientY, + } + elem.style.left = mousePosition.x + offset[0] + 'px' + elem.style.top = mousePosition.y + offset[1] + 'px' + } + }) + } + function ShowMessage(msgItem, timeout, funct) { + let isSimpleMessage = false + let simpleMessageText = '' + const movingEnabled = !funct + if (typeof msgItem === 'string') { + simpleMessageText = msgItem + if (simpleMessageText === '') { + // if msg is empty + return + } + msgItem = [ + [ + { + m: simpleMessageText, + }, + ], + ] + isSimpleMessage = true + } + + // ------------------------------------------------------------------------- + const id = 'scriptMessage' + let width = window.innerWidth - window.innerWidth / 6 // with of the box + const messageElem = document.createElement('div') + messageElem.setAttribute('id', id) + addOpacityChangeEvent(messageElem) + SetStyle(messageElem, { + position: 'fixed', + zIndex: 999999, + textAlign: 'center', + width: width + 'px', + padding: '0px', + background: '#222d32', + color: '#ffffff', + border: '3px solid #99f', + borderRadius: '5px', + top: '30px', + left: (window.innerWidth - width) / 2 + 'px', + opacity: getVal(`${id}_opacity`), + cursor: funct ? 'pointer' : 'move', + }) + if (funct) { + addEventListener(messageElem, 'click', funct) + } + if (movingEnabled) { + addMoveEventListener(messageElem) + } + + // ------------------------------------------------------------------------- + + const xButton = CreateNodeWithText(null, '❌', 'div') + SetStyle(xButton, { + cursor: 'pointer', + position: 'absolute', + right: '0px', + display: 'inline', + margin: '3px', + }) + xButton.addEventListener('mousedown', e => { + e.stopPropagation() + messageElem.parentNode.removeChild(messageElem) + }) + messageElem.appendChild(xButton) + + // ------------------------------------------------------------------------- + + let currQuestionIndex = 0 + let currPossibleAnswerIndex = 0 + const getCurrMsg = () => { + return msgItem[currQuestionIndex][currPossibleAnswerIndex] + } + + // ------------------------------------------------------------------------- + + const sidesWidth = '10%' + const childrenTree = { + header: { + style: { + display: getCurrMsg().header ? '' : 'none', + }, + }, + msgContainer: { + style: { + display: 'flex', + width: '100%', + padding: '10px 0px', + }, + children: { + leftSideDiv: { + style: { + width: sidesWidth, + display: isSimpleMessage ? 'none' : '', + }, + children: { + questionIndex: { + style: { + backgroundColor: 'red', + }, + }, + matchPercent: { + style: { + backgroundColor: 'green', + }, + }, + prevPossible: { + style: { + backgroundColor: 'blue', + }, + }, + }, + }, + msgDiv: { + style: { + flex: '1', + whiteSpace: 'pre-line', + cursor: funct ? 'pointer' : 'auto', + }, + }, + rightSideDiv: { + style: { + width: sidesWidth, + display: isSimpleMessage ? 'none' : '', + }, + children: { + prevQuestion: { + style: { + backgroundColor: 'red', + }, + }, + nextQuestion: { + style: { + backgroundColor: 'green', + }, + }, + nextPossible: { + style: { + backgroundColor: 'blue', + }, + }, + }, + }, + }, + }, + } + + const result = {} + createHtml(childrenTree, messageElem, result) + + // ------------------------------------------------------------------------- + + try { + result.msgContainer.child.msgDiv.elem.addEventListener('mousedown', e => { + e.stopPropagation() + }) + } catch (e) { + console.warn('Error setting up msg') + console.warn(e) + } + + // ------------------------------------------------------------------------- + + const updateMessageText = () => { + try { + result.header.elem.innerText = getCurrMsg().header + result.msgContainer.child.msgDiv.elem.innerText = getCurrMsg().m + + result.msgContainer.child.leftSideDiv.child.questionIndex.elem.innerText = + (currQuestionIndex + 1).toString() + '.' + result.msgContainer.child.leftSideDiv.child.matchPercent.elem.innerText = getCurrMsg().p + result.msgContainer.child.leftSideDiv.child.prevPossible.elem.innerText = + '<' + + result.msgContainer.child.rightSideDiv.child.prevQuestion.elem.innerText = + '^' + result.msgContainer.child.rightSideDiv.child.nextQuestion.elem.innerText = + '˘' + result.msgContainer.child.rightSideDiv.child.nextPossible.elem.innerText = + '>' + + result.msgContainer.child.msgDiv.elem.innerText = getCurrMsg().m + } catch (e) { + console.warn('Error in message updating') + console.warn(e) + } + } + updateMessageText() + + // ------------------------------------------------------------------------- + + overlay.appendChild(messageElem) + + return { + messageElement: messageElem, + removeMessage: () => { + messageElem.parentNode.removeChild(messageElem) + }, + } + } + + function ShowMessageOld(msgItem, timeout, funct) { // msgItem help: // [ [ {}{}{}{} ] [ {}{}{} ] ] // msgItem[] <- a questions stuff @@ -2315,6 +2536,29 @@ }) } + function createHtml(children, appendTo, result) { + try { + Object.keys(children).forEach(key => { + const currElem = children[key] + const elem = document.createElement('div') + appendTo.appendChild(elem) + result[key] = { + elem: elem, + child: {}, + } + if (currElem.style) { + SetStyle(elem, currElem.style) + } + if (currElem.children) { + createHtml(currElem.children, elem, result[key].child) + } + }) + } catch (e) { + console.warn('Error in createHtml') + console.warn(e) + } + } + function CreateNodeWithText(to, text, type) { var paragraphElement = document.createElement(type || 'p') // new paragraph var textNode = document.createTextNode(text)