Add actions dropdown to tree view

IPython/html/static/tree/js/notebooklist.js

@@ -1,548 +1,640 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'base/js/dialog',
     'base/js/events',
     'base/js/keyboard',
 ], function(IPython, $, utils, dialog, events, keyboard) {
     "use strict";
     
     var NotebookList = function (selector, options) {
         /**
          * Constructor
          *
          * Parameters:
          *  selector: string
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          session_list: SessionList instance
          *          element_name: string
          *          base_url: string
          *          notebook_path: string
          *          contents: Contents instance
          */
         var that = this;
         this.session_list = options.session_list;
         // allow code re-use by just changing element_name in kernellist.js
         this.element_name = options.element_name || 'notebook';
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
         this.notebooks_list = [];
         this.sessions = {};
         this.base_url = options.base_url || utils.get_body_data("baseUrl");
         this.notebook_path = options.notebook_path || utils.get_body_data("notebookPath");
         this.contents = options.contents;
         if (this.session_list && this.session_list.events) {
             this.session_list.events.on('sessions_loaded.Dashboard', 
                 function(e, d) { that.sessions_loaded(d); });
         }
     };
 
     NotebookList.prototype.style = function () {
         var prefix = '#' + this.element_name;
         $(prefix + '_toolbar').addClass('list_toolbar');
         $(prefix + '_list_info').addClass('toolbar_info');
         $(prefix + '_buttons').addClass('toolbar_buttons');
         $(prefix + '_list_header').addClass('list_header');
         this.element.addClass("list_container");
     };
 
     NotebookList.prototype.bind_events = function () {
         var that = this;
         $('#refresh_' + this.element_name + '_list').click(function () {
             that.load_sessions();
         });
         this.element.bind('dragover', function () {
             return false;
         });
         this.element.bind('drop', function(event){
             that.handleFilesUpload(event,'drop');
             return false;
         });
 
         // Bind events for singleton controls.
         if (!NotebookList._bound_singletons) {
             NotebookList._bound_singletons = true;
             $('#new-file').click(function(e) {
                 var w = window.open();
                 that.contents.new_untitled(that.notebook_path || '', {type: 'file', ext: '.txt'}).then(function(data) {
                     var url = utils.url_join_encode(
                         that.base_url, 'edit', data.path
                     );
                     w.location = url;
                 });
                 that.load_sessions();
             });
             $('#new-folder').click(function(e) {
                 that.contents.new_untitled(that.notebook_path || '', {type: 'directory'})
                 .then(function(){
                     that.load_list();
                 });
             });
         }
     };
 
     NotebookList.prototype.handleFilesUpload =  function(event, dropOrForm) {
         var that = this;
         var files;
         if(dropOrForm =='drop'){
             files = event.originalEvent.dataTransfer.files;
         } else 
         {
             files = event.originalEvent.target.files;
         }
         for (var i = 0; i < files.length; i++) {
             var f = files[i];
             var name_and_ext = utils.splitext(f.name);
             var file_ext = name_and_ext[1];
 
             var reader = new FileReader();
             if (file_ext === '.ipynb') {
                 reader.readAsText(f);
             } else {
                 // read non-notebook files as binary
                 reader.readAsArrayBuffer(f);
             }
             var item = that.new_item(0);
             item.addClass('new-file');
             that.add_name_input(f.name, item, file_ext == '.ipynb' ? 'notebook' : 'file');
             // Store the list item in the reader so we can use it later
             // to know which item it belongs to.
             $(reader).data('item', item);
             reader.onload = function (event) {
                 var item = $(event.target).data('item');
                 that.add_file_data(event.target.result, item);
                 that.add_upload_button(item);
             };
             reader.onerror = function (event) {
                 var item = $(event.target).data('item');
                 var name = item.data('name');
                 item.remove();
                 dialog.modal({
                     title : 'Failed to read file',
                     body : "Failed to read file '" + name + "'",
                     buttons : {'OK' : { 'class' : 'btn-primary' }}
                 });
             };
         }
         // Replace the file input form wth a clone of itself. This is required to
         // reset the form. Otherwise, if you upload a file, delete it and try to 
         // upload it again, the changed event won't fire.
         var form = $('input.fileinput');
         form.replaceWith(form.clone(true));
         return false;
     };
 
     NotebookList.prototype.clear_list = function (remove_uploads) {
         /**
          * Clears the navigation tree.
          *
          * Parameters
          * remove_uploads: bool=False
          *      Should upload prompts also be removed from the tree.
          */
         if (remove_uploads) {
             this.element.children('.list_item').remove();
         } else {
             this.element.children('.list_item:not(.new-file)').remove();  
         }
     };
 
     NotebookList.prototype.load_sessions = function(){
         this.session_list.load_sessions();
     };
 
 
     NotebookList.prototype.sessions_loaded = function(data){
         this.sessions = data;
         this.load_list();
     };
 
     NotebookList.prototype.load_list = function () {
         var that = this;
         this.contents.list_contents(that.notebook_path).then(
             $.proxy(this.draw_notebook_list, this),
             function(error) {
                 that.draw_notebook_list({content: []}, "Server error: " + error.message);
             }
         );
     };
 
     /**
      * Draw the list of notebooks
      * @method draw_notebook_list
      * @param {Array} list An array of dictionaries representing files or
      *     directories.
      * @param {String} error_msg An error message
      */
 
 
     var type_order = {'directory':0,'notebook':1,'file':2};
 
     NotebookList.prototype.draw_notebook_list = function (list, error_msg) {
         list.content.sort(function(a, b) {
             if (type_order[a['type']] < type_order[b['type']]) {
                 return -1;
             }
             if (type_order[a['type']] > type_order[b['type']]) {
                 return 1;
             }
             if (a['name'] < b['name']) {
                 return -1;
             }
             if (a['name'] > b['name']) {
                 return 1;
             }
             return 0;
         });
         var message = error_msg || 'Notebook list empty.';
         var item = null;
         var model = null;
         var len = list.content.length;
         this.clear_list();
         var n_uploads = this.element.children('.list_item').length;
         if (len === 0) {
             item = this.new_item(0);
             var span12 = item.children().first();
             span12.empty();
             span12.append($('<div style="margin:auto;text-align:center;color:grey"/>').text(message));
         }
         var path = this.notebook_path;
         var offset = n_uploads;
         if (path !== '') {
             item = this.new_item(offset);
             model = {
                 type: 'directory',
                 name: '..',
                 path: utils.url_path_split(path)[0],
             };
             this.add_link(model, item);
             offset += 1;
         }
         for (var i=0; i<len; i++) {
             model = list.content[i];
             item = this.new_item(i+offset);
             this.add_link(model, item);
         }
         // Trigger an event when we've finished drawing the notebook list.
         events.trigger('draw_notebook_list.NotebookList');
     };
 
 
     NotebookList.prototype.new_item = function (index) {
         var item = $('<div/>').addClass("list_item").addClass("row");
         // item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
         // item.css('border-top-style','none');
         item.append($("<div/>").addClass("col-md-12").append(
             $('<i/>').addClass('item_icon')
         ).append(
             $("<a/>").addClass("item_link").append(
                 $("<span/>").addClass("item_name")
             )
         ).append(
             $('<div/>').addClass("item_buttons  pull-right")
         ));
         
         if (index === -1) {
             this.element.append(item);
         } else {
             this.element.children().eq(index).after(item);
         }
         return item;
     };
 
 
     NotebookList.icons = {
         directory: 'folder_icon',
         notebook: 'notebook_icon',
         file: 'file_icon',
     };
 
     NotebookList.uri_prefixes = {
         directory: 'tree',
         notebook: 'notebooks',
         file: 'edit',
     };
 
 
     NotebookList.prototype.add_link = function (model, item) {
         var path = model.path,
             name = model.name;
         item.data('name', name);
         item.data('path', path);
         item.find(".item_name").text(name);
         var icon = NotebookList.icons[model.type];
         var uri_prefix = NotebookList.uri_prefixes[model.type];
         item.find(".item_icon").addClass(icon).addClass('icon-fixed-width');
         var link = item.find("a.item_link")
             .attr('href',
                 utils.url_join_encode(
                     this.base_url,
                     uri_prefix,
                     path
                 )
             );
+
+        var can_duplicate = (model.type != 'directory');
+        var can_rename = (model.type == 'directory');
+        var can_delete = (model.type != 'notebook' || this.sessions[path] === undefined);
+        if (!can_delete) {
+            this.add_shutdown_button(item, this.sessions[path]);
+        }
+        this.add_actions_button(item, can_delete, can_duplicate, can_rename);
+
         // directory nav doesn't open new tabs
         // files, notebooks do
         if (model.type !== "directory") {
             link.attr('target','_blank');
         }
-        if (model.type !== 'directory') {
-            this.add_duplicate_button(item);
-        }
-        if (model.type == 'file') {
-            this.add_delete_button(item);
-        } else if (model.type == 'notebook') {
-            if (this.sessions[path] === undefined){
-                this.add_delete_button(item);
-            } else {
-                this.add_shutdown_button(item, this.sessions[path]);
-            }
-        }
     };
 
 
     NotebookList.prototype.add_name_input = function (name, item, icon_type) {
         item.data('name', name);
         item.find(".item_icon").addClass(NotebookList.icons[icon_type]).addClass('icon-fixed-width');
         item.find(".item_name").empty().append(
             $('<input/>')
             .addClass("filename_input")
             .attr('value', name)
             .attr('size', '30')
             .attr('type', 'text')
             .keyup(function(event){
                 if(event.keyCode == 13){item.find('.upload_button').click();}
                 else if(event.keyCode == 27){item.remove();}
             })
         );
     };
 
 
     NotebookList.prototype.add_file_data = function (data, item) {
         item.data('filedata', data);
     };
 
 
     NotebookList.prototype.add_shutdown_button = function (item, session) {
         var that = this;
         var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-xs btn-warning").
             click(function (e) {
                 var settings = {
                     processData : false,
                     cache : false,
                     type : "DELETE",
                     dataType : "json",
                     success : function () {
                         that.load_sessions();
                     },
                     error : utils.log_ajax_error,
                 };
                 var url = utils.url_join_encode(
                     that.base_url,
                     'api/sessions',
                     session
                 );
                 $.ajax(url, settings);
                 return false;
             });
         item.find(".item_buttons").append(shutdown_button);
     };
 
-    NotebookList.prototype.add_duplicate_button = function (item) {
+    NotebookList.prototype.add_actions_button = function (item, can_delete, can_duplicate, can_rename) {
+        var group = $("<div/>")
+            .addClass('btn-group')
+            .css('float', 'none')
+            .appendTo(item.find(".item_buttons"));
+
+        var actions_button = $("<button/>")
+            .html("Actions <span class='caret'></span>")
+            .addClass("btn btn-default btn-xs dropdown-toggle")
+            .attr('data-toggle', 'dropdown')
+            .attr('aria-expanded', 'false')
+            .appendTo(group);
+
+        var actions_list = $('<ul/>')
+            .addClass('dropdown-menu')
+            .attr('role', 'menu')
+            .appendTo(group);
+
+        var create_action = function(label, callback) {
+            var item = $('<li/>')
+                .click(callback)
+                .appendTo(actions_list);
+
+            var link = $('<a/>')
+                .attr('href', '#')
+                .html(label)
+                .appendTo(item);
+        };
+
+        if (can_delete) create_action('Delete', this.make_delete_callback(item));
+        if (can_duplicate) create_action('Duplicate', this.make_duplicate_callback(item));
+        if (can_rename) create_action('Rename', this.make_rename_callback(item));
+    };
+
+    NotebookList.prototype.make_rename_callback = function (item) {
         var notebooklist = this;
-        var duplicate_button = $("<button/>").text("Duplicate").addClass("btn btn-default btn-xs").
-            click(function (e) {
-                // $(this) is the button that was clicked.
-                var that = $(this);
-                var name = item.data('name');
-                var path = item.data('path');
-                var message = 'Are you sure you want to duplicate ' + name + '?';
-                var copy_from = {copy_from : path};
-                IPython.dialog.modal({
-                    title : "Duplicate " + name,
-                    body : message,
-                    buttons : {
-                        Duplicate : {
-                            class: "btn-primary",
-                            click: function() {
-                                notebooklist.contents.copy(path, notebooklist.notebook_path).then(function () {
-                                    notebooklist.load_list();
+        return function (e) {
+            // $(this) is the button that was clicked.
+            var that = $(this);
+            // We use the filename from the parent list_item element's
+            // data because the outer scope's values change as we iterate through the loop.
+            var parent_item = that.parents('div.list_item');
+            var name = parent_item.data('name');
+            var path = parent_item.data('path');
+            var input = $('<input/>').attr('type','text').attr('size','25').addClass('form-control')
+                .val(path);
+            var dialog_body = $('<div/>').append(
+                $("<p/>").addClass("rename-message")
+                    .text('Enter a new directory name:')
+            ).append(
+                $("<br/>")
+            ).append(input);
+            var d = dialog.modal({
+                title : "Rename directory",
+                body : dialog_body,
+                buttons : {
+                    OK : {
+                        class: "btn-primary",
+                        click: function() {
+                            notebooklist.contents.rename(path, input.val()).then(function() {
+                                notebooklist.load_list();
+                            }).catch(function(e) { 
+                                dialog.modal({
+                                    title : "Error",
+                                    body : $('<div/>')
+                                        .text("An error occurred while renaming \"" + path + "\" to \"" + input.val() + "\".")
+                                        .append($('<div/>').addClass('alert alert-danger').text(String(e))),
+                                    buttons : {
+                                        OK : {}
+                                    }
                                 });
-                            }
-                        },
-                        Cancel : {}
-                    }
-                });
-                return false;
+                            });
+                        }
+                    },
+                    Cancel : {}
+                },
+                open : function () {
+                    // Upon ENTER, click the OK button.
+                    input.keydown(function (event) {
+                        if (event.which === keyboard.keycodes.enter) {
+                            d.find('.btn-primary').first().click();
+                            return false;
+                        }
+                    });
+                    input.focus().select();
+                }
             });
-        item.find(".item_buttons").append(duplicate_button);
+            return false;
+        };
     };
 
-    NotebookList.prototype.add_delete_button = function (item) {
+    NotebookList.prototype.make_delete_callback = function (item) {
         var notebooklist = this;
-        var delete_button = $("<button/>").text("Delete").addClass("btn btn-default btn-xs").
-            click(function (e) {
-                // $(this) is the button that was clicked.
-                var that = $(this);
-                // We use the filename from the parent list_item element's
-                // data because the outer scope's values change as we iterate through the loop.
-                var parent_item = that.parents('div.list_item');
-                var name = parent_item.data('name');
-                var path = parent_item.data('path');
-                var message = 'Are you sure you want to permanently delete the file: ' + name + '?';
-                dialog.modal({
-                    title : "Delete file",
-                    body : message,
-                    buttons : {
-                        Delete : {
-                            class: "btn-danger",
-                            click: function() {
-                                notebooklist.contents.delete(path).then(
-                                    function() {
-                                        notebooklist.notebook_deleted(path);
+        return function (e) {
+            // $(this) is the button that was clicked.
+            var that = $(this);
+            // We use the filename from the parent list_item element's
+            // data because the outer scope's values change as we iterate through the loop.
+            var parent_item = that.parents('div.list_item');
+            var name = parent_item.data('name');
+            var path = parent_item.data('path');
+            var message = 'Are you sure you want to permanently delete: ' + name + '?';
+            dialog.modal({
+                title : "Delete",
+                body : message,
+                buttons : {
+                    Delete : {
+                        class: "btn-danger",
+                        click: function() {
+                            notebooklist.contents.delete(path).then(function() {
+                                    notebooklist.notebook_deleted(path);
+                            }).catch(function(e) { 
+                                dialog.modal({
+                                    title : "Error",
+                                    body : $('<div/>')
+                                        .text("An error occurred while deleting \"" + path + "\".")
+                                        .append($('<div/>').addClass('alert alert-danger').text(String(e))),
+                                    buttons : {
+                                        OK : {}
                                     }
-                                );
-                            }
-                        },
-                        Cancel : {}
-                    }
-                });
-                return false;
+                                });
+                            });
+                        }
+                    },
+                    Cancel : {}
+                }
             });
-        item.find(".item_buttons").append(delete_button);
+            return false;
+        };
+    };
+
+    NotebookList.prototype.make_duplicate_callback = function (item) {
+        var notebooklist = this;
+        return function (e) {
+            // $(this) is the button that was clicked.
+            var that = $(this);
+            var name = item.data('name');
+            var path = item.data('path');
+            var message = 'Are you sure you want to duplicate ' + name + '?';
+            var copy_from = {copy_from : path};
+            IPython.dialog.modal({
+                title : "Duplicate " + name,
+                body : message,
+                buttons : {
+                    Duplicate : {
+                        class: "btn-primary",
+                        click: function() {
+                            notebooklist.contents.copy(path, notebooklist.notebook_path).then(function () {
+                                notebooklist.load_list();
+                            });
+                        }
+                    },
+                    Cancel : {}
+                }
+            });
+            return false;
+        }
     };
 
     NotebookList.prototype.notebook_deleted = function(path) {
         /**
          * Remove the deleted notebook.
          */
         $( ":data(path)" ).each(function() {
             var element = $(this);
             if (element.data("path") == path) {
                 element.remove();
                 events.trigger('notebook_deleted.NotebookList');
             }
         });
     };
 
 
     NotebookList.prototype.add_upload_button = function (item) {
         var that = this;
         var upload_button = $('<button/>').text("Upload")
             .addClass('btn btn-primary btn-xs upload_button')
             .click(function (e) {
                 var filename = item.find('.item_name > input').val();
                 var path = utils.url_path_join(that.notebook_path, filename);
                 var filedata = item.data('filedata');
                 var format = 'text';
                 if (filename.length === 0 || filename[0] === '.') {
                     dialog.modal({
                         title : 'Invalid file name',
                         body : "File names must be at least one character and not start with a dot",
                         buttons : {'OK' : { 'class' : 'btn-primary' }}
                     });
                     return false;
                 }
                 if (filedata instanceof ArrayBuffer) {
                     // base64-encode binary file data
                     var bytes = '';
                     var buf = new Uint8Array(filedata);
                     var nbytes = buf.byteLength;
                     for (var i=0; i<nbytes; i++) {
                         bytes += String.fromCharCode(buf[i]);
                     }
                     filedata = btoa(bytes);
                     format = 'base64';
                 }
                 var model = {};
 
                 var name_and_ext = utils.splitext(filename);
                 var file_ext = name_and_ext[1];
                 var content_type;
                 if (file_ext === '.ipynb') {
                     model.type = 'notebook';
                     model.format = 'json';
                     try {
                         model.content = JSON.parse(filedata);
                     } catch (e) {
                         dialog.modal({
                             title : 'Cannot upload invalid Notebook',
                             body : "The error was: " + e,
                             buttons : {'OK' : {
                                 'class' : 'btn-primary',
                                 click: function () {
                                     item.remove();
                                 }
                             }}
                         });
                         return false;
                     }
                     content_type = 'application/json';
                 } else {
                     model.type = 'file';
                     model.format = format;
                     model.content = filedata;
                     content_type = 'application/octet-stream';
                 }
                 filedata = item.data('filedata');
 
                 var on_success = function () {
                     item.removeClass('new-file');
                     that.add_link(model, item);
                     that.add_delete_button(item);
                     that.session_list.load_sessions();
                 };
                 
                 var exists = false;
                 $.each(that.element.find('.list_item:not(.new-file)'), function(k,v){
                     if ($(v).data('name') === filename) { exists = true; return false; }
                 });
                 
                 if (exists) {
                     dialog.modal({
                         title : "Replace file",
                         body : 'There is already a file named ' + filename + ', do you want to replace it?',
                         buttons : {
                             Overwrite : {
                                 class: "btn-danger",
                                 click: function () {
                                     that.contents.save(path, model).then(on_success);
                                 }
                             },
                             Cancel : {
                                 click: function() { item.remove(); }
                             }
                         }
                     });
                 } else {
                     that.contents.save(path, model).then(on_success);
                 }
                 
                 return false;
             });
         var cancel_button = $('<button/>').text("Cancel")
             .addClass("btn btn-default btn-xs")
             .click(function (e) {
                 item.remove();
                 return false;
             });
         item.find(".item_buttons").empty()
             .append(upload_button)
             .append(cancel_button);
     };
 
 
     // Backwards compatability.
     IPython.NotebookList = NotebookList;
 
     return {'NotebookList': NotebookList};
 });