Search code examples
javascriptuserscriptstampermonkeydat.gui

dat.GUI Resizes on Click


I've got a userscript that I'm using to add a custom list of predefined searches. To do this, I've created a GUI with and iterated through an object's keys to create the list of buttons. The key's values are used as the search query.

My JavaScript:

NodeList.prototype.forEach = Array.prototype.forEach;

var shows = {
        'Agents of S.H.I.E.L.D.' : 'marvels agents of s.h.i.e.l.d.',
        'Arrow' : 'arrow s',
        'Brooklyn Nine-Nine' : 'brooklyn nine-nine',
        'Castle' : 'castle 2009',
        'Chicago Fire' : 'chicago fire',
        'Chicago P.D.' : 'chicago p.d.',
        'Constantine' : 'contanstine s',
        'Doctor Who' : 'doctor who',
        'Gotham' : 'gotham s',
        'Grimm' : 'grimm s',
        'Madam Secretary' : 'madam secretary',
        'NCIS LA' : 'ncis los angeles',
        'Resurrection' : 'resurrection',
        'Saturday Night Live' : 'saturday night live',
        'Scandal' : 'scandal s',
        'Scorpion' : 'scorpion s',
        'Stalker' : 'stalker s',
        'The 100' : 'the 100 s',
        'The Big Bang Theory' : 'the big bang theory',
        'The Blacklist' : 'the blacklist',
        'The Flash' : 'the flash',
        'The Tonight Show Starring Jimmy Fallon' : 'jimmy fallon',
        'Z Nation' : 'z nation'
    },
    show = function() {
        for (var k in shows) {
            this[k] = function() {
                document.getElementById('tsstac').value = shows[k].replace(/ /g, '.');
                document.querySelectorAll('[type=submit]')[0].click();
            };
        }
    };
window.onload = function() {
    var text = new show(),
        gui = new dat.GUI();
    for (var k in shows) {
        gui.add(text, k);
    }
    document.querySelectorAll('li.cr>div>span.property-name').forEach(function(v) {
        v.style.width = '100%';
    });
};

Basically, whenever I click the "Close Controls" button, it decides to resize following my mouse forever until a refresh. Even if I try to reopen the GUI, it still follows the mouse. I would imagine it would do the same for the buttons though they go to a new page when clicked so it resets the gui.

How can I fix this? Also, is there an API or any Documentation for dat.GUI?


Solution

  • Fixed this by changing the following:

    gui = new dat.GUI({
        resizable : false
    });