Refactor chid/grid attributes to data attributes - We don't believe in imaginary HTML attributes that we make up, right?

7c9b34711623b283b1d413b2ab71e9726dd6bf16

Wolfsblvt <wolfsblvt@gmail.com>

Parents: a611a3ac59a237ab331019391eb0a18a4ffa75ad
7 files changed, +34 -26Showing whitespace changes
public/script.js+11 -3
@@ -1342,6 +1342,14 @@ export function resultCheckStatus() {
13421342 stopStatusLoading();
13431343}
13441344
1345+
1346+/**
1347+ * Switches the currently selected character to the one with the given ID. (character index, not the character key!)
1348+ *
1349+ * If the character ID doesn't exist, if the chat is being saved, or if a group is being generated, this function does nothing.
1350+ * If the character is different from the currently selected one, it will clear the chat and reset any selected character or group.
1351+ * @param {number} id The ID of the character to switch to.
1352+ */
13451353export async function selectCharacterById(id) {
13461354 if (characters[id] === undefined) {
13471355 return;
@@ -1415,7 +1423,7 @@ function getCharacterBlock(item, id) {
14151423 }
14161424 // Populate the template
14171425 const template = $('#character_template .character_select').clone();
14181426 template.attr({ 'data-chid': id, 'id': `CharID${id}` });
14191427 template.find('img').attr('src', this_avatar).attr('alt', item.name);
14201428 template.find('.avatar').attr('title', `[Character] ${item.name}\nFile: ${item.avatar}`);
14211429 template.find('.ch_name').text(item.name).attr('title', `[Character] ${item.name}`);
@@ -6191,7 +6199,7 @@ export async function renameCharacter(name = null, { silent = false, renameChats
61916199 if (newChId !== -1) {
61926200 // Select the character after the renaming
61936201 this_chid = -1;
61946202 await selectCharacterById(String(newChId));
61956203
61966204 // Async delay to update UI
61976205 await delay(1);
@@ -9878,7 +9886,7 @@ jQuery(async function () {
98789886 });
98799887
98809888 $(document).on('click', '.character_select', async function () {
98819889 const id = Number($(this).attr('data-chid'));
98829890 await selectCharacterById(id);
98839891 });
98849892
public/scripts/BulkEditOverlay.js+8 -8
@@ -672,7 +672,7 @@ class BulkEditOverlay {
672672 * @param {HTMLElement} currentCharacter - The html element of the currently toggled character
673673 */
674674 handleShiftClick = (currentCharacter) => {
675675 const characterId = Number(currentCharacter.getAttribute('data-chid'));
676676 const select = !this.selectedCharacters.includes(characterId);
677677
678678 if (this.lastSelected.characterId && this.lastSelected.select !== undefined) {
@@ -691,7 +691,7 @@ class BulkEditOverlay {
691691 * @param {boolean} [param1.markState] - Whether the toggle of this character should be remembered as the last done toggle
692692 */
693693 toggleSingleCharacter = (character, { markState = true } = {}) => {
694694 const characterId = Number(character.getAttribute('data-chid'));
695695
696696 const select = !this.selectedCharacters.includes(characterId);
697697 const legacyBulkEditCheckbox = character.querySelector('.' + BulkEditOverlay.legacySelectedClass);
@@ -699,11 +699,11 @@ class BulkEditOverlay {
699699 if (select) {
700700 character.classList.add(BulkEditOverlay.selectedClass);
701701 if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = true;
702702 this.#selectedCharacters.push(String(characterId));
703703 } else {
704704 character.classList.remove(BulkEditOverlay.selectedClass);
705705 if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = false;
706706 this.#selectedCharacters = this.#selectedCharacters.filter(item => String(characterId) !== item);
707707 }
708708
709709 this.updateSelectedCount();
@@ -732,15 +732,15 @@ class BulkEditOverlay {
732732 * @param {boolean} select - <c>true</c> if the characters in the range are to be selected, <c>false</c> if deselected
733733 */
734734 toggleCharactersInRange = (currentCharacter, select) => {
735735 const currentCharacterId = Number(currentCharacter.getAttribute('data-chid'));
736736 const characters = Array.from(document.querySelectorAll('#' + BulkEditOverlay.containerId + ' .' + BulkEditOverlay.characterClass));
737737
738738 const startIndex = characters.findIndex(c => Number(c.getAttribute('data-chid')) === Number(this.lastSelected.characterId));
739739 const endIndex = characters.findIndex(c => Number(c.getAttribute('data-chid')) === currentCharacterId);
740740
741741 for (let i = Math.min(startIndex, endIndex); i <= Math.max(startIndex, endIndex); i++) {
742742 const character = characters[i];
743743 const characterId = Number(character.getAttribute('data-chid'));
744744 const isCharacterSelected = this.selectedCharacters.includes(characterId);
745745
746746 // Only toggle the character if it wasn't on the state we have are toggling towards.
public/scripts/RossAscends-mods.js+3 -3
@@ -280,7 +280,7 @@ async function RA_autoloadchat() {
280280 if (active_character !== null && active_character !== undefined) {
281281 const active_character_id = characters.findIndex(x => getTagKeyForEntity(x) === active_character);
282282 if (active_character_id !== null) {
283283 await selectCharacterById(String(active_character_id));
284284
285285 // Do a little tomfoolery to spoof the tag selector
286286 const selectedCharElement = $(`#rm_print_characters_block .character_select[chid="${active_character_id}"]`);
@@ -875,14 +875,14 @@ export function initRossMods() {
875875
876876 // when a char is selected from the list, save their name as the auto-load character for next page load
877877 $(document).on('click', '.character_select', function () {
878878 const characterId = $(this).attr('chid') || $(this).data('id-chid');
879879 setActiveCharacter(characterId);
880880 setActiveGroup(null);
881881 saveSettingsDebounced();
882882 });
883883
884884 $(document).on('click', '.group_select', function () {
885885 const groupId = $(this).attr('data-chid') || $(this).attr('grid') || $(this).data('id-grid');
886886 setActiveCharacter(null);
887887 setActiveGroup(groupId);
888888 saveSettingsDebounced();
public/scripts/group-chats.js+5 -5
@@ -677,7 +677,7 @@ export function getGroupBlock(group) {
677677
678678 const template = $('#group_list_template .group_select').clone();
679679 template.data('id', group.id);
680680 template.attr('data-grid', group.id);
681681 template.find('.ch_name').text(group.name).attr('title', `[Group] ${group.name}`);
682682 template.find('.group_fav_icon').css('display', 'none');
683683 template.addClass(group.fav ? 'is_fav' : '');
@@ -1364,7 +1364,7 @@ function getGroupCharacterBlock(character) {
13641364 template.data('id', character.avatar);
13651365 template.find('.avatar img').attr({ 'src': avatar, 'title': character.avatar });
13661366 template.find('.ch_name').text(character.name);
13671367 template.attr('data-chid', characters.indexOf(character));
13681368 template.find('.ch_fav').val(isFav);
13691369 template.toggleClass('is_fav', isFav);
13701370
@@ -1641,7 +1641,7 @@ async function onGroupActionClick(event) {
16411641 }
16421642
16431643 if (action === 'speak') {
16441644 const chid = Number(member.attr('data-chid'));
16451645 if (Number.isInteger(chid)) {
16461646 Generate('normal', { force_chid: chid });
16471647 }
@@ -1693,7 +1693,7 @@ function openCharacterDefinition(characterSelect) {
16931693 return;
16941694 }
16951695
16961696 const chid = characterSelect.attr('data-chid');
16971697
16981698 if (chid === null || chid === undefined) {
16991699 return;
@@ -2011,7 +2011,7 @@ jQuery(() => {
20112011 }
20122012
20132013 $(document).on('click', '.group_select', function () {
20142014 const groupId = $(this).attr('data-chid') || $(this).attr('grid') || $(this).data('id-grid');
20152015 openGroupById(groupId);
20162016 });
20172017 $('#rm_group_filter').on('input', filterGroupMembers);
public/scripts/personas.js+2 -2
@@ -1163,7 +1163,7 @@ function updatePersonaLockIcons() {
11631163 $('#lock_persona_to_char i.icon').toggleClass('fa-unlock', !hasCharLock);
11641164}
11651165
11661166async function setChatLockedPersonaloadPersonaForCurrentChat() {
11671167 // Cache persona list to check if they exist
11681168 const userAvatars = await getUserAvatars(false);
11691169
@@ -1484,6 +1484,6 @@ export function initPersonas() {
14841484 convertCharacterToPersona();
14851485 }
14861486 });
14871487 eventSource.on(event_types.CHAT_CHANGED, setChatLockedPersonaloadPersonaForCurrentChat);
14881488 switchPersonaGridView();
14891489}
public/scripts/tags.js+2 -2
@@ -485,8 +485,8 @@ export function getTagKeyForEntityElement(element) {
485485 }
486486 // Start with the given element and traverse up the DOM tree
487487 while (element.length && element.parent().length) {
488488 const grid = element.attr('data-grid');
489489 const chid = element.attr('data-chid');
490490 if (grid || chid) {
491491 const id = grid || chid;
492492 return getTagKeyForEntity(id);
public/scripts/world-info.js+3 -3
@@ -4731,7 +4731,7 @@ export function checkEmbeddedWorld(chid) {
47314731 }
47324732
47334733 if (characters[chid]?.data?.character_book) {
47344734 $('#import_character_info').data('data-chid', chid).show();
47354735
47364736 // Only show the alert once per character
47374737 const checkKey = `AlertWI_${characters[chid].avatar}`;
@@ -4765,7 +4765,7 @@ export function checkEmbeddedWorld(chid) {
47654765}
47664766
47674767export async function importEmbeddedWorldInfo(skipPopup = false) {
47684768 const chid = $('#import_character_info').data('data-chid');
47694769
47704770 if (chid === undefined) {
47714771 return;
@@ -5149,7 +5149,7 @@ jQuery(() => {
51495149 });
51505150
51515151 $('#world_button').on('click', async function (event) {
51525152 const chid = $('#set_character_world').data('data-chid');
51535153
51545154 if (chid) {
51555155 const worldName = characters[chid]?.data?.extensions?.world;