会話などの関連ツイートを表示する twicli プラグイン

related_results.js

langResources['Related Tweets'] = ['関連ツイート'];
langResources['Tweets with conversation'] = ['会話のツイート'];
langResources['Tweets with reply'] = ['返信のツイート'];
langResources['Tweets with mention'] = ['@ユーザーを含むツイート'];
langResources['Tweets with hashtag'] = ['このハッシュタグのツイート'];
langResources['Tweets with entity'] = ['単語を含むツイート'];
langResources['Tweets from user'] = ['このユーザーのツイート'];
langResources['Reply'] = ['返信'];
var dispRelated;

(function () {
  // トリガーになるボタンをつくる →メニューにしたので使ってない
  /*
  function makeRelatedButton(element, tw) {
    // getElementsByClassName使ってるのでIEでは動かない？
    var reply = element.getElementsByClassName('reply');
    if (reply) {
      reply = reply[0];
      var relButton = document.createElement('a');
      relButton.className = 'button related';
      relButton.setAttribute('href', '#');
      relButton.setAttribute('onclick',
        "dispRelated('"
        + tw.user.screen_name
        + "','"
        + (tw.id_str || tw.id)
        + "',this);return false;"
      );
      relButton.innerHTML = '☄';
      reply.parentNode.insertBefore(relButton, reply);
    }
  }
  */

  // トリガーになるメニューをつくる
  var menuItem = document.createElement('a');
  menuItem.id = 'popup_related';
  menuItem.innerHTML = '☄'+_('Related Tweets');
  $('popup_link_user').parentNode.insertBefore(menuItem, $('popup_link_user'));

  function makeRelatedMenu(elem, user, id, tweet_elem) {
    $('popup_related').href = '#';
    $('popup_related').onclick = function () {
      dispRelated(user, id, tweet_elem);
      return false;
    };
  }

  // ボタン/メニューから呼ばれる
  dispRelated = function (user, id, elem) {
    var elem_top = cumulativeOffset(elem)[1] + 20;
    rep_top = elem_top;
    $("loading").style.display = "block";

    // 毎回取りに行くのでほんとはdataをキャッシュしたほうがいい
    xds.load(twitterAPI + 'related_results/show/'+id+'.json?pc=true&include_entities=1&suppress_response_codes=true', function (data) {
      //console.log(['related_results', data]);
      $('loading').style.display = 'none';
      
      if (data[0].results) {
        $('reps').innerHTML = '';
        $('rep').style.top = elem_top;
        for (var i = 0; i < data.length; i++) {
          var caption = data[i].groupName.replace(/(.)([A-Z])/g, function (s,p1,p2) { return p1+' '+p2.toLowerCase() });
          addLegend(_(caption));
          if (data[i].groupName == 'TweetsWithConversation') {
            for (var j = 0; j < data[i].results.length && data[i].results[j].annotations.ConversationRole == 'Ancestor'; j++) {
              addRelatedTweet(data[i].results[j].value);
            }
            addLegend(_('Reply')+'↑', 'reply_up');
            var tweet_elem = getTweetDiv(elem);
            if (tweet_elem.tw) addRelatedTweet(tweet_elem.tw, 'self');
            if (j < data[i].results.length) {
              addLegend(_('Reply')+'↓', 'reply_down');
              for (; j < data[i].results.length; j++) {
                addRelatedTweet(data[i].results[j].value);
              }
            }
          } else {
            for (var j = 0; j < data[i].results.length; j++) {
              addRelatedTweet(data[i].results[j].value);
            }
          }
        }
        $('rep').style.display = "block";
        scrollToDiv($('rep'));
      }
    });
  };

  function addLegend(caption, className) {
    var legend = document.createElement('legend');
    if (className) legend.className = className;
    legend.innerHTML = caption;
    $('reps').appendChild(legend);
  }
  function addRelatedTweet(tw, className) {
    var el = document.createElement('div');
    el.id = 'reps-'+tw.id_str;
    if (className) el.className = className;
    el.innerHTML = makeHTML(tw, false, 'reps');
    el.tw = tw;
    callPlugins("newMessageElement", el, tw, 'reps');
    $('reps').appendChild(el);
  }

  // 任意のElementから親をたどっていって、含まれるツイートのdivを得る
  function getTweetDiv(elem) {
    var t = elem;
    while (t && !(t.tagName.toLowerCase() == 'div' && /^[a-z0-9]+-\d{10,}$/.test(t.id))) t = t.parentNode;
    return t;
  }

  registerPlugin({
    //newMessageElement: makeRelatedButton,
    popup: makeRelatedMenu
  });

})();