「Tabulator 4.9.3 → 5.0.7」乗り換え(再アップグレード)、兼「声優世代表のおとも」、の少し続き(「on」の件)、と、二度あることは三度ある(再度ダウングレードするハメに)

ショボいネタ。

ほんとは一連の話の中で、内容的には「解決済み」とでもいうか、あえてこうやってネタとして独立させる価値はほとんどないものだったりする。

ここ数日でやってきた、発端のこれは、ワタシがかなり長い期間 Tabulator から離れていたので、「Tabulator 3.3.2 までを知っている状態から「新しいのを使おうと思い立った」」という話ね。これがまず始まり。ただし、「保守し続けていた 3.3.2 を使っていたものを新しい Tabulator に乗り換える」としたのではなくて、「3.3.2 で以前書いたものを真似して新しいものを書き、それを新しい Tabulator に乗り換える」としてきたので、「非互換性」の問題にはあまりブチ当たらないで済んだ、てこと。

3から5、という変更のインパクトは無論結構大きくて、4 へのアップグレードで必ず影響を受けるのが「Removal of jQuery」に関係するもので、これはワタシのこの一連の流れの中でインパクトを被った。そして、initialHeaderFilter の問題に遭遇してなければ、ワタシは今回の流れの中では「4から5へのアップグレード」では、Configuration Options の構造変更の影響を受けた程度、まぁ軽微だった。

ここで別の世界線を想像してみるに、たとえばこれである。これをアップグレードしようとしていたのなら、「Removal of jQuery」関係での影響の次に「Selection With Row Components」が影響を受けたはずである。The whole table event callbacks that you used to set on the table in the constructor object have now been replaced with an event subscription model.ね。

というわけで、元のβ世界線に戻り。声優世代表のおともで、テーブルイベントに反応するようなことをしでかしてやろう、と。ただそれだけのネタ。該当部分の構造だけ示せばこんな具合:

 1 <html>
 2 <head jang="ja">
 3 <meta charset="UTF-8">
 4 <!-- ... -->
 5 
 6 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/js/tabulator.min.js"></script>
 7 
 8 <!--
 9   Tabulator 本体は 4.0 から jquery 非依存。ワタシのコードはまずは csv parser として
10   jquery-csv を使いたいがために jquery を取り込んでいる。ので全体としても jquery が
11   使える前提のコードにしている。
12   -->
13 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
14 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>
15 
16 <!-- オレさまのデータ -->
17 <script type="text/javascript" src="actor_basinf_data.js"></script>
18 
19 </head>
20 <body>
21 <!-- ... -->
22 <div id="actor_basinf"></div>
23 <!-- ... -->
24 
25 <div> <!-- テーブルイベントに反応してこの div 内をダイナミックにごにょるのだよ -->
26 <span id="img_placeholder1"/>
27 <span id="img_placeholder0"/>
28 </div>
29 <script>
30 /* ... */
31 var table = new Tabulator("#actor_basinf", {
32     "height": "600px",
33 
34     "columnDefaults": {
35         /* ... */
36     ],
37     /* ... */
38 
39     /* ... */
40     "columns": [
41         /* ... */
42     ],
43     /* ... */
44 
45     "selectable": 1,  /* set 1 as the maximum number of rows, that is, single selecttion */
46 
47     "layout": "fitColumns",
48     "data": actor_basinf_data
49 });
50 /*
51  * (1)table#on は Tabulator 5.0 から。4.9 までについては
52  *        http://tabulator.info/docs/5.0/upgrade#callbacks
53  *    参照。
54  * (2)cell~もrow~もどちらについてもマウスポインタの出入りイベントについては
55  *    Over/Out が期待するもので Enter/Leave には入らない模様。
56  */
57 /*
58 table.on("cellMouseEnter", function (e, cell) {
59     console.log(cell);  // 通らないらしい
60 });
61 table.on("cellMouseLeave", function (e, cell) {
62     console.log(cell);  // 通らないらしい
63 });
64 table.on("cellMouseOver", function (e, cell) {
65     console.log(cell);
66 });
67 table.on("cellMouseOut", function (e, cell) {
68     console.log(cell);
69 });
70 */
71 function _rowimg_update (row, i, sel) {
72     /*
73      * マイごにょラー.
74      * img_placeholder1, img_placeholder0 の位置にあれやこれやする。
75      */
76 }
77 table.on("rowSelected", function (row) {
78     _rowimg_update(row, 0, true);
79 });
80 table.on("rowDeselected", function (row) {
81     _rowimg_update(row, 0, false);
82 });
83 table.on("rowMouseOver", function (e, row) {
84     _rowimg_update(row, 1, true);
85 });
86 table.on("rowMouseOut", function (e, row) {
87     _rowimg_update(row, 1, false);
88 });
89 </script>
90 </html>

「ごにょる」部分は(jQuery を駆使して)少し凝ったことをしてるが、まぁ実物を眺めてくれればいい: actor_basinf_v15.tar.bz2

個人的には「声優世代表のおとも」として、今回ので割と一気に使い勝手がよくなったかなと思ってる。ずっと MAL との紐付けをしたかったんだよね。やっと人物検索のやり方がわかったの。「参加アニメ一覧」だけの目的なら wikipedia より MAL のほうが使いやすいんだよね。

さて。initialHeaderFilter 問題の解決により 5.0.7 に乗り換えられて、table#on を使う、という物語としてはそれでいいのだけれど。

「.0」だからねぇ…、まぁ安定せんね。Column Group を使ってると、ヘッダクリックによるソートが出来ないことに気付いた。Movable Column の有効無効状態によらず、クリックするとドラッギング開始の状態に入ってしまう。4.9.3 に戻せばこれは直る。

つまり、Column Group を使っているワタシのケースでは、5.0.7 にもまだ乗り換えできない。今回やった「on」のコードを 4.9.3 にダウングレードする作業はこれは簡単で、上の 5.0 向けを 4.9 向けに変えるのはこれだけ:

 1 var table = new Tabulator("#actor_basinf", {
 2     /* ... */
 3 
 4     /*
 5      * (1)table#on は Tabulator 5.0 から。4.9 までについては
 6      *        http://tabulator.info/docs/5.0/upgrade#callbacks
 7      *    参照。
 8      * (2)cell~もrow~もどちらについてもマウスポインタの出入りイベントについては
 9      *    Over/Out が期待するもので Enter/Leave には入らない模様。
10      */
11     "rowSelected": function (row) {
12         _rowimg_update(row, 0, true);
13     },
14     "rowDeselected": function (row) {
15         _rowimg_update(row, 0, false);
16     },
17     "rowMouseOver": function (e, row) {
18         _rowimg_update(row, 1, true);
19     },
20     "rowMouseOut": function (e, row) {
21         _rowimg_update(row, 1, false);
22     },
23 });

この措置をした「_ver16」は貼り付けない。バージョンアップ版は、別のネタを書く際に。



Related Posts