User:Simetrical/Censorship

Something I'm planning to do in (hopefully) the near future is write some code to allow offensive images to be blurred out based on category. Basic requirements:


 * Wiki admins should be able to specify a blacklist of categories whose images will get blurred. Users should be able to specify a personal blacklist, and a whitelist to override the global list.
 * When a page with images loads, any image that's supposed to be blurred should get obscured somehow, before it loads. It could be actual blurring, or replacement by a stock image, or something else, but actual blurring sounds good because you can get some idea of the image before you decide whether you want to view it.  Maybe a text overlay saying "Potentially offensive content; click to display" or such.
 * When the user clicks on a blurred image, it should unblur. For bonus points, have an unobtrusive popup something-or-other that offers to automatically unblur any images in these categories (probably not going to happen for the first draft).
 * Must not fragment parser or Squid cache. (This means it will require JavaScript.)
 * Should not cause other performance issues. Like, having to store separate blurred copies of every image is not ideal.
 * Must support categories for both local and foreign images.

My current thinking on the best way to do this for a first stab:


 * Create an interface page along the lines of MediaWiki:Disambiguations for admins to edit, like MediaWiki:Censored-image-categories. Create user prefs for users.
 * To every user-added image on the page, add a class for every category, to the &lt;img> tag itself. (Yes, sigh, more cruft in classes.  Can we easily get categories for images on Commons?)
 * Also add onload="imageLoaded( this )" or such to every user-added image. (Is there a better way to do this?  Capturing event listeners?  Can that be made to work in IE as well?  Anyway, run a script for every image onload.)
 * Add another JS variable to every page (sigh) containing a list of image categories to be blocked. We can omit the variable if it's empty, which should be a common case.
 * Have a script that runs in the (not onload!) that adds .mw-imgcat-Foo { visibility: hidden } for each category of images to be hidden. In this implementation, we can't blur them until they're loaded, so we have to hide them until then.  (If not for IE, we could use data-categories="space-delimited list of category names" and use [data-categories~=Category_name] as the selector.  Much tidier.  Oh well.)
 * In imageLoaded, blur the image, presumably using Pixastic or something. (That's MPL-licensed, bleh.  Should be okay if we keep it in a separate file.)  When it's successfully blurred, remove visibility: hidden.  (Hopefully browsers don't try to be clever and not load it since it's hidden.)  Maybe superimpose some text, etc.  Also add an onclick handler that will unblur it on click.