-
Notifications
You must be signed in to change notification settings - Fork 0
/
CustomSGComments.user.js
124 lines (112 loc) · 4.57 KB
/
CustomSGComments.user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
// ==UserScript==
// @name Custom SG Comments
// @namespace https://github.com/danthe1st/
// @version 1.1
// @description Adds custom comment templates to the Staging Ground
// @updateURL https://raw.githubusercontent.com/danthe1st/SO-Userscripts/master/CustomSGComments.user.js
// @downloadURL https://raw.githubusercontent.com/danthe1st/SO-Userscripts/master/CustomSGComments.user.js
// @author danthe1st
// @match https://stackoverflow.com/staging-ground/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=stackoverflow.com
// @grant none
// @run-at document-idle
// ==/UserScript==
let commentCounter=0;
const escapeHtml = (raw) => {
return raw.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}
function addComment(name, description){
const label=document.createElement("label")
document.querySelector("div.template-container").appendChild(label)
label.innerHTML=
`
<div class="d-flex">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="comment-template-radio" id="UserDefined" role="menuitemradio" value="${escapeHtml(description)}">
</div>
<div class="flex--item">
<p>${escapeHtml(name)}</p>
</div>
</div>
`;
label.classList.add("s-menu--label");
label.classList.add("flex--item6");
label.classList.add("pl16");
let btn = document.createElement("a");
btn.innerText="Remove";
btn.style="margin-left: auto;color: var(--_an-a-fc-hover);";
btn.innerText = "Remove";
const commentId=commentCounter;
btn.onclick=()=>removeComment(commentId, label);
label.getElementsByTagName("p")[0].parentElement.parentElement.appendChild(btn)
}
const LOCALSTORAGE_COMMENT_NAME_PREFIX="customSGComments-comment-name";
const LOCALSTORAGE_COMMENT_TEXT_PREFIX="customSGComments-comment-text";
function promptNewComment(newCommentButton){
const commentName=window.prompt("Please enter the name of the comment:");
if(!commentName){
return;
}
const commentText=window.prompt("Please enter the text of the comment:");
if(!commentText){
return;
}
addComment(commentName, commentText)
localStorage[LOCALSTORAGE_COMMENT_NAME_PREFIX+commentCounter]=commentName;
localStorage[LOCALSTORAGE_COMMENT_TEXT_PREFIX+commentCounter]=commentText;
commentCounter++;
const parentBtn = newCommentButton.parentElement;
newCommentButton.remove();
parentBtn.appendChild(newCommentButton);
}
function loadComments(){
while((LOCALSTORAGE_COMMENT_NAME_PREFIX+commentCounter) in localStorage){
addComment(localStorage[LOCALSTORAGE_COMMENT_NAME_PREFIX+commentCounter], localStorage[LOCALSTORAGE_COMMENT_TEXT_PREFIX+commentCounter]);
commentCounter++;
}
}
function removeComment(id, elem){
if(confirm(`Remove comment "${elem.getElementsByTagName("p")[0].innerText}"?`)){
elem.remove();
if(id!=commentCounter-1){
for(let i=id; i<commentCounter-1;i++){
localStorage[LOCALSTORAGE_COMMENT_NAME_PREFIX+i]=localStorage[LOCALSTORAGE_COMMENT_NAME_PREFIX+(i+1)]
localStorage[LOCALSTORAGE_COMMENT_TEXT_PREFIX+i]=localStorage[LOCALSTORAGE_COMMENT_TEXT_PREFIX+(i+1)]
}
}
localStorage.removeItem(LOCALSTORAGE_COMMENT_NAME_PREFIX+(commentCounter-1))
localStorage.removeItem(LOCALSTORAGE_COMMENT_TEXT_PREFIX+(commentCounter-1))
commentCounter--;
if(id!=commentCounter){
window.location.reload()
}
}
}
function main() {
'use strict';
loadComments()
let btn = document.createElement("a");
btn.classList.add("pl16")
btn.style="color: var(--_an-a-fc-hover);"
btn.innerText = "Add new comment";
btn.onclick=()=>promptNewComment(btn);
document.querySelector("div.template-container").appendChild(btn);
};
function waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
waitForElm("div.template-container").then(main)//https://stackoverflow.com/a/61511955/10871900