From fb319b93bb5e14698a2ece87b0954f20d0f49424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= Date: Wed, 29 Nov 2023 15:16:54 +0200 Subject: [PATCH 1/3] TMS-942: Accessibility fixes --- CHANGELOG.MD | 6 +++ assets/scripts/search-filters.js | 47 +++++++++++++++++++ assets/scripts/theme.js | 2 + assets/styles/blocks/custom/_contacts.scss | 4 ++ .../ui-components/header/_fly-out-nav.scss | 3 +- assets/styles/views/_page-program.scss | 10 ++-- lib/Formatters/ContactFormatter.php | 5 ++ partials/shared/contact-item.dust | 2 +- 8 files changed, 74 insertions(+), 5 deletions(-) create mode 100644 assets/scripts/search-filters.js diff --git a/CHANGELOG.MD b/CHANGELOG.MD index bc8eb01f..955c3053 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +- TMS-942: + - Check / uncheck search filter checkboxes depending on choices + - Trim contact phone number in href + - Increase fly-out-nav z-index to prevent chatbot from overlapping elements + - Add margin for program text-search suggestions + ## [1.8.7] - 2023-11-21 ### Added diff --git a/assets/scripts/search-filters.js b/assets/scripts/search-filters.js new file mode 100644 index 00000000..12673561 --- /dev/null +++ b/assets/scripts/search-filters.js @@ -0,0 +1,47 @@ +/* + * Copyright (c) 2023. Hion Digital + */ + +// Use jQuery as $ within this file scope. +const $ = jQuery; // eslint-disable-line no-unused-vars + +/** + * Export the class reference. + */ +export default class SearchFilters { + + /** + * Check or uncheck checkboxes depending on selections + * + * @param {Object} event Change event + */ + SearchFilters( event ) { + const $checkBoxContainer = $( '.search-filters' ); + const $checkBoxes = $checkBoxContainer.find( 'input[type=checkbox]' ); + const $clickedCheckbox = event.target; + + if ( $( $clickedCheckbox ).is( ':checked' ) ) { + // Uncheck "All"-checkbox when others are checked + if ( $( $clickedCheckbox ).prop( 'id' ) !== 'cpt-all' ) { + $( '#cpt-all' ).prop( 'checked', false ); + } + // Uncheck other checkboxes when "All" is selected + else { + $checkBoxes.each( function() { + if ( $( this ).prop( 'id' ) !== 'cpt-all' ) { + $( this ).prop( 'checked', false ); + } + } ); + } + } + } + + /** + * Run when the document is ready. + * + * @return {void} + */ + docReady() { + $( '.search-filters input[type=checkbox]' ).on( 'change', this.SearchFilters.bind( this ) ); + } +} diff --git a/assets/scripts/theme.js b/assets/scripts/theme.js index 2afa4e99..b3d5145d 100755 --- a/assets/scripts/theme.js +++ b/assets/scripts/theme.js @@ -28,6 +28,7 @@ import GravityFormsPatch from './gravity-forms-patch'; import Countdown from './countdown'; import ProgramSearch from './program-search'; import LoadMore from './load-more'; +import SearchFilters from './search-filters'; const globalControllers = { Common, @@ -55,6 +56,7 @@ const globalControllers = { Countdown, ProgramSearch, LoadMore, + SearchFilters, }; const templateControllers = { diff --git a/assets/styles/blocks/custom/_contacts.scss b/assets/styles/blocks/custom/_contacts.scss index fb39ca6f..009deb6e 100644 --- a/assets/styles/blocks/custom/_contacts.scss +++ b/assets/styles/blocks/custom/_contacts.scss @@ -5,6 +5,10 @@ $contacts-gap: .75rem; .contacts { + &__name { + overflow: hidden !important; // sass-lint:disable no-important + } + &__item { flex: 1 0 auto; max-width: calc(100% - $contacts-gap); diff --git a/assets/styles/ui-components/header/_fly-out-nav.scss b/assets/styles/ui-components/header/_fly-out-nav.scss index 3c5a4d23..8147d702 100644 --- a/assets/styles/ui-components/header/_fly-out-nav.scss +++ b/assets/styles/ui-components/header/_fly-out-nav.scss @@ -13,7 +13,8 @@ $fly-out-nav-secondary-link-hover: $primary-invert !default; $fly-out-nav-search-button-icon: $primary !default; .fly-out-nav { - z-index: 50; + // z-index unbelievable high to prevent embedded chat overlapping elements + z-index: 9999999999; display: none; diff --git a/assets/styles/views/_page-program.scss b/assets/styles/views/_page-program.scss index 0c720ca2..e9448c7f 100644 --- a/assets/styles/views/_page-program.scss +++ b/assets/styles/views/_page-program.scss @@ -61,9 +61,13 @@ } ul.ui-menu { - .ui-menu-item-wrapper { - &.ui-state-active { - background-color: $color-grey; + .ui-menu-item { + margin-bottom: .5rem; + + .ui-menu-item-wrapper { + &.ui-state-active { + background-color: $color-grey; + } } } } diff --git a/lib/Formatters/ContactFormatter.php b/lib/Formatters/ContactFormatter.php index d355b408..c3eb22c6 100644 --- a/lib/Formatters/ContactFormatter.php +++ b/lib/Formatters/ContactFormatter.php @@ -139,6 +139,11 @@ public function map_keys( array $posts, array $field_keys, $default_image = null $fields['phone_repeater'] = array_filter( $fields['phone_repeater'], function ( $item ) { return ! empty( $item['phone_text'] ) || ! empty( $item['phone_number'] ); } ); + + // Remove whitespaces from phone_number to use on the href + $fields['trimmed_number'] = array_map( function( $item ) { + return str_replace( ' ', '', $item['phone_number'] ); + }, $fields['phone_repeater'] ); } return $fields; diff --git a/partials/shared/contact-item.dust b/partials/shared/contact-item.dust index c8f9cf91..0054c523 100644 --- a/partials/shared/contact-item.dust +++ b/partials/shared/contact-item.dust @@ -29,7 +29,7 @@
{phone_text|html}
- {phone_number|html} From c561301d68957f4e8ab091a9e3211bc4a1348918 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= Date: Thu, 30 Nov 2023 09:29:02 +0200 Subject: [PATCH 2/3] TMS-942: Fix phone number trimming --- lib/Formatters/ContactFormatter.php | 6 +++--- partials/shared/contact-item.dust | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/Formatters/ContactFormatter.php b/lib/Formatters/ContactFormatter.php index c3eb22c6..1dabdca8 100644 --- a/lib/Formatters/ContactFormatter.php +++ b/lib/Formatters/ContactFormatter.php @@ -141,9 +141,9 @@ public function map_keys( array $posts, array $field_keys, $default_image = null } ); // Remove whitespaces from phone_number to use on the href - $fields['trimmed_number'] = array_map( function( $item ) { - return str_replace( ' ', '', $item['phone_number'] ); - }, $fields['phone_repeater'] ); + foreach( $fields['phone_repeater'] as $i => $single_phone ) { + $fields['phone_repeater'][$i]['trimmed_number'] = str_replace( ' ', '', $single_phone['phone_number'] ); + } } return $fields; diff --git a/partials/shared/contact-item.dust b/partials/shared/contact-item.dust index 0054c523..abf134b1 100644 --- a/partials/shared/contact-item.dust +++ b/partials/shared/contact-item.dust @@ -29,7 +29,7 @@
{phone_text|html}
- {phone_number|html} From 570005061d21b4e2e8c3746823d9279916a48e76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= Date: Thu, 30 Nov 2023 10:33:41 +0200 Subject: [PATCH 3/3] TMS-942: phpcs fix --- lib/Formatters/ContactFormatter.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/Formatters/ContactFormatter.php b/lib/Formatters/ContactFormatter.php index 1dabdca8..e17bb74e 100644 --- a/lib/Formatters/ContactFormatter.php +++ b/lib/Formatters/ContactFormatter.php @@ -141,8 +141,8 @@ public function map_keys( array $posts, array $field_keys, $default_image = null } ); // Remove whitespaces from phone_number to use on the href - foreach( $fields['phone_repeater'] as $i => $single_phone ) { - $fields['phone_repeater'][$i]['trimmed_number'] = str_replace( ' ', '', $single_phone['phone_number'] ); + foreach ( $fields['phone_repeater'] as $i => $single_phone ) { + $fields['phone_repeater'][ $i ]['trimmed_number'] = str_replace( ' ', '', $single_phone['phone_number'] ); } }