view readme in directory

Author: toonijn

notebook/static/tree/js/directoryreadme.js

@@ -0,0 +1,94 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+define([
+    'jquery',
+    'base/js/utils',
+    'base/js/events',
+    'components/marked/lib/marked'
+], function ($, utils, events, marked) {
+    "use strict";
+    
+    var DirectoryReadme = function (selector, notebook_list, options) {
+        this.selector = selector;
+        this.element = $(selector);
+        this.notebook_list = notebook_list;
+        this.base_url = options.base_url || utils.get_body_data("baseUrl");
+        this.contents = options.contents;
+
+        this.init_readme();
+        this.bind_events();
+    };
+
+    DirectoryReadme.prototype.fetch_readme = function() {
+        var that = this;
+        this.contents.get(utils.url_path_join(this.notebook_list.notebook_path, 'readme.md'), {type: 'file'}).then(
+            function(file) {
+                that.draw_readme(file);
+            },
+            function() {
+                that.clear_readme();
+            }
+        );
+    }
+
+    DirectoryReadme.prototype.bind_events = function () {
+        events.on("draw_notebook_list.NotebookList", $.proxy(this.fetch_readme, this));
+    }
+    
+    DirectoryReadme.prototype.init_readme = function() {
+        var element = this.element;
+        element.hide().addClass("list_container");
+
+        this.title = $("<a />");
+        $("<div/>")
+        .addClass("list_header row")
+        .html([
+            $('<i/>')
+            .addClass('item_icon file_icon'),
+            this.title
+        ]).appendTo(element);
+
+
+        var frame = $("<iframe/>")
+        .attr("src", "about:blank")
+        .attr("sandbox", "allow-same-origin")
+        .appendTo(element);
+
+        frame.on("load", function() {
+            var contents = frame.contents();
+            contents.find("head")
+            .append($("<link/>")
+                .attr("rel", "stylesheet")
+                .attr("type","text/css")
+                .attr("href", utils.url_path_join(
+                    element.data("static-url"),
+                    "style",
+                    "style.min.css"
+                )));
+        });
+        this.frame = frame;
+    } 
+
+    DirectoryReadme.prototype.clear_readme = function () {
+        this.element.hide();
+    }
+    
+    DirectoryReadme.prototype.draw_readme = function (file) {
+        this.element.show();
+        this.title
+        .attr("href", 
+            utils.url_path_join(
+                this.base_url,
+                "edit",
+                utils.encode_uri_components(file.path)
+            ))
+        .text(file.name);
+        this.frame.height(0); // reset height
+        var contents = this.frame.contents();
+        contents.find("body").html(marked(file.content));
+        this.frame.height(contents.height());
+    };
+    
+    return {'DirectoryReadme': DirectoryReadme};
+});

notebook/static/tree/js/main.js

@@ -36,6 +36,7 @@ requirejs([
     'tree/js/terminallist',
     'tree/js/newnotebook',
     'tree/js/shutdownbutton',
+    'tree/js/directoryreadme',
     'auth/js/loginwidget',
     'bidi/bidi',
 ], function(
@@ -54,6 +55,7 @@ requirejs([
     terminallist,
     newnotebook,
     shutdownbutton,
+    directoryreadme,
     loginwidget,
     bidi){
     "use strict";
@@ -100,7 +102,11 @@ requirejs([
     var kernel_list = new kernellist.KernelList('#running_list',  $.extend({
         session_list:  session_list},
         common_options));
-    
+    var directory_readme = new directoryreadme.DirectoryReadme('#directory_readme', notebook_list, $.extend({
+        contents: contents,
+        base_url: common_options.base_url,},
+        common_options));
+
     var terminal_list;
     if (utils.get_body_data("terminalsAvailable") === "True") {
         terminal_list = new terminallist.TerminalList('#terminal_list', common_options);

notebook/static/tree/less/tree.less

@@ -15,6 +15,9 @@
 // The left padding of the selector button's contents.
 @dashboard-selectorbtn-lpad: 7px;
 
+// The horizontal padding of the readme iframe.
+@dashboard_readme_lr_pad: 21px;
+
 ul#tabs {
     margin-bottom: @dashboard_tb_pad;
 }
@@ -457,3 +460,18 @@ outline-width:1px;
  margin: 3px;
  font-size:10px;
 }
+
+#directory_readme {
+    &>div {
+        padding-top: @dashboard_tb_pad;
+        padding-bottom: @dashboard_tb_pad;
+        padding-left: @dashboard_lr_pad;
+        padding-right: @dashboard_lr_pad;
+    }
+
+    iframe {
+        padding: @dashboard_tb_pad @dashboard_readme_lr_pad;
+        border: 0;
+        width: 100%;
+    }
+}

notebook/templates/tree.html

@@ -152,6 +152,7 @@
               </div>
             </div>
           </div>
+          <div id="directory_readme" data-static-url="{{static_url("")}}"></div>
         </div>
         <div id="running" class="tab-pane">
           <div id="running_toolbar" class="row">