| Index: polymer_0.5.0/bower_components/core-list/demos/demo-debug-grid.html
|
| diff --git a/polymer_0.5.0/bower_components/core-list/demos/demo-debug-grid.html b/polymer_0.5.0/bower_components/core-list/demos/demo-debug-grid.html
|
| new file mode 100755
|
| index 0000000000000000000000000000000000000000..62e29e538f8b2424941201491b27d2ee5134c15d
|
| --- /dev/null
|
| +++ b/polymer_0.5.0/bower_components/core-list/demos/demo-debug-grid.html
|
| @@ -0,0 +1,155 @@
|
| +<!doctype html>
|
| +<!--
|
| +Copyright (c) 2014 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
|
| +-->
|
| +<html>
|
| +<head>
|
| + <title>core-list</title>
|
| + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
| + <script src="../../webcomponentsjs/webcomponents.js"></script>
|
| + <link rel="import" href="../core-list.html">
|
| + <link rel="import" href="../../core-ajax/core-ajax.html">
|
| + <link rel="import" href="../../core-image/core-image.html">
|
| + <style>
|
| + html, body {
|
| + margin: 0;
|
| + -webkit-tap-highlight-color: transparent;
|
| + overflow: hidden;
|
| + }
|
| +
|
| + list-test {
|
| + display: block;
|
| + height: 100%;
|
| + margin: 0 auto;
|
| + }
|
| + </style>
|
| +</head>
|
| +<body fit>
|
| +
|
| +<list-test></list-test>
|
| +
|
| +<polymer-element name="list-test" relative>
|
| +<template>
|
| + <style>
|
| + .item {
|
| + box-sizing: border-box;
|
| + padding: 10px;
|
| + width: 100px;
|
| + }
|
| + .body {
|
| + font-size: 12px;
|
| + }
|
| + core-list {
|
| + height: 30%;
|
| + width: 50%;
|
| + border: 1px solid rgba(0,0,0,0.3);
|
| + }
|
| + .item > core-image {
|
| + height: 80px;
|
| + width: 80px;
|
| + }
|
| + .marker {
|
| + position:absolute;
|
| + box-sizing: border-box;
|
| + border: 1px dotted gray;
|
| + color: gray;
|
| + z-index:-1;
|
| + text-align: right;
|
| + }
|
| + .marker.viewport {
|
| + border: 1px dashed red;
|
| + }
|
| + .marker.page {
|
| + border: 1px dashed blue;
|
| + }
|
| + .marker.upper {
|
| + border: 4px solid green;
|
| + }
|
| + .marker.lower {
|
| + border: 4px solid red;
|
| + }
|
| + .divider {
|
| + background: black;
|
| + color: white;
|
| + padding: 5px;
|
| + font-size: 3em;
|
| + }
|
| +
|
| + </style>
|
| +
|
| + <core-ajax url="demo-data-grouped-short.json" response="{{data}}" auto></core-ajax>
|
| +
|
| + <div fit layout vertical center-center style="transform: scale({{scale}})">
|
| + <div style="position: absolute; top:{{$.list.offsetTop}}px; left:{{$.list.offsetLeft}}px; width:{{$.list.offsetWidth}}px; height:{{$.list.offsetHeight}}px">
|
| + <div class="marker viewport" style="top:{{-$.list.scrollTop}}px; height:{{$.list.$.viewport.offsetHeight}}px; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
|
| + <div class="marker upper" style="top:{{$.list._upperBound-$.list.scrollTop}}px; height: 0; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
|
| + <div class="marker lower" style="top:{{$.list._lowerBound-$.list.scrollTop}}px; height: 0; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
|
| + <template repeat="{{$.list._physicalItems}}">
|
| + <div class="marker" style="top:{{_translateY-parentNode.scrollTop}}px; left:{{_translateX}}px; width:{{offsetWidth}}px; height:{{offsetHeight}}px" hidden?="{{hidden}}">
|
| + Group: {{templateInstance.model.groupIndex}}<br>
|
| + Index: {{templateInstance.model.index}}<br>
|
| + Phys: {{templateInstance.model.physicalIndex}}
|
| + </div>
|
| + </template>
|
| + </div>
|
| +
|
| + <core-list id="list" data="{{data.data || data}}" groups="{{data.groups}}" grid width="100">
|
| + <template>
|
| + <div class="divider" divider hidden>
|
| + {{groupModel.letter}}
|
| + </div>
|
| + <div class="item" style="xbackground-color: {{model.color}};">
|
| + <core-image src="{{model.image}}" preload sizing="cover"></core-image>
|
| + <span>Index: {{index}}</span>
|
| + </div>
|
| + </template>
|
| + </core-list>
|
| + </div>
|
| +
|
| + <div style="position: absolute; top: 10px; right: 10px; width: 200px;">
|
| + <div style="width: 1000px;">
|
| + _virtualCount: {{$.list._virtualCount}} <br>
|
| + _physicalCount: {{$.list._physicalCount}} <br>
|
| + _nestedGroups: {{$.list._nestedGroups}} <br>
|
| + <br>
|
| + _virtualStart: {{$.list._virtualStart}} <br>
|
| + _groupStart: {{$.list._groupStart}} <br>
|
| + _groupStartIndex: {{$.list._groupStartIndex}} <br>
|
| + <br>
|
| + _physicalSize: {{$.list._physicalSize}} <br>
|
| + _physicalAverage: {{$.list._physicalAverage}} <br>
|
| + _viewportHeight: {{$.list._viewportHeight}} <br>
|
| + <br>
|
| + _upperBound: {{$.list._upperBound}} <br>
|
| + _lowerBound: {{$.list._lowerBound}} <br>
|
| + <br>
|
| + _scrollTop: {{$.list._scrollTop}} <br>
|
| + _physicalOffset: {{$.list._physicalOffset}} <br>
|
| + </div>
|
| + <br>
|
| + Scale: <input type="number" value="{{scale}}" max="1" min="0.1" step="0.1">
|
| + </div>
|
| +
|
| +</template>
|
| +<script>
|
| +(function() {
|
| +
|
| + var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
|
| +
|
| + Polymer('list-test', {
|
| + scale: 0.7,
|
| + ready: function() {
|
| + window.list = this.$.list;
|
| + }
|
| + });
|
| +})();
|
| +</script>
|
| +</polymer-element>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master