User:The Transhumanist/OutlineViewImageToggler.js
Appearance
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. This code will be executed when previewing this page. |
![]() | This user script seems to have a documentation page at User:The Transhumanist/OutlineViewImageToggler. |
// <syntaxhighlight lang="javascript">
/*
OutlineViewImageToggler.js: provides the "Image" menu item to hide/show images
on outline pages. The script operates in the Vector skin only.
Version 0.9 -- under development.
This script is based on [[User:The Transhumanist/StripSearch.js]]:
https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/StripSearch.js&oldid=809395804
which in turn used the core control structure and subroutines from
[[User:The Transhumanist/OutlineViewAnnotationToggler.js]]:
https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/OutlineViewAnnotationToggler.js&oldid=807301505
Brief comments are provided within the sourcecode below. For extensive explanatory
notes on what the source code does and how it works, see the Script's workshop on
the talk page. (Not ready yet.)
*/
// ============== Set up ==============
// Start off with a bodyguard function to reserve the aliases mw and $
( function ( mw, $ ) {
// we can now rely on mw and $ within the safety of our “bodyguard” function, to mean
// "mediawiki" and "jQuery", respectively (they follow the closing curly bracket - see the end of the script)
// ============== Load dependencies ==============
mw.loader.using( ['mediawiki.util'], function () {
// ============== ready() event listener/handler ==============
// below is jQuery short-hand for $(document).ready(function() { ... });
// it makes the rest of the script wait until the page's DOM is loaded and ready
$(function() {
// ============== activation filters ==============
// Only activate on Vector skin
if ( mw.config.get( 'skin' ) === 'vector' ) {
// Run this script only if "Outline of " is in the page title
if (document.title.indexOf("Outline of ") != -1) {
// End of set up
// =================== Prep work =====================
// Variable declarations, etc., go here
//var ImageSwitch;
var ImageSwitch;
// ================== Core program ===================
// get the value of our status variable from memory
// (this tells us what mode to start in)
var ImageStatus = localStorage.getItem('ImageStatus');
// Core control construct:
// run the function corresponding to the current status
if ( ImageStatus === "hide" ) {
ImageHide();
} else {
ImageShow();
}
}
}
// ======================== Subroutines ===========================
// Functions (aka subroutines) are activated only when they are called.
// Below are the functions called in the core control structure of the program above.
// They are placed at the end of the program, so that the script's flow
// is easier to follow.
// ============ Function to hide the Image ==============
function ImageHide() {
// store status so it persists across page loads
localStorage.setItem("ImageStatus", "hide");
// Hide images (per http://api.jquery.com/hide)
$('.thumb').hide();
// now we have to update the menu item
// (referred to in this script as "ImageSwitch").
// To do that, first we remove it (if it exists):
if ( ImageSwitch ) {
ImageSwitch.parentNode.removeChild(ImageSwitch);
}
// and then we create it (or its replacement) from scratch:
ImageSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Images \(show\)', 'Show images' );
// make the menu item clickable by binding it to a click handler
// (which activates the actions between the curly brackets when clicked):
$( ImageSwitch ).click( function ( e ) {
e.preventDefault(); // prevents any default action -- we want only the following action to run:
ImageShow();
} );
}
// ============ Function to show search results detail ==============
function ImageShow() {
// store status so it persists across page loads
localStorage.setItem("ImageStatus", "show");
// Show images (per http://api.jquery.com/show)
$('.thumb').show();
// now we have to update the menu item
// (referred to in this script as "ImageSwitch").
// To do that, first we remove it (if it exists):
if ( ImageSwitch ) {
ImageSwitch.parentNode.removeChild(ImageSwitch);
}
// and then we create it (or its replacement) from scratch:
ImageSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Images \(hide\)', 'Hide images' );
$( ImageSwitch ).click( function ( e ) {
e.preventDefault(); // prevents any default action -- we want only the following action to run:
ImageHide();
} );
}
} );
} );
}( mediaWiki, jQuery ) );
// </syntaxhighlight>