While I love the new docs, I am struggling to find exactly what I'm looking for in the runewords page due to the way the search field works (it looks for the search term anywhere in multiple fields).
For instance, if I want to see the RWs for any weapon, ordered by level requirements, I'll type "weapons" in the search bar, then sort by level.
However, the result includes Paladin Blunt Weapons, Barbarian Weapons and even Amazon Bows (RW "Colliding Worlds" gives +(1 to 6) to Elfin Weapons ).
I propose an additional drop-down menu next to the search bar that allows filtering based on the Base Item. The use of the filter will limit the results the Search bar is going through, thus allowing more specific searches.
I wrote a small script that implements this proposal in a very non-intrusive way: It generates the drop-down dynamically, so no modifications to the website code are required, other than the inclusion of the script itself. The only requirement is it to load the script after the DataTables plugin.
Tested with Chrome 61.0.3163.100, Firefox 55.0.3 and the Edgiest browser out there.
The full source is below, it's quite verbose to make it easier to read.
Code: Select all
;;(function(){
var RunewordsTable = $("#DataTables_Table_0").DataTable();
var BaseItems = RunewordsTable.column(4).data().sort().unique().filter(function(value){ return !value.match("except"); });
var DataTablesFilterContainer = $("#DataTables_Table_0_filter");
var Label = $("<label/>").html("Filter by base item: ").prependTo(DataTablesFilterContainer);
var BaseItemFilter = $("<select/>").css({margin: "0 2px 2px 0"}).appendTo(Label).on('change', filterBaseItem);
function filterBaseItem(event) {
// The RunewordsTable works due to it being defined in the scope of the closure
var BaseItem;
if (!event.target.value) {
BaseItem = "";
}
else {
// The regex matches only the beginning due to a but with the runewords with exclusions
BaseItem = "^BI".replace(/BI/, event.target.value);
};
RunewordsTable.column(4).search(BaseItem, true, false).draw();
};
// Default to any base item (show all)
$("<option/>").val("").html("-- Show all --").prependTo(BaseItemFilter);
// Create a selector for each base item in the drop-down
$.each(BaseItems, function(index, BaseItem){
BaseItemFilter.append($("<option/>").val(BaseItem).html(BaseItem));
});
})();
Here's the same, but minified to save up a few KBs if you'd like:
Code: Select all
!function(){function a(a){var l;l=a.target.value?"^BI".replace(/BI/,a.target.value):"",t.column(e).search(l,!0,!1).draw()}var e=4,t=$("#DataTables_Table_0").DataTable(),l=t.column(e).data().sort().unique().filter(function(a){return!a.match("except")}),n=$("#DataTables_Table_0_filter"),o=$("<label/>").html("Filter by base item: ").prependTo(n),r=$("<select/>").css({margin:"0 2px 2px 0"}).appendTo(o).on("change",a);$("<option/>").val("").html("-- Show all --").prependTo(r),$.each(l,function(a,e){r.append($("<option/>").val(e).html(e))})}();
[EDIT] Here's a video showing it in action (the dropdown is invisible due to video recording addon):
