Userlist badges
This commit is contained in:
parent
af8f7b0c9f
commit
393362c8fb
|
@ -41,3 +41,18 @@
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.member-username .bd-message-badges-wrap {
|
||||||
|
display: inline-block;
|
||||||
|
height: 17px;
|
||||||
|
width: 14px;
|
||||||
|
|
||||||
|
.bd-message-badge-developer,
|
||||||
|
.bd-message-badge-contributor {
|
||||||
|
width: 14px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 12px 12px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -163,12 +163,13 @@ export default class extends EventListener {
|
||||||
}
|
}
|
||||||
|
|
||||||
setUserId(user) {
|
setUserId(user) {
|
||||||
if (user.hasAttribute('user-id')) return;
|
if (user.hasAttribute('data-user-id')) return;
|
||||||
const userid = Reflection(user).prop('user.id');
|
const userid = Reflection(user).prop('user.id');
|
||||||
if (!userid) return;
|
if (!userid) return;
|
||||||
user.setAttribute('user-id', userid);
|
user.setAttribute('data-user-id', userid);
|
||||||
const currentUser = userid === TempApi.currentUserId;
|
const currentUser = userid === TempApi.currentUserId;
|
||||||
if (currentUser) user.setAttribute('data-currentuser', true);
|
if (currentUser) user.setAttribute('data-currentuser', true);
|
||||||
|
Events.emit('ui:useridset', user);
|
||||||
}
|
}
|
||||||
|
|
||||||
get appMount() {
|
get appMount() {
|
||||||
|
|
|
@ -18,16 +18,18 @@ export default class extends EventListener {
|
||||||
bindings() {
|
bindings() {
|
||||||
this.uiEvent = this.uiEvent.bind(this);
|
this.uiEvent = this.uiEvent.bind(this);
|
||||||
this.messageBadge = this.messageBadge.bind(this);
|
this.messageBadge = this.messageBadge.bind(this);
|
||||||
this.messageBadges = this.messageBadges.bind(this);
|
this.badges = this.badges.bind(this);
|
||||||
|
this.userlistBadge = this.userlistBadge.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
get eventBindings() {
|
get eventBindings() {
|
||||||
return [
|
return [
|
||||||
{ id: 'discord:MESSAGE_CREATE', callback: this.messageBadge },
|
{ id: 'discord:MESSAGE_CREATE', callback: this.messageBadge },
|
||||||
{ id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge },
|
{ id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge },
|
||||||
{ id: 'server-switch', callback: this.messageBadges },
|
{ id: 'server-switch', callback: this.badges },
|
||||||
{ id: 'channel-switch', callback: this.messageBadges },
|
{ id: 'channel-switch', callback: this.badges },
|
||||||
{ id: 'ui:loadedmore', callback: this.messageBadges },
|
{ id: 'ui:loadedmore', callback: this.badges },
|
||||||
|
{ id: 'ui:useridset', callback: this.userlistBadge },
|
||||||
{ id: 'ui-event', callback: this.uiEvent }
|
{ id: 'ui-event', callback: this.uiEvent }
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -41,7 +43,7 @@ export default class extends EventListener {
|
||||||
this.inject(userid);
|
this.inject(userid);
|
||||||
}
|
}
|
||||||
|
|
||||||
messageBadges() {
|
badges() {
|
||||||
for (const messageGroup of document.querySelectorAll('.message-group')) {
|
for (const messageGroup of document.querySelectorAll('.message-group')) {
|
||||||
this.messageBadge({ element: messageGroup });
|
this.messageBadge({ element: messageGroup });
|
||||||
}
|
}
|
||||||
|
@ -69,6 +71,23 @@ export default class extends EventListener {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
userlistBadge(e) {
|
||||||
|
const c = this.contributors.find(c => c.id === e.dataset.userId);
|
||||||
|
if (!c) return;
|
||||||
|
const memberUsername = e.querySelector('.member-username');
|
||||||
|
if (!memberUsername) return;
|
||||||
|
const root = document.createElement('span');
|
||||||
|
memberUsername.append(root);
|
||||||
|
const { developer, contributor, webdev } = c;
|
||||||
|
VueInjector.inject(
|
||||||
|
root,
|
||||||
|
DOM.createElement('div', null, 'bdmessagebadges'),
|
||||||
|
{ BdMessageBadge },
|
||||||
|
`<BdMessageBadge developer="${developer}" webdev="${webdev}" contributor="${contributor}"/>`,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
inject(userid) {
|
inject(userid) {
|
||||||
const c = this.contributors.find(c => c.id === userid);
|
const c = this.contributors.find(c => c.id === userid);
|
||||||
if (!c) return;
|
if (!c) return;
|
||||||
|
|
Loading…
Reference in New Issue