Fixed UI surrounding day separators.
* Reworked separator display. Now it is handled by the `EntryListView.renderOne` function instead of `EntryListView.render`. This way the proper separator is inserted even if we are only adding one new entry (like when creating a new entry) and not only when we refresh the list. * Added a periodic refresh function that is triggered every minute. It refreshes the current entry so the duration is current, and refreshes te main list when a new day begins.
This commit is contained in:
Jonathan Bernard
67
www/js/ts.js
67
www/js/ts.js
@ -91,14 +91,6 @@ $(document).ready(function(){
|
||||
|
||||
_.bindAll(this, "url", "create"); },
|
||||
|
||||
/*create: function(model, options) {
|
||||
if (!(model instanceof Backbone.Model)) {
|
||||
model.user_id = this.timelineModel.get('user_id');
|
||||
model.timeline_id = this.timelineModel.get('timeline_id'); }
|
||||
else {
|
||||
model.set('user_id') = this.timelineModel.get('user_id')
|
||||
},*/
|
||||
|
||||
url: function() {
|
||||
return "/ts_api/entries/" + this.timelineModel.get('user_id') + "/"
|
||||
+ this.timelineModel.get('id'); } });
|
||||
@ -338,6 +330,14 @@ $(document).ready(function(){
|
||||
// add it to the container after the topmost separator ("Today")
|
||||
this.topSeparator.after(el);
|
||||
|
||||
// If this entry and the next entry are not on the same day, put a
|
||||
// day separator between them.
|
||||
var nextDay = nextEntry ? nextEntry.get("timestamp") : new Date();
|
||||
if (entry.get("timestamp").getDate() != nextDay.getDate()) {
|
||||
this.topSeparator.after(ich.daySeparatorTemplate(
|
||||
{separatorLabel: this.formatDaySeparator(
|
||||
TS.app.currentDay, entry.get("timestamp")) })); }
|
||||
|
||||
// hide it if excluded
|
||||
if (excluded) {
|
||||
$(el).fadeOut('slow');
|
||||
@ -379,14 +379,10 @@ $(document).ready(function(){
|
||||
// clear existing elements in the view container
|
||||
this.entryContainer.empty();
|
||||
|
||||
// last day we have printed a separator for
|
||||
var today = new Date()
|
||||
var currentDay = this.collection.at(0) ?
|
||||
this.collection.at(0).get("timestamp"): today;
|
||||
|
||||
// add the top-most day separator
|
||||
// add the top-most day separator; should always be "Today"
|
||||
this.topSeparator = ich.daySeparatorTemplate({
|
||||
separatorLabel: this.formatDaySeparator(today, today) });
|
||||
separatorLabel: this.formatDaySeparator(
|
||||
TS.app.currentDay, new Date()) });
|
||||
this.entryContainer.prepend(this.topSeparator);
|
||||
|
||||
// iterate through the collection and render the elements.
|
||||
@ -394,13 +390,6 @@ $(document).ready(function(){
|
||||
var entry = this.collection.at(i);
|
||||
var nextEntry = (i + 1 < len ? this.collection.at(i + 1) : null);
|
||||
|
||||
// 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) {
|
||||
@ -415,27 +404,27 @@ $(document).ready(function(){
|
||||
var monthDiff = today.getMonth() - labelDay.getMonth();
|
||||
var dayDiff = today.getDate() - labelDay.getDate();
|
||||
|
||||
// more than a calendar year old
|
||||
// more than a calendar year old: Weekday, Month Date, Year
|
||||
if (yearDiff > 0) {
|
||||
|
||||
return days[labelDay.getDay()] + ", " +
|
||||
months[labelDay.getMonth()] + " " + labelDay.getDate() +
|
||||
", " + labelDay.getFullYear(); }
|
||||
|
||||
// same calendar year, more than a week ago
|
||||
// same calendar year, more than a week ago: Weekday, Month Date
|
||||
else if (monthDiff > 0 || dayDiff > 7) {
|
||||
|
||||
return days[labelDay.getDay()] + ", " +
|
||||
months[labelDay.getMonth()] + " " + labelDay.getDate(); }
|
||||
|
||||
// less than a week ago, more than yesterday
|
||||
// less than a week ago, more than yesterday, Last Weekday
|
||||
else if (dayDiff > 1) {
|
||||
return "Last " + days[labelDay.getDay()]; }
|
||||
|
||||
// yesterday
|
||||
// Yesterday
|
||||
else if (dayDiff == 1) { return "Yesterday"; }
|
||||
|
||||
// today
|
||||
// Today
|
||||
else if (dayDiff == 0) { return "Today"; } } });
|
||||
|
||||
TS.TimelineListView = Backbone.View.extend({
|
||||
@ -536,9 +525,10 @@ $(document).ready(function(){
|
||||
initialize: function() {
|
||||
|
||||
_.bindAll(this, 'initializeViews', 'loadInitialData',
|
||||
'selectTimeline');
|
||||
'periodicRefresh', 'selectTimeline');
|
||||
|
||||
appThis = this;
|
||||
TS.app = this;
|
||||
TS.app.currentDay = new Date();
|
||||
|
||||
// create the login dialog
|
||||
this.loginDialog = new TS.LoginView
|
||||
@ -548,12 +538,13 @@ $(document).ready(function(){
|
||||
else {
|
||||
// this is async (waiting for user input)
|
||||
this.loginDialog.authenticate(function() {
|
||||
appThis.initializeData(appThis.loadInitialData())}); } },
|
||||
TS.app.initializeData(TS.app.loadInitialData())}); }
|
||||
|
||||
// Schedule our update function.
|
||||
setInterval(this.periodicRefresh, 60000); },
|
||||
|
||||
initializeData: function(data) {
|
||||
|
||||
TS.app = this;
|
||||
|
||||
// create user data
|
||||
this.user = {};
|
||||
this.user.model = new TS.UserModel(data.user);
|
||||
@ -610,6 +601,18 @@ $(document).ready(function(){
|
||||
|
||||
return data; },
|
||||
|
||||
periodicRefresh: function() {
|
||||
|
||||
var now = new Date();
|
||||
|
||||
if (this.currentDay.getDate() != now.getDate()) {
|
||||
// It's a new day! Rerender our whole list.
|
||||
this.entries.render(); }
|
||||
else {
|
||||
// Refresh our latest entry view so the duration is up to date.
|
||||
var models = this.entries.collection.models;
|
||||
models[models.length - 1].view.render(); } },
|
||||
|
||||
selectTimeline: function(e) {
|
||||
if (e) {
|
||||
// get the timeline model
|
||||
|
||||
Reference in New Issue
Block a user