widget = $widget;
$this->settings = $widget->get_settings_for_display();
$this->widget_number = $widget->get_id_int();
}
/**
* Print the whole menu.
*/
public function render() {
$items = isset( $this->settings['eael_mega_menu_items'] ) ? (array) $this->settings['eael_mega_menu_items'] : [];
/**
* Filter the Mega Menu repeater rows right before rendering.
*
* @since 6.3.0
*
* @param array $items Repeater rows.
* @param Widget_Base $widget Widget instance.
*/
$items = apply_filters( 'eael/mega-menu/menu_items', $items, $this->widget );
if ( empty( $items ) ) {
return;
}
foreach ( $items as $index => $item ) {
$this->prepared_items[ $index ] = $this->eael_mega_menu_prepare_item( $item, $index, $this->widget_number );
}
$container_id = 'eael-mega-menu-container-' . $this->widget_number;
$has_toggle = $this->has_mobile_toggle();
$this->print_section_source_styles();
$this->print_collapse_styles();
$this->widget->add_render_attribute( 'eael_mega_menu_wrapper', [
'class' => $this->get_wrapper_classes(),
'data-widget-number' => $this->widget_number,
'data-trigger' => $this->get_trigger(),
'data-breakpoint' => $this->get_breakpoint(),
'data-touch-mode' => 'false',
'aria-label' => esc_attr__( 'Mega Menu', 'essential-addons-for-elementor-lite' ),
] );
?>
prepared_items as $prepared ) {
if ( 'section' !== $prepared['type'] ) {
continue;
}
// Re-reduced to `[A-Za-z0-9_-]` at the point of output. The value lands
// inside a ',
(int) $this->widget_number,
implode( ',', array_unique( $selectors ) ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Selector list built only from ids reduced to [A-Za-z0-9_-] above.
);
}
/**
* Show the collapsed chrome from the very first paint.
*
* The layout switch itself is a class the handler adds once it has measured
* the device, which is a frame or more after the browser has already painted
* — so a phone showed the full menu bar and then snapped to a hamburger. The
* fix has to be CSS, and it has to be printed here rather than live in the
* stylesheet: which breakpoint collapses is a per widget setting, and the
* pixel value behind it belongs to the site's Elementor breakpoints, which
* can be edited in Site Settings. Only render time knows both.
*
* Deliberately just the three declarations that decide *which chrome shows*,
* not a copy of the collapsed layout: the handler still owns that. Both
* states agree, so when the class lands nothing moves.
*/
protected function print_collapse_styles() {
if ( ! $this->has_mobile_toggle() ) {
return;
}
$width = $this->get_breakpoint_width();
if ( ! $width ) {
return;
}
$root = '.eael-mega-menu[data-widget-number="' . (int) $this->widget_number . '"]';
// The dropdown rule excludes the open state rather than relying on being
// outranked by it. An attribute selector weighs the same as a class, so
// this selector ties with `--mobile--menu-open` at (0,3,0) — and printed
// in the body it comes later, so on a tie it wins and the menu could never
// be opened. Narrowing it to the closed state removes the contest.
printf(
'',
(int) $this->widget_number,
(int) $width,
$root // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Built from an integer widget id only.
);
}
/**
* Pixel width of the breakpoint this instance collapses at.
*
* @return int Zero when it cannot be resolved, which skips the inline rule.
*/
protected function get_breakpoint_width() {
$breakpoint = $this->get_breakpoint();
if ( 'none' === $breakpoint || ! isset( Plugin::$instance->breakpoints ) || ! is_object( Plugin::$instance->breakpoints ) ) {
return 0;
}
$active = Plugin::$instance->breakpoints->get_active_breakpoints();
if ( empty( $active[ $breakpoint ] ) || ! method_exists( $active[ $breakpoint ], 'get_value' ) ) {
return 0;
}
return (int) $active[ $breakpoint ]->get_value();
}
/**
* Print every nested container that belongs to an item with a submenu.
*/
protected function render_panels() {
foreach ( $this->prepared_items as $prepared ) {
if ( ! $prepared['has_submenu'] ) {
continue;
}
if ( 'template' === $prepared['type'] ) {
$this->render_template_panel( $prepared );
continue;
}
if ( 'section' === $prepared['type'] ) {
$this->render_section_panel( $prepared );
continue;
}
$this->widget->print_child( $prepared['index'], $prepared );
}
}
/**
* Print an empty panel that the handler fills with an existing element.
*
* The referenced section is a normal Elementor element rendered elsewhere on
* the page, so it cannot be pulled in server side. The panel is printed with
* the id to look for and the frontend handler moves that node into it — a
* move, not a copy, so the id stays unique.
*
* @param array $prepared Prepared repeater row.
*/
protected function render_section_panel( $prepared ) {
if ( '' === $prepared['section_id'] ) {
return;
}
$key = 'eael_mega_menu_section_panel_' . $prepared['index'];
$this->widget->add_render_attribute( $key, [
'id' => $prepared['panel_id'],
'class' => [ 'eael-mega-menu__panel', 'eael-mega-menu__panel--section' ],
'aria-labelledby' => $prepared['item_id'],
'data-item-index' => $prepared['position'],
'data-width-mode' => $prepared['width_mode'],
'data-section-id' => $prepared['section_id'],
'style' => '--eael-mm-order: ' . ( (int) $prepared['position'] * 2 + 1 ) . ';',
] );
?>