- HTML5 History API Feature

[alanalvarado]

First version of HTML5 History API Feature #3687 #2131 #950

TODO:

• Documentation
• A way to better handle .htaccess redirections (for now the main file of fullpage.js should be called index.html and must be in root for the example to work) -- Related to point 3 and 4 --

Some refactoring could be done:

1. Integrate ApiStateFromUrlString() with getAnchorsURL()

2. Integrate ApiScrollToPath() with scrollToAnchor()

3. ApiPushRecord() needs a way to detect if we are already in a section with a slide, and only change the slide part of the url, so we can drop the / in the url argument (used to avoid duplicate entries of the section when there are slides). In this way we can put index.html anywhere instead of only on the root of our server. (we can compare the parameter that was passed to the function with window.location.pathname)

4. setState() already creates the url for setUrlHash(), but dunno if it just should use an object as parameter (like the one from getAnchorsUrl() )to invoke the functions ApiPushRecord or setUrlHash and each of those functions build the URL as their needs

[alanalvarado]

The .htaccess from vue router works fine to redirect sections, but static resources need to be called with a prefix / (root-relative) in order to work fine for sub-sections

 RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

Anyway this .htaccess performs better because it does not search for all files, but the user needs to customize which directories he has in his project. (contributed by @mrwhite from SO)

# Allow mod_dir to serve index.html when requesting the directory
DirectoryIndex index.html

RewriteEngine On

# Front-controller (exclude static resources)
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_URI} !^/(assets|css|img|js|modules|partials|vendor)/
RewriteRule . index.html [L]

[alvarotrigo]

I still don't have time to look into this issue but I'll definitely do for a future release!
Thanks a lot for your time @alanalvarado !! 👍

[alanalvarado]

@alvarotrigo Hello hope you are doing fine. With the second .htaccess everything works as expected, except anchors (anchors created by fp-nav work as expected)
But other anchors, if you click on one, it takes you to the first section, and if the anchor has a fixed position, you can click it again, only then it takes you to the right section.

Can you point me to which function controls anchor navigation? I can fix it. Thanks in advance.

[alvarotrigo]

But other anchors, if you click on one, it takes you to the first section, and if the anchor has a fixed position, you can click it again, only then it takes you to the right section.

I'm not quite sure what you mean by anchors.
What we call fullPage.js anchors are basically URL anchors (#demo) attached to the end of the URL path and are linked to a section or slide in the site.
Those are dealt with on the setUrlHash and the hashChangeHandler function.

[alanalvarado]

I mean if the developer creates an anchor inside any section or even outside the fullpage: Given the next structure (#historyMenu is a fixed element):

<nav id="historyMenu">
	<a href="#mysection0">mysection0</a>
	<a href="#mysection1">mysection1</a>
	<a href="#mysection1/myslide1">mysection1/myslide1</a>
	<a href="#mysection1/myslide2">mysection1/myslide2</a>
	<a href="#mysection2">mysection2</a>
	<a href="#mysection3">mysection3</a>
</nav>

<div id="fullpage">
	<div class="section active" id="section0" data-anchor="mysection0"><h1>fullPage.js</h1></div>
	<div class="section" id="section1" data-anchor="mysection1">
		<div class="slide " data-anchor="myslide0"><h1>Simple Demo</h1></div>
		<div class="slide active" data-anchor="myslide1"><h1>Only text</h1></div>
		<div class="slide" data-anchor="myslide2"><h1>And text</h1></div>
		<div class="slide" data-anchor="myslide3"><h1>And more text</h1></div>
	</div>
	<div class="section" id="section2" data-anchor="mysection2"><h1>No wraps, no extra markup</h1></div>
	<div class="section" id="section3" data-anchor="mysection3"><h1>Just the simplest demo ever</h1></div>
</div>

the anchors from #historyMenu don't work exactly as they should, they toggle between the destination clicked and the first section: for example if you are currently in #section2 (mysection2) and then click the menu to go to #section3 (mysection3) you are taken to #section1 (mysection1) then if you click the same button again, now you go to #section3 (mysection3)

This is even more problematic if the navigation isn't fixed because you are always taken to the first section.

[alvarotrigo]

It works in current version of fullpage. If not then provide a reproduction online to better understand what you mean.

[alanalvarado]

@alvarotrigo check dev.urbanbeast.co

Click mysection1, it will take you to the right place, then click mysection1/myslide1 wrongly it will take you to the first section, click again mysection1/myslide1 now it will take you to the right place.

The code is vanilla, using examples/examples.css and src/fullpage.css src/fullpage.js (with history modification)

I sent you ftp credentials through your website form.

[alvarotrigo]

Thanks. I'll investigate that whenever I check the pull request and the resulting code.

[alanalvarado]

I can solve it too, but I still haven't had time to fully check the fullpage.js code.
I still don't know what makes fullpage.js to move to the right section / slide when a link is clicked

For now I solved it by preventing the default action of clicks, and then using fullpage_api to move to the right section.

function gotoSection(e) {
	if (e.target.tagName === 'A') {
	e.preventDefault();

	let urlParts = e.target.hash.replace('#', '');
	urlParts = urlParts.replace(/^\//, '').split('/');
	let section = urlParts[0];
	let slide = 0;
	
	if (urlParts.length > 1) {
	   slide = urlParts[1];
	}
	
	fullpage_api.moveTo(section, slide);
}
}

let menu = document.querySelector('#historyMenu');
menu.addEventListener('click', gotoSection, false);

[1000heads-luke]

Just did some testing.
This change presumes that you are running fullPage.js in your website root.

If you have it on a page at server.com/full/ then it will rewrite the various sections/slides as server.com/section1 rather than server.com/full/section1.