Merge pull request #166 from JsSucks/data-attributes

Data attributes

client/src/ui/automanip.js

@@ -43,7 +43,6 @@ export default class extends EventListener {
 
     constructor() {
         super();
-        window.injectAc = this.injectAutocomplete;
         const messageFilter = function (m) {
             return m.addedNodes && m.addedNodes.length && m.addedNodes[0].classList && m.addedNodes[0].classList.contains('message-group');
         }
@@ -62,6 +61,52 @@ export default class extends EventListener {
             this.setUserIds();
             Events.emit('ui:loadedmoreusers', mutations.map(m => m.addedNodes[0]));
         }, 'filter');
+
+        const channelFilter = function(m) {
+            return m.addedNodes &&
+                m.addedNodes.length &&
+                m.addedNodes[0].className &&
+                m.addedNodes[0].className.includes('container');
+        }
+
+        DOM.observer.subscribe('loading-more-channels-manip', channelFilter, mutations => {
+            this.setChannelIds();
+            Events.emit('ui:loadedmorechannels', mutations.map(m => m.addedNodes[0]));
+        }, 'filter');
+
+        const popoutFilter = function(m) {
+            return m.addedNodes &&
+                m.addedNodes.length &&
+                m.addedNodes[0].className &&
+                m.addedNodes[0].className.includes('popout');
+        }
+
+        DOM.observer.subscribe('userpopout-manip', popoutFilter, mutations => {
+            const userPopout = document.querySelector('[class*=userPopout]');
+            if (!userPopout) return;
+            const user = Reflection(userPopout).prop('user');
+            if (!user) return;
+            userPopout.setAttribute('data-user-id', user.id);
+            if (user.id === TempApi.currentUserId) userPopout.setAttribute('data-currentuser', true);
+        }, 'filter');
+
+        const modalFilter = function(m) {
+            return m.addedNodes &&
+                m.addedNodes.length &&
+                m.addedNodes[0].className &&
+                m.addedNodes[0].className.includes('modal');
+        }
+
+        DOM.observer.subscribe('modal-manip', modalFilter, mutations => {
+            const userModal = document.querySelector('[class*=modal] > [class*=inner]');
+            if (!userModal) return;
+            const user = Reflection(userModal).prop('user');
+            if (!user) return;
+            const modal = userModal.closest('[class*=modal]');
+            if (!modal) return;
+            modal.setAttribute('data-user-id', user.id);
+            if (user.id === TempApi.currentUserId) modal.setAttribute('data-currentuser', true);
+        });
     }
 
     bindings() {
@@ -159,6 +204,7 @@ export default class extends EventListener {
     setIds() {
         this.setMessageIds();
         this.setUserIds();
+        this.setChannelIds();
     }
 
     setMessageIds() {
@@ -173,11 +219,25 @@ export default class extends EventListener {
         }
     }
 
+    setChannelIds() {
+        for (let channel of document.querySelectorAll('[class*=channels] [class*=containerDefault]')) {
+            this.setChannelId(channel);
+        }
+    }
+
     setId(msg) {
         if (msg.hasAttribute('message-id')) return;
         const messageid = Reflection(msg).prop('message.id');
         const authorid = Reflection(msg).prop('message.author.id');
-        if (!messageid || !authorid) return;
+        if (!messageid || !authorid) {
+            const msgGroup = msg.closest('.message-group');
+            if (!msgGroup) return;
+            const userTest = Reflection(msgGroup).prop('user');
+            if (!userTest) return;
+            msgGroup.setAttribute('data-author-id', userTest.id);
+            if (userTest.id === TempApi.currentUserId) msgGroup.setAttribute('data-currentuser', true);
+            return;
+        }
         msg.setAttribute('data-message-id', messageid);
         const msgGroup = msg.closest('.message-group');
         if (!msgGroup) return;
@@ -195,6 +255,15 @@ export default class extends EventListener {
         Events.emit('ui:useridset', user);
     }
 
+    setChannelId(channel) {
+        if (channel.hasAttribute('data-channel-id')) return;
+        const channelObj = Reflection(channel).prop('channel');
+        if (!channelObj) return;
+        channel.setAttribute('data-channel-id', channelObj.id);
+        if (channelObj.nsfw) channel.setAttribute('data-channel-nsfw', true);
+        if (channelObj.type && channelObj.type === 2) channel.setAttribute('data-channel-voice', true);
+    }
+
     get appMount() {
         return document.getElementById('app-mount');
     }

client/src/ui/profilebadges.js

@@ -91,7 +91,7 @@ export default class extends EventListener {
     inject(userid) {
         const c = this.contributors.find(c => c.id === userid);
         if (!c) return;
-
+ 
         setTimeout(() => {
             let hasBadges = false;
             let root = document.querySelector('[class*="profileBadges"]');

client/src/ui/reflection.js

@@ -21,6 +21,8 @@ class Reflection {
         if (!ii) return null;
         const fir = this.findInReturn(ii, prop);
         if (fir) return fir;
+        const fim = this.findInChildProps(ii, prop);
+        if (fim) return fim;
         return null;
     }
 
@@ -46,6 +48,17 @@ class Reflection {
         return this.findPropIn(obj, prop);
     }
 
+    static findInChildProps(obj, prop) {
+        try {
+            const f = obj.children || obj.memoizedProps.children;
+            if (!f.props) return null;
+            if (!f.props.hasOwnProperty(prop)) return null;
+            return f.props[prop];
+        } catch (err) {
+            return null;
+        }
+    }
+
     static findPropIn(obj, prop) {
         if (obj && !(obj instanceof Array) && obj instanceof Object && obj.hasOwnProperty(prop)) return obj[prop];
         if (obj && obj instanceof Array) {