MediaWiki:Monobook.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All JavaScript here will be loaded for users of the MonoBook skin */

$(document).ready(function(){
  // Helper function that converts a container into a select dropdown.
  function createSelectFromContainer(containerSelector, selectId) {
    var $container = $(containerSelector);
    var dropdownTitle = $container.find("h3").text();
    
    // Create a label element.
    var $label = $("<label>").attr("for", selectId).text(dropdownTitle);
    
    // Create the select element.
    var $select = $("<select>").attr("id", selectId);
    
    // Add a default, disabled option.
    var $defaultOption = $("<option>")
                          .attr("value", "")
                          .text(dropdownTitle)
                          .prop("disabled", true)
                          .prop("selected", true);
    $select.append($defaultOption);
    
    // Create options from each list item.
    $container.find("div > ul > li").each(function(){
      var $anchor = $(this).find("a");
      var text = $anchor.text();
      var value = $anchor.attr("href") || text;
      var $option = $("<option>").attr("value", value).text(text);
      $select.append($option);
    });
    
    // Replace the container's content with the label and the new select.
    $container.empty().append($label).append($select);
    
    // Bind a change event that redirects based on the selected option.
    $select.on("change", function(){
      var url = $(this).val();
      if (url) {
        window.location.href = url;
      }
    });
  }
  
  // Apply the transformation to both containers.
  createSelectFromContainer("#p-ARCHIVES", "archive-select");
  createSelectFromContainer("#p-ARCHIVES-mobilejs", "archive-select-mobilejs");
});