Image handling in messages

stable.user.js

@@ -199,7 +199,7 @@
               resolve({
                 type: 'img',
                 val: res,
-                node: elem,
+                node: img,
               })
             })
           })
@@ -229,34 +229,34 @@
   function getImagesFromElements(elements) {
     return elements.reduce((acc, element) => {
       if (element.type === 'img') {
-        acc.push(element.val)
+        // FIXME: include check needed?
+        if (!acc.includes(element.val)) {
+          acc.push({ val: element.val, node: element.node })
+        }
       }
       return acc
     }, [])
   }
 
-  function oldGetImageFormResult(img) {
+  function getLegacyImageID(imgArray) {
+    // TODO: legacy image ids go into question.images, next to 'val' and 'elem'
     try {
-      var imgURL = []
-      for (var j = 0; j < img.length; j++) {
-        if (!img[j].src.includes('brokenfile')) {
-          var filePart = img[j].src.split('/')
+      return imgArray.map(img => {
+        if (!img.src.includes('brokenfile')) {
+          let filePart = img.src.split('/')
           filePart = filePart[filePart.length - 1]
 
           // shorten string
-          var result = ''
-          var i = 0
+          let result = ''
+          let i = 0
           while (i < filePart.length && i < 30) {
             result += filePart[i]
             i++
           }
 
-          imgURL.push(decodeURI(result))
+          return decodeURI(result)
         }
-      }
-      if (imgURL.length > 0) {
-        return imgURL
-      }
+      })
     } catch (e) {
       log("Couldn't get images from result (old)")
     }
@@ -308,20 +308,21 @@
             data: question.data,
             subj: getCurrentSubjectName(),
           }
-          promises.push(GetXHRQuestionAnswer(questionObj))
+          promises.push(
+            new Promise(resolve => {
+              GetXHRQuestionAnswer(questionObj).then(res => {
+                resolve({
+                  answers: res,
+                  question: question,
+                })
+              })
+            })
+          )
         })
 
-        Promise.all(promises).then(result => {
-          const answers = result.reduce((acc, res) => {
-            const prepared = PrepareAnswers(res)
-            if (prepared) {
-              acc.push(prepared)
-            }
-            return acc
-          }, [])
-
+        Promise.all(promises).then(results => {
           removeLoadingMessage()
-          ShowAnswers(answers)
+          ShowAnswers(results)
         })
       })
       .catch(err => {
@@ -397,6 +398,23 @@
     }
   }
 
+  function getImgNodesFromArray(arr) {
+    return arr.reduce((acc, x) => {
+      if (Array.isArray(x)) {
+        x.forEach(y => {
+          if (y.type === 'img') {
+            acc.push(y.node)
+          }
+        })
+      } else {
+        if (x.type === 'img') {
+          acc.push(x.node)
+        }
+      }
+      return acc
+    }, [])
+  }
+
   function getQuestionPromiseForSingleQuestion(node) {
     return new Promise(resolve => {
       try {
@@ -430,8 +448,15 @@
                 return [...acc, ...x]
               }, []),
             ])
-            images = uniq(images)
-            const data = getDataFromTest(images, possibleAnswerArray)
+            const imageNodes = getImgNodesFromArray([
+              ...question,
+              ...possibleAnswerArray,
+            ])
+            const data = getDataFromTest(
+              images,
+              possibleAnswerArray,
+              getLegacyImageID(imageNodes)
+            )
 
             resolve({
               question: questionText,
@@ -454,15 +479,22 @@
     })
   }
 
-  function getDataFromTest(images) {
-    if (images.length > 0) {
+  function getDataFromTest(hashedImages, possibleAnswers, legacyImages) {
+    if (hashedImages.length > 0) {
       return {
         type: 'image',
-        images: images,
+        possibleAnswers,
+        images: hashedImages.map(x => {
+          return x.val
+        }),
+        // TODO
+        // images: legacyImages,
+        hashedImages: hashedImages,
       }
     } else {
       return {
         type: 'simple',
+        possibleAnswers,
       }
     }
   }
@@ -864,8 +896,9 @@
 
   function appendBelowElement(el, toAppend) {
     const rect = el.getBoundingClientRect()
-    const left = rect.left + window.scrollX
-    const top = rect.top + window.scrollY
+    const correction = 8
+    const left = rect.left + window.scrollX - correction
+    const top = rect.top + window.scrollY - correction
 
     SetStyle(toAppend, {
       position: 'absolute',
@@ -1189,33 +1222,56 @@
   // : Answering stuffs {{{
 
   function PrepareAnswers(result) {
-    if (result.length > 0) {
-      return result.map(res => {
-        let msg = res.q.Q + '\n'
+    const { answers, question } = result
+    if (answers.length > 0) {
+      return answers.map(answer => {
+        const { Q, A, data } = answer.q
+        let msg = Q + '\n' + A
 
-        msg += res.q.A
-
-        if (res.q.data.type === 'image') {
-          msg +=
-            '\n\nKépek fenti válaszok sorrendjében: ' +
-            res.q.data.images.join(', ') // if it has image part, adding that too
+        // TODO: show 'képek sorrendben' if there are no new kind of image ids
+        if (data.type === 'image') {
+          question.images.forEach((img, i) => {
+            const regex = new RegExp(`\\[${img.val}\\]`, 'g')
+            msg = msg.replace(regex, '[' + i.toString() + ']')
+          })
         }
 
         return {
           m: msg,
-          p: res.match,
-          header: res.detailedMatch.matchedSubjName,
+          p: answer.match,
+          header: answer.detailedMatch.matchedSubjName,
         }
       })
     }
   }
 
-  function ShowAnswers(answers) {
-    assert(answers)
+  function addImageIdsToImageNodes(imgs) {
+    imgs.images.forEach((img, i) => {
+      const text = document.createElement('div')
+      text.innerText = `[${i}]`
+      SetStyle(text, {
+        backgroundColor: '#333',
+        borderRadius: '5px',
+        color: 'white',
+        opacity: 0.7,
+        fontSize: '13px',
+      })
+      appendBelowElement(img.node, text)
+    })
+  }
+
+  function ShowAnswers(results) {
+    const answers = results.reduce((acc, res) => {
+      const prepared = PrepareAnswers(res)
+      addImageIdsToImageNodes(res.question)
+      if (prepared) {
+        acc.push(prepared)
+      }
+      return acc
+    }, [])
 
     // TODO: show which image belongs to which text
 
-    console.log(answers)
     if (answers.length > 0) {
       ShowMessage(answers)
     } else {
@@ -1458,8 +1514,7 @@
       var mainDiv = document.createElement('div') // the main divider, wich items will be attached to
       mainDiv.setAttribute('id', 'messageMainDiv')
       if (funct) {
-        // if there is a function as parameter
-        addEventListener(mainDiv, 'click', funct) // adding it as click
+        addEventListener(mainDiv, 'click', funct)
       }
       // lotsa crap style
       SetStyle(mainDiv, {