add save widget to text editor

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

@@ -0,0 +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});
+        });
+        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())
+        );
+        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/static/edit/js/editor.js

@@ -1,141 +1,160 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'jquery',
     'base/js/utils',
     'codemirror/lib/codemirror',
     'codemirror/mode/meta',
     'codemirror/addon/comment/comment',
     'codemirror/addon/dialog/dialog',
     'codemirror/addon/edit/closebrackets',
     'codemirror/addon/edit/matchbrackets',
     'codemirror/addon/search/searchcursor',
     'codemirror/addon/search/search',
     'codemirror/keymap/emacs',
     'codemirror/keymap/sublime',
     'codemirror/keymap/vim',
     ],
 function($,
     utils,
     CodeMirror
 ) {
     "use strict";
     
     var Editor = function(selector, options) {
         var that = this;
         this.selector = selector;
         this.contents = options.contents;
         this.events = options.events;
         this.base_url = options.base_url;
         this.file_path = options.file_path;
         this.config = options.config;
         this.codemirror = new CodeMirror($(this.selector)[0]);
         this.generation = -1;
         
         // It appears we have to set commands on the CodeMirror class, not the
         // instance. I'd like to be wrong, but since there should only be one CM
         // instance on the page, this is good enough for now.
         CodeMirror.commands.save = $.proxy(this.save, this);
         
         this.save_enabled = false;
         
         this.config.loaded.then(function () {
             // load codemirror config
             var cfg = that.config.data.Editor || {};
             var cmopts = $.extend(true, {}, // true = recursive copy
                 Editor.default_codemirror_options,
                 cfg.codemirror_options || {}
             );
             that._set_codemirror_options(cmopts);
             that.events.trigger('config_changed.Editor', {config: that.config});
         });
     };
     
     // default CodeMirror options
     Editor.default_codemirror_options = {
         extraKeys: {
             "Tab" :  "indentMore",
         },
         indentUnit: 4,
         theme: "ipython",
         lineNumbers: true,
     };
     
     Editor.prototype.load = function() {
         /** load the file */
         var that = this;
         var cm = this.codemirror;
         return this.contents.get(this.file_path, {type: 'file', format: 'text'})
             .then(function(model) {
                 cm.setValue(model.content);
 
                 // Setting the file's initial value creates a history entry,
                 // which we don't want.
                 cm.clearHistory();
 
                 // Find and load the highlighting mode
                 utils.requireCodeMirrorMode(model.mimetype, function(spec) {
                     var mode = CodeMirror.getMode({}, spec);
                     cm.setOption('mode', mode);
                 });
                 that.save_enabled = true;
                 that.generation = cm.changeGeneration();
+                that.events.trigger("file_loaded.Editor", model);
             },
             function(error) {
                 cm.setValue("Error! " + error.message +
                                 "\nSaving disabled.");
                 that.save_enabled = false;
             }
         );
     };
 
+    Editor.prototype.get_filename = function () {
+        return utils.url_path_split(this.file_path)[1];
+
+    }
+
+    Editor.prototype.rename = function (new_name) {
+        /** rename the file */
+        var that = this;
+        var parent = utils.url_path_split(this.file_path)[0];
+        var new_path = utils.url_path_join(parent, new_name);
+        return this.contents.rename(this.file_path, new_path).then(
+            function (json) {
+                that.file_path = json.path;
+                that.events.trigger('file_renamed.Editor', json);
+            }
+        );
+    };
+    
     Editor.prototype.save = function() {
         /** save the file */
         if (!this.save_enabled) {
             console.log("Not saving, save disabled");
             return;
         }
         var model = {
             path: this.file_path,
             type: 'file',
             format: 'text',
             content: this.codemirror.getValue(),
         };
         var that = this;
         // record change generation for isClean
         this.generation = this.codemirror.changeGeneration();
-        return this.contents.save(this.file_path, model).then(function() {
-            that.events.trigger("save_succeeded.TextEditor");
+        return this.contents.save(this.file_path, model).then(function(data) {
+            that.events.trigger("file_saved.Editor", data);
         });
     };
     
     Editor.prototype._set_codemirror_options = function (options) {
         // update codemirror options from a dict
         for (var opt in options) {
             if (!options.hasOwnProperty(opt)) {
                 continue;
             }
             var value = options[opt];
             if (value === null) {
                 value = CodeMirror.defaults[opt];
             }
             this.codemirror.setOption(opt, value);
         }
     };
     
     Editor.prototype.update_codemirror_options = function (options) {
         /** update codemirror options locally and save changes in config */
         var that = this;
         this._set_codemirror_options(options);
         return this.config.update({
             Editor: {
                 codemirror_options: options
             }
         }).then(
             that.events.trigger('config_changed.Editor', {config: that.config})
         );
     };
 
     return {Editor: Editor};
 });

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

@@ -1,73 +1,80 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,
         editor: editor,
         events: events,
     });
     
+    var save_widget = new savewidget.SaveWidget('span#save_widget', {
+        editor: editor,
+        events: events,
+    });
+    
     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/templates/edit.html

@@ -1,78 +1,81 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="filename">{{ basename }}</span>
+<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>
               </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 %}