Skip to content

Commit 578e612

Browse files
rgantzosrgantzos
committed
Comment Tags
1 parent 2b1e161 commit 578e612

File tree

6 files changed

+325
-0
lines changed

6 files changed

+325
-0
lines changed

‎feature-locales/comment-tags/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"clear-search": "Clear Search"
3+
}

‎features/comment-tags/colors.json‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{
2+
"a": {
3+
"text": "black",
4+
"bg": "#ff7575"
5+
},
6+
"b": {
7+
"text": "black",
8+
"bg": "#ff9c75"
9+
},
10+
"c": {
11+
"text": "black",
12+
"bg": "#ffbc75"
13+
},
14+
"d": {
15+
"text": "black",
16+
"bg": "#ffe675"
17+
},
18+
"e": {
19+
"text": "black",
20+
"bg": "#c6ff75"
21+
},
22+
"f": {
23+
"text": "black",
24+
"bg": "#75ff78"
25+
},
26+
"g": {
27+
"text": "black",
28+
"bg": "#75ffca"
29+
},
30+
"h": {
31+
"text": "black",
32+
"bg": "#75daff"
33+
},
34+
"i": {
35+
"text": "black",
36+
"bg": "#75acff"
37+
},
38+
"j": {
39+
"text": "black",
40+
"bg": "#7a75ff"
41+
},
42+
"k": {
43+
"text": "black",
44+
"bg": "#b375ff"
45+
},
46+
"l": {
47+
"text": "black",
48+
"bg": "#e875ff"
49+
},
50+
"m": {
51+
"text": "black",
52+
"bg": "#ff75dd"
53+
},
54+
"n": {
55+
"text": "white",
56+
"bg": "#ff3030"
57+
},
58+
"o": {
59+
"text": "white",
60+
"bg": "#ff7c30"
61+
},
62+
"p": {
63+
"text": "white",
64+
"bg": "#ffc830"
65+
},
66+
"q": {
67+
"text": "white",
68+
"bg": "#088c53"
69+
},
70+
"r": {
71+
"text": "white",
72+
"bg": "#08588c"
73+
},
74+
"s": {
75+
"text": "white",
76+
"bg": "#46de23"
77+
},
78+
"t": {
79+
"text": "white",
80+
"bg": "#494cfc"
81+
},
82+
"u": {
83+
"text": "white",
84+
"bg": "#a923de"
85+
},
86+
"v": {
87+
"text": "white",
88+
"bg": "#5f23de"
89+
},
90+
"w": {
91+
"text": "white",
92+
"bg": "#de23de"
93+
},
94+
"x": {
95+
"text": "white",
96+
"bg": "#de2384"
97+
},
98+
"y": {
99+
"text": "white",
100+
"bg": "#23de7e"
101+
},
102+
"z": {
103+
"text": "white",
104+
"bg": "#23acde"
105+
}
106+
}

‎features/comment-tags/data.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"title": "Editor Comment Tags",
3+
"description": "Add tags to editor comments to easily organize them.",
4+
"credits": [
5+
{
6+
"username": "rgantzos",
7+
"url": "https://scratch.mit.edu/users/rgantzos/"
8+
}
9+
],
10+
"type": ["Editor"],
11+
"tags": ["New", "Featured"],
12+
"dynamic": true,
13+
"scripts": [
14+
{
15+
"file": "script.js",
16+
"runOn": "/projects/*"
17+
}
18+
],
19+
"styles": [
20+
{
21+
"file": "editor.css",
22+
"runOn": "/projects/*"
23+
}
24+
],
25+
"resources": [{ "name": "tag-colors", "path": "/colors.json" }]
26+
}

‎features/comment-tags/editor.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.ste-comment-tags {
2+
position: absolute;
3+
bottom: 0px;
4+
left: 0px;
5+
padding: 1rem;
6+
}
7+
8+
.ste-comment-tags span {
9+
padding: .5rem;
10+
font-size: 1rem;
11+
border-radius: 0.5rem;
12+
margin: .25rem;
13+
display: inline-block;
14+
cursor: pointer;
15+
}
16+
17+
.ste-clear-search {
18+
padding: 0.2rem;
19+
padding-left: 1rem;
20+
padding-right: 1rem;
21+
background: hsla(260, 60%, 60%, 1);
22+
color: white;
23+
border-radius: 0.5rem;
24+
margin-left: 1rem;
25+
font-size: .7rem;
26+
float: right;
27+
position: absolute;
28+
right: 0px;
29+
top: 0.6rem;
30+
cursor: pointer;
31+
}
32+
33+
.blocklyWorkspace > * > .ste-hide-search {
34+
opacity: .25;
35+
}

‎features/comment-tags/script.js‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
export default async function ({ feature, console }) {
2+
let currentSearch = null;
3+
4+
let colors = await (
5+
await fetch(feature.self.getResource("tag-colors"))
6+
).json();
7+
8+
ScratchTools.waitForElements(".scratchCommentTextarea", function (text) {
9+
updateTags(text);
10+
if (text.dataset.steTracker) return;
11+
text.dataset.steTracker = "tracking";
12+
text.addEventListener("input", function () {
13+
updateTags(text);
14+
});
15+
});
16+
17+
let ul = await ScratchTools.waitForElement(
18+
"ul[class^='react-tabs_react-tabs__tab-list_']"
19+
);
20+
if (!ul.querySelector(".ste-clear-search")) {
21+
let clearSearch = document.createElement("div");
22+
clearSearch.className = "ste-clear-search";
23+
clearSearch.textContent = feature.msg("clear-search");
24+
clearSearch.style.display = "none";
25+
ul.appendChild(clearSearch);
26+
27+
clearSearch.addEventListener("click", function () {
28+
currentSearch = null;
29+
clearSearch.style.display = "none";
30+
document.querySelectorAll(".blocklyDraggable").forEach(function (el) {
31+
el.classList.remove("ste-hide-search");
32+
if (el.parentElement.firstChild.tagName === "line") {
33+
el.parentElement.classList.remove("ste-hide-search")
34+
}
35+
});
36+
});
37+
}
38+
39+
ScratchTools.waitForElements(".blocklyDraggable", function (el) {
40+
if (!currentSearch) return;
41+
if (
42+
[...el.querySelectorAll("textarea")].find((el) =>
43+
el.value?.match(/#\w+/g)?.includes(currentSearch)
44+
)
45+
) {
46+
el.classList.remove("ste-hide-search");
47+
if (el.parentElement.firstChild.tagName === "line") {
48+
el.parentElement.classList.remove("ste-hide-search")
49+
}
50+
} else {
51+
el.classList.add("ste-hide-search");
52+
if (el.parentElement.firstChild.tagName === "line") {
53+
el.parentElement.classList.add("ste-hide-search")
54+
}
55+
}
56+
});
57+
58+
function updateTags(text) {
59+
if (text.value.match(/#\w+/g)) {
60+
if (currentSearch) {
61+
if (text.value.match(/#\w+/g).includes(currentSearch)) {
62+
text.parentElement.parentElement.parentElement.classList.remove(
63+
"ste-hide-search"
64+
);
65+
} else {
66+
text.parentElement.parentElement.parentElement.classList.add(
67+
"ste-hide-search"
68+
);
69+
}
70+
}
71+
if (text.parentElement.querySelector(".ste-comment-tags")) {
72+
text.parentElement.querySelector(".ste-comment-tags").innerHTML = "";
73+
text.value.match(/#\w+/g).forEach(function (tag) {
74+
let span = document.createElement("span");
75+
span.textContent = tag;
76+
span.style.backgroundColor =
77+
colors[tag.toLowerCase().split("")[1]]?.bg || "#434445";
78+
span.style.color =
79+
colors[tag.toLowerCase().split("")[1]]?.text || "white";
80+
text.parentElement
81+
.querySelector(".ste-comment-tags")
82+
.appendChild(span);
83+
84+
span.addEventListener("click", function () {
85+
currentSearch = tag;
86+
document.querySelector(".ste-clear-search").style.display = null;
87+
document
88+
.querySelectorAll(".blocklyDraggable")
89+
.forEach(function (el) {
90+
if (
91+
[...el.querySelectorAll("textarea")].find((el) =>
92+
el.value?.match(/#\w+/g)?.includes(tag)
93+
)
94+
) {
95+
el.classList.remove("ste-hide-search");
96+
if (el.parentElement.firstChild.tagName === "line") {
97+
el.parentElement.classList.remove("ste-hide-search")
98+
}
99+
} else {
100+
el.classList.add("ste-hide-search");
101+
if (el.parentElement.firstChild.tagName === "line") {
102+
el.parentElement.classList.add("ste-hide-search")
103+
}
104+
}
105+
});
106+
});
107+
});
108+
} else {
109+
let div = document.createElement("div");
110+
div.className = "ste-comment-tags";
111+
text.parentElement.appendChild(div);
112+
text.value.match(/#\w+/g).forEach(function (tag) {
113+
let span = document.createElement("span");
114+
span.textContent = tag;
115+
span.style.backgroundColor =
116+
colors[tag.toLowerCase().split("")[1]]?.bg || "#434445";
117+
span.style.color =
118+
colors[tag.toLowerCase().split("")[1]]?.text || "white";
119+
div.appendChild(span);
120+
121+
span.addEventListener("click", function () {
122+
currentSearch = tag;
123+
document.querySelector(".ste-clear-search").style.display = null;
124+
document
125+
.querySelectorAll(".blocklyDraggable")
126+
.forEach(function (el) {
127+
if (
128+
[...el.querySelectorAll("textarea")].find((el) =>
129+
el.value?.match(/#\w+/g)?.includes(tag)
130+
)
131+
) {
132+
el.classList.remove("ste-hide-search");
133+
if (el.parentElement.firstChild.tagName === "line") {
134+
el.parentElement.classList.remove("ste-hide-search")
135+
}
136+
} else {
137+
el.classList.add("ste-hide-search");
138+
if (el.parentElement.firstChild.tagName === "line") {
139+
el.parentElement.classList.add("ste-hide-search")
140+
}
141+
}
142+
});
143+
});
144+
});
145+
}
146+
} else {
147+
text.parentElement.querySelector(".ste-comment-tags")?.remove();
148+
}
149+
}
150+
}

‎features/features.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
[
2+
{
3+
"version": 2,
4+
"id": "comment-tags",
5+
"versionAdded": "v3.7.0"
6+
},
27
{
38
"version": 2,
49
"id": "profile-flag",

0 commit comments

Comments
 (0)