From 44d21ccb7a38eeac0350ff24b0dfff9c0da7e2df Mon Sep 17 00:00:00 2001 From: Yeni Atencio Date: Tue, 26 Nov 2024 20:17:30 +1100 Subject: [PATCH 1/4] added logic for landing page --- ...ing_page.field_landing_page_hero_theme.yml | 4 +- .../tide_landing_page/js/hero_image_theme.js | 38 +++++++++++++++ .../tests/behat/features/fields.feature | 48 +++++++++++++++++++ .../tide_landing_page.install | 21 ++++++++ .../tide_landing_page.libraries.yml | 1 + .../tide_landing_page.module | 40 ++++++++++++++-- .../tide_publication/tide_publication.module | 7 +-- 7 files changed, 149 insertions(+), 10 deletions(-) create mode 100644 modules/tide_landing_page/js/hero_image_theme.js diff --git a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml index 087e8ca17..6a6628c5a 100644 --- a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml +++ b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml @@ -10,9 +10,9 @@ id: node.landing_page.field_landing_page_hero_theme field_name: field_landing_page_hero_theme entity_type: node bundle: landing_page -label: Here image theme +label: Hero image theme description: 'If your hero image is mostly dark, apply the dark theme. This changes how the page title is displayed.' -required: false +required: true translatable: false default_value: { } default_value_callback: '' diff --git a/modules/tide_landing_page/js/hero_image_theme.js b/modules/tide_landing_page/js/hero_image_theme.js new file mode 100644 index 000000000..8c3d2c1f6 --- /dev/null +++ b/modules/tide_landing_page/js/hero_image_theme.js @@ -0,0 +1,38 @@ +(function (Drupal) { + "use strict"; + + Drupal.behaviors.heroImageTheme = { + attach: function (context, settings) { + const imageTheme = context.querySelector( + 'select[data-drupal-selector^="edit-field-landing-page-hero-theme"]' + ); + + if (imageTheme !== null) { + setImageTheme(); + + const headerStyles = context.querySelectorAll( + 'input[data-drupal-selector^="edit-header-style-options"]' + ); + + if (headerStyles.length > 0) { + headerStyles.forEach((style) => { + style.addEventListener("change", setImageTheme); + }); + } + } + + function setImageTheme() { + const selectedHeaderStyle = document.querySelector( + 'input[data-drupal-selector^="edit-header-style-options"]:checked' + ); + + if (!selectedHeaderStyle) { + return; // Exit if no style option is selected. + } + + let defaultHeaderStyle = selectedHeaderStyle.value; + imageTheme.disabled = defaultHeaderStyle === "corner" ? false : true; + } + }, + }; +})(Drupal); diff --git a/modules/tide_landing_page/tests/behat/features/fields.feature b/modules/tide_landing_page/tests/behat/features/fields.feature index 53568ea26..542c1b1cb 100644 --- a/modules/tide_landing_page/tests/behat/features/fields.feature +++ b/modules/tide_landing_page/tests/behat/features/fields.feature @@ -27,6 +27,7 @@ Feature: Fields for Landing Page content type And I should see text matching "Call to action banner" And I should see text matching "No Hero Banner with CTA added yet." And I should see the button "Add Hero banner with CTA" in the "content" region + And I should see a "select#edit-field-landing-page-hero-theme" element And the "#edit-field-landing-page-hero-logo" element should contain "Logo" And I should see an "input#edit-field-landing-page-hero-logo-entity-browser-entity-browser-open-modal" element @@ -34,6 +35,7 @@ Feature: Fields for Landing Page content type And I select the radio button "Corner graphics" And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic" And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element + And I should see a "select#edit-field-landing-page-hero-theme" element And I click on the horizontal tab "Header extras" And I should see text matching "Header components" @@ -156,6 +158,7 @@ Feature: Fields for Landing Page content type And I should see text matching "Call to action banner" And I should see text matching "No Hero Banner with CTA added yet." And I should see the button "Add Hero banner with CTA" in the "content" region + And I should see a "select#edit-field-landing-page-hero-theme" element And the "#edit-field-landing-page-hero-logo" element should contain "Logo" And I should see an "input#edit-field-landing-page-hero-logo-entity-browser-entity-browser-open-modal" element @@ -163,6 +166,7 @@ Feature: Fields for Landing Page content type And I select the radio button "Corner graphics" And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic" And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element + And I should see a "select#edit-field-landing-page-hero-theme" element And I click on the horizontal tab "Header extras" And I should see text matching "Header components" @@ -300,3 +304,47 @@ Feature: Fields for Landing Page content type # This field can be "seen" but not visible. And I see field "field_landing_page_component[0][subform][field_customise][value]" And save screenshot + +@api @javascript + Scenario: Selecting Corner graphics value from header style. + Given I am logged in as a user with the "editor" role + When I visit "node/add/landing_page" + And I click on the horizontal tab "Customised Header" + Then I should see an "#edit-header-style-options-corner" element + And I select "corner" from "edit-header-style-options-corner" + Then I should see an "#edit-field-landing-page-hero-theme" element + And I should see text matching "Light" + And save screenshot + + @api @javascript + Scenario: Selecting Default appearance value from header style. + Given I am logged in as a user with the "editor" role + When I visit "node/add/landing_page" + And I click on the horizontal tab "Customised Header" + Then I should see an "#edit-header-style-options-default" element + And I select "corner" from "edit-header-style-options-default" + Then I should see an "#edit-field-landing-page-hero-theme" element + And I should see text matching "Light" + And save screenshot + +@api @javascript + Scenario: Selecting Full-width background image value from header style. + Given I am logged in as a user with the "editor" role + When I visit "node/add/landing_page" + And I click on the horizontal tab "Customised Header" + Then I should see an "#edit-header-style-options-fullwidtht" element + And I select "corner" from "edit-header-style-options-fullwidth" + Then I should see an "#edit-field-landing-page-hero-theme" element + And I should see text matching "Dark" + And save screenshot + +@api @javascript + Scenario: Selecting Call to action banner value from header style. + Given I am logged in as a user with the "editor" role + When I visit "node/add/landing_page" + And I click on the horizontal tab "Customised Header" + Then I should see an "#edit-header-style-options-cta" element + And I select "corner" from "edit-header-style-options-cta" + Then I should see an "#edit-field-landing-page-hero-theme" element + And I should see text matching "Light" + And save screenshot diff --git a/modules/tide_landing_page/tide_landing_page.install b/modules/tide_landing_page/tide_landing_page.install index de73d8b3d..39e7e8f5f 100644 --- a/modules/tide_landing_page/tide_landing_page.install +++ b/modules/tide_landing_page/tide_landing_page.install @@ -203,3 +203,24 @@ function tide_landing_page_update_10107() { $tide_update_helper = \Drupal::service('tide_core.entity_update_helper'); $tide_update_helper->revert('field_config', 'paragraph.key_journeys.field_paragraph_title'); } + +/** + * Set field `field_landing_page_hero_theme` to mandatory. + */ +function tide_landing_page_update_10108() { + $bundles = [ + 'landing_page', + 'publication', + 'publication_page', + ]; + + foreach ($bundles as $bundle) { + $field = FieldConfig::loadByName('node', $bundle, 'field_landing_page_hero_theme'); + if (!empty($field)) { + $field->setLabel('Hero image theme'); + $field->setRequired(TRUE); + $field->setDefaultValue('light'); + $field->save(); + } + } +} diff --git a/modules/tide_landing_page/tide_landing_page.libraries.yml b/modules/tide_landing_page/tide_landing_page.libraries.yml index 9f056fcd9..a0928ca57 100644 --- a/modules/tide_landing_page/tide_landing_page.libraries.yml +++ b/modules/tide_landing_page/tide_landing_page.libraries.yml @@ -5,5 +5,6 @@ landing_page_form: js: js/hide_elements.js: {} js/statistics_grid.js: {} + js/hero_image_theme.js: {} dependencies: - core/jquery diff --git a/modules/tide_landing_page/tide_landing_page.module b/modules/tide_landing_page/tide_landing_page.module index fe1d0196b..f3386c546 100644 --- a/modules/tide_landing_page/tide_landing_page.module +++ b/modules/tide_landing_page/tide_landing_page.module @@ -5,7 +5,9 @@ * Tide Landing Page module functionality. */ -use Drupal\Core\Cache\Cache; +use Drupal\Core\Ajax\AjaxResponse; +use Drupal\Core\Ajax\InvokeCommand; + use Drupal\Core\Cache\Cache; use Drupal\Core\Field\WidgetBase; use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Render\Element; @@ -371,6 +373,34 @@ function tide_landing_page_field_widget_single_element_paragraphs_form_alter(&$e } } +/** + * Function to set value to Hero image theme. + * + * @param array $form + * The form. + * @param Drupal\Core\Form\FormStateInterface $form_state + * The form state. + * + * @return Drupal\Core\Ajax\AjaxResponse + * The response. + */ +function tide_landing_page_set_value_hero_image_theme(array $form, FormStateInterface $form_state): AjaxResponse { + $response = new AjaxResponse(); + $value = $form_state->getValue('_header_style_options'); + if ($value === 'fullwidth') { + return $response->addCommand(new InvokeCommand( + '#edit-field-landing-page-hero-theme', + 'val', + ['dark'] + )); + } + return $response->addCommand(new InvokeCommand( + '#edit-field-landing-page-hero-theme', + 'val', + ['light'] + )); +} + /** * Node form #process callback. * @@ -405,14 +435,18 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa 'corner' => t('Corner graphics'), 'cta' => t('Call to action banner'), ], + '#ajax' => [ + 'callback' => 'tide_landing_page_set_value_hero_image_theme', + ], ]; - - $form['field_landing_page_hero_image']['#states']['visible'] = [ + $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme']['#states']['disabled'] = [ ':input[name="_header_style_options"]' => [ + ['value' => 'default'], ['value' => 'fullwidth'], ['value' => 'cta'], ], ]; + $form['field_graphical_image']['#states']['visible'] = [ ':input[name="_header_style_options"]' => ['value' => 'corner'], ]; diff --git a/modules/tide_publication/tide_publication.module b/modules/tide_publication/tide_publication.module index 7dd65b6e5..47d35b5dd 100644 --- a/modules/tide_publication/tide_publication.module +++ b/modules/tide_publication/tide_publication.module @@ -128,11 +128,8 @@ function _tide_publication_form_node_form_process(array $form, FormStateInterfac ], ]; - $form['field_landing_page_hero_image']['#states']['visible'] = [ - ':input[name="_header_style_options"]' => [ - ['value' => 'fullwidth'], - ['value' => 'cta'], - ], + $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme']['#states']['enabled'] = [ + ':input[name="_header_style_options"]' => ['value' => 'corner'], ]; // Determine the initial value of Header style. From f17cdaaee8642791d631c9bc2f224a80157eebfb Mon Sep 17 00:00:00 2001 From: Yeni Atencio Date: Tue, 26 Nov 2024 20:27:14 +1100 Subject: [PATCH 2/4] fixed lint --- modules/tide_landing_page/tide_landing_page.module | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/tide_landing_page/tide_landing_page.module b/modules/tide_landing_page/tide_landing_page.module index f3386c546..6b9007d56 100644 --- a/modules/tide_landing_page/tide_landing_page.module +++ b/modules/tide_landing_page/tide_landing_page.module @@ -7,7 +7,7 @@ use Drupal\Core\Ajax\AjaxResponse; use Drupal\Core\Ajax\InvokeCommand; - use Drupal\Core\Cache\Cache; +use Drupal\Core\Cache\Cache; use Drupal\Core\Field\WidgetBase; use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Render\Element; From 3ea0988f19fc2228f0326b79b889793ee4470a8f Mon Sep 17 00:00:00 2001 From: Yeni Atencio Date: Tue, 26 Nov 2024 22:59:12 +1100 Subject: [PATCH 3/4] reverting back to fully js --- .../tide_landing_page/js/hero_image_theme.js | 2 ++ .../tide_landing_page.module | 33 ------------------- 2 files changed, 2 insertions(+), 33 deletions(-) diff --git a/modules/tide_landing_page/js/hero_image_theme.js b/modules/tide_landing_page/js/hero_image_theme.js index 8c3d2c1f6..f8c7b7b36 100644 --- a/modules/tide_landing_page/js/hero_image_theme.js +++ b/modules/tide_landing_page/js/hero_image_theme.js @@ -32,6 +32,8 @@ let defaultHeaderStyle = selectedHeaderStyle.value; imageTheme.disabled = defaultHeaderStyle === "corner" ? false : true; + imageTheme.value = + defaultHeaderStyle === "fullwidth" ? "dark" : "light"; } }, }; diff --git a/modules/tide_landing_page/tide_landing_page.module b/modules/tide_landing_page/tide_landing_page.module index 6b9007d56..896fc8b35 100644 --- a/modules/tide_landing_page/tide_landing_page.module +++ b/modules/tide_landing_page/tide_landing_page.module @@ -5,8 +5,6 @@ * Tide Landing Page module functionality. */ -use Drupal\Core\Ajax\AjaxResponse; -use Drupal\Core\Ajax\InvokeCommand; use Drupal\Core\Cache\Cache; use Drupal\Core\Field\WidgetBase; use Drupal\Core\Form\FormStateInterface; @@ -373,34 +371,6 @@ function tide_landing_page_field_widget_single_element_paragraphs_form_alter(&$e } } -/** - * Function to set value to Hero image theme. - * - * @param array $form - * The form. - * @param Drupal\Core\Form\FormStateInterface $form_state - * The form state. - * - * @return Drupal\Core\Ajax\AjaxResponse - * The response. - */ -function tide_landing_page_set_value_hero_image_theme(array $form, FormStateInterface $form_state): AjaxResponse { - $response = new AjaxResponse(); - $value = $form_state->getValue('_header_style_options'); - if ($value === 'fullwidth') { - return $response->addCommand(new InvokeCommand( - '#edit-field-landing-page-hero-theme', - 'val', - ['dark'] - )); - } - return $response->addCommand(new InvokeCommand( - '#edit-field-landing-page-hero-theme', - 'val', - ['light'] - )); -} - /** * Node form #process callback. * @@ -435,9 +405,6 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa 'corner' => t('Corner graphics'), 'cta' => t('Call to action banner'), ], - '#ajax' => [ - 'callback' => 'tide_landing_page_set_value_hero_image_theme', - ], ]; $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme']['#states']['disabled'] = [ ':input[name="_header_style_options"]' => [ From f4f34fe2a919f90968c887a6c3697ccec4c766f1 Mon Sep 17 00:00:00 2001 From: Yeni Atencio Date: Tue, 3 Dec 2024 08:26:06 +1100 Subject: [PATCH 4/4] hide hero image when corner graphic and default appearance --- modules/tide_landing_page/tide_landing_page.module | 7 +++++++ modules/tide_publication/tide_publication.module | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/modules/tide_landing_page/tide_landing_page.module b/modules/tide_landing_page/tide_landing_page.module index 896fc8b35..51d91ea7c 100644 --- a/modules/tide_landing_page/tide_landing_page.module +++ b/modules/tide_landing_page/tide_landing_page.module @@ -414,6 +414,13 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa ], ]; + $form['field_landing_page_hero_image']['#states']['visible'] = [ + ':input[name="_header_style_options"]' => [ + ['value' => 'fullwidth'], + ['value' => 'cta'], + ], + ]; + $form['field_graphical_image']['#states']['visible'] = [ ':input[name="_header_style_options"]' => ['value' => 'corner'], ]; diff --git a/modules/tide_publication/tide_publication.module b/modules/tide_publication/tide_publication.module index 47d35b5dd..8f5df3c6a 100644 --- a/modules/tide_publication/tide_publication.module +++ b/modules/tide_publication/tide_publication.module @@ -132,6 +132,12 @@ function _tide_publication_form_node_form_process(array $form, FormStateInterfac ':input[name="_header_style_options"]' => ['value' => 'corner'], ]; + $form['field_landing_page_hero_image']['#states']['visible'] = [ + ':input[name="_header_style_options"]' => [ + ['value' => 'fullwidth'], + ['value' => 'cta'], + ], + ]; // Determine the initial value of Header style. $node_hero_image_empty = $node->get('field_landing_page_hero_image')->isEmpty(); $header_style = 'default';