dees-wcctools/test/pages/pageLongScroll.ts

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>
`;