-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hash change docs #1168
Hash change docs #1168
Changes from 4 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -73,7 +73,7 @@ | |
<body> | ||
<div id="container"> | ||
<header> | ||
<a href="README.md"> | ||
<a href="#"> | ||
<img src="img/logo-black.svg" height="64px" width="64px" /> | ||
</a> | ||
<h1>Marked.js Documentation</h1> | ||
|
@@ -96,49 +96,62 @@ <h1>Marked.js Documentation</h1> | |
window.fetch = unfetch; | ||
} | ||
|
||
if (!Element.prototype.closest) { | ||
|
||
if (!Element.prototype.matches) { | ||
Element.prototype.matches = Element.prototype.msMatchesSelector || | ||
Element.prototype.webkitMatchesSelector; | ||
} | ||
|
||
Element.prototype.closest = function(s) { | ||
var el = this; | ||
if (!document.documentElement.contains(el)) return null; | ||
do { | ||
if (el.matches(s)) return el; | ||
el = el.parentElement || el.parentNode; | ||
} while (el !== null && el.nodeType === 1); | ||
return null; | ||
}; | ||
} | ||
|
||
var content = document.querySelector('#content'); | ||
var body = document.querySelector('html'); | ||
var currentPage = 'README.md'; | ||
var currentHash = ''; | ||
var renderedPage = ''; | ||
|
||
function hashChange() { | ||
var hash = location.hash.slice(1); | ||
if (!hash) { | ||
hash = 'README.md'; | ||
} | ||
|
||
var uri = hash.split('#'); | ||
|
||
body.addEventListener('click', function (e) { | ||
var a = e.target.closest('a'); | ||
if (a && a.href.indexOf(location.origin) === 0) { | ||
var uri = a.href.slice(location.origin.length + location.pathname.length).split('#'); | ||
|
||
if (uri[0].match('.md$')) { | ||
e.preventDefault(); | ||
fetchPage(uri[0]) | ||
.then(function () { | ||
if (uri.length > 1) { | ||
location.hash = uri[1]; | ||
} | ||
}); | ||
if (uri[0].match('.md$')) { | ||
currentPage = uri[0]; | ||
if (uri.length > 1) { | ||
currentHash = uri[1]; | ||
} else { | ||
currentHash = ''; | ||
} | ||
history.replaceState("", document.title, "/"); | ||
} else { | ||
currentHash = uri[0]; | ||
} | ||
}, false); | ||
|
||
fetchPage(currentPage) | ||
.then(function () { | ||
if(currentHash) { | ||
var hashElement = document.getElementById(currentHash); | ||
if (hashElement) { | ||
hashElement.scrollIntoView(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Change There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It worked correctly when you clicked "supported specifications" because that was the only time it hit the |
||
} | ||
} | ||
}); | ||
|
||
history.replaceState('', document.title, '#' + currentPage + (currentHash ? '#' + currentHash : '')); | ||
} | ||
|
||
window.addEventListener('hashchange', function (e) { | ||
e.preventDefault(); | ||
hashChange(); | ||
}); | ||
|
||
function fetchPage(page) { | ||
if (page === renderedPage) { | ||
return Promise.resolve(); | ||
} | ||
return fetch(page) | ||
.then(function (res) { return res.text(); }) | ||
.then(function (res) { | ||
if (!res.ok) { | ||
throw new Error('Error ' + res.status + ': ' + res.statusText); | ||
} | ||
return res.text(); | ||
}) | ||
.then(function (text) { | ||
renderedPage = page; | ||
content.innerHTML = marked(text); | ||
body.scrollTop = 0; | ||
}).catch(function (e) { | ||
|
@@ -147,7 +160,7 @@ <h1>Marked.js Documentation</h1> | |
}); | ||
} | ||
|
||
fetchPage('README.md'); | ||
hashChange(); | ||
</script> | ||
</body> | ||
</html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: I think the urls to md files should being with a slash
#/README.md#specifications
.This is a common pattern for js routers so that you know its linking to a different route and not a normal anchor on the page. Thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We determine whether it is a route or anchor by the existence of
/.md$/
but we could change it to/^\\/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also realized, we can use
#/README
and drop the.md
altogether which will read a little bit better.