Menu item children click fix, style setting refactor

stable.user.js

@@ -58,8 +58,8 @@
 
   var data // all data, which is in the resource txt
   var addEventListener // add event listener function
-  // const serverAdress = 'https://qmining.frylabs.net/'
+  const serverAdress = 'https://qmining.frylabs.net/'
-  const serverAdress = 'http://localhost:8080/'
+  // const serverAdress = 'http://localhost:8080/'
 
   // forcing pages for testing. unless you test, do not set these to true!
   // only one of these should be true for testing
@@ -92,7 +92,8 @@
     close: 'Bezárás',
     help: 'Help',
     websiteBugreport: 'Weboldal / Bug report',
-    donate: 'Donate'
+    donate: 'Donate',
+    search: 'Keresés ...'
   }
 
   var texts = huTexts
@@ -1704,19 +1705,20 @@
         addEventListener(mainDiv, 'click', funct) // adding it as click
       }
       // lotsa crap style
-      mainDiv.style.position = 'fixed'
+      SetStyle(mainDiv, {
-      mainDiv.style.zIndex = 999999
+        position: 'fixed',
-      mainDiv.style.textAlign = 'center'
+        zIndex: 999999,
-      mainDiv.style.width = width + 'px'
+        textAlign: 'center',
-      // mainDiv.style.height = height + 'px';
+        width: width + 'px',
-      mainDiv.style.padding = '0px'
+        padding: '0px',
-      mainDiv.style.background = '#222d32' // background color
+        background: '#222d32',
-      mainDiv.style.color = '#ffffff' // text color
+        color: '#ffffff',
-      mainDiv.style.borderColor = '#035a8f' // border color
+        borderColor: '#035a8f',
-      mainDiv.style.border = 'none'
+        border: 'none',
-      mainDiv.style.top = (startFromTop) + 'px'
+        top: (startFromTop) + 'px',
-      mainDiv.style.left = (window.innerWidth - width) / 2 + 'px'
+        left: (window.innerWidth - width) / 2 + 'px',
-      mainDiv.style.opacity = '0.9' // setting starting opacity
+        opacity: '0.9'
+      })
       mainDiv.setAttribute('id', 'scriptMessage')
       var matchPercent = msgItem[0][0].p
       if (isSimpleMessage) {
@@ -1891,30 +1893,30 @@
       // mainDiv.style.left = (window.innerWidth - width) / 2 + 'px';
 
       var menuButtonDiv = document.createElement('div')
-      menuButtonDiv.style.width = buttonWidth + 'px'
+      SetStyle(menuButtonDiv, {
-      menuButtonDiv.style.height = buttonHeight + 'px'
+        width: buttonWidth + 'px',
-      menuButtonDiv.style.top = (window.innerHeight - buttonHeight * 1.5) + 'px'
+        height: buttonHeight + 'px',
-      menuButtonDiv.style.left = window.innerWidth - buttonWidth * 1.5 + 'px'
+        top: (window.innerHeight - buttonHeight * 1.5) + 'px',
-      menuButtonDiv.style.zIndex = 999999 // TO THE MAX
+        left: window.innerWidth - buttonWidth * 1.5 + 'px',
-      menuButtonDiv.style.position = 'fixed'
+        zIndex: 999999,
-      // menuButtonDiv.style.borderStyle = "solid";
+        position: 'fixed',
-      // menuButtonDiv.style.borderWidth = "1px";
+        textAlign: 'center',
-
+        padding: '0px',
-      // design
+        margin: '0px',
-      menuButtonDiv.style.textAlign = 'center'
+        background: 'transparent'
-      menuButtonDiv.style.padding = '0px'
+      })
-      menuButtonDiv.style.margin = '0px'
-      menuButtonDiv.style.background = 'transparent' // background color
 
       // menu text
       // var menuTextBox = CreateNodeWithText(menuButtonDiv, "Kérdések\nMenü");
 
       var menuButton = CreateNodeWithText(menuButtonDiv, texts.menuButtonText, 'button')
-      menuButton.style.width = buttonWidth + 'px'
+      SetStyle(menuButton, {
-      menuButton.style.border = 'none'
+        width: buttonWidth + 'px',
-      menuButton.style.height = buttonHeight - 20 + 'px'
+        border: 'none',
-      menuButton.style.background = '#222d32' // background color
+        height: buttonHeight - 20 + 'px',
-      menuButton.style.color = '#ffffff' // background color
+        background: '#222d32',
+        color: '#ffffff'
+      })
       menuButton.setAttribute('id', 'HelperMenuButton')
 
       menuButton.addEventListener('click', function () {
@@ -1927,12 +1929,14 @@
 
       // 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')
-      questionsTickBox.style.position = ''
-      questionsTickBox.style.left = 10 + 'px'
-      questionsTickBox.style.margin = '5px 5px 5px 5px' // fancy margin
-      questionsTickBox.style.top = 0 + 'px'
 
       menuButtonDiv.appendChild(questionsTickBox) // adding to main div
 
@@ -1971,21 +1975,21 @@
       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')
-      menuDiv.style.width = (window.innerWidth / 2) + 'px'
-      menuDiv.style.top = (window.innerHeight / 10) + 'px'
-      menuDiv.style.left = window.innerWidth / 2 - (window.innerWidth / 2) / 2 + 'px'
-      menuDiv.style.zIndex = 999999
-      menuDiv.style.position = 'fixed'
-
-      // design
-      menuDiv.style.textAlign = 'center'
-      menuDiv.style.padding = '0px'
-      menuDiv.style.background = '#222d32' // background color
-      menuDiv.style.color = '#ffffff' // text color
-      menuDiv.style.borderColor = '#035a8f' // border color
-      menuDiv.style.border = 'none'
-      menuDiv.style.opacity = '1' // setting starting opacity
 
       var fiveMargin = '5px 5px 5px 5px'
       var tbl = document.createElement('table')
@@ -1995,9 +1999,11 @@
 
       // adding headers ---------------------------------------------------------------------------------------------------------------
       var subjTable = document.createElement('div')
-      subjTable.style.margin = fiveMargin
+      SetStyle(subjTable, {
-      subjTable.style.textAlign = 'left'
+        margin: fiveMargin,
-      subjTable.style.width = '98%'
+        textAlign: 'left',
+        width: '98%'
+      })
 
       if (data && data.length > 0) {
         let grouped = data.Subjects.reduce((res, s) => {
@@ -2026,9 +2032,13 @@
 
         // --------------------------------------------------------------------------------
         let searchBar = CreateNodeWithText(subjTable, '', 'input')
-        searchBar.style.backgroundColor = '#222d32'
+        SetStyle(searchBar, {
-        searchBar.style.color = '#ffffff'
+          backgroundColor: '#222d32',
-        searchBar.style.width = '100%'
+          color: '#ffffff',
+          width: '100%',
+          border: 'none'
+        })
+        searchBar.placeholder = texts.search
         searchBar.addEventListener('keyup', function (e) {
           collapsibles.forEach((x) => {
             if (x.innerText.toLowerCase().includes(this.value.toLowerCase())) {
@@ -2040,25 +2050,33 @@
         }) // adding click
 
         Object.entries(grouped).forEach(([subjName, subjGroup], i) => {
-          let b = CreateNodeWithText(subjTable, subjName, 'button')
+          let b = CreateNodeWithText(subjTable, subjName, 'div')
-          b.style.backgroundColor = '#222d32'
+          SetStyle(b, {
-          b.style.color = '#ffffff'
+            backgroundColor: '#222d32',
-          b.style.cursor = 'pointer'
+            color: '#ffffff',
-          b.style.padding = '5px'
+            cursor: 'pointer',
-          b.style.width = '100%'
+            padding: '5px',
-          b.style.border = 'none'
+            width: '100%',
-          b.style.textAlign = 'left'
+            border: 'none',
-          b.style.outline = 'none'
+            textAlign: 'left',
+            outline: 'none'
+          })
           b.setAttribute('id', 'subjectGroup' + i)
           collapsibles.push(b)
 
           let content = document.createElement('div')
-          content.style.padding = '0 18px'
+          SetStyle(content, {
-          content.style.overflow = 'hidden'
+            padding: '0 18px',
-          content.style.backgroundColor = '#222d32'
+            overflow: 'hidden',
-          content.style.borderColor = '#212127'
+            backgroundColor: '#222d32',
-          content.style.borderStyle = 'solid'
+            borderColor: '#212127',
-          content.style.borderWidth = '2px'
+            borderStyle: 'solid',
+            borderWidth: '2px'
+          })
+          content.addEventListener('click', function (e) {
+            e.stopPropagation()
+          })
+
           let ifGroupActive = subjGroup.some((x) => {
             return x.getIfActive()
           })
@@ -2066,10 +2084,9 @@
 
           b.appendChild(content)
 
-          subjGroup.forEach((subj) => {
           let tbl = document.createElement('table')
           content.appendChild(tbl)
-
+          subjGroup.forEach((subj) => {
             var row = tbl.insertRow()
             let td = row.insertCell()
             let text = subj.getYear() || subj.Name
@@ -2092,7 +2109,7 @@
             }) // adding click
           })
 
-          b.addEventListener('click', function () {
+          b.addEventListener('click', function (e) {
             this.classList.toggle('active')
             if (content.style.display === 'block') {
               content.style.display = 'none'
@@ -2134,13 +2151,14 @@
       var splashTickboxCell = splasTickboxRow.insertCell()
 
       var splashTickBox = document.createElement('input')
+      SetStyle(splashTickBox, {
+        position: '',
+        left: 10 + 'px',
+        margin: '5px 5px 5px 5px',
+        top: menuDiv.offsetHeight + 'px'
+      })
       splashTickBox.type = 'checkbox'
       splashTickBox.checked = getVal('showSplash') || false
-      splashTickBox.style.position = ''
-      // splashTickBox.style.background = "white";
-      splashTickBox.style.left = 10 + 'px'
-      splashTickBox.style.margin = '5px 5px 5px 5px' // fancy margin
-      splashTickBox.style.top = menuDiv.offsetHeight + 'px'
       splashTickboxCell.appendChild(splashTickBox) // adding to main div
 
       splashTickBox.addEventListener('click', function () {
@@ -2166,18 +2184,14 @@
       }
       // x button ------------------------------------------------------------------------------------------------------------------------------
       let xButton = CreateNodeWithText(buttonCell, texts.close, 'button')
-      Object.keys(buttonStyle).sort().forEach((key) => {
+      SetStyle(xButton, buttonStyle)
-        xButton.style[key] = buttonStyle[key]
-      })
 
       xButton.addEventListener('click', function () {
         CloseMenu()
       }) // adding clicktextNode
       // help button ----------------------------------------------------------------------------------------------------------------
       let helpButton = CreateNodeWithText(buttonCell, texts.help, 'button')
-      Object.keys(buttonStyle).sort().forEach((key) => {
+      SetStyle(helpButton, buttonStyle)
-        helpButton.style[key] = buttonStyle[key]
-      })
 
       helpButton.addEventListener('click', function () {
         ShowHelp()
@@ -2186,9 +2200,7 @@
       // site link ----------------------------------------------------------------------------------------------------------------
 
       let siteLink = CreateNodeWithText(buttonCell, texts.websiteBugreport, 'button')
-      Object.keys(buttonStyle).sort().forEach((key) => {
+      SetStyle(siteLink, buttonStyle)
-        siteLink.style[key] = buttonStyle[key]
-      })
 
       siteLink.addEventListener('click', function () {
         location.href = serverAdress + 'menuClick' // eslint-disable-line
@@ -2197,9 +2209,7 @@
       // donate link ----------------------------------------------------------------------------------------------------------------
 
       let donateLink = CreateNodeWithText(buttonCell, texts.donate, 'button')
-      Object.keys(buttonStyle).sort().forEach((key) => {
+      SetStyle(donateLink, buttonStyle)
-        donateLink.style[key] = buttonStyle[key]
-      })
 
       donateLink.addEventListener('click', function () {
         location.href = serverAdress + 'donate' // eslint-disable-line
@@ -2247,6 +2257,12 @@
     }
   }
 
+  function SetStyle (target, style) {
+    Object.keys(style).sort().forEach((key) => {
+      target.style[key] = style[key]
+    })
+  }
+
   function CreateNodeWithText (to, text, type) {
     var paragraphElement = document.createElement(type || 'p') // new paragraph
     var textNode = document.createTextNode(text)