From e7a7d110590d01dcaa71cff62c2b8d31837a33e3 Mon Sep 17 00:00:00 2001 From: Grant Nestor Date: Thu, 7 Dec 2017 11:55:36 -0800 Subject: [PATCH 1/4] Use DOM history API for navigating directories --- notebook/static/tree/js/notebooklist.js | 53 ++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/notebook/static/tree/js/notebooklist.js b/notebook/static/tree/js/notebooklist.js index 6c6af711df..7e6da06392 100644 --- a/notebook/static/tree/js/notebooklist.js +++ b/notebook/static/tree/js/notebooklist.js @@ -354,6 +354,36 @@ 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 url = '/tree'; + var list_item = $('
  • '); + var root = $('
  • ').append('').css('cursor', 'pointer').click(function(e) { + var path = ''; + window.history.pushState({ + path: path + }, 'Home', url); + that.update_location(path); + }); + breadcrumb.append(root); + this.notebook_path.split('/').forEach(function(path) { + var crumb = $('
  • ').append('' + path + '').click(function(e) { + url = utils.url_path_join( + url, + utils.encode_uri_components(path) + ); + window.history.pushState({ + path: path + }, path, url); + that.update_location(path); + }); + breadcrumb.append(crumb); + }); this.contents.list_contents(that.notebook_path).then( $.proxy(this.draw_notebook_list, this), function(error) { @@ -361,6 +391,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 +759,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 +799,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 { + // Remove normal link + link.removeAttr('href').css('cursor', 'pointer'); + // 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( + '/tree', + utils.encode_uri_components(model.path) + )); + that.update_location(model.path); + }); } // Add in the date that the file was last modified From 64819f02b30f245026e0d76b948f8537ac03f333 Mon Sep 17 00:00:00 2001 From: Grant Nestor Date: Thu, 7 Dec 2017 15:01:16 -0800 Subject: [PATCH 2/4] Fix test --- notebook/static/tree/js/notebooklist.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/notebook/static/tree/js/notebooklist.js b/notebook/static/tree/js/notebooklist.js index 7e6da06392..173860b5cd 100644 --- a/notebook/static/tree/js/notebooklist.js +++ b/notebook/static/tree/js/notebooklist.js @@ -363,24 +363,26 @@ define([ breadcrumb.empty(); var url = '/tree'; var list_item = $('
  • '); - var root = $('
  • ').append('').css('cursor', 'pointer').click(function(e) { + var root = $('
  • ').append('').click(function(e) { var path = ''; window.history.pushState({ path: path }, 'Home', url); that.update_location(path); + return false; }); breadcrumb.append(root); this.notebook_path.split('/').forEach(function(path) { - var crumb = $('
  • ').append('' + path + '').click(function(e) { - url = utils.url_path_join( - url, - utils.encode_uri_components(path) - ); + url = utils.url_path_join( + url, + utils.encode_uri_components(path) + ); + var crumb = $('
  • ').append('' + path + '').click(function(e) { window.history.pushState({ path: path }, path, url); that.update_location(path); + return false; }); breadcrumb.append(crumb); }); @@ -801,8 +803,6 @@ define([ if (model.type !== "directory") { link.attr('target', IPython._target); } else { - // Remove normal link - link.removeAttr('href').css('cursor', 'pointer'); // Replace with a click handler that will use the History API to // push a new route without reloading the page link.click(function (e) { @@ -813,6 +813,7 @@ define([ utils.encode_uri_components(model.path) )); that.update_location(model.path); + return false; }); } From de9832149b1f5174320161760d5bfdc0fd4bbb96 Mon Sep 17 00:00:00 2001 From: Thomas Kluyver Date: Wed, 13 Dec 2017 16:28:19 +0000 Subject: [PATCH 3/4] Fix building URLs and states for breadcrumbs --- notebook/static/tree/js/notebooklist.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/notebook/static/tree/js/notebooklist.js b/notebook/static/tree/js/notebooklist.js index 173860b5cd..17f381c5af 100644 --- a/notebook/static/tree/js/notebooklist.js +++ b/notebook/static/tree/js/notebooklist.js @@ -361,23 +361,25 @@ define([ }; var breadcrumb = $('.breadcrumb'); breadcrumb.empty(); - var url = '/tree'; var list_item = $('
  • '); var root = $('
  • ').append('').click(function(e) { var path = ''; window.history.pushState({ path: path - }, 'Home', url); + }, 'Home', '/tree'); that.update_location(path); return false; }); breadcrumb.append(root); - this.notebook_path.split('/').forEach(function(path) { - url = utils.url_path_join( - url, + 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( + '/tree', utils.encode_uri_components(path) ); - var crumb = $('
  • ').append('' + path + '').click(function(e) { + var crumb = $('
  • ').append('' + path_part + '').click(function(e) { window.history.pushState({ path: path }, path, url); From 0061144c5f464a8bf14b2f56f396a284aa8976ac Mon Sep 17 00:00:00 2001 From: Thomas Kluyver Date: Wed, 13 Dec 2017 16:32:42 +0000 Subject: [PATCH 4/4] Use base_url when constructing navigation URLs --- notebook/static/tree/js/notebooklist.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/notebook/static/tree/js/notebooklist.js b/notebook/static/tree/js/notebooklist.js index 17f381c5af..c83efefcb6 100644 --- a/notebook/static/tree/js/notebooklist.js +++ b/notebook/static/tree/js/notebooklist.js @@ -366,7 +366,7 @@ define([ var path = ''; window.history.pushState({ path: path - }, 'Home', '/tree'); + }, 'Home', utils.url_path_join(that.base_url, 'tree')); that.update_location(path); return false; }); @@ -376,6 +376,7 @@ define([ 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) ); @@ -811,7 +812,8 @@ define([ window.history.pushState({ path: model.path }, model.path, utils.url_path_join( - '/tree', + that.base_url, + 'tree', utils.encode_uri_components(model.path) )); that.update_location(model.path);