jdb/timestamper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Work on front-side UI.

Browse Source 
* Resolved D0003: Add day separators.

    * Created ``daySeparatorTemplate`` for ICanHaz templating.
    * Refactored ``EntryListView.render`` to spit out day separators in between
      days on the timeline. Fixed the "Today" separator to the top of the entry
      container. We no longer prepend entries to the entry container, we now put
      them after the top separator in the entry container.
    * Created ``EntryListView.formatDaySeparator`` to format the labels
      according to the relative time to today: "Yesterday", "Last Monday",
      "Friday, May 28" for example.
    * Removed the cludgier ``toWords``, ``daysApart``, and `` capitalize``
      functions that were going to serve the same purpose.
* Resolved D0021: Constrain notes width to mark.
This commit is contained in:
Jonathan Bernard
2011-06-17 16:02:26 -05:00
parent 81503112a8
commit f3ef7db088
24 changed files with 147 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
www/js/ts.js
View File

@ -355,8 +355,8 @@ $(document).ready(function(){
// render the element
var el = entry.view.render().el;
// add it to the container
this.entryContainer.prepend(el);
// add it to the container after the topmost separator ("Today")
this.topSeparator.after(el);
// hide it if excluded
if (excluded) {
@ -401,21 +401,67 @@ $(document).ready(function(){
this.entryContainer.empty();
// last day we have printed a separator for
var currentDay = null;
var today = new Date();
var today = new Date()
var currentDay = this.collection.at(0) ?
this.collection.at(0).get("timestamp"): today;
// add the top-most day separator
this.topSeparator = ich.daySeparatorTemplate({
separatorLabel: this.formatDaySeparator(today, today) });
this.entryContainer.prepend(this.topSeparator);
// iterate through the collection and render the elements.
for (var i = 0, len = this.collection.length; i < len; i++) {
var entry = this.collection.at(i);
var nextEntry = (i + 1 < len ? this.collection.at(i + 1) : null);
if (currentDay != entry.get('timestamp').getDate()) {
currentDay = entry.get('timestamp').getDate();
// we are rendering buttom up, which means we need to insert the
// day separator before the first entry of the *next* period
if (currentDay.getDate() != entry.get("timestamp").getDate()) {
this.topSeparator.after(ich.daySeparatorTemplate(
{separatorLabel: this.formatDaySeparator(today, currentDay)}));
currentDay = entry.get('timestamp');
}
this.renderOne(entry, nextEntry);
}
},
formatDaySeparator: function(today, labelDay) {
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday'];
var months = ['January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'October',
'November', 'December'];
var yearDiff = today.getFullYear() - labelDay.getFullYear();
var monthDiff = today.getMonth() - labelDay.getMonth();
var dayDiff = today.getDate() - labelDay.getDate();
// more than a calendar year old
if (yearDiff > 0) {
return days[labelDay.getDay()] + ", " +
months[labelDay.getMonth()] + " " + labelDay.getDate() +
", " + labelDay.getFullYear(); }
// same calendar year, more than a week ago
else if (monthDiff > 0 || dayDiff > 7) {
return days[labelDay.getDay()] + ", " +
months[labelDay.getMonth()] + " " + labelDay.getDate(); }
// less than a week ago, more than yesterday
else if (dayDiff > 1) {
return "Last " + days[labelDay.getDay()]; }
// yesterday
else if (dayDiff == 1) { return "Yesterday"; }
// today
else if (dayDiff == 0) { return "Today"; }
}
});
@ -757,59 +803,3 @@ function dateToJSON(d) {
+ pad(d.getUTCMinutes())+':'
+ pad(d.getUTCSeconds())+'Z';
}
function daysApart(d1, d2) {
var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30];
days1 = (d1.getFullYear() * 365) + daysInMonth[d1.getMonth()] + d1.getDate();
days2 = (d2.getFullYear() * 365) + daysInMonth[d2.getMonth()] + d2.getDate();
return days1 - days2;
}
function getEnglishDate(d) {
if (typeof getEnglishDate.today == 'undefined') {
getEnglishDate.today = new Date() };
var yearDiff = today.getFullYear() - d.getFullYear();
var monthDiff = today.getMonth() - d.getMonth();
var dayDiff = today.getDate() - d.getDate();
if (yearDiff > 1) { return capitalize(toWords(yearDiff)) + " years ago."; }
else if (yearDiff > 0) { return "Last year"; }
else if (monthDiff > 1) {
return capitalize(toWords(monthDiff)) + "months ago."; }
else if (monthDiff > 0) { return "Last month."; }
else if (dayDiff > 0) {
// weeks as 7-day periods
var weekDiff = Math.ceil(dayDiff / 7)
// adjust for the hard boundary of the weekend
if (today.getDay() > d.getDay()) { weekDiff--; }
if (weekDiff > 1) {
return capitalize(toWords(weekDiff)) + " weeks ago."; }
else if (weekDiff > 0) { return "Last week."; }
else { return capitalize(toWords(dayDiff)) + " days ago."; }
} else if (yearDiff < 0 || monthDiff < 0 || daysDiff < 0) {
return "In the future."; }
else { return "Today."; }
}
function toWords(i) {
if (typeof toWords.words == 'undefined') {
toWords.words = ['zero','one','two','three','four', 'five','six',
'seven','eight','nine','ten','eleven','twelve',
'thirteen', 'fourteen','fifteen','sixteen',
'seventeen','eighteen','nineteen' ];
}
if (i < 20) { return toWords.words[i]; }
else { return i.toString(); }
}
function capitalize(s) {
return s.slice(0, 1).toUpperCase() + s.slice(1);
}