Skip to content

Use DOM history API for navigating directories #3115

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Dec 13, 2017
Merged

Use DOM history API for navigating directories #3115

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e7a7d11
Use DOM history API for navigating directories
gnestor Dec 7, 2017
64819f0
Fix test
gnestor Dec 7, 2017
de98321
Fix building URLs and states for breadcrumbs
takluyver Dec 13, 2017
0061144
Use base_url when constructing navigation URLs
takluyver Dec 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 57 additions & 1 deletion notebook/static/tree/js/notebooklist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,13 +354,54 @@ 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) {
that.draw_notebook_list({content: []}, i18n.msg._("Server error: ") + error.message);
}
);
};

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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down