|
| |||||||||||
| ||||||||||||
| © 2021 DigMusic Online/** * 1. GENERAL AJAX FORM SUBMISSION HANDLER * Intercepts a standard form submission by its ID, submits it via fetch (POST), * and passes the result text back to a custom callback function. */ function submitFormAjax(formId, callback) { const formElement = document.getElementById(formId); if (!formElement) return; formElement.addEventListener('submit', function (event) { event.preventDefault(); event.stopPropagation(); const formData = new FormData(formElement, event.submitter); if (event.submitter && event.submitter.name) { formData.append(event.submitter.name, event.submitter.value); } const actionUrl = formElement.getAttribute('action') || './ajax_handler.php'; fetch(actionUrl, { method: 'POST', body: formData }) .then(response => response.text()) .then(result => { if (typeof callback === 'function') { callback(result, formElement); } }) .catch(error => { console.error("Fetch error:", error); }); return false; }); } /** * 2. ALPHABETICAL DROPDOWN OPTION INSERTER */ function insertOptionAlphabetically(selectElement, text, value) { if (!selectElement) return; for (let i = 0; i < selectElement.options.length; i++) { if (selectElement.options[i].value === value) return; } const option = document.createElement('option'); option.value = value; option.text = text; let inserted = false; for (let i = 0; i < selectElement.options.length; i++) { if (selectElement.options[i].value === "") continue; if (selectElement.options[i].text.localeCompare(text, undefined, {sensitivity: 'accent', numeric: true}) > 0) { selectElement.add(option, selectElement.options[i]); inserted = true; break; } } if (!inserted) { selectElement.add(option); } } /** * 3. SCORE UPDATE AJAX HANDLER */ function updateScoreAjax() { const formElement = document.getElementById('scoreForm'); const selectElement = document.getElementById('scoreSelect'); if (!formElement || !selectElement) return; if (selectElement.value === "") return; const formData = new FormData(formElement); formData.set('score', selectElement.value); // Ensure URL is present if missing if (!formData.has('url') || formData.get('url') === '') { const segments = window.location.pathname.split('/'); const lastSegment = segments[segments.length - 1]; const trackUrl = lastSegment.replace('play_', '').replace('.php', ''); formData.set('url', trackUrl); } const actionUrl = formElement.getAttribute('action') || window.location.href; fetch(actionUrl, { method: 'POST', body: formData }) .then(response => response.text()) .then(html => { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const currentTable = formElement.closest('table'); const newDocTable = doc.getElementById('scoreForm') ? doc.getElementById('scoreForm').closest('table') : null; if (currentTable && newDocTable) { currentTable.innerHTML = newDocTable.innerHTML; } }) .catch(error => { console.error("Score fetch error:", error); }); } /** * 4. SHELF ITEM AJAX INITIALIZER */ function initShelfItemAjax() { if (window._shelfAjaxInitialized) return; window._shelfAjaxInitialized = true; document.addEventListener('submit', function (event) { const form = event.target; const isShelfForm = form.name === 'shelfitemform' || form.id === 'addToShelfForm' || form.querySelector('select[name="myshelves"]'); if (!isShelfForm) return; event.preventDefault(); event.stopPropagation(); const formData = new FormData(form, event.submitter); if (event.submitter && event.submitter.name) { formData.append(event.submitter.name, event.submitter.value); } formData.set('ajax', '1'); const actionUrl = form.getAttribute('action') || './add_to_shelf.php'; fetch(actionUrl, { method: 'POST', body: formData }) .then(response => response.text()) .then(html => { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const shelfItemContainer = document.getElementById('shelfItemContainer'); const newContainer = doc.getElementById('shelfItemContainer'); if (newContainer && shelfItemContainer) { shelfItemContainer.innerHTML = newContainer.innerHTML; } const newInfo = doc.getElementById('trackShelvesInfo'); const currentInfo = document.getElementById('trackShelvesInfo'); if (newInfo && currentInfo) { currentInfo.outerHTML = newInfo.outerHTML; } }) .catch(error => { console.error("Shelf item fetch error:", error); }); return false; }); } /** * 5. DOM CONTENT LOADED INITIALIZER */ document.addEventListener("DOMContentLoaded", function () { // Handle score dropdown change event cleanly const selectElement = document.getElementById('scoreSelect'); if (selectElement) { selectElement.addEventListener('change', updateScoreAjax); } // Handle the creation of a brand new custom shelf dynamically submitFormAjax('shelfForm', function(result, form) { let status = document.getElementById('shelfStatus'); if (!status) return; let cleanResult = result.trim(); if (cleanResult.startsWith("Success")) { status.innerText = "Added!"; status.style.color = "green"; const shelfInput = form.querySelector('input[name="shelf_name"]'); const shelfName = shelfInput ? shelfInput.value.trim() : ""; let newSid = ""; let separator = cleanResult.includes("|") ? "|" : ":"; if (cleanResult.includes(separator)) { let parts = cleanResult.split(separator); newSid = parts[1].replace(/[^0-9]/g, ""); } // Instantly inject into all relevant dropdowns alphabetically if (shelfName && newSid) { document.querySelectorAll('select[name="shelvesall"], select[name="sid"], select[name="myshelves"], #myShelvesSelect').forEach(sel => { insertOptionAlphabetically(sel, shelfName, newSid); }); } form.reset(); } else if (cleanResult.includes("Already there")) { status.innerText = "Already exists."; status.style.color = "orange"; } else { status.innerText = "Error."; status.style.color = "red"; } }); // Handle comment submissions cleanly using your standard AJAX form submitter submitFormAjax('commentform', function(result, form) { const commentsContainer = document.getElementById('commentsContainer'); if (!commentsContainer) return; const parser = new DOMParser(); const doc = parser.parseFromString(result, 'text/html'); const newContainer = doc.getElementById('commentsContainer'); if (newContainer) { commentsContainer.innerHTML = newContainer.innerHTML; form.reset(); } }); // Initialize the other AJAX watchers safely once on load if (typeof initShelfItemAjax === 'function') { initShelfItemAjax(); } }); /** /** * 6. GLOBE TRANSLATE POPUP TOGGLE */ function toggleTranslatePopup(event) { event.stopPropagation(); const popup = document.getElementById('translatePopup'); if (popup) { // Explicitly toggle inline display block/none if (popup.style.display === 'none' || popup.style.display === '') { popup.style.display = 'block'; } else { popup.style.display = 'none'; } } } // Close the popup if clicking anywhere else on the page document.addEventListener('click', () => { const popup = document.getElementById('translatePopup'); if (popup && popup.style.display === 'block') { popup.style.display = 'none'; } }); | ||||||||||||
