add File/Rename

IPython/html/static/edit/js/main.js

@@ -1,80 +1,81 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 require([
     'base/js/namespace',
     'base/js/utils',
     'base/js/page',
     'base/js/events',
     'contents',
     'services/config',
     'edit/js/editor',
     'edit/js/menubar',
     'edit/js/savewidget',
     'edit/js/notificationarea',
     'custom/custom',
 ], function(
     IPython,
     utils,
     page,
     events,
     contents,
     configmod,
     editmod,
     menubar,
     savewidget,
     notificationarea
     ){
     page = new page.Page();
 
     var base_url = utils.get_body_data('baseUrl');
     var file_path = utils.get_body_data('filePath');
     contents = new contents.Contents({base_url: base_url});
     var config = new configmod.ConfigSection('edit', {base_url: base_url});
     config.load();
     
     var editor = new editmod.Editor('#texteditor-container', {
         base_url: base_url,
         events: events,
         contents: contents,
         file_path: file_path,
         config: config,
     });
     
     // Make it available for debugging
     IPython.editor = editor;
     
-    var menus = new menubar.MenuBar('#menubar', {
-        base_url: base_url,
+    var save_widget = new savewidget.SaveWidget('span#save_widget', {
         editor: editor,
         events: events,
     });
     
-    var save_widget = new savewidget.SaveWidget('span#save_widget', {
+    var menus = new menubar.MenuBar('#menubar', {
+        base_url: base_url,
         editor: editor,
         events: events,
+        save_widget: save_widget,
     });
     
     var notification_area = new notificationarea.EditorNotificationArea(
         '#notification_area', {
         events: events,
     });
     notification_area.init_notification_widgets();
 
     config.loaded.then(function() {
         if (config.data.load_extensions) {
             var nbextension_paths = Object.getOwnPropertyNames(
                                         config.data.load_extensions);
             IPython.load_extensions.apply(this, nbextension_paths);
         }
     });
     editor.load();
     page.show();
 
     window.onbeforeunload = function () {
         if (!editor.codemirror.isClean(editor.generation)) {
             return "Unsaved changes will be lost. Close anyway?";
         }
     };
 
 });

IPython/html/static/edit/js/menubar.js

@@ -1,121 +1,126 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',
     'bootstrap',
 ], function(IPython, $, utils, dialog, bootstrap) {
     "use strict";
     
     var MenuBar = function (selector, options) {
         /**
          * Constructor
          *
          * A MenuBar Class to generate the menubar of IPython notebook
          *
          * Parameters:
          *  selector: string
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          codemirror: CodeMirror instance
          *          contents: ContentManager instance
          *          events: $(Events) instance
          *          base_url : string
          *          file_path : string
          */
         options = options || {};
         this.base_url = options.base_url || utils.get_body_data("baseUrl");
         this.selector = selector;
         this.editor = options.editor;
         this.events = options.events;
+        this.save_widget = options.save_widget;
 
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.bind_events();
         }
+        Object.seal(this);
     };
 
     MenuBar.prototype.bind_events = function () {
         var that = this;
         var editor = that.editor;
         
         //  File
         this.element.find('#new-file').click(function () {
             var w = window.open();
             // Create a new file in the current directory
             var parent = utils.url_path_split(editor.file_path)[0];
             editor.contents.new_untitled(parent, {type: "file"}).then(
                 function (data) {
                     w.location = utils.url_join_encode(
                         that.base_url, 'edit', data.path
                     );
                 },
                 function(error) {
                     w.close();
                     dialog.modal({
                         title : 'Creating New File Failed',
                         body : "The error was: " + error.message,
                         buttons : {'OK' : {'class' : 'btn-primary'}}
                     });
                 }
             );
         });
         this.element.find('#save-file').click(function () {
             editor.save();
         });
+        this.element.find('#rename-file').click(function () {
+            that.save_widget.rename();
+        });
         
         // Edit
         this.element.find('#menu-find').click(function () {
             editor.codemirror.execCommand("find");
         });
         this.element.find('#menu-replace').click(function () {
             editor.codemirror.execCommand("replace");
         });
         this.element.find('#menu-keymap-default').click(function () {
             editor.update_codemirror_options({
                 vimMode: false,
                 keyMap: 'default'
             });
         });
         this.element.find('#menu-keymap-sublime').click(function () {
             editor.update_codemirror_options({
                 vimMode: false,
                 keyMap: 'sublime'
             });
         });
         this.element.find('#menu-keymap-emacs').click(function () {
             editor.update_codemirror_options({
                 vimMode: false,
                 keyMap: 'emacs'
             });
         });
         this.element.find('#menu-keymap-vim').click(function () {
             editor.update_codemirror_options({
                 vimMode: true,
                 keyMap: 'vim'
             });
         });
         
         // View
         this.element.find('#menu-line-numbers').click(function () {
             var current = editor.codemirror.getOption('lineNumbers');
             var value = Boolean(1-current);
             editor.update_codemirror_options({lineNumbers: value});
         });
         
         this.events.on("config_changed.Editor", function () {
             var lineNumbers = editor.codemirror.getOption('lineNumbers');
             var text = lineNumbers ? "Hide" : "Show";
             text = text + " Line Numbers";
             that.element.find('#menu-line-numbers').find("a").text(text);
             var keyMap = editor.codemirror.getOption('keyMap') || "default";
             that.element.find(".selected-keymap").removeClass("selected-keymap");
             that.element.find("#menu-keymap-" + keyMap).addClass("selected-keymap");
         });
     };
 
     return {'MenuBar': MenuBar};
 });

IPython/html/static/edit/js/savewidget.js

@@ -1,202 +1,202 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/keyboard',
     'moment',
 ], function(IPython, $, utils, dialog, keyboard, moment) {
     "use strict";
 
     var SaveWidget = function (selector, options) {
         this.editor = undefined;
         this.selector = selector;
         this.events = options.events;
         this.editor = options.editor;
         this._last_modified = undefined;
         this.keyboard_manager = options.keyboard_manager;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.bind_events();
         }
     };
 
 
     SaveWidget.prototype.bind_events = function () {
         var that = this;
         this.element.find('span.filename').click(function () {
-            that.rename({editor: that.editor});
+            that.rename();
         });
         this.events.on('file_loaded.Editor', function (evt, model) {
             that.update_filename(model.name);
             that.update_document_title(model.name);
             that.update_last_modified(model.last_modified);
         });
         this.events.on('file_saved.Editor', function (evt, model) {
             that.update_filename(model.name);
             that.update_document_title(model.name);
             that.update_last_modified(model.last_modified);
         });
         this.events.on('file_renamed.Editor', function (evt, model) {
             that.update_filename(model.name);
             that.update_document_title(model.name);
             that.update_address_bar(model.path);
         });
         this.events.on('file_save_failed.Editor', function () {
             that.set_save_status('Save Failed!');
         });
     };
 
 
     SaveWidget.prototype.rename = function (options) {
         options = options || {};
         var that = this;
         var dialog_body = $('<div/>').append(
             $("<p/>").addClass("rename-message")
                 .text('Enter a new filename:')
         ).append(
             $("<br/>")
         ).append(
             $('<input/>').attr('type','text').attr('size','25').addClass('form-control')
-            .val(options.editor.get_filename())
+            .val(that.editor.get_filename())
         );
         var d = dialog.modal({
             title: "Rename File",
             body: dialog_body,
             buttons : {
                 "OK": {
                     class: "btn-primary",
                     click: function () {
                         var new_name = d.find('input').val();
                         d.find('.rename-message').text("Renaming...");
                         d.find('input[type="text"]').prop('disabled', true);
                         that.editor.rename(new_name).then(
                             function () {
                                 d.modal('hide');
                             }, function (error) {
                                 d.find('.rename-message').text(error.message || 'Unknown error');
                                 d.find('input[type="text"]').prop('disabled', false).focus().select();
                             }
                         );
                         return false;
                     }
                 },
                 "Cancel": {}
                 },
             open : function () {
                 // Upon ENTER, click the OK button.
                 d.find('input[type="text"]').keydown(function (event) {
                     if (event.which === keyboard.keycodes.enter) {
                         d.find('.btn-primary').first().click();
                         return false;
                     }
                 });
                 d.find('input[type="text"]').focus().select();
             }
         });
     };
 
 
     SaveWidget.prototype.update_filename = function (filename) {
         this.element.find('span.filename').text(filename);
     };
 
     SaveWidget.prototype.update_document_title = function (filename) {
         document.title = filename;
     };
 
     SaveWidget.prototype.update_address_bar = function (path) {
         var state = {path : path};
         window.history.replaceState(state, "", utils.url_join_encode(
             this.editor.base_url,
             "edit",
             path)
         );
     };
 
     SaveWidget.prototype.update_last_modified = function (last_modified) {
         if (last_modified) {
             this._last_modified = new Date(last_modified);
         } else {
             this._last_modified = null;
         }
         this._render_last_modified();
     };
     
     SaveWidget.prototype._render_last_modified = function () {
         /** actually set the text in the element, from our _last_modified value
         
         called directly, and periodically in timeouts.
         */
         this._schedule_render_last_modified();
         var el = this.element.find('span.last_modified');
         if (!this._last_modified) {
             el.text('').attr('title', 'never saved');
             return;
         }
         var chkd = moment(this._last_modified);
         var long_date = chkd.format('llll');
         var human_date;
         var tdelta = Math.ceil(new Date() - this._last_modified);
         if (tdelta < 24 * H){
             // less than 24 hours old, use relative date
             human_date = chkd.fromNow();
         } else {
             // otherwise show calendar 
             // otherwise update every hour and show
             // <Today | yesterday|...> at hh,mm,ss
             human_date = chkd.calendar();
         }
         el.text(human_date).attr('title', long_date);
     };
 
     
     var S = 1000;
     var M = 60*S;
     var H = 60*M;
     var thresholds = {
         s: 45 * S,
         m: 45 * M,
         h: 22 * H
     };
     var _timeout_from_dt = function (ms) {
         /** compute a timeout to update the last-modified timeout
         
         based on the delta in milliseconds
         */
         if (ms < thresholds.s) {
             return 5 * S;
         } else if (ms < thresholds.m) {
             return M;
         } else {
             return 5 * M;
         }
     };
     
     SaveWidget.prototype._schedule_render_last_modified = function () {
         /** schedule the next update to relative date
         
         periodically updated, so short values like 'a few seconds ago' don't get stale.
         */
         var that = this;
         if (!this._last_modified) {
             return;
         }
         if ((this._last_modified_timeout)) {
             clearTimeout(this._last_modified_timeout);
         }
         var dt = Math.ceil(new Date() - this._last_modified);
         if (dt < 24 * H) {
             this._last_modified_timeout = setTimeout(
                 $.proxy(this._render_last_modified, this),
                 _timeout_from_dt(dt)
             );
         }
     };
 
     return {'SaveWidget': SaveWidget};
 
 });

IPython/html/templates/edit.html

@@ -1,81 +1,82 b''
 {% extends "page.html" %}
 
 {% block title %}{{page_title}}{% endblock %}
 
 {% block stylesheet %}
 <link rel="stylesheet" href="{{ static_url('components/codemirror/lib/codemirror.css') }}">
 <link rel="stylesheet" href="{{ static_url('components/codemirror/addon/dialog/dialog.css') }}">
 {{super()}}
 {% endblock %}
 
 {% block params %}
 
 data-base-url="{{base_url}}"
 data-file-path="{{file_path}}"
 
 {% endblock %}
 
 {% block header %}
 
 <span id="save_widget" class="nav pull-left save_widget">
     <span class="filename"></span>
     <span class="last_modified"></span>
 </span>
 
 {% endblock %}
 
 {% block site %}
 
 <div id="menubar-container" class="container">
   <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <i class="fa fa-bars"></i>
           <span class="navbar-text">Menu</span>
         </button>
         <ul class="nav navbar-nav navbar-right">
           <li id="notification_area"></li>
         </ul>
         <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
               <ul id="file-menu" class="dropdown-menu">
                 <li id="new-file"><a href="#">New</a></li>
                 <li id="save-file"><a href="#">Save</a></li>
+                <li id="rename-file"><a href="#">Rename</a></li>
               </ul>
             </li>
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
               <ul id="edit-menu" class="dropdown-menu">
                 <li id="menu-find"><a href="#">Find</a></li>
                 <li id="menu-replace"><a href="#">Find &amp; Replace</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Key Map</li>
                 <li id="menu-keymap-default"><a href="#">Default<i class="fa"></i></a></li>
                 <li id="menu-keymap-sublime"><a href="#">Sublime Text<i class="fa"></i></a></li>
                 <li id="menu-keymap-vim"><a href="#">Vim<i class="fa"></i></a></li>
                 <li id="menu-keymap-emacs"><a href="#">emacs<i class="fa"></i></a></li>
               </ul>
             </li>
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
               <ul id="view-menu" class="dropdown-menu">
                 <li id="menu-line-numbers"><a href="#">Hide Line Numbers</a></li>
               </ul>
             </li>
           </ul>
         </div>
       </div>
     </div>
   </div>
 </div>
 
 <div id="texteditor-container" class="container"></div>
 
 {% endblock %}
 
 {% block script %}
 
     {{super()}}
 
 <script src="{{ static_url("edit/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}