From 5773a950f5b76c73b884afde6debbcda0497c299 Mon Sep 17 00:00:00 2001 From: MrFry Date: Wed, 22 Jan 2020 17:11:59 +0100 Subject: [PATCH] Menu item children click fix, style setting refactor --- stable.user.js | 206 ++++++++++++++++++++++++++----------------------- 1 file changed, 111 insertions(+), 95 deletions(-) diff --git a/stable.user.js b/stable.user.js index caffb09..f6d254d 100755 --- a/stable.user.js +++ b/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 = 'http://localhost:8080/' + const serverAdress = 'https://qmining.frylabs.net/' + // 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' - mainDiv.style.zIndex = 999999 - mainDiv.style.textAlign = 'center' - mainDiv.style.width = width + 'px' - // mainDiv.style.height = height + 'px'; - mainDiv.style.padding = '0px' - mainDiv.style.background = '#222d32' // background color - mainDiv.style.color = '#ffffff' // text color - mainDiv.style.borderColor = '#035a8f' // border color - mainDiv.style.border = 'none' - mainDiv.style.top = (startFromTop) + 'px' - mainDiv.style.left = (window.innerWidth - width) / 2 + 'px' - mainDiv.style.opacity = '0.9' // setting starting opacity + SetStyle(mainDiv, { + position: 'fixed', + zIndex: 999999, + textAlign: 'center', + width: width + 'px', + padding: '0px', + background: '#222d32', + color: '#ffffff', + borderColor: '#035a8f', + border: 'none', + top: (startFromTop) + 'px', + left: (window.innerWidth - width) / 2 + 'px', + 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' - menuButtonDiv.style.height = buttonHeight + 'px' - menuButtonDiv.style.top = (window.innerHeight - buttonHeight * 1.5) + 'px' - menuButtonDiv.style.left = window.innerWidth - buttonWidth * 1.5 + 'px' - menuButtonDiv.style.zIndex = 999999 // TO THE MAX - menuButtonDiv.style.position = 'fixed' - // menuButtonDiv.style.borderStyle = "solid"; - // menuButtonDiv.style.borderWidth = "1px"; - - // design - menuButtonDiv.style.textAlign = 'center' - menuButtonDiv.style.padding = '0px' - menuButtonDiv.style.margin = '0px' - menuButtonDiv.style.background = 'transparent' // background color + SetStyle(menuButtonDiv, { + width: buttonWidth + 'px', + height: buttonHeight + 'px', + top: (window.innerHeight - buttonHeight * 1.5) + 'px', + left: window.innerWidth - buttonWidth * 1.5 + 'px', + zIndex: 999999, + position: 'fixed', + textAlign: 'center', + padding: '0px', + margin: '0px', + background: 'transparent' + }) // menu text // var menuTextBox = CreateNodeWithText(menuButtonDiv, "Kérdések\nMenü"); var menuButton = CreateNodeWithText(menuButtonDiv, texts.menuButtonText, 'button') - menuButton.style.width = buttonWidth + 'px' - menuButton.style.border = 'none' - menuButton.style.height = buttonHeight - 20 + 'px' - menuButton.style.background = '#222d32' // background color - menuButton.style.color = '#ffffff' // background color + SetStyle(menuButton, { + width: buttonWidth + 'px', + border: 'none', + height: buttonHeight - 20 + 'px', + 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 - subjTable.style.textAlign = 'left' - subjTable.style.width = '98%' + SetStyle(subjTable, { + margin: fiveMargin, + 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' - searchBar.style.color = '#ffffff' - searchBar.style.width = '100%' + SetStyle(searchBar, { + backgroundColor: '#222d32', + 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') - b.style.backgroundColor = '#222d32' - b.style.color = '#ffffff' - b.style.cursor = 'pointer' - b.style.padding = '5px' - b.style.width = '100%' - b.style.border = 'none' - b.style.textAlign = 'left' - b.style.outline = 'none' + let b = CreateNodeWithText(subjTable, subjName, 'div') + SetStyle(b, { + backgroundColor: '#222d32', + color: '#ffffff', + cursor: 'pointer', + padding: '5px', + width: '100%', + border: 'none', + textAlign: 'left', + outline: 'none' + }) b.setAttribute('id', 'subjectGroup' + i) collapsibles.push(b) let content = document.createElement('div') - content.style.padding = '0 18px' - content.style.overflow = 'hidden' - content.style.backgroundColor = '#222d32' - content.style.borderColor = '#212127' - content.style.borderStyle = 'solid' - content.style.borderWidth = '2px' + SetStyle(content, { + padding: '0 18px', + overflow: 'hidden', + backgroundColor: '#222d32', + borderColor: '#212127', + 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) + let tbl = document.createElement('table') + content.appendChild(tbl) subjGroup.forEach((subj) => { - let tbl = document.createElement('table') - content.appendChild(tbl) - 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) => { - xButton.style[key] = buttonStyle[key] - }) + SetStyle(xButton, buttonStyle) xButton.addEventListener('click', function () { CloseMenu() }) // adding clicktextNode // help button ---------------------------------------------------------------------------------------------------------------- let helpButton = CreateNodeWithText(buttonCell, texts.help, 'button') - Object.keys(buttonStyle).sort().forEach((key) => { - helpButton.style[key] = buttonStyle[key] - }) + SetStyle(helpButton, buttonStyle) helpButton.addEventListener('click', function () { ShowHelp() @@ -2186,9 +2200,7 @@ // site link ---------------------------------------------------------------------------------------------------------------- let siteLink = CreateNodeWithText(buttonCell, texts.websiteBugreport, 'button') - Object.keys(buttonStyle).sort().forEach((key) => { - siteLink.style[key] = buttonStyle[key] - }) + SetStyle(siteLink, buttonStyle) 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) => { - donateLink.style[key] = buttonStyle[key] - }) + SetStyle(donateLink, buttonStyle) 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)