or ).
* @param {string} id - The artwork ID.
* @param {object} artworkData - The object containing artwork details.
*/
function insertArtworkElements(listItem, id, artworkData) {
// Check if elements already exist within this item.
// Use a generic data attribute to mark as processed by this script.
if (listItem.hasAttribute(ATTR_PROCESSED)) {
return;
}
// Mark the listItem as processed to prevent re-insertion
listItem.dataset.insertionProcessed = 'true';
// Iterate over all configured elements
elementConfigs.forEach(config => {
// 1. Check if this element is enabled in the settings
if (!SCRIPT_SETTINGS[config.settingName]) return;
// 2. Check for exclusion conditions
if (config.excludeRanking && listItem.tagName === 'SECTION') return;
if (config.excludeNormal && listItem.tagName === 'LI') return;
// 3. Check if the required data is available in artworkData
// Get all missing keys (i.e., keys not present in artworkData)
const missingKeys = config.keys.filter(key => !(key in artworkData));
if (missingKeys.length > 0) {
console.warn("Missing keys:", missingKeys);
return;
}
const dataValues = config.keys.map(key => artworkData[key]);
// 4. Generate the element's inner HTML
function getHTML(config, id) {
if (config.getHTMLValueNum === 2) {
return config.getHTML(dataValues[0], dataValues[1], id);
} else { // Defaults to one value
return config.getHTML(dataValues[0], id);
}
}
const elementHTML = getHTML(config, id);
if (!elementHTML) return; // Skip if HTML generation failed
// 5. Determine insertion logic: Grouped or Standalone
if (config.group) {
// --- Logic for Grouped Elements ---
// Elements in the same group share the same CSS
const groupConfig = groupConfigs[config.group];
if (!groupConfig) {
console.warn(`Group '${config.group}' is not defined in groupConfigs.`);
return;
}
// Find or create the container for this group within the listItem
let container = listItem.querySelector(groupConfig.selector);
if (!container) {
// Container does not exist, so create it.
const parentForContainer = groupConfig.getTarget(listItem);
if (parentForContainer) {
parentForContainer.insertAdjacentHTML(groupConfig.position, groupConfig.containerHTML);
// Now that it's created, find it to get the element reference.
container = listItem.querySelector(groupConfig.selector);
}
}
// If container exists (or was just created), insert the element's HTML into it.
if (container) {
container.insertAdjacentHTML('beforeend', elementHTML);
} else {
console.warn(`Could not find or create container for group '${config.group}' in item ID ${id}.`);
}
}
// --- Logic for Standalone Elements ---
else {
const insertionParent = config.getTarget(listItem);
if (insertionParent) {
insertionParent.insertAdjacentHTML(config.position, elementHTML);
} else {
console.warn(`Insertion parent for '${config.key}' not found for item ID ${id}.`);
}
}
});
} // insertArtworkElements
// 处理元素，添加书签数和创建日期
async function processSingleArtworkElement(listItem) {
if (!listItem) {
debugLog('listItem is null');
return;
}
// Not a valid item
if (!listItem.querySelector('img')) {
debugLog('listItem does not have a img tag');
return;
}
// Check if it's a valid item and hasn't been fully processed
if (listItem.hasAttribute(ATTR_PROCESSED)) {
return;
}
const artworkLinkElem = listItem.querySelector('a[href*="/artworks/"]');
if (!artworkLinkElem) {
debugLog('listItem does not have a artwork link');
return;
}
let id = null;
// Extract ID from the href attribute
// Format: "/artworks/ID" or "/lang/artworks/ID"
id = /\d+$/.exec(artworkLinkElem.href)?.[0];
if (!id) {
debugLog('Can not extract ID from the listItem');
return;
}
debugLog("Processing valid item:", listItem);
// Check cache first
let artworkData = artworkDataCache[id];
// If data is in cache (even error state), attempt insertion
if (artworkData) {
if (artworkData.error) {
// If cached data indicates error, mark item as processed to avoid retries
listItem.dataset.insertionProcessed = 'error';
} else {
insertArtworkElements(listItem, id, artworkData);
}
} else {
// Data not in cache, fetch it
// Use a temporary marker to prevent duplicate fetches for the same element
if (listItem.hasAttribute("data-fetching-bmc-cd")) {
return;
}
listItem.dataset.fetchingBmcCd = 'true';
try {
artworkData = await fetchArtworkData(id);
insertArtworkElements(listItem, id, artworkData);
} catch (error) {
// Error already logged in fetchArtworkData
listItem.dataset.insertionProcessed = 'error'; // Mark item as processed with error
} finally {
// Remove temporary fetching marker
delete listItem.dataset.fetchingBmcCd;
}
}
} // processSingleArtworkElement()
// =========================================================================
// Bootstrap
// =========================================================================
// The core function that finds and processes all relevant artwork elements on the page.
function processAllArtworks() {
debugLog("Scanning for new artwork elements...");
document.querySelectorAll(BASE_SELECTOR).forEach(processSingleArtworkElement);
}
// Create a debounced version of the processing function to avoid excessive runs
// during rapid DOM changes (e.g., fast scrolling).
const debouncedProcessAllArtworks = debounce(processAllArtworks, 50);
const observer = new MutationObserver((mutations) => {
debouncedProcessAllArtworks();
});
// Initial run: Process any elements that are already on the page when the script loads.
processAllArtworks();
observer.observe(document.body, { childList: true, subtree: true });
console.log("[Pixiv Info Enhancer] script started.");
})();