Added charcounter to nickname change modal

Plugins/CharCounter/CharCounter.plugin.js

@@ -4,7 +4,7 @@ class CharCounter {
 	initConstructor () {
 		this.selecting = false;
 		
-		this.counterMarkup = `<div id="charcounter"></div>`;
+		this.counterMarkup = `<div id="charcounter" class="charcounter"></div>`;
 		   
 		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;
@@ -35,6 +38,10 @@ class CharCounter {
 			#charcounter.form {
 				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 + ")")) {
+								if (node.tagName && node.querySelector(BDFDB.dotCN.textareainner + ":not(" + BDFDB.dotCN.textareainnerdisabled + ")")) {
-									this.appendCounter(node.querySelector("textarea"));
+									this.checkTextarea(node.querySelector("textarea"));
 								}
 							});
 						}
@@ -86,7 +93,26 @@ class CharCounter {
 			});
 			BDFDB.addObserver(this, BDFDB.dotCN.appmount, {name:"textareaObserver",instance:observer}, {childList: true, subtree: true});
 
-			document.querySelectorAll("textarea").forEach(textarea => {this.appendCounter(textarea);});
+			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.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);
+				this.appendCounter(textarea, textareaInstance.props.type);
-				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();
 			}
 		}
 	}
+	
+	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();
+	}
 }