first version

2024-11-26 17:26:15 -05:00 · 2008-07-18 11:34:06 -04:00 · 2008-07-18 11:34:06 -04:00 · 93577fd6ec
commit 93577fd6ec
parent 66dc0e269f
5 changed files with 286 additions and 0 deletions
--- a/11
+++ b/11
@ -0,0 +1,11 @@
+SETTINGS = {
+  'rsync_server' => ENV['rsync_server'] || 'timeago@yarp.com:/var/www/timeago/',
+  'rsync_options' => ENV['rsync_options'] || '-e ssh -avz --delete --exclude=.git'
+}
+
+desc 'Publishes to server (edit Rakefile to config)'
+task :publish do
+  cmd = "rsync #{SETTINGS['rsync_options']} ./ #{SETTINGS['rsync_server']}"
+  puts "\nSyncing with server: #{cmd}\n\n"
+  system(cmd)
+end
--- a/clock.png
+++ b/clock.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,155 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="microid" content="mailto+http:sha1:566841e568e84b46c92d2291b44b836dfddc5c42" />
+    <title>timeago jQuery plugin</title>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
+    <script src="jquery.timeago.js" type="text/javascript"></script>
+    <script>
+      var zeropad = function (num) { return ((num < 10) ? '0' : '') + num; };
+      var iso8601 = function (date) {
+        return date.getUTCFullYear() + "-" + zeropad(date.getUTCMonth()+1) + "-" + zeropad(date.getUTCDate())
+          + "T" + zeropad(date.getUTCHours()) + ":" + zeropad(date.getUTCMinutes()) + ":" + zeropad(date.getUTCSeconds()) + "Z";
+      };
+    </script>
+    <script type="text/javascript">
+      jQuery(document).ready(function($) {
+        $('abbr[class*=loaded]').each(function() {
+          this.title = iso8601(new Date());
+        });
+        $('abbr[class*=modified]').each(function() {
+          this.title = iso8601(new Date(document.lastModified));
+        });
+
+        $('abbr[class*=timeago]').timeago();
+      });
+    </script>
+    <style>
+      * { margin: 0; padding: 0; }
+      body { font-family: Helvetica,Arial,sans-serif; color: #333; background-color: #ccc; font-size: 16px; line-height: 24px; }
+      h1 { margin: 0; font-size: 60px; line-height: 100px; text-align: center; }
+      h2 { margin: -30px 0 40px 50px; font-size: 20px; line-height: 20px; text-align: center; color: #999; }
+      h3 { margin: 24px 0 6px 0; font-size: 18px; line-height: 18px; border-bottom: 1px solid #ccc; }
+      h1 img { vertical-align: middle; }
+      p { margin: 0 0 24px 0; }
+      p.example { margin: 0 0 12px 0; }
+      p.how, p.last { margin: 0; }
+      ul { margin: 0 24px 24px; }
+      li { line-height: 24px; }
+      pre { background-color: #333; color: #fff; margin: 12px 0; font-size: 12px; }
+      pre em { font-style: normal; background-color: #554; }
+      pre, tt { font-family: monaco,"courier new",mono; }
+      tt { font-size: 14px; }
+      a { color: #06e; padding: 1px; }
+      a:hover { background-color: #06c; color: #fff; text-decoration: none; }
+      #content { margin:0 auto; padding: 24px; width:700px; background-color:#fff; border: 1px solid #999; border-width: 0 1px 1px 1px; }
+      #footer { margin:0 auto 24px; padding: 12px; width:700px; line-height: 24px; }
+      .help { font-size: 14px; color: #888; }
+    </style>
+  </head>
+  <body>
+    <div id="content">
+      <h1><img src="clock.png" /> timeago</h1>
+      <h2>a jQuery plugin</h2>
+
+      <h3>What?</h3>
+      <p>
+        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").  <a href="jquery.timeago.js">Download</a>, view
+        the examples, and enjoy.
+      </p>
+
+      <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>
+      </p>
+
+      <p class="example">
+        This page was last modified <abbr class="modified timeago">sometime before now <span class="help">(turn on javascript, loser)</span></abbr>.
+      </p>
+
+      <p class="example">
+        Ryan was born <abbr class="timeago" title="1978-12-18T17:17:00Z">Dec 18, 1978</abbr>.
+      </p>
+
+      <h3>How?</h3>
+      <p class="how">
+        First, load <a href="http://jquery.com/">jQuery</a> and the plugin:
+      </p>
+
+      <pre>
+  &lt;script src=&quot;jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+  &lt;script src=&quot;jquery.timeago.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
+
+      <p class="how">
+        Now, let's attach it to your timestamps on DOM ready:
+      </p>
+
+      <pre>
+  jQuery(document).ready(function() {
+    jQuery('abbr[class*=timeago]').timeago();
+  });</pre>
+
+      <p class="how">
+        This will turn all <tt>abbr</tt> elements with a class
+        of <tt>timeago</tt> and an <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> timestamp in the title:
+      </p>
+
+      <pre>
+  &lt;abbr class=&quot;<em>timeago</em>&quot; title=&quot;<em>2008-07-17T09:24:17Z</em>&quot;&gt;July 17, 2008&lt;/abbr&gt;</pre>
+
+      <p class="how">
+        into something like this:
+      </p>
+
+      <pre>
+  &lt;abbr class=&quot;timeago&quot; title=&quot;2008-07-17T09:24:17Z&quot;&gt;<em>6 hours ago</em>&lt;/abbr&gt;</pre>
+
+      <p class="how">
+        As time passes, the timestamps will automatically update.
+      </p>
+
+      <h3>Why?</h3>
+      <p>Timeago was originally built for use with <a href="http://yarp.com">Yarp.com</a> (coming soon) to timestamp comments.</p>
+      <ul>
+        <li>Because timeago can refresh automatically, you won't have timestamps dated "1 minute ago" even though the page was opened 10 minutes ago.</li>
+        <li>Because the fuzzy timestamps aren't calculated on the server, you can take full advantage of page caching in your web applications.</li>
+        <li>You get to use <a href="http://microformats.org/">microformats</a> like the cool kids.</li>
+      </ul>
+
+      <h3>Who?</h3>
+      <p>
+        Timeago was built by <a href="http://ryan.mcgeary.org">Ryan McGeary</a>
+        while standing on the shoulders of giants.  John Resig wrote about
+        a <a href="http://ejohn.org/blog/javascript-pretty-date/">similar
+        approach</a>.  The verbiage was based on
+        the <tt>distance_of_time_in_words</tt> ActionView helper
+        in <a href="http://rubyonrails.org">Ruby on Rails</a>.
+      </p>
+
+      <h3>When?</h3>
+      <p class="last">
+        Timeago was conceived <abbr class="timeago" title="2008-07-17T02:30:00-0500">on July 17, 2008</abbr>.  <span class="help">(Yup, that's powered by timeago too)</span>
+      </p>
+    </div>
+    <div id="footer">
+      <div style="float:right;">
+        <a href="http://www.opensource.org/licenses/mit-license.php">MIT
+        License</a>
+      </div>
+      Copyright &copy; 2008 <a href="http://ryan.mcgeary.org">Ryan McGeary</a>
+    </div>
+
+
+    <script type="text/javascript">
+    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+    </script>
+    <script type="text/javascript">
+    var pageTracker = _gat._getTracker("UA-2856277-2");
+    pageTracker._initData();
+    pageTracker._trackPageview();
+    </script>
+  </body>
+</html>
--- a/jquery.timeago.js
+++ b/jquery.timeago.js
@ -0,0 +1,76 @@
+/*
+ * Time Ago (for jQuery) version: 0.1 (07/18/2008)
+ * @requires jQuery v1.2 or later
+ *
+ * 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").
+ *
+ * For usage and examples, visit:
+ * http://timeago.yarp.com/
+ *
+ * Licensed under the MIT:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright (c) 2008, Ryan McGeary (ryanonjavascript -[at]- mcgeary [*dot*] org)
+ */
+(function($) {
+  $.timeago = function(timestamp) {
+    // TODO: should take a Date, ISO8601, or element[title=iso8601]
+    // return words if date or iso8601; convert and return element if element
+    alert("jQuery.timeago helper not implemented yet");
+  };
+
+  $.extend($.timeago, {
+    settings: {
+      refreshSeconds: 60
+    },
+    inWords: function(distanceMillis) {
+      var seconds = distanceMillis / 1000;
+      var minutes = seconds / 60;
+      var hours = minutes / 60;
+      var days = hours / 24;
+      var years = days / 365;
+
+      var words = seconds < 45 && "less than a minute" ||
+        seconds < 90 && "about 1 minute" ||
+        minutes < 45 && Math.round(minutes) + " minutes" ||
+        minutes < 90 && "about 1 hour" ||
+        hours < 24 && Math.round(hours) + " hours" ||
+        hours < 48 && "about 1 day" ||
+        days < 30 && Math.floor(days) + " days" ||
+        days < 60 && "about 1 month" ||
+        days < 365 && Math.floor(days / 30) + " months" ||
+        years < 2 && "about 1 year" ||
+        Math.floor(years) + " years";
+
+      return words + " ago";
+    },
+    parse: function(iso8601) {
+      var s = iso8601.replace(/^\s+/, '').replace(/\s+$/, '');
+      s = s.replace(/-/,"/").replace(/-/,"/");
+      s = s.replace(/T/," ").replace(/Z/," UTC");
+      s = s.replace(/([\+-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
+      return new Date(s);
+    }
+  });
+
+  $.fn.timeago = function() {
+    var self = this;
+    self.each(refresh);
+
+    var $s = $.timeago.settings;
+    if ($s.refreshSeconds > 0) {
+      setInterval(function() { self.each(refresh); }, ($s.refreshSeconds * 1000));
+    }
+  };
+
+  function refresh() {
+    var date = $.timeago.parse(this.title);
+    $(this).text($.timeago.inWords(distance(date)));
+  }
+
+  function distance(date) {
+    return (new Date().getTime() - date.getTime());
+  }
+})(jQuery);
+
--- a/test.html
+++ b/test.html
@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+  <title>Timeago jQuery Plugin Tests</title>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
+  <script src="jquery.timeago.js" type="text/javascript"></script>
+  <script type="text/javascript">
+    jQuery(document).ready(function($) {
+      // functional tests
+      $('abbr[class*=timeago]').timeago();
+
+      // unit tests
+      $('abbr[class*=todate]').each(function() {
+        var date = $.timeago.parse(this.title);
+        $(this).text(date.toString());
+      });
+    });
+  </script>
+</head>
+<body>
+  <h1>Functional tests:</h1>
+
+  <h2>Long term</h2>
+  Jett was born <abbr class="timeago" title="2008-02-27T00:23:00Z">bleh</abbr> [from Z]<br />
+  Jett was born <abbr class="timeago" title="2008-02-26T19:23:00-0500">bleh</abbr> [from -0500]<br />
+  <br />
+  Logan was born <abbr class="timeago" title="2005-06-17T23:42:00Z">bleh</abbr> [from Z]<br />
+  Logan was born <abbr class="timeago" title="2005-06-17T19:42:00-0400">bleh</abbr> [from -0400]<br />
+  <br />
+  Ryan was born <abbr class="timeago" title="1978-12-18T17:17:00Z">bleh</abbr> [from Z]<br />
+  Ryan was born <abbr class="timeago" title="1978-12-18T12:17:00-05:00">bleh</abbr> [from -0500]<br />
+
+  <h1>Parsing unit tests:</h1>
+  <strong>Ryan was born...</strong><br />
+  <abbr class="todate" title="1978-12-18T17:17:00Z"></abbr> [from Z]<br />
+  <abbr class="todate" title="1978-12-18T17:17:00-00:00"></abbr> [from -00:00]<br />
+  <abbr class="todate" title="1978-12-18T12:17:00-05:00"></abbr> [from -05:00]<br />
+  <abbr class="todate" title="1978-12-18T12:17:00-0500"></abbr> [from -0500]<br />
+  <abbr class="todate" title="1978-12-19T02:17:00+09:00"></abbr> [from +09:00]<br />
+  <abbr class="todate" title="1978-12-19T02:17:00+0900"></abbr> [from +0900]<br />
+</body>
+</html>