2018-05-30 22:33:14 +00:00
|
|
|
function setupCharCount() {
|
|
|
|
if (document.body.contains(charcount)) return;
|
|
|
|
if (!text || !document.body.contains(text)) {
|
|
|
|
text = document.querySelector('textarea[class^="textArea-"]');
|
|
|
|
}
|
|
|
|
if (!text) return;
|
|
|
|
|
|
|
|
text.parentNode.appendChild(charcount);
|
|
|
|
}
|
|
|
|
|
|
|
|
let charcount = document.createElement("span");
|
|
|
|
charcount.id = "charcounter";
|
|
|
|
charcount.innerHTML = "0/2000";
|
|
|
|
charcount.style.right = "40px";
|
|
|
|
charcount.style.bottom = "4px";
|
|
|
|
charcount.style.opacity = "0.5";
|
|
|
|
charcount.style.position = "absolute";
|
|
|
|
charcount.style.display = "block";
|
|
|
|
charcount.style["font-size"] = "85%";
|
|
|
|
|
|
|
|
let text = null;
|
|
|
|
|
|
|
|
exports = {
|
|
|
|
manifest: {
|
|
|
|
author: "Cynosphere",
|
|
|
|
name: "Character Counter",
|
|
|
|
description: "Counts characters in the chatbox."
|
|
|
|
},
|
|
|
|
start: function(){
|
|
|
|
let charcount_mo = new MutationObserver(setupCharCount);
|
|
|
|
charcount_mo.observe(document.querySelector(".app.flex-vertical"), {
|
|
|
|
childList: true,
|
|
|
|
subtree: true
|
|
|
|
});
|
|
|
|
|
|
|
|
document.addEventListener("keydown", ev => {
|
|
|
|
if (!text) return;
|
|
|
|
|
|
|
|
setImmediate(()=>{
|
|
|
|
let length = text.value.length;
|
|
|
|
charcount.innerHTML = `${length}/2000`;
|
|
|
|
|
|
|
|
if (length > 1999) {
|
|
|
|
charcount.style.color = "#FF0000";
|
|
|
|
} else if (length > 1899) {
|
|
|
|
charcount.style.color = "#FF4500";
|
|
|
|
} else if (length > 1499) {
|
|
|
|
charcount.style.color = "#FFA500";
|
|
|
|
} else if (length > 999) {
|
|
|
|
charcount.style.color = "#F1C40F";
|
|
|
|
} else {
|
|
|
|
charcount.style.color = "#FFFFFF";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2018-05-13 18:17:49 +00:00
|
|
|
}
|