diff --git a/modules/custom/az_select_menu/js/az-select-menu.es6.js b/modules/custom/az_select_menu/js/az-select-menu.es6.js index 3fb537097c..b866de0607 100644 --- a/modules/custom/az_select_menu/js/az-select-menu.es6.js +++ b/modules/custom/az_select_menu/js/az-select-menu.es6.js @@ -8,45 +8,47 @@ attach(context, settings) { // az_select_menu form id's are added in an array depending // on the page you are on, and how many select menus are on the page. - for (let i = 0; i < settings.azSelectMenu.ids.length; i++) { - const selectFormId = settings.azSelectMenu.ids[i]; - const selectForm = document.querySelector(`#${selectFormId}`); - once('azSelectMenu', selectForm, context).forEach((element) => { - $(element).popover(); - element.addEventListener('focus', (event) => { - Drupal.azSelectMenu.handleEvents(event); + Object.keys(settings.azSelectMenu.ids).forEach(function (property) { + if (settings.azSelectMenu.ids.hasOwnProperty(property)) { + const selectFormId = settings.azSelectMenu.ids[property]; + const selectForm = document.querySelector(`#${selectFormId}`); + once('azSelectMenu', selectForm, context).forEach((element) => { + $(element).popover(); + element.addEventListener('focus', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + element.addEventListener('change', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + element.addEventListener('mouseenter', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + const button = element.querySelector('button'); + button.addEventListener('click', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('touchstart', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('mouseenter', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('mouseleave', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('focus', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('blur', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + document.addEventListener('touchstart', (event) => { + Drupal.azSelectMenu.handleEvents(event); + }); + element.classList.add('processed'); }); - element.addEventListener('change', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - element.addEventListener('mouseenter', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - const button = element.querySelector('button'); - button.addEventListener('click', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('touchstart', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('mouseenter', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('mouseleave', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('focus', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('blur', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - document.addEventListener('touchstart', (event) => { - Drupal.azSelectMenu.handleEvents(event); - }); - element.classList.add('processed'); - }); - } + } + }); }, }; diff --git a/modules/custom/az_select_menu/js/az-select-menu.js b/modules/custom/az_select_menu/js/az-select-menu.js index 84b48f8447..bb7c4f948c 100644 --- a/modules/custom/az_select_menu/js/az-select-menu.js +++ b/modules/custom/az_select_menu/js/az-select-menu.js @@ -14,45 +14,47 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } Drupal.azSelectMenu = Drupal.azSelectMenu || {}; Drupal.behaviors.azSelectMenu = { attach: function attach(context, settings) { - for (var i = 0; i < settings.azSelectMenu.ids.length; i++) { - var selectFormId = settings.azSelectMenu.ids[i]; - var selectForm = document.querySelector("#".concat(selectFormId)); - once('azSelectMenu', selectForm, context).forEach(function (element) { - $(element).popover(); - element.addEventListener('focus', function (event) { - Drupal.azSelectMenu.handleEvents(event); + Object.keys(settings.azSelectMenu.ids).forEach(function (property) { + if (settings.azSelectMenu.ids.hasOwnProperty(property)) { + var selectFormId = settings.azSelectMenu.ids[property]; + var selectForm = document.querySelector("#".concat(selectFormId)); + once('azSelectMenu', selectForm, context).forEach(function (element) { + $(element).popover(); + element.addEventListener('focus', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + element.addEventListener('change', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + element.addEventListener('mouseenter', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + var button = element.querySelector('button'); + button.addEventListener('click', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('touchstart', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('mouseenter', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('mouseleave', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('focus', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + button.addEventListener('blur', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + document.addEventListener('touchstart', function (event) { + Drupal.azSelectMenu.handleEvents(event); + }); + element.classList.add('processed'); }); - element.addEventListener('change', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - element.addEventListener('mouseenter', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - var button = element.querySelector('button'); - button.addEventListener('click', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('touchstart', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('mouseenter', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('mouseleave', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('focus', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - button.addEventListener('blur', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - document.addEventListener('touchstart', function (event) { - Drupal.azSelectMenu.handleEvents(event); - }); - element.classList.add('processed'); - }); - } + } + }); } }; Drupal.azSelectMenu.handleEvents = function (event) { diff --git a/modules/custom/az_select_menu/src/Plugin/Block/AzSelectMenu.php b/modules/custom/az_select_menu/src/Plugin/Block/AzSelectMenu.php index cc1950c03f..13992c6a9d 100644 --- a/modules/custom/az_select_menu/src/Plugin/Block/AzSelectMenu.php +++ b/modules/custom/az_select_menu/src/Plugin/Block/AzSelectMenu.php @@ -2,6 +2,7 @@ namespace Drupal\az_select_menu\Plugin\Block; +use Drupal\Component\Utility\Html; use Drupal\Core\Block\Attribute\Block; use Drupal\Core\Form\FormStateInterface; use Drupal\Core\StringTranslation\TranslatableMarkup; @@ -129,9 +130,10 @@ public function blockSubmit($form, FormStateInterface $form_state) { public function build() { $build = parent::build(); + $menu_name = Html::getUniqueId('az-' . $build['#menu_name']); $form_attributes = new Attribute([ - 'id' => 'az-select-menu-' . $build['#menu_name'] . '-form', + 'id' => $menu_name . '-form', 'data-toggle' => 'popover', 'data-trigger' => 'focus', 'data-placement' => 'top', @@ -141,7 +143,7 @@ public function build() { $build['#form_attributes'] = $form_attributes; $select_attributes = new Attribute([ - 'id' => 'az-select-menu-' . $build['#menu_name'] . '-select', + 'id' => $menu_name . '-select', 'class' => [ 'form-control', 'select-primary', @@ -152,7 +154,7 @@ public function build() { $build['#select_attributes'] = $select_attributes; $button_attributes = new Attribute([ - 'id' => 'az-select-menu-' . $build['#menu_name'] . '-button', + 'id' => $menu_name . '-button', 'class' => [ 'btn', 'btn-primary', @@ -168,7 +170,7 @@ public function build() { $build['#button_attributes'] = $button_attributes; $build['#attached']['library'][] = 'az_select_menu/az_select_menu'; - $build['#attached']['drupalSettings']['azSelectMenu']['ids'][] = 'az-select-menu-' . $build['#menu_name'] . '-form'; + $build['#attached']['drupalSettings']['azSelectMenu']['ids'][$menu_name] = $menu_name . '-form'; return $build; } diff --git a/modules/custom/az_select_menu/templates/az-select-menu.html.twig b/modules/custom/az_select_menu/templates/az-select-menu.html.twig index 881f090eab..c966f24967 100644 --- a/modules/custom/az_select_menu/templates/az-select-menu.html.twig +++ b/modules/custom/az_select_menu/templates/az-select-menu.html.twig @@ -54,7 +54,7 @@
{% endif %} - + {% import _self as menus %} {% if items %}