single tweet page: fix dynamic "in reply to" and inline reply form

Also dynamically load the whole conversation on single tweet page

Thorfile

@@ -104,6 +104,9 @@ class Gm < Thor
       target ||= StringIO.new
       render_js_with_partials(file, target)
       target.string if StringIO === target
+    when 'gif', 'png', 'jpg'
+      encoded = [file.read].pack('m').gsub(/\s+/, '')
+      javascript_string('data:image/%s;base64,%s' % [file.extension, encoded])
     else
       raise "don't know how to handle .#{file.extension}"
     end

endless_tweets/endless_tweets.js

@@ -18,6 +18,8 @@ function livequeryRun() {
   jQuery.livequery && jQuery.livequery.run()
 }
 
+var spinnerData = //= load_indicator.gif
+
 var $et = {
   getTimeline: function() { return(this.timeline = $('timeline')) },
   getPage: function() { return(this.page = document.body.id) },
@@ -35,6 +37,11 @@ var $et = {
 
   getSessionCookie: function() {
     return (document.cookie.toString().match(/_twitter_sess=[^\s;]+/) || [])[0]
+  },
+  createLoadIndicator: function(element) {
+    var img = $E('img', {src: spinnerData, 'class': 'load-indicator'})
+    if (element) insertAfter(img, $(element))
+    return img
   }
 }
 
@@ -175,35 +182,49 @@ if (content) {
   // catch click to "in reply to ..." links
   content.addEventListener('click', function(e) {
     var link = up(e.target, 'a', this)
-    if (link && /^\s*in reply to /.test(link.textContent)) {
-      var statusID = link.href.match(/(\d+)$/)[1],
-          statusUrl = '/statuses/show/' + statusID + '.json',
-          fallback = function(xhr) { window.location = link.href }
-
-      twttr.loading()
-      loadJSON(statusUrl, function(response, xhr) {
-        if (xhr.status >= 400) { fallback(xhr); return }
-        onAvatarLoad(response, function() {
-          var update = buildUpdateFromJSON(response),
-              currentStatus = up(link, '.status', content)
-
-          if (currentStatus) {
-            // we're in a list of statuses
-            insertAfter(update, currentStatus)
-          } else {
-            // we're on a fresh single tweet page
-            insertAfter(update.parentNode, $('permalink'))
-          }
-          reveal(update)
-          twttr.loaded()
-          livequeryRun()
-          $et.trackEvent('timeline', 'in_reply_to', 'loaded status ' + statusID)
-        })
-      }, { onerror: fallback })
+    if (link && /^\s*in reply to\b/.test(link.textContent)) {
+      loadInReplyTo(link, 'show' == $et.page)
       e.preventDefault()
     }
   }, false)
 
+  function loadInReplyTo(link, recursive) {
+    var statusID = link.href.match(/(\d+)$/)[1],
+        statusUrl = '/statuses/show/' + statusID + '.json',
+        fallback = function(xhr) { window.location = link.href }
+
+    if ($('status_' + statusID)) return false
+
+    var indicator = $et.createLoadIndicator(link)
+
+    loadJSON(statusUrl, function(response, xhr) {
+      if (xhr.status >= 400) { fallback(xhr); return }
+      onAvatarLoad(response, function() {
+        var update = buildUpdateFromJSON(response)
+
+        if (up(link, '.statuses', content)) {
+          // we're in a list of statuses
+          insertAfter(update, up(link, '.status', content))
+        } else {
+          // we're on a single tweet page, so create a timeline list
+          insertAfter(update.parentNode, $('permalink'))
+        }
+        reveal(update)
+        $et.trackEvent('timeline', 'in_reply_to', 'loaded status ' + statusID)
+
+        var nextInReplyLink = find(update, './/a[@href][starts-with(text(), "in reply to ")]')
+        if (recursive && nextInReplyLink) {
+          loadInReplyTo(nextInReplyLink, recursive)
+        } else {
+          livequeryRun()
+        }
+        removeChild(indicator)
+      })
+    }, { onerror: fallback })
+
+    return true
+  }
+
   // catch TAB keypresses in the update form
   content.addEventListener('keydown', function(e) {
     var textarea = null

endless_tweets/endless_tweets.sass

@@ -38,6 +38,11 @@ a.googlemap
   input[type=checkbox]
     :vertical-align top
 
+img.load-indicator
+  :display inline-block
+  :margin -3px 0 -3px 5px
+  :vertical-align middle
+
 body#show
   .user-info
     :border-top-color white 
@@ -48,8 +53,6 @@ body#show
       :padding-bottom 0
     .screen-name
       :font-size inherit
-    .actions a
-      :padding 3px 8px
 
   #content ol.statuses
     .entry-content

endless_tweets/inline_reply.js

@@ -1,4 +1,4 @@
-var replyLink = find('content', '.actions .reply')
+var replyLink = find('content', '.status .reply a')
 if (replyLink) {
   var actions = replyLink.parentNode
   actions.style.top = actions.offsetTop + 'px'
@@ -8,7 +8,7 @@ if (replyLink) {
     container.innerHTML = //= update_form.haml
 
     var username = selectString('meta[@name="page-user-screen_name"]/@content'),
-        replyForm = $('permalink').parentNode.appendChild(container.firstChild),
+        replyForm = insertAfter(container.firstChild, $('permalink')),
         label = find(replyForm, 'label.doing'),
         textInput = $('status'),
         counter = $('status-field-char-counter'),