Rebuild the editor around one sidebar and play motion by default in 1.11.0
The editor follows the Flatsome UX Builder: dark top bar with the device switch, one sidebar with tabs for elements, structure and page, an element view with breadcrumbs, property tabs and actions, element cards, a context menu in the preview and keyboard shortcuts that also work inside the preview. Entrance and hover effects play for every visitor unless the website chooses to respect the browser's reduced-motion preference (setting "motion", class "motion-respect" on <html>). Waiting blocks stay hidden until they scroll into view and are shown at once when the reader jumps past them. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Fable 5.1 committed
1 parent
ebc16777d6
commit
a1f8b905cd
18 files changed
+723
-433
No files matched your search
+76
-29
@@ -55,10 +55,12 @@ try {
|
||||
assert.equal(hovered.transform, 'matrix(1, 0, 0, 1, 0, -4)', 'Saved lift effect changes the rendered transform');
|
||||
const target = page.locator('#kontakt');
|
||||
assert.equal(await page.evaluate(() => motionCalls.some(call => call.id === 'kontakt')), false, 'Below-fold section must wait for scrolling');
|
||||
assert.equal(await target.evaluate(node => node.style.opacity), '0', 'Below-fold block waits out of sight, as in Flatsome');
|
||||
await target.scrollIntoViewIfNeeded();
|
||||
await page.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'));
|
||||
const calls = await page.evaluate(() => motionCalls);
|
||||
assert.equal(calls.find(call => call.id === 'kontakt').frames[0].transform, 'translateY(28px)');
|
||||
assert.equal(calls.find(call => call.id === 'kontakt').frames[0].transform, 'translateY(40px)');
|
||||
assert.equal(calls.find(call => call.id === 'kontakt').frames[0].opacity, 0, 'Entrance fades in from invisible, as in Flatsome');
|
||||
await page.waitForTimeout(800);
|
||||
await page.evaluate(() => scrollTo(0, 0)); await target.scrollIntoViewIfNeeded(); await page.waitForTimeout(100);
|
||||
assert.equal(await page.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 1, 'Entrance runs once');
|
||||
@@ -79,37 +81,67 @@ try {
|
||||
const animation = node.getAnimations()[0]; animation.pause(); animation.currentTime = 150;
|
||||
return { transform: getComputedStyle(node).transform, frames: animation.effect.getKeyframes() };
|
||||
});
|
||||
assert.equal(actual.frames[0].transform, direction === 'left' ? 'translateX(-36px)' : 'translateX(36px)');
|
||||
assert.equal(actual.frames[0].transform, direction === 'left' ? 'translateX(-56px)' : 'translateX(56px)');
|
||||
const offset = Number(actual.transform.split(',')[4]);
|
||||
assert.ok(direction === 'left' ? offset < 0 : offset > 0, 'Computed movement follows selected direction');
|
||||
await page.screenshot({ path: `${report}/${direction}-${width}.png` });
|
||||
await page.evaluate(() => window.stopMotionCheck());
|
||||
}
|
||||
// Default setting: the website plays regardless of the browser preference (Flatsome mode).
|
||||
// Umut's Chrome reports "reduce" without anyone having chosen it; the site must still move.
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await page.reload(); await target.scrollIntoViewIfNeeded(); await page.waitForTimeout(800);
|
||||
assert.equal(await page.evaluate(() => motionCalls.length), 0, 'Reduced motion suppresses animations');
|
||||
assert.equal(await target.evaluate(node => getComputedStyle(node).opacity), '1');
|
||||
await hoverTarget.hover(); await page.waitForTimeout(350);
|
||||
assert.equal(await hoverTarget.evaluate(node => getComputedStyle(node).transform), 'none', 'Reduced motion suppresses hover movement');
|
||||
await target.scrollIntoViewIfNeeded();
|
||||
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await page.reload(); await target.scrollIntoViewIfNeeded();
|
||||
await page.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'), null, { timeout: 3000 });
|
||||
await page.waitForTimeout(800);
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await page.waitForTimeout(900);
|
||||
assert.equal(await target.evaluate(node => getComputedStyle(node).opacity), '1', 'Block ends fully visible');
|
||||
await hoverTarget.scrollIntoViewIfNeeded(); await hoverTarget.hover(); await page.waitForTimeout(350);
|
||||
assert.equal(await hoverTarget.evaluate(node => getComputedStyle(node).transform), 'matrix(1, 0, 0, 1, 0, -4)', 'Default setting keeps the hover lift under a reduce preference');
|
||||
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await page.waitForTimeout(100);
|
||||
assert.equal(await page.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 1, 'Preference changes do not replay an already seen element');
|
||||
await hoverTarget.hover(); await page.waitForTimeout(350);
|
||||
assert.equal(await hoverTarget.evaluate(node => getComputedStyle(node).transform), 'matrix(1, 0, 0, 1, 0, -4)', 'Hover resumes after allowing motion');
|
||||
// Also cover a page that starts normally, then suppresses motion before reaching its content.
|
||||
await page.reload(); await page.waitForTimeout(800);
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await target.scrollIntoViewIfNeeded(); await page.waitForTimeout(100);
|
||||
assert.equal(await page.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 0);
|
||||
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await page.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'), null, { timeout: 3000 });
|
||||
results.push({ width, inventory, calls, checks: ['scroll trigger', 'once only', 'left/right computed movement', 'saved hover lift', 'reduced motion', 'resume without reloading after initial and subsequent reduced motion', 'hover resumes after preference change'] });
|
||||
await context.close();
|
||||
|
||||
// Setting "Browservorgabe beachten": <html class="motion-respect">. Simulated by adding the
|
||||
// class before any script runs, exactly where the template would print it.
|
||||
const respect = await browser.newContext({ viewport: { width, height: 900 }, reducedMotion: 'reduce' });
|
||||
await respect.addInitScript(() => {
|
||||
window.motionCalls = [];
|
||||
const animate = Element.prototype.animate;
|
||||
Element.prototype.animate = function (frames, options) {
|
||||
const animation = animate.call(this, frames, options);
|
||||
window.motionCalls.push({ id: this.id, frames, options, scrollY, top: this.getBoundingClientRect().top });
|
||||
return animation;
|
||||
};
|
||||
new MutationObserver((_, observer) => {
|
||||
if (!document.documentElement) return;
|
||||
document.documentElement.classList.add('motion-respect'); observer.disconnect();
|
||||
}).observe(document, { childList: true });
|
||||
});
|
||||
const respectPage = await respect.newPage(); respectPage.on('pageerror', error => errors.push(error.message));
|
||||
const respectTarget = respectPage.locator('#kontakt'), respectHover = respectPage.locator('#leistung-app');
|
||||
await respectPage.goto(origin); await respectTarget.scrollIntoViewIfNeeded(); await respectPage.waitForTimeout(800);
|
||||
assert.equal(await respectPage.evaluate(() => motionCalls.length), 0, 'Reduced motion suppresses animations when respected');
|
||||
assert.equal(await respectTarget.evaluate(node => getComputedStyle(node).opacity), '1');
|
||||
await respectHover.scrollIntoViewIfNeeded(); await respectHover.hover(); await respectPage.waitForTimeout(350);
|
||||
assert.equal(await respectHover.evaluate(node => getComputedStyle(node).transform), 'none', 'Reduced motion suppresses hover movement when respected');
|
||||
await respectTarget.scrollIntoViewIfNeeded();
|
||||
await respectPage.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await respectPage.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'), null, { timeout: 3000 });
|
||||
await respectPage.waitForTimeout(900);
|
||||
await respectPage.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await respectPage.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await respectPage.waitForTimeout(100);
|
||||
assert.equal(await respectPage.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 1, 'Preference changes do not replay an already seen element');
|
||||
await respectHover.scrollIntoViewIfNeeded(); await respectHover.hover(); await respectPage.waitForTimeout(350);
|
||||
assert.equal(await respectHover.evaluate(node => getComputedStyle(node).transform), 'matrix(1, 0, 0, 1, 0, -4)', 'Hover resumes after allowing motion');
|
||||
// Also cover a page that starts normally, then suppresses motion before reaching its content.
|
||||
await respectPage.reload(); await respectPage.waitForTimeout(800);
|
||||
await respectPage.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await respectTarget.scrollIntoViewIfNeeded(); await respectPage.waitForTimeout(100);
|
||||
assert.equal(await respectPage.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 0);
|
||||
assert.equal(await respectTarget.evaluate(node => getComputedStyle(node).opacity), '1', 'A waiting block is shown again when motion is reduced');
|
||||
await respectPage.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await respectPage.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'), null, { timeout: 3000 });
|
||||
results.push({ width, inventory, calls, checks: ['scroll trigger', 'once only', 'hidden until visible', 'left/right computed movement', 'saved hover lift', 'default plays under reduce preference', 'motion-respect honours reduce', 'resume without reloading after initial and subsequent reduced motion', 'hover resumes after preference change'] });
|
||||
await respect.close();
|
||||
}
|
||||
const noJs = await browser.newContext({ javaScriptEnabled: false });
|
||||
const page = await noJs.newPage(); await page.goto(origin);
|
||||
@@ -124,13 +156,28 @@ try {
|
||||
await editor.getByRole('button', { name: 'Anmelden', exact: true }).click();
|
||||
await editor.waitForURL(origin + '/admin');
|
||||
await editor.goto(`${origin}/admin/pages/${fixture.homeId}`);
|
||||
await editor.locator('#motion-status').waitFor({ state: 'visible' });
|
||||
// With the default setting the note stays away: the site plays anyway, there is nothing to say.
|
||||
await editor.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
||||
await editor.screenshot({ path: `${report}/editor-motion-status.png` });
|
||||
await editor.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await editor.locator('#motion-status').waitFor({ state: 'hidden' });
|
||||
await editor.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await editor.locator('#motion-status').waitFor({ state: 'visible' });
|
||||
await editor.waitForTimeout(300);
|
||||
assert.equal(await editor.locator('#motion-status').isVisible(), false, 'No motion note while the site ignores the preference');
|
||||
await editor.close();
|
||||
// The note appears once the site respects the preference - simulated in the preview frame.
|
||||
// The preview frame carries the website's decision as a class on its <html>; set it there the
|
||||
// way the template would, then let the preference change re-evaluate the note.
|
||||
const editorRespect = await editorContext.newPage(); editorRespect.on('pageerror', error => errors.push(error.message));
|
||||
await editorRespect.goto(`${origin}/admin/pages/${fixture.homeId}`);
|
||||
await editorRespect.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
||||
await editorRespect.evaluate(() => document.querySelector('#preview').contentDocument.documentElement.classList.add('motion-respect'));
|
||||
// Two toggles in one breath cancel out before the change event fires; give each its moment.
|
||||
await editorRespect.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await editorRespect.waitForTimeout(300);
|
||||
await editorRespect.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await editorRespect.locator('#motion-status').waitFor({ state: 'visible' });
|
||||
await editorRespect.screenshot({ path: `${report}/editor-motion-status.png` });
|
||||
await editorRespect.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await editorRespect.locator('#motion-status').waitFor({ state: 'hidden' });
|
||||
await editorRespect.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await editorRespect.locator('#motion-status').waitFor({ state: 'visible' });
|
||||
await editorContext.close();
|
||||
assert.deepEqual(errors, []);
|
||||
assert.equal(await hash(), before, 'Original database unchanged');
|
||||
|
||||
Reference in new issue
Block a user