トップ > riktar/jkanban: trello みたいなかんばんボードを簡単に作れる js ライブラリの備忘録

riktar/jkanban: trello みたいなかんばんボードを簡単に作れる js ライブラリの備忘録

かんばん(Kanban) とは、1950 年代にトヨタで開発されたスケジューリングシステムの一つである。
しかし、かんばん方式として改めて定義されたのは 2007 年のことである。

まず初めに

GitHub - riktar/jkanban: Vanilla Javascript plugin for manage kanban boards

プロジェクトで触った時に出くわしたちょっと困ったところを備忘録としてただ書くだけの記事です。
導入とか基本的な使い方は他の記事の方が詳しいです。
同じところを迷った人が参考にしてくれると嬉しいな。

素直にかんばんアプリ使えばいいのに簡易的にこの機能欲しがる人って結構多いんですよね

boards プロパティに渡すのは連想配列ではなく配列

初期表示したい要素を流し込むのに用いる boards プロパティですが、
ここに渡すのは連想配列ではなく配列でないといけません。

配列, 連想配列が全て順序付き連想配列として定義されてる言語もありますが、
基本これらは別の物です。

D&D を拒否したいボードは dropEl コールバックで return false する

他のボードから要素を D&D させたくないとか、もしくは他のボードに要素を D&D させたくない、といった状況があるかと思います。

そういった場合に使えるオプションの一つに dropEl プロパティがありまして、
こちらは要素のドロップ時に call されるコールバックを指定できます。
そして dropEl コールバックの中で return false すれば D&D がキャンセルできます。

下記 issue でそういった実装に至りました。
普通に便利だし usage に書いたらいいのに
Cancel Drop after async function · Issue #50 · riktar/jkanban · GitHub

dragTo プロパティはホワイトリスト形式、dropEl の return false はブラックリスト形式

dragTo プロパティにボードの ID を指定すると、指定したボードにだけ要素を D&D できるようになります。
逆に言えば移動させたくないボード以外を指定してブラックリストみたいにしそうですが、
仕様変更でボードの数が増減した時等にあんまり良くないので素直に dropEl + return false しましょう。

dropEl コールバックに渡される引数

el: D&D した要素そのもの(div.kanban-item)
target: 移動先のボード(main.kanban-drag)
source: 移動元のコンテナ(main.kanban-drag)
sibling: el の下の兄弟要素(div.kanban-item)

sibling に関しては兄弟要素がなければ普通に null が渡されます。

要素に渡した id は data-eid 属性として要素に付与される

[
    {
        "id"    : "board-id-1",
        "title" : "Board Title",
        "class" : "class1,class2,...",
        "dragTo": ['another-board-id',...],
        "item"  : [
            {
                "id"    : "item-id-1",        // ← これ
                "title" : "Item 1"
                "class" : ["myClass",...]
            },
            {
                "id"    : "item-id-2",        // ← これ
                "title" : "Item 2"
            }
        ]
    },
]

上記の例で言えば、
"id": "item-id-1" を要素に渡すとして、

<div class="kanban-item" date-eid="item-id-1">

のように付与されます。

特にバックエンドとの連携で ID をそのまんま渡すことも少なくないので、
各コールバックで data-eid を利用するシーンもあるんじゃないかと思います。

replaceElement(id, element) 等の引数に用いられてる id とは data-eid のこと

つまり、要素に渡した ID のことです。

boards.{board_index}.item.{item_index} に渡したプロパティは dataset に入る

riktar/jkanban の Usage > About custom properties の項にも記述されていることです。

[
    {
        "id"    : "board-id-1",
        "title" : "Board Title",
        "class" : "class1,class2,...",
        "dragTo": ['another-board-id',...],
        "item"  : [
            {
                "id"      : "item-id-1",
                "title"   : "Item 1",
                "username": "username1"  // これが data-username="username1" になる
            },
        ]
    },
]

要素にフラグ等を付与して細かいハンドリングをしたい時に有用です。

nil

思ったより融通の利くライブラリで割と好みです。
要素の見た目を詳細に定義したかったら title に詰め込まなきゃいけないのだけ不満。