| 1 |
/** |
| 2 |
* Interactive setup steps for the MainWP Control page. |
| 3 |
* |
| 4 |
* @package MainWP\Dashboard |
| 5 |
*/ |
| 6 |
|
| 7 |
jQuery(function ($) { |
| 8 |
const stepList = $('#mainwp-control-steps'); |
| 9 |
|
| 10 |
if (!stepList.length) { |
| 11 |
return; |
| 12 |
} |
| 13 |
|
| 14 |
const steps = stepList.find('[data-step-index]'); |
| 15 |
const panels = $('#mainwp-control-step-panels').find('[data-step-panel]'); |
| 16 |
|
| 17 |
const activateStep = (stepIndex, moveFocus = false) => { |
| 18 |
const targetIndex = Number.parseInt(stepIndex, 10); |
| 19 |
|
| 20 |
if (Number.isNaN(targetIndex) || targetIndex < 0 || targetIndex >= steps.length) { |
| 21 |
return; |
| 22 |
} |
| 23 |
|
| 24 |
steps.each(function (index) { |
| 25 |
const step = $(this); |
| 26 |
const isActive = index === targetIndex; |
| 27 |
|
| 28 |
step.toggleClass('active', isActive); |
| 29 |
step.toggleClass('completed', index < targetIndex); |
| 30 |
step.attr('aria-selected', isActive ? 'true' : 'false'); |
| 31 |
step.attr('tabindex', isActive ? '0' : '-1'); |
| 32 |
|
| 33 |
if (isActive) { |
| 34 |
step.attr('aria-current', 'step'); |
| 35 |
} else { |
| 36 |
step.removeAttr('aria-current'); |
| 37 |
} |
| 38 |
}); |
| 39 |
|
| 40 |
panels.each(function () { |
| 41 |
const panel = $(this); |
| 42 |
panel.prop('hidden', Number.parseInt(panel.data('step-panel'), 10) !== targetIndex); |
| 43 |
}); |
| 44 |
|
| 45 |
if (moveFocus) { |
| 46 |
steps.eq(targetIndex).trigger('focus'); |
| 47 |
} |
| 48 |
}; |
| 49 |
|
| 50 |
steps.on('click', function () { |
| 51 |
activateStep($(this).data('step-index')); |
| 52 |
}); |
| 53 |
|
| 54 |
$('.mainwp-control-step-navigation').on('click', function (event) { |
| 55 |
event.preventDefault(); |
| 56 |
activateStep($(this).data('step-index'), true); |
| 57 |
stepList.get(0).scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| 58 |
}); |
| 59 |
|
| 60 |
steps.on('keydown', function (event) { |
| 61 |
const currentIndex = Number.parseInt($(this).data('step-index'), 10); |
| 62 |
let targetIndex = currentIndex; |
| 63 |
|
| 64 |
if ('ArrowRight' === event.key || 'ArrowDown' === event.key) { |
| 65 |
targetIndex = (currentIndex + 1) % steps.length; |
| 66 |
} else if ('ArrowLeft' === event.key || 'ArrowUp' === event.key) { |
| 67 |
targetIndex = (currentIndex - 1 + steps.length) % steps.length; |
| 68 |
} else if ('Home' === event.key) { |
| 69 |
targetIndex = 0; |
| 70 |
} else if ('End' === event.key) { |
| 71 |
targetIndex = steps.length - 1; |
| 72 |
} else if ('Enter' !== event.key && ' ' !== event.key) { |
| 73 |
return; |
| 74 |
} |
| 75 |
|
| 76 |
event.preventDefault(); |
| 77 |
activateStep(targetIndex, true); |
| 78 |
}); |
| 79 |
|
| 80 |
const handleCircularStepsResize = () => { |
| 81 |
stepList.toggleClass('vertical', window.innerWidth <= 768); |
| 82 |
}; |
| 83 |
|
| 84 |
handleCircularStepsResize(); |
| 85 |
$(window).on('resize', handleCircularStepsResize); |
| 86 |
}); |
| 87 |
|
