From 90727d6dbbecc06eb9ddfebefcddfe3616ae1b47 Mon Sep 17 00:00:00 2001
From: Michael Vitz <michael.vitz@innoq.com>
Date: Wed, 26 Nov 2014 11:33:11 +0100
Subject: [PATCH] Display relative date in post.

- fixes format of time's datetime attribute
- adds moment.js for displaying relative date
- uses bootstrap for tooltip with absolute date

Relates to #130.
---
 resources/public/statuses/css/statuses.css |  9 +++++++++
 resources/public/statuses/js/statuses.js   | 10 ++++++++++
 src/statuses/backend/time.clj              | 11 -----------
 src/statuses/views/layout.clj              |  1 +
 src/statuses/views/main.clj                |  6 +++---
 5 files changed, 23 insertions(+), 14 deletions(-)
 delete mode 100644 src/statuses/backend/time.clj

diff --git a/resources/public/statuses/css/statuses.css b/resources/public/statuses/css/statuses.css
index 129ab19..da88754 100644
--- a/resources/public/statuses/css/statuses.css
+++ b/resources/public/statuses/css/statuses.css
@@ -236,3 +236,12 @@ footer {
     line-height: 1.7em;
 }
 
+.tooltip.left .tooltip-inner {
+    background-color: #eee;
+    color: #555;
+}
+
+.tooltip.left .tooltip-arrow {
+    border-left-color: #eee;
+}
+
diff --git a/resources/public/statuses/js/statuses.js b/resources/public/statuses/js/statuses.js
index 63f5f95..79ef496 100644
--- a/resources/public/statuses/js/statuses.js
+++ b/resources/public/statuses/js/statuses.js
@@ -61,6 +61,7 @@
     if (shouldImgify()) {
         imgify();
     }
+    $(".post time").each(momentify);
 
     function focusField(field) {
         field.bind("focus", moveCursorToEOL); // XXX: no need for separate event handler?
@@ -102,6 +103,15 @@
         return preferences[preferenceInlineImages] === "true";
     }
 
+    function momentify() {
+        var timeField = $(this);
+        var currentTime = timeField.html();
+        var currentDateTime = timeField.attr("datetime");
+        var timeFromNow = moment(currentDateTime, moment.ISO_8601).fromNow();
+        timeField.html(timeFromNow);
+        timeField.tooltip({placement: "left", title: currentTime});
+    }
+
 }(jQuery, preferenceStore()));
 
 function preferenceStore() {
diff --git a/src/statuses/backend/time.clj b/src/statuses/backend/time.clj
deleted file mode 100644
index 10b9193..0000000
--- a/src/statuses/backend/time.clj
+++ /dev/null
@@ -1,11 +0,0 @@
-(ns statuses.backend.time
-  (:require [clj-time.format :as format]
-            [clj-time.local :as local]))
-
-(defn time-to-utc [time]
-  (local/format-local-time time :rfc822))
-
-(defn time-to-human [time]
-  (str (local/format-local-time time :date) " "
-       (local/format-local-time time :hour-minute-second)))
-
diff --git a/src/statuses/views/layout.clj b/src/statuses/views/layout.clj
index b699f30..934a8a0 100644
--- a/src/statuses/views/layout.clj
+++ b/src/statuses/views/layout.clj
@@ -54,6 +54,7 @@
       [:footer footer]
       (include-js "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
       (include-js "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
+      (include-js "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js")
       (include-js "/statuses/lib/jquery-charCount.js")
       (include-js "/statuses/lib/modernizr.min.js")
       (include-js "/statuses/js/statuses.js")])))
diff --git a/src/statuses/views/main.clj b/src/statuses/views/main.clj
index 8ed8669..51803a0 100644
--- a/src/statuses/views/main.clj
+++ b/src/statuses/views/main.clj
@@ -1,8 +1,8 @@
 (ns statuses.views.main
-  (:require [hiccup.core :refer [html]]
+  (:require [clj-time.local :refer [format-local-time]]
+            [hiccup.core :refer [html]]
             [hiccup.element :refer [link-to]]
             [hiccup.form :refer [form-to hidden-field text-field]]
-            [statuses.backend.time :as time]
             [statuses.configuration :refer [config]]
             [statuses.routes :refer [avatar-path update-path
                                      updates-path]]
@@ -15,7 +15,7 @@
   [:button {:type "submit" :class (str "btn btn-" class)} (html (icon icon-name) [:span.btn-label label])]))
 
 (defn format-time [time]
-  [:time {:datetime (time/time-to-utc time)} (time/time-to-human time)])
+  [:time {:datetime (format-local-time time :date-time)} (format-local-time time :rfc822)])
 
 (defn delete-form [id]
   (form-to {:class "delete-form" :onsubmit "return confirm('Delete status?')"} [:delete (update-path id)]