From 20711cc996bcfb1c63ac527cb7aa06cb5fe80e8a Mon Sep 17 00:00:00 2001
From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:19:00 -0700
Subject: [PATCH] =?UTF-8?q?MWPW-159445=20-=20Remove=20thumbnail=20from=20a?=
 =?UTF-8?q?uthoring=20for=20change=20background=20i=E2=80=A6=20(#143)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stage to main sync PR (Stage PR (#134))

- Remove thumbnail from authoring for change background in unity block
- This update is done to fix an issue with html localization flow
https://github.com/adobe/helix-html2md/issues/555

Resolves: [MWPW-159445](https://jira.corp.adobe.com/browse/MWPW-159445)

Test URLs:

Before:

https://main--cc--adobecom.hlx.page/drafts/ruchika/remove-background1?unitylibs=main
After:

https://main--cc--adobecom.hlx.page/drafts/ruchika/remove-background1?unitylibs=stage
---
 .../workflow-photoshop/workflow-photoshop.css   |  2 +-
 .../workflow-photoshop/workflow-photoshop.js    | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.css b/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.css
index e3f5a39..bba81bc 100644
--- a/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.css
+++ b/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.css
@@ -9,7 +9,7 @@
 }
 
 .unity-enabled .interactive-area .unity-option-area .changebg-options-tray .changebg-option {
-  border-radius: 5.36px;
+  border-radius: 4px;
   cursor: pointer;
   border: 3px solid transparent;
   overflow: hidden;
diff --git a/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.js b/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.js
index 1fbac20..23efd63 100644
--- a/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.js
+++ b/unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.js
@@ -7,6 +7,7 @@ import {
   loadSvg,
   decorateDefaultLinkAnalytics,
   createIntersectionObserver,
+  priorityLoad,
 } from '../../../scripts/utils.js';
 
 function resetSliders(unityWidget) {
@@ -265,6 +266,14 @@ async function changeBgHandler(cfg, selectedUrl = null, refreshState = true) {
   unityEl.dispatchEvent(new CustomEvent(interactiveSwitchEvent));
 }
 
+function updateQueryParam(url, params) {
+  const parsedUrl = new URL(url);
+  Object.entries(params).forEach(([key, value]) => {
+    parsedUrl.searchParams.set(key, value);
+  });
+  return parsedUrl;
+}
+
 async function changebg(cfg, featureName) {
   const { unityWidget, wfDetail } = cfg;
   const { authorCfg } = wfDetail[featureName];
@@ -275,12 +284,15 @@ async function changebg(cfg, featureName) {
   btn.dataset.optionsTray = 'changebg-options-tray';
   const bgSelectorTray = createTag('div', { class: 'changebg-options-tray show' });
   const bgOptions = authorCfg.querySelectorAll(':scope ul li');
+  const thumbnailSrc = [];
   [...bgOptions].forEach((o) => {
     let thumbnail = null;
     let bgImg = null;
-    [thumbnail, bgImg] = o.querySelectorAll('img');
-    if (!bgImg) bgImg = thumbnail;
+    bgImg = o.querySelector('img');
+    thumbnail = bgImg;
     thumbnail.dataset.backgroundImg = bgImg.src;
+    thumbnail.setAttribute('src', updateQueryParam(bgImg.src, { format: 'webply', width: '68', height: '68' }));
+    thumbnailSrc.push(thumbnail.getAttribute('src'));
     const a = createTag('a', { href: '#', class: 'changebg-option' }, thumbnail);
     bgSelectorTray.append(a);
     a.addEventListener('click', async (evt) => {
@@ -288,6 +300,7 @@ async function changebg(cfg, featureName) {
       handleEvent(cfg, () => changeBgHandler(cfg, bgImg.src, false));
     });
   });
+  priorityLoad(thumbnailSrc);
   unityWidget.querySelector('.unity-option-area').append(bgSelectorTray);
   btn.addEventListener('click', (evt) => {
     evt.preventDefault();