<|start_filename|>package.json<|end_filename|>
{
  "name": "virtual-scroller-demos",
  "version": "0.0.1",
  "description": "Demos using <virtual-scroller>.",
  "devDependencies": {
    "http-server": "^0.11.1",
    "babel-eslint": "^10.0.2",
    "eslint": "^6.1.0",
    "eslint-config-google": "^0.13.0"
  },
  "scripts": {
    "start": "http-server -p 8082",
    "lint": "find demo -name '*.mjs' | xargs ./node_modules/.bin/eslint"
  },
  "repository": "valdrinkoshi/virtual-scroller",
  "license": "Apache-2.0"
}


<|start_filename|>demo/html-standard/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Virtual Scoller Demos using the HTML standard</title>

  <p>
    The HTML standard is 11M of content in a single page.
    It is a stress test for browsers
    with sometimes multiple seconds before first paint
    and jank throughout the loading phase.
  </p>
  <ul>
    <li>
      <a href="standard.html">The original standard</a>
    <li>
      <a href="standard-scroller.html">The original standard wrapped in a scroller</a>
    <li>
      <a href="standard-1M.html">The first 1M of the original standard</a>
    <li>
      <a href="standard-1M-scroller.html">The first 1M of the original standard wrapped in a scroller</a>
  </ul>


<|start_filename|>demo/simple/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Virtual Scoller Simple Demos</title>

  <p>Simple demos that show FPS performance for some common actions. In
    all cases you can switch between a virtual scroller element and a
    plain div as the container. You can also adjust the number of elements
    in the container.

  <ul>
    <li>
      <a href="resize.html">Resize the scroller</a>
    <li>
      <a href="resize-font.html">Resize the font of the scroller content</a>
    <li>
      <a href="restyle.html">Change the style of the scroller content</a>
    <li>
      <a href="scroll.html">Smoothly scroll through the content</a>
    <li>
      <a href="move-first-child.html">Move content around</a>
  </ul>


<|start_filename|>demo/styles.css<|end_filename|>
body {
  font-family: Roboto, Helvetica, sans-serif;
  max-width: 600px;
  height: 100vh;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}

label {
  display: block;
  margin: 1em;
}

#scroller {
  flex: 1;
  margin: 10px 0;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}

contact-element {
  height: 80px;
  display: block;
}


<|start_filename|>demo/simple/move-first-child.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Virtual Scoller Demo - Moving children</title>
  <style>
    .scroller {
        overflow: scroll;
        height: 400px;
    }
  </style>
  <script type="module" src="./scaffolding.mjs"></script>

  <p>Repeatedly moving the first child to the end of the content. This
    is potentially faster as we may be able to avoid layout changes to
    the locked elements, however the scroller's internal state must
    react to the mutation.</p>

  <confirm-features></confirm-features>
  <fps-display></fps-display>

  <demo-controller id=dc></demo-controller>
  <div style="width: 100%">
    <div id=contentDiv class="scroller resize">
      <virtual-scroller id=vs></virtual-scroller>
    </div>
  </div>

  <script type="module">
    import * as Util from '../util/util.mjs';
    Util.everyFrame(i => {
      vs.appendChild(vs.firstChild);
    });
  </script>


<|start_filename|>demo/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Virtual Scoller Demos</title>

  <p>
    To experience these demos
    you will need a browser that has a working <code>&lt;virtual-scroller&gt;</code> element.
    See here for working <a href="https://github.com/WICG/virtual-scroller#sample-implementations">sample implementations<a/>.
  </p>
  <ul>
    <li>
      <a href="simple/">Various scenarios that matter for performance</a>
    <li>
      <a href="loadmore.html">A scroller that display contacts and can load more</a>
    <li>
      <a href="sticky.html">Nested scrollers displaying contacts in groups with sticky headers</a>
    <li>
      <a href="html-standard">Improving loading of the HTML standard</a>
  </ul>
