Skip to content
Snippets Groups Projects
Commit 5749f64e authored by Aspectis's avatar Aspectis Committed by Dorian Merz
Browse files

refs #19013 [fid_bbi] fix and improve resources list 

* Fix filter function
* Fix title when list is cached
* Clear filter when escape is pressed
* Improve styling
* Improve accessibility
parent bf709368
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
themes/fid_bbi/js/sources-display.js 0 → 100644
+ 34
− 0
View file @ 5749f64e
$('#sources-list-toggle-all').click(function () {
if ($(this).hasClass('-expanded')) {
$('#sources-list [aria-expanded=true]').click();
} else {
$('#sources-list [aria-expanded=false]').click();
}
$(this).toggleClass('-expanded');
});
$('#sources-filter').keyup(function (e) {
if (e.keyCode === 27) { // Esc
$(this).val('');
}
const filterText = this.value.toUpperCase();
const $allListElements = $('#sources-list > li');
$allListElements.each(function () {
const item = $(this);
const $button = $('button', item);
const includesFilterText = filterText && item.text().toUpperCase().includes(filterText);
const isExpanded = $button.attr('aria-expanded') === 'true';
if ((includesFilterText && !isExpanded) || (!includesFilterText && isExpanded)) {
$button.click();
}
if (!filterText || includesFilterText) {
item.show();
} else {
item.hide();
}
});
});
themes/fid_bbi/scss/base/common.scss
+ 6
− 0
View file @ 5749f64e
...@@ -38,6 +38,12 @@ a { ...@@ -38,6 +38,12 @@ a {
color: $link-hover-color; color: $link-hover-color;
} }
} }
&.-image {
@include hover {
box-shadow: none;
}
}
} }
address { address {
......
themes/fid_bbi/scss/blocks/sources-list.scss
+ 46
− 18
View file @ 5749f64e
#sources-list li { .sources-list {
&::before { //
position: inherit; }
margin-left: g(-1) ;
.sources-list_list {
padding: 0;
h2 {
color: inherit;
line-height: inherit;
margin: 0 0 g();
} }
.sub-source-label {
h3 {
font: inherit;
font-weight: bold; font-weight: bold;
margin-bottom: g(.5); margin-bottom: g(.5);
} }
> ul {
margin-left: g(-1); li {
li { margin: 0 0 g(.5);
.search-link {
color: $link-color; &::before {
padding-top: g(.5); content: none
display: table-cell; }
}
.source-desc { > ul {
border-left: 2px solid; border-left: 2px solid;
padding-left: g(.75); padding-left: g() - 2px;
margin: 0 0 g(2);
> li + li {
margin-top: g();
} }
} }
} }
padding: 0 g(.5) g(1) 0;
} p {
\ No newline at end of file margin: 0 0 g(.5);
}
}
.sources-list_toggle {
@include button-small;
&:not(.-expanded) .sources-list_label-expanded {
display: none;
}
&.-expanded .sources-list_label-collapsed {
display: none;
}
}
themes/fid_bbi/scss/blocks/toggle.scss deleted 100644 → 0
+ 0
− 24
View file @ bf709368
// #17407 change text of button when expanded / collapsed
#collapse-all-toggler:not(.expanded) .text-expanded {
display: none;
}
#collapse-all-toggler.expanded .text-collapsed {
display: none;
}
.collapse {
display: none;
&.in { display: block; }
// [converter] extracted tr&.in to tr.collapse.in
// [converter] extracted tbody&.in to tbody.collapse.in
}
.collapsing[aria-expanded='true'] {
display: block;
}
.collapsing[aria-expanded='false'] {
display: none;
}
themes/fid_bbi/scss/compiled.scss
+ 0
− 1
View file @ 5749f64e
...@@ -57,7 +57,6 @@ ...@@ -57,7 +57,6 @@
@import 'blocks/table'; @import 'blocks/table';
@import 'blocks/tabs'; @import 'blocks/tabs';
@import 'blocks/tagline'; @import 'blocks/tagline';
@import 'blocks/toggle';
@import 'blocks/tooltip'; @import 'blocks/tooltip';
@import 'blocks/to-top'; @import 'blocks/to-top';
@import 'blocks/unstyled-list'; @import 'blocks/unstyled-list';
......
themes/fid_bbi/templates/amsl/sources-list.phtml
+ 104
− 94
View file @ 5749f64e
<!-- fid_bbi: amsl/sources-list - home --> <!-- fid_bbi: amsl/sources-list - home -->
<?php <?php
/** /**
* this is mostly a copy of the finc version * this is mostly a copy of the finc version
* adds special treatment for 'BASE Bielefeld Academic Search Engine' * adds special treatment for 'BASE Bielefeld Academic Search Engine'
* @deprecated This should be controlled in some more sophisticated way * @deprecated This should be controlled in some more sophisticated way
*/ */
?> ?>
<?php <?php
/* cache fully rendered HTML of THIS template result in AmslController at the first call */
if (isset($this->rendered_html)) {
echo $this->rendered_html;
return;
}
?>
<!-- finc: amsl/sources-list - home -->
<?php
// Set up page title:
$this->headTitle($this->translate('List of available Sources')); $this->headTitle($this->translate('List of available Sources'));
// Set up breadcrumbs: // Cache fully rendered HTML of THIS template result in AmslController at the first call
$this->layout()->breadcrumbs .= '</li> <li class="active">' . $this->transEsc('List of available Sources') . '</li>'; if (isset($this->rendered_html)) {
echo $this->rendered_html;
return;
}
?> ?>
<br /> <div class="narrow">
<h1><?=$this->transEsc('List of available Sources');?></h1> <h1><?=$this->transEsc('List of available Sources');?></h1>
<?=$this->flashmessages()?> <?=$this->flashmessages()?>
<?php if (isset($this->sources)): ?> <?php if (isset($this->sources)): ?>
<p><?=$this->transEsc('sources_explanatory_line');?></p> <p><?=$this->transEsc('sources_explanatory_line')?></p>
<form>
<div class="form-group">
<label for="sources-filter"><?=$this->transEsc('Filter list')?></label>
<input type="text" id="sources-filter" class="form-control" placeholder="<?=$this->transEsc('Please enter filter term')?>">
</div>
</form>
<p> <form>
<button id="collapse-all-toggler" class="btn btn-default" href="javascript:void(0)"> <div class="form-group">
<span class="text-collapsed"><?=$this->transEsc('Expand all')?></span> <label for="sources-filter"><?=$this->transEsc('Filter list')?></label>
<span class="text-expanded"><?=$this->transEsc('Collapse all')?></span> <input type="text" id="sources-filter" class="form-control" placeholder="<?=$this->transEsc('Please enter filter term')?>">
</button> </div>
</p> </form>
<ul id="sources-list"> <p>
<?$itemCount = 0;?> <?php // TODO: Add ARIA attributes? ?>
<?php foreach ($this->sources as $label => $source): ?> <button id="sources-list-toggle-all" class="sources-list_toggle">
<?php if ($label === 'BASE Bielefeld Academic Search Engine'): ?> <span class="sources-list_label-collapsed"><?=$this->transEsc('Expand all')?></span>
<li> <span class="sources-list_label-expanded"><?=$this->transEsc('Collapse all')?></span>
<button data-toggle="collapse" class="filters_title collapse-toggler" href="javascript:void(0)">
<?=$label?>
<?=$this->icon('chevron-down')?>
<span class="sr-only"><?=$this->transEsc('Expand')?></span>
</button> </button>
<ul class="panel-collapse collapse" aria-expanded="false"> </p>
<li>
<div class="source-desc"> <ul id="sources-list" class="sources-list_list">
<a class="search-link" title="<?=$this->transEsc("search_in_specific_resource",["%%resource%%" => $this->escapeHtml($label)])?>" href='<?=$this->url('search-results',[],['query'=>['lookfor'=>'mega_collection:BASE - Bielefeld Academic Search Engine']])?>' target="_blank"> <?php $counter = 0; ?>
<?=$this->translate("search_in_resource")?> <?php foreach ($this->sources as $label => $source): ?>
</a> <?php if (!empty($source)): ?>
</div> <?php $counter++; ?>
</li> <li>
</ul> <h2>
</li> <button
<?php elseif (!empty($source)): ?> class="filters_title"
<li> type="button"
<button data-toggle="collapse" class="filters_title collapse-toggler"> aria-controls="sources-item-<?=$counter?>"
<?=$label?> aria-expanded="false"
<?=$this->icon('chevron-down')?> >
<span class="sr-only"><?=$this->transEsc('Expand')?></span> <?=$label?>
</button> <?=$this->icon('chevron-down')?>
<ul class="panel-collapse collapse" aria-expanded="false"> </button>
<?php foreach ($source as $sub_label => $collection): ?> </h2>
<li> <ul id="sources-item-<?=$counter?>" hidden>
<?php if ($label === 'BASE Bielefeld Academic Search Engine'): ?>
<li>
<div class="source-desc"> <div class="source-desc">
<div class="sub-source-label" tabindex="0" aria-label="<?=$this->transEsc("Source Title")?>"> <a
<?=$sub_label?> class="search-link"
</div> title="<?=$this->transEsc('search_in_specific_resource', ["%%resource%%" => $this->escapeHtml($label)])?>"
href='<?=$this->url('search-results',[],['query'=>['lookfor'=>'mega_collection:BASE - Bielefeld Academic Search Engine']])?>'
target="_blank"
>
<?=$this->translate('search_in_resource')?>
</a>
</div>
</li>
<?php else: ?>
<?php foreach ($source as $sub_label => $collection): ?>
<li>
<div class="source-desc">
<h3 class="sub-source-label">
<?=$sub_label?>
</h3>
<?php if (!empty($collection['desc'])): ?>
<p>
<?=$collection['desc']?>
</p>
<?php endif; ?>
<?php if (!empty($collection['desc'])): ?> <?php if (isset($collection['href'])): ?>
<div class="margin-t" tabindex="0" aria-label="<?=$this->transEsc("Description")?>"> <p>
<?=$collection['desc']?> <a
class="search-link"
title="<?=$this->transEsc("search_in_specific_resource", ["%%resource%%" => $this->escapeHtml($sub_label)])?>"
href="<?=$this->escapeHtml($collection['href'])?>"
target="_blank"
>
<?=$this->translate('search_in_resource')?>
</a>
</p>
<?php endif; ?>
</div> </div>
<?php endif; ?> </li>
<?php if (isset($collection['href'])): ?> <?php endforeach; ?>
<a class="search-link" title="<?=$this->transEsc("search_in_specific_resource", ["%%resource%%" => $this->escapeHtml($sub_label)])?>" href="<?=$this->escapeHtml($collection['href'])?>" target="_blank"> <?php endif; ?>
<?=$this->translate("search_in_resource")?> </ul>
</a> </li>
<?php endif; ?> <?php endif; ?>
</div> <?php endforeach; ?>
</li> </ul>
<?php endforeach; ?>
</ul>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="panel panel-primary"> <p>
<div class="panel-body"> <?=$this->transEsc('support_by_dfg')?>
<span> <?=$this->externalLink(
<?=$this->transEsc('support_by_dfg');?> 'https://www.dfg.de',
</span> '<img src="' . $this->imageLink('dfg_logo_text.png') . '" alt="Deutsche Forschungsgemeinschaft (DFG)">',
<a href='http://www.dfg.de' target='_blank'> ['class' => '-image']
<img src='<?=$this->imageLink('dfg_logo_text.png')?>' alt='Deutsche Forschungsgemeinschaft, DFG'> )?>
</a> </p>
</div> <?php endif; ?>
</div> </div>
<?php endif; ?>
<?php /* run collapse togglers + introduce a case-insensitive filter that is capable of filtering multiple filtering terms */ <?php
/* run collapse togglers + introduce a case-insensitive filter that is capable of filtering multiple filtering terms */
echo $this->inlineScript(\Zend\View\Helper\HeadScript::FILE, 'sources-display.js', 'SET'); echo $this->inlineScript(\Zend\View\Helper\HeadScript::FILE, 'sources-display.js', 'SET');
?> ?>
<!-- fid_bbi: amsl/sources-list - home - END --> <!-- fid_bbi: amsl/sources-list - home - END -->
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment