Merge pull request #5107 from ampproject/update/non-amp-customize-link

Keep non-AMP Customizer link referencing the currently-previewed URL
ampproject · Jul 27, 2020 · 2b2add5 · 2b2add5
2 parents 5085d11 + 1c47a0f
commit 2b2add5
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -115,6 +115,14 @@
         "navigator": false,
         "sessionStorage": false
       }
+    },
+    {
+      "files": [
+        "assets/src/customizer/amp-customize-controls.js"
+      ],
+      "globals": {
+        "HTMLAnchorElement": false
+      }
     }
   ]
 }
diff --git a/assets/src/customizer/amp-customize-controls.js b/assets/src/customizer/amp-customize-controls.js
@@ -4,6 +4,7 @@ window.ampCustomizeControls = ( function( api, $ ) {
 	'use strict';
 
 	const component = {
+		nonAmpCustomizerLink: null,
 		data: {
 			queryVar: '',
 			l10n: {
@@ -29,6 +30,7 @@ window.ampCustomizeControls = ( function( api, $ ) {
 		component.extendRootDescription();
 
 		$.ajaxPrefilter( component.injectAmpIntoAjaxRequests );
+		api.bind( 'ready', component.updateNonAmpCustomizeLink );
 		api.bind( 'ready', component.forceAmpPreviewUrl );
 		api.bind( 'ready', component.addOptionSettingNotices );
 		api.bind( 'ready', component.addNavMenuPanelNotice );
@@ -40,6 +42,28 @@ window.ampCustomizeControls = ( function( api, $ ) {
 	component.updatePreviewNotice = function updatePreviewNotice() {
 		const previewNotice = $( '#customize-info .preview-notice' );
 		previewNotice.html( component.data.l10n.ampVersionNotice ); // Contents have been sanitized with wp_kses_post().
+		component.nonAmpCustomizerLink = previewNotice.find( 'a[href]' )[ 0 ];
+	};
+
+	/**
+	 * Make sure the non-AMP Customizer link keeps referencing to the currently-previewed URL.
+	 */
+	component.updateNonAmpCustomizeLink = function updateNonAmpCustomizeLink() {
+		if ( ! ( component.nonAmpCustomizerLink instanceof HTMLAnchorElement ) ) {
+			return;
+		}
+
+		const update = () => {
+			const previewUrl = new URL( api.previewer.previewUrl() );
+			previewUrl.searchParams.delete( component.data.queryVar );
+
+			const customizeUrl = new URL( component.nonAmpCustomizerLink.href );
+			customizeUrl.searchParams.set( 'url', previewUrl );
+			component.nonAmpCustomizerLink.href = customizeUrl.href;
+		};
+
+		update();
+		api.previewer.previewUrl.bind( update );
 	};
 
 	/**