Skip to content

Commit c563dca

Browse files
purna135purna135
committed
Add link straight to an event in the events page
1 parent 5724efc commit c563dca

File tree

2 files changed

+136
-5
lines changed

2 files changed

+136
-5
lines changed

‎layouts/_default/events.html‎

Lines changed: 83 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,13 @@ <h2>Upcoming Events</h2>
3838
{{ $upcoming_events := where $events "eventType" "upcoming"}}
3939
{{ if $upcoming_events }}
4040
{{ range $event := $upcoming_events }}
41-
<article class="event__card {{ $event.eventType }}">
41+
{{ $title := index (split $event.title ":") 0 }}
42+
{{ $eventID := replaceRE "[^a-zA-Z0-9_-]" "" (lower (replace $title " " "_"))}}
43+
<article class="event__card {{ $event.eventType }}" id="{{ $eventID }}">
4244
<div class="event__header">
4345
<div class="event__wrapper">
4446
<h4>{{ $event.dataTime | markdownify | emojify }}</h4>
45-
<h3>{{ $event.title | markdownify | emojify }}</h3>
47+
<a href="#{{ $eventID }}"><h3>{{ $event.title | markdownify | emojify }}</h3></a>
4648
<em>{{ $event.subtitle | markdownify | emojify }}</em><br>
4749
<span><i class="uil uil-map-marker"></i>{{ $event.place | markdownify | emojify }}</span>
4850
</div>
@@ -90,6 +92,10 @@ <h3>{{ $event.title | markdownify | emojify }}</h3>
9092
{{ with $event.readMoreURL }}
9193
<a href="{{ $event.readMoreURL }}" target="_blank" class="btn event__btn"> Discourse Post </a>
9294
{{ end }}
95+
<button class="btn event__btn copy_link_btn" title="Copy link to this event" onclick="copyToClipboard(this)" data-url="#{{ $eventID }}">
96+
<span id="copyIcon"><i class="uil uil-link"></i></span>
97+
<span class="copy_link_btn_text">Copied</span>
98+
</button>
9399
</div>
94100
</article>
95101
{{ end }}
@@ -105,11 +111,13 @@ <h2>Past Events</h2>
105111
{{ $past_events := where $events "eventType" "past"}}
106112
{{ if $past_events }}
107113
{{ range $event := $past_events }}
108-
<article class="event__card {{ $event.eventType }}">
114+
{{ $title := index (split $event.title ":") 0 }}
115+
{{ $eventID := replaceRE "[^a-zA-Z0-9_-]" "" (lower (replace $title " " "_"))}}
116+
<article class="event__card {{ $event.eventType }}" id="{{ $eventID }}">
109117
<div class="event__header">
110118
<div class="event__wrapper">
111119
<h4>{{ $event.dataTime | markdownify | emojify }}</h4>
112-
<h3>{{ $event.title | markdownify | emojify }}</h3>
120+
<a href="#{{ $eventID }}"><h3>{{ $event.title | markdownify | emojify }}</h3></a>
113121
<em>{{ $event.subtitle | markdownify | emojify }}</em><br>
114122
<span><i class="uil uil-map-marker"></i>{{ $event.place | markdownify | emojify }}</span>
115123
</div>
@@ -153,6 +161,10 @@ <h3>{{ $event.title | markdownify | emojify }}</h3>
153161
{{ with $event.readMoreURL }}
154162
<a href="{{ $event.readMoreURL }}" target="_blank" class="btn event__btn"> Discourse Post </a>
155163
{{ end }}
164+
<button class="btn event__btn copy_link_btn" title="Copy link to this event" onclick="copyToClipboard(this)" data-url="#{{ $eventID }}">
165+
<span id="copyIcon"><i class="uil uil-link"></i></span>
166+
<span class="copy_link_btn_text">Copied</span>
167+
</button>
156168
</div>
157169
</article>
158170
{{ end }}
@@ -241,4 +253,70 @@ <h2>Coming soon...</h2>
241253
});
242254
}
243255
</script>
244-
{{ end }}
256+
<script>
257+
window.onload = function() {
258+
// Check if the URL contains a hash
259+
if (window.location.hash) {
260+
var targetId = window.location.hash.substring(1);
261+
var headerHeight = document.querySelector('.nav').offsetHeight + 20;
262+
var targetOffset = document.getElementById(targetId).offsetTop - headerHeight;
263+
264+
// Scroll to the target element with smooth behavior
265+
window.scrollTo({
266+
top: targetOffset,
267+
behavior: 'smooth'
268+
});
269+
}
270+
};
271+
272+
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
273+
anchor.addEventListener('click', function(event) {
274+
event.preventDefault();
275+
var targetId = this.getAttribute('href').substring(1);
276+
var headerHeight = document.querySelector('.nav').offsetHeight + 20;
277+
var targetOffset = document.getElementById(targetId).offsetTop - headerHeight;
278+
279+
window.scrollTo({
280+
top: targetOffset,
281+
behavior: 'smooth'
282+
});
283+
history.pushState(null, null, '#' + targetId);
284+
});
285+
});
286+
287+
function copyToClipboard(button) {
288+
// Get the URL from the button's data-url attribute
289+
var href = button.getAttribute('data-url');
290+
var url = window.location.origin + window.location.pathname + href;
291+
292+
// Create a temporary input element
293+
var tempInput = document.createElement('input');
294+
tempInput.setAttribute('value', url);
295+
document.body.appendChild(tempInput);
296+
297+
// Select the input element
298+
tempInput.select();
299+
tempInput.setSelectionRange(0, 99999); // For mobile devices
300+
301+
// Copy the selected text to the clipboard
302+
document.execCommand('copy');
303+
304+
// Remove the temporary input element
305+
document.body.removeChild(tempInput);
306+
307+
// Change the icon to a tick symbol
308+
var icon = button.querySelector('i');
309+
icon.classList.remove('uil-link');
310+
icon.classList.add('uil-check');
311+
312+
// Set the title attribute to "Link copied"
313+
button.setAttribute('title', 'Link copied');
314+
button.classList.add('clicked');
315+
316+
setTimeout(function() {
317+
button.classList.remove('clicked');
318+
}, 1000);
319+
}
320+
</script>
321+
322+
{{ end }}

‎static/css/events.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,59 @@
154154
background-color: var(--color-danger);
155155
}
156156

157+
.copy_link_btn {
158+
padding: 0.4rem 0.4rem;
159+
position: relative;
160+
}
161+
162+
.copy_link_btn.clicked {
163+
animation: vibration 0.3s linear;
164+
}
165+
166+
@keyframes vibration {
167+
0% {
168+
transform: translateX(0);
169+
}
170+
25% {
171+
transform: translateX(-1px) rotate(-1deg);
172+
}
173+
50% {
174+
transform: translateX(1px) rotate(1deg);
175+
}
176+
75% {
177+
transform: translateX(-1px) rotate(-1deg);
178+
}
179+
100% {
180+
transform: translateX(0);
181+
}
182+
}
183+
184+
.copy_link_btn_text {
185+
position: absolute;
186+
top: 0%;
187+
left: 50%;
188+
transform: translate(-50%, -80%);
189+
opacity: 0;
190+
}
191+
192+
.copy_link_btn.clicked .copy_link_btn_text {
193+
animation: moveUp 1s ease-in;
194+
}
195+
196+
@keyframes moveUp {
197+
0% {
198+
opacity: 1;
199+
transform: translate(-50%, -80%);
200+
}
201+
50% {
202+
transform: translate(-50%, -130%);
203+
}
204+
100% {
205+
transform: translate(-50%, -180%);
206+
opacity: 0;
207+
}
208+
}
209+
157210

158211
/* =================== events_asid============== */
159212

0 commit comments

Comments
 (0)