From 3efcb72fd91af2a65654a1ee15e5514b2587b15c Mon Sep 17 00:00:00 2001 From: rpnykanen Date: Thu, 25 Jul 2024 09:17:37 +0300 Subject: [PATCH 1/6] UHF-10341: remove the publication_starts_today from backend and always render date on backend to prevent caching issues --- public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme | 7 ------- .../templates/layout/node--job-listing.html.twig | 8 +------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme index f5603805..0ed6801b 100644 --- a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme +++ b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme @@ -183,13 +183,6 @@ function hdbt_subtheme_preprocess_node(&$variables): void { if ($node->getType() !== 'job_listing') { return; } - // Check if job listing publication starts today. - $variables['publication_starts_today'] = FALSE; - $publication_starts_value = $node->get('field_publication_starts')->value; - - if ($publication_starts_value && date('Y-m-d', strtotime($publication_starts_value)) == date('Y-m-d')) { - $variables['publication_starts_today'] = TRUE; - } if ($task_area_term = $node->get('field_task_area')?->first()?->get('entity')?->getValue()) { $langcode = \Drupal::languageManager()->getCurrentLanguage()->getId(); diff --git a/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig b/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig index 316d6d46..87a70c4c 100644 --- a/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig +++ b/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig @@ -62,8 +62,6 @@ * current user is a logged-in member. * - is_admin: Flag for admin user status. Will be true when the current user * is an administrator. - * - publication_starts_today: Helper variable for displaying 'today' instead - * of the actual timestamp if the job listing is published today. * - task_area_name: Task area name for Rekry search link. * - task_area_rekry_search_url: Rekry search url with task area url query param. * @@ -140,11 +138,7 @@ {% endif %} - {% if publication_starts_today == true %} - {% set publication_starts = 'today'|t %} - {% else %} - {% set publication_starts = content.field_publication_starts %} - {% endif %} + {% set publication_starts = content.field_publication_starts %} {% set metadata = [ { label: 'Application period ends'|t, icon: 'clock', content: content.field_publication_ends }, From daa66cfb3ac0027c71d8644c9661e969fd1d67a1 Mon Sep 17 00:00:00 2001 From: rpnykanen Date: Thu, 25 Jul 2024 12:36:48 +0300 Subject: [PATCH 2/6] UHF-10341: javascript to process the datetime string --- .../src/js/helfi_datetime_comparison.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 public/themes/custom/hdbt_subtheme/src/js/helfi_datetime_comparison.js diff --git a/public/themes/custom/hdbt_subtheme/src/js/helfi_datetime_comparison.js b/public/themes/custom/hdbt_subtheme/src/js/helfi_datetime_comparison.js new file mode 100644 index 00000000..64cc13fc --- /dev/null +++ b/public/themes/custom/hdbt_subtheme/src/js/helfi_datetime_comparison.js @@ -0,0 +1,18 @@ +// Turn datetime into text (for example "today"), used on a job page. +((Drupal) => { + // Look for all time-elements from all metadata-wrappers. + const timeElements = Array.from(document.getElementsByClassName('job-listing__metadata-wrapper')) + ?.map(wrapper => wrapper.getElementsByTagName('time')) + ?.map(timeElementCollection => Array.from(timeElementCollection)) + ?.flat() + if (!timeElements) return; + + const today = new Date(); + Array.from(timeElements).forEach((element) => { + const originalDate = new Date(element.getAttribute('datetime')); + if (originalDate.toDateString() === today.toDateString()) { + const minutes = originalDate.getUTCMinutes() < 10 ? `0${originalDate.getMinutes()}` : originalDate.getMinutes(); + element.innerText = `${Drupal.t('today')} ${originalDate.getHours()}:${minutes}` + } + }); +})(Drupal); From 3726c997b441ab8409ea2d1b19a6546028d81572 Mon Sep 17 00:00:00 2001 From: rpnykanen Date: Thu, 25 Jul 2024 12:37:09 +0300 Subject: [PATCH 3/6] UHF-10341: add the javascript to job_listing pages --- .../custom/hdbt_subtheme/hdbt_subtheme.libraries.yml | 8 ++++++++ public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme | 1 + 2 files changed, 9 insertions(+) diff --git a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml index e9d83df8..5a46e548 100644 --- a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml +++ b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml @@ -11,3 +11,11 @@ siteimprove-analytics: dependencies: - core/drupal - eu_cookie_compliance/eu_cookie_compliance + +# Turn datetime into text, f.ex "today" +datetime_comparison: + version: 1.0 + js: + src/js/helfi_datetime_comparison.js: {attributes: { defer: true }} + dependencies: + - core/drupal diff --git a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme index 0ed6801b..0ad8440d 100644 --- a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme +++ b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme @@ -170,6 +170,7 @@ function hdbt_subtheme_preprocess_page(&$variables): void { // (job_listing) content type. if ($entity->getType() === 'job_listing') { $variables['has_sidebar_second'] = TRUE; + $variables["#attached"]["library"][] = 'hdbt_subtheme/datetime_comparison'; } } } From f0afb94c88a318a5073959bfff63067c305504d6 Mon Sep 17 00:00:00 2001 From: rpnykanen Date: Thu, 25 Jul 2024 12:41:57 +0300 Subject: [PATCH 4/6] UHF-10341: added comment to the template --- .../hdbt_subtheme/templates/layout/node--job-listing.html.twig | 1 + 1 file changed, 1 insertion(+) diff --git a/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig b/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig index 87a70c4c..e7f25c09 100644 --- a/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig +++ b/public/themes/custom/hdbt_subtheme/templates/layout/node--job-listing.html.twig @@ -138,6 +138,7 @@ {% endif %} + {# The publication time is altered in custom javascript. #} {% set publication_starts = content.field_publication_starts %} {% set metadata = [ From 0de4539784e315b1d0181a6558d07249ebcdfe93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Kalij=C3=A4rvi?= Date: Tue, 30 Jul 2024 14:22:42 +0300 Subject: [PATCH 5/6] Converted double quotes to single quotes. --- public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme index 0ad8440d..70766697 100644 --- a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme +++ b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme @@ -76,7 +76,7 @@ function hdbt_subtheme_preprocess_organization_information_block(array &$variabl $organization_field = $variables['elements']['field_organization_override']['#items']; } else { - $organization_field = $variables["elements"]["field_organization"]["#items"]; + $organization_field = $variables['elements']['field_organization']['#items']; } // Get organization. @@ -86,8 +86,8 @@ function hdbt_subtheme_preprocess_organization_information_block(array &$variabl } // Set organization default image variable. - if (!empty($organization) && !empty($organization->get("field_default_image")->first())) { - $variables['content']['organization_default_image'] = $organization->get("field_default_image")->first()->view([ + if (!empty($organization) && !empty($organization->get('field_default_image')->first())) { + $variables['content']['organization_default_image'] = $organization->get('field_default_image')->first()->view([ 'type' => 'image', 'label' => 'hidden', 'settings' => [ @@ -170,7 +170,7 @@ function hdbt_subtheme_preprocess_page(&$variables): void { // (job_listing) content type. if ($entity->getType() === 'job_listing') { $variables['has_sidebar_second'] = TRUE; - $variables["#attached"]["library"][] = 'hdbt_subtheme/datetime_comparison'; + $variables['#attached']['library'][] = 'hdbt_subtheme/datetime_comparison'; } } } From dd98fac7a5d402092c3291994635bcafbc73d13b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Kalij=C3=A4rvi?= Date: Tue, 30 Jul 2024 14:34:36 +0300 Subject: [PATCH 6/6] Minified the helfi_datetime_comparison.js and use the minified version when loading the JS in the library. --- .../hdbt_subtheme/dist/js/helfi_datetime_comparison.min.js | 1 + .../themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml | 2 +- public/themes/custom/hdbt_subtheme/package-lock.json | 6 +++--- 3 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 public/themes/custom/hdbt_subtheme/dist/js/helfi_datetime_comparison.min.js diff --git a/public/themes/custom/hdbt_subtheme/dist/js/helfi_datetime_comparison.min.js b/public/themes/custom/hdbt_subtheme/dist/js/helfi_datetime_comparison.min.js new file mode 100644 index 00000000..41f85c93 --- /dev/null +++ b/public/themes/custom/hdbt_subtheme/dist/js/helfi_datetime_comparison.min.js @@ -0,0 +1 @@ +(Drupal=>{const t=Array.from(document.getElementsByClassName("job-listing__metadata-wrapper"))?.map((t=>t.getElementsByTagName("time")))?.map((t=>Array.from(t)))?.flat();if(!t)return;const e=new Date;Array.from(t).forEach((t=>{const a=new Date(t.getAttribute("datetime"));if(a.toDateString()===e.toDateString()){const e=a.getUTCMinutes()<10?`0${a.getMinutes()}`:a.getMinutes();t.innerText=`${Drupal.t("today")} ${a.getHours()}:${e}`}}))})(Drupal); \ No newline at end of file diff --git a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml index 5a46e548..42624f8a 100644 --- a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml +++ b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml @@ -16,6 +16,6 @@ siteimprove-analytics: datetime_comparison: version: 1.0 js: - src/js/helfi_datetime_comparison.js: {attributes: { defer: true }} + dist/js/helfi_datetime_comparison.min.js: {attributes: { defer: true }} dependencies: - core/drupal diff --git a/public/themes/custom/hdbt_subtheme/package-lock.json b/public/themes/custom/hdbt_subtheme/package-lock.json index 6f125351..3087f261 100644 --- a/public/themes/custom/hdbt_subtheme/package-lock.json +++ b/public/themes/custom/hdbt_subtheme/package-lock.json @@ -3343,9 +3343,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001636", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", - "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", + "version": "1.0.30001644", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001644.tgz", + "integrity": "sha512-YGvlOZB4QhZuiis+ETS0VXR+MExbFf4fZYYeMTEE0aTQd/RdIjkTyZjLrbYVKnHzppDvnOhritRVv+i7Go6mHw==", "funding": [ { "type": "opencollective",