Reputation: 4492
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 dat.gui 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?
Upvotes: 1
Views: 442
Reputation: 4492
Fixed this by changing the following:
gui = new dat.GUI({
resizable : false
});
Upvotes: 1