Show More
@@ -0,0 +1,202 b'' | |||||
|
1 | // Copyright (c) IPython Development Team. | |||
|
2 | // Distributed under the terms of the Modified BSD License. | |||
|
3 | ||||
|
4 | define([ | |||
|
5 | 'base/js/namespace', | |||
|
6 | 'jquery', | |||
|
7 | 'base/js/utils', | |||
|
8 | 'base/js/dialog', | |||
|
9 | 'base/js/keyboard', | |||
|
10 | 'moment', | |||
|
11 | ], function(IPython, $, utils, dialog, keyboard, moment) { | |||
|
12 | "use strict"; | |||
|
13 | ||||
|
14 | var SaveWidget = function (selector, options) { | |||
|
15 | this.editor = undefined; | |||
|
16 | this.selector = selector; | |||
|
17 | this.events = options.events; | |||
|
18 | this.editor = options.editor; | |||
|
19 | this._last_modified = undefined; | |||
|
20 | this.keyboard_manager = options.keyboard_manager; | |||
|
21 | if (this.selector !== undefined) { | |||
|
22 | this.element = $(selector); | |||
|
23 | this.bind_events(); | |||
|
24 | } | |||
|
25 | }; | |||
|
26 | ||||
|
27 | ||||
|
28 | SaveWidget.prototype.bind_events = function () { | |||
|
29 | var that = this; | |||
|
30 | this.element.find('span.filename').click(function () { | |||
|
31 | that.rename({editor: that.editor}); | |||
|
32 | }); | |||
|
33 | this.events.on('file_loaded.Editor', function (evt, model) { | |||
|
34 | that.update_filename(model.name); | |||
|
35 | that.update_document_title(model.name); | |||
|
36 | that.update_last_modified(model.last_modified); | |||
|
37 | }); | |||
|
38 | this.events.on('file_saved.Editor', function (evt, model) { | |||
|
39 | that.update_filename(model.name); | |||
|
40 | that.update_document_title(model.name); | |||
|
41 | that.update_last_modified(model.last_modified); | |||
|
42 | }); | |||
|
43 | this.events.on('file_renamed.Editor', function (evt, model) { | |||
|
44 | that.update_filename(model.name); | |||
|
45 | that.update_document_title(model.name); | |||
|
46 | that.update_address_bar(model.path); | |||
|
47 | }); | |||
|
48 | this.events.on('file_save_failed.Editor', function () { | |||
|
49 | that.set_save_status('Save Failed!'); | |||
|
50 | }); | |||
|
51 | }; | |||
|
52 | ||||
|
53 | ||||
|
54 | SaveWidget.prototype.rename = function (options) { | |||
|
55 | options = options || {}; | |||
|
56 | var that = this; | |||
|
57 | var dialog_body = $('<div/>').append( | |||
|
58 | $("<p/>").addClass("rename-message") | |||
|
59 | .text('Enter a new filename:') | |||
|
60 | ).append( | |||
|
61 | $("<br/>") | |||
|
62 | ).append( | |||
|
63 | $('<input/>').attr('type','text').attr('size','25').addClass('form-control') | |||
|
64 | .val(options.editor.get_filename()) | |||
|
65 | ); | |||
|
66 | var d = dialog.modal({ | |||
|
67 | title: "Rename File", | |||
|
68 | body: dialog_body, | |||
|
69 | buttons : { | |||
|
70 | "OK": { | |||
|
71 | class: "btn-primary", | |||
|
72 | click: function () { | |||
|
73 | var new_name = d.find('input').val(); | |||
|
74 | d.find('.rename-message').text("Renaming..."); | |||
|
75 | d.find('input[type="text"]').prop('disabled', true); | |||
|
76 | that.editor.rename(new_name).then( | |||
|
77 | function () { | |||
|
78 | d.modal('hide'); | |||
|
79 | }, function (error) { | |||
|
80 | d.find('.rename-message').text(error.message || 'Unknown error'); | |||
|
81 | d.find('input[type="text"]').prop('disabled', false).focus().select(); | |||
|
82 | } | |||
|
83 | ); | |||
|
84 | return false; | |||
|
85 | } | |||
|
86 | }, | |||
|
87 | "Cancel": {} | |||
|
88 | }, | |||
|
89 | open : function () { | |||
|
90 | // Upon ENTER, click the OK button. | |||
|
91 | d.find('input[type="text"]').keydown(function (event) { | |||
|
92 | if (event.which === keyboard.keycodes.enter) { | |||
|
93 | d.find('.btn-primary').first().click(); | |||
|
94 | return false; | |||
|
95 | } | |||
|
96 | }); | |||
|
97 | d.find('input[type="text"]').focus().select(); | |||
|
98 | } | |||
|
99 | }); | |||
|
100 | }; | |||
|
101 | ||||
|
102 | ||||
|
103 | SaveWidget.prototype.update_filename = function (filename) { | |||
|
104 | this.element.find('span.filename').text(filename); | |||
|
105 | }; | |||
|
106 | ||||
|
107 | SaveWidget.prototype.update_document_title = function (filename) { | |||
|
108 | document.title = filename; | |||
|
109 | }; | |||
|
110 | ||||
|
111 | SaveWidget.prototype.update_address_bar = function (path) { | |||
|
112 | var state = {path : path}; | |||
|
113 | window.history.replaceState(state, "", utils.url_join_encode( | |||
|
114 | this.editor.base_url, | |||
|
115 | "edit", | |||
|
116 | path) | |||
|
117 | ); | |||
|
118 | }; | |||
|
119 | ||||
|
120 | SaveWidget.prototype.update_last_modified = function (last_modified) { | |||
|
121 | if (last_modified) { | |||
|
122 | this._last_modified = new Date(last_modified); | |||
|
123 | } else { | |||
|
124 | this._last_modified = null; | |||
|
125 | } | |||
|
126 | this._render_last_modified(); | |||
|
127 | }; | |||
|
128 | ||||
|
129 | SaveWidget.prototype._render_last_modified = function () { | |||
|
130 | /** actually set the text in the element, from our _last_modified value | |||
|
131 | ||||
|
132 | called directly, and periodically in timeouts. | |||
|
133 | */ | |||
|
134 | this._schedule_render_last_modified(); | |||
|
135 | var el = this.element.find('span.last_modified'); | |||
|
136 | if (!this._last_modified) { | |||
|
137 | el.text('').attr('title', 'never saved'); | |||
|
138 | return; | |||
|
139 | } | |||
|
140 | var chkd = moment(this._last_modified); | |||
|
141 | var long_date = chkd.format('llll'); | |||
|
142 | var human_date; | |||
|
143 | var tdelta = Math.ceil(new Date() - this._last_modified); | |||
|
144 | if (tdelta < 24 * H){ | |||
|
145 | // less than 24 hours old, use relative date | |||
|
146 | human_date = chkd.fromNow(); | |||
|
147 | } else { | |||
|
148 | // otherwise show calendar | |||
|
149 | // otherwise update every hour and show | |||
|
150 | // <Today | yesterday|...> at hh,mm,ss | |||
|
151 | human_date = chkd.calendar(); | |||
|
152 | } | |||
|
153 | el.text(human_date).attr('title', long_date); | |||
|
154 | }; | |||
|
155 | ||||
|
156 | ||||
|
157 | var S = 1000; | |||
|
158 | var M = 60*S; | |||
|
159 | var H = 60*M; | |||
|
160 | var thresholds = { | |||
|
161 | s: 45 * S, | |||
|
162 | m: 45 * M, | |||
|
163 | h: 22 * H | |||
|
164 | }; | |||
|
165 | var _timeout_from_dt = function (ms) { | |||
|
166 | /** compute a timeout to update the last-modified timeout | |||
|
167 | ||||
|
168 | based on the delta in milliseconds | |||
|
169 | */ | |||
|
170 | if (ms < thresholds.s) { | |||
|
171 | return 5 * S; | |||
|
172 | } else if (ms < thresholds.m) { | |||
|
173 | return M; | |||
|
174 | } else { | |||
|
175 | return 5 * M; | |||
|
176 | } | |||
|
177 | }; | |||
|
178 | ||||
|
179 | SaveWidget.prototype._schedule_render_last_modified = function () { | |||
|
180 | /** schedule the next update to relative date | |||
|
181 | ||||
|
182 | periodically updated, so short values like 'a few seconds ago' don't get stale. | |||
|
183 | */ | |||
|
184 | var that = this; | |||
|
185 | if (!this._last_modified) { | |||
|
186 | return; | |||
|
187 | } | |||
|
188 | if ((this._last_modified_timeout)) { | |||
|
189 | clearTimeout(this._last_modified_timeout); | |||
|
190 | } | |||
|
191 | var dt = Math.ceil(new Date() - this._last_modified); | |||
|
192 | if (dt < 24 * H) { | |||
|
193 | this._last_modified_timeout = setTimeout( | |||
|
194 | $.proxy(this._render_last_modified, this), | |||
|
195 | _timeout_from_dt(dt) | |||
|
196 | ); | |||
|
197 | } | |||
|
198 | }; | |||
|
199 | ||||
|
200 | return {'SaveWidget': SaveWidget}; | |||
|
201 | ||||
|
202 | }); |
@@ -81,6 +81,7 b' function($,' | |||||
81 | }); |
|
81 | }); | |
82 | that.save_enabled = true; |
|
82 | that.save_enabled = true; | |
83 | that.generation = cm.changeGeneration(); |
|
83 | that.generation = cm.changeGeneration(); | |
|
84 | that.events.trigger("file_loaded.Editor", model); | |||
84 | }, |
|
85 | }, | |
85 | function(error) { |
|
86 | function(error) { | |
86 | cm.setValue("Error! " + error.message + |
|
87 | cm.setValue("Error! " + error.message + | |
@@ -90,6 +91,24 b' function($,' | |||||
90 | ); |
|
91 | ); | |
91 | }; |
|
92 | }; | |
92 |
|
93 | |||
|
94 | Editor.prototype.get_filename = function () { | |||
|
95 | return utils.url_path_split(this.file_path)[1]; | |||
|
96 | ||||
|
97 | } | |||
|
98 | ||||
|
99 | Editor.prototype.rename = function (new_name) { | |||
|
100 | /** rename the file */ | |||
|
101 | var that = this; | |||
|
102 | var parent = utils.url_path_split(this.file_path)[0]; | |||
|
103 | var new_path = utils.url_path_join(parent, new_name); | |||
|
104 | return this.contents.rename(this.file_path, new_path).then( | |||
|
105 | function (json) { | |||
|
106 | that.file_path = json.path; | |||
|
107 | that.events.trigger('file_renamed.Editor', json); | |||
|
108 | } | |||
|
109 | ); | |||
|
110 | }; | |||
|
111 | ||||
93 | Editor.prototype.save = function() { |
|
112 | Editor.prototype.save = function () { | |
94 | /** save the file */ |
|
113 | /** save the file */ | |
95 | if (!this.save_enabled) { |
|
114 | if (!this.save_enabled) { | |
@@ -105,8 +124,8 b' function($,' | |||||
105 | var that = this; |
|
124 | var that = this; | |
106 | // record change generation for isClean |
|
125 | // record change generation for isClean | |
107 | this.generation = this.codemirror.changeGeneration(); |
|
126 | this.generation = this.codemirror.changeGeneration(); | |
108 | return this.contents.save(this.file_path, model).then(function() { |
|
127 | return this.contents.save(this.file_path, model).then(function(data) { | |
109 |
that.events.trigger(" |
|
128 | that.events.trigger("file_saved.Editor", data); | |
110 | }); |
|
129 | }); | |
111 | }; |
|
130 | }; | |
112 |
|
131 |
@@ -10,6 +10,7 b' require([' | |||||
10 | 'services/config', |
|
10 | 'services/config', | |
11 | 'edit/js/editor', |
|
11 | 'edit/js/editor', | |
12 | 'edit/js/menubar', |
|
12 | 'edit/js/menubar', | |
|
13 | 'edit/js/savewidget', | |||
13 | 'edit/js/notificationarea', |
|
14 | 'edit/js/notificationarea', | |
14 | 'custom/custom', |
|
15 | 'custom/custom', | |
15 | ], function( |
|
16 | ], function( | |
@@ -21,6 +22,7 b' require([' | |||||
21 | configmod, |
|
22 | configmod, | |
22 | editmod, |
|
23 | editmod, | |
23 | menubar, |
|
24 | menubar, | |
|
25 | savewidget, | |||
24 | notificationarea |
|
26 | notificationarea | |
25 | ){ |
|
27 | ){ | |
26 | page = new page.Page(); |
|
28 | page = new page.Page(); | |
@@ -48,6 +50,11 b' require([' | |||||
48 | events: events, |
|
50 | events: events, | |
49 | }); |
|
51 | }); | |
50 |
|
52 | |||
|
53 | var save_widget = new savewidget.SaveWidget('span#save_widget', { | |||
|
54 | editor: editor, | |||
|
55 | events: events, | |||
|
56 | }); | |||
|
57 | ||||
51 | var notification_area = new notificationarea.EditorNotificationArea( |
|
58 | var notification_area = new notificationarea.EditorNotificationArea( | |
52 | '#notification_area', { |
|
59 | '#notification_area', { | |
53 | events: events, |
|
60 | events: events, |
@@ -17,7 +17,10 b' data-file-path="{{file_path}}"' | |||||
17 |
|
17 | |||
18 | {% block header %} |
|
18 | {% block header %} | |
19 |
|
19 | |||
20 | <span id="filename">{{ basename }}</span> |
|
20 | <span id="save_widget" class="nav pull-left save_widget"> | |
|
21 | <span class="filename"></span> | |||
|
22 | <span class="last_modified"></span> | |||
|
23 | </span> | |||
21 |
|
24 | |||
22 | {% endblock %} |
|
25 | {% endblock %} | |
23 |
|
26 |
General Comments 0
You need to be logged in to leave comments.
Login now