User:Simetrical/Censorship

(draft 2)

Something I'm planning to do at some point is write some code to allow offensive images to be blurred out based on category. 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.
- It is not acceptable to have a fixed list of categories, like "sexual images" and "violent images", because people's standards vary tremendously. What one person would view as totally non-sexual, another might view as provocative (e.g., a woman in a bikini). So fine-grained classification is necessary, although it might be cumbersome.
- But some kind of tagging system not actually based on categories might be fine, if there's any advantage over categories.
When a page with images loads, any image that's supposed to be blurred should get obscured somehow, before it loads. It should probably be replaced with a stock image of static or something. Should probably have a text overlay saying "Potentially offensive content; click to display" or such.
When the user clicks on an obscured image, it should un-obscure. For bonus points, have an unobtrusive popup something-or-other that offers to automatically un-obscure 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.
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:Disambiguationspage for admins to edit, like MediaWiki:Censored-image-categories. Create user prefs for users in the same format (text box with one cat name per line).
To every user-added image on the page, add a class for every category, to the <img> tag itself. (Yes, sigh, tons more cruft in classes. Can we easily get categories for images on Commons?) If we somehow restrict which categories people are allowed to block, like require a special magic word on the category page, then we could get away with having only a few categories added, but this is more restrictive. However, having the categories as classes might be useful for other things too, so meh, maybe it's okay. FIXME: is there a better way to do this that doesn't add tons of cruft?
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.) Actually we'd want to do this before load if possible, right when the <img> tag is added to the DOM, so that visibility isn't delayed.
Add the site-specific and user-specific lists of categories to block/not block to site and user JS.
Have a script that runs in the <head> (not onload!) that adds .mw-imgcat-Foo { visibility: hidden } for each category of images to be hidden. This is needed so they don't display briefly before vanishing. (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(), store the src somewhere and replace it with the stock image source, then remove visibility: hidden for that image. (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 restore the original source on click.