From 63464bb7c7bdd7dc337f0549eeab085f1c7537a5 Mon Sep 17 00:00:00 2001 From: C-xC-c Date: Fri, 3 Jan 2020 15:36:39 +0000 Subject: [PATCH] New flag select with flag previews. Basically makes the select consistant across all browsers, since I've just coppied what old FireFox does. --- bantflags.gm4.meta.js | 6 +++--- bantflags.gm4.user.js | 31 ++++++++++++++++++++----------- bantflags.meta.js | 4 ++-- bantflags.user.js | 34 ++++++++++++++++++++++------------ 4 files changed, 47 insertions(+), 28 deletions(-) diff --git a/bantflags.gm4.meta.js b/bantflags.gm4.meta.js index 067e8f3..1b62fc5 100644 --- a/bantflags.gm4.meta.js +++ b/bantflags.gm4.meta.js @@ -11,12 +11,12 @@ // @exclude http*://archive.nyafuu.org/bant/statistics/ // @exclude http*://archived.moe/bant/statistics/ // @exclude http*://thebarchive.com/bant/statistics/ -// @version 1.3.0 +// @version 1.4.0 // @grant GM.xmlHttpRequest // @grant GM.getValue // @grant GM.setValue // @run-at document-idle -// @icon https://nineball.party/files/flags/actual_flags/0077.png +// @icon https://flags.plum.moe/flags/0077.png // @updateURL https://flags.plum.moe/bantflags.gm4.meta.js // @downloadURL https://flags.plum.moe/bantflags.gm4.user.js -// ==/UserScript== +// ==/UserScript== \ No newline at end of file diff --git a/bantflags.gm4.user.js b/bantflags.gm4.user.js index 8e858f9..6bee22e 100644 --- a/bantflags.gm4.user.js +++ b/bantflags.gm4.user.js @@ -11,12 +11,12 @@ // @exclude http*://archive.nyafuu.org/bant/statistics/ // @exclude http*://archived.moe/bant/statistics/ // @exclude http*://thebarchive.com/bant/statistics/ -// @version 1.3.0 +// @version 1.4.0 // @grant GM.xmlHttpRequest // @grant GM.getValue // @grant GM.setValue // @run-at document-idle -// @icon https://nineball.party/files/flags/actual_flags/0077.png +// @icon https://flags.plum.moe/flags/0077.png // @updateURL https://flags.plum.moe/bantflags.gm4.meta.js // @downloadURL https://flags.plum.moe/bantflags.gm4.user.js // ==/UserScript== @@ -119,7 +119,7 @@ const software = { var nsetup = { // not anymore a clone of the original setup namespace: 'BintFlegs', // TODO: should be const. flagsLoaded: false, - form: '', + form: '
', fillHtml: function () { // TODO: this function should have a better name. Only called by nsetup.init, can be inlined? MakeRequest( "GET", @@ -133,18 +133,27 @@ const software = { } let flagSelect = document.getElementById('flagSelect'); - let flagLoad = document.getElementById('flagLoad'); + let flagList = flagSelect.querySelector('ul'); + let flagInput = flagSelect.querySelector('input'); let flags = resp.responseText.split('\n'); for (var i = 0; i < flags.length; i++) { let flag = flags[i]; - flagSelect.appendChild(createAndAssign('option', { - value: flag, - innerHTML: ' ' + flag + flagList.appendChild(createAndAssign('li', { + innerHTML: ' ' + flag + '' })); } - flagLoad.style.display = 'none'; + flagSelect.addEventListener('click', (e) => { + listItem = e.target.nodeName === 'LI' ? e.target : e.target.parentNode; + if (listItem.nodeName === 'LI') { + flagInput.value = listItem.querySelector('span').innerHTML; + } + flagList.classList.toggle('hide'); + }); + + document.getElementById('flagLoad').style.display = 'none'; + document.querySelector('.flagsForm').style.marginRight = "200px"; flagSelect.style.display = 'inline-block'; nsetup.flagsLoaded = true; }); @@ -162,7 +171,7 @@ const software = { }, setFlag: function (flag) { let UID = Math.random().toString(36).substring(7); - let flagName = flag ? flag : document.getElementById('flagSelect').value; + let flagName = flag ? flag : document.querySelector('#flagSelect input').value; let flagContainer = document.getElementById('bantflags_container'); flagContainer.appendChild(createAndAssign('img', { @@ -291,8 +300,8 @@ const software = { window.confirm('[BantFlags]: No Flags detected.'); } - // TODO: look at this CSS and see what's important / where we can merge some of it. - addGlobalStyle('.flagsForm{float: right; clear: right; margin: 20px 10px;} #flagSelect{display:none;} .bantflags_flag{padding: 1px;} [title^="Romania"]{ position: relative; animation: shakeAnim 0.1s linear infinite;} @keyframes shakeAnim{ 0% {left: 1px;} 25% {top: 2px;} 50% {left: 1px;} 75% {left: 0px;} 100% {left: 2px;}}'); + // See Docs/styles.css + addGlobalStyle('.flagsForm{float: right; clear: right; margin: 20px 10px;} #flagSelect{display:none;} .bantflags_flag{padding: 1px;} [title^="Romania"]{ position: relative; animation: shakeAnim 0.1s linear infinite;} @keyframes shakeAnim{ 0% {left: 1px;} 25% {top: 2px;} 50% {left: 1px;} 75% {left: 0px;} 100% {left: 2px;}} #flagSelect ul {list-style-type: none;padding: 0;margin-bottom: 0;cursor: pointer;bottom: 100%;height: 200px;overflow: auto;position: absolute;width:200px;background-color:#fff}#flagSelect ul li {display: block;}#flagSelect ul li:hover {background-color: #ddd;}#flagSelect {position: absolute;}#flagSelect input {width: 200px;} #flagSelect .hide {display: none;}#flagSelect img {margin-left: 2px;}'); // Flags need to be parsed differently and have different styles depending on board software. if (software.yotsuba) { diff --git a/bantflags.meta.js b/bantflags.meta.js index 7f12439..6d3a08c 100644 --- a/bantflags.meta.js +++ b/bantflags.meta.js @@ -11,12 +11,12 @@ // @exclude http*://archive.nyafuu.org/bant/statistics/ // @exclude http*://archived.moe/bant/statistics/ // @exclude http*://thebarchive.com/bant/statistics/ -// @version 1.3.0 +// @version 1.4.0 // @grant GM_xmlhttpRequest // @grant GM_getValue // @grant GM_setValue // @run-at document-idle -// @icon https://nineball.party/files/flags/actual_flags/0077.png +// @icon https://flags.plum.moe/flags/0077.png // @updateURL https://flags.plum.moe/bantflags.meta.js // @downloadURL https://flags.plum.moe/bantflags.user.js // ==/UserScript== \ No newline at end of file diff --git a/bantflags.user.js b/bantflags.user.js index ee08e29..44e7687 100644 --- a/bantflags.user.js +++ b/bantflags.user.js @@ -11,12 +11,12 @@ // @exclude http*://archive.nyafuu.org/bant/statistics/ // @exclude http*://archived.moe/bant/statistics/ // @exclude http*://thebarchive.com/bant/statistics/ -// @version 1.3.0 +// @version 1.4.0 // @grant GM_xmlhttpRequest // @grant GM_getValue // @grant GM_setValue // @run-at document-idle -// @icon https://nineball.party/files/flags/actual_flags/0077.png +// @icon https://flags.plum.moe/flags/0077.png // @updateURL https://flags.plum.moe/bantflags.meta.js // @downloadURL https://flags.plum.moe/bantflags.user.js // ==/UserScript== @@ -91,7 +91,7 @@ function debug(text) { /** Wrapper around GM_xmlhttpRequest. * @param {string} method - The HTTP method (GET, POST). * @param {string} url - The URL of the request. - * @param {string} data - Data sent inn the form body. + * @param {string} data - text for the form body. * @param {Function} func - The function run when we recieve a response. Response data is sent directly to it. */ const MakeRequest = ((method, url, data, func) => { GM_xmlhttpRequest({ @@ -116,7 +116,7 @@ function retry(func, resp) { var nsetup = { // not anymore a clone of the original setup namespace: 'BintFlegs', // TODO: should be const. flagsLoaded: false, - form: '', + form: '
', fillHtml: function () { // TODO: this function should have a better name. Only called by nsetup.init, can be inlined? MakeRequest( "GET", @@ -130,18 +130,27 @@ var nsetup = { // not anymore a clone of the original setup } let flagSelect = document.getElementById('flagSelect'); - let flagLoad = document.getElementById('flagLoad'); + let flagList = flagSelect.querySelector('ul'); + let flagInput = flagSelect.querySelector('input'); let flags = resp.responseText.split('\n'); for (var i = 0; i < flags.length; i++) { let flag = flags[i]; - flagSelect.appendChild(createAndAssign('option', { - value: flag, - innerHTML: ' ' + flag + flagList.appendChild(createAndAssign('li', { + innerHTML: ' ' + flag + '' })); } - flagLoad.style.display = 'none'; + flagSelect.addEventListener('click', (e) => { + listItem = e.target.nodeName === 'LI' ? e.target : e.target.parentNode; + if (listItem.nodeName === 'LI') { + flagInput.value = listItem.querySelector('span').innerHTML; + } + flagList.classList.toggle('hide'); + }); + + document.getElementById('flagLoad').style.display = 'none'; + document.querySelector('.flagsForm').style.marginRight = "200px"; // Element has position: absolute and is ~200px long. flagSelect.style.display = 'inline-block'; nsetup.flagsLoaded = true; }); @@ -159,7 +168,7 @@ var nsetup = { // not anymore a clone of the original setup }, setFlag: function (flag) { let UID = Math.random().toString(36).substring(7); - let flagName = flag ? flag : document.getElementById('flagSelect').value; + let flagName = flag ? flag : document.querySelector('#flagSelect input').value; let flagContainer = document.getElementById('bantflags_container'); flagContainer.appendChild(createAndAssign('img', { @@ -281,14 +290,15 @@ function resolveRefFlags() { ); } +// This should only happen before you set flags for the first time. regions = GM_getValue(nsetup.namespace); if (!regions) { regions = []; window.confirm('[BantFlags]: No Flags detected.'); } -// TODO: look at this CSS and see what's important / where we can merge some of it. -addGlobalStyle('.flagsForm{float: right; clear: right; margin: 20px 10px;} #flagSelect{display:none;} .bantflags_flag{padding: 1px;} [title^="Romania"]{ position: relative; animation: shakeAnim 0.1s linear infinite;} @keyframes shakeAnim{ 0% {left: 1px;} 25% {top: 2px;} 50% {left: 1px;} 75% {left: 0px;} 100% {left: 2px;}}'); +// See Docs/styles.css +addGlobalStyle('.flagsForm{float: right; clear: right; margin: 20px 10px;} #flagSelect{display:none;} .bantflags_flag{padding: 1px;} [title^="Romania"]{ position: relative; animation: shakeAnim 0.1s linear infinite;} @keyframes shakeAnim{ 0% {left: 1px;} 25% {top: 2px;} 50% {left: 1px;} 75% {left: 0px;} 100% {left: 2px;}} #flagSelect ul {list-style-type: none;padding: 0;margin-bottom: 0;cursor: pointer;bottom: 100%;height: 200px;overflow: auto;position: absolute;width:200px;background-color:#fff}#flagSelect ul li {display: block;}#flagSelect ul li:hover {background-color: #ddd;}#flagSelect {position: absolute;}#flagSelect input {width: 200px;} #flagSelect .hide {display: none;}#flagSelect img {margin-left: 2px;}'); // We get flags using different selectors, and we need to align them differently. if (software.yotsuba) {