Release candidate: Improve codebase and define info

README.md

@@ -1,5 +1,29 @@
-# search-ui
-Search user interface with headless
+# Project: Search UI
+Purpose of this repository is to provide MWS pages with the proper JS and CSS assets to achieve a working search page with the vendor's (Coveo) technology called Headless.
+
+## Key details
+
+### Sponsor
+This project is led by Principal Publisher at ESDC. The key contact in case of questions related to the project is Francis Gorman, who can be reached at [email protected].
+
+### Update frequency
+The goal is to continue to refine and improve this code base on a regular basis. Every 6 months, if no activity is recorded on this repository, the key contact shall be reached out to in order to ensure it isn't stale.
+
+### Roadmap overview
+In the medium to long term, some activities may take place related to:
+- stabilization of the query suggestion combobox;
+- porting of some parts of the codebase to GCWeb;
+- addition of machine learning features.
+
+## References
+
+- Coveo Headless: https://docs.coveo.com/en/headless/latest/
+
+## Versioning API
+
+Each new verion of this project is defined based on an evaluaton of the impacts of changes against any formerly up-to-date Search UI implementation. The scope constitutes of all files within the "dist" folder (distribution files), which are JavaScript scripts and CSS styles.
+
+Search UI follows [Semantic Versioning 2.0.0](https://semver.org/)
 
 ## Getting started
 
@@ -8,9 +32,3 @@ Search user interface with headless
 3. run: grunt (build script; tasks to lint, test & minify content in "dist")
 4. To test web pages: Push to GitHub and run your GitHub Pages
 5. To Deploy: Take the content of the "dist" folder and put it on a server
-
-## Versioning API
-
-Each new verion of this project is defined based on an evaluaton of the impacts of changes against any formerly up-to-date Search UI implementation. The scope constitutes of all files within the "dist" folder (distribution files), which are JavaScript scripts and CSS styles.
-
-Search UI follows [Semantic Versioning 2.0.0](https://semver.org/)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "search-ui",
-	"version": "1.0.0-alpha",
+	"version": "1.0.0",
 	"description": "Canada.ca Search UI with Headless",
 	"main": "index.html",
 	"repository": {

src/connector.js

@@ -51,7 +51,7 @@ paramsDetect.isAdvancedSearch = !!document.getElementById( 'advseacon1' ) || win
 paramsDetect.enableHistoryPush = !paramsDetect.isAdvancedSearch;
 
 // Final parameters object
-params = Object.assign( defaults, paramsDetect, JSON.parse( baseElement.dataset.gcSearch ) );
+params = Object.assign( defaults, paramsDetect, JSON.parse( baseElement.dataset.gcSearch || {} ) );
 
 // Update the URL params and the hash params on navigation
 window.onpopstate = () => {
@@ -294,78 +294,93 @@ if ( !pagerContainerTemplateHTML ) {
 	}
 }
 
-// auto-create results section if not present
-if ( !resultsSection ) {
-	resultsSection = document.createElement( "section" );
-	resultsSection.id = "wb-land";
-	resultsSection.classList.add( "results" );
+// Auto-create parts of search pages templates if not already defined
+function autoCreateTpl() {
 
-	baseElement.prepend( resultsSection );
-}
+	// auto-create results
+	if ( !resultsSection ) {
+		resultsSection = document.createElement( "section" );
+		resultsSection.id = "wb-land";
+		resultsSection.classList.add( "results" );
 
-resultsSection.setAttribute( "aria-live", "polite" );
+		baseElement.prepend( resultsSection );
+	}
 
-// auto-create query summary element
-if ( !querySummaryElement ) {
-	querySummaryElement = document.createElement( "div" );
-	querySummaryElement.id = "query-summary";
+	// auto-create query summary element
+	if ( !querySummaryElement ) {
+		querySummaryElement = document.createElement( "div" );
+		querySummaryElement.id = "query-summary";
 
-	resultsSection.append( querySummaryElement );
-}
+		resultsSection.append( querySummaryElement );
+	}
 
-// auto-create did you mean element
-if ( !didYouMeanElement ) {
-	didYouMeanElement = document.createElement( "div" );
-	didYouMeanElement.id = "did-you-mean";
+	// auto-create did you mean element
+	if ( !didYouMeanElement ) {
+		didYouMeanElement = document.createElement( "div" );
+		didYouMeanElement.id = "did-you-mean";
 
-	resultsSection.append( didYouMeanElement );
-}
+		resultsSection.append( didYouMeanElement );
+	}
 
-// auto-create results section if not present
-if ( !resultListElement ) {
-	resultListElement = document.createElement( "div" );
-	resultListElement.id = "result-list";
+	// auto-create results section if not present
+	if ( !resultListElement ) {
+		resultListElement = document.createElement( "div" );
+		resultListElement.id = "result-list";
 
-	resultsSection.append( resultListElement );
-}
+		resultsSection.append( resultListElement );
+	}
 
-// auto-create pager
-if ( !pagerElement ) {
-	let newPagerElement = document.createElement( "div" );
-	newPagerElement.innerHTML = pagerContainerTemplateHTML;
+	// auto-create pager
+	if ( !pagerElement ) {
+		let newPagerElement = document.createElement( "div" );
+		newPagerElement.innerHTML = pagerContainerTemplateHTML;
 
-	resultsSection.append( newPagerElement );
-	pagerElement = newPagerElement.querySelector( "#pager" );
-}
+		resultsSection.append( newPagerElement );
+		pagerElement = newPagerElement.querySelector( "#pager" );
+	}
+
+	// auto-create suggestions element
+	if ( !suggestionsElement && searchBoxElement && params.unsupportedSuggestions && params.numberOfSuggestions > 0 ) {
+		suggestionsElement = document.createElement( "ul" );
+		suggestionsElement.id = "suggestions";
+		suggestionsElement.classList.add( "rough-experimental", "query-suggestions" );
 
-// auto-create suggestions element
-if ( !suggestionsElement && searchBoxElement && params.unsupportedSuggestions && params.numberOfSuggestions > 0 ) {
-	suggestionsElement = document.createElement( "ul" );
-	suggestionsElement.id = "suggestions";
-	suggestionsElement.classList.add( "rough-experimental", "query-suggestions" );
+		searchBoxElement.after( suggestionsElement );
+	}
+}
 
-	searchBoxElement.after( suggestionsElement );
+if( baseElement ) {
+	autoCreateTpl();
+	resultsSection.setAttribute( "aria-live", "polite" );
 }
 
-// Add an alert banner to clearly state that the Query suggestion feature is at a rough experimental state
 if ( suggestionsElement ) {
-	const firstH1 = document.querySelector( "main h1:first-child" );
-	let roughExperimentAlert = document.createElement( "section" );
-
-	roughExperimentAlert.classList.add( "alert", "alert-danger" );
 
-	if ( lang === "fr" ) {
-		roughExperimentAlert.innerHTML = 
-			`<h2 class="h3">Avis de fonctionnalité instable</h2>
-			<p>Cette page utilise une fonctionnalité expérimentale pouvant contenir des problèmes d'accessibilité et/ou de produire des effets indésirables qui peuvent altérer l'expérience de l'utilisateur.</p>`;
+	// Remove unsupported query suggestion if on production (www.canada.ca)
+	if( window.location.hostname === "www.canada.ca" ) {
+		suggestionsElement.remove();
 	}
+
+	// Add an alert banner to clearly state that the Query suggestion feature is at a rough experimental state
 	else {
-		roughExperimentAlert.innerHTML = 
-			`<h2 class="h3">Unstable feature notice</h2>
-			<p>This page leverages an experimental feature subject to contain accessibility issues and/or to produce unwanted behavior which may alter the user experience.</p>`;
+		const firstH1 = document.querySelector( "main h1:first-child" );
+		let roughExperimentAlert = document.createElement( "section" );
+
+		roughExperimentAlert.classList.add( "alert", "alert-danger" );
+
+		if ( lang === "fr" ) {
+			roughExperimentAlert.innerHTML = 
+				`<h2 class="h3">Avis de fonctionnalité instable</h2>
+				<p>Cette page utilise une fonctionnalité expérimentale pouvant contenir des problèmes d'accessibilité et/ou de produire des effets indésirables qui peuvent altérer l'expérience de l'utilisateur.</p>`;
+		}
+		else {
+			roughExperimentAlert.innerHTML = 
+				`<h2 class="h3">Unstable feature notice</h2>
+				<p>This page leverages an experimental feature subject to contain accessibility issues and/or to produce unwanted behavior which may alter the user experience.</p>`;
+		}
+
+		firstH1.after( roughExperimentAlert );
 	}
-
-	firstH1.after( roughExperimentAlert );
 }
 
 const contextController = buildContext( headlessEngine );