/
example3.html
236 lines (217 loc) · 7.71 KB
/
example3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jKanban サンプル (3)</title>
<!-- jKanban の .css ファイルを読み込む -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jkanban@1.3.1/dist/jkanban.min.css">
<!-- jKanban の .js ファイルを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/jkanban@1.3.1/dist/jkanban.min.js"></script>
<style>
/* カードの設定 */
.kanban-item .text-red {
color: crimson;
}
.kanban-item .text-bold {
font-weight: bold;
}
.kanban-item.orange {
color: white;
background-color: darkorange;
}
.kanban-item .item-body img {
width: 100%;
}
.kanban-item .item-body {
max-height: 240px;
overflow: hidden;
}
/* メッセージ表示欄 */
#show-message {
margin: 0 1% 1rem 1%;
padding: 0.5rem;
color: white;
background-color: mediumturquoise;
}
/* 完了したカードのテキストを灰色にして取り消し線を入れる */
.kanban-item.done {
color: gray;
text-decoration: line-through;
background-color: whitesmoke;
}
/* 完了したカードの画像を75%モノクロにして薄く表示する */
.kanban-item.done img {
filter: grayscale(75%);
opacity: 0.5;
}
/* カラムのタイトルの色 */
.kanban-board header {
color: white;
background-color: gray;
}
.kanban-board header.red {
background-color: crimson;
}
.kanban-board header.blue {
background-color: royalblue;
}
.kanban-board header.green {
background-color: green;
}
</style>
</head>
<body>
<!-- ここにメッセージが表示される -->
<div id="show-message"> </div>
<!-- ここにカンバンが表示される -->
<div id="kanban-canvas"></div>
<script>
// カンバンに表示されるカラムやカードを定義
const dataContent = [
{
"id": "column-id-1",
"title": "準備中",
"class": "red,waiting",
"item": [
{
"id": "item-id-1",
"title": "AAA",
"class": "todo"
},
{
"id": "item-id-2",
"title": "BBB",
"class": "todo,orange",
}
]
},
{
"id": "column-id-2",
"title": "実行中",
"class": "blue,in-progress",
"item": [
{
"id": "item-id-3",
"title": "<div class='item-title'>CCC</div><div class='item-body'><img src='https://i.imgur.com/b1dGytP.jpeg' /></div>",
"class": "todo"
}
]
},
{
"id": "column-id-3",
"title": "完了",
"class": "green,completed",
"item": [
{
"id": "item-id-4",
"title": "DDD",
"class": "done"
},
{
"id": "item-id-5",
"title": "EEE",
"class": "done"
}
]
}
];
// ここで jKanban を実行する
const kanban = new jKanban({
element: '#kanban-canvas', // カンバンを表示する場所のID
boards: dataContent, // カンバンに表示されるカラムやカードのデータ
gutter: '16px', // カンバンの余白
widthBoard: '250px', // カラムの幅 (responsivePercentageの「true」設定により無視される)
responsivePercentage: true, // trueを選択時はカラム幅は％で指定され、gutterとwidthBoardの設定は不要
dragItems: true, // trueを選択時はカードをドラッグ可能
dragBoards: true, // カラムをドラッグ可能にするかどうか
// コールバック
click: function (el) {
// カードが左クリックされた時に実行
onKanbanItemClicked(el);
},
context: function (el, event) {
// カードが右クリックされた時に実行
},
dragEl: function (el, source) {
// カードのドラッグが始まった時に実行
},
dragendEl: function (el) {
// カードがドラッグが終わった時に実行
},
dropEl: function (el, target, source, sibling) {
// カードがドロップされたときに実行
onKanbanItemDropped(el, target, source, sibling);
},
dragBoard: function (el, source) {
// カラムのドラッグを開始した時に実行
},
dragendBoard: function (el) {
// カラムのドラッグが終わった時に実行
},
buttonClick: function(el, boardId) {
// ボタンがクリックされた時に実行
}
});
function onKanbanItemClicked(el) {
showMessage('カード「' + el.innerText + '」が左クリックされました。');
}
function onKanbanItemDropped(el, target, source, sibling) {
// 移動元カラムのタイトル
const sourceTitle = source.parentNode.querySelector('header').innerText;
// 移動元カラムのID
const sourceId = source.parentNode.dataset.id;
// 移動先カラムのタイトル
const targetTitle = target.parentNode.querySelector('header').innerText;
// 移動先カラムのID
const targetId = target.parentNode.dataset.id;
// 同じカラム内の移動か、それとも異なるカラム間の移動かを判別
const sameColumn = (sourceId === targetId) ? true : false;
// カラム内 or カラム間の移動によってメッセージを変える
const alertMsg = (sameColumn) ?
'カード「' + el.innerText + '」が、カラム『' + sourceTitle + '』内で移動しました。':
'カード「' + el.innerText + '」が、カラム『' + sourceTitle + '』からカラム『' + targetTitle + '』へ移動しました。';
// メッセージを表示
showMessage(alertMsg);
// 異なるカラム間の移動なおかつ移動先カラムが「完了」の場合
// カードのステータスを「done」にする。
// 異なるカラム間の移動なおかつ移動先カラムが「完了」以外の場合
// カードのステータスを「todo」にする。
if (!sameColumn && targetTitle === '完了') {
setKanbanItemStatus(el, 'done');
} else if (!sameColumn && targetTitle !== '完了') {
setKanbanItemStatus(el, 'todo');
}
}
function setKanbanItemStatus(el, status) {
// ステータスが「done」の場合は
// カードの「todo」クラスを「done」に変更する。
if (status === 'done') {
el.classList.remove('todo');
el.classList.add('done');
// ステータスが「done」以外の場合は
// カードの「done」クラスを「todo」に変更する。
} else {
el.classList.remove('done');
el.classList.add('todo');
}
}
function showMessage(msg) {
document.getElementById('show-message').innerHTML = msg;
}
// カードに data-class= 属性が設定されていたら、
// その値を取得してクラス名に追加する。
// 今回はカンマ区切りで複数が設定されているので、
// まずは配列に変換してから処理する。
document.querySelectorAll('.kanban-item').forEach(item => {
if (item.dataset.class) {
const arrayClass = item.dataset.class.split(',');
arrayClass.forEach(className => {
item.classList.add(className);
});
}
});
</script>
</body>
</html>