Store the datetime as a jQuery data object instead of re-parsing on every refresh

This commit is contained in:
Ryan McGeary 2009-10-25 20:22:09 -04:00
parent a5c1424d69
commit ae84945b3f
4 changed files with 43 additions and 11 deletions

View file

@ -10,6 +10,7 @@
<script src="test/test_helpers.js" type="text/javascript"></script> <script src="test/test_helpers.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
prepareDynamicDates();
$('abbr.timeago').timeago(); $('abbr.timeago').timeago();
$("#prog_date").text(jQuery.timeago(new Date())); $("#prog_date").text(jQuery.timeago(new Date()));
@ -54,8 +55,9 @@
timestamps (e.g. "4 minutes ago" or "about 1 day ago"). <a href="jquery.timeago.js">Download</a>, view timestamps (e.g. "4 minutes ago" or "about 1 day ago"). <a href="jquery.timeago.js">Download</a>, view
the examples, and enjoy. the examples, and enjoy.
</p> </p>
<noscript><p class="example"><strong>Turn on javascript, loser!</strong></p></noscript>
<p class="example"> <p class="example">
You opened this page <abbr class="loaded timeago">sometime before now <span class="help">(turn on javascript, loser)</span></abbr>. <span class="help">(This will update every minute. Wait for it.)</span> You opened this page <abbr class="loaded timeago">when you opened the page</abbr>. <span class="help">(This will update every minute. Wait for it.)</span>
</p> </p>
<p class="example"> <p class="example">
This page was last modified <abbr class="modified timeago">sometime before now [browser might not support document.lastModified]</abbr>. This page was last modified <abbr class="modified timeago">sometime before now [browser might not support document.lastModified]</abbr>.

View file

@ -1,6 +1,6 @@
/* /*
* timeago: a jQuery plugin, version: 0.7.2 (2009-07-30) * timeago: a jQuery plugin, version: 0.7.2 (2009-07-30)
* @requires jQuery v1.2 or later * @requires jQuery v1.2.3 or later
* *
* Timeago is a jQuery plugin that makes it easy to support automatically * Timeago is a jQuery plugin that makes it easy to support automatically
* updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
@ -85,8 +85,8 @@
return new Date(s); return new Date(s);
}, },
datetime: function(elem) { datetime: function(elem) {
var that = $(elem); var iso8601 = $(elem).is('time') ? $(elem).attr('datetime') : $(elem).attr('title');
return $t.parse(that.is('time') ? that.attr('datetime') : that.attr('title')); return $t.parse(iso8601);
} }
}); });
@ -102,13 +102,23 @@
}; };
function refresh() { function refresh() {
var date = $t.datetime(this); var data = prepareData(this);
if (!isNaN(date)) { if (!isNaN(data.datetime)) {
$(this).text(inWords(date)); $(this).text(inWords(data.datetime));
} }
return this; return this;
} }
function prepareData(element) {
element = $(element);
if (element.data("timeago") === undefined) {
element.data("timeago", { datetime: $t.datetime(element) });
var text = $.trim(element.text());
if (text.length > 0) element.attr("title", text);
}
return element.data("timeago");
}
function inWords(date) { function inWords(date) {
return $t.inWords(distance(date)); return $t.inWords(distance(date));
} }

View file

@ -68,6 +68,8 @@
<p>Date only (abbr element): <abbr class="timeago" title="2008-02-26">(you shouldn't see this)</abbr>.</p> <p>Date only (abbr element): <abbr class="timeago" title="2008-02-26">(you shouldn't see this)</abbr>.</p>
<p>Date only (time element): <time class="timeago" datetime="2008-02-26">(you shouldn't see this)</time>.</p> <p>Date only (time element): <time class="timeago" datetime="2008-02-26">(you shouldn't see this)</time>.</p>
<p>Date only (friendly tooltip): <abbr id="testTooltip" class="timeago" title="2008-02-26">February 26th</abbr>.</p>
<p>Date only (default tooltip): <abbr id="defaultTooltip" class="timeago" title="2008-02-26"> </abbr>.</p>
<h2>Errors</h2> <h2>Errors</h2>
@ -190,12 +192,13 @@
$.timeago.settings.allowFuture = true; $.timeago.settings.allowFuture = true;
$('abbr.loaded').attr('title', iso8601(new Date())); prepareDynamicDates();
$('abbr.modified').attr('title', iso8601(new Date(document.lastModified)));
$('abbr.timeago').timeago(); $('abbr.timeago').timeago();
$('time.timeago').timeago(); $('time.timeago').timeago();
var tooltip = $("#testTooltip").data("timeago");
$('abbr.todate').each(function () { $('abbr.todate').each(function () {
var date = $.timeago.parse(this.title); var date = $.timeago.parse(this.title);
$(this).text(date.toUTCString()); $(this).text(date.toUTCString());
@ -250,6 +253,23 @@
}), 'All long term dates correctly parsed'); }), 'All long term dates correctly parsed');
}); });
module('Data object');
test("should set timeago data object", function () {
ok(tooltip, "data set");
ok(tooltip.datetime, "datetime set");
});
module('Tooltip');
test("should set title to original text contents", function () {
ok($("#testTooltip").attr("title") == "February 26th", "correctly set");
});
test("should leave title alone if no text text content", function () {
ok($("#defaultTooltip").attr("title") == "2008-02-26", "correctly set");
});
module('Parsing'); module('Parsing');
// Note, different browsers behave slightly different // Note, different browsers behave slightly different

View file

@ -10,10 +10,10 @@ var iso8601 = function (date) {
+ ":" + zeropad(date.getUTCSeconds()) + "Z"; + ":" + zeropad(date.getUTCSeconds()) + "Z";
}; };
jQuery(document).ready(function($) { function prepareDynamicDates() {
$('abbr.loaded').attr("title", iso8601(new Date())); $('abbr.loaded').attr("title", iso8601(new Date()));
$('abbr.modified').attr("title", iso8601(new Date(document.lastModified))); $('abbr.modified').attr("title", iso8601(new Date(document.lastModified)));
}); }
function loadPigLatin() { function loadPigLatin() {
jQuery.timeago.settings.strings = { jQuery.timeago.settings.strings = {