Skip to content

Commit c88bf41

Browse files
author
Alexander Haarer
committed
factor out gallery js code
1 parent ededad1 commit c88bf41

File tree

3 files changed

+108
-125
lines changed

3 files changed

+108
-125
lines changed

‎src/_includes/dev-viewpoint.md‎

Lines changed: 29 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -144,63 +144,44 @@ The Table shows the realization of exposed concepts.
144144

145145
{% assign examples = md_examples |concat: rhy_examples |concat: ea_examples %}
146146

147+
{% assign tools = examples | map: "Tool" | uniq | sort %}
148+
<div id="gallery-controls">
149+
150+
151+
<label for="tool-filter">Filter by tool:</label>
152+
<select id="tool-filter" onchange="onToolFilterChange()">
153+
<option value="All">All</option>
154+
{% for t in tools %}
155+
<option value="{{ t }}">{{ t }}</option>
156+
{% endfor %}
157+
</select>
158+
159+
{% if examples.size > 1 %}
160+
<button id="prev-btn" onclick="prevImage()" aria-label="Previous">◀</button>
161+
<button id="next-btn" onclick="nextImage()" aria-label="Next">▶</button>
162+
{% else %}
163+
<button id="prev-btn" style="display:none" onclick="prevImage()" aria-label="Previous">◀</button>
164+
<button id="next-btn" style="display:none" onclick="nextImage()" aria-label="Next">▶</button>
165+
{% endif %}
166+
167+
</div>
168+
{% if examples.size > 0 %}
147169
<div id="gallery-container">
148170
<img id="gallery-image"
149171
src="../../diagrams/{{ examples[0].File }}"
150172
alt="{{ examples[0].Name }}" />
151-
{% if examples.size > 1 %}
152-
<button id="prev-btn" onclick="prevImage()"><img src="../../assets/images/arrow-left.svg" alt="Previous" /></button>
153-
<button id="next-btn" onclick="nextImage()"><img src="../../assets/images/arrow-right.svg" alt="Next" /></button>
154-
{% endif %}
155173
</div>
156174

157175
<script>
158176
const images = [
159177
{% for ex in examples %}
160-
{ "src": "../../diagrams/{{ ex.File }}", "alt": "{{ ex.Name }}" },
178+
{ src: {{ "../../diagrams/" | append: ex.File | jsonify }}, alt: {{ ex.Name | jsonify }}, tool: {{ ex.Tool | jsonify }} },
161179
{% endfor %}
162180
];
181+
</script>
182+
<script src="{{ basePath }}/assets/js/examplegallery.js"></script>
183+
184+
{% else %}
185+
<p>No examples available.</p>
186+
{% endif %}
163187

164-
let currentIndex = 0;
165-
166-
function showImage(index) {
167-
const img = document.getElementById("gallery-image");
168-
img.src = images[index].src;
169-
img.alt = images[index].alt;
170-
}
171-
172-
function nextImage() {
173-
currentIndex = (currentIndex + 1) % images.length;
174-
showImage(currentIndex);
175-
}
176-
177-
function prevImage() {
178-
currentIndex = (currentIndex - 1 + images.length) % images.length;
179-
showImage(currentIndex);
180-
}
181-
182-
183-
let startX = 0;
184-
let endX = 0;
185-
const threshold = 50;
186-
187-
const gallery = document.getElementById("gallery-container");
188-
189-
gallery.addEventListener("touchstart", function (e) {
190-
startX = e.touches[0].clientX;
191-
}, { passive: true });
192-
193-
gallery.addEventListener("touchend", function (e) {
194-
endX = e.changedTouches[0].clientX;
195-
const diff = endX - startX;
196-
197-
if (Math.abs(diff) > threshold) {
198-
if (diff < 0) {
199-
nextImage();
200-
} else {
201-
prevImage();
202-
}
203-
}
204-
}, { passive: true });
205-
206-
</script>

‎src/_includes/viewpoint.md‎

Lines changed: 2 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -58,84 +58,9 @@
5858
{ src: {{ "../../diagrams/" | append: ex.File | jsonify }}, alt: {{ ex.Name | jsonify }}, tool: {{ ex.Tool | jsonify }} },
5959
{% endfor %}
6060
];
61-
62-
let filteredImages = images.slice();
63-
let currentIndex = 0;
64-
65-
function showImage(index) {
66-
const img = document.getElementById("gallery-image");
67-
if (!filteredImages.length) {
68-
img.src = "";
69-
img.alt = "No image available";
70-
document.getElementById("prev-btn").style.display = "none";
71-
document.getElementById("next-btn").style.display = "none";
72-
return;
73-
}
74-
currentIndex = (index + filteredImages.length) % filteredImages.length;
75-
img.src = filteredImages[currentIndex].src;
76-
img.alt = filteredImages[currentIndex].alt;
77-
const showNav = filteredImages.length > 1;
78-
document.getElementById("prev-btn").style.display = showNav ? "inline-block" : "none";
79-
document.getElementById("next-btn").style.display = showNav ? "inline-block" : "none";
80-
}
81-
82-
function nextImage() {
83-
if (!filteredImages.length) return;
84-
currentIndex = (currentIndex + 1) % filteredImages.length;
85-
showImage(currentIndex);
86-
}
87-
88-
function prevImage() {
89-
if (!filteredImages.length) return;
90-
currentIndex = (currentIndex - 1 + filteredImages.length) % filteredImages.length;
91-
showImage(currentIndex);
92-
}
93-
94-
function updateFilteredImages() {
95-
const select = document.getElementById("tool-filter");
96-
const tool = select.value;
97-
if (tool === "All") {
98-
filteredImages = images.slice();
99-
} else {
100-
filteredImages = images.filter(i => i.tool === tool);
101-
}
102-
currentIndex = 0;
103-
showImage(0);
104-
}
105-
106-
function onToolFilterChange() {
107-
updateFilteredImages();
108-
}
109-
110-
// Touch swipe support
111-
let startX = 0;
112-
let endX = 0;
113-
const threshold = 50;
114-
115-
const gallery = document.getElementById("gallery-container");
116-
117-
gallery.addEventListener("touchstart", function (e) {
118-
startX = e.touches[0].clientX;
119-
}, { passive: true });
120-
121-
gallery.addEventListener("touchend", function (e) {
122-
endX = e.changedTouches[0].clientX;
123-
const diff = endX - startX;
124-
125-
if (Math.abs(diff) > threshold) {
126-
if (diff < 0) {
127-
nextImage();
128-
} else {
129-
prevImage();
130-
}
131-
}
132-
}, { passive: true });
133-
134-
// Initialize
135-
document.addEventListener("DOMContentLoaded", function() {
136-
updateFilteredImages();
137-
});
13861
</script>
62+
<script src="{{ basePath }}/assets/js/examplegallery.js"></script>
63+
13964
{% else %}
14065
<p>No examples available.</p>
14166
{% endif %}

‎src/assets/js/examplegallery.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
2+
let filteredImages = images.slice();
3+
let currentIndex = 0;
4+
5+
function showImage(index) {
6+
const img = document.getElementById("gallery-image");
7+
if (!filteredImages.length) {
8+
img.src = "";
9+
img.alt = "No image available";
10+
document.getElementById("prev-btn").style.display = "none";
11+
document.getElementById("next-btn").style.display = "none";
12+
return;
13+
}
14+
currentIndex = (index + filteredImages.length) % filteredImages.length;
15+
img.src = filteredImages[currentIndex].src;
16+
img.alt = filteredImages[currentIndex].alt;
17+
const showNav = filteredImages.length > 1;
18+
document.getElementById("prev-btn").style.display = showNav ? "inline-block" : "none";
19+
document.getElementById("next-btn").style.display = showNav ? "inline-block" : "none";
20+
}
21+
22+
function nextImage() {
23+
if (!filteredImages.length) return;
24+
currentIndex = (currentIndex + 1) % filteredImages.length;
25+
showImage(currentIndex);
26+
}
27+
28+
function prevImage() {
29+
if (!filteredImages.length) return;
30+
currentIndex = (currentIndex - 1 + filteredImages.length) % filteredImages.length;
31+
showImage(currentIndex);
32+
}
33+
34+
function updateFilteredImages() {
35+
const select = document.getElementById("tool-filter");
36+
const tool = select.value;
37+
if (tool === "All") {
38+
filteredImages = images.slice();
39+
} else {
40+
filteredImages = images.filter(i => i.tool === tool);
41+
}
42+
currentIndex = 0;
43+
showImage(0);
44+
}
45+
46+
function onToolFilterChange() {
47+
updateFilteredImages();
48+
}
49+
50+
// Touch swipe support
51+
let startX = 0;
52+
let endX = 0;
53+
const threshold = 50;
54+
55+
const gallery = document.getElementById("gallery-container");
56+
57+
gallery.addEventListener("touchstart", function (e) {
58+
startX = e.touches[0].clientX;
59+
}, { passive: true });
60+
61+
gallery.addEventListener("touchend", function (e) {
62+
endX = e.changedTouches[0].clientX;
63+
const diff = endX - startX;
64+
65+
if (Math.abs(diff) > threshold) {
66+
if (diff < 0) {
67+
nextImage();
68+
} else {
69+
prevImage();
70+
}
71+
}
72+
}, { passive: true });
73+
74+
// Initialize
75+
document.addEventListener("DOMContentLoaded", function() {
76+
updateFilteredImages();
77+
});

0 commit comments

Comments
 (0)