Display Full URL in Results and Make it Clickable (#252)

* ✨ feat(result): show full URL, not only hostname * feat: use an input to display the URL in * feat: disable the input to allow copy only --------- Co-authored-by: Bastien Gatellier <[email protected]> Co-authored-by: Bastien Gatellier <[email protected]>
cnumr · Feb 11, 2024 · 7728a0c · 7728a0c
1 parent 13f4dc2
commit 7728a0c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/assets/js/components/SiteAnalysisResult.js b/assets/js/components/SiteAnalysisResult.js
@@ -115,6 +115,7 @@ class SiteAnalysisResult {
 		this._setDomContent(pageResultData, "data-int", "data-int-attr");
 
 		// specific components updates
+		this._updateUrl(pageResultData.url)
 		this._updateNoteChart(pageResultData.grade);
 		this._updateFootprintResultsFromSelect();
 		this._updatetResultRangeSliders(pageResultData);
@@ -197,7 +198,7 @@ class SiteAnalysisResult {
 		let formatedValue;
 		// Format date
 		formatedValue = this._getValidDateString(elementValue);
-		formatedValue = formatedValue ? formatedValue : getUrlHostName(elementValue);
+		formatedValue = formatedValue ? formatedValue : elementValue;
 		return formatedValue ? formatedValue : elementValue;
 	}
 
@@ -260,5 +261,15 @@ class SiteAnalysisResult {
 		const sliderEls = document.querySelectorAll(".js-rlr");
 		sliderEls.forEach((sliderEl) => new ResultRangeSlider({ sliderEl, data }));
 	}
+
+	/**
+	 * Update the href and title attribute of the element that contains the analyzed URL
+	 * @param {string} url
+	 */
+	_updateUrl(url) {
+		const urlElement = this.el.querySelector(".result-url")
+
+		urlElement.setAttribute("value", url)
+	}
 }
 export default SiteAnalysisResult;
diff --git a/content/en/result/_#first_intro.md b/content/en/result/_#first_intro.md
@@ -6,5 +6,7 @@ widget="result-intro"
 Calculated on {{< result-date >}}
 
 <h1 class="h2 font-weight:semi-bold">
-Results for {{< result-url >}}
+   Analysis results
 </h1>
+
+{{< result-url >}}
diff --git a/content/fr/result/_#first_intro.md b/content/fr/result/_#first_intro.md
@@ -6,5 +6,7 @@ widget="result-intro"
 Calculé le {{< result-date >}}
 
 <h1 class="h2 font-weight:semi-bold">
-Résultat pour {{< result-url >}}
+   Résultats de l’analyse
 </h1>
+
+{{< result-url >}}
diff --git a/layouts/partials/components/result-url.html b/layouts/partials/components/result-url.html
@@ -1 +1 @@
-<span class="result-url" data-int="url"></span>
+<input class="result-url" disabled data-int="url">
diff --git a/layouts/partials/widgets/result-intro.html b/layouts/partials/widgets/result-intro.html
@@ -7,6 +7,7 @@
 						>{{ partial "svg/inline-svg-use" "icon-arrow-left" }}&nbsp;{{ i18n `Back` }}</a
 					>
 				</div>
+
 				<div class="display:flex justify-content:end text-align:end">
 					<a href="/" class="button-default js-button-retest"
 						><span class="icon-square-wrapper bg-darkish" aria-label="{{ i18n `ReTest` }}"