backpacktf.open.keys.user.js

//// ==UserScript==
// @name        backpack.tf open keys
// @description Easily open key histories in comparisons
// @version     1.0.3
// @author      Julia
// @namespace   https://github.com/juliarose
// @grant       GM_addStyle
// @run-at      document-end
// @include     /^https?:\/\/(.*\.)?backpack\.tf(:\d+)?\/(?:id|profiles)\/.*/
// ==/UserScript==

(function() {
    // opens the histories for n item id's, then pauses and opens n more until array is empty
    function openNHistories(itemIds, n) {
        // opens the item history for this id in a new window
        function openItemHistory(itemId) {
            //  open it up
            window.open(`https://backpack.tf/item/${itemId}`);
        }
        
        // clone the array so we do not mutate the original
        const itemIdsClone = itemIds.slice(0);
        
        for (let i = 0; i < n; i++) {
            // take the first id out of the array
            const itemId = itemIdsClone.shift();
            
            // break if there is no id
            if (!itemId) {
                break;
            }
            
            openItemHistory(itemId);
        }
        
        if (itemIdsClone.length > 0) {
            // wait 20 seconds, then open n more
            setTimeout(() => {
                // call it again...
                openNHistories(itemIdsClone, n);
            }, 20 * 1000);
        }
    }
    
    // gets array of itemids for all keys within element
    function getKeyItemIds(parentEl) {
        // get all the keys
        const keysList = parentEl.querySelectorAll('li.item[data-name="Mann Co. Supply Crate Key"]');
        
        // then map their ids
        return Array.from(keysList).map((itemEl) => {
            return itemEl.dataset.original_id;
        });
    }
    
    // the comparison model was added
    function onCompareModel(modalEl) {
        const modalFooterEl = modalEl.querySelector('.modal-footer');
        const openKeysBtnEl = document.createElement('span');
        
        openKeysBtnEl.classList.add('btn', 'btn-info');
        openKeysBtnEl.textContent = 'Open removed keys';
        
        // add it to the front of the footer
        modalFooterEl.insertBefore(openKeysBtnEl, modalFooterEl.firstChild);
        
        // opens the keys in removed
        openKeysBtnEl.addEventListener('click', () => {
            // this will be the 2nd compare bin
            const removedBinEl = modalEl.getElementsByClassName('inventory-cmp-bin')[1];
            const itemIds = getKeyItemIds(removedBinEl);
        
            openNHistories(itemIds, 20);
        });
        
        // listen for click events on this modal
        modalEl.addEventListener('click', (e) => {
            const targetEl = e.target;
            const isLabel = targetEl.matches('a.label');
            
            // when labels are clicked
            if (isLabel) {
                // get the parent
                const pageNumberEl = targetEl.closest('.page-number');
                // the list of items is immediately after the page number element
                const itemsListEl = pageNumberEl.nextElementSibling;
                const itemIds = getKeyItemIds(itemsListEl);
                
                // open them
                openNHistories(itemIds, 30);
                
                // block the event
                e.preventDefault();
            }
        });
    }
    
    // the contents on the page were changed
    function onPageContentChange(mutations) {
        const addedNode = (
            mutations[0] &&
            // the modal el should be in the first added node of the first mutation
            mutations[0].addedNodes[0]
        );
        const isCompareModal = Boolean(
            // a node was added
            addedNode &&
            // the added node is a modal
            addedNode.id === 'active-modal' &&
            // and inventory compare bins exist on page
            document.getElementById('inventory-cmp-bins')
        );
        
        // the element added is a compare modal
        if (isCompareModal) {
            // addedNode is the compare modal element
            onCompareModel(addedNode);
        }
    }
    
    // observe changes to the page contents element
    const observer = new MutationObserver(onPageContentChange);
    const pageContentEl = document.getElementById('page-content');
    
    observer.observe(pageContentEl, {
        childList: true
    });
}());