Skip to content

fix eslint issues #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
finnlewis merged 3 commits into from
Nov 11, 2025
Merged

fix eslint issues #133

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
71b06d8
fix eslint issues
markconroy Oct 20, 2025
0b27e98
Merge branch '2.x' into fix/132-eslint-fixes
markconroy Nov 10, 2025
d31840c
add named functions, remove arrow functions
markconroy Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 134 additions & 82 deletions js/step-by-step-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,94 +3,146 @@
* Additional behaviour for the Step by step navigation.
*/

(function($, Drupal, drupalSettings) {
(function lgdStepByStepScript($, Drupal) {
Drupal.behaviors.lgdStepByStepNav = {
attach() {
const stepByStep = {};
stepByStep.showAllText = 'Show summaries';
stepByStep.hideAllText = 'Hide summaries';
stepByStep.showStepText = 'Show step summary';
stepByStep.hideStepText = 'Hide step summary';

const stepByStep = {};
stepByStep.showAllText = 'Show summaries';
stepByStep.hideAllText = 'Hide summaries';
stepByStep.showStepText = 'Show step summary';
stepByStep.hideStepText = 'Hide step summary';
// Set visibility based on specified button.step-show elements.
function summaryVisiblity(elements, cmd) {
switch (cmd) {
case 'show':
elements.each(function showSummary() {
const stepTitle = $(this)
.parents('.step__title')
.find('a')
.text();
$(this)
.parents('.step')
.find('.step__summary')
.addClass('step-show-summary');
$(this).text(stepByStep.hideStepText);
$(this).attr('aria-expanded', 'true');
$(this).attr(
'aria-label',
Drupal.t('Hide step summary - !summary_message', {
'!summary_message': stepTitle,
}),
);
});
// 'Hide all' control displayed if all steps are shown.
if ($('.step__summary').length === $('.step-show-summary').length) {
$('.step-master').text(stepByStep.hideAllText);
$('.summaries-control i')
.addClass('fa-eye-slash')
.removeClass('fa-eye');
}
break;

// Set visibility based on specified button.step-show elements.
function summaryVisiblity(elements, cmd) {
switch(cmd) {
case 'show':
elements.each(function() {
var stepTitle = $(this).parents('.step__title').find('a').text();
$(this).parents('.step').find('.step__summary').addClass('step-show-summary');
$(this).text(stepByStep.hideStepText);
$(this).attr("aria-expanded", "true");
$(this).attr('aria-label', Drupal.t("Hide step summary - !summary_message", {"!summary_message": stepTitle}));
});
// 'Hide all' control displayed if all steps are shown.
if ($('.step__summary').length === $('.step-show-summary').length) {
$('.step-master').text(stepByStep.hideAllText);
$('.summaries-control i').addClass('fa-eye-slash').removeClass('fa-eye');
}
break;

case 'hide':
elements.each(function() {
var stepTitle = $(this).parents('.step__title').find('a').text();
$(this).parents('.step').find('.step__summary').removeClass('step-show-summary');
$(this).attr("aria-expanded", "false");
$(this).text(stepByStep.showStepText);
$(this).attr('aria-label', Drupal.t("Show step summary - !summary_message", {"!summary_message": stepTitle}));
});
// 'Show all' control displayed if any steps are hidden.
$('.step-master').text(stepByStep.showAllText);
$('.summaries-control i').addClass('fa-eye').removeClass('fa-eye-slash');
break;
}
}
case 'hide':
elements.each(function hideSummary() {
const stepTitle = $(this)
.parents('.step__title')
.find('a')
.text();
$(this)
.parents('.step')
.find('.step__summary')
.removeClass('step-show-summary');
$(this).attr('aria-expanded', 'false');
$(this).text(stepByStep.showStepText);
$(this).attr(
'aria-label',
Drupal.t('Show step summary - !summary_message', {
'!summary_message': stepTitle,
}),
);
});
// 'Show all' control displayed if any steps are hidden.
$('.step-master').text(stepByStep.showAllText);
$('.summaries-control i')
.addClass('fa-eye')
.removeClass('fa-eye-slash');
break;

// Insert show all button.
$("<div class='summaries-control'><i class='fas fa-eye'></i><button aria-expanded='false' class='step-master ml-2'>" + stepByStep.showAllText + "</button></div>").insertBefore("ol.step-list");
default:
break;
}
}

// Insert hide/show button for each step.
function stepSummaryButton(isVisible, stepTitle) {
var $container = $("<span class='step-summary-container'>");
var $button = $("<button class='step-show'>");
$button.attr('aria-expanded', isVisible ? "true" : "false");
if (isVisible) {
$button.attr('aria-label', Drupal.t("Hide step summary - !summary_message", {"!summary_message": stepTitle}));
} else {
$button.attr('aria-label', Drupal.t("Show step summary - !summary_message", {"!summary_message": stepTitle}));
}
$button.text(isVisible ? stepByStep.hideStepText : stepByStep.showStepText);
$container.append($button);
return $container;
}
// Insert show all button.
$(
`<div class='summaries-control'><i class='fas fa-eye'></i><button aria-expanded='false' class='step-master ml-2'>${
stepByStep.showAllText
}</button></div>`,
).insertBefore('ol.step-list');

$("ol.step-list .step").each(function() {
var isVisible = $(this).hasClass('step--active');
var stepTitle = $(this).find('.step__title').text();
if (isVisible) {
$(this).find('.step__summary').addClass('step-show-summary');
}
$(this).find('.step__title').append(stepSummaryButton(isVisible, stepTitle));
});
// Insert hide/show button for each step.
function stepSummaryButton(isVisible, stepTitle) {
const $container = $("<span class='step-summary-container'>");
const $button = $("<button class='step-show'>");
$button.attr('aria-expanded', isVisible ? 'true' : 'false');
if (isVisible) {
$button.attr(
'aria-label',
Drupal.t('Hide step summary - !summary_message', {
'!summary_message': stepTitle,
}),
);
} else {
$button.attr(
'aria-label',
Drupal.t('Show step summary - !summary_message', {
'!summary_message': stepTitle,
}),
);
}
$button.text(
isVisible ? stepByStep.hideStepText : stepByStep.showStepText,
);
$container.append($button);
return $container;
}

// Show / hide all.
$('.step-master').on("click", function () {
$('.summaries-control i').toggleClass('fa-eye fa-eye-slash');
if ($(this).text() === stepByStep.showAllText) {
$(this).text(stepByStep.hideAllText).attr('aria-expanded', true);
summaryVisiblity($('.step-show'), 'show');
} else {
$(this).text(stepByStep.showAllText).attr('aria-expanded', false);
summaryVisiblity($('.step-show'), 'hide');
}
});
$('ol.step-list .step').each(function initializeStep() {
const isVisible = $(this).hasClass('step--active');
const stepTitle = $(this).find('.step__title').text();
if (isVisible) {
$(this).find('.step__summary').addClass('step-show-summary');
}
$(this)
.find('.step__title')
.append(stepSummaryButton(isVisible, stepTitle));
});

// Show / hide single step.
$('.step-show').on("click", function () {
$(this).parents('.step').find('.step__summary').toggleClass('step-show-summary');
if ($(this).text() === stepByStep.showStepText) {
summaryVisiblity($(this), 'show');
} else {
summaryVisiblity($(this), 'hide');
}
});
// Show / hide all.
$('.step-master').on('click', function toggleAllSteps() {
$('.summaries-control i').toggleClass('fa-eye fa-eye-slash');
if ($(this).text() === stepByStep.showAllText) {
$(this).text(stepByStep.hideAllText).attr('aria-expanded', true);
summaryVisiblity($('.step-show'), 'show');
} else {
$(this).text(stepByStep.showAllText).attr('aria-expanded', false);
summaryVisiblity($('.step-show'), 'hide');
}
});

// Show / hide single step.
$('.step-show').on('click', function toggleSingleStep() {
$(this)
.parents('.step')
.find('.step__summary')
.toggleClass('step-show-summary');
if ($(this).text() === stepByStep.showStepText) {
summaryVisiblity($(this), 'show');
} else {
summaryVisiblity($(this), 'hide');
}
});
},
};
})(jQuery, Drupal, drupalSettings);