[WIP] Use DOM history API for navigating directories (#3115)

* Use DOM history API for navigating directories

* Fix test

* Fix building URLs and states for breadcrumbs

* Use base_url when constructing navigation URLs
This commit is contained in:
Grant Nestor 2017-12-13 13:20:21 -08:00 committed by GitHub
parent 8e4c0bfd16
commit 9ce534c020
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -354,6 +354,41 @@ define([
NotebookList.prototype.load_list = function () {
var that = this;
// Add an event handler browser back and forward events
window.onpopstate = function(e) {
var path = window.history.state ? window.history.state.path : '';
that.update_location(path);
};
var breadcrumb = $('.breadcrumb');
breadcrumb.empty();
var list_item = $('<li/>');
var root = $('<li/>').append('<a href="/tree"><i class="fa fa-folder"></i></a>').click(function(e) {
var path = '';
window.history.pushState({
path: path
}, 'Home', utils.url_path_join(that.base_url, 'tree'));
that.update_location(path);
return false;
});
breadcrumb.append(root);
var path_parts = [];
this.notebook_path.split('/').forEach(function(path_part) {
path_parts.push(path_part)
var path = path_parts.join('/')
var url = utils.url_path_join(
that.base_url,
'/tree',
utils.encode_uri_components(path)
);
var crumb = $('<li/>').append('<a href="' + url + '">' + path_part + '</a>').click(function(e) {
window.history.pushState({
path: path
}, path, url);
that.update_location(path);
return false;
});
breadcrumb.append(crumb);
});
this.contents.list_contents(that.notebook_path).then(
$.proxy(this.draw_notebook_list, this),
function(error) {
@ -361,6 +396,12 @@ define([
}
);
};
NotebookList.prototype.update_location = function (path) {
this.notebook_path = path;
// Update the file tree list without reloading the page
this.load_list();
};
/**
* Draw the list of notebooks
@ -723,6 +764,7 @@ define([
};
NotebookList.prototype.add_link = function (model, item) {
var that = this;
var running = (model.type === 'notebook' && this.sessions[model.path] !== undefined);
item.data('name',model.name);
item.data('path', model.path);
@ -762,7 +804,21 @@ define([
// directory nav doesn't open new tabs
// files, notebooks do
if (model.type !== "directory") {
link.attr('target',IPython._target);
link.attr('target', IPython._target);
} else {
// Replace with a click handler that will use the History API to
// push a new route without reloading the page
link.click(function (e) {
window.history.pushState({
path: model.path
}, model.path, utils.url_path_join(
that.base_url,
'tree',
utils.encode_uri_components(model.path)
));
that.update_location(model.path);
return false;
});
}
// Add in the date that the file was last modified