Message popup refactor

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)