Merge pull request #1528 from danskernesdigitalebibliotek/DDFFORM-822…

…-modal-til-abningstider

Ddfform 822 modal til abningstider

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. <br />
+ If no link is added, the opening hours sidebar modal is enabled. <br />
  You can add a relative url (e.g. /takster). <br />
  You can search for an internal url. <br />
  You can add an external url (starting with "http://" or "https://").', [], ['context' => 'Library Agency Configuration']),

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;
 
 /**
@@ -45,3 +46,66 @@ void {
  ];
  }
 }
+
+/**
+ * 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.
+ */
+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-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'] = [
+ '#theme' => 'dpl_react_app',
+ '#name' => 'opening-hours-sidebar',
+ '#data' => $openingHoursSidebarData + ['size' => 'large'],
+ ];
+ $variables['opening_hours_sidebar_small'] = [
+ '#theme' => 'dpl_react_app',
+ '#name' => 'opening-hours-sidebar',
+ '#data' => $openingHoursSidebarData + ['size' => 'small'],
+ ];
+}
+
+/**
+ * Builds an array of branch details.
+ *
+ * @param \Drupal\node\NodeInterface[] $branches
+ * An array of branch nodes.
+ *
+ * @return array<array{'branch_id': int|string|null, 'name': string|null,
+ * 'link': string, 'promoted': bool}>
+ * An 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)) {
+ continue;
+ }
+
+ $branchesArray[] = [
+ 'branch_id' => $branch->id(),
+ 'name' => $branch->getTitle(),
+ 'link' => $branch->toUrl()->toString(),
+ 'promoted' => (bool) $branch->get('field_promoted_on_lists')->value,
+ ];
+ }
+ return $branchesArray;
+}

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:

web/themes/custom/novel/templates/layout/header.html.twig

@@ -27,10 +27,19 @@
  </div>
  {{ patron_menu }}
  <div class="header__button-responsive-switch">
- <a href="{{ opening_hours_url }}" class="header__button header__button--left-border">
- <img class="header__button-icon" loading="lazy" width="24" height="24" src="/themes/custom/novel/assets/dpl-design-system/icons/basic/icon-watch-static.svg" alt="clock icon"/>
- <span class="header__button-text">{{ "Opening hours"|t }}</span>
+ {% if opening_hours_url %}
+ <a href="{{ opening_hours_url }}"
+ class="header__button header__button--left-border">
+ <img class="header__button-icon" loading="lazy" width="24"
+ height="24"
+ src="/themes/custom/novel/assets/dpl-design-system/icons/basic/icon-watch-static.svg"
+ alt="clock icon"/>
+ <span
+ class="header__button-text">{{ "Opening hours"|t }}</span>
  </a>
+ {% else %}
+ {{ opening_hours_sidebar_small }}
+ {% endif %}
  <a href="{{ url('dpl_favorites_list.list') }}" class="header__button header__button--left-border">
  <img class="header__button-icon" width="24" height="24" src="/themes/custom/novel/assets/dpl-design-system/icons/basic/icon-heart.svg" alt="{{ 'List of bookmarks'|t({}, {'context': 'Header'}) }}"/>
  <span class="header__button-text">{{ "Liked"|t({}, {'context': 'Global'}) }}</span>
@@ -39,15 +48,21 @@
  </nav>
  {{ search_header }}
  </div>
+ {% if opening_hours_url %}
  <div class="header__clock">
- <div class="pagefold-parent--medium">
- <div class="pagefold-triangle--medium"></div>
- </div>
- <a href="{{ opening_hours_url }}" class="header__clock-items">
- <img loading="lazy" width="58" height="58" src="/themes/custom/novel/assets/dpl-design-system/icons/basic/icon-watch-static.svg" class="mb-8" alt=""/>
- <span class="text-small-caption">{{ "Opening hours"|t }}</span>
- </a>
+ <div class="pagefold-parent--medium">
+ <div class="pagefold-triangle--medium"></div>
+ </div>
+ <a href="{{ opening_hours_url }}" class="header__clock-items">
+ <img loading="lazy" width="58" height="58"
+ src="/themes/custom/novel/assets/dpl-design-system/icons/basic/icon-watch-static.svg"
+ class="mb-8" alt=""/>
+ <span class="text-small-caption link-tag">{{ "Opening hours"|t }}</span>
+ </a>
  </div>
+ {% else %}
+ {{ opening_hours_sidebar_large }}
+ {% endif %}
 </header>
 <div class="header-sidebar-nav" data-open="closed">
  <div class="header-sidebar-nav__background-wrapper">

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') }}