Menu button redesign

stable.user.js

@@ -71,27 +71,25 @@
   const motdShowCount = 3 /* Ammount of times to show motd */
   var motd = ''
   var lastestVersion = ''
+  var subjInfo
 
   const huTexts = {
     lastChangeLog: '- "Húzza a megfelelő helyre ..." kérdés lekezelése\n- Kód refactor\n- Ha valami elszállt: <a href="https://qmining.frylabs.net">feedback</a> pls',
-    passiveModeActivated: 'Passzív mód bekapcsolva, mostantól kérdések nem lesznek szervertől letöltve.',
-    passiveModeDeactivated: 'Passzív mód kikapcsolva, frissíts az érvénybe lépéshez!',
-    passiveModeActiveOnTest: 'Passzív mód bekapcsolva, válaszok megjelenítéséhez menü gomb alatt kapcsold ki, és frissíts!',
     fatalError: 'Fatál error. Check console (f12). Kattints az üzenetre az összes kérdés/válaszért manuális kereséshez!',
     consoleErrorInfo: 'Itteni hibák 100% a moodle hiba. Kivéve, ha oda van írva hogy script error ;) Ha ilyesmi szerepel itt, akkor olvasd el a segítség szekciót!',
     freshStartWarning: '<h1>Moodle teszt userscript:<h1><h3>1.5.0 verzió: a script mostantól XMLHTTP kéréseket küld szerver fele! Erre a userscript futtató kiegészitőd is figyelmeztetni fog! Ha ez történik, a script rendes működése érdekében engedélyezd (Always allow domain)! Ha nem akarod, hogy ez történjen, akkor ne engedélyezd, vagy a menüben válaszd ki a "helyi fájl használata" opciót!</h3> <h3>Elküldött adatok: minden teszt után a kérdés-válasz páros. Fogadott adatok: Az összes eddig ismert kérdés. Érdemes help-et elolvasni!!!</h3><h5>Ez az ablak frissités után eltűnik. Ha nem, akkor a visza gombbal próbálkozz.</h5>',
     noResult: 'Nincs találat :( Kattints az üzenetre az összes kérdés/válaszért manuális kereséshez! Előfordulhat, hogy a tárgyat nem válsztottad ki a menüben.',
     videoHelp: 'Miután elindítottad: Play/pause: space. Seek: Bal/jobb nyíl.',
     menuButtonText: 'Kérdések Menu',
-    passiveModeText: 'Passzív mód',
-    passiveModeActivePopupMenuText: 'Passszív mód bekapcsolva. Kapcsold ki a kérdések betöltéséhez!',
     couldntLoadDataPopupMenuText: 'A kérdéseket nem lehetett beolvasni, ellenőrizd hogy elérhető-e a szerver',
     showGreetingOnEveryPage: 'Üdvözlő üzenet mutatása minden oldalon',
     close: 'Bezárás',
     help: 'Help',
     websiteBugreport: 'Weboldal / Bug report',
     donate: 'Donate',
-    search: 'Keresés ...'
+    search: 'Keresés ...',
+    loading: 'Betöltés ...',
+    noServer: 'Nem elérhető a szerver!'
   }
 
   var texts = huTexts
@@ -686,36 +684,28 @@
     Init(function () {
       var url = location.href // eslint-disable-line
 
-      if (getVal('skipLoad')) {
+      try {
-        if (url.includes('/quiz/') && url.includes('attempt.php')) {
+        if ((url.includes('/quiz/') && url.includes('attempt.php')) || forceTestPage) { // if the current page is a test
-          ShowMessage({
+          HandleQuiz()
-            m: texts.passiveModeActiveOnTest,
+        } else if ((url.includes('/quiz/') && url.includes('review.php')) || forceResultPage) { // if the current window is a test-s result
-            isSimple: true
+          HandleResults(url)
-          })
+        } else if ((!url.includes('/quiz/') && !url.includes('review.php') && !url.includes('.pdf')) ||
-        }
-      } else {
-        try {
-          if ((url.includes('/quiz/') && url.includes('attempt.php')) || forceTestPage) { // if the current page is a test
-            HandleQuiz()
-          } else if ((url.includes('/quiz/') && url.includes('review.php')) || forceResultPage) { // if the current window is a test-s result
-            HandleResults(url)
-          } else if ((!url.includes('/quiz/') && !url.includes('review.php') && !url.includes('.pdf')) ||
             (forceDefaultPage)) { // if the current window is any other window than a quiz or pdf.
-            HandleUI(url)
+          HandleUI(url)
-          }
-        } catch (e) {
-          ShowMessage({
-            m: texts.fatalError,
-            isSimple: true
-          }, undefined, () => {
-            OpenErrorPage(e)
-          })
-
-          Exception(e, 'script error at main:')
         }
-        if (url.includes('eduplayer')) { AddVideoHotkeys(url) } // adding video hotkeys
+      } catch (e) {
-        Log(texts.consoleErrorInfo)
+        ShowMessage({
+          m: texts.fatalError,
+          isSimple: true
+        }, undefined, () => {
+          OpenErrorPage(e)
+        })
+
+        Exception(e, 'script error at main:')
       }
+      if (url.includes('eduplayer')) { AddVideoHotkeys(url) } // adding video hotkeys
+      Log(texts.consoleErrorInfo)
+
       console.log('Moodle Test Script run time:')
       console.timeEnd('main')
     })
@@ -723,7 +713,6 @@
     if (forceTestPage || forceResultPage || forceDefaultPage) {
       if (document.getElementById('scriptMessage')) { document.getElementById('scriptMessage').style.background = 'green' }
     }
-    ShowMenuList() // TODO: remove
   }
   // : }}}
 
@@ -764,7 +753,15 @@
     GetXHRInfos().then((inf) => {
       lastestVersion = inf.version
       motd = inf.motd
+      subjInfo = inf.subjinfo
+      document.getElementById('infoMainDiv').innerText = `${subjInfo.subjects} tárgy, ${subjInfo.questions} kérdés`
+      // FIXME: if cwith() throws an unhandled error it sais server is not avaible
       cwith()
+    }).catch((err) => {
+      document.getElementById('menuButtonDiv').style.backgroundColor = 'red'
+      document.getElementById('infoMainDiv').innerText = texts.noServer
+      console.log(err)
+      console.log('haaaaaaaa')
     })
   }
 
@@ -1409,138 +1406,31 @@
   // shows a fancy menu
   function ShowMenu () {
     try {
-      var buttonWidth = 100 // button size ;)
-      var buttonHeight = 85
       var appedtTo = document.body // will be appended here
 
       // mainDiv.style.left = (window.innerWidth - width) / 2 + 'px';
 
       var menuButtonDiv = document.createElement('div')
+      menuButtonDiv.setAttribute('id', 'menuButtonDiv')
       SetStyle(menuButtonDiv, {
-        width: buttonWidth + 'px',
+        // width: buttonWidth + 'px',
         // height: buttonHeight + 'px',
-        top: (window.innerHeight - buttonHeight * 1.5) + 'px',
+        top: (window.innerHeight - 80) + 'px',
-        left: window.innerWidth - buttonWidth * 1.5 + 'px',
+        left: '10px',
         zIndex: 999999,
         position: 'fixed',
         textAlign: 'center',
         padding: '0px',
         margin: '0px',
-        background: 'transparent'
+        background: '#262626'
       })
 
-      // menu text
-      // var menuTextBox = CreateNodeWithText(menuButtonDiv, "Kérdések\nMenü");
-
-      var menuButton = CreateNodeWithText(menuButtonDiv, texts.menuButtonText, 'button')
-      SetStyle(menuButton, {
-        width: buttonWidth + 'px',
-        border: 'none',
-        height: buttonHeight - 20 + 'px',
-        background: '#222d32',
-        color: '#ffffff'
-      })
-      menuButton.setAttribute('id', 'HelperMenuButton')
-
-      menuButton.addEventListener('click', function () {
-        if (document.getElementById('HelperMenu') == null) {
-          ShowMenuList()
-        } else {
-          CloseMenu()
-        }
-      }) // adding click
-
-      // passive mode stuff
-      var questionsTickBox = document.createElement('input')
-      SetStyle(questionsTickBox, {
-        position: '',
-        left: 10 + 'px',
-        margin: '5px 5px 5px 5px',
-        top: 0 + 'px'
-      })
-      questionsTickBox.type = 'checkbox'
-      questionsTickBox.checked = getVal('skipLoad')
-
-      menuButtonDiv.appendChild(questionsTickBox) // adding to main div
-
-      questionsTickBox.addEventListener('click', function () {
-        setVal('skipLoad', questionsTickBox.checked)
-        var msg = ''
-        if (getVal('skipLoad')) {
-          msg = texts.passiveModeActivated
-        } else {
-          msg = texts.passiveModeDeactivated
-        }
-
-        ShowMessage({
-          m: msg,
-          isSimple: true
-        }, 6)
-      })
-      var loadDataCheckBoxText = CreateNodeWithText(questionsTickBox, texts.passiveModeText, 'span')
-      loadDataCheckBoxText.style.fontSize = '12px'
-
-      menuButtonDiv.appendChild(loadDataCheckBoxText)
-
-      addEventListener(window, 'resize', function () {
-        menuButtonDiv.style.left = window.innerWidth - buttonWidth * 2 + 'px'
-      })
-
-      appedtTo.appendChild(menuButtonDiv)
-    } catch (e) {
-      Exception(e, 'script error at showing menu:')
-    }
-  }
-
-  // shows a fancy menu list with the subjects
-  function ShowMenuList () {
-    try {
-      var appedtTo = document.body // will be appended here
-
-      var menuDiv = document.createElement('div')
-      SetStyle(menuDiv, {
-        width: (window.innerWidth / 2) + 'px',
-        top: (window.innerHeight / 10) + 'px',
-        left: window.innerWidth / 2 - (window.innerWidth / 2) / 2 + 'px',
-        zIndex: 999999,
-        position: 'fixed',
-        textAlign: 'center',
-        padding: '0px',
-        background: '#222d32',
-        color: '#ffffff',
-        borderColor: '#035a8f',
-        border: 'none',
-        opacity: '1'
-      })
-      menuDiv.setAttribute('id', 'HelperMenu')
-
-      var fiveMargin = '5px 5px 5px 5px'
       var tbl = document.createElement('table')
-      tbl.style.margin = fiveMargin
+      tbl.style.margin = '5px 5px 5px 5px'
       tbl.style.textAlign = 'left'
       tbl.style.width = '98%'
+      menuButtonDiv.appendChild(tbl)
 
-      // adding headers ---------------------------------------------------------------------------------------------------------------
-      var subjTable = document.createElement('div')
-      SetStyle(subjTable, {
-        margin: fiveMargin,
-        textAlign: 'left',
-        width: '98%'
-      })
-
-      var scrollDiv = document.createElement('div')
-      scrollDiv.appendChild(subjTable)
-      scrollDiv.style.textAlign = 'center'
-      var subjtblrow = tbl.insertRow()
-      var subjtbltd = subjtblrow.insertCell()
-      subjtbltd.appendChild(scrollDiv)
-
-      // TODO: something in menubox
-      GetXHRSubjCount(true).then((res) => {
-        CreateNodeWithText(scrollDiv, `${res.subjects} tárgy, ${res.questions} kérdés`, 'div')
-      })
-
-      // setting up buttons
       var buttonRow = tbl.insertRow()
       var buttonCell = buttonRow.insertCell()
       buttonCell.style.textAlign = 'center'
@@ -1549,19 +1439,12 @@
         position: '',
         left: 10 + 'px',
         margin: '5px 5px 5px 5px',
-        top: menuDiv.offsetHeight + 'px',
+        top: 10 + 'px',
         border: 'none',
-        backgroundColor: '#202020',
+        backgroundColor: '#222d32',
         color: '#ffffff',
         cursor: 'pointer'
       }
-      // x button ------------------------------------------------------------------------------------------------------------------------------
-      let xButton = CreateNodeWithText(buttonCell, texts.close, 'button')
-      SetStyle(xButton, buttonStyle)
-
-      xButton.addEventListener('click', function () {
-        CloseMenu()
-      }) // adding clicktextNode
       // help button ----------------------------------------------------------------------------------------------------------------
       let helpButton = CreateNodeWithText(buttonCell, texts.help, 'button')
       SetStyle(helpButton, buttonStyle)
@@ -1588,31 +1471,22 @@
         location.href = serverAdress + 'donate' // eslint-disable-line
       })
 
-      // addEventListener(window, 'scroll', function () {
-      //   menuDiv.style.top = (pageYOffset + window.innerHeight / 3) + 'px';
-      // })
       addEventListener(window, 'resize', function () {
-        menuDiv.style.left = window.innerWidth / 2 + 'px'
+        menuButtonDiv.style.top = (window.innerHeight - 70) + 'px'
       })
 
-      menuDiv.appendChild(tbl)
+      // TODO: add this only after stuff loaded ( or not loaded )
-      appedtTo.appendChild(menuDiv)
+      let infoDiv = CreateNodeWithText(menuButtonDiv, texts.loading, 'div')
+      infoDiv.setAttribute('id', 'infoMainDiv')
+      SetStyle(infoDiv, {
+        color: '#ffffff',
+        margin: '5px'
+      })
+
+      appedtTo.appendChild(menuButtonDiv)
     } catch (e) {
-      Exception(e, 'script error at showing menu list:')
+      Exception(e, 'script error at showing menu:')
     }
-
-    document.addEventListener('keydown', EscClose)
-  }
-
-  function EscClose (e) {
-    if (e.keyCode === 27) { CloseMenu() }
-  }
-
-  function CloseMenu () {
-    document.getElementById('HelperMenu').parentNode.removeChild(document.getElementById(
-      'HelperMenu'))
-
-    document.removeEventListener('keydown', EscClose)
   }
 
   // : }}}
@@ -1644,31 +1518,13 @@
     return paragraphElement
   }
 
-  function GetXHRSubjCount () {
-    let url = 'datacount'
-    return new Promise((resolve, reject) => {
-      xmlhttpRequest({
-        method: 'GET',
-        url: serverAdress + url,
-        onload: function (response) {
-          resolve(JSON.parse(response.responseText))
-        },
-        onerror: (e) => {
-          console.log('GET ERROR', e)
-          reject(new Error('get error'))
-        }
-      })
-    })
-  }
-
   function GetXHRInfos () {
     return new Promise((resolve, reject) => {
       xmlhttpRequest({
         method: 'GET',
-        url: serverAdress + 'infos?version=true&motd=true',
+        url: serverAdress + 'infos?version=true&motd=true&subjinfo=true',
         onload: function (response) {
-          // resolve(JSON.parse(response.responseText))
+          resolve(JSON.parse(response.responseText))
-          resolve(response.responseText)
         },
         onerror: (e) => {
           console.log('GET ERROR', e)