Merge lp:~dgadomski/ubuntu-rssreader-app/relative-time-formatting into lp:~ubuntu-shorts-dev/ubuntu-rssreader-app/trunk

[Dariusz Gadomski]

Improved relative time formatting utility.

This is my second approach to provide a more generic and flexible relative time formatting utility. This one incorporates an array of formatters which may be adjusted when needed.
There are 2 new formats added 'borrowed' from the calculator app: displaying that something happened yesterday ("Yesterday at %1") or within a week from now (by using the weekday name).

I have tested this version and it works just fine with gettext (all strings are extracted correctly for translations).

Unfortunately, since i18n is a QML context property (confirmed in Ubuntu UI toolkit source code: http://bazaar.launchpad.net/~ubuntu-sdk-team/ubuntu-ui-toolkit/trunk/view/head:/modules/Ubuntu/Components/plugin/plugin.cpp#L133) and not a function/component it cannot be simple ".import"-ed in JS. It needs to be passed there e.g. as an argument of the function.

I believe in this form it can be easily reused in ubuntu-calculator-app (it has all the features required there).

[Roman Shchekin (mrqtros)]

Looks like all is ok, w8 while guys will review your code too :)

[lp:~dgadomski/ubuntu-rssreader-app/relative-time-formatting]

22. By Dariusz Gadomski on 2013-07-26

Merge with trunk.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

review: Approve (continuous-integration)

[Joey Chan (qqworini)]

Hi Dariusz,

We gonna make some changes to the database, one of the major change is, store time value in Integer, not text like before, in order to "order" articles by time value.

So, I want to ask u to separate the "formatRelativeTime" function into two parts:

1. one is convert the original time value to an Integer which is seconds from 1970-01-01 00:00
2. convert the "seconds" Integer to current output

Hope u have time to help :)
Thanks

Joey

[Dariusz Gadomski (dgadomski)]

Hi Joey,

I have changed the implementation to suit your needs:
https://code.launchpad.net/~dgadomski/ubuntu-rssreader-app/formatRelativeTime-uses-seconds/+merge/183714

I hope this is what you expected.

Regards,
Dariusz

=== modified file 'ArticleFullImg.qml'
--- ArticleFullImg.qml	2013-07-09 16:08:27 +0000
+++ ArticleFullImg.qml	2013-07-26 15:25:31 +0000
@@ -1,12 +1,13 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1 as ListItem
+import "./dateutils.js" as DateUtils
 
 Column {
     width: units.gu(26)
     height: units.gu(20)
     //    anchors.fill: parent
-    property string rss_title: ""
+    property variant rss_item
     property variant imageArray: []
     property variant rss_model
     property int model_index
@@ -42,7 +43,7 @@
         Label
         {
             id: label_title
-            text: rss_title
+            text: rss_item.title
             anchors.bottom: parent.bottom
             anchors.bottomMargin: units.gu(1)
             anchors.horizontalCenter: parent.horizontalCenter
@@ -67,7 +68,7 @@
     Label
     {
         id: label_time
-        text: "13 minutes ago"
+        text: DateUtils.formatRelativeTime(i18n, rss_item.pubdate)
         color: "black"
         fontSize: "medium"
     }

=== modified file 'ArticleOneImgA.qml'
--- ArticleOneImgA.qml	2013-07-05 13:59:01 +0000
+++ ArticleOneImgA.qml	2013-07-26 15:25:31 +0000
@@ -1,13 +1,14 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1 as ListItem
+import "./dateutils.js" as DateUtils
 
 Column {
     id: delegate_item
     width: units.gu(34)
 //    height: units.gu(16)
 //    anchors.fill: parent
-    property string rss_title: ""
+    property variant rss_item
     property variant imageArray: []
     property variant rss_model
     property int model_index
@@ -21,7 +22,7 @@
         Label
         {
             id: label_title
-            text: rss_title
+            text: rss_item.title
 //            anchors.horizontalCenter: parent.horizontalCenter
             width: units.gu(14)
             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
@@ -72,7 +73,7 @@
     Label
     {
         id: label_time
-        text: "13 minutes ago"
+        text: DateUtils.formatRelativeTime(i18n, rss_item.pubdate)
         color: "black"
         fontSize: "medium"
         horizontalAlignment: Text.AlignRight

=== modified file 'ArticleOneImgB.qml'
--- ArticleOneImgB.qml	2013-07-05 13:59:01 +0000
+++ ArticleOneImgB.qml	2013-07-26 15:25:31 +0000
@@ -1,13 +1,14 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1 as ListItem
+import "./dateutils.js" as DateUtils
 
 Column {
     id: delegate_item
     width: units.gu(34)
 //    height: units.gu(16)
 //    anchors.fill: parent
-    property string rss_title: ""
+    property variant rss_item
     property variant imageArray: []
     property variant rss_model
     property int model_index
@@ -59,7 +60,7 @@
         Label
         {
             id: label_title
-            text: rss_title
+            text: rss_item.title
 //            anchors.horizontalCenter: parent.horizontalCenter
             width: units.gu(14)
             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
@@ -91,7 +92,7 @@
     Label
     {
         id: label_time
-        text: "13 minutes ago"
+        text: DateUtils.formatRelativeTime(i18n, rss_item.pubdate)
         color: "black"
         fontSize: "medium"
     }

=== modified file 'ArticleTextA.qml'
--- ArticleTextA.qml	2013-07-05 13:59:01 +0000
+++ ArticleTextA.qml	2013-07-26 15:25:31 +0000
@@ -1,12 +1,13 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1 as ListItem
+import "./dateutils.js" as DateUtils
 
 Column {
     width: units.gu(30)
 //    height: units.gu(15)
 //    anchors.fill: parent
-    property string rss_title: ""
+    property variant rss_item
     property variant imageArray: []
     property variant rss_model
     property int model_index
@@ -19,7 +20,7 @@
         Label
         {
             id: label_title
-            text: rss_title
+            text: rss_item.title
 //            anchors.horizontalCenter: parent.horizontalCenter
             width: units.gu(30)
             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
@@ -42,7 +43,7 @@
         Label
         {
             id: label_time
-            text: "13 minutes ago"
+            text: DateUtils.formatRelativeTime(i18n, rss_item.pubdate)
             color: "black"
             fontSize: "medium"
             width: parent.width

=== modified file 'ArticleTextB.qml'
--- ArticleTextB.qml	2013-07-05 13:59:01 +0000
+++ ArticleTextB.qml	2013-07-26 15:25:31 +0000
@@ -1,12 +1,13 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1 as ListItem
+import "./dateutils.js" as DateUtils
 
 Column {
     width: units.gu(30)
 //    height: units.gu(15)
 //    anchors.fill: parent
-    property string rss_title: ""
+    property variant rss_item
     property variant imageArray: []
     property variant rss_model
     property int model_index
@@ -19,7 +20,7 @@
         Label
         {
             id: label_title
-            text: rss_title
+            text: rss_item.title
 //            anchors.horizontalCenter: parent.horizontalCenter
             width: units.gu(30)
             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
@@ -43,7 +44,7 @@
         Label
         {
             id: label_time
-            text: "13 minutes ago"
+            text: DateUtils.formatRelativeTime(i18n, rss_item.pubdate)
             color: "black"
             fontSize: "medium"
             horizontalAlignment: Text.AlignRight

=== modified file 'ArticleTwoImgA.qml'
--- ArticleTwoImgA.qml	2013-07-05 13:59:01 +0000
+++ ArticleTwoImgA.qml	2013-07-26 15:25:31 +0000
@@ -1,13 +1,14 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1 as ListItem
+import "./dateutils.js" as DateUtils
 
 Column {
     id: delegate_item
     width: units.gu(34)
 //    height: units.gu(30)
 //    anchors.fill: parent
-    property string rss_title: ""
+    property variant rss_item
     property variant imageArray: []
     property variant rss_model
     property int model_index
@@ -21,7 +22,7 @@
         Label
         {
             id: label_title
-            text: rss_title
+            text: rss_item.title
 //            anchors.horizontalCenter: parent.horizontalCenter
             width: units.gu(14)
             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
@@ -78,7 +79,7 @@
     Label
     {
         id: label_time
-        text: "13 minutes ago"
+        text: DateUtils.formatRelativeTime(i18n, rss_item.pubdate)
         color: "black"
         fontSize: "medium"
     }

=== modified file 'ListColumnDelegate.qml'
--- ListColumnDelegate.qml	2013-07-13 18:28:20 +0000
+++ ListColumnDelegate.qml	2013-07-26 15:25:31 +0000
@@ -20,10 +20,10 @@
     property real childrenMaxWidth: 0
     property int modelIndex
 
-    function addItem(rss_title, rss_description, model, index)
+    function addItem(rss_item, rss_description, model, index)
     {
 //        console.log("delegate height: ", rss_item_delegate.height) ;
-        var newD = AddD.addDelegate(rss_title, ImgS.separate(rss_description), model, index);
+        var newD = AddD.addDelegate(rss_item, ImgS.separate(rss_description), model, index);
         getChildrenRect() ;
         rss_item_delegate.width = childrenMaxWidth ;
         //console.log("childrenSumHeight, column.height: ", childrenSumHeight, rss_item_delegate.height)

=== modified file 'ListColumnView.qml'
--- ListColumnView.qml	2013-07-13 18:28:20 +0000
+++ ListColumnView.qml	2013-07-26 15:25:31 +0000
@@ -104,7 +104,7 @@
 //                model++ ;
 //                currentIndex = model - 1 ;
                 // console.log("model index: ", i)
-                while (!currentItem.addItem(tempmodel.get(i).title, tempmodel.get(i).description, tempmodel, i))
+                while (!currentItem.addItem(tempmodel.get(i), tempmodel.get(i).description, tempmodel, i))
                 {
 //                    model++ ;
                     column_model.append( { "nothing": "nothing" } )  ;

=== modified file 'addDelegate.js'
--- addDelegate.js	2013-07-05 13:59:01 +0000
+++ addDelegate.js	2013-07-26 15:25:31 +0000
@@ -4,7 +4,7 @@
 //var mob_component;
 //var mob_sprite;
 
-function addDelegate(rss_title, imageArray, model, index)
+function addDelegate(rss_item, imageArray, model, index)
 {
 //    console.log("add delegate start")
 //    component = undefined ;
@@ -23,18 +23,18 @@
             //        component = Qt.createComponent("./ArticledelegateOneImgB.qml");
             //        sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "imageArray": imageArray});
             //        console.log("delegate BBBBB")
-            newD = delegateOneImgA (rss_title, imageArray, model, index)
+            newD = delegateOneImgA (rss_item, imageArray, model, index)
         }
         else if (rand > 70)
         {
             //        component = Qt.createComponent("./ArticledelegateOneImgA.qml");
             //        sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "imageArray": imageArray});
             //        console.log("delegate AAAAA")
-            newD = delegateOneImgB (rss_title, imageArray, model, index)
+            newD = delegateOneImgB (rss_item, imageArray, model, index)
         }
         else
         {
-            newD = delegateFullImg (rss_title, imageArray, model, index)
+            newD = delegateFullImg (rss_item, imageArray, model, index)
         }
 
     }
@@ -42,16 +42,16 @@
     {
         if (rand > 50)
         {
-            newD = delegateTextA (rss_title/*, imageArray*/, model, index) ;
+            newD = delegateTextA (rss_item/*, imageArray*/, model, index) ;
         }
         else
         {
-            newD = delegateTextB (rss_title/*, imageArray*/, model, index) ;
+            newD = delegateTextB (rss_item/*, imageArray*/, model, index) ;
         }
     }
     else
     {
-        newD = delegateTwoImgA (rss_title, imageArray, model, index)
+        newD = delegateTwoImgA (rss_item, imageArray, model, index)
     }
 
 //    else if (imageArray == undefined )
@@ -79,12 +79,12 @@
     return newD ;
 }
 
-function delegateOneImgA (rss_title, imageArray, model, index)
+function delegateOneImgA (rss_item, imageArray, model, index)
 {
     var component;
     var sprite;
     component = Qt.createComponent("./ArticleOneImgA.qml");
-    sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "imageArray": imageArray, "rss_model": model, "model_index": index});
+    sprite = component.createObject(rss_item_delegate, {"rss_item": rss_item, "imageArray": imageArray, "rss_model": model, "model_index": index});
 //    console.log("delegate AAAAA")
 
     if (sprite == null) {
@@ -95,12 +95,12 @@
     return sprite
 }
 
-function delegateOneImgB (rss_title, imageArray, model, index)
+function delegateOneImgB (rss_item, imageArray, model, index)
 {
     var component;
     var sprite;
     component = Qt.createComponent("./ArticleOneImgB.qml");
-    sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "imageArray": imageArray, "rss_model": model, "model_index": index});
+    sprite = component.createObject(rss_item_delegate, {"rss_item": rss_item, "imageArray": imageArray, "rss_model": model, "model_index": index});
 //    console.log("delegate BBBBB")
 
     if (sprite == null) {
@@ -111,12 +111,12 @@
     return sprite
 }
 
-function delegateTextA (rss_title, model, index)
+function delegateTextA (rss_item, model, index)
 {
     var component;
     var sprite;
     component = Qt.createComponent("./ArticleTextA.qml");
-    sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "rss_model": model, "model_index": index});
+    sprite = component.createObject(rss_item_delegate, {"rss_item": rss_item, "rss_model": model, "model_index": index});
 //    console.log("delegate CCCCC")
 
     if (sprite == null) {
@@ -127,12 +127,12 @@
     return sprite
 }
 
-function delegateTextB (rss_title, model, index)
+function delegateTextB (rss_item, model, index)
 {
     var component;
     var sprite;
     component = Qt.createComponent("./ArticleTextB.qml");
-    sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "rss_model": model, "model_index": index});
+    sprite = component.createObject(rss_item_delegate, {"rss_item": rss_item, "rss_model": model, "model_index": index});
 //    console.log("delegate CCCCC")
 
     if (sprite == null) {
@@ -143,12 +143,12 @@
     return sprite
 }
 
-function delegateFullImg (rss_title, imageArray, model, index)
+function delegateFullImg (rss_item, imageArray, model, index)
 {
     var component;
     var sprite;
     component = Qt.createComponent("./ArticleFullImg.qml");
-    sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "imageArray": imageArray, "rss_model": model, "model_index": index});
+    sprite = component.createObject(rss_item_delegate, {"rss_item": rss_item, "imageArray": imageArray, "rss_model": model, "model_index": index});
 //    console.log("delegate DDDDD")
 
     if (sprite == null) {
@@ -159,12 +159,12 @@
     return sprite
 }
 
-function delegateTwoImgA (rss_title, imageArray, model, index)
+function delegateTwoImgA (rss_item, imageArray, model, index)
 {
     var component;
     var sprite;
     component = Qt.createComponent("./ArticleTwoImgA.qml");
-    sprite = component.createObject(rss_item_delegate, {"rss_title": rss_title, "imageArray": imageArray, "rss_model": model, "model_index": index});
+    sprite = component.createObject(rss_item_delegate, {"rss_item": rss_item, "imageArray": imageArray, "rss_model": model, "model_index": index});
 
     if (sprite == null) {
         // Error Handling

=== modified file 'dateutils.js'
--- dateutils.js	2013-07-21 12:49:09 +0000
+++ dateutils.js	2013-07-26 15:25:31 +0000
@@ -18,46 +18,82 @@
 
 .pragma library
 
-var SECONDS_LIMIT = 60 * 1000;
-var MINUTES_LIMIT = 60 * SECONDS_LIMIT;
-var HOURS_LIMIT = 24 * MINUTES_LIMIT;
-var DAYS_LIMIT = 30 * HOURS_LIMIT;
-
-// TODO: handle i18n
-var FORMAT_LIMITS = [
-            { "limit": SECONDS_LIMIT, "formats": ["%0 second ago", "%0 seconds ago"] },
-            { "limit": MINUTES_LIMIT, "formats": ["%0 minute ago", "%0 minutes ago"] },
-            { "limit": HOURS_LIMIT,   "formats": ["%0 hour ago", "%0 hours ago"] },
-            { "limit": DAYS_LIMIT,    "formats": ["%0 day ago", "%0 days ago"] },
-]
-
-// fallback if none of the above formats matched
-// TODO: handle i18n
-var DEFAULT_DATE_FORMAT = "MMM Do"
+var SECONDS_LIMIT = 60 * 1000;             // used as reference
+var MINUTES_LIMIT = 60 * SECONDS_LIMIT;    // print minutes up to 1h
+var HOURS_LIMIT = 12 * MINUTES_LIMIT;      // print hours up to 12h
+var DAY_LIMIT = 24 * MINUTES_LIMIT;        // print '<val> days ago' up to 30 days back
+var DAYS_LIMIT = 30 * DAY_LIMIT;           // print '<val> days ago' up to 30 days back
 
 function parseDate(dateAsStr) {
-    return Date.parse(dateAsStr);
+    return new Date(dateAsStr);
 }
 
-function formatPostTime(dateAsStr, i18n) {
+function formatRelativeTime(i18n, dateAsStr) {
+    // fallback if none of the other formatters matched
+    function defaultFallbackFormat(then) {
+        return Qt.formatDateTime(then, i18n.tr("MMMM d"))
+    }
+
+    // Simple matches all diffs < limit, formats using the format function.
+    function SimpleFormatter(limit, format) {
+        this.matches = function (now, then, diff) { return diff < limit }
+        this.format = format
+    }
+
+    // Matches yesterday date
+    function YesterdayFormatter() {
+        this.matches = function (now, then, diff) {
+            return diff < DAY_LIMIT && now.getDate() !== then.getDate();
+        }
+        this.format = function (now, then, diff) {
+            return i18n.tr("Yesterday at %1").arg(
+                        Qt.formatDateTime(then, i18n.tr("h:mm AP")))
+        }
+    }
+
+    // Matches up to 7 days ago (formats date as a weekday + time)
+    function WeekFormatter() {
+        this.matches = function (now, then, diff) {
+            return diff < 7 * DAY_LIMIT
+        }
+        this.format = function (now, then, diff) {
+            return Qt.formatDateTime(then, i18n.tr("ddd, h:mm AP"));
+        }
+    }
+
+    // An array of formatting object processed from 0 up to a matching object.
+    // If none of the object matches a default fallback formatter will be used.
+    var FORMATTERS = [
+                new SimpleFormatter(SECONDS_LIMIT, function (now, then, diff) { return i18n.tr("A few seconds ago...") }),
+                new SimpleFormatter(MINUTES_LIMIT, function (now, then, diff) {
+                    var val = Math.floor(diff / SECONDS_LIMIT)
+                    return i18n.tr("%1 minute ago", "%1 minutes ago", val).arg(val)
+                }),
+                new SimpleFormatter(HOURS_LIMIT, function (now, then, diff) {
+                    var val = Math.floor(diff / MINUTES_LIMIT)
+                    return i18n.tr("%1 hour ago", "%1 hours ago", val).arg(val)
+                }),
+                new YesterdayFormatter(),
+                new WeekFormatter(),
+                new SimpleFormatter(DAYS_LIMIT, function (now, then, diff) {
+                    var val = Math.floor(diff / DAY_LIMIT)
+                    return i18n.tr("%1 day ago", "%1 days ago", val).arg(val)
+                })
+            ]
+
+    function formatDiff(now, then, diff) {
+        for (var i=0; i<FORMATTERS.length; ++i) {
+            var formatter = FORMATTERS[i]
+            if (formatter.matches(now, then, diff)) {
+                return formatter.format(now, then, diff)
+            }
+        }
+        return defaultFallbackFormat(then)
+    }
+
     var now = new Date();
     var then = parseDate(dateAsStr);
     var diff = now - then;
-    var formattedDiff = formatDiff(diff, then, i18n);
-    console.log("DDD DIFF", diff, formattedDiff)
+    var formattedDiff = formatDiff(now, then, diff);
     return formattedDiff;
 }
-
-function formatDiff(diff, then, i18n) {
-    for (var i=0; i<FORMAT_LIMITS.length; ++i) {
-        var limit = FORMAT_LIMITS[i].limit;
-        if (diff < limit) {
-            // use previous limit to calculate number of current units
-            // e.g. to calculate hours divide by MINUTES_LIMIT
-            // (because MINUTES_LIMIT is 1 hours) etc.
-            var val = Math.floor(diff / (i > 1 ? FORMAT_LIMITS[i-1].limit : SECONDS_LIMIT))
-            return i18n.tr(FORMAT_LIMITS[i].formats[0], FORMAT_LIMITS[i].formats[1], val).arg(val)
-        }
-    }
-    return then.toString(i18n.tr(DEFAULT_DATE_FORMAT))
-}