Merge pull request #1905 from gnestor/pr/1755

Adds edit and view buttons

notebook/notebookapp.py

@@ -266,6 +266,7 @@ class NotebookWebApplication(web.Application):
         handlers.extend([(r"/login", settings['login_handler_class'])])
         handlers.extend([(r"/logout", settings['logout_handler_class'])])
         handlers.extend(load_handlers('files.handlers'))
+        handlers.extend(load_handlers('view.handlers'))
         handlers.extend(load_handlers('notebook.handlers'))
         handlers.extend(load_handlers('nbconvert.handlers'))
         handlers.extend(load_handlers('bundler.handlers'))

notebook/static/tree/js/notebooklist.js

@@ -139,6 +139,8 @@ define([
             $('.download-button').click($.proxy(this.download_selected, this));
             $('.shutdown-button').click($.proxy(this.shutdown_selected, this));
             $('.duplicate-button').click($.proxy(this.duplicate_selected, this));
+            $('.view-button').click($.proxy(this.view_selected, this));
+            $('.edit-button').click($.proxy(this.edit_selected, this));
             $('.delete-button').click($.proxy(this.delete_selected, this));
 
             // Bind events for selection menu buttons.
@@ -558,9 +560,9 @@ define([
             $('.rename-button').css('display', 'none');
         }
 
-        // Move is visible iff at least one item is selected, and none of them
+        // Move is visible if at least one item is selected, and none of them
         // are a running notebook.
-        if (selected.length >= 1 && !has_running_notebook) {
+        if (selected.length > 0 && !has_running_notebook) {
             $('.move-button').css('display', 'inline-block');
         } else {
             $('.move-button').css('display', 'none');
@@ -597,6 +599,22 @@ define([
             $('.delete-button').css('display', 'none');
         }
 
+        // View is visible when an item is renderable or downloadable
+        if (selected.length > 0 && !has_directory && selected.every(function(el) {
+            return el.path.match(/html?|json|jpe?g|png|gif|tiff?|svg|bmp|ico|pdf|doc|xls/);
+        })) {
+            $('.view-button').css('display', 'inline-block');
+        } else {
+            $('.view-button').css('display', 'none');
+        }
+
+        // Edit is visible when an item is editable
+        if (selected.length > 0 && !has_directory) {
+            $('.edit-button').css('display', 'inline-block');
+        } else {
+            $('.edit-button').css('display', 'none');
+        }
+
         // If all of the items are selected, show the selector as checked.  If
         // some of the items are selected, show it as checked.  Otherwise,
         // uncheck it.
@@ -887,7 +905,7 @@ define([
 
         var item_path = that.selected[0].path;
 
-        window.open(utils.url_path_join(that.base_url, 'files', item_path) + '?download=1');
+        window.open(utils.url_path_join(that.base_url, 'files', utils.encode_uri_components(item_path)) + '?download=1', IPython._target);
     };
 
     NotebookList.prototype.delete_selected = function() {
@@ -937,6 +955,26 @@ define([
         });
     };
 
+    NotebookList.prototype.view_selected = function() {
+        var that = this;
+        that.selected.forEach(function(item) {
+            var item_path = utils.encode_uri_components(item.path);
+            // Handle HTML files differently
+            var item_type = item_path.endsWith('.html') ? 'view' : 'files';
+            window.open(utils.url_path_join(that.base_url, item_type, utils.encode_uri_components(item_path)), IPython._target);
+      	});
+    };
+
+    NotebookList.prototype.edit_selected = function() {
+        var that = this;
+        that.selected.forEach(function(item) {
+            var item_path = utils.encode_uri_components(item.path);
+            // Handle ipynb files differently
+            var item_type = item_path.endsWith('.ipynb') ? 'notebooks' : 'edit';
+            window.open(utils.url_path_join(that.base_url, item_type, utils.encode_uri_components(item_path)), IPython._target);
+      	});
+    };
+
     NotebookList.prototype.duplicate_selected = function() {
         var message;
         var selected = this.selected.slice(); // Don't let that.selected change out from under us

notebook/templates/tree.html

@@ -33,6 +33,8 @@ data-terminals-available="{{terminals_available}}"
                   <button title="Move selected" class="move-button btn btn-default btn-xs">Move</button>
                   <button title="Download selected" class="download-button btn btn-default btn-xs">Download</button>
                   <button title="Shutdown selected notebook(s)" class="shutdown-button btn btn-default btn-xs btn-warning">Shutdown</button>
+                  <button title="View selected" class="view-button btn btn-default btn-xs">View</button>
+                  <button title="Edit selected" class="edit-button btn btn-default btn-xs">Edit</button>
                   <button title="Delete selected" class="delete-button btn btn-default btn-xs btn-danger"><i class="fa fa-trash"></i></button>
               </div>
             </div>

notebook/templates/view.html

@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>{{page_title}}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+  <style type="text/css">
+    html, body, #container {
+      height: 100%;
+    }
+    body, #container {
+      overflow: hidden;
+      margin: 0;
+    }
+    #iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  </style>
+  <div id="container">
+    <iframe id="iframe" sandbox="allow-scripts" src="/files/{{file_path}}"></iframe>
+  </div>
+</body>
+
+</html>

notebook/tests/test_files.py

@@ -113,6 +113,16 @@ class FilesTest(NotebookTestBase):
         disposition = r.headers.get('Content-Disposition', '')
         self.assertIn('attachment', disposition)
         self.assertIn('filename="test.txt"', disposition)
+        
+    def test_view_html(self):
+        nbdir = self.notebook_dir.name
+        
+        html = '<div>Test test</div>'
+        with open(pjoin(nbdir, 'test.html'), 'w') as f:
+            f.write(html)
+        
+        r = self.request('GET', 'view/test.html')
+        self.assertEqual(r.status_code, 200)
 
     def test_old_files_redirect(self):
         """pre-2.0 'files/' prefixed links are properly redirected"""
@@ -145,4 +155,3 @@ class FilesTest(NotebookTestBase):
             r = self.request('GET', url)
             self.assertEqual(r.status_code, 200)
             self.assertEqual(r.text, prefix + '/f3')
-

notebook/view/handlers.py

@@ -0,0 +1,26 @@
+#encoding: utf-8
+"""Tornado handlers for viewing HTML files."""
+
+# Copyright (c) Jupyter Development Team.
+# Distributed under the terms of the Modified BSD License.
+
+from tornado import web
+from ..base.handlers import IPythonHandler, path_regex
+from ..utils import url_escape
+
+class ViewHandler(IPythonHandler):
+    """Render HTML files within an iframe."""
+    @web.authenticated
+    def get(self, path):
+        path = path.strip('/')
+        if not self.contents_manager.file_exists(path):
+            raise web.HTTPError(404, u'File does not exist: %s' % path)
+
+        basename = path.rsplit('/', 1)[-1]
+        self.write(
+            self.render_template('view.html', file_path=url_escape(path), page_title=basename)
+        )
+
+default_handlers = [
+    (r"/view%s" % path_regex, ViewHandler),
+]