fragments are now included in URL by default, even on named slides

This commit is contained in:
Hakim El Hattab 2020-04-22 11:11:14 +02:00
parent d727509dbc
commit 9823be99f4
9 changed files with 123 additions and 30 deletions

View File

@ -263,7 +263,7 @@ Reveal.initialize({
// Flags whether to include the current fragment in the URL,
// so that reloading brings you to the same fragment position
fragmentInURL: false,
fragmentInURL: true,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen

4
dist/reveal.es5.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -124,7 +124,7 @@ export default {
// Flags whether to include the current fragment in the URL,
// so that reloading brings you to the same fragment position
fragmentInURL: false,
fragmentInURL: true,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen

View File

@ -12,6 +12,20 @@ export default class Location {
// Delays updates to the URL due to a Chrome thumbnailer bug
this.writeURLTimeout = 0;
this.onWindowHashChange = this.onWindowHashChange.bind( this );
}
bind() {
window.addEventListener( 'hashchange', this.onWindowHashChange, false );
}
unbind() {
window.removeEventListener( 'hashchange', this.onWindowHashChange, false );
}
/**
@ -27,13 +41,22 @@ export default class Location {
// Attempt to parse the hash as either an index or name
let bits = hash.slice( 2 ).split( '/' ),
name = hash.replace( /#|\//gi, '' );
name = hash.replace( /#\/?/gi, '' );
// If the first bit is not fully numeric and there is a name we
// can assume that this is a named link
if( !/^[0-9]*$/.test( bits[0] ) && name.length ) {
let element;
let f;
// Parse named links with fragments (#/named-link/2)
if( /\/[-\d]+$/g.test( name ) ) {
f = parseInt( name.split( '/' ).pop(), 10 );
f = isNaN(f) ? undefined : f;
name = name.split( '/' ).shift();
}
// Ensure the named link is a valid HTML ID attribute
try {
element = document.getElementById( decodeURIComponent( name ) );
@ -45,10 +68,10 @@ export default class Location {
if( element ) {
// If the slide exists and is not the current slide...
if ( !isSameNameAsCurrentSlide ) {
if ( !isSameNameAsCurrentSlide || typeof f !== 'undefined' ) {
// ...find the position of the named slide and navigate to it
let elementIndex = this.Reveal.getIndices(element);
this.Reveal.slide(elementIndex.h, elementIndex.v);
let slideIndices = this.Reveal.getIndices( element );
this.Reveal.slide( slideIndices.h, slideIndices.v, f );
}
}
// If the slide doesn't exist, navigate to the current slide
@ -141,19 +164,34 @@ export default class Location {
// If the current slide has an ID, use that as a named link,
// but we don't support named links with a fragment index
if( typeof id === 'string' && id.length && index.f === undefined ) {
if( typeof id === 'string' && id.length ) {
url = '/' + id;
// If there is also a fragment, append that at the end
// of the named link, like: #/named-link/2
if( index.f >= 0 ) url += '/' + index.f;
}
// Otherwise use the /h/v index
else {
let hashIndexBase = this.Reveal.getConfig().hashOneBasedIndex ? 1 : 0;
if( index.h > 0 || index.v > 0 || index.f !== undefined ) url += index.h + hashIndexBase;
if( index.v > 0 || index.f !== undefined ) url += '/' + (index.v + hashIndexBase );
if( index.f !== undefined ) url += '/' + index.f;
if( index.h > 0 || index.v > 0 || index.f >= 0 ) url += index.h + hashIndexBase;
if( index.v > 0 || index.f >= 0 ) url += '/' + (index.v + hashIndexBase );
if( index.f >= 0 ) url += '/' + index.f;
}
return url;
}
/**
* Handler for the window level 'hashchange' event.
*
* @param {object} [event]
*/
onWindowHashChange( event ) {
this.readURL();
}
}

View File

@ -490,13 +490,13 @@ export default function( revealElement, options ) {
eventsAreBound = true;
window.addEventListener( 'hashchange', onWindowHashChange, false );
window.addEventListener( 'resize', onWindowResize, false );
if( config.touch ) touch.bind();
if( config.keyboard ) keyboard.bind();
if( config.progress ) progress.bind();
controls.bind();
location.bind();
dom.slides.addEventListener( 'transitionend', onTransitionEnd, false );
dom.pauseOverlay.addEventListener( 'click', resume, false );
@ -518,8 +518,8 @@ export default function( revealElement, options ) {
keyboard.unbind();
controls.unbind();
progress.unbind();
location.unbind();
window.removeEventListener( 'hashchange', onWindowHashChange, false );
window.removeEventListener( 'resize', onWindowResize, false );
dom.slides.removeEventListener( 'transitionend', onTransitionEnd, false );
@ -2288,17 +2288,6 @@ export default function( revealElement, options ) {
}
/**
* Handler for the window level 'hashchange' event.
*
* @param {object} [event]
*/
function onWindowHashChange( event ) {
location.readURL();
}
/**
* Handler for the window level 'resize' event.
*

View File

@ -59,7 +59,7 @@
<iframe data-src="http://example.com"></iframe>
</section>
<section>
<section id="fragments3">
<h1>3.3</h1>
<ul>
<li class="fragment" data-fragment-index="1">3.3.1</li>
@ -79,6 +79,8 @@
<script src="../dist/reveal.es5.js"></script>
<script>
window.location.hash = '';
// These tests expect the DOM to contain a presentation
// with the following slide structure:
//
@ -311,6 +313,70 @@
});
// ---------------------------------------------------------------
// URL TESTS
QUnit.module( 'URL' );
QUnit.test( 'Write (fragmentInURL: false)', function( assert ) {
Reveal.configure({ hash: true, fragmentInURL: false });
Reveal.slide( 2, 0 );
assert.strictEqual( window.location.hash, '#/2' );
Reveal.slide( 2, 1 );
assert.strictEqual( window.location.hash, '#/2/1' );
Reveal.slide( 2, 0, 1 );
assert.strictEqual( window.location.hash, '#/2' );
Reveal.slide( 2, 2, 0 );
assert.strictEqual( window.location.hash, '#/fragments3' );
Reveal.slide( 2, 2, 1 );
assert.strictEqual( window.location.hash, '#/fragments3' );
});
QUnit.test( 'Write (fragmentInURL: true)', function( assert ) {
Reveal.configure({ hash: true, fragmentInURL: true });
Reveal.slide( 2, 0, -1 );
assert.strictEqual( window.location.hash, '#/2' );
Reveal.slide( 2, 1, -1 );
assert.strictEqual( window.location.hash, '#/2/1' );
Reveal.slide( 2, 0, 1 );
assert.strictEqual( window.location.hash, '#/2/0/1' );
Reveal.slide( 2, 2, -1 );
assert.strictEqual( window.location.hash, '#/fragments3' );
Reveal.slide( 2, 2, 1 );
assert.strictEqual( window.location.hash, '#/fragments3/1' );
});
QUnit.test( 'Read', async function( assert ) {
Reveal.configure({ hash: true, fragmentInURL: true });
let test = function( hash, indices ) {
return new Promise( resolve => {
window.onhashchange = () => {
assert.deepEqual( Reveal.getIndices(), indices );
resolve();
};
window.location.hash = hash;
} );
}
await test( '#/0', { h: 0, v: 0, f: undefined } ); // horizontal
await test( '#/1/1', { h: 1, v: 1, f: undefined } ); // vertical
await test( '#/0/', { h: 0, v: 0, f: undefined } ); // trailing /
await test( '#/1/1/', { h: 1, v: 1, f: undefined } ); // trailing /
await test( '#/2/0/1', { h: 2, v: 0, f: 1 } ); // fragment
});
// ---------------------------------------------------------------
// FRAGMENT TESTS