Hatena::Groupos0x

FFFF RSSフィード

0xFFのメモです。

2008 June 10th Tuesday

AutoPagerizeでtr要素の継ぎ足し時にレイアウトが崩れることがある件

23:44 | AutoPagerizeでtr要素の継ぎ足し時にレイアウトが崩れることがある件 - FFFF を含むブックマーク はてなブックマーク - AutoPagerizeでtr要素の継ぎ足し時にレイアウトが崩れることがある件 - FFFF

AutoPagerizeではページを継ぎ足す際に、区切りのためのhrとページ番号をpで挿入する。このとき挿入位置がテーブルの中になっていることがあって(特にinsertPointが省略されているとき)、表示が崩れることがある。TwitterのFavouritesで表示が崩れる直接的な原因だったりする(間接的にはTwitter用の定義ではなくhAtomが使用されるから)。

で、http://github.com/swdyh/autopagerize/commit/ff71c85876322104611949cd246545a2fa5ae027 こういう修正がコミットされてたんだけど、これだとtr要素の直下にhrとpがきてしまうのが気になった。

tdいれてあげればいいよね。と思ったんだけど、カラムの数を考慮しないとレイアウトが崩れることに気がついて面倒くさいーと思いつつも一応書いてみた。

*** autopagerize.user.js.bak	2008-06-10 23:02:34.000000000 +0900
--- autopagerize.user.js	2008-06-10 23:02:52.000000000 +0900
***************
*** 298,307 ****
      var self = this
  
      if (page[0] && page[0].tagName == 'TR') {
!         var tr = document.createElementNS(HTML_NAMESPACE, 'tr')
!         tr.appendChild(hr)
!         tr.appendChild(p)
!         this.insertPoint.parentNode.insertBefore(tr, this.insertPoint)
      }
      else {
          this.insertPoint.parentNode.insertBefore(hr, this.insertPoint)
--- 298,317 ----
      var self = this
  
      if (page[0] && page[0].tagName == 'TR') {
!         var insertParent = this.insertPoint.parentNode;
!         var colNodes = getElementsByXPath('child::tr[1]/child::*[self::td or self::th]',insertParent);
!         var colums = 0;
!         for (var i = 0, l = colNodes.length;i < l;i++) {
!             var col = colNodes[i].getAttribute('colspan');
!             colums += parseInt(col,10) || 1;
!         }
!         var td = document.createElement('td');
!         td.appendChild(hr);
!         td.appendChild(p);
!         var tr = document.createElement('tr');
!         td.setAttribute('colspan',colums);
!         tr.appendChild(td);
!         insertParent.insertBefore(tr, this.insertPoint);
      }
      else {
          this.insertPoint.parentNode.insertBefore(hr, this.insertPoint)

tdとthの数とそのcolspanの値も考慮してみた。

(tdの中にhrとかpってのも気持ちよくはないけど、まあいいや。)

本家にマージしてもらったんだけど、確認したらバグ発見orz colNodesのXPathをchild::tr/child::*[self::td or self::th]からchild::tr[1]/child::*[self::td or self::th]に直しました。[1]がないと全セル取得しちゃっていた。colspanが大きい分には(見た目上の)害はないんだけど。。何で気が付かなかったんだろう。。。

toteritoteri2008/08/27 17:28ありがとうございます!
使わせて頂きました。

hid_ahid_a2009/02/05 11:00使わせて頂きます。
以下の組み合わせでOKでした。
FireFox 3.0.6 + Greasemonkey 0.8.20080609.0
Redmine 0.8.0