Use image title in history

Changes document title (which is shown in history navigation)
to include the image name.

Bug: 67008
Change-Id: Id1b030f2b984571fb0877e35db2ca2ccc86f0130
This commit is contained in:
Gergő Tisza 2014-07-01 22:22:06 +00:00
parent f5ccd12ee5
commit e055b8bb7d
3 changed files with 49 additions and 5 deletions

View file

@ -334,7 +334,8 @@
* @param {jQuery.Event} e Custom mmv-hash event
*/
MMVB.internalHashChange = function ( e ) {
var hash = e.hash;
var hash = e.hash,
title = e.title;
// The advantage of using pushState when it's available is that it has to ability to truly
// clear the hash, not leaving "#" in the history
@ -345,13 +346,15 @@
hash = window.location.href.replace( /#.*$/, '' );
}
this.browserHistory.pushState( null, null, hash );
this.browserHistory.pushState( null, title, hash );
} else {
// Since we voluntarily changed the hash, we don't want MMVB.hash (which will trigger on hashchange event) to treat it
this.skipNextHashHandling = true;
window.location.hash = hash;
}
document.title = title;
};
/**

View file

@ -122,6 +122,9 @@
* @property {number}
*/
this.metadataDisplayedCount = 0;
/** @property {string} documentTitle base document title, MediaViewer will expand this */
this.documentTitle = document.title;
}
MMVP = MultimediaViewer.prototype;
@ -794,8 +797,10 @@
* Handles close event coming from the lightbox
*/
MMVP.close = function () {
var windowTitle = this.createDocumentTitle( null );
if ( comingFromHashChange === false ) {
$( document ).trigger( $.Event( 'mmv-hash', { hash : '#' } ) );
$( document ).trigger( $.Event( 'mmv-hash', { hash : '#', title: windowTitle } ) );
} else {
comingFromHashChange = false;
}
@ -813,11 +818,13 @@
var route = this.router.parseLocation( window.location );
if ( route instanceof mw.mmv.routing.ThumbnailRoute ) {
document.title = this.createDocumentTitle( route.fileTitle );
this.loadImageByTitle( route.fileTitle );
} else if ( this.isOpen ) {
// This allows us to avoid the mmv-hash event that normally happens on close
comingFromHashChange = true;
document.title = this.createDocumentTitle( null );
if ( this.ui ) {
// FIXME triggers mmv-close event, which calls viewer.close()
this.ui.unattach();
@ -828,11 +835,26 @@
};
MMVP.setHash = function() {
var route, hashFragment;
var route, windowTitle, hashFragment;
if ( !this.comingFromHashChange ) {
route = new mw.mmv.routing.ThumbnailRoute( this.currentImageFileTitle );
hashFragment = '#' + this.router.createHash( route );
$( document ).trigger( $.Event( 'mmv-hash', { hash : hashFragment } ) );
windowTitle = this.createDocumentTitle( this.currentImageFileTitle );
$( document ).trigger( $.Event( 'mmv-hash', { hash : hashFragment, title: windowTitle } ) );
}
};
/**
* Creates a string which can be shown as document title (the text at the top of the browser window).
* @param {mw.Title|null} imageTitle the title object for the image which is displayed; null when the
* viewer is being closed
* @return {string}
*/
MMVP.createDocumentTitle = function ( imageTitle ) {
if ( imageTitle ) {
return imageTitle.getNameText() + ' - ' + this.documentTitle;
} else {
return this.documentTitle;
}
};

View file

@ -596,4 +596,23 @@
mw.config.get( 'wgMultimediaViewer' ).useThumbnailGuessing = oldUseThumbnailGuessing;
} );
QUnit.test( 'document.title', 2, function ( assert ) {
var viewer = new mw.mmv.MultimediaViewer(),
bootstrap = new mw.mmv.MultimediaViewerBootstrap(),
title = new mw.Title( 'File:This_should_show_up_in_document_title.png'),
oldDocumentTitle = document.title;
viewer.currentImageFileTitle = title;
bootstrap.setupEventHandlers();
viewer.setHash();
assert.ok( document.title.match( title.getNameText() ), 'File name is visible in title' );
viewer.close();
bootstrap.cleanupEventHandlers();
assert.strictEqual( document.title, oldDocumentTitle, 'Original title restored after viewer is closed' );
} );
}( mediaWiki, jQuery ) );