physical-count.html 8.93 KB

Edit Raw Blame History

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!doctype html>
<html>
<head>

  <title>physical count</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../../../polymer/polymer.html">
  <link rel="import" href="../../../paper-button/paper-button.html">

  <link rel="import" href="../../iron-list.html">

  <style is="custom-style">
    body {
      @apply(--layout-fullbleed);
    }

    .item {
      background-color: green;
      border-bottom: 1px solid white;
      overflow:hidden;
    }

    .wrapper {
      position: relative;
      margin: 10px;
    }

    .wrapper .count {
      background-color: red;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
    }
    .wrapper .stats {
      background-color: red;
      position: absolute;
      top: 20px;
      right: 0;
      z-index: 1;
    }

    .wrapper iron-list {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .group {
      float: left;
    }

  </style>

</head>
<body unresolved>

  <template is="dom-bind">

    <h1>Physical count</h1>
    <p>In red you can see the last physical count values</p>
    <div class="group">
      <p>100 items, 50px tall</p>
      <div class="wrapper" style="width: 300px; height: 300px;">
        <iron-list id="list1" as="item">
          <template>
            <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
            <div>
              <paper-button raised>Test</paper-button>
              <paper-button raised>Test</paper-button>
              <paper-button raised>Test</paper-button>
              <paper-button raised>Test</paper-button>
            </div>
            </div>
          </template>
        </iron-list>
      </div>
    </div>
<!--
  <div class="group">
    <p>100 items, 300px tall</p>
    <div class="wrapper" style="width: 300px; height: 300px;">
      <iron-list id="list2" as="item">
        <template>
          <div class="item" style$="[[_getStyle(item)]]">
            <span>[[index]]</span> height: <span>[[item]]</span>
          </div>
        </template>
      </iron-list>
    </div>
</div>
<div class="group">
    <p>1000 items, 2px tall</p>
    <div class="wrapper" style="width: 300px; height: 300px;">
      <iron-list id="list3" as="item">
        <template>
          <div class="item" style$="[[_getStyle(item)]]">
            <span>[[index]]</span> height: <span>[[item]]</span>
          </div>
        </template>
      </iron-list>
    </div>
</div>
<div class="group">
    <p>First two items: 2px tall, next 100 items are 300px tall</p>
    <div class="wrapper" style="width: 300px; height: 300px;">
      <iron-list id="list4" as="item">
        <template>
          <div class="item" style$="[[_getStyle(item)]]">
            <span>[[index]]</span> height: <span>[[item]]</span>
          </div>
        </template>
      </iron-list>
    </div>
</div>
<div class="group">
    <p>100 items, 600px tall</p>
    <div class="wrapper" style="width: 300px; height: 300px;">
      <iron-list id="list5" as="item">
        <template>
          <div class="item" style$="[[_getStyle(item)]]">
            <span>[[index]]</span> height: <span>[[item]]</span>
          </div>
        </template>
      </iron-list>
    </div>
</div>
<div class="group">
    <p>1 item that is 2px tall, <br /> and then add 100 items async with different heights </p>
    <div class="wrapper" style="width: 300px; height: 300px;">
      <iron-list id="list6" as="item">
        <template>
          <div class="item" style$="[[_getStyle(item)]]">
            <span>[[index]]</span> height: <span>[[item]]</span>
          </div>
        </template>
      </iron-list>
    </div>
</div>

<div class="group">
    <p>200 items with random heights</p>
    <div class="wrapper" style="width: 300px; height: 300px;">
      <iron-list id="list7" as="item">
        <template>
          <div class="item" style$="[[_getStyle(item)]]">
            <span>[[index]]</span> height: <span>[[item]]</span>
          </div>
        </template>
      </iron-list>
    </div>
</div>


<div class="group">
    <p>200 items async with random heights</p>
    <div class="wrapper" style="width: 300px; height: 300px;">
      <iron-list id="list8" as="item">
        <template>
          <div class="item" style$="[[_getStyle(item)]]">
            <span>[[index]]</span> height: <span>[[item]]</span>
          </div>
        </template>
      </iron-list>
    </div>
</div> -->
</template>

  <script>
    HTMLImports.whenReady(function() {
      function observePhysicalCount(list) {
        var div = document.createElement('div');
        var stats = document.createElement('div');
        var values = [];
        var timer;
        div.classList.add('count');
        stats.classList.add('stats');

        Object.observe(list, function(changes) {
          var physicalCount = list._physicalCount;
          changes.forEach(function(change) {

            if (change.name === '_physicalCount') {
              values.pop();
              values.push(change.oldValue);
              values.push(list._physicalCount);
              div.innerText = values.join(' -> ');
            } else if (change.name === '_lastPage') {
              if (list._lastPage === 0) {
                timer = Date.now();
              } else if (list._lastPage === 1) {
                stats.innerText = 'First paint: ' + (Date.now() - timer) + 'ms';
              } else if (list._lastPage === list._maxPages) {
                stats.innerText = stats.innerText  + ' total: ' + (Date.now() - timer) + 'ms';
              }
            }
          });
        });

        values.push(list._physicalCount);
        div.innerText = list._physicalCount;
        stats.innerText = 'Waiting for stats...';

        Polymer.dom(list.parentNode).appendChild(div);
        Polymer.dom(list.parentNode).appendChild(stats);
      }

      function arrayFill(size, value) {
        return (new Array(size)).fill(value, 0, size);
      }

      function randomArrayFill(size, min, max) {
        var a = [];
        while (a.length < size) {
          a.push(parseInt(Math.random() * (max-min+1)) + min);
        }
        return a;
      }

      function asyncJob(fn) {
        if (fn()) {
          setTimeout(asyncJob.bind(null, fn), 1);
        }
      }

      document.querySelector('template[is=dom-bind]')._getStyle = function(item) {
        return 'height:' + item + 'px; ';
      };

      setTimeout(function() {
        var list1 = document.querySelector('#list1');
        var list2 = document.querySelector('#list2');
        var list3 = document.querySelector('#list3');
        var list4 = document.querySelector('#list4');
        var list5 = document.querySelector('#list5');
        var list6 = document.querySelector('#list6');
        var list7 = document.querySelector('#list7');
        var list8 = document.querySelector('#list8');
        var items = randomArrayFill(100, 1, 200);

        list1.items = arrayFill(100, 50);
        observePhysicalCount(list1);

        // list2.items = arrayFill(100, 300);
        // list3.items = arrayFill(1000, 2);
        // list4.items = arrayFill(2, 2).concat(arrayFill(100, 300));
        // list5.items = arrayFill(100, 600);
        // list6.items = [2];

        // setTimeout(function() {
        //   list6.push.apply(list6,
        //     ['items'].concat([512, 256, 128, 64, 16, 16, 16, 16, 16, 16, 8, 4])
        //   );
        // }, 100);

        // list7.items = randomArrayFill(100, 1, 200);
        // list8.items = [];

        // asyncJob(function() {
        //   list8.push('items', items.pop());
        //   return items.length > 0;
        // });

        // observePhysicalCount(list2);
        // observePhysicalCount(list3);
        // observePhysicalCount(list4);
        // observePhysicalCount(list5);
        // observePhysicalCount(list6);
        // observePhysicalCount(list7);
        // observePhysicalCount(list8);

      }, 0);

    });
  </script>
</body>
</html>