Embarking on a new project at my workplace, I find myself tasked with the creation of a Universal Header. This endeavor involves ensuring that across all our domains and servers, customer-created sites, and third-party platforms, we have a seamless method for deploying this header code.
The Universal Header will not only feature search functionality, which plays a crucial role in my inquiry. Simply put, it will involve JavaScript to dynamically modify the action attribute within its <form> element based on the dropdown selection, as well as facilitating form submission.
In envisioning how the header should operate, we are considering housing it in one central location, preferably utilizing an HTTP Request mechanism to retrieve the header. We believe this approach will enhance the portability of the Universal Header.
While we aim for seamless integration with WordPress (a task within reach), incorporating AngularJS poses a somewhat uncertain prospect. Hence, the tangential nature of the search functionality discussion.
One proposed solution involved implementing it in HTML akin to this answer. However, I harbor reservations about fetching raw HTML via HTTP and directly injecting it into a page, though it may be deemed the optimal route. In light of this uncertainty, we contemplated adopting the strategy utilized by the JIRA Issue Collector, where they dispatch JavaScript snippets to their customers for constructing the issue tracker button positioned on the side of a page featuring incorporated HTML, CSS, and JS elements. When users click this button, a form becomes available for submission. While this description might oversimplify the process, essentially their JS snippet bundles the HTML/CSS/JS components and forwards data to their server.
This is the path we wish to pursue: consolidating all necessary components into a single file. Nevertheless, some uncertainties linger:
- How can we address the "flash" effect associated with loading the header? Since the header is AJAXed in upon page load, there exists a brief period where the header appears abruptly. How can we mitigate this user experience challenge? My proposal involves a Skeleton area placeholder for the header, transitioning to the actual header via JavaScript. Yet, I am unsure if this approach is considered conventional.
- Is there a customary method for bundling HTML creation, CSS styling, and JavaScript functionality into a singular file (such as a JS file)? Or is it preferable to employ an HTML file linking to a JS and Stylesheet? Uncertainty clouds my judgment regarding the bundling aspect. Although our project eschews Angular or React, I possess some familiarity with Webpack, which could serve the purpose adeptly, perhaps. Though other frameworks necessitate seamless integration.
- I contemplate the possibility of segregating HTML into one HTTP Request while grouping JavaScript and Styles into another — resembling a web component. Essentially, we would parallel-fetch HTML, CSS, and JS and amalgamate them UI-side upon retrieval. What potential pitfalls accompany this methodology, and what considerations must be pondered?
- What strategies exist to effectively integrate this concept with AngularJS? Given the inclusion of search functionality within the header, broadcasting events to AngularJS post-search submission stands imperative.
Initially, for the aforementioned point, my inclination leaned toward associating it with a window object and establishing custom event handling in JavaScript — however, executing this remains a mystery. The following pseudo-code might deviate significantly, prompting me to seek clarity through this query:
/// inside the SearchController in AngularJS
$scope.defaultRealm = 'products';
/// setting default realm upon AngularJS load
document.when('angularJSLoads', function () {
document.getElementById('universal-header').find('.dropdown', function () {
// implementation to select $scope.defaultRealm within dropdown options.
})
})
/// initiating search within defaultRealm
document.querySelector('.dropdown').onEvent('headerSearch', function (e) {
e.preventDefault();
var data = event.target.value;
// perform searching in AngularJS
})
If superior or more streamlined approaches abound, I eagerly welcome insights.
Your assistance with this matter is greatly appreciated. As we tread uncharted territory, our primary objective remains securing a highly maintainable header for seamless dissemination across diverse domains and platforms.