Skip to content

MWPW-194002: Persistent support for image updloaded after sign in #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fullcolorcoder wants to merge 1 commit into
base: stage
Choose a base branch
from
Open

MWPW-194002: Persistent support for image updloaded after sign in #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions express/code/blocks/color-extract/color-extract.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -818,6 +818,7 @@ function renderColorVariant(block, rows, config, strings = {}) {
history.clear();
currentCanvas = null;
currentSrc = null;
sessionStorage.removeItem('color-extract-image-src');
popstateAc.abort();
block.querySelectorAll('.color-extract-suggestion.is-selected').forEach((el) => {
el.classList.remove('is-selected');
Expand All @@ -828,6 +829,7 @@ function renderColorVariant(block, rows, config, strings = {}) {
async function onImageReady(image, src) {
window.history.pushState({ colorExtract: 'results' }, '');
currentSrc = src;
try { sessionStorage.setItem('color-extract-image-src', src); } catch { /* quota exceeded — image won't be restored after sign-in */ }
edit.setBackground(src);
history.clear();

Expand Down Expand Up @@ -980,7 +982,21 @@ function renderColorVariant(block, rows, config, strings = {}) {
const paletteName = getResolvedPaletteName();
controller.setState({ swatches: colors.map((hex) => ({ hex })), baseColorIndex: 0 });
if (paletteName) controller.setMetadata({ name: paletteName });
edit.bgWrapper.replaceWith(dropzone.container);

const storedSrc = sessionStorage.getItem('color-extract-image-src');
sessionStorage.removeItem('color-extract-image-src');
if (storedSrc) {
const img = new Image();
img.onload = async () => {
currentSrc = storedSrc;
edit.setBackground(storedSrc);
currentCanvas = drawImageToCanvas(img);
await setupMarkers(currentCanvas);
};
img.src = storedSrc;
} else {
edit.bgWrapper.replaceWith(dropzone.container);
}
block.classList.add('has-image');
window.history.replaceState({ colorExtract: 'results' }, '');
floatingToolbar.mount();
Expand Down Expand Up @@ -1269,6 +1285,7 @@ async function renderGradientVariant(block, rows, config, strings = {}) {
history.clear();
currentCanvas = null;
currentSrc = null;
sessionStorage.removeItem('color-extract-image-src');
popstateAc.abort();
gradientEditor.setGradient(initialGradient);
block.querySelectorAll('.color-extract-suggestion.is-selected').forEach((el) => {
Expand All @@ -1280,6 +1297,7 @@ async function renderGradientVariant(block, rows, config, strings = {}) {
async function onImageReady(image, src) {
window.history.pushState({ colorExtract: 'results' }, '');
currentSrc = src;
try { sessionStorage.setItem('color-extract-image-src', src); } catch { /* quota exceeded — image won't be restored after sign-in */ }
edit.setBackground(src);
history.clear();

Expand Down Expand Up @@ -1448,7 +1466,21 @@ async function renderGradientVariant(block, rows, config, strings = {}) {
const gradientData = { type: 'linear', angle: 90, colorStops };
gradientEditor.setGradient(gradientData);
syncSwatchesFromGradient(gradientData);
edit.bgWrapper.replaceWith(dropzone.container);

const storedSrc = sessionStorage.getItem('color-extract-image-src');
sessionStorage.removeItem('color-extract-image-src');
if (storedSrc) {
const img = new Image();
img.onload = async () => {
currentSrc = storedSrc;
edit.setBackground(storedSrc);
currentCanvas = drawImageToCanvas(img);
await setupMarkers(currentCanvas);
};
img.src = storedSrc;
} else {
edit.bgWrapper.replaceWith(dropzone.container);
}
block.classList.add('has-image');
window.history.replaceState({ colorExtract: 'results' }, '');
floatingToolbar.mount();
Expand Down
65 changes: 65 additions & 0 deletions test/blocks/color-extract/color-extract.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,68 @@ describe('Color Extract — gradient variant', () => {
expect(suggestions.length).to.equal(2);
});
});

describe('Color Extract — sign-in image restoration', () => {
const IMAGE_SRC_KEY = 'color-extract-image-src';
// Use a URL that triggers onerror (not onload) so the async setupMarkers
// dynamic import is never reached in the test environment.
const FAKE_SRC = './nonexistent-test-image.png';
const PARAM_NAME = 'color-palette';

before(() => {
window.isTestEnv = true;
});

afterEach(() => {
sessionStorage.removeItem(IMAGE_SRC_KEY);
window.history.replaceState({}, '', window.location.pathname);
});

it('palette: keeps bgWrapper in DOM when image src is stored and color-palette param present', async () => {
sessionStorage.setItem(IMAGE_SRC_KEY, FAKE_SRC);
window.history.replaceState({}, '', `${window.location.pathname}?${PARAM_NAME}=FF0000,00FF00`);
document.body.innerHTML = basic;
const block = document.querySelector('.color-extract');
await decorate(block);

expect(sessionStorage.getItem(IMAGE_SRC_KEY)).to.be.null;
expect(block.classList.contains('has-image')).to.be.true;
// bgWrapper should remain in the DOM (not replaced by the dropzone)
expect(block.querySelector('.color-extract-edit-bg')).to.exist;
});

it('palette: replaces bgWrapper with dropzone when no image stored and color-palette param present', async () => {
sessionStorage.removeItem(IMAGE_SRC_KEY);
window.history.replaceState({}, '', `${window.location.pathname}?${PARAM_NAME}=FF0000,00FF00`);
document.body.innerHTML = basic;
const block = document.querySelector('.color-extract');
await decorate(block);

expect(block.classList.contains('has-image')).to.be.true;
// bgWrapper replaced by dropzone — edit-bg should be gone
expect(block.querySelector('.color-extract-edit-bg')).to.not.exist;
});

it('gradient: keeps bgWrapper in DOM when image src is stored and color-palette param present', async () => {
sessionStorage.setItem(IMAGE_SRC_KEY, FAKE_SRC);
window.history.replaceState({}, '', `${window.location.pathname}?${PARAM_NAME}=FF0000,00FF00`);
document.body.innerHTML = gradient;
const block = document.querySelector('.color-extract');
await decorate(block);

expect(sessionStorage.getItem(IMAGE_SRC_KEY)).to.be.null;
expect(block.classList.contains('has-image')).to.be.true;
expect(block.querySelector('.color-extract-edit-bg')).to.exist;
});

it('gradient: replaces bgWrapper with dropzone when no image stored and color-palette param present', async () => {
sessionStorage.removeItem(IMAGE_SRC_KEY);
window.history.replaceState({}, '', `${window.location.pathname}?${PARAM_NAME}=FF0000,00FF00`);
document.body.innerHTML = gradient;
const block = document.querySelector('.color-extract');
await decorate(block);

expect(block.classList.contains('has-image')).to.be.true;
expect(block.querySelector('.color-extract-edit-bg')).to.not.exist;
});
});
Loading