diff --git a/public/index.html b/public/index.html index 41f7e32b..b5d96501 100644 --- a/public/index.html +++ b/public/index.html @@ -80,10 +80,10 @@ - + - + diff --git a/public/packets.js b/public/packets.js index 80b515c5..baec4321 100644 --- a/public/packets.js +++ b/public/packets.js @@ -400,7 +400,7 @@ `; // Init shared RegionFilter component - RegionFilter.init(document.getElementById('packetsRegionFilter')); + RegionFilter.init(document.getElementById('packetsRegionFilter'), { dropdown: true }); RegionFilter.onChange(function() { loadPackets(); }); const obsSel = document.getElementById('fObserver'); diff --git a/public/region-filter.js b/public/region-filter.js index b2c7ef98..c072240c 100644 --- a/public/region-filter.js +++ b/public/region-filter.js @@ -177,7 +177,7 @@ } container.style.display = ''; - if (codes.length > 4) { + if (codes.length > 4 || container._forceDropdown) { renderDropdown(container, codes); } else { renderPills(container, codes); @@ -195,8 +195,10 @@ _listeners = _listeners.filter(function (f) { return f !== fn; }); } - /** Initialize filter in a container, fetch regions, render, return promise */ - async function initFilter(container) { + /** Initialize filter in a container, fetch regions, render, return promise. + * Options: { dropdown: true } to force dropdown mode regardless of region count */ + async function initFilter(container, opts) { + if (opts && opts.dropdown) container._forceDropdown = true; await fetchRegions(); render(container); }