Skip to content

Commit 179ae9e

Browse files
ymyzkymyzk
committed
Simplify logic for modal
1 parent 9f6a2b6 commit 179ae9e

File tree

3 files changed

+29
-111
lines changed

3 files changed

+29
-111
lines changed

‎2024/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -473,7 +473,7 @@ footer {
473473
cursor: pointer;
474474
opacity: 0.8;
475475
}
476-
#detail_keynote, #detail_talk1, #detail_talk2, #detail_talk3, #detail_talk4, #detail_talk5, #detail_talk6, #detail_talk7, #detail_workshop1, #detail_workshop2, #detail_workshop3 {
476+
.event-detail-talk {
477477
display: none;
478478
}
479479
#event_detail .name {

‎2024/index.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ <h3>ノーコードデータ分析ツールで体験する時系列データ分
353353
<div id="event_detail">
354354
<div class="flame">
355355
<div id="detail_close">×</div>
356-
<div id="detail_keynote">
356+
<div class="event-detail-talk" id="detail_keynote">
357357
<div class="keynote label">キーノート</div>
358358
<p class="time2">10:25～11:15</p>
359359
<h4>キーノート</h4>
@@ -365,12 +365,12 @@ <h4>キーノート</h4>
365365
</div>
366366
</div>
367367
</div>
368-
<div id="detail_talk1">
368+
<div class="event-detail-talk" id="detail_talk_1">
369369
<div class="talk label">トーク</div>
370370
<p class="time2">11:30～12:00<br>（発表20分・質疑応答5分・機材準備5分）</p>
371371
<h4>Python開発の変遷をPythonプロフェッショナルプログラミングの改定の歴史から知る</h4>
372372
<p class="name">鈴木 たかのり</p>
373-
<div class="scroll-auto detail-size">
373+
<div class="scroll-auto detail-size">
374374
私が所属するビープラウドが執筆する「Pythonプロフェッショナルプログラミング」は2012年の初版から改定を繰り返し、2024年に第4版が出版されました。<br><br>
375375
本書には、ビープラウドがPythonでの開発を行う上での、当時のノウハウがまとめられています。版を重ねる中で、書籍からさまざまな内容が削除、変更、追加されています。<br><br>
376376
本トークでは書籍の改定によって変更された内容を紹介しながら、Pythonでのチーム開発の歴史や進歩、変わったもの変わらないものについて見ていき、自身のプロジェクトに活用できる内容を知ることができます。
@@ -386,7 +386,7 @@ <h4>Python開発の変遷をPythonプロフェッショナルプログラミン
386386
website: slides.takanory.net<br>
387387
</div>
388388
</div>
389-
<div id="detail_talk2">
389+
<div class="event-detail-talk" id="detail_talk_2">
390390
<div class="talk label">トーク</div>
391391
<p class="time2">12:00～12:30<br>（発表20分・質疑応答5分・機材準備5分）</p>
392392
<h4>pytestでRust製CLIをe2eテストしてみよう</h4>
@@ -409,7 +409,7 @@ <h4>pytestでRust製CLIをe2eテストしてみよう</h4>
409409
<a href="https://github.com/attakei" target="_blank">https://github.com/attakei</a><br>
410410
</div>
411411
</div>
412-
<div id="detail_talk3">
412+
<div class="event-detail-talk" id="detail_talk_3">
413413
<div class="talk label">トーク</div>
414414
<p class="time2">14:00～14:30<br>（発表20分・質疑応答5分・機材準備5分）</p>
415415
<h4>Pythonはどうやってlen関数で長さを手にいれているの？</h4>
@@ -421,7 +421,7 @@ <h4>Pythonはどうやってlen関数で長さを手にいれているの？</h4
421421
<br>株式会社ビープラウド所属。<br>一般社団法人PyCon JP Association会計理事。<br>2003年にZope2をきっかけにPythonを使い始めた。最近では、Python Boot CampでイベントでPython講師を務め、日本各地でPythonを広める活動を行っている。Python mini Hack-a-thonやSphinx-users.jpなどPython関連イベント運営のかたわら、カンファレンスや書籍、OSS開発を通じて技術情報を発信している。<br><br>著書／訳書：『エキスパートPythonプログラミング 改訂4版（2023 アスキードワンゴ）』『独学コンピューターサイエンティスト（2022年 日経BP社）』『Sphinxをはじめよう第3版（2022 オライリー・ジャパン）』『自走プログラマー（2020年 技術評論社刊）』『独学プログラマー（2018 日経BP社刊）
422422
</div>
423423
</div>
424-
<div id="detail_talk4">
424+
<div class="event-detail-talk" id="detail_talk_4">
425425
<div class="talk label">トーク</div>
426426
<p class="time2">14:30～15:00<br>（発表20分・質疑応答5分・機材準備5分）</p>
427427
<h4>Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた</h4>
@@ -449,7 +449,7 @@ <h4>Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してき
449449
</div>
450450
</div>
451451

452-
<div id="detail_talk5">
452+
<div class="event-detail-talk" id="detail_talk_5">
453453
<div class="talk label">トーク</div>
454454
<p class="time2">15:00～15:30<br>（発表20分・質疑応答5分・機材準備5分）</p>
455455
<h4>Google Colaboratoryで試すVLM</h4>
@@ -467,7 +467,7 @@ <h4>Google Colaboratoryで試すVLM</h4>
467467
</div>
468468
</div>
469469

470-
<div id="detail_talk6">
470+
<div class="event-detail-talk" id="detail_talk_6">
471471
<div class="talk label">トーク</div>
472472
<p class="time2">15:45～16:15<br>（発表20分・質疑応答5分・機材準備5分）</p>
473473
<h4>asgirefのクラスasgiref.local.Localは何のためにあるのか？</h4>
@@ -489,7 +489,7 @@ <h4>asgirefのクラスasgiref.local.Localは何のためにあるのか？</h4>
489489
</div>
490490
</div>
491491

492-
<div id="detail_talk7">
492+
<div class="event-detail-talk" id="detail_talk_7">
493493
<div class="talk label">トーク</div>
494494
<p class="time2">16:15～16:45<br>（発表20分・質疑応答5分・機材準備5分）</p>
495495
<h4>ReflexによるPython onlyでの高速なWebアプリケーションプロトタイピング</h4>
@@ -502,7 +502,7 @@ <h4>ReflexによるPython onlyでの高速なWebアプリケーションプロ
502502
</div>
503503
</div>
504504

505-
<div id="detail_workshop1">
505+
<div class="event-detail-talk" id="detail_workshop_1">
506506
<div class="workshop label">ワークショップ</div>
507507
<p class="time2">11:30～12:30</p>
508508
<h4>Streamlitで作るRAGチャットアプリ</h4>
@@ -517,7 +517,7 @@ <h4>Streamlitで作るRAGチャットアプリ</h4>
517517
</div>
518518
</div>
519519

520-
<div id="detail_workshop2">
520+
<div class="event-detail-talk" id="detail_workshop_2">
521521
<div class="workshop label">ワークショップ</div>
522522
<p class="time2">14:00～15:30</p>
523523
<h4>pytestを使ったテスト駆動開発を体験してみよう</h4>
@@ -542,7 +542,7 @@ <h4>pytestを使ったテスト駆動開発を体験してみよう</h4>
542542
</div>
543543
</div>
544544

545-
<div id="detail_workshop3">
545+
<div class="event-detail-talk" id="detail_workshop_3">
546546
<div class="workshop label">ワークショップ</div>
547547
<p class="time2">15:45～16:45</p>
548548
<h4>ノーコードデータ分析ツールで体験する時系列データ分析超入門</h4>

‎2024/index.js

+16-98
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,17 @@
11
/* イベント詳細の表示切替 */
2-
const event_detail = document.getElementById('event_detail');
3-
const detail_close = document.getElementById('detail_close');
4-
5-
detail_close.addEventListener('click', () => {
6-
event_detail.style.display="none";
7-
detail_keynote.style.display="none";
8-
detail_talk1.style.display="none";
9-
detail_talk2.style.display="none";
10-
detail_talk3.style.display="none";
11-
detail_talk4.style.display="none";
12-
detail_talk5.style.display="none";
13-
detail_talk6.style.display="none";
14-
detail_talk7.style.display="none";
15-
detail_workshop1.style.display="none";
16-
detail_workshop2.style.display="none";
17-
detail_workshop3.style.display="none";
18-
});
19-
20-
const keynote = document.getElementById('keynote');
21-
const detail_keynote =document.getElementById('detail_keynote');
22-
23-
const talk_1 = document.getElementById('talk_1');
24-
const detail_talk1 =document.getElementById('detail_talk1');
25-
const talk_2 = document.getElementById('talk_2');
26-
const detail_talk2 =document.getElementById('detail_talk2');
27-
const talk_3 = document.getElementById('talk_3');
28-
const detail_talk3 =document.getElementById('detail_talk3');
29-
const talk_4 = document.getElementById('talk_4');
30-
const detail_talk4 =document.getElementById('detail_talk4');
31-
const talk_5 = document.getElementById('talk_5');
32-
const detail_talk5 =document.getElementById('detail_talk5');
33-
const talk_6 = document.getElementById('talk_6');
34-
const detail_talk6 =document.getElementById('detail_talk6');
35-
const talk_7 = document.getElementById('talk_7');
36-
const detail_talk7 =document.getElementById('detail_talk7');
37-
38-
const workshop_1 = document.getElementById('workshop_1');
39-
const detail_workshop1 = document.getElementById('detail_workshop1');
40-
const workshop_2 = document.getElementById('workshop_2');
41-
const detail_workshop2 = document.getElementById('detail_workshop2');
42-
const workshop_3 = document.getElementById('workshop_3');
43-
const detail_workshop3 = document.getElementById('detail_workshop3');
44-
45-
keynote.addEventListener('click', () => {
46-
event_detail.style.display="block";
47-
detail_keynote.style.display="block";
48-
});
49-
50-
talk_1.addEventListener('click', () => {
51-
event_detail.style.display="block";
52-
detail_talk1.style.display="block";
53-
});
54-
55-
talk_2.addEventListener('click', () => {
56-
event_detail.style.display="block";
57-
detail_talk2.style.display="block";
58-
});
59-
60-
talk_3.addEventListener('click', () => {
61-
event_detail.style.display="block";
62-
detail_talk3.style.display="block";
63-
});
64-
65-
talk_4.addEventListener('click', () => {
66-
event_detail.style.display="block";
67-
detail_talk4.style.display="block";
68-
});
69-
70-
talk_5.addEventListener('click', () => {
71-
event_detail.style.display="block";
72-
detail_talk5.style.display="block";
73-
});
74-
75-
talk_6.addEventListener('click', () => {
76-
event_detail.style.display="block";
77-
detail_talk6.style.display="block";
78-
});
79-
80-
talk_7.addEventListener('click', () => {
81-
event_detail.style.display="block";
82-
detail_talk7.style.display="block";
83-
});
84-
85-
workshop_1.addEventListener('click', () => {
86-
event_detail.style.display="block";
87-
detail_workshop1.style.display="block";
88-
89-
});
90-
91-
workshop_2.addEventListener('click', () => {
92-
event_detail.style.display="block";
93-
detail_workshop2.style.display="block";
94-
});
95-
96-
workshop_3.addEventListener('click', () => {
97-
event_detail.style.display="block";
98-
detail_workshop3.style.display="block";
99-
});
2+
const event_detail = document.getElementById("event_detail");
3+
4+
document.getElementById("detail_close").addEventListener("click", () => {
5+
event_detail.style.display = "none";
6+
for (const talk of document.querySelectorAll(".event-detail-talk")) {
7+
talk.style.display = "none";
8+
}
9+
});
10+
11+
for (const event_box of document.querySelectorAll(".event-box")) {
12+
event_box.addEventListener("click", (e) => {
13+
const id = `detail_${e.currentTarget.id}`;
14+
event_detail.style.display = "block";
15+
document.getElementById(id).style.display = "block";
16+
});
17+
}

0 commit comments

Comments
 (0)