joshpatra/allstarr
1
0
Fork 0
mirror of https://github.com/SoPat712/allstarr.git synced 2026-02-09 23:55:10 -05:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix Map to Local button using data attributes instead of inline onclick

Browse Source 
- Avoid JavaScript escaping issues with inline onclick handlers
- Use data attributes to store track info
- Add event listeners after DOM is created
- Prevents syntax errors with special characters in track names
This commit is contained in:
Josh Patra
2026-02-03 23:24:19 -05:00
parent 4229924f61
commit e17eee9bf3
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
allstarr/wwwroot/index.html
View File

@@ -1614,15 +1614,15 @@
statusBadge = '<span class="status-badge success" style="font-size:0.75rem;padding:2px 8px;margin-left:8px;"><span class="status-dot"></span>Local</span>'; statusBadge = '<span class="status-badge success" style="font-size:0.75rem;padding:2px 8px;margin-left:8px;"><span class="status-dot"></span>Local</span>';
} else if (t.isLocal === false) { } else if (t.isLocal === false) {
statusBadge = '<span class="status-badge warning" style="font-size:0.75rem;padding:2px 8px;margin-left:8px;"><span class="status-dot"></span>External</span>'; statusBadge = '<span class="status-badge warning" style="font-size:0.75rem;padding:2px 8px;margin-left:8px;"><span class="status-dot"></span>External</span>';
// Add manual map button for external tracks // Add manual map button for external tracks using data attributes
// Use JSON.stringify to properly escape strings for JavaScript
const escapedName = JSON.stringify(name);
const escapedTitle = JSON.stringify(t.title || '');
// Safely get first artist, defaulting to empty string
const firstArtist = (t.artists && t.artists.length > 0) ? t.artists[0] : ''; const firstArtist = (t.artists && t.artists.length > 0) ? t.artists[0] : '';
const escapedArtist = JSON.stringify(firstArtist); mapButton = `<button class="small map-track-btn"
const escapedSpotifyId = JSON.stringify(t.spotifyId || ''); data-playlist-name="${escapeHtml(name)}"
mapButton = `<button class="small" onclick="openManualMap(${escapedName}, ${t.position}, ${escapedTitle}, ${escapedArtist}, ${escapedSpotifyId})" style="margin-left:8px;font-size:0.75rem;padding:4px 8px;">Map to Local</button>`; data-position="${t.position}"
data-title="${escapeHtml(t.title || '')}"
data-artist="${escapeHtml(firstArtist)}"
data-spotify-id="${escapeHtml(t.spotifyId || '')}"
style="margin-left:8px;font-size:0.75rem;padding:4px 8px;">Map to Local</button>`;
} }
return ` return `
@@ -1639,6 +1639,18 @@
</div> </div>
`; `;
}).join(''); }).join('');
// Add event listeners to map buttons
document.querySelectorAll('.map-track-btn').forEach(btn => {
btn.addEventListener('click', function() {
const playlistName = this.getAttribute('data-playlist-name');
const position = parseInt(this.getAttribute('data-position'));
const title = this.getAttribute('data-title');
const artist = this.getAttribute('data-artist');
const spotifyId = this.getAttribute('data-spotify-id');
openManualMap(playlistName, position, title, artist, spotifyId);
});
});
} catch (error) { } catch (error) {
document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Failed to load tracks</p>'; document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Failed to load tracks</p>';
} }