Skip to content
Snippets Groups Projects
Commit 12a3cb68 authored by Robert Lange's avatar Robert Lange
Browse files

refs #24587 [fid_bbi] release/fid_bbi/2024_06 fix accessibility: move... 

refs #24587 [fid_bbi] release/fid_bbi/2024_06 fix accessibility: move appendFile to html-head.phtml, because all scripts added on stack of head script won't be executes AFTER <?=->headScript()?> anymore!

* csp: move script for applied-filters to html-head.phtml as headScript
* also fix styles
* csp: move svg for hexagons on start page to own file and set path in scss of item-list-prefix class
* set script for generating of additional labels for checkbox and radio as HEAD SCRIPT

co-authored by: jpkanter <kanter@ub.uni-leipzig.de>
* converted inline svgs to static files
* replaced raw svg stuff in css
parent 1ebc287a
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 111 additions and 88 deletions
themes/fid_bbi/images/checkbox-indicator_checked.svg 0 → 100644
+ 6
− 0
View file @ 12a3cb68
<svg xmlns='http://www.w3.org/2000/svg'
width='8'
height='8'
viewBox='0 0 8 8'>
<path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/>
</svg>
\ No newline at end of file
themes/fid_bbi/images/checkmark2.svg 0 → 100644
+ 1
− 0
View file @ 12a3cb68
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M6 13 l6 6 10-10" fill="none" stroke-width='2' stroke='#d80050'/></svg>
\ No newline at end of file
themes/fid_bbi/images/hexagon.svg 0 → 100644
+ 1
− 0
View file @ 12a3cb68
<svg xmlns='http://www.w3.org/2000/svg' height='66' width='56'><path d='M55 16.834L28 1.156 1 16.834v31.355l27 15.677 27-15.677z' fill='none' stroke='#000' stroke-width='2'/></svg>
\ No newline at end of file
themes/fid_bbi/images/result-grouping-bg.svg 0 → 100644
+ 8
− 0
View file @ 12a3cb68
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 28 28'
height='28'
width='28'
>
<path d='M9 12l5 5 5-5' fill='none' stroke-width='2' stroke='%23000'/>
</svg>
\ No newline at end of file
themes/fid_bbi/js/vendor/bootstrap/scss/_variables.scss
+ 1
− 1
View file @ 12a3cb68
......@@ -552,7 +552,7 @@ $custom-control-indicator-active-box-shadow: null !default;
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
$custom-checkbox-indicator-border-radius: $border-radius !default;
$custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
$custom-checkbox-indicator-icon-checked: url('../../fid_bbi/images/checkbox-indicator_checked.svg') !default;
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
......
themes/fid_bbi/scss/base/form.scss
+ 1
− 2
View file @ 12a3cb68
......@@ -149,8 +149,7 @@ textarea {
@extend %checkbox-radio;
&:checked + label::before {
// Checkmark
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' height='28' width='28'%3E%3Cpath d='M6 13 l6 6 10-10' fill='none' stroke-width='2' stroke='%23#{str-slice(inspect($link-color), 2)}'/%3E%3C/svg%3E");
background-image: url('../../fid_bbi/images/checkmark2.svg');
}
}
......
themes/fid_bbi/scss/blocks/item-list.scss
+ 1
− 1
View file @ 12a3cb68
......@@ -17,7 +17,7 @@
.item-list-prefix {
// Hexagon
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='66' width='56'%3E%3Cpath d='M55 16.834L28 1.156 1 16.834v31.355l27 15.677 27-15.677z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center 0 no-repeat;
background: url('../../fid_bbi/images/hexagon.svg') center 0 no-repeat;
flex: 0 0 g(2);
font: #{$font-size-special}/#{$line-height} display-font, sans-serif;
margin-right: g(.5);
......
themes/fid_bbi/scss/blocks/result-grouping.scss
+ 1
− 1
View file @ 12a3cb68
// Style changes for the result grouping, superseeding the original design / default
.result-background-addin {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' height='28' width='28'%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke-width='2' stroke='%23000'/%3E%3C/svg%3E");
background-image: url('../../fid_bbi/images/result-grouping-bg.svg');
}
.grouping-popup,
......
themes/fid_bbi/templates/html-head.phtml
+ 91
− 44
View file @ 12a3cb68
<?=$this->doctype('HTML5')?>
<?php // NOTE: There must not be a comment before the DOCTYPE declaration ?>
<?php // NOTE: There must not be a comment before the DOCTYPE declaration?>
<?php /* BBI: Load accessibility JS files here - CK */
if (strcmp($this->layout()->userLang, 'de') == 0) {
$this->headScript()->appendFile('vendor/bootstrap-accessibility-de.min.js');
} else {
$this->headScript()->appendFile('vendor/bootstrap-accessibility-en.min.js');
}
?>
<!-- fid_bbi: html-head -->
<html lang="<?=$this->layout()->userLang?>">
......@@ -32,12 +40,12 @@
<?php
// Set up OpenSearch link
$this->headLink(
[
'href' => $this->url('search-opensearch') . '?method=describe',
'type' => 'application/opensearchdescription+xml',
'title' => $this->transEsc('Library Catalog Search'),
'rel' => 'search'
]
[
'href' => $this->url('search-opensearch') . '?method=describe',
'type' => 'application/opensearchdescription+xml',
'title' => $this->transEsc('Library Catalog Search'),
'rel' => 'search'
]
);
?>
......@@ -45,10 +53,10 @@
<?php
if (!isset($this->renderingError)) {
// Add translation strings
// PDA (BELOW) is a custom finc string - CK
$this->jsTranslations()->addStrings(
[
// Add translation strings
// PDA (BELOW) is a custom finc string - CK
$this->jsTranslations()->addStrings(
[
'pda_send_success' => 'PDA::pda_send_success',
'add_tag_success' => 'add_tag_success',
'bulk_email_success' => 'bulk_email_success',
......@@ -72,12 +80,12 @@
],
'sms_success' => 'sms_success'
]
);
);
// TODO: To we need this?
// Add libphonenumber.js strings
$this->jsTranslations()->addStrings(
[
// TODO: To we need this?
// Add libphonenumber.js strings
$this->jsTranslations()->addStrings(
[
'Phone number invalid' => 'libphonenumber_invalid',
'Invalid country calling code' => 'libphonenumber_invalidcountry',
'Invalid region code' => 'libphonenumber_invalidregion',
......@@ -86,27 +94,27 @@
'The string supplied is too short to be a phone number' => 'libphonenumber_tooshort',
'Phone number too short after IDD' => 'libphonenumber_tooshortidd'
]
);
);
// Deal with cart stuff:
$cart = $this->cart();
if ($cart->isActive()) {
$this->headScript()->appendFile("vendor/js.cookie.js");
$this->headScript()->appendFile("cart.js");
$domain = $cart->getCookieDomain();
if (!empty($domain)) {
$this->headScript()->appendScript(
'VuFind.cart.setDomain("' . $domain . '");'
);
}
$cookiePath = $cart->getCookiePath();
if (!empty($cookiePath)) {
$this->headScript()->appendScript(
'VuFind.cart.setCookiePath("' . $cookiePath . '");'
);
}
$this->jsTranslations()->addStrings(
[
// Deal with cart stuff:
$cart = $this->cart();
if ($cart->isActive()) {
$this->headScript()->appendFile("vendor/js.cookie.js");
$this->headScript()->appendFile("cart.js");
$domain = $cart->getCookieDomain();
if (!empty($domain)) {
$this->headScript()->appendScript(
'VuFind.cart.setDomain("' . $domain . '");'
);
}
$cookiePath = $cart->getCookiePath();
if (!empty($cookiePath)) {
$this->headScript()->appendScript(
'VuFind.cart.setCookiePath("' . $cookiePath . '");'
);
}
$this->jsTranslations()->addStrings(
[
'addBookBag' => 'Add to Book Bag',
'bookbagFull' => 'bookbag_full_msg',
'bookbagMax' => $cart->getMaxSize(),
......@@ -118,28 +126,67 @@
'removeBookBag' => 'Remove from Book Bag',
'viewBookBag' => 'View Book Bag'
]
);
}
);
}
$this->headScript()->appendScript(
'var userIsLoggedIn = ' . ($this->auth()->isLoggedIn() ? 'true' : 'false')
);
$this->headScript()->appendScript(
'var userIsLoggedIn = ' . ($this->auth()->isLoggedIn() ? 'true' : 'false')
);
}
// Session keep-alive
if ($this->keepAlive()) {
$this->headScript()->appendScript('var keepAliveInterval = ' . $this->keepAlive());
$this->headScript()->appendFile("keep_alive.js");
$this->headScript()->appendScript('var keepAliveInterval = ' . $this->keepAlive());
$this->headScript()->appendFile("keep_alive.js");
}
$root = rtrim($this->url('home'), '/');
$translations = $this->jsTranslations()->getJSON();
$dsb = DEFAULT_SEARCH_BACKEND;
$this->headScript()->appendScript(
"VuFind.path = '$root';"
"VuFind.path = '$root';"
. "VuFind.defaultSearchBackend = '$dsb';"
. "VuFind.addTranslations($translations);"
);
if (
$this->templateName === 'results'
|| $this->templateDir === 'records'
) {
$applyFiltersScript = <<<JS
$(document).ready(function() {
$('#keepfilters').on('click',
function () {
$('.applied-filter').prop('checked', this.checked);
}
);
});
JS;
$this->headScript()->appendScript($applyFiltersScript);
}
// For styling checkbox and radio inputs, the label must be appended to the
// input, but Laminas only generates inputs within labels.
$applyLabelsScript = <<<JS
$(document).ready(function() {
const checkboxRadioInputs = document.querySelectorAll('main [type=checkbox], main [type=radio]')
for (let i = 0; i < checkboxRadioInputs.length; i++) {
const input = checkboxRadioInputs[i]
const parent = input.parentNode
if (parent.nodeName !== 'LABEL') {
continue
}
input.id = input.id || input.name + input.value
const newLabel = document.createElement('label')
newLabel.setAttribute('for', input.id)
newLabel.innerHTML = parent.textContent
parent.outerHTML = '<p>' + input.outerHTML + newLabel.outerHTML + '</p>'
}
});
JS;
$this->headScript()->appendScript($applyLabelsScript);
?>
<?=$this->headScript()?>
......
themes/fid_bbi/templates/layout/layout.phtml
+ 0
− 29
View file @ 12a3cb68
<?=$this->render('html-head.phtml')?>
<?php // NOTE: There must not be anything above html-head.phtml, not even comments or whitespace ?>
<?php /* BBI: Load accessibility JS files here - CK */
if (strcmp($this->layout()->userLang, 'de') == 0) {
$this->headScript()->appendFile('vendor/bootstrap-accessibility-de.min.js');
} else {
$this->headScript()->appendFile('vendor/bootstrap-accessibility-en.min.js');
}
?>
<!-- fid_bbi: layout - layout -->
<?php $isHome = $this->templateDir === 'search' && $this->templateName === 'home'; ?>
<body class="layout <?=$isHome ? '-home' : '-default'?>">
......@@ -98,26 +90,5 @@ if (strcmp($this->layout()->userLang, 'de') == 0) {
<?php foreach ($this->captcha()->js() as $jsInclude):?>
<?=$this->inlineScript(\Laminas\View\Helper\HeadScript::FILE, $jsInclude, 'SET')?>
<?php endforeach; ?>
<script>
// For styling checkbox and radio inputs, the label must be appended to the
// input, but Laminas only generates inputs within labels.
const checkboxRadioInputs = document.querySelectorAll('main [type=checkbox], main [type=radio]')
for (let i = 0; i < checkboxRadioInputs.length; i++) {
const input = checkboxRadioInputs[i]
const parent = input.parentNode
if (parent.nodeName !== 'LABEL') {
continue
}
input.id = input.id || input.name + input.value
const newLabel = document.createElement('label')
newLabel.setAttribute('for', input.id)
newLabel.innerHTML = parent.textContent
parent.outerHTML = '<p>' + input.outerHTML + newLabel.outerHTML + '</p>'
}
</script>
</body>
<!-- fid_bbi: layout - layout - END -->
themes/fid_bbi/templates/search/searchbox.phtml
+ 0
− 10
View file @ 12a3cb68
......@@ -145,14 +145,4 @@ $tabConfig = $this->searchTabs()->getTabConfig(
<?=$this->transEsc('Find')?>
</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
<?php /* deprecated since vufind 6*/ ?>
$('#keepfilters').on('click', function () {
$('.applied-filter').prop('checked', this.checked);
});
<?php /* deprecated since vufind 6*/ ?>
});
</script>
<!-- fid_bbi: search - searchbox - 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