book/es6tutorial
1
0
Fork 0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00
Code Issues Releases Wiki Activity

feat: add section link

Browse Source
This commit is contained in:
ruanyf 2015-12-03 19:35:14 +08:00
parent 99261d7e19
commit 237bb3ce45
2 changed files with 131 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/app.css
View File

@ -191,6 +191,11 @@ body {
border-top: 1px dotted #777; border-top: 1px dotted #777;
} }
#content h2:hover,
#content h3:hover {
color: #ED1C24;
}
#content img { #content img {
max-width: 90%; max-width: 90%;
display: block; display: block;

210
js/ditto.js
View File

@ -70,12 +70,22 @@ function init_sidebar_section() {
} }
function init_back_to_top_button() { function init_back_to_top_button() {
$(ditto.back_to_top_id).show(); $(ditto.back_to_top_id).show();
$(ditto.back_to_top_id).on("click", function() { $(ditto.back_to_top_id).on('click', goTop);
$("html body").animate({ }
scrollTop: 0
}, 200); function goTop(e) {
}); if(e) e.preventDefault();
$('html body').animate({
scrollTop: 0
}, 200);
history.pushState(null, null, '#' + location.hash.split('#')[1]);
}
function goSection(sectionId){
$('html, body').animate({
scrollTop: ($('#' + sectionId).offset().top)
}, 300);
} }
function init_edit_button() { function init_edit_button() {
@ -100,101 +110,127 @@ function init_edit_button() {
function replace_symbols(text) { function replace_symbols(text) {
// replace symbols with underscore // replace symbols with underscore
return text.replace(/[&\/\\#,+=()$~%.'":*?<>{}\ \]\[]/g, "_"); return text
.replace(/, /g, ',')
.replace(/[&\/\\#,.+=$~%'":*?<>{}\ \]\[]/g, "-")
.replace(/[()]/g, '');
} }
function li_create_linkage(li_tag, header_level) { function li_create_linkage(li_tag, header_level) {
// add custom id and class attributes // add custom id and class attributes
html_safe_tag = replace_symbols(li_tag.text()); html_safe_tag = replace_symbols(li_tag.text());
li_tag.attr("id", html_safe_tag); li_tag.attr('data-src', html_safe_tag);
li_tag.attr("class", "link"); li_tag.attr("class", "link");
// add click listener - on click scroll to relevant header section // add click listener - on click scroll to relevant header section
$(ditto.content_id + " li#" + li_tag.attr("id")).click(function() { li_tag.click(function(e) {
// scroll to relevant section e.preventDefault();
var header = $( // scroll to relevant section
ditto.content_id + " h" + header_level + "." + li_tag.attr("id") var header = $(
); ditto.content_id + " h" + header_level + "." + li_tag.attr('data-src')
$('html, body').animate({ );
scrollTop: header.offset().top $('html, body').animate({
}, 200); scrollTop: header.offset().top
}, 200);
// highlight the relevant section // highlight the relevant section
original_color = header.css("color"); original_color = header.css("color");
header.animate({ color: "#ED1C24", }, 500, function() { header.animate({ color: "#ED1C24", }, 500, function() {
// revert back to orig color // revert back to orig color
$(this).animate({color: original_color}, 2500); $(this).animate({color: original_color}, 2500);
});
}); });
history.pushState(null, null, '#' + location.hash.split('#')[1] + '#' + li_tag.attr('data-src'));
});
} }
function create_page_anchors() { function create_page_anchors() {
// create page anchors by matching li's to headers // create page anchors by matching li's to headers
// if there is a match, create click listeners // if there is a match, create click listeners
// and scroll to relevant sections // and scroll to relevant sections
// go through header level 1 to 3 // go through header level 1 to 3
for (var i = 1; i <= 4; i++) { for (var i = 2; i <= 4; i++) {
// parse all headers // parse all headers
var headers = []; var headers = [];
$('#content h' + i).map(function() { $('#content h' + i).map(function() {
headers.push($(this).text()); var content = $(this).text();
$(this).addClass(replace_symbols($(this).text())); headers.push(content);
this.id = 'h' + i + '-' + replace_symbols($(this).text()); $(this).addClass(replace_symbols(content));
}); this.id = replace_symbols(content);
$(this).hover(function () {
$(this).html(content +
' <a href="#' + location.hash.split('#')[1] +
'#' +
replace_symbols(content) +
'" class="section-link">§</a> <a href="#' +
location.hash.split('#')[1] + '" onclick="goTop()">⇧</a>');
}, function () {
$(this).html(content);
});
$(this).on('click', 'a.section-link', function(event) {
event.preventDefault();
history.pushState(null, null, '#' + location.hash.split('#')[1] + '#' + replace_symbols(content));
goSection(replace_symbols(content));
});
});
if ((i === 2) && headers.length !== 0) { if ((i === 2) && headers.length !== 0) {
var ul_tag = $('<ol></ol>') var ul_tag = $('<ol></ol>')
.insertAfter('#content h1') .insertAfter('#content h1')
.addClass("content-toc") .addClass('content-toc')
.attr('id', 'content-toc'); .attr('id', 'content-toc');
for (var j = 0; j < headers.length; j++) { for (var j = 0; j < headers.length; j++) {
var li_tag = $('<li></li>').text(headers[j]); var li_tag = $('<li></li>').html('<a href="#' + location.hash.split('#')[1] + '#' + headers[j] + '">' + headers[j] + '</a>');
ul_tag.append(li_tag); ul_tag.append(li_tag);
li_create_linkage(li_tag, i); li_create_linkage(li_tag, i);
} }
}
} }
}
} }
function normalize_paths() { function normalize_paths() {
// images // images
$(ditto.content_id + " img").map(function() { $(ditto.content_id + " img").map(function() {
var src = $(this).attr("src").replace("./", ""); var src = $(this).attr("src").replace("./", "");
if ($(this).attr("src").slice(0, 5) !== "http") { if ($(this).attr("src").slice(0, 5) !== "http") {
var url = location.hash.replace("#", ""); var url = location.hash.replace("#", "");
// split and extract base dir // split and extract base dir
url = url.split("/"); url = url.split("/");
var base_dir = url.slice(0, url.length - 1).toString(); var base_dir = url.slice(0, url.length - 1).toString();
// normalize the path (i.e. make it absolute)
$(this).attr("src", base_dir + "/" + src);
}
});
// normalize the path (i.e. make it absolute)
$(this).attr("src", base_dir + "/" + src);
}
});
} }
function show_error() { function show_error() {
console.log("SHOW ERORR!"); console.log("SHOW ERORR!");
$(ditto.error_id).show(); $(ditto.error_id).show();
} }
function show_loading() { function show_loading() {
$(ditto.loading_id).show(); $(ditto.loading_id).show();
$(ditto.content_id).html(""); // clear content $(ditto.content_id).html(''); // clear content
// infinite loop until clearInterval() is called on loading // infinite loop until clearInterval() is called on loading
var loading = setInterval(function() { var loading = setInterval(function() {
$(ditto.loading_id).fadeIn(1000).fadeOut(1000); $(ditto.loading_id).fadeIn(1000).fadeOut(1000);
}, 2000); }, 2000);
return loading; return loading;
} }
function router() { function router() {
var path = location.hash.replace(/#([^#]*)(#.*)?/, './$1'); var path = location.hash.replace(/#([^#]*)(#.*)?/, './$1');
var hashArr = location.hash.split('#');
var sectionId;
if (hashArr.length > 2 && !(/^comment-/.test(hashArr[2]))) {
sectionId = hashArr[2];
}
if (ditto.save_progress && store.get('menu-progress') !== location.hash) { if (ditto.save_progress && store.get('menu-progress') !== location.hash) {
store.set('menu-progress', location.hash); store.set('menu-progress', location.hash);
store.set('page-progress', 0); store.set('page-progress', 0);
@ -205,7 +241,7 @@ function router() {
path = location.pathname.replace("index.html", ditto.index); path = location.pathname.replace("index.html", ditto.index);
normalize_paths(); normalize_paths();
} else if (path === "") { } else if (path === "") {
path = window.location + ditto.index; path = location.pathname + ditto.index;
normalize_paths(); normalize_paths();
} else { } else {
path = path + ".md"; path = path + ".md";
@ -253,18 +289,24 @@ function router() {
var perc = ditto.save_progress ? store.get('page-progress') || 0 : 0; var perc = ditto.save_progress ? store.get('page-progress') || 0 : 0;
if (location.hash !== '' || Boolean(perc)) { if (sectionId) {
if (!Boolean(perc)) { $('html, body').animate({
$('html, body').animate({ scrollTop: ($('#' + sectionId).offset().top)
scrollTop: ($('#content').offset().top + 10) }, 300);
}, 300); } else {
$('html, body').animate({ if (location.hash !== '' || Boolean(perc)) {
scrollTop: ($('#content').offset().top) if (!Boolean(perc)) {
}, 300); $('html, body').animate({
} else { scrollTop: ($('#content').offset().top + 10)
$('html, body').animate({ }, 300);
scrollTop: ($('body').height()-$(window).height())*perc $('html, body').animate({
}, 200); scrollTop: ($('#content').offset().top)
}, 300);
} else {
$('html, body').animate({
scrollTop: ($('body').height()-$(window).height())*perc
}, 200);
}
} }
} }