うごレターポップアップ(4)【β】

前回まだまだと書きましたが、一気に書きあげちゃいました。どうやらうまく動いてくれるようです。

上のうごレターのリンクにマウスを乗せて少し(0.5秒)まつとポップアップが表示されてうごレターの読み込みが開始されます。完了すると一覧に表示されるのでクリック。すると、下のリードエリアに読み込まれます。元の大きさで読みたい場合は、リードエリアのタイトルをクリックしてください。

デザインですが、CSS3に従っています。Operaでは丸角ど影の両方がでます。GoogleChromeでは影が出ず、Firefox(3.x)では両方ダメでした。CSS3への対応が進めばどのブラウザでも表示できるようになるはずです。ちなみに、画像はOperaのものです。

ちなみに、うごレターの表示されているページではこちらの表示が崩れます。面倒なので、放置。

$e2 = function(xpath,target){ return document.evaluate(xpath,target,null,7,null); }
$create = function(tagname){ return document.createElement(tagname); }

function GetRequest(uri,callback)
{
 if(window.opera)
 {
  xhe = new Ten.XHR(uri,null,callback);
 }else
 {
 GM_xmlhttpRequest({
    method: 'GET',
    url: uri,
    headers: {},
    onload: function(responseDetails) { callback(responseDetails); }
    });
 }
}

var PLRetryCount = 0;
var PLShowTimer;
var isPLShowTimer = false;
var isPLLoading = false;
function PopupLetter2()
{
 //メニュー判定
 if($e("id('hatena-user-info')/li[contains(concat(' ', @class, ' '), 'menu-ugoletter')]").snapshotLength == 0)
 {
  PLRetryCount++;
  if(PLRetryCount < 5)
  {
   if(console)console.log("PopupLetter : オブジェクトが存在しません。5秒後に再実行します");
   setTimeout(PopupLetter2,5000);
  }else
  {
   if(console)console.log("PopupLetter : オブジェクトが存在しません。タイムアウトしました。レターポップアップは無効です");
  }
 } //End メニュー判定
 
 //ポップアップエリアの作成
 var popup = $create("div");
 popup.style.cssText = "visibility:hidden;position:absolute;top:0px;left:0px;width:350px;height:400px;background-color:white;border:#AAA 1px solid;box-shadow:4px 4px 5px #AAA;border-radius:10px" ;
 document.body.appendChild(popup);
 
 var popupHeader = $create("div");
 popupHeader.style.cssText = "width:320px;height:20px;background-color:#7F7;text-align:center;float:left;border:#7F7 solid 1px;border-top-left-radius:5px";
 popupHeader.textContent = "うごレター";
 popup.appendChild(popupHeader);
 
 var close = document.createElement("a");
 close.textContent = "×";
 close.style.cssText = "border:1px green solid;padding:0px 5px";
 close.href = "javascript:;";
 close.addEventListener("click",function(){ popup.style.visibility = "hidden";},false);
 popup.appendChild(close);
 
 var popupList = $create("div");
 popupList.style.cssText = "height:100px;overflow:auto;clear:both;";
 popup.appendChild(popupList);
 
 var popupPrev = $create("div");
 popupPrev.style.cssText = "width:100%;height:270px;text-align:left;overflow:auto;border-top:2px green solid;";
 popup.appendChild(popupPrev);
 //End ポップアップエリア
 
 //mouseOut
 $e("id('hatena-user-info')/li[contains(concat(' ', @class, ' '), 'menu-ugoletter')]").snapshotItem(0).addEventListener("mouseout",
 function(){
  clearTimeout(PLShowTimer); //表示タイマーを解除する
 },false)
 
 //mouseOver
 $e("id('hatena-user-info')/li[contains(concat(' ', @class, ' '), 'menu-ugoletter')]").snapshotItem(0).addEventListener("mouseover",
 function(e){
  if(isPLShowTimer == false) //表示タイマーセットされていない場合のみタイマーを仕掛ける
  {
  PLShowTimer = setTimeout(function(){ //表示タイマー
   popup.style.top = e.pageY + "px";
   popup.style.left = (e.pageX - 50) + "px";
   popup.style.visibility = "visible";
   if(isPLLoading == false) //Ajax通信が行われていない
   {
    isPLLoading = true;
    popupList.textContent = "一覧を取得しています";
    var ListTimeOutTimer = setTimeout(function(){
     popupList.textContent = "タイムアウトしました。";
     isPLLoading = false;
    },10000); //ListTimeOutTimer
    GetRequest("http://ugomemo.hatena.ne.jp/letters",function(xhr)
    {
     clearTimeout(ListTimeOutTimer);
     isPLLoading = false;
     var tmp = $create("div"); //仮要素
     tmp.innerHTML = xhr.responseText;
     var listEle = $e2(".//div[@id='main']/ul/li/div",tmp); //メール一覧を取得
     popupList.innerHTML = "";
     var ul = $create("ul");
     ul.style.textAlign = "left";
     popupList.appendChild(ul);
     for(i = 0 ; i < listEle.snapshotLength ; i++)
     {
      var title = $e2("./div[@class='info']/div[@class='username']",listEle.snapshotItem(i)).snapshotItem(0).textContent;
      
      var link = $e2("./a",listEle.snapshotItem(i)).snapshotItem(0); //アンカー取得
      //Hatena.Test = listEle;
      
      var a = $create("a");
      a.textContent = title;
      a.href = "javascript:;";
      (function() //NoName Function(A)
      {
       var href = link.href;
       a.addEventListener("click",function()
       {
        popupPrev.textContent = "レターを読み込み中・・・";
        var PrevTimeOutTimer = setTimeout(function(){ 
        popupPrev.textContent = "タイムアウトしました" 
        },10000) //End PrevTimeOutTimer
        
        GetRequest(href,function(x)
        {
         clearTimeout(PrevTimeOutTimer);
         
         var tmp2 = $create("div");
         tmp2.innerHTML = x.responseText;
         //Hatena.Test = tmp2;
         popupPrev.innerHTML = $e2(".//div[@id='main']/div/div/span/div[@class='container']",tmp2).snapshotItem(0).innerHTML
         var head = $e2(".//div[@class='info-head' or @class='news-head']",popupPrev).snapshotItem(0);
         if(head)
         {
          var t = head.textContent;
          var tLink = $create("a");
          tLink.href = href;
          tLink.textContent = t;
          head.innerHTML = "";
          head.appendChild(tLink);
          head.style.backgroundColor = "#DDF";
         }
        })//End Letter XHR
       },false);//End AddEvent Click
      })()//End NoName Function(A)
      
      
   var li = document.createElement("li");
   var img = document.createElement("img");
   img.src = (link.firstChild.src.indexOf("unread") == -1) ? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABlklEQVR42tXP2y+CcRzH8e7QtRubi/4BNheS07I5Xlh7lEMO1SMhaTMjSqenPAwpezY3WUTK5rzUpplxqZBx7ZL5Jxw+1FaWwx7ceV9/X9/f98fh/LtavFUM4Wmwss19WbOXZLQHSqj35Kh3kQa2+YzEyxZmMNgN17UN9JkBikArKu1BI5tLlsAD+wrMX1GYu7KA3GiDkBZAMLyVnR7qjXCqVeGT3o+Y8CwziZNn4xbMxM3Jl8sp0VP+8N07VkfIClWYedCfaiHbLBhK4yUP078rw8ylCdOXRsj9LSiz1mRi1eFsnSp0ez8V1WM+boXUr35qXl0cErmLHH07nZi6MII+16NrXYJSS1kmTtTozstR7kuhO9Zg4WYSdNSAgaAC2pAS9ug4bOfj6PSJITDnPn/CqWp9R9z2AAFtWJn85/TFBKiYDlRUh/a1JghMmpdvcXqJ44hLuBvQs90BW2wM5rMRSL0ESoxqdpyq1uHj1jmFbydL0LoiAn+i7+c4VeHoDbfCzkexwfnII3lZbPNflljyZ/zbXgEHDcz+YDjlCgAAAABJRU5ErkJggg==" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABNklEQVR42u2RP0uCURSHLw0tjRJ9g4amPkA01NLg4tBHqNGt2ooIe09FtPTHCKI2q6WpUgqaEip4ISGxKCErG1QoU9TMJ8/7opRzowcOv8u95/ndc+41ph2m24oFMjKQU62JmXmRubc+a3cpL57PmEzcncn01ax0HlQDiaFviYy7uea3xRtXNQpTzEJoGIXJp5015TxkE/B6CfF9WOmCkzEnFSZzC6s9mIKEi1QKqIne6oDnk6iRY6hgMVPfm4JkxM3DUXh/IikjKdOE7KALNgy+Sm4Hzxdwsw0fKcjdOyDpa3gMsyN2pGngqI7S0sGxDEZZ7HANH47q4+xBtQJbvVTno76/BgpqtHTQHNPegFO/W7NgcH6h8eKqXmtzXQ9US1Ir6y9oB/2WZ1lNfFYo+LvGtON/4gedlVB9mLzL5AAAAABJRU5ErkJggg==";
   li.appendChild(img);
   li.appendChild(a);
   ul.appendChild(li);
      
     } //End For
    });//End GetRequest
    
   } //End isPLLoading
  },500);//End ShowTimer  
  }//End isShowTimer
 },false); //End MouseOver Event
 
}

まだ日時(1時間前とか)の表示を実装していませんので、次回つけます。
こちらからインストール
過去の版も乗っていますが、最新版をインストールしてください。