User:Phiarc/October2011/
This is my submission for the October 2011 Coding Challenge
Further development will take place on github.
Features
edit- Intuitive user interface
- Small footprint (less than 1000 lines of JavaScript, small style sheet, few external images and dependencies)
- Integrates Wikimedia Commons (if the article contains a link to a category on commons, the Slideshow will include pictures from it)
- Features a cookie-based mechanism for storing personal preferences
- Ability to be internationalized (all i18n-relevant strings are stored at a central site, one can easily override default markup and strings via cookies)
- Includes images from infoboxes or similar things too
How to install
edit- Open your common.js file (for example w:en:Special:MyPage/common.js)
- Insert the following line of code:
importScriptURI( "//www.mediawiki.org/w/index.php?title=User:Phiarc/October2011/mabe-october.js&action=raw&ctype=text/javascript" );
[1] - Clear your browsers' cache
- Thats it! If you encounter any problems, feel free to contact me via [marian.beermann@yahoo.de]
Documentation
editHow to use
editYou're only able to invoke a slideshow on articles which actually contain images. The slideshow is invoked via the "Slideshow" link after the "Read" tab.
Keyboard shortcuts
editI implemented a few shortcuts for better usability, supporting both navigation via the arrow keys or the well-known WASD keys
Shortcut | Function |
---|---|
A or left arrow | Previous slide |
D or right arrow | Next slide |
S or down arrow | Jump to the image in the article (same as a click on the text under the image) - this of course only works with images that are actually in the article, not with images from commons |
W or up arrow | Open the image description page (File:XY) in a new tab/window (same as a click on the image) |
Escape | Exit the slideshow |
Settings
editClick on the "Slideshow settings" link to the right side of the "My Preferences" link in your personal toolbar to open the settings. If you click the "Save" button everything will be stored as cookies with an expiration date of 10 years ahead - delete the cookies to reset everything back to the default settings. Please note, that changing the commons settings will only take effect if the slideshow hasn't been invoked yet or if the page is reloaded, as the slideshow is actually not deleted when the "Close"-Button is pressed (for perfomance reasons).
If you want to override settings that are not configurable by default, you can just set a cookie with the name of the variable prepended by "Slideshow." to basically any value that makes sense. E.g. the cookie for the variable i18n.Slideshow would be Slideshow.i18n.Slideshow.
Name of variable | Short description | Default value | expected type[2] |
---|---|---|---|
Mobile.Force | Always use mobile mode | false | bool |
Mobile.Resizing | Enable window resizing in mobile mode (has problems and is obsolete anyway) | false | bool |
Mobile.UI.LeftArrow | A small left arrow for the mobile UI (this and those below are adjustable because smartphone screens differ greatly in terms of resolution) | //upload.wikimedia.org/wikipedia/commons/thumb/5/56/Go-previous-grey.svg/40px-Go-previous-grey.svg.png | string |
Mobile.UI.RightArrow | See above | //upload.wikimedia.org/wikipedia/commons/thumb/1/13/Go-next-grey.svg/40px-Go-next-grey.svg.png | string |
Mobile.UI.DownArrow | See above | //upload.wikimedia.org/wikipedia/commons/thumb/2/22/Go-down-grey.svg/40px-Go-down-grey.svg.png | string |
Commons.Enable | If true commons integration will be enabled | true | bool |
Commons.Limit | Maximum number of images from commons added to the slideshow | 10 | number, floats will be truncated to integers |
Commons.Symbol12px | URL to a thumbnail of the commons logo suitable for appending to the text (the commons logo is appended to the description of every image included from commons) | //upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/12px-Commons-logo.svg.png | string/URL to image |
Animation.Wrapper | Duration of the slideshow body fadein/out | 450 | number, floats will be truncated to integers |
Animation.Slides | Duration of slide transition animation | 500 | number, floats will be truncated to integers |
Markup.Main | HTML markup for the slideshow | (too long) | string containing HTML markup |
Markup.Config | HTML markup for the settings | (too long) | string containing HTML markup |
Style.BaseURL | String to prepend to stylesheet names (e.g. mabe-october.css) | //www.mediawiki.org/w/index.php?action=raw&ctype=text/css&title=User:Phiarc/October2011/ | string containing URI |
i18n.StartSlideshow | Title of the Slideshow tab/link | Start Slideshow | string |
i18n.Slideshow | Text of the Slideshow tab/link | Slideshow | string |
i18n.SlideshowSettings | Text of the Slideshow settings link in the personal toolbar (title is the same as the text) | Slideshow settings | string |
Mobile vs. standard mode
editThe standard mode is designed for todays big screens (such as full HD and similar) with much space. In this mode captions and a bar with thumbnails are shown, the controls are always visible etc. whereas the mobile mode is for smartphones and tablets, which are usually operated via their touchscreens. In the mobile mode resizing support is very limited (and disabled by default) to save as much CPU time as possible in order to save as much energy as possible. Images are also scaled server side to save the often limited bandwith;[3] to save screen space the controls will become only visible when hovered (should be equivalent to touching them on smartphones and tablets but as I don't own any I can't check that...), but they will also remain active when invisible, which should be the most intuitive solution for this. There are no captions, either.
Files
edit- LICENSE (GPLv2)
- mabe-october.js (The main script)
- mabe-october.css (Standard stylesheet)
- mabe-october-mobile.css (mobile stylesheet)
- jquery.cycle.all.js (Mike Alsup's jQuery.Cycle plugin)
- jquery.scrollTo.js (Ariel Flesler's jQuery.scrollTo plugin)
- A few images
Browser compatibility chart
editBrowser | Version | Basic support | Full support | Notes | Full compatibility |
---|---|---|---|---|---|
Firefox | 1.5 | Yes | No | Flickering animations, settings dialog doesn't work | No |
Firefox | 2 | Yes | Yes | Flickering animations (a bit better than FF1.5), the settings dialog must be used with tab-navigation | Yes |
Firefox | 3 | Yes | Yes | Yes | |
Firefox | 3.5 | Yes | Yes | Yes | |
Firefox | 7 | Yes | Yes | Yes | |
Opera | 9.64 | Yes | Yes | Yes | |
Opera | 11.52 | Yes | Yes | Yes | |
Chrome | 15 | Yes | Yes | Yes | |
Safari | 5.1 | Yes | Yes | Stuttering animations | Yes |
Internet Explorer | 8 and below | No | No | No | |
Internet Explorer | 9 | Yes | Yes | Yes |
- If I'm a Wikipedia reader, how do I activate a slideshow?
- The slideshow is activated via the Slideshow button near the read button (views toolbar - In my opinion a slideshow is just another view of an article)
- How will captions be surfaced?
- If an image has a caption, it will be shown under the image in the slideshow
- How will users interact with the slideshow on a tablet or a smartphone?
- On screens smaller than 960x640 pixels or with mobile browsers the mobile mode is automatically activated. This incorporates smaller navigation and better usage of the limited screen space.
- How to deal with different screen resolutions?
- On the fly resizing is fully supported
- How do I get access to other image-related metadata, e.g. licensing information?
- A click on the caption jumps to the image in the article, a click on the image opens the respective File: page in a new window/tab.
- If a Wikipedia article links to related images on Wikimedia Commons (e.g. through Template:Commons or Template:Commons category), how can those be surfaced in the slideshow?
- Those images will be displayed as well, with the only difference that a click on the caption opens a new tab/window with the category containing the image
Did your code run without errors under(JS only)E_STRICT
?[4]- Did your code break any of the unit tests? See Manual:PHP unit testing and Manual:JavaScript unit testing As far as I can tell: no
- Have you tested all exit points from your code? Yes
- Did you use tabs instead of spaces to indent? Yes
If you've created a new function, did you document the function parameters and what it returns using ?(JS only)- Whitespace trailing at the end of lines is annoying, don't do that (but don't fix whitespace at the end of lines you didn't modify in the same commit, just make sure whatever you touched is good, see next point:) No trailing whitespaces as far as I can see
Does this commit contain any whitespace-only changes? They should be isolated to their own separate coding style-only commit.(Not commiting anything ;))- Have you created any identifiers that didn't use camelCase (ie. underscores)? No
- Is every exception tested? I do not use any
- If you have multiple return points, are they tested? Yes
Does each message you've created exist in(JS only)MessagesEn.php
and listed in maintenance/languages/messages.inc?Is each use offopen()
,fread()
, etc. checked for errors or problems?Did you uset
orb
flags forfopen()
to ensure Windows compatibility?Have you used the proper output functions?echo
should almost never be used.Have you used the proper termination functions?exit
should almost never be used.Where appropriate, have you used the MediaWiki wrapper functions instead of their PHP equivalents?wfIniGetBool()
instead ofini_get
to get boolean params
If you add a new test toparserTests.txt
did you give it a new name?Have you runphp checkSyntax.php --modified
?
JavaScript / CSS
edit- Tested in an actual browser? Yes
- Compatible with IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome? IE 9, FF7, Opera 9, Chrome, Safari
- (JavaScript) Does it validate (or did you at least run it through) JSHint[5]? Yes
- (JavaScript) Are there any implied globals other than
jQuery
ormw
? There should not be, (not$
either) None. Everything is handled inside an anonymous function - Is it DRY? I would say yes
- ↑ importScript works only within the same wiki; importScriptURI is basically the same as mw.loader.load - it takes a script URL and inserts a script-tag
- ↑ All cookies are strings, but they are interpreted by the script. The value "true" (as a string) is automatically converted to the bool true, for example.
- ↑ Well I wanted to implement this, but I didn't managed to find enough spare time to do so. My fault ;)
- ↑ Put
error_reporting(-1);
in the entry file. See also Manual:How to debug - ↑ Recommended JSHint settings: [x] Require curly braces around all blocks; [x] Don't check line breaks; [x] Browser