diff --git a/themes/fid_bbi/js/sources-display.js b/themes/fid_bbi/js/sources-display.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf94d3ee82d0ff05926a480debcb67c5c975341a
--- /dev/null
+++ b/themes/fid_bbi/js/sources-display.js
@@ -0,0 +1,34 @@
+$('#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();
+ }
+ });
+});
diff --git a/themes/fid_bbi/scss/base/common.scss b/themes/fid_bbi/scss/base/common.scss
index 07f01dfad73226c880265a4ba7eaf0e5390016ec..b4f24adc9e6f55fc2cf2ed07dfb85db47ac064f2 100644
--- a/themes/fid_bbi/scss/base/common.scss
+++ b/themes/fid_bbi/scss/base/common.scss
@@ -38,6 +38,12 @@ a {
color: $link-hover-color;
}
}
+
+ &.-image {
+ @include hover {
+ box-shadow: none;
+ }
+ }
}
address {
diff --git a/themes/fid_bbi/scss/blocks/sources-list.scss b/themes/fid_bbi/scss/blocks/sources-list.scss
index d2421c67920c883c5d03c7eeb516dfc7334fc558..35cb65e80df8e9b8e736b3ac4c0a798e843f35c0 100644
--- a/themes/fid_bbi/scss/blocks/sources-list.scss
+++ b/themes/fid_bbi/scss/blocks/sources-list.scss
@@ -1,25 +1,53 @@
-#sources-list li {
- &::before {
- position: inherit;
- margin-left: g(-1) ;
+.sources-list {
+ //
+}
+
+.sources-list_list {
+ padding: 0;
+
+ h2 {
+ color: inherit;
+ line-height: inherit;
+ margin: 0 0 g();
}
- .sub-source-label {
+
+ h3 {
+ font: inherit;
font-weight: bold;
margin-bottom: g(.5);
}
- > ul {
- margin-left: g(-1);
- li {
- .search-link {
- color: $link-color;
- padding-top: g(.5);
- display: table-cell;
- }
- .source-desc {
- border-left: 2px solid;
- padding-left: g(.75);
+
+ li {
+ margin: 0 0 g(.5);
+
+ &::before {
+ content: none
+ }
+
+ > ul {
+ border-left: 2px solid;
+ padding-left: g() - 2px;
+ margin: 0 0 g(2);
+
+ > li + li {
+ margin-top: g();
}
}
}
- padding: 0 g(.5) g(1) 0;
-}
\ No newline at end of file
+
+ p {
+ 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;
+ }
+}
diff --git a/themes/fid_bbi/scss/blocks/toggle.scss b/themes/fid_bbi/scss/blocks/toggle.scss
deleted file mode 100644
index fe625f40337ee36e15c5c1397cf494a1b4b729e8..0000000000000000000000000000000000000000
--- a/themes/fid_bbi/scss/blocks/toggle.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// #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;
-}
-
diff --git a/themes/fid_bbi/scss/compiled.scss b/themes/fid_bbi/scss/compiled.scss
index a1def09ffda477ba4f0adbfe0772e73fa1e0ecfb..cf811b1949e520ce88e015408d5d48d72efc4617 100644
--- a/themes/fid_bbi/scss/compiled.scss
+++ b/themes/fid_bbi/scss/compiled.scss
@@ -57,7 +57,6 @@
@import 'blocks/table';
@import 'blocks/tabs';
@import 'blocks/tagline';
-@import 'blocks/toggle';
@import 'blocks/tooltip';
@import 'blocks/to-top';
@import 'blocks/unstyled-list';
diff --git a/themes/fid_bbi/templates/amsl/sources-list.phtml b/themes/fid_bbi/templates/amsl/sources-list.phtml
index bfc635135d0264f9cd182c2832dd8328ba5c2aa5..87457ab2ce51d081138945aeb387dac8269b9643 100644
--- a/themes/fid_bbi/templates/amsl/sources-list.phtml
+++ b/themes/fid_bbi/templates/amsl/sources-list.phtml
@@ -1,115 +1,125 @@
<!-- fid_bbi: amsl/sources-list - home -->
<?php
- /**
- * this is mostly a copy of the finc version
- * adds special treatment for 'BASE Bielefeld Academic Search Engine'
- * @deprecated This should be controlled in some more sophisticated way
- */
+/**
+ * this is mostly a copy of the finc version
+ * adds special treatment for 'BASE Bielefeld Academic Search Engine'
+ * @deprecated This should be controlled in some more sophisticated way
+ */
?>
+
<?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'));
-// Set up breadcrumbs:
-$this->layout()->breadcrumbs .= '</li> <li class="active">' . $this->transEsc('List of available Sources') . '</li>';
+// Cache fully rendered HTML of THIS template result in AmslController at the first call
+if (isset($this->rendered_html)) {
+ echo $this->rendered_html;
+ return;
+}
?>
-<br />
-<h1><?=$this->transEsc('List of available Sources');?></h1>
+<div class="narrow">
+ <h1><?=$this->transEsc('List of available Sources');?></h1>
-<?=$this->flashmessages()?>
+ <?=$this->flashmessages()?>
-<?php if (isset($this->sources)): ?>
- <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>
+ <?php if (isset($this->sources)): ?>
+ <p><?=$this->transEsc('sources_explanatory_line')?></p>
- <p>
- <button id="collapse-all-toggler" class="btn btn-default" href="javascript:void(0)">
- <span class="text-collapsed"><?=$this->transEsc('Expand all')?></span>
- <span class="text-expanded"><?=$this->transEsc('Collapse all')?></span>
- </button>
- </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>
- <ul id="sources-list">
- <?$itemCount = 0;?>
- <?php foreach ($this->sources as $label => $source): ?>
- <?php if ($label === 'BASE Bielefeld Academic Search Engine'): ?>
- <li>
- <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>
+ <p>
+ <?php // TODO: Add ARIA attributes? ?>
+ <button id="sources-list-toggle-all" class="sources-list_toggle">
+ <span class="sources-list_label-collapsed"><?=$this->transEsc('Expand all')?></span>
+ <span class="sources-list_label-expanded"><?=$this->transEsc('Collapse all')?></span>
</button>
- <ul class="panel-collapse collapse" aria-expanded="false">
- <li>
- <div class="source-desc">
- <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">
- <?=$this->translate("search_in_resource")?>
- </a>
- </div>
- </li>
- </ul>
- </li>
- <?php elseif (!empty($source)): ?>
- <li>
- <button data-toggle="collapse" class="filters_title collapse-toggler">
- <?=$label?>
- <?=$this->icon('chevron-down')?>
- <span class="sr-only"><?=$this->transEsc('Expand')?></span>
- </button>
- <ul class="panel-collapse collapse" aria-expanded="false">
- <?php foreach ($source as $sub_label => $collection): ?>
- <li>
+ </p>
+
+ <ul id="sources-list" class="sources-list_list">
+ <?php $counter = 0; ?>
+ <?php foreach ($this->sources as $label => $source): ?>
+ <?php if (!empty($source)): ?>
+ <?php $counter++; ?>
+ <li>
+ <h2>
+ <button
+ class="filters_title"
+ type="button"
+ aria-controls="sources-item-<?=$counter?>"
+ aria-expanded="false"
+ >
+ <?=$label?>
+ <?=$this->icon('chevron-down')?>
+ </button>
+ </h2>
+ <ul id="sources-item-<?=$counter?>" hidden>
+ <?php if ($label === 'BASE Bielefeld Academic Search Engine'): ?>
+ <li>
<div class="source-desc">
- <div class="sub-source-label" tabindex="0" aria-label="<?=$this->transEsc("Source Title")?>">
- <?=$sub_label?>
- </div>
+ <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"
+ >
+ <?=$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'])): ?>
- <div class="margin-t" tabindex="0" aria-label="<?=$this->transEsc("Description")?>">
- <?=$collection['desc']?>
+ <?php if (isset($collection['href'])): ?>
+ <p>
+ <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>
- <?php endif; ?>
- <?php if (isset($collection['href'])): ?>
- <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>
- <?php endif; ?>
- </div>
- </li>
- <?php endforeach; ?>
- </ul>
- </li>
- <?php endif; ?>
- <?php endforeach; ?>
- </ul>
+ </li>
+ <?php endforeach; ?>
+ <?php endif; ?>
+ </ul>
+ </li>
+ <?php endif; ?>
+ <?php endforeach; ?>
+ </ul>
- <div class="panel panel-primary">
- <div class="panel-body">
- <span>
- <?=$this->transEsc('support_by_dfg');?>
- </span>
- <a href='http://www.dfg.de' target='_blank'>
- <img src='<?=$this->imageLink('dfg_logo_text.png')?>' alt='Deutsche Forschungsgemeinschaft, DFG'>
- </a>
- </div>
- </div>
-<?php endif; ?>
+ <p>
+ <?=$this->transEsc('support_by_dfg')?>
+ <?=$this->externalLink(
+ 'https://www.dfg.de',
+ '<img src="' . $this->imageLink('dfg_logo_text.png') . '" alt="Deutsche Forschungsgemeinschaft (DFG)">',
+ ['class' => '-image']
+ )?>
+ </p>
+ <?php endif; ?>
+</div>
-<?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');
?>
<!-- fid_bbi: amsl/sources-list - home - END -->