Skip to content

Commit 69e667c

Browse files
JesperDramschJesperDramsch
committed
refactor: use new ux component
1 parent 79c437a commit 69e667c

File tree

1 file changed

+37
-153
lines changed

1 file changed

+37
-153
lines changed

‎_layouts/summary.html‎

Lines changed: 37 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -133,123 +133,26 @@ <h1>
133133
{% for conf in confs %}
134134
{% assign subs = conf.sub | split: "," %}
135135
<div id="{{conf.conference | slugify: "latin"}}-{{conf.year}}"
136-
class="ConfItem {% for sub in subs %} {{sub | strip}}-conf {% endfor %}">
137-
<div class="row conf-row">
138-
<div class="col-6">
139-
<span class="conf-title">
140-
<a title="Deadline Details"
141-
href="{{site.baseurl}}/conference/{{conf.conference | slugify: "latin"}}-{{conf.year}}/">{{conf.conference}} {{conf.year}}</a>
142-
</span>
143-
<span class="conf-title-small">
144-
<a title="Deadline Details"
145-
href="{{site.baseurl}}/conference/{{conf.conference | slugify: "latin"}}-{{conf.year}}/">{{conf.conference}} '{{conf.year |
146-
slice: -2, 3}}</a>
147-
</span>
148-
<span class="conf-title-icon">
149-
<a title="Conference Website" href="{{conf.link}}" target="_blank"><img src="/static/img/203-earth.svg"
150-
class="badge-link" alt="Link to Conference Website" width="16" height="16" /></a>
151-
&ZeroWidthSpace;
152-
</span>
153-
{% if conf.cfp_link %}
154-
<span class="conf-title-icon">
155-
<a title="Call for Participation for {{conf.conference}}" href="{{conf.cfp_link}}" target="_blank"><img
156-
src="/static/img/035-file-text.svg" class="badge-link"
157-
alt="Link to Call for Participation for {{conf.conference}}" width="16" height="16" /></a>
158-
&ZeroWidthSpace;
159-
</span>
160-
{% endif %}
161-
{% if conf.finaid %}
162-
<span class="conf-title-icon">
163-
<a title="Financial Aid from {{conf.conference}}" href="{{conf.finaid}}" target="_blank"><img
164-
src="/static/img/066-lifebuoy.svg" class="badge-link" alt="Link to Sponsorship page of {{conf.conference}}"
165-
width="16" height="16" /></a>
166-
&ZeroWidthSpace;
167-
</span>
168-
{% endif %}
169-
{% if conf.sponsor %}
170-
<span class="conf-title-icon">
171-
<a title="Sponsorship Opportunity for {{conf.conference}}" href="{{conf.sponsor}}" target="_blank"><img
172-
src="/static/img/060-coin-dollar.svg" class="badge-link" alt="Link to Sponsorship page of {{conf.conference}}"
173-
width="16" height="16" /></a>
174-
&ZeroWidthSpace;
175-
</span>
176-
{% endif %}
177-
{% if conf.mastodon %}
178-
<span class="conf-title-icon">
179-
<a title="Mastodon for {{conf.conference}}" href="{{conf.mastodon}}" target="_blank"><img
180-
src="/static/img/407-mastodon.svg" class="badge-link" alt="Link to Conference Mastodon" width="16"
181-
height="16" /></a>
182-
&ZeroWidthSpace;
183-
</span>
184-
{% elsif conf.twitter %}
185-
<span class="conf-title-icon">
186-
<a title="Twitter for {{conf.conference}}" href="https://twitter.com/{{conf.twitter}}" target="_blank"><img
187-
src="/static/img/407-twitter.svg" class="badge-link" alt="Link to Conference Twitter" width="16"
188-
height="16" /></a>
189-
&ZeroWidthSpace;
190-
</span>
191-
{% endif %}
192-
</div>
193-
<div class="col-6">
194-
<span class="countdown-display conf-timer"
195-
data-deadline="{% if conf.cfp_ext %}{{ conf.cfp_ext }}{% else %}{{ conf.cfp }}{% endif %}"
196-
data-timezone="{% if conf.timezone %}{{ conf.timezone }}{% else %}UTC-12{% endif %}">
197-
{% if conf.cfp == "TBA" or conf.cfp == "Cancelled" or conf.cfp == "None" %}{{ conf.cfp }}{% endif %}
198-
</span>
199-
<span class="countdown-display countdown-small conf-timer"
200-
data-deadline="{% if conf.cfp_ext %}{{ conf.cfp_ext }}{% else %}{{ conf.cfp }}{% endif %}"
201-
data-timezone="{% if conf.timezone %}{{ conf.timezone }}{% else %}UTC-12{% endif %}">
202-
{% if conf.cfp == "TBA" or conf.cfp == "Cancelled" or conf.cfp == "None" %}{{ conf.cfp }}{% endif %}
203-
</span>
204-
</div>
205-
</div>
206-
<div class="row">
207-
<div class="col-12 col-sm-6">
208-
<div class="meta">
209-
210-
<span class="conf-date">{%- translate_file dates/pretty_dates.html start=conf.start end=conf.end -%}.</span>
211-
<span class="conf-place">
212-
{% if conf.place == "Online" %}
213-
<a href="#">{{conf.place}}</a>
214-
{% else %}
215-
<a href="http://maps.google.com/?q={{conf.place}}">{{conf.place}}</a>
216-
{% if conf.extra_places %}
217-
{% for place in conf.extra_places %}
218-
& <a href="http://maps.google.com/?q={{place}}">{{place}}</a>
219-
{% endfor %}
220-
{% endif %}
221-
{% endif %}
222-
</span>
223-
</div>
224-
{% if conf.note %}
225-
<div class="note">
226-
<b>Note: </b>{{conf.note}}
227-
</div>
228-
{% endif %}
229-
230-
</div>
231-
<div class="col-12 col-sm-6">
232-
<div class="deadline">
233-
<div>Deadline:
234-
<span class="deadline-time">{{conf.cfp | date: "%A, %e %B %Y"}}</span>
235-
</div>
236-
</div>
237-
238-
</div>
239-
</div>
240-
<div class="row">
241-
<div class="col-6">
242-
{% assign subs = conf.sub | split: "," %}
243-
{% for sub in subs %}
244-
<span title="Click to only show {{sub | strip}} conferences" data-sub="{{sub | strip}}"
245-
class="badge badge-light conf-sub {{sub | strip}}-tag"></span>
246-
{% endfor %}
247-
</div>
248-
<div class="col-6">
249-
<div class="calendar"></div>
250-
</div>
251-
</div>
252-
<hr>
136+
class="ConfItem {% for sub in subs %} {{sub | strip}}-conf {% endfor %}"
137+
data-conf-id="{{conf.conference | slugify: "latin"}}-{{conf.year}}"
138+
data-conf-name="{{conf.conference}}"
139+
data-conf-year="{{conf.year}}"
140+
data-location="{{conf.place}}"
141+
data-format="{% if conf.extra_places %}hybrid{% elsif conf.link contains 'virtual' or conf.place contains 'Virtual' or conf.place contains 'Online' %}virtual{% else %}in-person{% endif %}"
142+
data-topics="{{conf.sub}}"
143+
data-cfp="{{conf.cfp}}"
144+
data-cfp-ext="{{conf.cfp_ext}}"
145+
data-start="{{conf.start}}"
146+
data-end="{{conf.end}}"
147+
data-link="{{conf.link}}"
148+
data-cfp-link="{{conf.cfp_link}}"
149+
data-has-finaid="{% if conf.finaid %}true{% else %}false{% endif %}"
150+
data-has-workshop="{% if conf.workshop_deadline %}true{% else %}false{% endif %}"
151+
data-has-sponsor="{% if conf.sponsor %}true{% else %}false{% endif %}">
152+
{% include index_conf_title_row.html %}
153+
{% include_cached index_conf_date_place.html place=conf.place extra_places=conf.extra_places note=conf.note cfp=conf.cfp start=conf.start end=conf.end %}
154+
{% include index_conf_subs.html subs=subs %}
155+
<hr />
253156
</div>
254157
{% endfor %}
255158
</div>
@@ -269,13 +172,11 @@ <h1>
269172
</footer>
270173
<script type="text/javascript" charset="utf-8">
271174
$(function () {
272-
273175
var DateTime = luxon.DateTime;
274176
var today = DateTime.now();
275177

276178
{% include load_data.js %}
277179
{% include utils.js %}
278-
{% include multiselect_handler.js %}
279180

280181
// Set time zone to local timezone on web copy
281182
$('.local-timezone').text(today.toFormat('z'));
@@ -287,9 +188,13 @@ <h1>
287188
{% assign cfp = conf.cfp %}
288189
{% endif %}
289190
{% assign subs = conf.sub | split: "," %}
191+
192+
// Populate subject tag labels
290193
{% for sub in subs %}
291194
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}} .{{sub | strip}}-tag').html("{% t 'subs.{{sub | strip}}' %}".toLocaleLowerCase("{{ site.lang }}"));
292195
{% endfor %}
196+
197+
// Set sorting attributes for conference ordering
293198
{% if cfp == "TBA" or cfp == "Cancelled" or cfp == "None" %}
294199
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}} .deadline-time').html("{{cfp}}");
295200
{% if cfp == "TBA" %}
@@ -298,7 +203,6 @@ <h1>
298203
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}}').attr("cfpDiff", -Infinity);
299204
{% endif %}
300205
{% else %}
301-
302206
// Use specified timezone for deadlines if available else use AoE timezone
303207
{% if conf.timezone %}
304208
var cfpDate = DateTime.fromSQL("{{cfp}}", { zone: "{{conf.timezone}}" });
@@ -308,64 +212,44 @@ <h1>
308212
var confDate = DateTime.fromSQL("{{conf.start}}", { zone: "UTC-12" });
309213
{% endif %}
310214

311-
// check if timezone is valid otherwise replace by system timezone
215+
// Check if timezone is valid otherwise replace by system timezone
312216
if (cfpDate.invalid || confDate.invalid) {
313217
var cfpDate = DateTime.fromSQL("{{cfp}}");
314218
var confDate = DateTime.fromSQL("{{conf.start}}");
315219
console.log("Invalid timezone in {{conf.conference | slugify: "latin"}}-{{conf.year}}. Using system timezone instead.");
316220
}
317221

318-
// Countdown timers are now handled by countdown-simple.js automatically
319-
320-
// deadline in local timezone
222+
// Display deadline in local timezone
321223
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}} .deadline-time').html(cfpDate.setZone('system').toLocaleString(DateTime.DATE_HUGE));
322224

323-
// add calendar button
324-
try {
325-
var myCalendar = createCalendarFromObject({
326-
id: '{{conf.conference | slugify: "latin"}}-{{conf.year}}',
327-
title: '{{conf.conference}} {{conf.year}} deadline',
328-
start_date: cfpDate.toJSDate(),
329-
duration: 60,
330-
place: '{{conf.place}}',
331-
link: '{{conf.link}}'
332-
});
333-
var calendarContainer = document.querySelector('#{{conf.conference | slugify: "latin"}}-{{conf.year}} .calendar');
334-
if (calendarContainer) {
335-
calendarContainer.appendChild(myCalendar);
336-
}
337-
} catch (err) {
338-
var calendarContainer = document.querySelector('#{{conf.conference | slugify: "latin"}}-{{conf.year}} .calendar');
339-
if (calendarContainer) {
340-
var errorMsg = document.createElement('p');
341-
errorMsg.textContent = 'Calendar not available.';
342-
calendarContainer.appendChild(errorMsg);
343-
}
344-
console.log("Error in cfp date.");
225+
// Store conference data for sorting
226+
var confElement = document.getElementById('{{conf.conference | slugify: "latin"}}-{{conf.year}}');
227+
if (confElement) {
228+
confElement.dataset.cfpDate = cfpDate.toISO();
229+
confElement.dataset.confDate = confDate.toISO();
345230
}
346231

347-
// check if date has passed, add 'past' class to it
348-
cfpDiff = cfpDate.diffNow("seconds");
349-
confDiff = confDate.diffNow("seconds");
232+
// Calculate time differences for sorting and classification
233+
var cfpDiff = cfpDate.diffNow("seconds");
234+
var confDiff = confDate.diffNow("seconds");
350235

351236
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}}').attr("cfpDiff", cfpDiff.toMillis());
352237
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}}').attr("confDiff", confDiff.toMillis());
353238

239+
// Classify past conferences
354240
if (cfpDiff < 0) {
355241
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}}').addClass('pastcfp');
356-
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}} .calendar').remove();
357242
}
358243

359244
if (confDiff < 0) {
360245
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}}').addClass('pastconf');
361-
$('#{{conf.conference | slugify: "latin"}}-{{conf.year}} .calendar').remove();
362246
}
363247
{% endif %}
364248
{% endfor %}
365249

366-
// Sort conferences by CFP deadline
250+
// Sort conferences by year (reverse chronological - newest first)
367251
$("#all_confs .ConfItem").sort(function (a, b) {
368-
return $(a).attr('cfpDiff') - $(b).attr('cfpDiff');
252+
return parseInt($(b).data('conf-year')) - parseInt($(a).data('conf-year'));
369253
}).appendTo($("#all_confs"));
370254
});
371255
</script>

0 commit comments

Comments
 (0)