design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(wcc-dashboard): Improve scroll listener management and add new test pages

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-26 23:11:58 +00:00
parent b6c41caf44
commit c1d8e347de
8 changed files with 161 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/pages/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './page1.js';
export * from './pageLongScroll.js';

3
test/pages/page1.ts Normal file
View File

@ -0,0 +1,3 @@
import { html } from '@design.estate/dees-element';
export const page1 = () => html` <test-demoelement></test-demoelement> `;

138
test/pages/pageLongScroll.ts Normal file
View File

@ -0,0 +1,138 @@
import { html } from '@design.estate/dees-element';
export const pageLongScroll = () => html`
<style>
.long-scroll-container {
padding: 40px;
max-width: 800px;
margin: 0 auto;
}
.section {
margin-bottom: 60px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #fff;
}
h2 {
font-size: 1.8em;
margin-bottom: 15px;
color: #ddd;
}
p {
line-height: 1.6;
color: #ccc;
margin-bottom: 15px;
}
.placeholder-content {
height: 300px;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #888;
font-size: 1.2em;
margin: 20px 0;
}
</style>
<div class="long-scroll-container">
<h1>Long Scroll Test Page</h1>
<div class="section">
<h2>Section 1: Introduction</h2>
<p>This is a long page designed to test scroll position preservation. Scroll down to see more content and then reload the page to verify that the scroll position is restored correctly.</p>
<p>The URL should update with scroll position parameters as you scroll, and when you reload the page, it should automatically scroll to the last position.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 1</span>
</div>
<div class="section">
<h2>Section 2: Testing Scroll Behavior</h2>
<p>As you scroll through this page, the dashboard should track your scroll position and update the URL accordingly. The updates should be debounced to avoid excessive URL changes.</p>
<p>Try scrolling quickly and slowly to see how the debouncing works. The URL should update smoothly without interfering with your scrolling experience.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 2</span>
</div>
<div class="section">
<h2>Section 3: Reload Testing</h2>
<p>Once you've scrolled to this section, try reloading the page. The page should automatically scroll back to this position after the content loads.</p>
<p>This demonstrates that the scroll position is being preserved across page reloads using URL parameters.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 3</span>
</div>
<div class="section">
<h2>Section 4: Navigation Testing</h2>
<p>Try navigating to a different element or page in the sidebar, then use the browser's back button to return here. The scroll position should be preserved.</p>
<p>This tests that the browser history correctly maintains scroll state for each navigation entry.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 4</span>
</div>
<div class="section">
<h2>Section 5: Deep Scroll Testing</h2>
<p>Keep scrolling! This page has plenty of content to ensure we can test scroll positions at various depths.</p>
<p>The scroll tracking should work reliably regardless of how far down the page you scroll.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 5</span>
</div>
<div class="section">
<h2>Section 6: Performance Testing</h2>
<p>Even with continuous scroll tracking, the page should remain responsive and smooth. The debouncing mechanism ensures that URL updates don't impact scrolling performance.</p>
<p>Try scrolling rapidly up and down to verify that the scrolling remains smooth.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 6</span>
</div>
<div class="section">
<h2>Section 7: Sidebar Scroll Testing</h2>
<p>Don't forget to test the sidebar scrolling as well! If the sidebar has enough items to scroll, its position should also be tracked and restored.</p>
<p>Both the main content and sidebar scroll positions should be preserved independently.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 7</span>
</div>
<div class="section">
<h2>Section 8: Edge Cases</h2>
<p>This section tests edge cases like scrolling to the very bottom of the page, then reloading.</p>
<p>The scroll restoration should handle these cases gracefully without any visual glitches or errors.</p>
</div>
<div class="placeholder-content">
<span>Placeholder Content Block 8</span>
</div>
<div class="section">
<h2>Section 9: Final Section</h2>
<p>You've reached the end of the scroll test page! Try reloading from here to ensure that even the bottom-most scroll positions are correctly preserved.</p>
<p>The scroll position tracking has been successfully implemented if you can reload and return to this exact position.</p>
</div>
</div>
`;