From 56e0e2d5a7e762a8610bc6a8782210e28bd8f84d Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 21 Aug 2024 15:45:37 +0200 Subject: [PATCH 1/5] Add `OpeningHoursSidebar` React app Initial setup of the `OpeningHoursSidebar` React app, responsible for the opening hours modal. This single React app renders either a small icon or a clock based on a prop, and therefore must be rendered twice. --- .../dpl_opening_hours.module | 27 +++++++++++++++++++ .../custom/dpl_react/dpl_react.libraries.yml | 12 +++++++++ .../novel/templates/layout/header.html.twig | 15 ++--------- .../novel/templates/layout/page.html.twig | 2 ++ 4 files changed, 43 insertions(+), 13 deletions(-) diff --git a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module index 4483744d9..dc8c3683a 100644 --- a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module +++ b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module @@ -45,3 +45,30 @@ void { ]; } } + +/** + * Implements template_preprocess_page(). + * + * @param mixed[] $variables + * Theme variables. + */ +function dpl_opening_hours_preprocess_page(array &$variables): void { + $variables['opening_hours_sidebar_large'] = [ + '#theme' => 'dpl_react_app', + '#name' => 'opening-hours-sidebar', + '#data' => [ + 'size' => "large", + 'opening-hours-text' => t('Opening hours', [], ['context' => 'Opening Hours sidebar']), + 'opening-hours-sidebar-today-text' => t('Today (@toDayString)', [], ['context' => 'Opening Hours sidebar']), + ] + DplReactAppsController::externalApiBaseUrls(), + ]; + $variables['opening_hours_sidebar_small'] = [ + '#theme' => 'dpl_react_app', + '#name' => 'opening-hours-sidebar', + '#data' => [ + 'size' => "small", + 'opening-hours-text' => t('Opening hours', [], ['context' => 'Opening Hours sidebar']), + 'opening-hours-sidebar-today-text' => t('Today (@toDayString)', [], ['context' => 'Opening Hours sidebar']), + ] + DplReactAppsController::externalApiBaseUrls(), + ]; +} diff --git a/web/modules/custom/dpl_react/dpl_react.libraries.yml b/web/modules/custom/dpl_react/dpl_react.libraries.yml index 862f32812..361dc3f5e 100644 --- a/web/modules/custom/dpl_react/dpl_react.libraries.yml +++ b/web/modules/custom/dpl_react/dpl_react.libraries.yml @@ -277,6 +277,18 @@ menu: - dpl_react/base - dpl_react/handler +opening-hours-sidebar: + remote: https://github.com/danskernesdigitalebibliotek/dpl-react + license: + name: GNU AFFERO + url: https://github.com/danskernesdigitalebibliotek/dpl-react/blob/master/LICENSE + gpl-compatible: true + js: + /libraries/dpl-react/OpeningHoursSidebar.js: {} + dependencies: + - dpl_react/base + - dpl_react/handler + base: remote: https://github.com/danskernesdigitalebibliotek/dpl-react license: diff --git a/web/themes/custom/novel/templates/layout/header.html.twig b/web/themes/custom/novel/templates/layout/header.html.twig index e1c4d8ff9..4a12e1f1b 100644 --- a/web/themes/custom/novel/templates/layout/header.html.twig +++ b/web/themes/custom/novel/templates/layout/header.html.twig @@ -27,10 +27,7 @@ {{ patron_menu }}
- - clock icon - {{ "Opening hours"|t }} - + {{ opening_hours_sidebar_small }} {{ 'List of bookmarks'|t({}, {'context': 'Header'}) }} {{ "Liked"|t({}, {'context': 'Global'}) }} @@ -39,15 +36,7 @@ {{ search_header }}
-
-
-
-
- - - {{ "Opening hours"|t }} - -
+ {{ opening_hours_sidebar_large }}
diff --git a/web/themes/custom/novel/templates/layout/page.html.twig b/web/themes/custom/novel/templates/layout/page.html.twig index 11ae716fb..549c1af13 100644 --- a/web/themes/custom/novel/templates/layout/page.html.twig +++ b/web/themes/custom/novel/templates/layout/page.html.twig @@ -52,6 +52,8 @@ 'patron_menu': patron.menu, 'logo': logo, 'opening_hours_url': opening_hours_url, + 'opening_hours_sidebar_large': opening_hours_sidebar_large, + 'opening_hours_sidebar_small': opening_hours_sidebar_small, } only %} {{ drupal_block('system_messages_block') }} From 8c71219c0bdaef4d20c937dfeee290560dfd5f02 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Sat, 31 Aug 2024 16:32:00 +0200 Subject: [PATCH 2/5] =?UTF-8?q?Send=20`=C2=A7branchesArray`=20to=20`openin?= =?UTF-8?q?g-hours-sidebar`=20React=20apps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This data is needed for the React app to merge branches with opening hours. Additionally, I have added a variable with the shared props. --- .../dpl_opening_hours.module | 47 +++++++++++++++---- 1 file changed, 37 insertions(+), 10 deletions(-) diff --git a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module index dc8c3683a..1f61f4445 100644 --- a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module +++ b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module @@ -6,6 +6,7 @@ */ use Drupal\dpl_react_apps\Controller\DplReactAppsController; +use Drupal\node\NodeInterface; use Drupal\paragraphs\ParagraphInterface; /** @@ -53,22 +54,48 @@ void { * Theme variables. */ function dpl_opening_hours_preprocess_page(array &$variables): void { + $branchNodes = \Drupal::entityTypeManager()->getStorage('node')->loadByProperties(['type' => 'branch']); + $branchesArray = dpl_opening_hours_build_branches_array($branchNodes); + + $openingHoursSidebarData = [ + 'opening-hours-sidebar-branches-config' => $branchesArray, + 'opening-hours-text' => t('Opening hours', [], ['context' => 'Opening Hours sidebar']), + 'opening-hours-sidebar-today-text' => t('Today (@toDayString)', [], ['context' => 'Opening Hours sidebar']), + 'opening-hours-sidebar-link-text' => t('See all opening hours', [], ['context' => 'Opening Hours sidebar']), + ] + DplReactAppsController::externalApiBaseUrls(); + $variables['opening_hours_sidebar_large'] = [ '#theme' => 'dpl_react_app', '#name' => 'opening-hours-sidebar', - '#data' => [ - 'size' => "large", - 'opening-hours-text' => t('Opening hours', [], ['context' => 'Opening Hours sidebar']), - 'opening-hours-sidebar-today-text' => t('Today (@toDayString)', [], ['context' => 'Opening Hours sidebar']), - ] + DplReactAppsController::externalApiBaseUrls(), + '#data' => $openingHoursSidebarData + ['size' => 'large'], ]; $variables['opening_hours_sidebar_small'] = [ '#theme' => 'dpl_react_app', '#name' => 'opening-hours-sidebar', - '#data' => [ - 'size' => "small", - 'opening-hours-text' => t('Opening hours', [], ['context' => 'Opening Hours sidebar']), - 'opening-hours-sidebar-today-text' => t('Today (@toDayString)', [], ['context' => 'Opening Hours sidebar']), - ] + DplReactAppsController::externalApiBaseUrls(), + '#data' => $openingHoursSidebarData + ['size' => 'small'], ]; } + +/** + * Build the branches array. + * + * @param \Drupal\node\NodeInterface[] $branches + * Array of branch nodes. + * + * @return array + * Array of branch details. + */ +function dpl_opening_hours_build_branches_array(array $branches): array { + $branchesArray = []; + foreach ($branches as $branch) { + if ($branch instanceof NodeInterface) { + $branchesArray[] = [ + 'branch_id' => $branch->id(), + 'name' => $branch->getTitle(), + 'link' => $branch->toUrl()->toString(), + 'promoted' => $branch->hasField('field_promoted_on_lists') && !$branch->get('field_promoted_on_lists')->isEmpty() ? (bool) $branch->get('field_promoted_on_lists')->value : FALSE, + ]; + } + } + return $branchesArray; +} From fc24e568c0e3ffc148e853d37019cc4d3eb79e00 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 6 Sep 2024 13:46:25 +0200 Subject: [PATCH 3/5] Corrected text in `OpeningHoursSidebar` Refers to: [DDFHER-42](https://reload.atlassian.net/browse/DDFHER-42) --- web/modules/custom/dpl_opening_hours/dpl_opening_hours.module | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module index 1f61f4445..6fc3d228e 100644 --- a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module +++ b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module @@ -60,8 +60,8 @@ function dpl_opening_hours_preprocess_page(array &$variables): void { $openingHoursSidebarData = [ 'opening-hours-sidebar-branches-config' => $branchesArray, 'opening-hours-text' => t('Opening hours', [], ['context' => 'Opening Hours sidebar']), - 'opening-hours-sidebar-today-text' => t('Today (@toDayString)', [], ['context' => 'Opening Hours sidebar']), - 'opening-hours-sidebar-link-text' => t('See all opening hours', [], ['context' => 'Opening Hours sidebar']), + 'opening-hours-sidebar-title-text' => t("Today's opening hours", [], ['context' => 'Opening Hours sidebar']), + 'opening-hours-sidebar-link-text' => t('Go to @branchName', [], ['context' => 'Opening Hours sidebar']), ] + DplReactAppsController::externalApiBaseUrls(); $variables['opening_hours_sidebar_large'] = [ From 84390ae062b81b3edae193e79a2f3e05c8b735d7 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 9 Sep 2024 13:05:44 +0200 Subject: [PATCH 4/5] Improve comments and code for better clarity --- .../dpl_opening_hours.module | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module index 6fc3d228e..1410cb945 100644 --- a/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module +++ b/web/modules/custom/dpl_opening_hours/dpl_opening_hours.module @@ -48,7 +48,11 @@ void { } /** - * Implements template_preprocess_page(). + * Implements hook_preprocess_HOOK() for page templates. + * + * Adds two instances of the Opening Hours sidebar React app to the page. + * Since there are two triggers to open the sidebar, two instances of the app + * are required. The app will adjust its markup based on the `size` property. * * @param mixed[] $variables * Theme variables. @@ -77,25 +81,31 @@ function dpl_opening_hours_preprocess_page(array &$variables): void { } /** - * Build the branches array. + * Builds an array of branch details. * * @param \Drupal\node\NodeInterface[] $branches - * Array of branch nodes. + * An array of branch nodes. + * + * @return array + * An array of branch details. * - * @return array - * Array of branch details. + * @throws \Drupal\Core\Entity\EntityMalformedException + * Thrown when the entity is malformed. */ function dpl_opening_hours_build_branches_array(array $branches): array { $branchesArray = []; foreach ($branches as $branch) { - if ($branch instanceof NodeInterface) { - $branchesArray[] = [ - 'branch_id' => $branch->id(), - 'name' => $branch->getTitle(), - 'link' => $branch->toUrl()->toString(), - 'promoted' => $branch->hasField('field_promoted_on_lists') && !$branch->get('field_promoted_on_lists')->isEmpty() ? (bool) $branch->get('field_promoted_on_lists')->value : FALSE, - ]; + if (!($branch instanceof NodeInterface)) { + continue; } + + $branchesArray[] = [ + 'branch_id' => $branch->id(), + 'name' => $branch->getTitle(), + 'link' => $branch->toUrl()->toString(), + 'promoted' => (bool) $branch->get('field_promoted_on_lists')->value, + ]; } return $branchesArray; } From dcafd751704e4037a81b44b3f5d20e7c90fba63e Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 13 Sep 2024 13:20:31 +0200 Subject: [PATCH 5/5] Add logic to enable opening hours sidebar By default, the opening hours sidebar should not be enabled. You need to remove the default `Opening Hours Link` text to enable it. --- .../src/Form/GeneralSettingsForm.php | 3 ++- .../novel/templates/layout/header.html.twig | 26 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/web/modules/custom/dpl_library_agency/src/Form/GeneralSettingsForm.php b/web/modules/custom/dpl_library_agency/src/Form/GeneralSettingsForm.php index 282b6c2c3..fd1ca7d61 100644 --- a/web/modules/custom/dpl_library_agency/src/Form/GeneralSettingsForm.php +++ b/web/modules/custom/dpl_library_agency/src/Form/GeneralSettingsForm.php @@ -187,8 +187,9 @@ public function buildForm(array $form, FormStateInterface $form_state): array { $form['opening_hours_url'] = [ '#type' => 'linkit', - '#title' => $this->t('Opening hours link', [], ['context' => 'Library Agency Configuration']), + '#title' => $this->t('Opening Hours Link (remove link to enable sidebar)', [], ['context' => 'Library Agency Configuration']), '#description' => $this->t('The link with information about opening hours.
+ If no link is added, the opening hours sidebar modal is enabled.
You can add a relative url (e.g. /takster).
You can search for an internal url.
You can add an external url (starting with "http://" or "https://").', [], ['context' => 'Library Agency Configuration']), diff --git a/web/themes/custom/novel/templates/layout/header.html.twig b/web/themes/custom/novel/templates/layout/header.html.twig index 4a12e1f1b..a98cf315f 100644 --- a/web/themes/custom/novel/templates/layout/header.html.twig +++ b/web/themes/custom/novel/templates/layout/header.html.twig @@ -27,7 +27,19 @@
{{ patron_menu }}
+ {% if opening_hours_url %} + + clock icon + {{ "Opening hours"|t }} + + {% else %} {{ opening_hours_sidebar_small }} + {% endif %} {{ 'List of bookmarks'|t({}, {'context': 'Header'}) }} {{ "Liked"|t({}, {'context': 'Global'}) }} @@ -36,7 +48,21 @@ {{ search_header }}
+ {% if opening_hours_url %} +
+
+
+
+ + + {{ "Opening hours"|t }} + +
+ {% else %} {{ opening_hours_sidebar_large }} + {% endif %}