pukiwiki改造/Table処理改造 のバックアップの現在との差分(No.2)

お名前:


  • 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2021-10-11T17:40:11+09:00","-","-")
#author("2021-10-13T17:19:42+09:00","-","-")
表記、友瀬のサイトで実施している独自拡張。~
他の方にも役に立つと思われるので、一応公開しておきます。~

*改造目的 [#m7dbe801]
pukiwiki公式サイトにあった[[相談質問>https://pukiwiki.osdn.jp/?%E8%B3%AA%E5%95%8F%E7%AE%B1/5007]]:~
『表のヘッダを固定して、データ部分をスクロールさせられないか』~
というものについての対応です。

いろいろ書くより見てもらったほうが早いと思うので、サンプル。

|LEFT:100|LEFT:200|LEFT:50|s100
|H1|H2|H3|h
|1|2|4|
|2|4|8|
|3|6|12|
|4|8|16|
|5|10|20|


*追加した仕様 [#id17a5d5]

pukiwikiの「|」を使った表組にある「行末にc をつけると、書式行」という仕様を流用。~
「行末にsをつけると、スクロール式の書式指定になる」「行末sの後ろに数値指定でスクロールエリアの高さ指定」というようにしました。~
上述のサンプルでは、次のように記載しています。

 |LEFT:100|LEFT:200|LEFT:50|s100
 |H1|H2|H3|h
 |1|2|4|
 |2|4|8|
 |3|6|12|
 |4|8|16|
 |5|10|20|

この場合「s100」と記載しているので、「高さ100px分の領域で表示、その範囲をあふれる場合スクロール表示」となります。


**注意点 [#w7b72ba6]
内部動作的には、表の「ヘッダ」部分と「本体」部分とは別パーツになっています。~
そのため、表のセル幅を書式として明示しないと「ヘッダと本体とでセル幅がズレる」かたちになってしまいます。~
また書式指定も表の最初にしていしておかないとなりません。
次のような使い方が必要です。

-行末にsをつける書式行は、表の一番最初に記述してください。~
そしてその直後にヘッダ行が来るようにすべきです。
-ヘッダ行指定(行末にhをつける)は必須ではありません。その場合表全体がスクロール対象です。以下、ヘッダ行を指定していない例。
|LEFT:100|LEFT:200|LEFT:50|s50
|1|2|4|
|2|4|8|
|3|6|12|
|4|8|16|
|5|10|20|
-ヘッダ行を指定する場合、書式行ではすべてのセルに対して幅指定(LEFT:w のような記述)を指定することを推奨します。
--指定しないと「ヘッダと本体とでセル幅がズレる」可能性が高いです。以下、幅指定していない場合の表示。ヘッダのH3の位置と、表内1行目の「4」の位置がずれていることがわかると思います。
||||s100
|H1|H2|H3|h
|1|長い言葉があると。|4|
|2|4|8|
|3|6|12|
|4|8|16|
|5|10|20|


*具体的な改造内容 [#nfd9d51e]

pukiwikiのコア部分である convert_html を書き換えて対応しています。~
pukiwikiのコア部分である convert_html (\lib\convert_html.php)を書き換えて対応しています。~

さすがにファイルを差し替えるのは問題があると思うので、以下に変更を記載します。~
大きく5か所に加工をいれています。


#divregion(改造ヶ所その1)
「行末にs100」というような「スクロール表」指定を受け付ける処理、その1.

function & Factory_Table(& $root, $text) 

 --	if (! preg_match('/^\|(.+)\|([hHfFcCsS]?)$/', $text, $out)) {
 ++	if (!preg_match('/^\|(.+)\|(([hHfF]|[cCsS](\d+)?)?)$/', $text, $out)) {

#enddivregion


#divregion(改造ヶ所その2)

class Table extends Element 、最初のほうに変数追加。

 	var $col; // number of column
 ++	var $scrollh;
 ++	var $scrollb;

#enddivregion

#divregion(改造ヶ所その3)

class Table 内の function Table($out)
class Table 内の function Table($out)~
「行末にs100」というような「スクロール表」指定を受け付ける処理、その2.

 --	$is_template = ($this->type == 'c');
 ++	if($this->type == 'c'){
 ++		$is_template=true;
 ++	}
 ++	if(substr($this->type,0,1) == 's'){
 ++		$is_template=true;
 ++	}

#enddivregion

#divregion(改造ヶ所その4)
class Table 内の function toString()
class Table 内の function toString()~
表の実体構築にあたり、s指定があった場合に追加するスタイルデータを構築。

 --	if ($this->types[$nrow] == 'c')
 --		$stylerow = & $row;
 
 ++	if ($this->types[$nrow] == 'c'){
 ++		$stylerow = & $row;
 ++	}else if(substr($this->types[$nrow],0,1) == 's'){
 ++		$stylerow = & $row;
 ++		$_scrollh=(is_numeric(substr($this->types[$nrow],1))) ? substr($this->types[$nrow],1) : "100";
 ++		$this->scrollh=" style='display: block;'";
 ++		$this->scrollb=" style='height: ".$_scrollh."px; overflow-x: hidden; overflow-y: scroll; display: block;'";
 ++	}

#enddivregion

#divregion(改造ヶ所その5)

class Table 内の function toString()、最後のほう。
class Table 内の function toString()、最後のほう。~
ヘッダ、ボディにスクロール用のスタイルを書き込む。

  --	$string .= $this->wrap($part_string, $part);
  
  ++	if($part=='thead'){
  ++		$string .= $this->wrap($part_string, $part, $this->scrollh);
  ++	}else if($part=='tbody'){
  ++		$string .= $this->wrap($part_string, $part, $this->scrollb);
  ++	}else{
  ++		$string .= $this->wrap($part_string, $part);
  ++	}

#enddivregion


*メモ。 [#g04b4e89]
参考にしたサイト類。

**convert_html での表まわりの改造ネタ [#pc2637e5]
[[テーブル幅をパーセントで指定したい。 (pukiwiki_dev)>https://pukiwiki.osdn.jp/dev/?BugTrack/2368]]

**表のヘッダ固定に関するCSS情報 [#ac11baab]
&tbsend(https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm,ヘッダを固定してスクロールする方法(so-zou.jp),_noping);


技術的には、表の「ヘッダ」部分と「本体」部分とを別パーツにとし、それぞれにスタイル指定することで実現しています。~
詳しくは上述の「表のヘッダ固定に関するCSS情報」をご確認ください。


*コメント [#f205905a]
ご意見などがあれば。
#comment2(below)

お名前: