TMZ-279 Header layout and updates

modules/template-parts/assets/js/frontend.js

@@ -0,0 +1,13 @@
+export default class HelloPlusHeaderFe extends elementorModules.Module {
+	constructor() {
+		super();
+
+		elementorFrontend.elementsHandler.attachHandler( 'ehp-header', [
+			() => import( /* webpackChunkName: 'js/ehp-hader-fe' */ './handlers/hello-plus-header-fe' ),
+		] );
+	}
+}
+
+window.addEventListener( 'elementor/frontend/init', () => {
+	new HelloPlusHeaderFe();
+} );

modules/template-parts/assets/js/hello-plus-header.js → modules/template-parts/assets/js/handlers/hello-plus-header-fe.js

@@ -1,13 +1,6 @@
-class elementorHelloPlusHeaderHandler {
-    constructor() {
-        this.initSettings();
-        this.initElements();
-        this.bindEvents();
-		this.lastScrollY = window.scrollY;
-    }
-
-    initSettings() {
-        this.settings = {
+export default class HelloPlusHeaderHandler extends elementorModules.frontend.handlers.Base {
+    getDefaultSettings() {
+        return {
             selectors: {
                 main: '.ehp-header',
                 navigationToggle: '.ehp-header__button-toggle',
@@ -32,17 +25,18 @@ class elementorHelloPlusHeaderHandler {
         };
     }
 
-    initElements() {
-        this.elements = {
-            window,
-            main: document.querySelector( this.settings.selectors.main ),
-            navigationToggle: document.querySelector( this.settings.selectors.navigationToggle ),
-			dropdownToggle: document.querySelectorAll( this.settings.selectors.dropdownToggle ),
-			navigation: document.querySelector( this.settings.selectors.navigation ),
-			dropdown: document.querySelector( this.settings.selectors.dropdown ),
-			wpAdminBar: document.querySelector( this.settings.selectors.wpAdminBar ),
-        };
-    }
+	getDefaultElements() {
+		const selectors = this.getSettings( 'selectors' );
+
+		return {
+			main: this.$element[ 0 ].querySelector( selectors.main ),
+			navigationToggle: this.$element[ 0 ].querySelector( selectors.navigationToggle ),
+			dropdownToggle: this.$element[ 0 ].querySelectorAll( selectors.dropdownToggle ),
+			navigation: this.$element[ 0 ].querySelector( selectors.navigation ),
+			dropdown: this.$element[ 0 ].querySelector( selectors.dropdown ),
+			wpAdminBar: document.querySelector( selectors.wpAdminBar ),
+		};
+	}
 
     bindEvents() {
 		if ( this.elements.navigationToggle ) {
@@ -58,13 +52,19 @@ class elementorHelloPlusHeaderHandler {
 		if ( this.elements.main ) {
 			window.addEventListener( 'resize', () => this.onResize() );
 			window.addEventListener( 'scroll', () => this.onScroll() );
-
-			this.onInit();
 		}
     }
 
-	onInit() {
-		const { none, no, always, scrollUp } = this.settings.constants;
+	onInit( ...args ) {
+		super.onInit( ...args );
+
+		this.initDefaultState();
+	}
+
+	initDefaultState() {
+		this.lastScrollY = window.scrollY;
+
+		const { none, no, always, scrollUp } = this.getSettings( 'constants' );
 
 		this.handleAriaAttributesMenu();
 		this.handleAriaAttributesDropdown();
@@ -80,26 +80,26 @@ class elementorHelloPlusHeaderHandler {
 	}
 
 	getBehaviorFloat() {
-		const { dataBehaviorFloat } = this.settings.constants;
+		const { dataBehaviorFloat } = this.getSettings( 'constants' );
 		return this.elements.main.getAttribute( dataBehaviorFloat );
 	}
 
 	getDataScrollBehavior() {
-		const { dataScrollBehavior } = this.settings.constants;
+		const { dataScrollBehavior } = this.getSettings( 'constants' );
 		return this.elements.main.getAttribute( dataScrollBehavior );
 	}
 
 	setupInnerContainer() {
-		this.elements.main.closest( '.e-con-inner' ).classList.add( 'e-con-inner--ehp-header' );
-		this.elements.main.closest( '.e-con' ).classList.add( 'e-con--ehp-header' );
+		this.elements.main.closest( '.e-con-inner' )?.classList.add( 'e-con-inner--ehp-header' );
+		this.elements.main.closest( '.e-con' )?.classList.add( 'e-con--ehp-header' );
 	}
 
 	onResize() {
 		this.handleAriaAttributesMenu();
 	}
 
 	onScroll() {
-		const { scrollUp, always } = this.settings.constants;
+		const { scrollUp, always } = this.getSettings( 'constants' );
 
 		if ( scrollUp === this.getDataScrollBehavior() || always === this.getDataScrollBehavior() ) {
 			this.handleScrollDown( this.getDataScrollBehavior() );
@@ -155,7 +155,7 @@ class elementorHelloPlusHeaderHandler {
 	}
 
 	handleScrollDown( behaviorOnScroll ) {
-		const { scrollUp } = this.settings.constants;
+		const { scrollUp } = this.getSettings( 'constants' );
 
 		const currentScrollY = window.scrollY;
 		const headerHeight = this.elements.main.offsetHeight;
@@ -182,10 +182,10 @@ class elementorHelloPlusHeaderHandler {
 	}
 
 	getCurrentDevice() {
-		const { mobilePortrait, tabletPortrait, mobile, tablet, desktop } = this.settings.constants;
+		const { mobilePortrait, tabletPortrait, mobile, tablet, desktop } = this.getSettings( 'constants' );
 
-		const isMobile = this.elements.window.innerWidth <= mobilePortrait;
-		const isTablet = this.elements.window.innerWidth <= tabletPortrait;
+		const isMobile = window.innerWidth <= mobilePortrait;
+		const isTablet = window.innerWidth <= tabletPortrait;
 
 		if ( isMobile ) {
 			return mobile;
@@ -207,7 +207,3 @@ class elementorHelloPlusHeaderHandler {
 		}
     }
 }
-
-window.addEventListener( 'elementor/frontend/init', () => {
-	elementorFrontend.hooks.addAction( 'frontend/element_ready/ehp-header.default', () => new elementorHelloPlusHeaderHandler() );
-} );