Skip to content

Commit

Permalink
Improve accessibility by not replacing the week navi when week is cha…
Browse files Browse the repository at this point in the history 
…nged.
  • Loading branch information
@EreMaijala
EreMaijala committed Sep 28, 2023
1 parent 63ab7b8 commit 7d0d5e6
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 106 deletions.
8 changes: 7 additions & 1 deletion module/Finna/src/Finna/AjaxHandler/GetOrganisationInfo.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ public function handleRequest(Params $params)
(bool)$params->fromQuery('consortiumInfo', false)
);
break;

case 'location-details':
if (!($id = $params->fromQuery('id'))) {
return $this->handleError('getOrganisationInfo: missing id');
Expand All @@ -169,6 +170,7 @@ public function handleRequest(Params $params)
(bool)$params->fromQuery('consortiumInfo', false)
);
break;

case 'schedule':
if (!($id = $params->fromQuery('id'))) {
return $this->handleError('getOrganisationInfo: missing id');
Expand All @@ -181,6 +183,7 @@ public function handleRequest(Params $params)
}
$result = $this->getSchedule($id, $locationId, $sectors, $startDate);
break;

case 'widget':
if (!($id = $params->fromQuery('id'))) {
if (!($id = $this->cookieManager->get(static::COOKIE_NAME))) {
Expand All @@ -200,6 +203,7 @@ public function handleRequest(Params $params)
(bool)$params->fromQuery('details', true),
);
break;

case 'organisation-page-link':
if (!($id = $params->fromQuery('id'))) {
return $this->handleError('getOrganisationInfo: missing id');
Expand Down Expand Up @@ -354,7 +358,9 @@ protected function getSchedule(
'organisationinfo/elements/location/schedule-week.phtml',
compact('orgInfo')
);
return compact('widget');
$weekNum = date('W', strtotime($startDate));
$currentWeek = date('W') === $weekNum;
return compact('widget', 'weekNum', 'currentWeek');
}

/**
Expand Down
30 changes: 21 additions & 9 deletions themes/finna2/js/finna-organisation-info.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,25 +159,32 @@ finna.organisationInfo = (function finnaOrganisationInfo() {
container.querySelectorAll('.js-week-navi-btn').forEach((btn) => {
if (btn.dataset.dir) {
btn.addEventListener('click', () => {
let widgetContainer = btn.closest('.schedules');
let widgetContainer = btn.closest('.js-schedules');
if (!widgetContainer) {
console.error('Schedule widget not found');
return;
}
let indicatorEl = widgetContainer.querySelector('.js-loader');
let weekNavi = btn.closest('.js-week-navi');
if (!indicatorEl || !weekNavi) {
console.error('Week navi or loading indicator not found');
let weekNaviEl = btn.closest('.js-week-navi');
let timesEl = widgetContainer.querySelector('.js-opening-times-week');
if (!indicatorEl || !weekNaviEl || !timesEl) {
console.error('Week navi, times or loading indicator not found');
return;
}
let isoDate = weekNavi.dataset.date;
let weekNumEl = weekNaviEl.querySelector('.week-text .num');
if (!weekNumEl) {
console.error('Week num not found');
return;
}
let isoDate = weekNaviEl.dataset.date;
if (!isoDate) {
console.error('Current date not found');
return;
}
let date = new Date(isoDate);
let delta = parseInt(btn.dataset.dir) < 0 ? -7 : 7;
date.setDate(date.getDate() + delta);
let newIsoDate = date.toISOString().substring(0, 10);
indicatorEl.classList.remove('hidden');
fetch(VuFind.path + '/AJAX/JSON?' + new URLSearchParams({
method: 'getOrganisationInfo',
Expand All @@ -186,16 +193,21 @@ finna.organisationInfo = (function finnaOrganisationInfo() {
locationId: locationId,
sectors: params.sectors || '',
buildings: params.buildings || '',
date: date.toISOString().substring(0, 10)
date: newIsoDate
}))
.then(response => {
indicatorEl.classList.add('hidden');
if (!response.ok) {
widgetContainer.textContent = VuFind.translate('error_occurred');
timesEl.textContent = VuFind.translate('error_occurred');
} else {
response.json().then((result) => {
widgetContainer.outerHTML = result.data.widget;
initWeekNavi(locationId);
weekNaviEl.dataset.date = newIsoDate;
weekNumEl.textContent = result.data.weekNum;
let prevBtnEl = weekNaviEl.querySelector('.js-week-navi-btn.prev-week');
if (prevBtnEl) {
prevBtnEl.disabled = result.data.currentWeek;
}
timesEl.outerHTML = result.data.widget;
});
}
});
Expand Down
5 changes: 3 additions & 2 deletions themes/finna2/less/finna/organisation-info.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
margin: 0;
}

.opening-times-week {
.js-opening-times-week {
display: flex;
flex-flow: column nowrap;
font-size: 1.0em;
Expand Down Expand Up @@ -139,6 +139,7 @@
}

.schedules-info {
margin-top: 20px;
margin-bottom: 10px;
@media (max-width: @screen-sm-max) {
max-width: @organisation-info-max-w;
Expand Down Expand Up @@ -688,7 +689,7 @@
max-width: @organisation-info-max-w;
}
}
.schedules {
.js-schedules {
.no-schedules {
margin: 10px;
font-size: 1.1em;
Expand Down
8 changes: 7 additions & 1 deletion themes/finna2/templates/organisationinfo/elements/location-details.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,13 @@
</div>

<div class="location-col opening-times">
<?=$this->render('organisationinfo/elements/location/schedule.phtml')?>
<?=$this->component('@@molecules/containers/finna-panel', [
'attributes' => ['class' => ['finna-panel-default', 'opening-times-library-information']],
'heading' => $this->transEsc('organisation_info_schedules'),
'headingLevel' => 4,
'content' => $this->render('organisationinfo/elements/location/schedule.phtml'),
'headingId' => 'heading2',
]); ?>
</div>

<div class="location-col">
Expand Down
153 changes: 68 additions & 85 deletions themes/finna2/templates/organisationinfo/elements/location/schedule-week.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,97 +4,80 @@
return $this->render('organisationinfo/elements/helpers/time-interval.phtml', compact('opens', 'closes', 'minutes'));
};
?>
<div class="info schedules">
<?php if ('museum' !== $orgInfo['type'] && $firstDate = $orgInfo['openTimes']['schedules'][0]['date'] ?? null): ?>
<div class="js-week-navi" data-date="<?=date('Y-m-d', $firstDate)?>">
<button type="button" class="btn-link js-week-navi-btn prev-week" data-dir="-1" aria-label="<?= $this->transEscAttr('organisation_info_previous_week')?>"<?=$orgInfo['openTimes']['currentWeek'] ? ' disabled' : ''?>>
<?=$this->icon('week-prev') ?>
</button>
<span class="week-text">
<?=$this->transEsc('organisation_info_schedule_week')?>
<span class="num"><?=$this->escapeHtml(date('W', $firstDate))?></span>
</span>
<button type="button" class="btn-link js-week-navi-btn next-week" data-dir="+1" aria-label="<?= $this->transEscAttr('organisation_info_next_week')?>">
<?=$this->icon('week-next') ?>
</button>
<span class="js-loader hidden"><?=$this->icon('spinner') ?></span>
</div>
<?php endif; ?>

<div class="opening-times-week">
<?php
$schedules = $orgInfo['openTimes']['schedules'];
$hasScheduleDescriptions = !empty($orgInfo['scheduleDescriptions']);
$hasLocation = !empty($orgInfo['address']['city']);
?>
<?php if ($schedules && ($hasLocation || !$orgInfo['isAlwaysClosed'])): ?>
<?php foreach ($schedules as $schedule): ?>
<div class="date-rows<?=$schedule['today'] ? ' today' : ''?><?='museum' === $orgInfo['type'] ? ' museum' : ''?>">
<div class="time-row<?=$schedule['closed'] ? ' closed' : ''?>">
<div class="date-container">
<span class="date">
<?php if ('museum' !== $orgInfo['type']): ?>
<time datetime="<?=$this->escapeHtmlAttr(date('Y-m-d', $schedule['date']))?>">
<?=date('j.n.', $schedule['date'])?>
</time>
<?php endif; ?>
</span>
</div>
<div class="description">
<span class="name"><?=$this->transEscWithPrefix('day-name-short-', $schedule['day'])?></span>
<span class="info"><?=$this->escapeHtml($schedule['info'])?>
</div>
<div class="time-container">
<?php if ($schedule['closed']): ?>
<span class="closed-today"><?=$this->transEsc('organisation_info_is_closed')?></span>
<?php else: ?>
<span class="period">
<?=$renderInterval($schedule['firstOpeningTime'], $schedule['lastClosingTime'], $schedule['minutePrecision'])?>
</span>
<div class="js-opening-times-week">
<?php
$schedules = $orgInfo['openTimes']['schedules'];
$hasScheduleDescriptions = !empty($orgInfo['scheduleDescriptions']);
$hasLocation = !empty($orgInfo['address']['city']);
?>
<?php if ($schedules && ($hasLocation || !$orgInfo['isAlwaysClosed'])): ?>
<?php foreach ($schedules as $schedule): ?>
<div class="date-rows<?=$schedule['today'] ? ' today' : ''?><?='museum' === $orgInfo['type'] ? ' museum' : ''?>">
<div class="time-row<?=$schedule['closed'] ? ' closed' : ''?>">
<div class="date-container">
<span class="date">
<?php if ('museum' !== $orgInfo['type']): ?>
<time datetime="<?=$this->escapeHtmlAttr(date('Y-m-d', $schedule['date']))?>">
<?=date('j.n.', $schedule['date'])?>
</time>
<?php endif; ?>
</div>
</span>
</div>
<div class="description">
<span class="name"><?=$this->transEscWithPrefix('day-name-short-', $schedule['day'])?></span>
<span class="info"><?=$this->escapeHtml($schedule['info'])?>
</div>
<div class="time-container">
<?php if ($schedule['closed']): ?>
<span class="closed-today"><?=$this->transEsc('organisation_info_is_closed')?></span>
<?php else: ?>
<span class="period">
<?=$renderInterval($schedule['firstOpeningTime'], $schedule['lastClosingTime'], $schedule['minutePrecision'])?>
</span>
<?php endif; ?>
</div>
<?php if ($schedule['selfServiceTimes'] || $schedule['gaps']): ?>
<?php foreach ($schedule['times'] as $time): ?>
<div class="time-row sub-row">
<div class="date-container"></div>
<div class="description">
<?php if ($time['closed']): ?>
<span class="closed-notice"><?=$this->icon('organisation-info-closed')?> <?=$this->transEsc('organisation_info_is_closed')?></span>
<?php elseif ($time['selfservice']): ?>
<span class="selfservice-only"><?=$this->transEsc('organisation_info_only_selfservice')?></span>
<?php elseif ($schedule['selfServiceTimes']): ?>
<span class="name-staff"><?=$this->transEsc('organisation_info_schedule_staff')?></span>
<?php endif; ?>
</div>
<div class="time-container">
<span class="period">
<?=$renderInterval($time['opens'], $time['closes'], $schedule['minutePrecision'])?>
</span>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php else: ?>
<?php if ($orgInfo['mobile']): ?>
<div class="mobile-schedules info-element">
<?php if ($orgInfo['links']): ?>
<?php foreach ($orgInfo['links'] as $link): ?>
<div aria-hidden="true">
<a href="<?=$this->escapeHtmlAttr($link['url'])?>" target="_blank">
<?=$this->escapeHtml($link['name'])?>
</a>
<?php if ($schedule['selfServiceTimes'] || $schedule['gaps']): ?>
<?php foreach ($schedule['times'] as $time): ?>
<div class="time-row sub-row">
<div class="date-container"></div>
<div class="description">
<?php if ($time['closed']): ?>
<span class="closed-notice"><?=$this->icon('organisation-info-closed')?> <?=$this->transEsc('organisation_info_is_closed')?></span>
<?php elseif ($time['selfservice']): ?>
<span class="selfservice-only"><?=$this->transEsc('organisation_info_only_selfservice')?></span>
<?php elseif ($schedule['selfServiceTimes']): ?>
<span class="name-staff"><?=$this->transEsc('organisation_info_schedule_staff')?></span>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php elseif (!$orgInfo['scheduleDescriptions']): ?>
<div class="no-schedules info-element"><?=$this->transEsc('organisation_info_no_schedule')?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="time-container">
<span class="period">
<?=$renderInterval($time['opens'], $time['closes'], $schedule['minutePrecision'])?>
</span>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php else: ?>
<?php if ($orgInfo['mobile']): ?>
<div class="mobile-schedules info-element">
<?php if ($orgInfo['links']): ?>
<?php foreach ($orgInfo['links'] as $link): ?>
<div aria-hidden="true">
<a href="<?=$this->escapeHtmlAttr($link['url'])?>" target="_blank">
<?=$this->escapeHtml($link['name'])?>
</a>
</div>
<?php endforeach; ?>
<?php elseif (!$orgInfo['scheduleDescriptions']): ?>
<div class="no-schedules info-element"><?=$this->transEsc('organisation_info_no_schedule')?></div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>

<?php if ($orgInfo['scheduleDescriptions']): ?>
<div class="schedules-info info-element">
Expand Down
11 changes: 4 additions & 7 deletions themes/finna2/templates/organisationinfo/elements/location/schedule.phtml
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
<!-- START of: finna - organisationinfo/elements/location/schedule.phtml -->
<?=$this->component('@@molecules/containers/finna-panel', [
'attributes' => ['class' => ['finna-panel-default', 'opening-times-library-information']],
'heading' => $this->transEsc('organisation_info_schedules'),
'headingLevel' => 4,
'content' => $this->render('organisationinfo/elements/location/schedule-week.phtml'),
'headingId' => 'heading2',
]); ?>
<div class="info js-schedules">
<?=$this->render('organisationinfo/elements/location/schedule-week-navi.phtml')?>
<?=$this->render('organisationinfo/elements/location/schedule-week.phtml')?>
</div>
<!-- END of: finna - organisationinfo/elements/location/schedule.phtml -->
2 changes: 1 addition & 1 deletion themes/finna2/templates/organisationinfo/elements/widget.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<?php endif; ?>

<div class="opening-times">
<?=$this->render('organisationinfo/elements/location/schedule-week.phtml')?>
<?=$this->render('organisationinfo/elements/location/schedule.phtml')?>
</div>
</div>

Expand Down

0 comments on commit 7d0d5e6

Please sign in to comment.