first commit

wp-content/themes/hello-elementor/assets/js/custom.js

@@ -0,0 +1,213 @@
+jQuery(function ($) {
+	gsap.registerPlugin(ScrollTrigger)
+
+	let frameElements = $('.frame-box-content-data .box')
+	let frameScrollWidth = parseFloat(0)
+	frameElements.each(function (index, element) {
+		frameScrollWidth += parseFloat(element.offsetWidth)
+
+		let marginLeft = parseFloat($(element).css('margin-left'))
+		if (!isNaN(marginLeft) && marginLeft !== 0) {
+			frameScrollWidth += marginLeft
+		}
+	})
+
+	$('#frame-box .frame-box-content-bg, #frame-box .frame-box-content-bg img').css('width', `${frameScrollWidth}px`)
+	$('#frame-box .piano-keys').css('width', `${frameScrollWidth}px`)
+	frameScrollWidth = frameScrollWidth - parseFloat($('#frame-box').width())
+	$('.frame-box-content-data, #frame-box .piano').css( 'width', `${frameScrollWidth}px` )
+
+	let dragHandle = document.querySelector('#drag-handle')
+	Draggable.create(dragHandle, {
+		type: 'x',
+		bounds: '#frame-box',
+		onDrag: updateScroll,
+		onThrowUpdate: updateScroll,
+	})
+
+	function updateScroll() {
+		let frameWidth = document.querySelector('#frame-box').offsetWidth
+		let thisWidth = this.styles.target.clientWidth
+
+		let scrollPosition = (this.x / (frameWidth - thisWidth)) * frameScrollWidth
+
+		$('#frame-box-content, .piano').css(
+			'transform',
+			`translateX(${-scrollPosition}px)`
+		)
+	}
+
+	// gsap.to("#frame-box-content, .piano", {
+	//     xPercent: -100,
+	//     ease: "linear",
+	//     scrollTrigger: {
+	//         id: "scrollTrigger",
+	//         trigger: "main#content",
+	//         pin: true,
+	//         scrub: 1,
+	//         end: () => "+=" + frameScrollWidth
+	//     },
+	// });
+})
+
+jQuery(function ($) {
+	let currentAudio = null
+
+	$('.actions .song').on('click', function () {
+		let songURI = $(this).attr('song')
+
+		if (currentAudio !== null) {
+			currentAudio.pause()
+			currentAudio.currentTime = 0
+		}
+
+		let audio = new Audio(songURI)
+
+		currentAudio = audio
+
+		audio.play()
+		activePlayer()
+	})
+
+	$('.song-handler-anim').on('click', function () {
+		let songURI = $(this).attr('song')
+
+		if (currentAudio !== null) {
+			currentAudio.pause()
+			currentAudio.currentTime = 0
+			currentAudio = null
+			stopPlayer()
+		} else {
+			let audio = new Audio(songURI)
+			currentAudio = audio
+			audio.play()
+			activePlayer()
+		}
+	})
+
+	function activePlayer() {
+		$('.song-handler-anim').addClass('active')
+	}
+	function stopPlayer() {
+		$('.song-handler-anim').removeClass('active')
+	}
+	function togglePlayer() {
+		$('.song-handler-anim').toggleClass('active')
+	}
+})
+
+jQuery(function ($) {
+	$('#frame-box nav #nav_foto').on('click', function () {
+		$('#frame-box #foto').show()
+		$('#frame-box #plyty').hide()
+	})
+	$('#frame-box nav #nav_plyty').on('click', function () {
+		$('#frame-box #foto').hide()
+		$('#frame-box #plyty').show()
+	})
+	$('#frame-box nav #nav_intro').on('click', function () {
+		$('#frame-box #intro').show()
+		$('#frame-box #foto').hide()
+		$('#frame-box #plyty').hide()
+	})
+
+	$('#frame-box #intro p').on('click', function () {
+		$('#frame-box #intro').hide()
+		$('#frame-box #foto').hide()
+		$('#frame-box #plyty').show()
+	})
+})
+
+jQuery(function ($) {
+	$('#frame-box .actions .text').on('click', function () {
+		$('.text-data', this).toggleClass('active')
+	})
+})
+
+jQuery(function ($) {
+	Fancybox.bind('[data-fancybox]', {
+		// Your custom options
+	})
+})
+
+jQuery(function ($) {
+	function finger_1_anim() {
+		const element = $('.hand-finder-part-1')
+		element.css('animation', 'finger-1 500ms')
+		setTimeout(() => {
+			element.css('animation', 'none')
+			setTimeout(finger_1_anim, 3000)
+		}, 1000)
+	}
+	function finger_2_anim() {
+		const element = $('.hand-finder-part-2')
+		element.css('animation', 'finger-2 500ms')
+		setTimeout(() => {
+			element.css('animation', 'none')
+			setTimeout(finger_2_anim, 3000)
+		}, 1000)
+	}
+
+	finger_1_anim()
+	finger_2_anim()
+})
+
+jQuery(function ($) {
+	$('#frame-box #nav_book').on('click', function () {
+		$('#frame-box #book').fadeIn('slow')
+		$('#flipbook').turn('page', 2)
+	})
+	$('#frame-box #book .book-close').on('click', function () {
+		$('#frame-box #book').fadeOut('slow')
+	})
+
+	$('#flipbook').turn({
+		width: window.matchMedia('(max-width: 968px)').matches
+			? $(window).width() * 0.9
+			: 600,
+		height: window.matchMedia('(max-width: 968px)').matches
+			? ($(window).width() * 0.9) / 1.445
+			: 415,
+		autoCenter: true,
+		display: 'double',
+		when: {
+			turned: function (event, page, view) {
+				if (page > 3) {
+					$('.book-contents').fadeIn()
+				} else {
+					$('.book-contents').fadeOut()
+				}
+			},
+			turning: function (event, page, view) {
+				if (page === 1) {
+					// event.preventDefault()
+                    if (!$(event.target).closest('a').length) {
+						event.preventDefault();
+					}
+				}
+			},
+		},
+	})
+
+    $('#flipbook').on('touchstart', 'a', function (event) {
+		event.stopPropagation();
+	});
+
+	$(document).on('click', 'ul.table-of-contents', function (e) {
+		e.stopPropagation()
+	})
+
+	$(document).on('click', '.goto-page', function (e) {
+		e.preventDefault()
+		e.stopPropagation()
+		var page = $(this).data('page')
+
+		$('#flipbook').turn('page', page)
+	})
+
+	$(document).on('click', '.book-contents', function (e) {
+		e.preventDefault()
+		e.stopPropagation()
+		$('#flipbook').turn('page', 2)
+	})
+})

wp-content/themes/hello-elementor/assets/js/hello-admin.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-api', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => '8cbb1cf5cd11d04d2b7a');

wp-content/themes/hello-elementor/assets/js/hello-admin.css

@@ -0,0 +1 @@
+#hello-elementor-settings .components-placeholder{background:#f1f1f1}#hello-elementor-settings .hello_elementor__header{background-color:#fff;box-shadow:0 1px 0 hsla(0,0%,84%,.5),0 1px 2px #eee;margin-inline-start:-2em;padding:20px 10px}#hello-elementor-settings .hello_elementor__header .hello_elementor__container{margin:0 auto;max-width:750px}#hello-elementor-settings .hello_elementor__header .hello_elementor__container .hello_elementor__title{align-items:center;display:flex;justify-content:center}#hello-elementor-settings .hello_elementor__header .hello_elementor__container .hello_elementor__title .dashicon{color:#757575}#hello-elementor-settings .hello_elementor__main{margin-inline-end:auto;margin-inline-start:auto;max-width:750px}#hello-elementor-settings .hello_elementor__main .components-panel{background:none;border:none}#hello-elementor-settings .hello_elementor__main .components-panel__body{background:#fff;border:1px solid #e2e4e7;margin:1rem 0}#hello-elementor-settings .hello_elementor__main .components-notice{margin:0;margin-block-end:20px}#hello-elementor-settings .hello_elementor__main .components-notice .dashicon{color:#f0b849;padding-inline-end:10px}#hello-elementor-settings .hello_elementor__main .components-notice button{display:none}#hello-elementor-settings .hello_elementor__main .code-example{border-radius:4px;display:inline-block;font-size:10px;margin-block-end:.25rem}#hello-elementor-settings .hello_elementor__main .code-example+:not(.code-example){margin-block-start:1.25rem}#hello-elementor-settings .components-base-control__help{margin-block-start:.5rem}#hello-elementor-settings .hello_elementor__notices .components-snackbar{bottom:.5rem;position:fixed}#hello-elementor-settings .hello_elementor__action_links{margin-block-end:20px;margin-block-start:50px;text-align:center}#hello-elementor-settings .hello_elementor__action_links__title{font-weight:700}#hello-elementor-settings .hello_elementor__action_links__message{font-weight:400}

wp-content/themes/hello-elementor/assets/js/hello-admin.js

@@ -0,0 +1,428 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 222:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.ActionLinks = void 0;
+const ActionLinks = ({
+  image,
+  alt,
+  title,
+  message,
+  button,
+  link
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__action_links"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: alt
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "hello_elementor__action_links__title"
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: "hello_elementor__action_links__message"
+  }, message), /*#__PURE__*/React.createElement("a", {
+    className: "components-button is-secondary",
+    href: link,
+    target: "_blank",
+    rel: "noreferrer"
+  }, button));
+};
+exports.ActionLinks = ActionLinks;
+
+/***/ }),
+
+/***/ 3:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(836);
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.SettingsPage = void 0;
+var _react = __webpack_require__(196);
+var _notices = __webpack_require__(961);
+var _data = __webpack_require__(818);
+var _i18n = __webpack_require__(736);
+var _api = _interopRequireDefault(__webpack_require__(101));
+var _components = __webpack_require__(609);
+var _settingsPanel = __webpack_require__(230);
+var _actionLinksPanel = __webpack_require__(995);
+const Notices = () => {
+  const notices = (0, _data.useSelect)(select => select(_notices.store).getNotices().filter(notice => 'snackbar' === notice.type), []);
+  const {
+    removeNotice
+  } = (0, _data.useDispatch)(_notices.store);
+  return /*#__PURE__*/React.createElement(_components.SnackbarList, {
+    className: "edit-site-notices",
+    notices: notices,
+    onRemove: removeNotice
+  });
+};
+const SETTINGS = {
+  DESCRIPTION_META_TAG: '_description_meta_tag',
+  SKIP_LINK: '_skip_link',
+  HEADER_FOOTER: '_header_footer',
+  PAGE_TITLE: '_page_title',
+  HELLO_STYLE: '_hello_style',
+  HELLO_THEME: '_hello_theme'
+};
+const SettingsPage = () => {
+  const [hasLoaded, setHasLoaded] = (0, _react.useState)(false);
+  const [settingsData, setSettingsData] = (0, _react.useState)({});
+  const settingsPrefix = 'hello_elementor_settings';
+
+  /**
+   * Update settings data.
+   *
+   * @param {string} settingsName
+   * @param {string} settingsValue
+   */
+  const updateSettings = (settingsName, settingsValue) => {
+    setSettingsData({
+      ...settingsData,
+      [settingsName]: settingsValue
+    });
+  };
+
+  /**
+   * Save settings to server.
+   */
+  const saveSettings = () => {
+    const data = {};
+    Object.values(SETTINGS).forEach(value => data[`${settingsPrefix}${value}`] = settingsData[value] ? 'true' : '');
+    const settings = new _api.default.models.Settings(data);
+    settings.save();
+    (0, _data.dispatch)('core/notices').createNotice('success', (0, _i18n.__)('Settings Saved', 'hello-elementor'), {
+      type: 'snackbar',
+      isDismissible: true
+    });
+  };
+  (0, _react.useEffect)(() => {
+    const fetchSettings = async () => {
+      try {
+        await _api.default.loadPromise;
+        const settings = new _api.default.models.Settings();
+        const response = await settings.fetch();
+        const data = {};
+        Object.values(SETTINGS).forEach(value => data[value] = response[`${settingsPrefix}${value}`]);
+        setSettingsData(data);
+        setHasLoaded(true);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    };
+    if (hasLoaded) {
+      return;
+    }
+    fetchSettings();
+  }, [settingsData]);
+  if (!hasLoaded) {
+    return /*#__PURE__*/React.createElement(_components.Placeholder, null, /*#__PURE__*/React.createElement(_components.Spinner, null));
+  }
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__title"
+  }, /*#__PURE__*/React.createElement("h1", null, (0, _i18n.__)('Hello Theme Settings', 'hello-elementor'))))), /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__main"
+  }, /*#__PURE__*/React.createElement(_components.Panel, null, /*#__PURE__*/React.createElement(_settingsPanel.SettingsPanel, {
+    SETTINGS,
+    settingsData,
+    updateSettings
+  }), /*#__PURE__*/React.createElement(_components.Button, {
+    isPrimary: true,
+    onClick: saveSettings
+  }, (0, _i18n.__)('Save Settings', 'hello-elementor'))), /*#__PURE__*/React.createElement(_actionLinksPanel.ActionLinksPanel, null)), /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__notices"
+  }, /*#__PURE__*/React.createElement(Notices, null)));
+};
+exports.SettingsPage = SettingsPage;
+
+/***/ }),
+
+/***/ 995:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.ActionLinksPanel = void 0;
+var _i18n = __webpack_require__(736);
+var _actionLinks = __webpack_require__(222);
+const actionLinks = {
+  'install-elementor': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Install Elementor', 'hello-elementor'),
+    message: (0, _i18n.__)('Create cross-site header & footer using Elementor.', 'hello-elementor'),
+    button: (0, _i18n.__)('Install Elementor', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  },
+  'activate-elementor': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Activate Elementor', 'hello-elementor'),
+    message: (0, _i18n.__)('Create cross-site header & footer using Elementor.', 'hello-elementor'),
+    button: (0, _i18n.__)('Activate Elementor', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  },
+  'activate-header-footer-experiment': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Style using Elementor', 'hello-elementor'),
+    message: (0, _i18n.__)('Design your cross-site header & footer from Elementor’s "Site Settings" panel.', 'hello-elementor'),
+    button: (0, _i18n.__)('Activate header & footer experiment', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  },
+  'style-header-footer': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Style cross-site header & footer', 'hello-elementor'),
+    message: (0, _i18n.__)('Customize your cross-site header & footer from Elementor’s "Site Settings" panel.', 'hello-elementor'),
+    button: (0, _i18n.__)('Start Designing', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  }
+};
+const ActionLinksPanel = () => {
+  if (!helloAdminData.actionLinkType) {
+    return;
+  }
+  return /*#__PURE__*/React.createElement(_actionLinks.ActionLinks, actionLinks[helloAdminData.actionLinkType]);
+};
+exports.ActionLinksPanel = ActionLinksPanel;
+
+/***/ }),
+
+/***/ 230:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.SettingsPanel = void 0;
+var _i18n = __webpack_require__(736);
+var _components = __webpack_require__(609);
+const SettingsPanel = ({
+  SETTINGS,
+  settingsData,
+  updateSettings
+}) => {
+  const protocol = window.location.protocol || 'https:';
+  const hostname = window.location.hostname || 'example.com';
+  const prefix = protocol + '//' + hostname;
+  return /*#__PURE__*/React.createElement(_components.PanelBody, {
+    title: (0, _i18n.__)('Hello Theme Settings', 'hello-elementor')
+  }, /*#__PURE__*/React.createElement(_components.Notice, {
+    status: "warning",
+    isDismissible: "false"
+  }, /*#__PURE__*/React.createElement(_components.Dashicon, {
+    icon: "flag"
+  }), (0, _i18n.__)('Be cautious, disabling some of the following options may break your website.', 'hello-elementor')), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable description meta tag', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the description meta tag in singular content pages that contain an excerpt.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.DESCRIPTION_META_TAG] || false,
+    onChange: value => updateSettings(SETTINGS.DESCRIPTION_META_TAG, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <meta name=\"description\" content=\"...\" /> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable skip link', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the "Skip to content" link used by screen-readers and users navigating with a keyboard.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.SKIP_LINK] || false,
+    onChange: value => updateSettings(SETTINGS.SKIP_LINK, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <a class=\"skip-link screen-reader-text\" href=\"#content\"> Skip to content </a> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable cross-site header & footer', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the header & footer sections from all pages, and their CSS/JS files.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.HEADER_FOOTER] || false,
+    onChange: value => updateSettings(SETTINGS.HEADER_FOOTER, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <header id=\"site-header\" class=\"site-header\"> ... </header> "), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <footer id=\"site-footer\" class=\"site-footer\"> ... </footer> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable page title', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the section above the content that contains the main heading of the page.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.PAGE_TITLE] || false,
+    onChange: value => updateSettings(SETTINGS.PAGE_TITLE, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <header class=\"page-header\"> <h1 class=\"entry-title\"> Post title </h1> </header> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Unregister Hello style.css', 'hello-elementor'),
+    help: (0, _i18n.__)("Disable Hello theme's style.css file which contains CSS reset rules for unified cross-browser view.", 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.HELLO_STYLE] || false,
+    onChange: value => updateSettings(SETTINGS.HELLO_STYLE, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <link rel=\"stylesheet\" href=\"", prefix, "/wp-content/themes/hello-elementor/style.min.css\" /> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Unregister Hello theme.css', 'hello-elementor'),
+    help: (0, _i18n.__)("Disable Hello theme's theme.css file which contains CSS rules that style WordPress elements.", 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.HELLO_THEME] || false,
+    onChange: value => updateSettings(SETTINGS.HELLO_THEME, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <link rel=\"stylesheet\" href=\"", prefix, "/wp-content/themes/hello-elementor/theme.min.css\" /> "));
+};
+exports.SettingsPanel = SettingsPanel;
+
+/***/ }),
+
+/***/ 100:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+
+/***/ 196:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["React"];
+
+/***/ }),
+
+/***/ 101:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["api"];
+
+/***/ }),
+
+/***/ 609:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["components"];
+
+/***/ }),
+
+/***/ 818:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["data"];
+
+/***/ }),
+
+/***/ 307:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["element"];
+
+/***/ }),
+
+/***/ 736:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["i18n"];
+
+/***/ }),
+
+/***/ 961:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["notices"];
+
+/***/ }),
+
+/***/ 836:
+/***/ ((module) => {
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+(() => {
+"use strict";
+
+
+__webpack_require__(100);
+var _element = __webpack_require__(307);
+var _settingsPage = __webpack_require__(3);
+const App = () => {
+  return /*#__PURE__*/React.createElement(_settingsPage.SettingsPage, null);
+};
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('hello-elementor-settings');
+  if (rootElement) {
+    (0, _element.render)( /*#__PURE__*/React.createElement(App, null), rootElement);
+  }
+});
+})();
+
+/******/ })()
+;

wp-content/themes/hello-elementor/assets/js/hello-admin.min.css

@@ -0,0 +1 @@
+#hello-elementor-settings .components-placeholder{background:#f1f1f1}#hello-elementor-settings .hello_elementor__header{background-color:#fff;box-shadow:0 1px 0 hsla(0,0%,84%,.5),0 1px 2px #eee;margin-inline-start:-2em;padding:20px 10px}#hello-elementor-settings .hello_elementor__header .hello_elementor__container{margin:0 auto;max-width:750px}#hello-elementor-settings .hello_elementor__header .hello_elementor__container .hello_elementor__title{align-items:center;display:flex;justify-content:center}#hello-elementor-settings .hello_elementor__header .hello_elementor__container .hello_elementor__title .dashicon{color:#757575}#hello-elementor-settings .hello_elementor__main{margin-inline-end:auto;margin-inline-start:auto;max-width:750px}#hello-elementor-settings .hello_elementor__main .components-panel{background:none;border:none}#hello-elementor-settings .hello_elementor__main .components-panel__body{background:#fff;border:1px solid #e2e4e7;margin:1rem 0}#hello-elementor-settings .hello_elementor__main .components-notice{margin:0;margin-block-end:20px}#hello-elementor-settings .hello_elementor__main .components-notice .dashicon{color:#f0b849;padding-inline-end:10px}#hello-elementor-settings .hello_elementor__main .components-notice button{display:none}#hello-elementor-settings .hello_elementor__main .code-example{border-radius:4px;display:inline-block;font-size:10px;margin-block-end:.25rem}#hello-elementor-settings .hello_elementor__main .code-example+:not(.code-example){margin-block-start:1.25rem}#hello-elementor-settings .components-base-control__help{margin-block-start:.5rem}#hello-elementor-settings .hello_elementor__notices .components-snackbar{bottom:.5rem;position:fixed}#hello-elementor-settings .hello_elementor__action_links{margin-block-end:20px;margin-block-start:50px;text-align:center}#hello-elementor-settings .hello_elementor__action_links__title{font-weight:700}#hello-elementor-settings .hello_elementor__action_links__message{font-weight:400}

wp-content/themes/hello-elementor/assets/js/hello-admin.min.js

@@ -0,0 +1,428 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 222:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.ActionLinks = void 0;
+const ActionLinks = ({
+  image,
+  alt,
+  title,
+  message,
+  button,
+  link
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__action_links"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: alt
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "hello_elementor__action_links__title"
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: "hello_elementor__action_links__message"
+  }, message), /*#__PURE__*/React.createElement("a", {
+    className: "components-button is-secondary",
+    href: link,
+    target: "_blank",
+    rel: "noreferrer"
+  }, button));
+};
+exports.ActionLinks = ActionLinks;
+
+/***/ }),
+
+/***/ 3:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(836);
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.SettingsPage = void 0;
+var _react = __webpack_require__(196);
+var _notices = __webpack_require__(961);
+var _data = __webpack_require__(818);
+var _i18n = __webpack_require__(736);
+var _api = _interopRequireDefault(__webpack_require__(101));
+var _components = __webpack_require__(609);
+var _settingsPanel = __webpack_require__(230);
+var _actionLinksPanel = __webpack_require__(995);
+const Notices = () => {
+  const notices = (0, _data.useSelect)(select => select(_notices.store).getNotices().filter(notice => 'snackbar' === notice.type), []);
+  const {
+    removeNotice
+  } = (0, _data.useDispatch)(_notices.store);
+  return /*#__PURE__*/React.createElement(_components.SnackbarList, {
+    className: "edit-site-notices",
+    notices: notices,
+    onRemove: removeNotice
+  });
+};
+const SETTINGS = {
+  DESCRIPTION_META_TAG: '_description_meta_tag',
+  SKIP_LINK: '_skip_link',
+  HEADER_FOOTER: '_header_footer',
+  PAGE_TITLE: '_page_title',
+  HELLO_STYLE: '_hello_style',
+  HELLO_THEME: '_hello_theme'
+};
+const SettingsPage = () => {
+  const [hasLoaded, setHasLoaded] = (0, _react.useState)(false);
+  const [settingsData, setSettingsData] = (0, _react.useState)({});
+  const settingsPrefix = 'hello_elementor_settings';
+
+  /**
+   * Update settings data.
+   *
+   * @param {string} settingsName
+   * @param {string} settingsValue
+   */
+  const updateSettings = (settingsName, settingsValue) => {
+    setSettingsData({
+      ...settingsData,
+      [settingsName]: settingsValue
+    });
+  };
+
+  /**
+   * Save settings to server.
+   */
+  const saveSettings = () => {
+    const data = {};
+    Object.values(SETTINGS).forEach(value => data[`${settingsPrefix}${value}`] = settingsData[value] ? 'true' : '');
+    const settings = new _api.default.models.Settings(data);
+    settings.save();
+    (0, _data.dispatch)('core/notices').createNotice('success', (0, _i18n.__)('Settings Saved', 'hello-elementor'), {
+      type: 'snackbar',
+      isDismissible: true
+    });
+  };
+  (0, _react.useEffect)(() => {
+    const fetchSettings = async () => {
+      try {
+        await _api.default.loadPromise;
+        const settings = new _api.default.models.Settings();
+        const response = await settings.fetch();
+        const data = {};
+        Object.values(SETTINGS).forEach(value => data[value] = response[`${settingsPrefix}${value}`]);
+        setSettingsData(data);
+        setHasLoaded(true);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    };
+    if (hasLoaded) {
+      return;
+    }
+    fetchSettings();
+  }, [settingsData]);
+  if (!hasLoaded) {
+    return /*#__PURE__*/React.createElement(_components.Placeholder, null, /*#__PURE__*/React.createElement(_components.Spinner, null));
+  }
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__title"
+  }, /*#__PURE__*/React.createElement("h1", null, (0, _i18n.__)('Hello Theme Settings', 'hello-elementor'))))), /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__main"
+  }, /*#__PURE__*/React.createElement(_components.Panel, null, /*#__PURE__*/React.createElement(_settingsPanel.SettingsPanel, {
+    SETTINGS,
+    settingsData,
+    updateSettings
+  }), /*#__PURE__*/React.createElement(_components.Button, {
+    isPrimary: true,
+    onClick: saveSettings
+  }, (0, _i18n.__)('Save Settings', 'hello-elementor'))), /*#__PURE__*/React.createElement(_actionLinksPanel.ActionLinksPanel, null)), /*#__PURE__*/React.createElement("div", {
+    className: "hello_elementor__notices"
+  }, /*#__PURE__*/React.createElement(Notices, null)));
+};
+exports.SettingsPage = SettingsPage;
+
+/***/ }),
+
+/***/ 995:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.ActionLinksPanel = void 0;
+var _i18n = __webpack_require__(736);
+var _actionLinks = __webpack_require__(222);
+const actionLinks = {
+  'install-elementor': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Install Elementor', 'hello-elementor'),
+    message: (0, _i18n.__)('Create cross-site header & footer using Elementor.', 'hello-elementor'),
+    button: (0, _i18n.__)('Install Elementor', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  },
+  'activate-elementor': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Activate Elementor', 'hello-elementor'),
+    message: (0, _i18n.__)('Create cross-site header & footer using Elementor.', 'hello-elementor'),
+    button: (0, _i18n.__)('Activate Elementor', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  },
+  'activate-header-footer-experiment': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Style using Elementor', 'hello-elementor'),
+    message: (0, _i18n.__)('Design your cross-site header & footer from Elementor’s "Site Settings" panel.', 'hello-elementor'),
+    button: (0, _i18n.__)('Activate header & footer experiment', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  },
+  'style-header-footer': {
+    image: helloAdminData.templateDirectoryURI + '/assets/images/elementor.svg',
+    alt: (0, _i18n.__)('Elementor', 'hello-elementor'),
+    title: (0, _i18n.__)('Style cross-site header & footer', 'hello-elementor'),
+    message: (0, _i18n.__)('Customize your cross-site header & footer from Elementor’s "Site Settings" panel.', 'hello-elementor'),
+    button: (0, _i18n.__)('Start Designing', 'hello-elementor'),
+    link: helloAdminData.actionLinkURL
+  }
+};
+const ActionLinksPanel = () => {
+  if (!helloAdminData.actionLinkType) {
+    return;
+  }
+  return /*#__PURE__*/React.createElement(_actionLinks.ActionLinks, actionLinks[helloAdminData.actionLinkType]);
+};
+exports.ActionLinksPanel = ActionLinksPanel;
+
+/***/ }),
+
+/***/ 230:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.SettingsPanel = void 0;
+var _i18n = __webpack_require__(736);
+var _components = __webpack_require__(609);
+const SettingsPanel = ({
+  SETTINGS,
+  settingsData,
+  updateSettings
+}) => {
+  const protocol = window.location.protocol || 'https:';
+  const hostname = window.location.hostname || 'example.com';
+  const prefix = protocol + '//' + hostname;
+  return /*#__PURE__*/React.createElement(_components.PanelBody, {
+    title: (0, _i18n.__)('Hello Theme Settings', 'hello-elementor')
+  }, /*#__PURE__*/React.createElement(_components.Notice, {
+    status: "warning",
+    isDismissible: "false"
+  }, /*#__PURE__*/React.createElement(_components.Dashicon, {
+    icon: "flag"
+  }), (0, _i18n.__)('Be cautious, disabling some of the following options may break your website.', 'hello-elementor')), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable description meta tag', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the description meta tag in singular content pages that contain an excerpt.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.DESCRIPTION_META_TAG] || false,
+    onChange: value => updateSettings(SETTINGS.DESCRIPTION_META_TAG, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <meta name=\"description\" content=\"...\" /> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable skip link', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the "Skip to content" link used by screen-readers and users navigating with a keyboard.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.SKIP_LINK] || false,
+    onChange: value => updateSettings(SETTINGS.SKIP_LINK, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <a class=\"skip-link screen-reader-text\" href=\"#content\"> Skip to content </a> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable cross-site header & footer', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the header & footer sections from all pages, and their CSS/JS files.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.HEADER_FOOTER] || false,
+    onChange: value => updateSettings(SETTINGS.HEADER_FOOTER, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <header id=\"site-header\" class=\"site-header\"> ... </header> "), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <footer id=\"site-footer\" class=\"site-footer\"> ... </footer> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Disable page title', 'hello-elementor'),
+    help: (0, _i18n.__)('Remove the section above the content that contains the main heading of the page.', 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.PAGE_TITLE] || false,
+    onChange: value => updateSettings(SETTINGS.PAGE_TITLE, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <header class=\"page-header\"> <h1 class=\"entry-title\"> Post title </h1> </header> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Unregister Hello style.css', 'hello-elementor'),
+    help: (0, _i18n.__)("Disable Hello theme's style.css file which contains CSS reset rules for unified cross-browser view.", 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.HELLO_STYLE] || false,
+    onChange: value => updateSettings(SETTINGS.HELLO_STYLE, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <link rel=\"stylesheet\" href=\"", prefix, "/wp-content/themes/hello-elementor/style.min.css\" /> "), /*#__PURE__*/React.createElement(_components.ToggleControl, {
+    label: (0, _i18n.__)('Unregister Hello theme.css', 'hello-elementor'),
+    help: (0, _i18n.__)("Disable Hello theme's theme.css file which contains CSS rules that style WordPress elements.", 'hello-elementor'),
+    checked: !!settingsData[SETTINGS.HELLO_THEME] || false,
+    onChange: value => updateSettings(SETTINGS.HELLO_THEME, value)
+  }), /*#__PURE__*/React.createElement("code", {
+    className: "code-example"
+  }, " <link rel=\"stylesheet\" href=\"", prefix, "/wp-content/themes/hello-elementor/theme.min.css\" /> "));
+};
+exports.SettingsPanel = SettingsPanel;
+
+/***/ }),
+
+/***/ 100:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+
+/***/ 196:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["React"];
+
+/***/ }),
+
+/***/ 101:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["api"];
+
+/***/ }),
+
+/***/ 609:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["components"];
+
+/***/ }),
+
+/***/ 818:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["data"];
+
+/***/ }),
+
+/***/ 307:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["element"];
+
+/***/ }),
+
+/***/ 736:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["i18n"];
+
+/***/ }),
+
+/***/ 961:
+/***/ ((module) => {
+
+"use strict";
+module.exports = window["wp"]["notices"];
+
+/***/ }),
+
+/***/ 836:
+/***/ ((module) => {
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+(() => {
+"use strict";
+
+
+__webpack_require__(100);
+var _element = __webpack_require__(307);
+var _settingsPage = __webpack_require__(3);
+const App = () => {
+  return /*#__PURE__*/React.createElement(_settingsPage.SettingsPage, null);
+};
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('hello-elementor-settings');
+  if (rootElement) {
+    (0, _element.render)( /*#__PURE__*/React.createElement(App, null), rootElement);
+  }
+});
+})();
+
+/******/ })()
+;

wp-content/themes/hello-elementor/assets/js/hello-editor.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => 'e467b0db4be3ce9829ae');

wp-content/themes/hello-elementor/assets/js/hello-editor.js

@@ -0,0 +1,395 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 440:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(836);
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(__webpack_require__(416));
+var _controlsHook = _interopRequireDefault(__webpack_require__(841));
+class _default extends $e.modules.ComponentBase {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "pages", {});
+  }
+  getNamespace() {
+    return 'hello-elementor';
+  }
+  defaultHooks() {
+    return this.importHooks({
+      ControlsHook: _controlsHook.default
+    });
+  }
+}
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ 841:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+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);
+  }
+}
+exports["default"] = ControlsHook;
+
+/***/ }),
+
+/***/ 416:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var toPropertyKey = __webpack_require__(62);
+function _defineProperty(obj, key, value) {
+  key = toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 836:
+/***/ ((module) => {
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 36:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var _typeof = (__webpack_require__(698)["default"]);
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+module.exports = _toPrimitive, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 62:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var _typeof = (__webpack_require__(698)["default"]);
+var toPrimitive = __webpack_require__(36);
+function _toPropertyKey(arg) {
+  var key = toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+module.exports = _toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 698:
+/***/ ((module) => {
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+}
+module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+(() => {
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(836);
+var _component = _interopRequireDefault(__webpack_require__(440));
+$e.components.register(new _component.default());
+})();
+
+/******/ })()
+;

wp-content/themes/hello-elementor/assets/js/hello-editor.min.js

@@ -0,0 +1,395 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 440:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(836);
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(__webpack_require__(416));
+var _controlsHook = _interopRequireDefault(__webpack_require__(841));
+class _default extends $e.modules.ComponentBase {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "pages", {});
+  }
+  getNamespace() {
+    return 'hello-elementor';
+  }
+  defaultHooks() {
+    return this.importHooks({
+      ControlsHook: _controlsHook.default
+    });
+  }
+}
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ 841:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+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);
+  }
+}
+exports["default"] = ControlsHook;
+
+/***/ }),
+
+/***/ 416:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var toPropertyKey = __webpack_require__(62);
+function _defineProperty(obj, key, value) {
+  key = toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 836:
+/***/ ((module) => {
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 36:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var _typeof = (__webpack_require__(698)["default"]);
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+module.exports = _toPrimitive, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 62:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var _typeof = (__webpack_require__(698)["default"]);
+var toPrimitive = __webpack_require__(36);
+function _toPropertyKey(arg) {
+  var key = toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+module.exports = _toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
+/***/ 698:
+/***/ ((module) => {
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+}
+module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+(() => {
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(836);
+var _component = _interopRequireDefault(__webpack_require__(440));
+$e.components.register(new _component.default());
+})();
+
+/******/ })()
+;

wp-content/themes/hello-elementor/assets/js/hello-frontend.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => 'ac1edb44e0c7550dfdd9');

wp-content/themes/hello-elementor/assets/js/hello-frontend.js

@@ -0,0 +1,75 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+var __webpack_exports__ = {};
+
+
+class elementorHelloThemeHandler {
+  constructor() {
+    this.initSettings();
+    this.initElements();
+    this.bindEvents();
+  }
+  initSettings() {
+    this.settings = {
+      selectors: {
+        menuToggle: '.site-header .site-navigation-toggle',
+        menuToggleHolder: '.site-header .site-navigation-toggle-holder',
+        dropdownMenu: '.site-header .site-navigation-dropdown'
+      }
+    };
+  }
+  initElements() {
+    this.elements = {
+      window,
+      menuToggle: document.querySelector(this.settings.selectors.menuToggle),
+      menuToggleHolder: document.querySelector(this.settings.selectors.menuToggleHolder),
+      dropdownMenu: document.querySelector(this.settings.selectors.dropdownMenu)
+    };
+  }
+  bindEvents() {
+    var _this$elements$menuTo;
+    if (!this.elements.menuToggleHolder || (_this$elements$menuTo = this.elements.menuToggleHolder) !== null && _this$elements$menuTo !== void 0 && _this$elements$menuTo.classList.contains('hide')) {
+      return;
+    }
+    this.elements.menuToggle.addEventListener('click', () => this.handleMenuToggle());
+    this.elements.menuToggle.addEventListener('keyup', event => {
+      const ENTER_KEY = 13;
+      const SPACE_KEY = 32;
+      if (ENTER_KEY === event.keyCode || SPACE_KEY === event.keyCode) {
+        event.currentTarget.click();
+      }
+    });
+    this.elements.dropdownMenu.querySelectorAll('.menu-item-has-children > a').forEach(anchorElement => anchorElement.addEventListener('click', event => this.handleMenuChildren(event)));
+  }
+  closeMenuItems() {
+    this.elements.menuToggleHolder.classList.remove('elementor-active');
+    this.elements.window.removeEventListener('resize', () => this.closeMenuItems());
+  }
+  handleMenuToggle() {
+    const isDropdownVisible = !this.elements.menuToggleHolder.classList.contains('elementor-active');
+    this.elements.menuToggle.setAttribute('aria-expanded', isDropdownVisible);
+    this.elements.dropdownMenu.setAttribute('aria-hidden', !isDropdownVisible);
+    this.elements.menuToggleHolder.classList.toggle('elementor-active', isDropdownVisible);
+
+    // Always close all sub active items.
+    this.elements.dropdownMenu.querySelectorAll('.elementor-active').forEach(item => item.classList.remove('elementor-active'));
+    if (isDropdownVisible) {
+      this.elements.window.addEventListener('resize', () => this.closeMenuItems());
+    } else {
+      this.elements.window.removeEventListener('resize', () => this.closeMenuItems());
+    }
+  }
+  handleMenuChildren(event) {
+    const anchor = event.currentTarget;
+    const parentLi = anchor.parentElement;
+    if (!(parentLi !== null && parentLi !== void 0 && parentLi.classList)) {
+      return;
+    }
+    parentLi.classList.toggle('elementor-active');
+  }
+}
+document.addEventListener('DOMContentLoaded', () => {
+  new elementorHelloThemeHandler();
+});
+/******/ })()
+;

wp-content/themes/hello-elementor/assets/js/hello-frontend.min.js

@@ -0,0 +1,75 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+var __webpack_exports__ = {};
+
+
+class elementorHelloThemeHandler {
+  constructor() {
+    this.initSettings();
+    this.initElements();
+    this.bindEvents();
+  }
+  initSettings() {
+    this.settings = {
+      selectors: {
+        menuToggle: '.site-header .site-navigation-toggle',
+        menuToggleHolder: '.site-header .site-navigation-toggle-holder',
+        dropdownMenu: '.site-header .site-navigation-dropdown'
+      }
+    };
+  }
+  initElements() {
+    this.elements = {
+      window,
+      menuToggle: document.querySelector(this.settings.selectors.menuToggle),
+      menuToggleHolder: document.querySelector(this.settings.selectors.menuToggleHolder),
+      dropdownMenu: document.querySelector(this.settings.selectors.dropdownMenu)
+    };
+  }
+  bindEvents() {
+    var _this$elements$menuTo;
+    if (!this.elements.menuToggleHolder || (_this$elements$menuTo = this.elements.menuToggleHolder) !== null && _this$elements$menuTo !== void 0 && _this$elements$menuTo.classList.contains('hide')) {
+      return;
+    }
+    this.elements.menuToggle.addEventListener('click', () => this.handleMenuToggle());
+    this.elements.menuToggle.addEventListener('keyup', event => {
+      const ENTER_KEY = 13;
+      const SPACE_KEY = 32;
+      if (ENTER_KEY === event.keyCode || SPACE_KEY === event.keyCode) {
+        event.currentTarget.click();
+      }
+    });
+    this.elements.dropdownMenu.querySelectorAll('.menu-item-has-children > a').forEach(anchorElement => anchorElement.addEventListener('click', event => this.handleMenuChildren(event)));
+  }
+  closeMenuItems() {
+    this.elements.menuToggleHolder.classList.remove('elementor-active');
+    this.elements.window.removeEventListener('resize', () => this.closeMenuItems());
+  }
+  handleMenuToggle() {
+    const isDropdownVisible = !this.elements.menuToggleHolder.classList.contains('elementor-active');
+    this.elements.menuToggle.setAttribute('aria-expanded', isDropdownVisible);
+    this.elements.dropdownMenu.setAttribute('aria-hidden', !isDropdownVisible);
+    this.elements.menuToggleHolder.classList.toggle('elementor-active', isDropdownVisible);
+
+    // Always close all sub active items.
+    this.elements.dropdownMenu.querySelectorAll('.elementor-active').forEach(item => item.classList.remove('elementor-active'));
+    if (isDropdownVisible) {
+      this.elements.window.addEventListener('resize', () => this.closeMenuItems());
+    } else {
+      this.elements.window.removeEventListener('resize', () => this.closeMenuItems());
+    }
+  }
+  handleMenuChildren(event) {
+    const anchor = event.currentTarget;
+    const parentLi = anchor.parentElement;
+    if (!(parentLi !== null && parentLi !== void 0 && parentLi.classList)) {
+      return;
+    }
+    parentLi.classList.toggle('elementor-active');
+  }
+}
+document.addEventListener('DOMContentLoaded', () => {
+  new elementorHelloThemeHandler();
+});
+/******/ })()
+;