-
Notifications
You must be signed in to change notification settings - Fork 53
/
focus.js
97 lines (87 loc) · 3.09 KB
/
focus.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
import $ from 'jquery';
/**
* Handles the dimming of the chat when you click on a username
* within the chat GUI
*/
class ChatUserFocus {
constructor(chat, css) {
this.chat = chat;
this.css = css;
this.focused = [];
this.chat.output.on('click', (e) => this.toggleElement(e.target));
}
toggleElement(target) {
const t = $(target);
if (t.hasClass('chat-user')) {
if (!this.chat.settings.get('focusmentioned'))
this.toggleFocus(t.closest('.msg-user').data('username'), false, true);
this.toggleFocus(t.text());
} else if (t.hasClass('user') && !t.hasClass('tier')) {
this.toggleFocus(t.text());
} else if (t.hasClass('flair')) {
this.toggleFocus(t.data('flair'), true);
} else if (this.focused.length > 0) {
this.clearFocus();
}
}
toggleFocus(value = '', isFlair = false, onlyAdd = false) {
const normalized = value.toLowerCase();
const index = this.focused.indexOf(normalized);
const focused = index !== -1;
if (!focused) {
this.addCssRule(normalized, isFlair);
} else if (!onlyAdd) {
this.removeCssRule(index);
}
return this;
}
addCssRule(value, isFlair) {
let rule;
if (isFlair) {
rule = `.msg-user.${value}{opacity:1 !important;}`;
} else if (this.chat.settings.get('focusmentioned')) {
rule = `
.msg-death[data-username="${value}"], .msg-death[data-mentioned~="${value}"],
.msg-broadcast[data-username="${value}"], .msg-broadcast[data-mentioned~="${value}"],
.msg-subscription[data-username="${value}"], .msg-subscription[data-mentioned~="${value}"],
.msg-giftsub[data-username="${value}"], .msg-giftsub[data-mentioned~="${value}"], .msg-giftsub[data-giftee="${value}"],
.msg-massgift[data-username="${value}"], .msg-massgift[data-mentioned~="${value}"],
.msg-donation[data-username="${value}"], .msg-donation[data-mentioned~="${value}"],
.msg-pinned[data-username="${value}"], .msg-pinned[data-mentioned~="${value}"],
.msg-user[data-username="${value}"], .msg-user[data-mentioned~="${value}"] {
opacity:1 !important;
}
`;
} else {
rule = `
.msg-death[data-username="${value}"],
.msg-broadcast[data-username="${value}"],
.msg-subscription[data-username="${value}"],
.msg-giftsub[data-username="${value}"], .msg-giftsub[data-giftee="${value}"],
.msg-massgift[data-username="${value}"],
.msg-donation[data-username="${value}"],
.msg-pinned[data-username="${value}"],
.msg-user[data-username="${value}"] {
opacity:1 !important;
}
`;
}
this.css.insertRule(rule, this.focused.length); // max 4294967295
this.focused.push(value);
this.redraw();
}
removeCssRule(index) {
this.css.deleteRule(index);
this.focused.splice(index, 1);
this.redraw();
}
clearFocus() {
this.focused.forEach(() => this.css.deleteRule(0));
this.focused = [];
this.redraw();
}
redraw() {
this.chat.ui.toggleClass('focus', this.focused.length > 0);
}
}
export default ChatUserFocus;