User:Inductiveload/Visibility.js

Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Cmd-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (Cmd-Shift-R on a Mac)
Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Clear the cache in Tools → Preferences

For details and instructions about other browsers, see Wikipedia:Bypass your cache.

Code that you insert on this page could contain malicious content capable of compromising your account. If you are unsure whether code you are adding to this page is safe, you can ask at the central discussion page, Scriptorium. The code will be executed when previewing this page under some skins, including Monobook. You can Purge this page in the interim if you wish to refresh the content sooner under another skin.

Documentation for this script can be added at User:Inductiveload/Visibility.

/***************************************************************
 * Annotation switching
 * complain to User:Inductiveload
 * 22-02-2021 - Updated to gadget style with persistent storage
 **************************************************************/


(function($, mw) {
  //Map of properties of the different categories of visibility switch
  var classUIProperties = {
    "typographic-long-s": {
      "selector": ".typographic-long-s",
      "category": "arch-typo",
      "text1": "s",
      "text2": "ſ",
      "text": "long s (ſ)",
      "title": "long s (ſ)",
      "buttonID": "t-showhide-long-s"
    },

    "extiw": {
      "selector": "#mw-content-text .extiw",
      "category": "links",
      "text": "interwiki links",
      "title": "links to external Wikimedia projects",
      "buttonID": "t-showhide-extiw"
    }
  };

  var strings = {
    show: "Show $1",
    hide: "Hide $1"
  };

  var categories = {
    "arch-typo": {
      "is_set": function(props) {
        return $(props.selector + ":first").text() !== props.text1;
      },
      "set": function(props, show) {
        $(props.selector).text(show ? props.text2 : props.text1);
      }
    },
    "links": {
      "is_set": function(props) {
        return !($(props.selector + ":first").hasClass("disabledlink"));
      },
      "set": function(props, show) {
        $(props.selector).toggleClass("disabledlink", !show);
      }
    }
  };

  function store_setting(key, show) {
    mw.cookie.set(key, show, {
      prefix: "gadget-typography"
    });
  }

  function get_setting(key) {
    return mw.cookie.get(key, "gadget-typography", null) === "true";
  }

  function show_hide_str(show, what) {
    return (show ? strings.show : strings.hide).replace("$1", what);
  }

  function update_link(props, shown) {
    var linkText = show_hide_str(shown, props.text);
    var linkTitle = show_hide_str(shown, props.title);

    $("#" + props.buttonID + " a")
      .attr("title", linkTitle)
      .html(linkText);
  }

  // a function to allow custom
  function setupVisibilityButton(key) {

    var props = classUIProperties[key];
    if ($(props.selector).length === 0) {
      // no elements of this type
      return;
    }

    var cookie = get_setting(key);
    var shownAlready = categories[props.category].is_set(props);

    if (cookie !== null) {
      // apply the cookie value
      if (shownAlready !== cookie) {
        categories[props.category].set(props, cookie);
      }
      shownAlready = cookie;

    } else {
      store_setting(key, shownAlready);
    }

    var click_handler = function(key, props) {
      var shown = categories[props.category].is_set(props);
      categories[props.category].set(props, !shown);
      update_link(props, shown);
      store_setting(key, !shown);
    };

    mw.util.addPortletLink("p-do",
      "#", "", props.buttonID, "");
    update_link(props, !shownAlready);

    $("#" + props.buttonID)
      .click(function(e) {
        e.preventDefault();
        click_handler(key, props);
      });
  }

  function install_css() {
    var css = ".mw-content-text a.disabledlink { color: inherit; }";
    $("<style>")
      .text(css)
      .appendTo($("head"));
  }

  // finally, fire the setup, when loaded
  $(function() {
    install_css();
    Object.keys(classUIProperties).forEach(function(key) {
      setupVisibilityButton(key);
    });
  });

}(jQuery, mediaWiki));