Replaced split ID's with DOM Dataset in channel settings page.

src/views/partial/channelSettings/permList.ejs

@@ -20,8 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
             <% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %>
                 <% if(key != "channelOverrides"){ %>
                     <span class="admin-list-field-container">
-                        <label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label>
+                        <label class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label>
-                        <select id="admin-perm-list-rank-select-<%- key %>" name="admin-perm-list-rank-select-<%- key %>" class="channel-perm-select admin-list-select admin-perm-list-rank-select">
+                        <select data-key="<%- key %>" name="admin-perm-list-rank-select-<%- key %>" class="channel-perm-select admin-list-select admin-perm-list-rank-select">
                             <%rankEnum.slice().reverse().forEach((rank)=>{ %>
                                 <option <%if(channel.permissions.toObject()[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
                             <% }); %>

src/views/partial/channelSettings/settings.ejs

@@ -22,10 +22,10 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
                     <label class="admin-list-label"><%- key %>:</label>
                     <% switch(typeof channel.settings[key]){ 
                     case "string": %>
-                        <input id=<%- `channel-preference-${key}` %> class="channel-preference-list-item" value="<%- channel.settings[key] %>">
+                        <input data-key="<%- key %>" class="channel-preference-list-item" value="<%- channel.settings[key] %>">
                         <% break; 
                     default: %>
-                        <input id=<%- `channel-preference-${key}` %> class="channel-preference-list-item" type="checkbox"  <% if(channel.settings[key]){ %> checked <% } %>>
+                        <input data-key="<%- key %>" class="channel-preference-list-item" type="checkbox"  <% if(channel.settings[key]){ %> checked <% } %>>
                         <% break;
                     } %>
                 </span>

www/js/channel/panels/emotePanel.js

@@ -284,7 +284,6 @@ class emotePanel extends panelObj{
                 //Create trash icon
                 const trashIcon = document.createElement('i');
                 trashIcon.classList.add('emote-list-trash-icon', 'bi-trash-fill');
-                trashIcon.id = `emote-list-trash-icon-${emote.name}`;
 
                 //add deletePersonalEmote event listener
                 trashIcon.addEventListener('click', ()=>{this.deletePersonalEmote(emote.name)});

www/js/channelSettings.js

@@ -163,7 +163,7 @@ class rankList{
     }
 
     async submitUpdate(event){
-        const user = event.target.id.replace("channel-rank-select-","");
+        const user = event.target.dataset.user;
         const rank = event.target.value;
 
         await this.submitUserRank(user, rank);
@@ -203,7 +203,7 @@ class rankList{
             }else{
                 //Create rank select
                 var rankContent = document.createElement('select');
-                rankContent.id = `channel-rank-select-${user.user}`
+                rankContent.dataset.user = user.user;
                 rankContent.classList.add("channel-rank-select")
                 rankContent.addEventListener("change", this.submitUpdate.bind(this));
 
@@ -273,7 +273,7 @@ class banList{
 
     async unban(event){
         //Rip user outta the target id
-        const user = event.target.id.replace("admin-user-list-unban-icon-","");
+        const user = event.target.dataset.name;
         //Tell the server to unban them and get the list returned
         const list = await utils.ajax.chanUnban(this.channel, user);
 
@@ -297,7 +297,7 @@ class banList{
             //Create unban icon node
             const unbanIcon = document.createElement('i');
             unbanIcon.classList.add("bi-emoji-smile-fill","admin-user-list-icon","admin-user-list-unban-icon");
-            unbanIcon.id = `admin-user-list-unban-icon-${ban.user.user}`;
+            unbanIcon.dataset.name = ban.user.user;
             unbanIcon.title = `Unban ${ban.user.user}`;
             unbanIcon.addEventListener("click", this.unban.bind(this));
 
@@ -334,7 +334,7 @@ class prefrenceList{
 
     async submitUpdate(event){
         //Get key from event target
-        const key = event.target.id.replace("channel-preference-","");
+        const key = event.target.dataset.key;
 
         //Pull value from event target
         let value = event.target.value;
@@ -378,7 +378,7 @@ class permList{
     }
 
     async submitUpdate(event){
-        const key = event.target.id.replace("admin-perm-list-rank-select-","");
+        const key = event.target.dataset.key;
         const value = event.target.value;
         const permMap = new Map([
             [key, value]
@@ -429,7 +429,7 @@ class tokeCommandList{
     }
 
     async deleteToke(event){
-        const name = event.target.id.replace("toke-command-delete-","");
+        const name = event.target.dataset.name;
 
         const tokeList = await utils.ajax.deleteChanToke(this.channel, name);
 
@@ -462,7 +462,7 @@ class tokeCommandList{
         //Create toke command delete icon
         const tokeDelete = document.createElement('i');
         tokeDelete.classList.add('toke-command-list', 'bi-trash-fill', 'toke-command-delete');
-        tokeDelete.id = `toke-command-delete-${toke}`;
+        tokeDelete.dataset.name = toke;
         tokeDelete.addEventListener('click', this.deleteToke.bind(this));
 
         //append span contents to tokeSpan
@@ -495,7 +495,7 @@ class emoteList{
 
     async deleteEmote(event){
         //Strip name from element id
-        const name = event.target.id.replace('emote-list-delete-','');
+        const name = event.target.dataset.name;
 
         //Delete emote and pull list
         const list = await utils.ajax.deleteChanEmote(this.channel, name);
@@ -572,7 +572,7 @@ class emoteList{
             const deleteIcon = document.createElement('i');
             //Set delete icon id and class
             deleteIcon.classList.add('bi-trash-fill', 'emote-list-delete');
-            deleteIcon.id = `emote-list-delete-${emote.name}`;
+            deleteIcon.dataset.name = emote.name;
             //Add delete icon event listener
             deleteIcon.addEventListener('click',this.deleteEmote.bind(this));