use momentjs for nice dates

This commit is contained in:
Matthias BUSSONNIER 2014-07-24 22:30:50 +02:00
parent a2a70b40e2
commit 8b20aee32e
6 changed files with 93 additions and 19 deletions

View File

@ -7,7 +7,8 @@ define([
'base/js/utils',
'notebook/js/tour',
'bootstrap',
], function(IPython, $, utils, tour) {
'moment',
], function(IPython, $, utils, tour, bootstrap, moment) {
"use strict";
var MenuBar = function (selector, options) {
@ -335,7 +336,7 @@ define([
$("<li/>").append(
$("<a/>")
.attr("href", "#")
.text(d.format("mmm dd HH:MM:ss"))
.text(moment(d).format("LLLL"))
.click(function () {
that.notebook.restore_checkpoint_dialog(checkpoint);
})

View File

@ -7,7 +7,8 @@ define([
'base/js/utils',
'base/js/dialog',
'notebook/js/notificationwidget',
], function(IPython, $, utils, dialog, notificationwidget) {
'moment'
], function(IPython, $, utils, dialog, notificationwidget, moment) {
"use strict";
var NotificationArea = function (selector, options) {
@ -208,7 +209,7 @@ define([
var msg = "Checkpoint created";
if (data.last_modified) {
var d = new Date(data.last_modified);
msg = msg + ": " + d.format("HH:MM:ss");
msg = msg + ": " + moment(d).format("HH:mm:ss");
}
nnw.set_message(msg, 2000);
});

View File

@ -7,8 +7,8 @@ define([
'base/js/utils',
'base/js/dialog',
'base/js/keyboard',
'dateformat',
], function(IPython, $, utils, dialog, keyboard, dateformat) {
'moment',
], function(IPython, $, utils, dialog, keyboard, moment) {
"use strict";
var SaveWidget = function (selector, options) {
@ -16,6 +16,7 @@ define([
this.notebook = undefined;
this.selector = selector;
this.events = options.events;
this._checkpoint_date = undefined;
this.keyboard_manager = options.keyboard_manager;
if (this.selector !== undefined) {
this.element = $(selector);
@ -51,11 +52,11 @@ define([
that.set_save_status('Autosave Failed!');
});
this.events.on('checkpoints_listed.Notebook', function (event, data) {
that.set_last_checkpoint(data[0]);
that._set_last_checkpoint(data[0]);
});
this.events.on('checkpoint_created.Notebook', function (event, data) {
that.set_last_checkpoint(data);
that._set_last_checkpoint(data);
});
this.events.on('set_dirty.Notebook', function (event, data) {
that.set_autosaved(data.value);
@ -142,19 +143,87 @@ define([
this.element.find('span#autosave_status').text(msg);
};
SaveWidget.prototype.set_checkpoint_status = function (msg) {
this.element.find('span#checkpoint_status').text(msg);
SaveWidget.prototype._set_checkpoint_status = function (human_date, iso_date) {
var el = this.element.find('span#checkpoint_status')
if(human_date){
el.text("Last Checkpoint: "+human_date).attr('title',iso_date);
} else {
el.text('').attr('title','no-checkpoint')
}
};
SaveWidget.prototype.set_last_checkpoint = function (checkpoint) {
if (!checkpoint) {
this.set_checkpoint_status("");
// compute (roughly) the remaining time in millisecond until the next
// moment.js relative time update of the string, which by default
// happend at
// (a few seconds ago)
// - 45sec,
// (a minute ago)
// - 90sec,
// ( x minutes ago)
// - then every minutes until
// - 45 min,
// (an hour ago)
// - 1h45,
// (x hours ago )
// - then every hours
// - 22 hours ago
var _next_timeago_update = function(deltatime_ms){
var s = 1000;
var m = 60*s;
var h = 60*m;
var mtt = moment.relativeTimeThreshold;
if(deltatime_ms < mtt.s*s){
return mtt.s*s-deltatime_ms;
} else if (deltatime_ms < (mtt.s*s+m)) {
return (mtt.s*s+m)-deltatime_ms;
} else if (deltatime_ms < mtt.m*m){
return m;
} else if (deltatime_ms < (mtt.m*m+h)){
return (mtt.m*m+h)-deltatime_ms;
} else {
return h;
}
}
SaveWidget.prototype._regularly_update_checkpoint_date = function(){
if (!this._checkpoint_date) {
this.set_checkpoint_status(null);
console.log('no checkpoint done');
return;
}
var d = new Date(checkpoint.last_modified);
this.set_checkpoint_status(
"Last Checkpoint: " + dateformat(d,'mmm dd HH:MM')
);
var chkd = moment(this._checkpoint_date);
var longdate = chkd.format('llll');
var that = this;
var recall = function(t){
// recall slightly later (1s) as long timeout in js might be imprecise,
// and you want to be call **after** the change of formatting should happend.
return setTimeout($.proxy(that._regularly_update_checkpoint_date, that),(t+1000))
}
var tdelta = Math.ceil(new Date()-this._checkpoint_date);
// update regularly for the first 6hours and show
// <x time> ago
if(tdelta < tdelta < 6*3600*1000){
recall(_next_timeago_update(tdelta));
this._set_checkpoint_status( chkd.fromNow(), longdate);
// otherwise update every hour and show
// <Today | yesterday|...> at hh,mm,ss
} else {
recall(1*3600*1000)
this._set_checkpoint_status( chkd.calendar(), longdate);
}
}
SaveWidget.prototype._set_last_checkpoint = function (checkpoint) {
this._checkpoint_date = new Date(checkpoint.last_modified);
this._regularly_update_checkpoint_date();
};
SaveWidget.prototype.set_autosaved = function (dirty) {

View File

@ -28,6 +28,7 @@
dateformat: 'dateformat/date.format',
jqueryui: 'components/jquery-ui/ui/minified/jquery-ui.min',
highlight: 'components/highlight.js/build/highlight.pack',
moment: "components/moment/moment",
},
shim: {
underscore: {

View File

@ -160,6 +160,8 @@ def find_package_data():
pjoin(components, "marked", "lib", "marked.js"),
pjoin(components, "requirejs", "require.js"),
pjoin(components, "underscore", "underscore-min.js"),
pjoin(components, "moment", "moment.js"),
pjoin(components, "moment", "min","moment.min.js"),
])
# Ship all of Codemirror's CSS and JS