diff --git a/assets/dev/js/editor/regions/navigator/layout.js b/assets/dev/js/editor/regions/navigator/layout.js index 04aebbe494d4..022e53c71343 100644 --- a/assets/dev/js/editor/regions/navigator/layout.js +++ b/assets/dev/js/editor/regions/navigator/layout.js @@ -15,16 +15,19 @@ export default class extends Marionette.LayoutView { toggleButtonIcon: '#elementor-navigator__toggle-all i', toggleButtonA11yText: '#elementor-navigator__toggle-all span', closeButton: '#elementor-navigator__close', - aiTitlesButton: '#elementor-navigator__ai-titles', }; } + behaviors() { + const behaviors = {}; + return elementor.hooks.applyFilters( 'navigator/layout/behaviors', behaviors, this ); + } + events() { return { 'click @ui.toggleButton': 'toggleElements', 'click @ui.closeButton': 'onCloseButtonClick', 'keyup @ui.closeButton': 'onCloseButtonKeyPress', - 'click @ui.aiTitlesButton': 'aiTitleClickHandler', }; } @@ -34,18 +37,6 @@ export default class extends Marionette.LayoutView { }; } - aiTitleClickHandler() { - window.location.hash = 'welcome-ai-return-to-ai-titles'; - window.addEventListener( 'hashchange', this.handleHashChange.bind( this ) ); - } - - handleHashChange() { - if ( elementorCommon.config.library_connect?.is_connected && window.location.hash.includes( 'ai-titles' ) ) { - window.location.hash = ''; - window.location.reload(); - } - } - toggleElements() { const state = 'expand' === this.ui.toggleButton.data( 'elementor-action' ), a11yText = state ? __( 'Collapse all elements', 'elementor' ) : __( 'Expand all elements', 'elementor' ), @@ -79,9 +70,6 @@ export default class extends Marionette.LayoutView { } onShow() { - if ( elementorCommon.config.library_connect?.is_connected ) { - this.ui.aiTitlesButton.remove(); - } this.elements.show( new ElementView( { model: elementor.elementsModel, } ) ); diff --git a/includes/editor-templates/navigator.php b/includes/editor-templates/navigator.php index cfdb64362358..b11efa6588e4 100644 --- a/includes/editor-templates/navigator.php +++ b/includes/editor-templates/navigator.php @@ -36,9 +36,6 @@ -

', { + id: 'elementor-navigator__ai-titles', + } ); + $button.html( '' ); + return $button[ 0 ].outerHTML; + }, + + aiTitleClickHandler() { + window.location.hash = 'welcome-ai-return-to-ai-titles'; + window.addEventListener( 'hashchange', this.handleHashChange.bind( this ) ); + }, + + handleHashChange() { + if ( elementorCommon.config.library_connect?.is_connected && window.location.hash.includes( 'ai-titles' ) ) { + window.location.hash = ''; + window.location.reload(); + } + }, + + onShow() { + if ( elementorCommon.config.library_connect?.is_connected ) { + this.ui.aiTitlesButton.remove(); + } else { + const $targetElement = this.view.$el.find( '#elementor-navigator__toggle-all' ); + + if ( $targetElement.length ) { + $targetElement.after( this.getTemplate() ); + } + } + }, +} ); +export default ApplyAiTitlesNavigatorBehavior; diff --git a/modules/ai/assets/js/editor/module.js b/modules/ai/assets/js/editor/module.js index 0ce50b7a0b2f..013f275aceb5 100644 --- a/modules/ai/assets/js/editor/module.js +++ b/modules/ai/assets/js/editor/module.js @@ -7,6 +7,7 @@ import { AiGetStartedConnect } from './ai-get-started-connect'; import { getUiConfig } from './utils/editor-integration'; import { getRemoteFrontendConfig } from './api'; import { getUniqueId } from './context/requests-ids'; +import ApplyAiTitlesNavigatorBehavior from './integration/navigator/apply-ai-titles-to-navigator-behaviour'; setTimeout( async () => { if ( '1' !== window.ElementorAiConfig?.is_get_started ) { @@ -42,6 +43,8 @@ setTimeout( async () => { export default class Module extends elementorModules.editor.utils.Module { onElementorInit() { elementor.hooks.addFilter( 'controls/base/behaviors', this.registerControlBehavior.bind( this ) ); + elementor.hooks.addFilter( 'navigator/layout/behaviors', this.registerNavigatorBehavior.bind( this ) ); + window.addEventListener( 'hashchange', function( e ) { if ( e.newURL.includes( 'welcome-ai' ) ) { const source = e.newURL.includes( 'welcome-ai-whats-new' ) ? 'whats-new' : 'connect'; @@ -70,6 +73,13 @@ export default class Module extends elementorModules.editor.utils.Module { } } ); } + + registerNavigatorBehavior( behaviors ) { + behaviors.ai = { + behaviorClass: ApplyAiTitlesNavigatorBehavior, + }; + return behaviors; + } registerControlBehavior( behaviors, view ) { const aiOptions = view.options.model.get( 'ai' );