Add basic thumb rendering support

* DOM based on Wikia's thumb output: HTML5, clean caption without magnify
  icon.
* basic RDFa annotations, but most options additionally in data-mw object-
  might want to move more (or all?) of those into RDFa data using meta tags.
* no support yet for framed or other formats, image scaling etc
* also tweaked some config options in the environment

Change-Id: Ie461fcdce060cfc2dec65cc057709ae650ef3368
This commit is contained in:
Gabriel Wicke 2012-04-09 22:58:55 +02:00
parent f99cb06e10
commit 403be4af42
5 changed files with 138 additions and 17 deletions

View file

@ -107,9 +107,6 @@ WikiLinkHandler.prototype.renderFile = function ( token, manager, cb, title ) {
var content = token.attribs.slice(1, -1);
// TODO: get /wiki from config!
var a = new TagTk( 'a', [ new KV( 'href', '/wiki' + title.makeLink() ) ] );
a.dataAttribs = token.dataAttribs;
var MD5 = new jshashes.MD5(),
hash = MD5.hex( title.key ),
@ -122,7 +119,7 @@ WikiLinkHandler.prototype.renderFile = function ( token, manager, cb, title ) {
// extract options
var options = [],
oHash = {},
caption = null;
caption = [];
for( var i = 0, l = content.length; i<l; i++ ) {
var oContent = content[i],
oText = manager.env.tokensToString( oContent.v, true );
@ -148,7 +145,9 @@ WikiLinkHandler.prototype.renderFile = function ( token, manager, cb, title ) {
options.push(new KV( 'height', y ) );
oHash.height = y;
}
//console.log( JSON.stringify( oHash ) );
} else {
// XXX: check handling of multiple captions in default MW!
caption = caption.concat( oContent.v );
}
}
@ -157,10 +156,11 @@ WikiLinkHandler.prototype.renderFile = function ( token, manager, cb, title ) {
if ( bits.length > 1 && this._prefixImageOptions[ bits[0].trim() ] ) {
console.log('handle prefix ' + bits );
} else {
caption = oContent;
caption = caption.concat( oContent.v );
}
}
}
//console.warn('caption: ' + JSON.stringify( caption ) );
//var contentPos = token.dataAttribs.contentPos;
@ -172,18 +172,117 @@ WikiLinkHandler.prototype.renderFile = function ( token, manager, cb, title ) {
//console.log( JSON.stringify( options, null, 2 ) );
// XXX: check if the file exists, generate thumbnail, get size
// XXX: render according to mode (inline, thumb, framed etc)
var img = new SelfclosingTagTk( 'img',
[
// FIXME!
new KV( 'height', oHash.height || '120' ),
new KV( 'width', oHash.width || '120' ),
new KV( 'src', path ),
new KV( 'alt', oHash.alt || title.key )
] );
if ( oHash.format && oHash.format === 'thumb' ) {
return this.renderThumb( token, manager, cb, title, path, caption, oHash, options );
} else {
// TODO: get /wiki from config!
var a = new TagTk( 'a', [ new KV( 'href', title.makeLink() ) ] );
a.dataAttribs = token.dataAttribs;
return { tokens: [ a, img, new EndTagTk( 'a' )] };
var width, height;
if ( ! height in oHash && ! width in oHash ) {
width = '120px';
height = '120px';
} else {
width = oHash.width;
height = oHash.height;
}
var img = new SelfclosingTagTk( 'img',
[
// FIXME!
new KV( 'height', height || '' ),
new KV( 'width', width || '' ),
new KV( 'src', path ),
new KV( 'alt', oHash.alt || title.key )
] );
return { tokens: [ a, img, new EndTagTk( 'a' )] };
}
};
WikiLinkHandler.prototype.renderThumb = function ( token, manager, cb, title, path, caption, oHash, options ) {
// TODO: get /wiki from config!
var a = new TagTk( 'a', [ new KV( 'href', title.makeLink() ) ] );
a.dataAttribs = token.dataAttribs;
a.dataAttribs.optionHash = oHash;
a.dataAttribs.optionList = options;
var thumb =
[
new TagTk(
'figure',
[
new KV('class', 'thumb tright thumbinner'),
new KV('style', 'width: 125px'),
new KV('typeof', 'http://mediawiki.org/rdf/Thumb'),
new KV('prefix', "mw: http://mediawiki.org/rdf/terms/")
]
),
new TagTk(
'a',
[
new KV('href', title.makeLink()),
new KV('class', 'image')
]
),
new SelfclosingTagTk(
'img',
[
new KV('src', path),
new KV('width', '120px'),
new KV('height', '120px'),
new KV('class', 'thumbimage'),
new KV('alt', oHash.alt || title.key ),
new KV('resource', title.getPrefixedText())
]
),
new EndTagTk( 'a' ),
new SelfclosingTagTk (
'a',
[
new KV('href', title.makeLink()),
new KV('class', 'internal sprite details magnify'),
new KV('title', 'View photo details')
]
),
new TagTk( 'figcaption',
[
new KV('class', 'thumbcaption'),
new KV('property', 'mw:thumbcaption')
] )
].concat(
caption,
[
new EndTagTk( 'figcaption' ),
new EndTagTk( 'figure' )
]
);
// set round-trip information on the wrapping figure token
thumb[0].dataAttribs = token.dataAttribs;
/*
* Wikia DOM:
<figure class="thumb tright thumbinner" style="width:270px;">
<a href="Delorean.jpg" class="image" data-image-name="DeLorean.jpg" id="DeLorean-jpg">
<img alt="" src="Delorean.jpg" width="268" height="123" class="thumbimage">
</a>
<a href="File:DeLorean.jpg" class="internal sprite details magnify" title="View photo details"></a>
<figcaption class="thumbcaption">
A DeLorean DMC-12 from the front with the gull-wing doors open
<table><tr><td>test</td></tr></table>
Continuation of the caption
</figcaption>
<div class="picture-attribution">
<img src="Christian-Avatar.png" width="16" height="16" class="avatar" alt="Christian">Added by <a href="User:Christian">Christian</a>
</div>
</figure>
*/
//console.warn( 'thumbtokens: ' + JSON.stringify( thumb, null, 2 ) );
return { tokens: thumb };
};
function ExternalLinkHandler( manager, isInclude ) {
@ -237,6 +336,7 @@ ExternalLinkHandler.prototype.onUrlLink = function ( token, manager, cb ) {
}
};
// Bracketed external link
ExternalLinkHandler.prototype.onExtLink = function ( token, manager, cb ) {
var env = this.manager.env,

View file

@ -412,7 +412,7 @@ function TemplateRequest ( manager, title ) {
// Increase the number of maximum listeners a bit..
this.setMaxListeners( 10000 );
var self = this,
url = manager.env.wgScriptPath + '/api' +
url = manager.env.wgScript + '/api' +
manager.env.wgScriptExtension +
'?' +
qs.stringify( {

View file

@ -23,6 +23,20 @@ Title.prototype.makeLink = function () {
}
};
Title.prototype.getPrefixedText = function () {
// XXX: links always point to the canonical namespace name.
if ( this.nskey ) {
return this.env.sanitizeURI( this.nskey + ':' + this.key );
} else {
var ns = this.ns.getDefaultName();
if ( ns ) {
ns += ':';
}
return this.env.sanitizeURI( ns + this.key );
}
};
function Namespace ( id ) {
this.id = id;

View file

@ -115,6 +115,7 @@ PegTokenizer.prototype.inline_breaks = function (input, pos, stops ) {
case '|':
return counters.pipe ||
counters.template ||
counters.linkdesc ||
( stops.onStack('table') &&
( input[pos + 1].match(/[|}]/) !== null ||
counters.tableCellArg

View file

@ -38,11 +38,16 @@ var ParserPipeline = require('./mediawiki.parser.js').ParserPipeline,
'boolean': false,
'default': 40
},
'wgScriptPath': {
'wgScript': {
description: 'http path to remote API, e.g. http://wiki.sample.com/w',
'boolean': false,
'default': 'http://en.wikipedia.org/w'
},
'wgScriptPath': {
description: 'http path to remote web interface, e.g. http://wiki.sample.com/wiki',
'boolean': false,
'default': 'http://en.wikipedia.org/wiki'
},
'wgScriptExtension': {
description: 'Extension for PHP files on remote API server, if any. Include the period, e.g. ".php"',
'boolean': false,
@ -63,6 +68,7 @@ var ParserPipeline = require('./mediawiki.parser.js').ParserPipeline,
var env = new ParserEnv( {
// fetch templates from enwiki by default..
wgScript: argv.wgScript,
wgScriptPath: argv.wgScriptPath,
wgScriptExtension: argv.wgScriptExtension,
// XXX: add options for this!