From a76fe62a1a319bc30f6b0c771dcd9d587147f77d Mon Sep 17 00:00:00 2001 From: Mirco Wittrien Date: Mon, 3 Dec 2018 16:35:58 +0100 Subject: [PATCH] Added charcounter to nickname change modal --- Plugins/CharCounter/CharCounter.plugin.js | 122 ++++++++++++++-------- 1 file changed, 77 insertions(+), 45 deletions(-) diff --git a/Plugins/CharCounter/CharCounter.plugin.js b/Plugins/CharCounter/CharCounter.plugin.js index 484cf47ecd..4f18b8af22 100644 --- a/Plugins/CharCounter/CharCounter.plugin.js +++ b/Plugins/CharCounter/CharCounter.plugin.js @@ -4,7 +4,7 @@ class CharCounter { initConstructor () { this.selecting = false; - this.counterMarkup = `
`; + this.counterMarkup = `
`; this.css = ` ${BDFDB.dotCN.themelight} #charcounter { @@ -18,6 +18,9 @@ class CharCounter { ${BDFDB.dotCNS.typing + BDFDB.dotCN.cooldownwrapper} { margin-right: 64px; } + .charcounter-added { + position: relative !important; + } #charcounter { display: block; position: absolute; @@ -25,7 +28,7 @@ class CharCounter { pointer-events: none; } #charcounter.normal { - right: 0; + right: 0; bottom: -1.3em; } #charcounter.edit { @@ -33,8 +36,12 @@ class CharCounter { bottom: -1.3em; } #charcounter.form { - right: 0; + right: 0; bottom: -1.0em; + } + #charcounter.nickname { + right: 0; + top: 0; }`; } @@ -42,7 +49,7 @@ class CharCounter { getDescription () {return "Adds a charcounter in the chat.";} - getVersion () {return "1.2.6";} + getVersion () {return "1.2.8";} getAuthor () {return "DevilBro";} @@ -76,8 +83,8 @@ class CharCounter { (change, i) => { if (change.addedNodes) { change.addedNodes.forEach((node) => { - if (node && node.tagName && node.querySelector(BDFDB.dotCN.textareainner + ":not(" + BDFDB.dotCN.textareainnerdisabled + ")")) { - this.appendCounter(node.querySelector("textarea")); + if (node.tagName && node.querySelector(BDFDB.dotCN.textareainner + ":not(" + BDFDB.dotCN.textareainnerdisabled + ")")) { + this.checkTextarea(node.querySelector("textarea")); } }); } @@ -85,8 +92,27 @@ class CharCounter { ); }); BDFDB.addObserver(this, BDFDB.dotCN.appmount, {name:"textareaObserver",instance:observer}, {childList: true, subtree: true}); + + observer = new MutationObserver((changes, _) => { + changes.forEach( + (change, i) => { + if (change.addedNodes) { + change.addedNodes.forEach((node) => { + let resetnickname; + if (node.tagName && (resetnickname = node.querySelector(BDFDB.dotCN.reset)) != null) { + if (BDFDB.getInnerText(resetnickname.firstElementChild) == BDFDB.LanguageStrings.RESET_NICKNAME) { + this.appendCounter(node.querySelector(BDFDB.dotCN.inputdefault), "nickname"); + console.log("yes"); + } + } + }); + } + } + ); + }); + BDFDB.addObserver(this, BDFDB.dotCN.app + " ~ [class^='theme']:not([class*='popouts'])", {name:"modalObserver",instance:observer}, {childList: true, subtree: true}); - document.querySelectorAll("textarea").forEach(textarea => {this.appendCounter(textarea);}); + document.querySelectorAll("textarea").forEach(textarea => {this.checkTextarea(textarea);}); } else { console.error(this.getName() + ": Fatal Error: Could not load BD functions!"); @@ -96,7 +122,7 @@ class CharCounter { stop () { if (typeof BDFDB === "object") { - $("#charcounter").remove(); + $(".charcounter").remove(); $(".charcounter-added").removeClass("charcounter-added"); BDFDB.unloadMessage(this); @@ -105,49 +131,55 @@ class CharCounter { // begin of own functions - appendCounter (textarea) { + checkTextarea (textarea) { if (!textarea) return; var textareaWrap = textarea.parentElement; if (textareaWrap && !textareaWrap.querySelector("#charcounter")) { var textareaInstance = BDFDB.getOwnerInstance({"node":textarea, "props":["handlePaste","saveCurrentText"], "up":true}); if (textareaInstance && textareaInstance.props && textareaInstance.props.type) { - var counter = $(this.counterMarkup); - counter.addClass(textareaInstance.props.type).appendTo(textareaWrap); - - var updateCounter = () => { - var selection = textarea.selectionEnd - textarea.selectionStart == 0 ? "" : " (" + (textarea.selectionEnd - textarea.selectionStart) + ")"; - counter.text(BDFDB.getParsedLength(textarea.value) + "/2000" + selection); - } - - textareaWrap.parentElement.classList.add("charcounter-added"); - $(textarea) - .off("keydown." + this.getName() + " click." + this.getName()) - .on("keydown." + this.getName() + " click." + this.getName(), e => { - clearTimeout(textarea.charcountertimeout); - textarea.charcountertimeout = setTimeout(() => {updateCounter();},100); - }) - .off("mousedown." + this.getName()) - .on("mousedown." + this.getName(), e => { - this.selecting = true; - }); - $(document) - .off("mouseup." + this.getName()) - .on("mouseup." + this.getName(), e => { - if (this.selecting) { - this.selecting = false; - } - }) - .off("mousemove." + this.getName()) - .on("mousemove." + this.getName(), e => { - if (this.selecting) { - setTimeout(() => { - updateCounter(); - },10); - } - }); - - updateCounter(); + this.appendCounter(textarea, textareaInstance.props.type); } } } + + appendCounter (input, type) { + if (!input) return; + var counter = $(this.counterMarkup); + counter.addClass(type).appendTo(input.parentElement); + + var updateCounter = () => { + var selection = input.selectionEnd - input.selectionStart == 0 ? "" : " (" + (input.selectionEnd - input.selectionStart) + ")"; + counter.text(type == "nickname" ? (input.value.length + "/32" + selection) : (BDFDB.getParsedLength(input.value) + "/2000" + selection)); + } + + input.parentElement.parentElement.classList.add("charcounter-added"); + $(input) + .attr("maxlength", type == "nickname" ? 32 : "") + .off("keydown." + this.getName() + " click." + this.getName()) + .on("keydown." + this.getName() + " click." + this.getName(), e => { + clearTimeout(input.charcountertimeout); + input.charcountertimeout = setTimeout(() => {updateCounter();},100); + }) + .off("mousedown." + this.getName()) + .on("mousedown." + this.getName(), e => { + this.selecting = true; + }); + $(document) + .off("mouseup." + this.getName()) + .on("mouseup." + this.getName(), e => { + if (this.selecting) { + this.selecting = false; + } + }) + .off("mousemove." + this.getName()) + .on("mousemove." + this.getName(), e => { + if (this.selecting) { + setTimeout(() => { + updateCounter(); + },10); + } + }); + + updateCounter(); + } }