tilderadio/site
3
0
Fork 8
Code Issues 2 Pull Requests Releases Wiki Activity

Highlight active half-hour cell
Some checks reported errors
continuous-integration/drone/pr Build encountered an error
Details

Browse Source
This commit is contained in:
Charles E. Lehner 2021-06-07 20:39:30 -04:00
parent a731a47f1c
commit 1e68d971c8
Signed by untrusted user: cel
GPG Key ID: C28D95BB012367EA
3 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/calendar.css
View File

@ -73,6 +73,9 @@
.calendar tbody tr td.hour span {
display: block;
}
.calendar tbody tr td.active {
border: 1px solid yellow;
}
#pointer {
position: absolute;
left: 0;
@ -83,6 +86,9 @@
.pointer-label {
color: red;
}
.pointer-label-wrapper {
color: yellow;
}
.show-title {
position: relative;
z-index: 2;

25
schedule/calendar.php
View File

@ -66,21 +66,26 @@ for ($i = 0; $i < 86400; $i += 1800) {
break;
}
}
$active = false;
if (!$wrotepointer) {
// If current time is in this range, draw pointer.
$end = DateTimeImmutable::createFromMutable($merge)->add($halfhour);
if ($now >= $merge && $now < $end) {
$active = true;
$props .= ' class="active"';
}
}
echo "<td $props>";
if ($matchedshow) {
echo '<div class="show-title">'.$matchedshow['title'].'</div>';
// if no match was found, leave an empty node
}
if (!$wrotepointer) {
// If current time is in this range, draw pointer.
$end = DateTimeImmutable::createFromMutable($merge)->add($halfhour);
if ($now >= $merge && $now < $end) {
// Cell height here should be synced with height of '.calendar tbody tr td' in ../css/calendar.css
$height = 32;
$top = round(date_diff($merge, $now)->format('%i') / 30 * ($height-1));
echo '<div id="pointer" style="top:'.$top.'px"></div>';
}
$wrotepointer = true;
if ($active) {
// Cell height here should be synced with height of '.calendar tbody tr td' in ../css/calendar.css
$height = 32;
$top = round(date_diff($merge, $now)->format('%i') / 30 * ($height-1));
echo '<div id="pointer" style="top:'.$top.'px"></div>';
$wrotepointer = true;
}
echo "</td>\n";
}

6
schedule/index.php
View File

@ -6,7 +6,8 @@ include 'schedule.php';
<h1><a href="https://tilderadio.org"><img style="width:72px;margin-top:-30px;margin-right:5px;" src="../logos/tilderadio.png">tilderadio.org</a></h1>
<h4>upcoming broadcasts</h4>
<p>all times in UTC. current time is <span id="utcdate"><?=formatdate("now")?></span> (<span class="pointer-label">&mdash;</span>).</p>
<p>all times in UTC. current time is <span id="utcdate"><?=formatdate("now")?></span>
<span class="pointer-label-wrapper">(</span><span class="pointer-label">&mdash;</span><span class="pointer-label-wrapper">)</span>.</p>
<p>this schedule is also available in <a href="https://icalendar.org/validator.html?url=https://tilderadio.org/schedule/ics.php">iCalendar format</a>. point your calendar client at <code>https://tilderadio.org/schedule/ics.php</code>.</p>
<?php
@ -93,6 +94,9 @@ function updatePointer(d) {
}
// Move pointer to different cell if changed cell.
if (range !== prevRange) {
const prevCell = prevRange && prevRange.cell
if (prevCell) prevCell.classList.remove('active');
range.cell.classList.add('active');
range.cell.appendChild(pointer);
}
// Move pointer based on time in current cell.