Tampermonkey Script for TopShot Lock page Select All feature

topshot_lock_select_tampermonkey.js

// ==UserScript==
// @name         TopShot Locking Page Enhancements
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add the ability to select multiple moments to the Top Shot lock page
// @author       Camerican
// @match        https://nbatopshot.com/lock*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==


(function() {
    'use strict';
    var intervalId = setInterval( function() {
        var elHeading = document.querySelector("h2.chakra-heading");
        if (elHeading) {
            clearInterval(intervalId);
            intervalId = null;
            adjustPage(elHeading);
        }
    }, 1000);

    var selectedSelector = 'svg path[d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm-.997-6 7.07-7.07-1.414-1.415-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16Z"]';
    var unselectedSelector = 'svg path[d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"]';

    function adjustPage(elHeading) {
        var arElMoments = document.querySelectorAll("button.YFXSP");
        $('<div style="margin-top:10px;"><label for="start_after"><button id="select_all" class="css-1qrxf63">Select all moments</button> after # <input name="start_after" type="number" style="border:1px solid #808396; width:40px;" /><button style="float: right;" id="deselect_all" class="css-1qrxf63">Deselect All</button></div>').insertAfter(elHeading);
         document.querySelector("#select_all").addEventListener('click', function(e) {
                selectAllMoments();
            });
        document.querySelector("#deselect_all").addEventListener('click', function(e) {
            deselectAllMoments();
        });
    }

    function selectAllMoments() {
        var elStartAfter = document.querySelector("input[name='start_after']");
        var startAfter = elStartAfter.value || 0;
        selectorWorker(startAfter, unselectedSelector);
     }

    function deselectAllMoments() {
        selectorWorker(0, selectedSelector);
    }

    function selectorWorker(startAfter, selector) {
        Array.from(document.querySelectorAll("button.YFXSP"))
            .slice(startAfter)
            .filter( function(el) {
                 return el.querySelector(selector);
            })
            .forEach( function(el) {
                el.click();
            });
    }

})();