hello-theme/dev/js/editor/hooks/ui/controls-hook.js

export default class ControlsHook extends $e.modules.hookUI.After {
	getCommand() {
		// Command to listen.
		return 'document/elements/settings';
	}

	getId() {
		// Unique id for the hook.
		return 'hello-elementor-editor-controls-handler';
	}

	/**
	 * Get Hello Elementor Theme Controls
	 *
	 * Returns an object in which the keys are control IDs, and the values are the selectors of the elements that need
	 * to be targeted in the apply() method.
	 *
	 * Example return value:
	 *   {
	 *      hello_elementor_show_logo: '.site-header .site-header-logo',
	 *      hello_elementor_show_menu: '.site-header .site-header-menu',
	 *   }
	 */
	getHelloThemeControls() {
		return {
			hello_header_logo_display: {
				selector: '.site-header .site-logo, .site-header .site-title',
				callback: ($element, args) => {
					this.toggleShowHideClass(
						$element,
						args.settings.hello_header_logo_display,
					);
				},
			},
			hello_header_menu_display: {
				selector:
					'.site-header .site-navigation, .site-header .site-navigation-toggle-holder',
				callback: ($element, args) => {
					this.toggleShowHideClass(
						$element,
						args.settings.hello_header_menu_display,
					);
				},
			},
			hello_header_tagline_display: {
				selector: '.site-header .site-description',
				callback: ($element, args) => {
					this.toggleShowHideClass(
						$element,
						args.settings.hello_header_tagline_display,
					);
				},
			},
			hello_header_logo_type: {
				selector: '.site-header .site-branding',
				callback: ($element, args) => {
					const classPrefix = 'show-',
						inputOptions =
							args.container.controls.hello_header_logo_type.options,
						inputValue = args.settings.hello_header_logo_type;

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_header_layout: {
				selector: '.site-header',
				callback: ($element, args) => {
					const classPrefix = 'header-',
						inputOptions = args.container.controls.hello_header_layout.options,
						inputValue = args.settings.hello_header_layout;

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_header_width: {
				selector: '.site-header',
				callback: ($element, args) => {
					const classPrefix = 'header-',
						inputOptions = args.container.controls.hello_header_width.options,
						inputValue = args.settings.hello_header_width;

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_header_menu_layout: {
				selector: '.site-header',
				callback: ($element, args) => {
					const classPrefix = 'menu-layout-',
						inputOptions =
							args.container.controls.hello_header_menu_layout.options,
						inputValue = args.settings.hello_header_menu_layout;

					// No matter what, close the mobile menu
					$element
						.find('.site-navigation-toggle-holder')
						.removeClass('elementor-active');
					$element.find('.site-navigation-dropdown').removeClass('show');

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_header_menu_dropdown: {
				selector: '.site-header',
				callback: ($element, args) => {
					const classPrefix = 'menu-dropdown-',
						inputOptions =
							args.container.controls.hello_header_menu_dropdown.options,
						inputValue = args.settings.hello_header_menu_dropdown;

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_footer_logo_display: {
				selector: '.site-footer .site-logo, .site-footer .site-title',
				callback: ($element, args) => {
					this.toggleShowHideClass(
						$element,
						args.settings.hello_footer_logo_display,
					);
				},
			},
			hello_footer_tagline_display: {
				selector: '.site-footer .site-description',
				callback: ($element, args) => {
					this.toggleShowHideClass(
						$element,
						args.settings.hello_footer_tagline_display,
					);
				},
			},
			hello_footer_menu_display: {
				selector: '.site-footer .site-navigation',
				callback: ($element, args) => {
					this.toggleShowHideClass(
						$element,
						args.settings.hello_footer_menu_display,
					);
				},
			},
			hello_footer_copyright_display: {
				selector: '.site-footer .copyright',
				callback: ($element, args) => {
					const $footerContainer = $element.closest('#site-footer'),
						inputValue = args.settings.hello_footer_copyright_display;

					this.toggleShowHideClass($element, inputValue);

					$footerContainer.toggleClass(
						'footer-has-copyright',
						'yes' === inputValue,
					);
				},
			},
			hello_footer_logo_type: {
				selector: '.site-footer .site-branding',
				callback: ($element, args) => {
					const classPrefix = 'show-',
						inputOptions =
							args.container.controls.hello_footer_logo_type.options,
						inputValue = args.settings.hello_footer_logo_type;

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_footer_layout: {
				selector: '.site-footer',
				callback: ($element, args) => {
					const classPrefix = 'footer-',
						inputOptions = args.container.controls.hello_footer_layout.options,
						inputValue = args.settings.hello_footer_layout;

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_footer_width: {
				selector: '.site-footer',
				callback: ($element, args) => {
					const classPrefix = 'footer-',
						inputOptions = args.container.controls.hello_footer_width.options,
						inputValue = args.settings.hello_footer_width;

					this.toggleLayoutClass(
						$element,
						classPrefix,
						inputOptions,
						inputValue,
					);
				},
			},
			hello_footer_copyright_text: {
				selector: '.site-footer .copyright',
				callback: ($element, args) => {
					const inputValue = args.settings.hello_footer_copyright_text;

					$element.find('p').text(inputValue);
				},
			},
		};
	}

	/**
	 * Toggle show and hide classes on containers
	 *
	 * This will remove the .show and .hide clases from the element, then apply the new class
	 *
	 * @param {jQuery} element
	 * @param {string} inputValue
	 */
	toggleShowHideClass(element, inputValue) {
		element
			.removeClass('hide')
			.removeClass('show')
			.addClass(inputValue ? 'show' : 'hide');
	}

	/**
	 * Toggle layout classes on containers
	 *
	 * This will cleanly set classes onto which ever container we want to target, removing the old classes and adding the new one
	 *
	 * @param {jQuery} element
	 * @param {string} classPrefix
	 * @param {Object} inputOptions
	 * @param {string} inputValue
	 */
	toggleLayoutClass(element, classPrefix, inputOptions, inputValue) {
		// Loop through the possible classes and remove the one that's not in use
		Object.entries(inputOptions).forEach(([key]) => {
			element.removeClass(classPrefix + key);
		});

		// Append the class which we want to use onto the element
		if ('' !== inputValue) {
			element.addClass(classPrefix + inputValue);
		}
	}

	/**
	 * Set the conditions under which the hook will run.
	 *
	 * @param {Object} args
	 */
	getConditions(args) {
		const isKit = 'kit' === elementor.documents.getCurrent().config.type,
			changedControls = Object.keys(args.settings),
			isSingleSetting = 1 === changedControls.length;

		// If the document is not a kit, or there are no changed settings, or there is more than one single changed
		// setting, don't run the hook.
		if (!isKit || !args.settings || !isSingleSetting) {
			return false;
		}

		// If the changed control is in the list of theme controls, return true to run the hook.
		// Otherwise, return false so the hook doesn't run.
		return !!Object.keys(this.getHelloThemeControls()).includes(
			changedControls[0],
		);
	}

	/**
	 * The hook logic.
	 *
	 * @param {Object} args
	 */
	apply(args) {
		const allThemeControls = this.getHelloThemeControls(),
			// Extract the control ID from the passed args
			controlId = Object.keys(args.settings)[0],
			controlConfig = allThemeControls[controlId],
			// Find the element that needs to be targeted by the control.
			$element = elementor.$previewContents.find(controlConfig.selector);

		controlConfig.callback($element, args);
	}
}