mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add iron-list
This commit is contained in:
Luke Pulverenti
parent
396b125d66
commit
da7c9a4899
47 changed files with 36356 additions and 0 deletions
58
dashboard-ui/bower_components/iron-list/.bower.json
vendored
Normal file
58
dashboard-ui/bower_components/iron-list/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
{
|
||||
"name": "iron-list",
|
||||
"description": "Displays a virtual, 'infinite' scrolling list of items",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"list",
|
||||
"virtual-list"
|
||||
],
|
||||
"version": "1.3.1",
|
||||
"homepage": "https://github.com/PolymerElements/iron-list",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-list"
|
||||
},
|
||||
"main": "iron-list.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"app-layout": "PolymerLabs/app-layout#master",
|
||||
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-ajax": "polymerelements/iron-ajax#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"iron-scroll-threshold": "polymerelements/iron-scroll-threshold#^1.0.0",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0",
|
||||
"paper-menu": "polymerelements/paper-menu#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"paper-badge": "polymerelements/paper-badge#^1.0.0",
|
||||
"paper-spinner": "polymerelements/paper-spinner#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"_release": "1.3.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.3.1",
|
||||
"commit": "094724304d9df8c1c9cc5a8e62b9b607d4a0b86c"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-list.git",
|
||||
"_target": "^1.3.1",
|
||||
"_originalSource": "PolymerElements/iron-list",
|
||||
"_direct": true
|
||||
}
|
||||
33
dashboard-ui/bower_components/iron-list/.github/ISSUE_TEMPLATE.md
vendored
Normal file
33
dashboard-ui/bower_components/iron-list/.github/ISSUE_TEMPLATE.md
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!-- Instructions: https://github.com/PolymerElements/iron-list/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
||||
1
dashboard-ui/bower_components/iron-list/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/iron-list/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components
|
||||
23
dashboard-ui/bower_components/iron-list/.travis.yml
vendored
Normal file
23
dashboard-ui/bower_components/iron-list/.travis.yml
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
language: node_js
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: qC9ustzA7LUlOLi34bsHNYQRkTMd8/KLNTXGGscSgWmSTb2bgyngdWOuIjA6qVvfaHrB/CygMiy17QJn0IeKD18yfGJHu17vYxDy4WW628An3C3VIgXO4F4+LzyDFuoHfK3eQYHrBKh6M8JvG6CVU/QYdOrzuwDtcOkZIEA72N8rj5bROcPygmHZsa/0cjz7Q29lseiI1qpPxcQPMADoJfD4BvnMD7kyJJTkLyq4UDySaWmC8GT6C8PIXeZI8uLQFOc47TQqFnGJg3H6luQoOC5wQ3uv4gBWbek5pY/GAXieDNvuXAdi7cvRziCuW4oG+cYg8NYZCBI7VkMcYhEA7wNzhhcb+OPt5eOgV0YPZjyVRhXktc+ikRQYi2UU9ig66UlJFMRuNcz9al6AAKa4La5Msalv8dJnLc896qebs9eWTN5uAn4QvOJ3KHtuBNppJtJVDi1GLdIWDZgad0paklGyyln0FRwBiQauiOsuvynJBk2H97f/45l95ExEpTNPzpu3rVXkSd5xF8UYzFvw0Fb1gYQa3kNKM10leHQvr+WfQ9t1xfpGpCkPC1YOVFS9HSipBLKGmeFkl3Xa+bMSF+lrEPSHMNTN02Tq1FfIJGOlHTeRhahLldWw0REZZ5xXyzdGa8HKt7gA0aktrkYbFbJNjciN68I+bGqMt3U2KZw=
|
||||
- secure: vj29+8qXACt2RY0sK0Qk1Mf8XM5pgDDeJBqzoSyNxGAYL08BQAHQvXNv/2qWfSfA4b1HxleERsN2X4+b3mOAyWpKDAOcOABptpdI3qAQsZFOC1Qslz/vqHQBqIphZhiaxd1nVg02xJgrCt6Pk3sW8k7mj2cSH0q9JorWTch3fBWq4pLtzm0b/XEgyw2AbSAM0KUj18BCg9u0hJzrI+kVpenzegdrT3oNU3LYFSz2BgfMKKsuRtaJsMbnlfBhUKNUgfwp9FenvnztGWE3h+ZCK/1zUf0FsedH6s3OWF7U6dALv4AQlgwBKH8TmwVz82bvFpHaqCjy9bhrWbW/kYG+UYCeDg2C1DOAyjr4E42iIiGB/1QKTKCuGplVf2dzYxmozOcJGf7qa440WMfuHSccp5DWH++nEDnjrog1m1uw3GltQuSpJo6LkegwP5R0jHkZxx6K7ssaJWi3VEmwItenecsxvJTDUPn9sR1CQwID82XEc3qCapzXNZIM9UGty9dir79MFmF2oOMzKZhOD9cRt+DLm3s5btM5Nn52bDDw9rZ5XtNY9rFBChszCqZeA/S4v6Iogw8LS9uliLtcY6J8wA7m9bH0ZTjZ1cSXqXsgwovGOprPyggRsmJHD8IQqjBxsslq8/IsPoh7H9ZBSipwROXVjDDYTwsCyf9Nn5/mS2c=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- "xvfb-run -s '-screen 0 1024x768x24' wct"
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
dist: trusty
|
||||
77
dashboard-ui/bower_components/iron-list/CONTRIBUTING.md
vendored
Normal file
77
dashboard-ui/bower_components/iron-list/CONTRIBUTING.md
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
||||
48
dashboard-ui/bower_components/iron-list/bower.json
vendored
Normal file
48
dashboard-ui/bower_components/iron-list/bower.json
vendored
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
{
|
||||
"name": "iron-list",
|
||||
"description": "Displays a virtual, 'infinite' scrolling list of items",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"list",
|
||||
"virtual-list"
|
||||
],
|
||||
"version": "1.3.1",
|
||||
"homepage": "https://github.com/PolymerElements/iron-list",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-list"
|
||||
},
|
||||
"main": "iron-list.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"app-layout": "PolymerLabs/app-layout#master",
|
||||
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-ajax": "polymerelements/iron-ajax#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"iron-scroll-threshold": "polymerelements/iron-scroll-threshold#^1.0.0",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0",
|
||||
"paper-menu": "polymerelements/paper-menu#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"paper-badge": "polymerelements/paper-badge#^1.0.0",
|
||||
"paper-spinner": "polymerelements/paper-spinner#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
|
||||
"web-component-tester": "^4.0.0"
|
||||
}
|
||||
}
|
||||
60
dashboard-ui/bower_components/iron-list/demo/basic.html
vendored
Normal file
60
dashboard-ui/bower_components/iron-list/demo/basic.html
vendored
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<!--
|
||||
@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>iron-list demo</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<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="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
iron-list {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="dom-bind">
|
||||
<iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
|
||||
|
||||
<iron-list items="[[data]]" as="item">
|
||||
<template>
|
||||
<div class="item">
|
||||
<b>#[[index]] - [[item.name]]</b>
|
||||
<p>[[item.longText]]</p>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
</template>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
209
dashboard-ui/bower_components/iron-list/demo/collapse.html
vendored
Normal file
209
dashboard-ui/bower_components/iron-list/demo/collapse.html
vendored
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<!--
|
||||
@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>Collapsable items using iron-list</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<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="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../paper-styles/color.html">
|
||||
<link rel="import" href="../../paper-styles/typography.html">
|
||||
<link rel="import" href="../../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../iron-image/iron-image.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #eee;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<dom-module id="x-collapse">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
@apply(--paper-font-common-base);
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
background-color: var(--google-green-700);
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
app-toolbar paper-icon-button {
|
||||
--paper-icon-button-ink-color: white;
|
||||
}
|
||||
|
||||
iron-list {
|
||||
padding-top: 64px;
|
||||
--iron-list-items-container: {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
};
|
||||
}
|
||||
|
||||
.item {
|
||||
@apply(--layout-horizontal);
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.pad {
|
||||
padding: 0 16px;
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.primary {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shortText, .longText {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.longText {
|
||||
color: gray;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:hover .shortText::after {
|
||||
content: ' [+]';
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.item.expanded:hover .shortText::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.item.expanded .longText {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item.expanded:hover .longText::after {
|
||||
content: ' [–]';
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
paper-toolbar .bottom.title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>
|
||||
|
||||
<app-toolbar>
|
||||
<div title>Collapsable items</div>
|
||||
<paper-icon-button icon="search" alt="Search"></paper-icon-button>
|
||||
<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
|
||||
</app-toolbar>
|
||||
|
||||
<iron-list id="list" items="[[items]]" as="item" selection-enabled multi-selection>
|
||||
<template>
|
||||
<div>
|
||||
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
|
||||
<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
|
||||
<div class="pad">
|
||||
<div class="primary">[[item.name]]</div>
|
||||
<div class="shortText">[[item.shortText]]</div>
|
||||
<div class="longText">[[item.longText]]</div>
|
||||
</div>
|
||||
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
HTMLImports.whenReady(function() {
|
||||
|
||||
Polymer({
|
||||
is: 'x-collapse',
|
||||
|
||||
properties: {
|
||||
|
||||
items: {
|
||||
type: Array
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
// Use the document element
|
||||
this.$.list.scrollTarget = this.ownerDocument.documentElement;
|
||||
},
|
||||
|
||||
iconForItem: function(item) {
|
||||
return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
|
||||
},
|
||||
|
||||
getClassForItem: function(item, selected) {
|
||||
return selected ? 'item expanded' : 'item';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<x-collapse></x-collapse>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
11002
dashboard-ui/bower_components/iron-list/demo/data/contacts.json
vendored
Normal file
11002
dashboard-ui/bower_components/iron-list/demo/data/contacts.json
vendored
Normal file
File diff suppressed because it is too large
Load diff
302
dashboard-ui/bower_components/iron-list/demo/grid.html
vendored
Normal file
302
dashboard-ui/bower_components/iron-list/demo/grid.html
vendored
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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>Grid layout using iron-list</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<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="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../../app-layout/app-scroll-effects/effects/waterfall.html">
|
||||
<link rel="import" href="../../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../../iron-image/iron-image.html">
|
||||
<link rel="import" href="../../iron-scroll-threshold/iron-scroll-threshold.html">
|
||||
<link rel="import" href="../../paper-spinner/paper-spinner.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #f6f6f6;
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<dom-module id="x-grid">
|
||||
<template>
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
@apply(--paper-font-common-base);
|
||||
}
|
||||
|
||||
app-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background-color: #4285f4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
iron-list {
|
||||
margin-top: 90px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.photoContent {
|
||||
@apply(--layout);
|
||||
background-color: #ddd;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.photoContent:hover .detail{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.photoContent > iron-image {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
.photoContent > .detail {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: 100;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
@apply(--layout-flex);
|
||||
font-size: 20px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.searchInput:hover {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.searchInput:focus {
|
||||
background-color: white;
|
||||
outline: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.loadingIndicator {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.loadingIndicator paper-spinner {
|
||||
margin-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.photoContainer {
|
||||
width: calc(50% - 16px);
|
||||
}
|
||||
|
||||
.photoContent {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
iron-list {
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
.photoContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photoContent > .detail {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<iron-ajax id="ajax" loading="{{loadingPhotos}}" url="[[_getAPIEndpoint(apiKey, searchText, page)]]"
|
||||
handle-as="text" on-response="_didReceiveResponse"></iron-ajax>
|
||||
|
||||
<app-header fixed effects="waterfall">
|
||||
<app-toolbar>
|
||||
<input class="searchInput" type="search" placeholder="Search on Flikr" value="{{searchText::input}}">
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<iron-list items="[[photos]]" as="photo" scroll-target="document" grid>
|
||||
<template>
|
||||
<div class="photoContainer">
|
||||
<div class="photoContent" tabindex$="[[tabIndex]]">
|
||||
<iron-image sizing="cover"
|
||||
src="//farm[[photo.farm]].staticflickr.com/[[photo.server]]/[[photo.id]]_[[photo.secret]]_n.jpg">
|
||||
</iron-image>
|
||||
<div class="detail">[[photo.title]]</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
<div class="loadingIndicator" hidden$="[[!loadingPhotos]]">
|
||||
<paper-spinner active$="[[loadingPhotos]]"></paper-spinner> Fetching photos for <b>[[searchText]]</b>
|
||||
</div>
|
||||
|
||||
<!-- this element loads more photos when the user scrolls down and reached the lower threshold -->
|
||||
<iron-scroll-threshold id="scrollTheshold"
|
||||
lower-threshold="500"
|
||||
on-lower-threshold="_loadMorePhotos"
|
||||
scroll-target="document">
|
||||
</iron-scroll-threshold>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
HTMLImports.whenReady(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'x-grid',
|
||||
|
||||
properties: {
|
||||
|
||||
apiKey: {
|
||||
type: String,
|
||||
value: 'c304f1096a06486d3c1e7ab271bf7f3f'
|
||||
},
|
||||
|
||||
photos: Array,
|
||||
|
||||
perPage: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
|
||||
page: {
|
||||
type: Number,
|
||||
value: 1
|
||||
},
|
||||
|
||||
searchText: {
|
||||
type: String,
|
||||
value: 'Big Sur'
|
||||
},
|
||||
|
||||
loadingPhotos: Boolean
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_resetPhotos(searchText)'
|
||||
],
|
||||
|
||||
_getAPIEndpoint: function(apiKey, searchText, page) {
|
||||
return 'https://api.flickr.com/services/rest/?method=flickr.photos.search' +
|
||||
'&api_key=' + apiKey +
|
||||
'&safe_search=1&sort=interestingness-desc'+
|
||||
'&text=' + encodeURIComponent(searchText) +
|
||||
'&page=' + page +
|
||||
'&format=json' +
|
||||
'&per_page=' + this.perPage;
|
||||
},
|
||||
|
||||
_didReceiveResponse: function(e) {
|
||||
var payload = JSON.parse(e.detail.response.match('jsonFlickrApi\\((.*)\\)')[1]);
|
||||
|
||||
if (!payload || !payload.photos || !payload.photos.photo) {
|
||||
return;
|
||||
}
|
||||
|
||||
payload.photos.photo.forEach(function(photo) {
|
||||
this.push('photos', photo);
|
||||
}, this);
|
||||
|
||||
this.$.scrollTheshold.clearTriggers();
|
||||
},
|
||||
|
||||
_loadMorePhotos: function() {
|
||||
if (this.$.ajax.lastRequest) {
|
||||
this.$.ajax.lastRequest.abort();
|
||||
}
|
||||
|
||||
this.page++;
|
||||
this.$.ajax.generateRequest();
|
||||
},
|
||||
|
||||
_resetPhotos: function(searchText) {
|
||||
this.page = 1;
|
||||
this.photos = [];
|
||||
|
||||
if (searchText.trim() !== '') {
|
||||
this.debounce('_loadPhotos', this._loadMorePhotos, 400);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<x-grid></x-grid>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
169
dashboard-ui/bower_components/iron-list/demo/index.html
vendored
Normal file
169
dashboard-ui/bower_components/iron-list/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!--
|
||||
@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 id="html">
|
||||
<head>
|
||||
|
||||
<title>iron-list demo</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<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="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../../app-layout/app-scroll-effects/app-scroll-effects.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../iron-image/iron-image.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<style is="custom-style">
|
||||
body {
|
||||
@apply(--layout-fullbleed);
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
app-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background-color: #0b8043;
|
||||
color: white;
|
||||
--app-header-background-front-layer: {
|
||||
background-color: #4285f4;
|
||||
};
|
||||
}
|
||||
|
||||
app-header paper-icon-button {
|
||||
--paper-icon-button-ink-color: white;
|
||||
}
|
||||
|
||||
[title] {
|
||||
font-weight: 400;
|
||||
margin: 0 0 0 50px;
|
||||
}
|
||||
|
||||
[condensed-title] {
|
||||
font-weight: 400;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
[condensed-title] i {
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
app-toolbar.tall {
|
||||
height: 148px;
|
||||
}
|
||||
|
||||
iron-list {
|
||||
padding-top: 148px;
|
||||
margin-top: 64px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.item {
|
||||
@apply(--layout-horizontal);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
max-width: 800px;
|
||||
margin: 16px auto 0 auto;
|
||||
}
|
||||
|
||||
.item:focus {
|
||||
outline: 0;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.pad {
|
||||
padding: 0 16px;
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.primary {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dim {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="dom-bind">
|
||||
<iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
|
||||
|
||||
<app-header condenses fixed effects="resize-title blend-background waterfall">
|
||||
<app-toolbar>
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<h4 condensed-title>iron-list <i>— Demo</i></h4>
|
||||
<paper-icon-button icon="search"></paper-icon-button>
|
||||
<paper-icon-button icon="more-vert"></paper-icon-button>
|
||||
</app-toolbar>
|
||||
<app-toolbar class="tall">
|
||||
<h1 title>iron-list</h1>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<!-- iron-list using the document scroll -->
|
||||
<iron-list items="[[data]]" as="item" scroll-target="html">
|
||||
<template>
|
||||
<div>
|
||||
<div class="item" tabindex$="[[tabIndex]]">
|
||||
<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
|
||||
<div class="pad">
|
||||
<div class="primary">[[item.name]] [[index]]</div>
|
||||
<div class="secondary">[[item.shortText]]</div>
|
||||
<div class="secondary dim">[[item.longText]]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
</template>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
191
dashboard-ui/bower_components/iron-list/demo/scroll-threshold.html
vendored
Normal file
191
dashboard-ui/bower_components/iron-list/demo/scroll-threshold.html
vendored
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!--
|
||||
@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 id="html">
|
||||
<head>
|
||||
|
||||
<title>Load data using iron-scroll-threshold</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<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="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../iron-scroll-threshold/iron-scroll-threshold.html">
|
||||
<link rel="import" href="../../paper-styles/color.html">
|
||||
<link rel="import" href="../../paper-styles/typography.html">
|
||||
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../../paper-spinner/paper-spinner.html">
|
||||
<link rel="import" href="../../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
body {
|
||||
@apply(--paper-font-common-base);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #F57C00;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
z-index: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.loadingIndicator {
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.loadingIndicator paper-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
iron-list {
|
||||
padding-top: 64px;
|
||||
padding-bottom: 16px;
|
||||
--iron-list-items-container: {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 10px;
|
||||
};
|
||||
}
|
||||
|
||||
.personItem {
|
||||
@apply(--layout-horizontal);
|
||||
|
||||
margin: 16px 16px 0 16px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.pad {
|
||||
padding: 0 16px;
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.primary {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dim {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="dom-bind" id="app">
|
||||
|
||||
<iron-ajax id="ajax"
|
||||
url="//www.filltext.com/"
|
||||
params='{"rows": "20", "delay": 1, "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}",
|
||||
"city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "business": "{business}", "index": "{index}"}'
|
||||
handle-as="json"
|
||||
loading="{{loadingPeople}}"
|
||||
on-response="_didRespond">
|
||||
</iron-ajax>
|
||||
|
||||
<app-toolbar>
|
||||
<div title>Load data using iron-scroll-threshold</div>
|
||||
</app-toolbar>
|
||||
|
||||
<iron-list id="list" items="[]" as="person" scroll-target="html">
|
||||
<template>
|
||||
<div>
|
||||
<div class="personItem" tabindex$="[[tabIndex]]">
|
||||
<div class="pad">
|
||||
<div class="primary">[[person.fname]] [[person.lname]]</div>
|
||||
<div class="secondary">[[person.address]] [[person.city]]</div>
|
||||
<div class="secondary">[[person.city]], [[person.state]] [[person.zip]]</div>
|
||||
<div class="secondary dim">[[person.business]]</div>
|
||||
</div>
|
||||
<iron-icon icon$="[[_iconForPerson(person)]]"></iron-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
<div class="loadingIndicator">
|
||||
<paper-spinner active="{{loadingPeople}}"></paper-spinner> Fetching data
|
||||
</div>
|
||||
|
||||
<!-- this element will load more data when the user scrolls down and reached the lower threshold -->
|
||||
<iron-scroll-threshold id="scrollTheshold"
|
||||
lower-threshold="500"
|
||||
on-lower-threshold="_loadMoreData"
|
||||
scroll-target="html">
|
||||
</iron-scroll-threshold>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
(function(scope) {
|
||||
|
||||
scope._iconForPerson = function(person) {
|
||||
return person.integer < 50 ? 'star-border' : 'star';
|
||||
};
|
||||
|
||||
scope._loadMoreData = function() {
|
||||
scope.$.ajax.generateRequest();
|
||||
};
|
||||
|
||||
scope._didRespond = function(e) {
|
||||
var people = e.detail.response;
|
||||
|
||||
people.forEach(function(person) {
|
||||
scope.$.list.push('items', person);
|
||||
});
|
||||
// Clear the lower threshold so we can load more data when the user scrolls down again.
|
||||
scope.$.scrollTheshold.clearTriggers();
|
||||
};
|
||||
|
||||
})(document.querySelector('#app'));
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
287
dashboard-ui/bower_components/iron-list/demo/selection.html
vendored
Normal file
287
dashboard-ui/bower_components/iron-list/demo/selection.html
vendored
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
<!--
|
||||
@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>Select contacts</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="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../paper-styles/color.html">
|
||||
<link rel="import" href="../../paper-styles/typography.html">
|
||||
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../../paper-menu/paper-menu.html">
|
||||
<link rel="import" href="../../paper-item/paper-item.html">
|
||||
<link rel="import" href="../../paper-badge/paper-badge.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<dom-module id="x-app">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-fit);
|
||||
@apply(--layout-vertical);
|
||||
@apply(--paper-font-common-base);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
background: var(--paper-pink-500);
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
z-index: 1;
|
||||
color: white;
|
||||
--paper-toolbar-title: {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 0;
|
||||
};
|
||||
}
|
||||
|
||||
app-toolbar paper-icon-button {
|
||||
--paper-icon-button-ink-color: white;
|
||||
}
|
||||
|
||||
#itemsList,
|
||||
#selectedItemsList {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
.item {
|
||||
@apply(--layout-horizontal);
|
||||
cursor: pointer;
|
||||
padding: 16px 22px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.item:focus,
|
||||
.item.selected:focus {
|
||||
outline: 0;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.item.selected .star {
|
||||
color: var(--paper-blue-600);
|
||||
}
|
||||
|
||||
.item.selected {
|
||||
background-color: var(--google-grey-300);
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.pad {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-vertical);
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dim {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.star {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
paper-badge {
|
||||
-webkit-transition: all 0.1s;
|
||||
transition: all 0.1s;
|
||||
opacity: 1;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
paper-badge[label="0"] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#starredView {
|
||||
width: 200px;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
paper-item {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
paper-item:hover::after {
|
||||
content: "－";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
border-radius: 50% 50%;
|
||||
background-color: var(--google-red-300);
|
||||
margin-left: 10px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.noSelection {
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.twoColumns {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-horizontal);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#starredView {
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
|
||||
|
||||
<app-toolbar>
|
||||
<div title>Selection using iron-list</div>
|
||||
<div>
|
||||
<paper-icon-button icon="icons:star" alt="Starred" on-tap="_toggleStarredView"></paper-icon-button>
|
||||
<paper-badge label$="[[selectedItems.length]]"></paper-badge>
|
||||
</div>
|
||||
</app-toolbar>
|
||||
|
||||
<div class="twoColumns">
|
||||
<!-- Main List for the items -->
|
||||
<iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
|
||||
<template>
|
||||
<div>
|
||||
<div tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
|
||||
<img class="avatar" src="[[item.image]]">
|
||||
<div class="pad">
|
||||
<div class="primary">
|
||||
[[item.name]]
|
||||
</div>
|
||||
<div class="secondary dim">[[item.shortText]]</div>
|
||||
</div>
|
||||
<iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
<div id="starredView" hidden$="[[!showSelection]]">
|
||||
<template is="dom-if" if="[[!selectedItems.length]]">
|
||||
<div class="noSelection">Select a contact</div>
|
||||
</template>
|
||||
<!-- List for the selected items -->
|
||||
<iron-list id="selectedItemsList" items="[[selectedItems]]" hidden$="[[!selectedItems.length]]">
|
||||
<template>
|
||||
<paper-item tabindex$="[[tabIndex]]" on-tap="_unselect" aria-label$="Deselect [[item.name]]">[[item.name]]</paper-item>
|
||||
</template>
|
||||
</iron-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
HTMLImports.whenReady(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'x-app',
|
||||
|
||||
properties: {
|
||||
selectedItems: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
showSelection: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
observer: '_showSelectionChanged'
|
||||
}
|
||||
},
|
||||
|
||||
iconForItem: function(isSelected) {
|
||||
return isSelected ? 'star' : 'star-border';
|
||||
},
|
||||
|
||||
_computedClass: function(isSelected) {
|
||||
var classes = 'item';
|
||||
if (isSelected) {
|
||||
classes += ' selected';
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
|
||||
_unselect: function(e) {
|
||||
this.$.itemsList.deselectItem(e.model.item);
|
||||
},
|
||||
|
||||
_toggleStarredView: function() {
|
||||
this.showSelection = !this.showSelection;
|
||||
},
|
||||
|
||||
_showSelectionChanged: function() {
|
||||
this.$.selectedItemsList.fire('resize');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<style is="custom-style">
|
||||
body {
|
||||
@apply(--layout-fullbleed);
|
||||
}
|
||||
</style>
|
||||
<body unresolved>
|
||||
|
||||
<x-app></x-app>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
35
dashboard-ui/bower_components/iron-list/index.html
vendored
Normal file
35
dashboard-ui/bower_components/iron-list/index.html
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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
|
||||
-->
|
||||
<!--
|
||||
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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>iron-list</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1762
dashboard-ui/bower_components/iron-list/iron-list.html
vendored
Normal file
1762
dashboard-ui/bower_components/iron-list/iron-list.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
188
dashboard-ui/bower_components/iron-list/test/basic.html
vendored
Normal file
188
dashboard-ui/bower_components/iron-list/test/basic.html
vendored
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('basic features', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('defaults', function() {
|
||||
assert.equal(list.items, null, 'items');
|
||||
assert.equal(list.as, 'item', 'as');
|
||||
assert.equal(list.indexAs, 'index', 'indexAs');
|
||||
assert.equal(list.selectedAs, 'selected', 'selectedAs');
|
||||
assert.equal(list.scrollTarget, list, 'scrollTarget');
|
||||
assert.isFalse(list.selectionEnabled, 'selectionEnabled');
|
||||
assert.isFalse(list.multiSelection, 'multiSelection');
|
||||
});
|
||||
|
||||
test('check items length', function(done) {
|
||||
container.data = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(list.items.length, container.data.length);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('check physical item heights', function(done) {
|
||||
container.data = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
var rowHeight = list._physicalItems[0].offsetHeight;
|
||||
|
||||
list._physicalItems.forEach(function(item) {
|
||||
assert.equal(item.offsetHeight, rowHeight);
|
||||
});
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('check physical item size', function(done) {
|
||||
var setSize = 10;
|
||||
container.data = buildDataSet(setSize);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(list.items.length, setSize);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('first visible index', function(done) {
|
||||
container.data = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
var setSize = list.items.length;
|
||||
var rowHeight = container.itemHeight;
|
||||
var viewportHeight = list.offsetHeight;
|
||||
var scrollToItem;
|
||||
|
||||
function checkFirstVisible() {
|
||||
assert.equal(list.firstVisibleIndex, scrollToItem);
|
||||
assert.equal(getFirstItemFromList(list).textContent, scrollToItem);
|
||||
}
|
||||
|
||||
function checkLastVisible() {
|
||||
var visibleItemsCount = Math.floor(viewportHeight / rowHeight);
|
||||
assert.equal(list.lastVisibleIndex, scrollToItem + visibleItemsCount - 1);
|
||||
assert.equal(getLastItemFromList(list).textContent, scrollToItem + visibleItemsCount - 1);
|
||||
}
|
||||
|
||||
function doneScrollDown() {
|
||||
checkFirstVisible();
|
||||
checkLastVisible();
|
||||
scrollToItem = 1;
|
||||
flush(function() {
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: rowHeight,
|
||||
target: scrollToItem*rowHeight,
|
||||
onScrollEnd: doneScrollUp
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function doneScrollUp() {
|
||||
checkFirstVisible();
|
||||
checkLastVisible();
|
||||
done();
|
||||
}
|
||||
scrollToItem = 50;
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 50,
|
||||
target: scrollToItem*rowHeight,
|
||||
onScrollEnd: doneScrollDown
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('scroll to index', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
setTimeout(function() {
|
||||
list.scrollToIndex(30);
|
||||
assert.equal(list.firstVisibleIndex, 30);
|
||||
|
||||
list.scrollToIndex(0);
|
||||
assert.equal(list.firstVisibleIndex, 0);
|
||||
|
||||
var rowHeight = getFirstItemFromList(list).offsetHeight;
|
||||
var viewportHeight = list.offsetHeight;
|
||||
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
|
||||
|
||||
list.scrollToIndex(99);
|
||||
assert.equal(list.firstVisibleIndex, list.items.length - itemsPerViewport);
|
||||
|
||||
// make the height of the viewport same as the height of the row
|
||||
// and scroll to the last item
|
||||
list.style.height = list._physicalItems[0].offsetHeight + 'px';
|
||||
|
||||
setTimeout(function() {
|
||||
list.scrollToIndex(99);
|
||||
assert.equal(list.firstVisibleIndex, 99);
|
||||
done();
|
||||
}, 100);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
test('reset items', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, '0');
|
||||
|
||||
list.items = null;
|
||||
|
||||
flush(function() {
|
||||
assert.notEqual(getFirstItemFromList(list).textContent, '0');
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, '0');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
125
dashboard-ui/bower_components/iron-list/test/different-heights.html
vendored
Normal file
125
dashboard-ui/bower_components/iron-list/test/different-heights.html
vendored
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('Different heights', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('render without gaps 1', function(done) {
|
||||
list.items = [
|
||||
{index: 0, height: 791},
|
||||
{index: 1, height: 671}
|
||||
];
|
||||
|
||||
flush(function() {
|
||||
list.push('items',
|
||||
{index: 2, height: 251},
|
||||
{index: 3, height: 191},
|
||||
{index: 4, height: 151},
|
||||
{index: 5, height: 191},
|
||||
{index: 6, height: 51},
|
||||
{index: 7, height: 51},
|
||||
{index: 8, height: 51}
|
||||
);
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 20,
|
||||
target: 100000,
|
||||
onScrollEnd: done,
|
||||
onScroll: function() {
|
||||
list.debounce('scroll', function() {
|
||||
assert.isTrue(isFullOfItems(list));
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('render without gaps 2', function(done) {
|
||||
var height = 2, items = [];
|
||||
|
||||
while (items.length < 15) {
|
||||
items.push({height: height});
|
||||
height *= 1.5;
|
||||
}
|
||||
list.items = items;
|
||||
|
||||
flush(function() {
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 20,
|
||||
target: 100000,
|
||||
onScrollEnd: done,
|
||||
onScroll: function() {
|
||||
list.debounce('scroll', function() {
|
||||
assert.equal(isFullOfItems(list), true);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('render without gaps 3', function(done) {
|
||||
var heights = [20, 100, 140, 117, 800, 50, 15, 80, 90, 255, 20, 15, 19, 250, 314];
|
||||
|
||||
list.items = heights.map(function(height) {
|
||||
return {height: height};
|
||||
});
|
||||
|
||||
flush(function() {
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 20,
|
||||
target: 100000,
|
||||
onScrollEnd: done,
|
||||
onScroll: function() {
|
||||
list.debounce('scroll', function() {
|
||||
assert.isTrue(isFullOfItems(list));
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
121
dashboard-ui/bower_components/iron-list/test/dynamic-item-size.html
vendored
Normal file
121
dashboard-ui/bower_components/iron-list/test/dynamic-item-size.html
vendored
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list item-height="0" pre></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('Dynamic item size', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('update size using item index', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
var firstItem = getFirstItemFromList(list);
|
||||
var initHeight = firstItem.offsetHeight;
|
||||
|
||||
list.set('items.0.index', '1\n2\n3\n4');
|
||||
list.updateSizeForItem(0);
|
||||
assert.isAbove(firstItem.offsetHeight, initHeight*3);
|
||||
|
||||
list.set('items.0.index', '1');
|
||||
list.updateSizeForItem(0);
|
||||
assert.equal(firstItem.offsetHeight, initHeight);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('update size using item object', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
var firstItem = getFirstItemFromList(list);
|
||||
var initHeight = firstItem.offsetHeight;
|
||||
|
||||
list.set('items.0.index', '1\n2\n3\n4');
|
||||
list.updateSizeForItem(list.items[0]);
|
||||
assert.isAbove(firstItem.offsetHeight, initHeight*3);
|
||||
|
||||
list.set('items.0.index', '1');
|
||||
list.updateSizeForItem(list.items[0]);
|
||||
assert.equal(firstItem.offsetHeight, initHeight);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('ignore items that are not rendered', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.updateSizeForItem(list.items[list.items.length - 1]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test('throw if the item is invalid', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
var firstItem = getFirstItemFromList(list);
|
||||
var initHeight = firstItem.offsetHeight;
|
||||
var throws = 0;
|
||||
|
||||
try {
|
||||
list.updateSizeForItem(100);
|
||||
} catch (error) {
|
||||
throws++;
|
||||
}
|
||||
|
||||
try {
|
||||
list.updateSizeForItem({});
|
||||
} catch (error) {
|
||||
throws++;
|
||||
}
|
||||
|
||||
assert.equal(throws, 2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
113
dashboard-ui/bower_components/iron-list/test/focus.html
vendored
Normal file
113
dashboard-ui/bower_components/iron-list/test/focus.html
vendored
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('basic features', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('first item should be focusable', function(done) {
|
||||
container.data = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
console.log(getFirstItemFromList(list));
|
||||
assert.notEqual(getFirstItemFromList(list).tabIndex, -1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('focus the first item and then reset the items', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
getFirstItemFromList(list).focus();
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 200,
|
||||
target: 3000,
|
||||
onScrollEnd: function() {
|
||||
list.items = [];
|
||||
flush(function() {
|
||||
done();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('focus the first item and then splice all the items', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
getFirstItemFromList(list).focus();
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 200,
|
||||
target: 3000,
|
||||
onScrollEnd: function() {
|
||||
list.splice('items', 0, list.items.length);
|
||||
flush(function() {
|
||||
done();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('should not hide the list', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
// this index isn't rendered yet
|
||||
list._focusedIndex = list.items.length-1;
|
||||
list.scrollTarget.addEventListener('scroll', function() {
|
||||
var rect = list.getBoundingClientRect();
|
||||
assert.isTrue(rect.top + rect.height > 0);
|
||||
done();
|
||||
});
|
||||
// trigger the scroll event
|
||||
list._scrollTop = 1000;
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
164
dashboard-ui/bower_components/iron-list/test/grid.html
vendored
Normal file
164
dashboard-ui/bower_components/iron-list/test/grid.html
vendored
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-grid.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-grid></x-grid>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('basic features', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
|
||||
test('check horizontal rendering', function(done) {
|
||||
container.data = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
// Validate the first viewport
|
||||
for (var i = 0; i < 9; i++) {
|
||||
assert.equal(getNthItemFromGrid(list, i).textContent, i);
|
||||
}
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('first visible index', function(done) {
|
||||
container.data = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
var setSize = list.items.length;
|
||||
var rowHeight = container.itemSize;
|
||||
var viewportHeight = list.offsetHeight;
|
||||
var scrollToItem;
|
||||
|
||||
function checkFirstVisible() {
|
||||
assert.equal(list.firstVisibleIndex, getNthItemRowStart(list, scrollToItem));
|
||||
assert.equal(getNthItemFromGrid(list, 0).textContent, getNthItemRowStart(list, scrollToItem));
|
||||
}
|
||||
|
||||
function checkLastVisible() {
|
||||
var visibleItemsCount = Math.floor(viewportHeight / rowHeight) * list._itemsPerRow;
|
||||
var visibleItemStart = getNthItemRowStart(list, scrollToItem);
|
||||
assert.equal(list.lastVisibleIndex, visibleItemStart + visibleItemsCount - 1);
|
||||
assert.equal(getNthItemFromGrid(list, 8).textContent, visibleItemStart + visibleItemsCount - 1);
|
||||
}
|
||||
|
||||
function doneScrollDown() {
|
||||
checkFirstVisible();
|
||||
checkLastVisible();
|
||||
scrollToItem = 1;
|
||||
flush(function() {
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: rowHeight,
|
||||
target: getGridRowFromIndex(list, scrollToItem)*rowHeight,
|
||||
onScrollEnd: doneScrollUp
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function doneScrollUp() {
|
||||
checkFirstVisible();
|
||||
checkLastVisible();
|
||||
done();
|
||||
}
|
||||
scrollToItem = 50;
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: rowHeight,
|
||||
target: getGridRowFromIndex(list, scrollToItem)*rowHeight,
|
||||
onScrollEnd: doneScrollDown
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('scroll to index', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.scrollToIndex(30);
|
||||
assert.equal(list.firstVisibleIndex, 30);
|
||||
|
||||
list.scrollToIndex(0);
|
||||
assert.equal(list.firstVisibleIndex, 0);
|
||||
|
||||
list.scrollToIndex(60);
|
||||
assert.equal(list.firstVisibleIndex, 60);
|
||||
|
||||
var rowHeight = getNthItemFromGrid(list, 0).offsetHeight;
|
||||
var viewportHeight = list.offsetHeight;
|
||||
var itemsPerViewport = Math.floor(viewportHeight/rowHeight) * list._itemsPerRow;
|
||||
|
||||
list.scrollToIndex(99);
|
||||
// assert.equal(list.firstVisibleIndex, list.items.length - 7);
|
||||
|
||||
// make the height of the viewport same as the height of the row
|
||||
// and scroll to the last item
|
||||
list.style.height = list._physicalItems[0].offsetHeight + 'px';
|
||||
|
||||
flush(function() {
|
||||
var idx = 99;
|
||||
list.scrollToIndex(idx);
|
||||
assert.equal(list.firstVisibleIndex, idx);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('reset items', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getNthItemFromGrid(list, 0).textContent, '0');
|
||||
|
||||
list.items = null;
|
||||
|
||||
flush(function() {
|
||||
assert.notEqual(getNthItemFromGrid(list, 0).textContent, '0');
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getNthItemFromGrid(list, 0).textContent, '0');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
141
dashboard-ui/bower_components/iron-list/test/helpers.html
vendored
Normal file
141
dashboard-ui/bower_components/iron-list/test/helpers.html
vendored
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<script>
|
||||
function findElementInList(container, selector) {
|
||||
var i = 0;
|
||||
var children = container._children;
|
||||
var ms = Polymer.DomApi.matchesSelector;
|
||||
|
||||
for (; i < children.length; i++) {
|
||||
if (children[i].nodeType === Node.ELEMENT_NODE && ms.call(children[i], selector)) {
|
||||
return children[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function buildItem(index) {
|
||||
return {
|
||||
index: index
|
||||
};
|
||||
}
|
||||
|
||||
function buildDataSet(size) {
|
||||
var data = [];
|
||||
while (data.length < size) {
|
||||
data.push(buildItem(data.length));
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function simulateScroll(config) {
|
||||
var list = config.list;
|
||||
var target = config.target;
|
||||
var delay = config.delay || 1;
|
||||
var contribution = Math.abs(config.contribution) || 10;
|
||||
// scroll back up
|
||||
if (target < list.scrollTop) {
|
||||
contribution = -contribution;
|
||||
}
|
||||
|
||||
function scrollHandler() {
|
||||
setTimeout(function() {
|
||||
var minScrollTop = 0;
|
||||
var maxScrollTop = list.scrollHeight - list.offsetHeight;
|
||||
|
||||
config.onScroll && config.onScroll();
|
||||
|
||||
if (list.scrollTop < target && contribution > 0 && list.scrollTop < maxScrollTop) {
|
||||
list.scrollTop = Math.min(maxScrollTop, list.scrollTop + contribution);
|
||||
|
||||
} else if (list.scrollTop > target && contribution < 0 && list.scrollTop > minScrollTop) {
|
||||
list.scrollTop = Math.max(minScrollTop, list.scrollTop + contribution);
|
||||
|
||||
} else {
|
||||
list.removeEventListener('scroll', scrollHandler);
|
||||
list.scrollTop = target;
|
||||
config.onScrollEnd && config.onScrollEnd();
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
list.addEventListener('scroll', scrollHandler);
|
||||
scrollHandler();
|
||||
}
|
||||
|
||||
function getGridRowFromIndex(grid, index) {
|
||||
return Math.floor(index / grid._itemsPerRow);
|
||||
}
|
||||
|
||||
function getNthItemFromGrid(grid, n, itemSize) {
|
||||
itemSize = itemSize || 100;
|
||||
var gridRect = grid.getBoundingClientRect();
|
||||
var x = gridRect.left + ((n % grid._itemsPerRow) * itemSize) + (itemSize / 2);
|
||||
var y = gridRect.top + (Math.floor(n / grid._itemsPerRow) * itemSize) + (itemSize / 2);
|
||||
return document.elementFromPoint(x, y);
|
||||
}
|
||||
|
||||
function getFirstItemFromList(list) {
|
||||
var listRect = list.getBoundingClientRect();
|
||||
return document.elementFromPoint(listRect.left + 100, listRect.top + 1);
|
||||
}
|
||||
|
||||
function getLastItemFromList(list) {
|
||||
var listRect = list.getBoundingClientRect();
|
||||
return document.elementFromPoint(listRect.left + 100, listRect.top + listRect.height - 1);
|
||||
}
|
||||
|
||||
function isFullOfItems(list) {
|
||||
var listRect = list.getBoundingClientRect();
|
||||
var listHeight = listRect.height - 1;
|
||||
var item, y = listRect.top + 1;
|
||||
// IE 10 & 11 doesn't render propertly :(
|
||||
var badPixels = 0;
|
||||
while (y < listHeight) {
|
||||
item = document.elementFromPoint(listRect.left + 100, y);
|
||||
if (!item || (item.parentNode && !item.parentNode._templateInstance)) {
|
||||
badPixels++;
|
||||
}
|
||||
y++;
|
||||
if (badPixels > 2) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function checkRepeatedItems(list) {
|
||||
var listRect = list.getBoundingClientRect();
|
||||
var listHeight = list.offsetHeight;
|
||||
var listItems = {};
|
||||
|
||||
return function() {
|
||||
var itemKey;
|
||||
var y = listRect.top;
|
||||
while (y < listHeight) {
|
||||
item = document.elementFromPoint(listRect.left + 100, y + 2);
|
||||
itemKey = item.textContent || item.innerText;
|
||||
|
||||
if (item.parentNode && item.parentNode._templateInstance) {
|
||||
if (listItems[itemKey] && listItems[itemKey] != item) {
|
||||
return true;
|
||||
}
|
||||
listItems[itemKey] = item;
|
||||
}
|
||||
y += item.offsetHeight;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
function getNthItemRowStart(grid, n) {
|
||||
return n - (n % grid._itemsPerRow);
|
||||
}
|
||||
</script>
|
||||
73
dashboard-ui/bower_components/iron-list/test/hidden-list.html
vendored
Normal file
73
dashboard-ui/bower_components/iron-list/test/hidden-list.html
vendored
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list hidden></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('hidden list', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('list size', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
flush(function() {
|
||||
assert.equal(list.offsetWidth, 0);
|
||||
assert.equal(list.offsetHeight, 0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('iron-resize', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
list.fire('iron-resize');
|
||||
|
||||
assert.notEqual(getFirstItemFromList(list).textContent, '0');
|
||||
Polymer.RenderStatus.whenReady(function() {
|
||||
container.removeAttribute('hidden');
|
||||
assert.notEqual(getFirstItemFromList(list).textContent, '0');
|
||||
list.fire('iron-resize');
|
||||
flush(function() {
|
||||
assert.isTrue(list.isAttached);
|
||||
assert.equal(getFirstItemFromList(list).textContent, '0');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
dashboard-ui/bower_components/iron-list/test/index.html
vendored
Normal file
33
dashboard-ui/bower_components/iron-list/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>Tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'basic.html',
|
||||
'focus.html',
|
||||
'mutations.html',
|
||||
'physical-count.html',
|
||||
'hidden-list.html',
|
||||
'selection.html',
|
||||
'dynamic-item-size.html',
|
||||
'different-heights.html',
|
||||
'grid.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
292
dashboard-ui/bower_components/iron-list/test/mutations.html
vendored
Normal file
292
dashboard-ui/bower_components/iron-list/test/mutations.html
vendored
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="trivialListPrimitiveItem">
|
||||
<template>
|
||||
<x-list primitive></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('mutations to the collection of items', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('update physical item', function(done) {
|
||||
var setSize = 100;
|
||||
var phrase = 'It works!';
|
||||
|
||||
list.items = buildDataSet(setSize);
|
||||
|
||||
list.set('items.0.index', phrase);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, phrase);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('update virtual item', function(done) {
|
||||
var setSize = 100;
|
||||
var phrase = 'It works!';
|
||||
|
||||
list.items = buildDataSet(setSize);
|
||||
|
||||
function scrollBackUp() {
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 200,
|
||||
target: 0,
|
||||
onScrollEnd: function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, phrase);
|
||||
done();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
flush(function() {
|
||||
var rowHeight = getFirstItemFromList(list).offsetHeight;
|
||||
// scroll down
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 200,
|
||||
target: setSize*rowHeight,
|
||||
onScrollEnd: function() {
|
||||
list.set('items.0.index', phrase);
|
||||
scrollBackUp();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('push', function(done) {
|
||||
var setSize = 100;
|
||||
|
||||
list.items = buildDataSet(setSize);
|
||||
setSize = list.items.length;
|
||||
|
||||
list.push('items', buildItem(setSize));
|
||||
assert.equal(list.items.length, setSize + 1);
|
||||
|
||||
flush(function() {
|
||||
var rowHeight = list._physicalItems[0].offsetHeight;
|
||||
var viewportHeight = list.offsetHeight;
|
||||
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
|
||||
|
||||
assert.equal(getFirstItemFromList(list).textContent, 0);
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 200,
|
||||
target: list.items.length*rowHeight,
|
||||
onScrollEnd: function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent,
|
||||
list.items.length - itemsPerViewport);
|
||||
done();
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
test('push and scroll to bottom', function(done) {
|
||||
list.items = [buildItem(0)];
|
||||
|
||||
flush(function() {
|
||||
var rowHeight = getFirstItemFromList(list).offsetHeight;
|
||||
var viewportHeight = list.offsetHeight;
|
||||
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
|
||||
|
||||
while (list.items.length < 200) {
|
||||
list.push('items', buildItem(list.items.length));
|
||||
}
|
||||
|
||||
list.scrollToIndex(list.items.length - 1);
|
||||
assert.isTrue(isFullOfItems(list));
|
||||
assert.equal(getFirstItemFromList(list).textContent.trim(),
|
||||
list.items.length - itemsPerViewport);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('pop', function(done) {
|
||||
var setSize = 100;
|
||||
list.items = buildDataSet(setSize);
|
||||
|
||||
flush(function() {
|
||||
var rowHeight = getFirstItemFromList(list).offsetHeight;
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 200,
|
||||
target: setSize*rowHeight,
|
||||
onScrollEnd: function() {
|
||||
var viewportHeight = list.offsetHeight;
|
||||
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
|
||||
|
||||
list.pop('items');
|
||||
|
||||
flush(function() {
|
||||
assert.equal(list.items.length, setSize-1);
|
||||
assert.equal(getFirstItemFromList(list).textContent, setSize - 3 - 1);
|
||||
done();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('splice', function(done) {
|
||||
var setSize = 45;
|
||||
var phrase = 'It works!'
|
||||
list.items = buildDataSet(setSize);
|
||||
|
||||
list.splice('items', 0, setSize, buildItem(phrase));
|
||||
|
||||
flush(function() {
|
||||
assert.equal(list.items.length, 1);
|
||||
assert.equal(getFirstItemFromList(list).textContent, phrase);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('delete item and scroll to bottom', function() {
|
||||
var setSize = 100, index;
|
||||
|
||||
list.items = buildDataSet(setSize);
|
||||
|
||||
while (list.items.length > 10) {
|
||||
index = parseInt(list.items.length * Math.random());
|
||||
list.arrayDelete('items', list.items[index]);
|
||||
list.scrollToIndex(list.items.length - 1);
|
||||
assert.isTrue(/^[0-9]*$/.test(getFirstItemFromList(list).textContent));
|
||||
}
|
||||
});
|
||||
|
||||
test('reassign items', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
container.itemHeight = 'auto';
|
||||
|
||||
flush(function() {
|
||||
var itemHeight = getFirstItemFromList(list).offsetHeight;
|
||||
var hasRepeatedItems = checkRepeatedItems(list);
|
||||
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: 200,
|
||||
target: itemHeight * list.items.length,
|
||||
onScrollEnd: function() {
|
||||
list.items = list.items.slice(0);
|
||||
simulateScroll({
|
||||
list: list,
|
||||
contribution: itemHeight,
|
||||
target: itemHeight * list.items.length,
|
||||
onScroll: function() {
|
||||
assert.isFalse(hasRepeatedItems(), 'List should not have repeated items');
|
||||
},
|
||||
onScrollEnd: done
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('empty items array', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.items = [];
|
||||
flush(function() {
|
||||
assert.notEqual(getFirstItemFromList(list).textContent, '0');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('should notify path to the right physical item', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
flush(function() {
|
||||
var idx = list._physicalCount + 1;
|
||||
|
||||
list.scrollToIndex(idx);
|
||||
list.notifyPath('items.1.index', 'bad');
|
||||
assert.equal(getFirstItemFromList(list).textContent, idx);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('mutations of primitive type items', function() {
|
||||
var container, list;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialListPrimitiveItem');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('push item = polymer', function(done) {
|
||||
list.items = [];
|
||||
list.push('items', 'polymer');
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, 'polymer');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('push item = 0', function(done) {
|
||||
list.items = [];
|
||||
list.push('items', 0);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, '0');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('push item = false', function(done) {
|
||||
list.items = [];
|
||||
list.push('items', false);
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, 'false');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
dashboard-ui/bower_components/iron-list/test/physical-count.html
vendored
Normal file
104
dashboard-ui/bower_components/iron-list/test/physical-count.html
vendored
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list list-height="100" item-height="2"></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="trivialListSmall">
|
||||
<template>
|
||||
<x-list list-height="2" item-height="2"></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('dynamic physical count', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
list.items = buildDataSet(200);
|
||||
});
|
||||
|
||||
test('increase pool size', function(done) {
|
||||
setTimeout(function() {
|
||||
list.scrollTop = 0;
|
||||
|
||||
var lastItem = getLastItemFromList(list);
|
||||
var lastItemHeight = lastItem.offsetHeight;
|
||||
var expectedFinalItem = container.listHeight/lastItemHeight - 1;
|
||||
|
||||
assert.equal(list.offsetHeight, container.listHeight);
|
||||
assert.equal(lastItemHeight, 2);
|
||||
assert.isTrue(isFullOfItems(list));
|
||||
assert.equal(lastItem.textContent, expectedFinalItem);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
suite('iron-resize', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialListSmall');
|
||||
list = container.list;
|
||||
list.style.display = 'none';
|
||||
list.items = buildDataSet(200);
|
||||
});
|
||||
|
||||
test('increase pool size after resizing the list', function(done) {
|
||||
flush(function() {
|
||||
list.style.display = '';
|
||||
assert.notEqual(getFirstItemFromList(list).textContent, '0', 'Item should not be rendered');
|
||||
|
||||
list.fire('iron-resize');
|
||||
|
||||
flush(function() {
|
||||
assert.equal(getFirstItemFromList(list).textContent, '0', 'Item should be rendered');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('pool should not increase if the list has no size', function(done) {
|
||||
container.style.display = 'none';
|
||||
list.fire('iron-resize');
|
||||
|
||||
flush(function() {
|
||||
assert.isFalse(list._increasePoolIfNeeded());
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
352
dashboard-ui/bower_components/iron-list/test/selection.html
vendored
Normal file
352
dashboard-ui/bower_components/iron-list/test/selection.html
vendored
Normal file
|
|
@ -0,0 +1,352 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-list test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="helpers.html">
|
||||
<link rel="import" href="x-list.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialList">
|
||||
<template>
|
||||
<x-list item-height="10"></x-list>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('selection', function() {
|
||||
var list, container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('trivialList');
|
||||
list = container.list;
|
||||
});
|
||||
|
||||
test('single selection by item index', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
assert.isNull(list.selectedItem);
|
||||
|
||||
list.selectItem(0);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[0]);
|
||||
|
||||
list.deselectItem(0);
|
||||
|
||||
assert.deepEqual(list.selectedItem, null);
|
||||
|
||||
list.selectItem(99);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[99]);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('single selection by item object', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
assert.isNull(list.selectedItem);
|
||||
|
||||
list.selectItem(list.items[50]);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[50]);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('multi selection by item index', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.multiSelection = true;
|
||||
|
||||
assert.isArray(list.selectedItems);
|
||||
|
||||
list.selectItem(0);
|
||||
list.selectItem(50);
|
||||
list.selectItem(99);
|
||||
|
||||
assert.equal(list.selectedItems.length, 3);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[50]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[99]), -1);
|
||||
assert.equal(list.selectedItems.indexOf(list.items[2]), -1);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('multi selection by item object', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.multiSelection = true;
|
||||
|
||||
assert.isArray(list.selectedItems);
|
||||
|
||||
list.selectItem(list.items[0]);
|
||||
list.selectItem(list.items[50]);
|
||||
list.selectItem(list.items[99]);
|
||||
|
||||
assert.equal(list.selectedItems.length, 3);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[50]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[99]), -1);
|
||||
assert.equal(list.selectedItems.indexOf(list.items[2]), -1);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('clear selection', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.multiSelection = true;
|
||||
|
||||
assert.isArray(list.selectedItems);
|
||||
|
||||
list.items.forEach(function(item) {
|
||||
list.selectItem(item);
|
||||
});
|
||||
|
||||
assert.equal(list.selectedItems.length, list.items.length);
|
||||
|
||||
list.clearSelection();
|
||||
|
||||
assert.equal(list.selectedItems.length, 0);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test('toggle selection by item index', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.toggleSelectionForItem(0);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[0]);
|
||||
|
||||
list.toggleSelectionForItem(0);
|
||||
|
||||
assert.isNull(list.selectedItem);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('toggle selection by item object', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.toggleSelectionForItem(list.items[0]);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[0]);
|
||||
|
||||
list.toggleSelectionForItem(list.items[0]);
|
||||
|
||||
assert.isNull(list.selectedItem);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('change multi property', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.multiSelection = true;
|
||||
|
||||
assert.isArray(list.selectedItems);
|
||||
|
||||
list.multiSelection = false;
|
||||
|
||||
assert.isNotArray(list.selectedItems);
|
||||
assert.isNull(list.selectedItems);
|
||||
|
||||
list.multiSelection = true;
|
||||
|
||||
assert.isArray(list.selectedItems);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('selectionEnabled with single selection', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.selectionEnabled = true;
|
||||
|
||||
assert.isNull(list.selectedItem);
|
||||
|
||||
// select item[0]
|
||||
MockInteractions.tap(list._physicalItems[0]);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[0]);
|
||||
|
||||
// select item[5] and deselect item[0]
|
||||
MockInteractions.tap(list._physicalItems[5]);
|
||||
|
||||
// select item[1] and deselect item[5]
|
||||
MockInteractions.tap(list._physicalItems[1]);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[1]);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('selectionEnabled with multiple selection', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.multiSelection = true;
|
||||
|
||||
MockInteractions.tap(list._physicalItems[0]);
|
||||
assert.equal(list.selectedItems.length, 0);
|
||||
|
||||
// enable the feature
|
||||
list.selectionEnabled = true;
|
||||
|
||||
// select item[0]
|
||||
MockInteractions.tap(list._physicalItems[0]);
|
||||
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
|
||||
|
||||
// multiple selection
|
||||
MockInteractions.tap(list._physicalItems[1]);
|
||||
MockInteractions.tap(list._physicalItems[5]);
|
||||
MockInteractions.tap(list._physicalItems[10]);
|
||||
MockInteractions.tap(list._physicalItems[12]);
|
||||
|
||||
list.selectItem(0);
|
||||
list.deselectItem(1);
|
||||
|
||||
assert.equal(list.selectedItems.indexOf(list.items[1]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[5]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[10]), -1);
|
||||
assert.notEqual(list.selectedItems.indexOf(list.items[12]), -1);
|
||||
|
||||
list.clearSelection();
|
||||
|
||||
assert.equal(list.selectedItems.length, 0);
|
||||
|
||||
// disable the feature
|
||||
list.selectionEnabled = false;
|
||||
|
||||
MockInteractions.tap(list._physicalItems[1]);
|
||||
|
||||
assert.equal(list.selectedItems.length, 0);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('toggle', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
list.selectionEnabled = true;
|
||||
|
||||
MockInteractions.tap(list._physicalItems[0]);
|
||||
|
||||
assert.deepEqual(list.selectedItem, list.items[0]);
|
||||
|
||||
MockInteractions.tap(list._physicalItems[0]);
|
||||
|
||||
assert.isNull(list.selectedItem);
|
||||
|
||||
MockInteractions.tap(list._physicalItems[0]);
|
||||
list.clearSelection();
|
||||
|
||||
assert.isNull(list.selectedItem);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
test('selectedAs', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
// multi selection
|
||||
list.multiSelection = true;
|
||||
|
||||
assert.isFalse(list._physicalItems[0]._templateInstance.selected);
|
||||
|
||||
list.selectItem(0);
|
||||
|
||||
assert.isTrue(list._physicalItems[0]._templateInstance.selected);
|
||||
|
||||
list.toggleSelectionForItem(0);
|
||||
|
||||
assert.isFalse(list._physicalItems[0]._templateInstance.selected);
|
||||
|
||||
// single selection
|
||||
list.multiSelection = false;
|
||||
|
||||
list.selectItem(0);
|
||||
list.selectItem(10);
|
||||
|
||||
assert.isFalse(list._physicalItems[0]._templateInstance.selected);
|
||||
assert.isTrue(list._physicalItems[10]._templateInstance.selected);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test('splice a selected item', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
|
||||
flush(function() {
|
||||
// multi selection
|
||||
list.multiSelection = true;
|
||||
|
||||
// select the first two items
|
||||
list.selectItem(0);
|
||||
list.selectItem(1);
|
||||
|
||||
assert.equal(list.selectedItems.length, 2);
|
||||
|
||||
// remove the first two items
|
||||
list.splice('items', 0, 2);
|
||||
|
||||
assert.equal(list.selectedItems.length, 0);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
dashboard-ui/bower_components/iron-list/test/smoke/avg-worst-case.html
vendored
Normal file
91
dashboard-ui/bower_components/iron-list/test/smoke/avg-worst-case.html
vendored
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<!--
|
||||
@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>avg worst case</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="../../iron-list.html">
|
||||
|
||||
<style is="custom-style">
|
||||
body {
|
||||
@apply(--layout-fullbleed);
|
||||
}
|
||||
|
||||
iron-list {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background-color: green;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="dom-bind">
|
||||
|
||||
<h1>The physical average is not useful in this situations</h1>
|
||||
<p>The list is correct if it can render all the items without empty spaces.</p>
|
||||
<iron-list id="list" items="[791, 671]" as="item" style="width: 300px; height: 300px;">
|
||||
<template>
|
||||
<div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
<iron-list id="list2" items="[791, 671]" as="item" style="width: 710px; height: 453px;">
|
||||
<template>
|
||||
<div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
<iron-list items="[512, 256, 128, 64, 16, 16, 16, 16, 16, 16, 8, 4]" as="item" style="height: 256px;">
|
||||
<template>
|
||||
<div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
HTMLImports.whenReady(function() {
|
||||
document.querySelector('template[is=dom-bind]')._getStyle = function(item) {
|
||||
return 'height:' + item + 'px; ';
|
||||
};
|
||||
|
||||
setTimeout(function() {
|
||||
document.querySelector('#list').push('items', 251, 191, 151, 191, 51, 51, 51);
|
||||
}, 100);
|
||||
|
||||
setTimeout(function() {
|
||||
document.querySelector('#list2').push('items', 251, 191, 151, 191, 51, 51, 51);
|
||||
}, 300);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18514
dashboard-ui/bower_components/iron-list/test/smoke/dummy-data.html
vendored
Normal file
18514
dashboard-ui/bower_components/iron-list/test/smoke/dummy-data.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
205
dashboard-ui/bower_components/iron-list/test/smoke/index.html
vendored
Normal file
205
dashboard-ui/bower_components/iron-list/test/smoke/index.html
vendored
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
<!--
|
||||
@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>iron-list demo</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../../polymer/polymer.html">
|
||||
<link rel="import" href="../../../paper-styles/paper-styles.html">
|
||||
|
||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../iron-list.html">
|
||||
<link rel="import" href="dummy-data.html">
|
||||
|
||||
<dom-module id="x-app">
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
font-family: sans-serif;
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
|
||||
iron-list {
|
||||
@apply(--layout-flex);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid gray;
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
|
||||
.item img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.picture {
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
#about {
|
||||
color: lightgray;
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#last {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.padded {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
.padded > * {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#index {
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
#options {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
border: 1px solid gray;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 10;
|
||||
padding: 5px;
|
||||
}
|
||||
#friends {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div id="options">
|
||||
<input value="{{separator::input}}" style="width:20px;">
|
||||
<label><input type="checkbox" checked="{{showing::change}}">Show friends</label>
|
||||
</div>
|
||||
|
||||
<iron-list id="list1" items="{{data}}">
|
||||
<template>
|
||||
<div class="item">
|
||||
<div class="picture">
|
||||
<img src="{{pictureForItem(item)}}">
|
||||
<div>{{item.index}}</div>
|
||||
</div>
|
||||
<div class="padded">
|
||||
<div>
|
||||
<input placeholder="name.last" value="{{item.name.last::input}}">
|
||||
<span>{{separator}}</span>
|
||||
<input placeholder="name.first" value="{{item.name.first::input}}">
|
||||
</div>
|
||||
<div>{{item.about}}</div>
|
||||
<div id="friends">
|
||||
<template is="dom-if" if="{{showing}}">
|
||||
<span><strong>Friends:</strong></span>
|
||||
<template is="dom-repeat" items="{{item.friends}}">
|
||||
<span>{{item.name}}</span>
|
||||
<span>{{separator}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
<iron-list id="list2" items="{{data}}">
|
||||
<template>
|
||||
<div class="item">
|
||||
<div class="picture">
|
||||
<img src="{{pictureForItem(item)}}">
|
||||
<div>{{item.index}}</div>
|
||||
</div>
|
||||
<div class="padded">
|
||||
<div>
|
||||
<input placeholder="name.last" value="{{item.name.last::input}}">
|
||||
<span>{{separator}}</span>
|
||||
<input placeholder="name.first" value="{{item.name.first::input}}">
|
||||
</div>
|
||||
<div>{{item.about}}</div>
|
||||
<div id="friends">
|
||||
<template is="dom-if" if="{{showing}}">
|
||||
<span><strong>Friends:</strong></span>
|
||||
<template is="dom-repeat" items="{{item.friends}}">
|
||||
<span>{{item.name}}</span>
|
||||
<span>{{separator}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
HTMLImports.whenReady(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'x-app',
|
||||
|
||||
properties: {
|
||||
data: {
|
||||
value: window.dummyData
|
||||
},
|
||||
separator: {
|
||||
value: '|'
|
||||
},
|
||||
showing: {
|
||||
value: false
|
||||
}
|
||||
},
|
||||
pictureForItem: function(item) {
|
||||
return item.picture + '/' + item.guid.slice(0,6);
|
||||
},
|
||||
iconForItem: function(item) {
|
||||
return item.gender == 'female' ? 'star' : 'star-outline';
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style is="custom-style">
|
||||
body, x-app {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<x-app></x-app>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
296
dashboard-ui/bower_components/iron-list/test/smoke/physical-count.html
vendored
Normal file
296
dashboard-ui/bower_components/iron-list/test/smoke/physical-count.html
vendored
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
<!--
|
||||
@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>
|
||||
81
dashboard-ui/bower_components/iron-list/test/x-grid.html
vendored
Normal file
81
dashboard-ui/bower_components/iron-list/test/x-grid.html
vendored
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<dom-module id="x-grid">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-fit);
|
||||
@apply(--layout-vertical);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
iron-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<iron-list style$="[[_computedListSize(listSize)]]" items="[[data]]" as="item" id="list" grid>
|
||||
<template>
|
||||
<div class="item">
|
||||
<div style$="[[_computeItemSize(item)]]">[[item.index]]</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-grid',
|
||||
|
||||
properties: {
|
||||
data: {
|
||||
type: Array
|
||||
},
|
||||
|
||||
itemSize: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
|
||||
listSize: {
|
||||
type: Number,
|
||||
value: 300
|
||||
},
|
||||
|
||||
pre: {
|
||||
type: Boolean
|
||||
},
|
||||
},
|
||||
|
||||
get list() {
|
||||
return this.$.list;
|
||||
},
|
||||
|
||||
_computeItemSize: function(item) {
|
||||
var css = this.pre ? 'white-space:pre;' : '';
|
||||
css += 'height: ' + (this.itemSize) + 'px;';
|
||||
css += 'width: ' + (this.itemSize) + 'px;';
|
||||
return css;
|
||||
},
|
||||
|
||||
_computedListSize: function(listHeight) {
|
||||
return 'height: ' + (listHeight) + 'px;' + 'width: ' + (listHeight) + 'px;';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
102
dashboard-ui/bower_components/iron-list/test/x-list.html
vendored
Normal file
102
dashboard-ui/bower_components/iron-list/test/x-list.html
vendored
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../iron-list.html">
|
||||
|
||||
<dom-module id="x-list">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-fit);
|
||||
@apply(--layout-vertical);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.item:nth-child(odd) {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.item:nth-child(even) {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
iron-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<iron-list style$="[[_computedListHeight(listHeight)]]" items="[[data]]" as="item" id="list">
|
||||
<template>
|
||||
<div class="item">
|
||||
<div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[primitive]]">[[item.index]]</div>
|
||||
<div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[!primitive]]">[[item]]</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-list',
|
||||
|
||||
properties: {
|
||||
data: {
|
||||
type: Array
|
||||
},
|
||||
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
|
||||
listHeight: {
|
||||
type: Number,
|
||||
value: 300
|
||||
},
|
||||
|
||||
pre: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
primitive: {
|
||||
value: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
|
||||
get list() {
|
||||
return this.$.list;
|
||||
},
|
||||
|
||||
_computedItemHeight: function(item) {
|
||||
var css = this.pre ? 'white-space:pre;' : '';
|
||||
if (item.height) {
|
||||
css += this.itemHeight === 0 ? '' : 'height: ' + (item.height) + 'px;';
|
||||
} else if (this.itemHeight) {
|
||||
css += 'height: ' + (this.itemHeight) + 'px;';
|
||||
}
|
||||
return css;
|
||||
},
|
||||
|
||||
_computedListHeight: function(listHeight) {
|
||||
return 'height: ' + (listHeight) + 'px;';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
40
dashboard-ui/bower_components/iron-scroll-target-behavior/.bower.json
vendored
Normal file
40
dashboard-ui/bower_components/iron-scroll-target-behavior/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "iron-scroll-target-behavior",
|
||||
"version": "1.0.6",
|
||||
"description": "Allows to define a scroller target",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"main": "iron-scroll-target-behavior.html",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"scroll"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-scroll-target-behavior.git"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-scroll-target-behavior",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.6",
|
||||
"commit": "33d5864e0557212eb530dbac280bfc4b4d923880"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-scroll-target-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-scroll-target-behavior"
|
||||
}
|
||||
33
dashboard-ui/bower_components/iron-scroll-target-behavior/.github/ISSUE_TEMPLATE.md
vendored
Normal file
33
dashboard-ui/bower_components/iron-scroll-target-behavior/.github/ISSUE_TEMPLATE.md
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!-- Instructions: https://github.com/PolymerElements/iron-scroll-target-behavior/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
||||
2
dashboard-ui/bower_components/iron-scroll-target-behavior/.gitignore
vendored
Normal file
2
dashboard-ui/bower_components/iron-scroll-target-behavior/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
bower_components
|
||||
|
||||
24
dashboard-ui/bower_components/iron-scroll-target-behavior/.travis.yml
vendored
Normal file
24
dashboard-ui/bower_components/iron-scroll-target-behavior/.travis.yml
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
language: node_js
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
sauce_connect: true
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
- ubuntu-toolchain-r-test
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
- g++-4.8
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
|
||||
env:
|
||||
global:
|
||||
- CXX=g++-4.8
|
||||
- secure: V9/FfFlrGgmgHI8icv3zjSn2bupGJs3FG2KlCqBwK5irWVU3Kcshl8XnXordLIfu2UF4Q/Aa4PkD2jKNuX/jSgGPpAfAi7aOruURSMZCzPErzKTQRg8iqHovhqDyJ2d5TypCRPCYDp+nO1ZQdPT5GQ1/8EZgilZFNVNTZ9twUJIYqPEcyQ7eAlxynDgjKxhMLa04UnUXzHVZ200x09gqGXByAK6tHvzf/W3BtjmjX7BZp0CWWk7tBgiH9gBsqwaYwHG7hg+hCVsnywN6G2WsUpPM4tBu3iyiVuNDuhY07MrV1uxEW9NCjyK8GUpHuCVN9A4CxeeDJM4xR8A3JUaVvWRwhES6KJ4YEdjfU6W759o2e05Sw3q3k4YQD96xiRz5YXYrnqLvm75trLY75pWqzIQkh+6g/C/ZBxRndh/n1VrV35GtAN+KEPE733PLvE8+yUWSiSAo052GyiYqt82joZv8+a1E38jg+bWRAYGuKcYxB5zS7xCEfkoztCuBT80yR+daQGyv0q61jmDrCUgl4B2m3xNf0+C08hYhR7KPHrMzIov3LTgJhHt6oonFs21Oa9cO8moMgaXP7Az8Y4c4Bg/BXaUe6lKkZ19kyzuDbF7hFKY0ABt1SwwkHZkEJ/Bk95CJigauFOuR3rq4TW4+M1DyqebvoyzjF4H1rHBY+lo=
|
||||
- secure: x0Lq3topCMeNImNyY7nKiVPUEaQHjmywaen23pqH5/slsYrmMEFUEME+2sigGDuSacmhfka7DZuXs7jZuk6DlZN5HoueW+xwF6MxnGJRibTw6yFj6g3MJ0dDD6wu3w9TVERNiWCJ5drnTH41QwvUjGMtBrJuHw6qaiCuuLzbwqCxkRynEjssOXzsYY4JlC3EgM2/BVZQ1H2lyWH+elmRXOGDADzm8BVGQkJWCj644HROvGc45j2cOP+vq5MvL1SEA4IDdRRYGOhcc9lGZUY/qOfsai2K0LzgIvMQbjAdt8kbcvz8cnCVJHreIJKQfNe7VAWFiXhNbbzGrYH4DGe52MRSM6c22oLWqzgctqF1YDYAPAoF+6Cj6HqzHmMyNAe4RkpAGnXw5V4HjX013BFYCdImMHF6Am8I2RW2q+buWWW9fZVFjKGD0woz3ay5W4jw6Z//V73J6p/jDiVgq0MT2S4Q8hCEh8QaqK69v9eS+Vxbh1KRUvFaBJvgDYfTnTQ4niuT/Y7TV0ZQ/DMAZ/kBfyMLAmyU5XWuGAnmg6uydE5JtHJHKYb+BKyZ++uImhyfM+bQkp6PxWRNxKsgNt8dcYn50/ppNnkHjXpoQxAlR5kjjiHsVmo4ZLOxkckjyr074Kb/nmDOqMxbRzdTlsBBqycJZjKtm4YX+GkrQXsEbg8=
|
||||
77
dashboard-ui/bower_components/iron-scroll-target-behavior/CONTRIBUTING.md
vendored
Normal file
77
dashboard-ui/bower_components/iron-scroll-target-behavior/CONTRIBUTING.md
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
||||
31
dashboard-ui/bower_components/iron-scroll-target-behavior/bower.json
vendored
Normal file
31
dashboard-ui/bower_components/iron-scroll-target-behavior/bower.json
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "iron-scroll-target-behavior",
|
||||
"version": "1.0.6",
|
||||
"description": "Allows to define a scroller target",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"main": "iron-scroll-target-behavior.html",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"scroll"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-scroll-target-behavior.git"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-scroll-target-behavior",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
39
dashboard-ui/bower_components/iron-scroll-target-behavior/demo/document.html
vendored
Normal file
39
dashboard-ui/bower_components/iron-scroll-target-behavior/demo/document.html
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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>iron-scroll-target-behavior using the document scrolling</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../iron-scroll-target-behavior.html">
|
||||
<link rel="import" href="x-scrollable.html">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<x-scrollable scroll-target="document"></x-scrollable>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
dashboard-ui/bower_components/iron-scroll-target-behavior/demo/scrolling-region.html
vendored
Normal file
51
dashboard-ui/bower_components/iron-scroll-target-behavior/demo/scrolling-region.html
vendored
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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>iron-scroll-target-behavior using a scrolling region</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../iron-scroll-target-behavior.html">
|
||||
<link rel="import" href="x-scrollable.html">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#region {
|
||||
height: 50vh;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 25vh;
|
||||
left: 25vh;
|
||||
right: 25vh;
|
||||
box-shadow: 0 0 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<div id="region">
|
||||
<x-scrollable scroll-target="region"></x-scrollable>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
dashboard-ui/bower_components/iron-scroll-target-behavior/demo/x-scrollable.html
vendored
Normal file
105
dashboard-ui/bower_components/iron-scroll-target-behavior/demo/x-scrollable.html
vendored
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-scroll-target-behavior.html">
|
||||
|
||||
<dom-module id="x-scrollable">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
font: 14px arial;
|
||||
}
|
||||
|
||||
.scrollState {
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
background-color: #eee;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: calc(50% - 100px);
|
||||
padding: 10px;
|
||||
width: 220px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="scrollState">scrollTop: [[xScrollTop]] - scrollLeft: [[xScrollLeft]]</div>
|
||||
|
||||
<template is="dom-repeat" items="[[_getItems(itemCount)]]">
|
||||
<div class="item">[[index]]</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
|
||||
is: 'x-scrollable',
|
||||
|
||||
properties: {
|
||||
|
||||
xScrollTop: {
|
||||
type: Number,
|
||||
readOnly: true,
|
||||
value: 0
|
||||
},
|
||||
|
||||
xScrollLeft: {
|
||||
type: Number,
|
||||
readOnly: true,
|
||||
value: 0
|
||||
},
|
||||
|
||||
itemCount: {
|
||||
type: Number,
|
||||
value: 200
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronScrollTargetBehavior
|
||||
],
|
||||
|
||||
attached: function() {
|
||||
this._scrollHandler();
|
||||
},
|
||||
|
||||
_scrollHandler: function() {
|
||||
this._setXScrollTop(this._scrollTop);
|
||||
this._setXScrollLeft(this._scrollLeft);
|
||||
},
|
||||
|
||||
_getItems: function(itemCount) {
|
||||
var items = new Array(itemCount);
|
||||
while (itemCount > 0) {
|
||||
items[--itemCount] = true;
|
||||
}
|
||||
return items;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
28
dashboard-ui/bower_components/iron-scroll-target-behavior/index.html
vendored
Normal file
28
dashboard-ui/bower_components/iron-scroll-target-behavior/index.html
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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>iron-scroll-target-behavior</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
234
dashboard-ui/bower_components/iron-scroll-target-behavior/iron-scroll-target-behavior.html
vendored
Normal file
234
dashboard-ui/bower_components/iron-scroll-target-behavior/iron-scroll-target-behavior.html
vendored
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* `Polymer.IronScrollTargetBehavior` allows an element to respond to scroll events from a
|
||||
* designated scroll target.
|
||||
*
|
||||
* Elements that consume this behavior can override the `_scrollHandler`
|
||||
* method to add logic on the scroll event.
|
||||
*
|
||||
* @demo demo/scrolling-region.html Scrolling Region
|
||||
* @demo demo/document.html Document Element
|
||||
* @polymerBehavior
|
||||
*/
|
||||
Polymer.IronScrollTargetBehavior = {
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Specifies the element that will handle the scroll event
|
||||
* on the behalf of the current element. This is typically a reference to an element,
|
||||
* but there are a few more posibilities:
|
||||
*
|
||||
* ### Elements id
|
||||
*
|
||||
*```html
|
||||
* <div id="scrollable-element" style="overflow: auto;">
|
||||
* <x-element scroll-target="scrollable-element">
|
||||
* <!-- Content-->
|
||||
* </x-element>
|
||||
* </div>
|
||||
*```
|
||||
* In this case, the `scrollTarget` will point to the outer div element.
|
||||
*
|
||||
* ### Document scrolling
|
||||
*
|
||||
* For document scrolling, you can use the reserved word `document`:
|
||||
*
|
||||
*```html
|
||||
* <x-element scroll-target="document">
|
||||
* <!-- Content -->
|
||||
* </x-element>
|
||||
*```
|
||||
*
|
||||
* ### Elements reference
|
||||
*
|
||||
*```js
|
||||
* appHeader.scrollTarget = document.querySelector('#scrollable-element');
|
||||
*```
|
||||
*
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
scrollTarget: {
|
||||
type: HTMLElement,
|
||||
value: function() {
|
||||
return this._defaultScrollTarget;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_scrollTargetChanged(scrollTarget, isAttached)'
|
||||
],
|
||||
|
||||
_scrollTargetChanged: function(scrollTarget, isAttached) {
|
||||
var eventTarget;
|
||||
|
||||
if (this._oldScrollTarget) {
|
||||
eventTarget = this._oldScrollTarget === this._doc ? window : this._oldScrollTarget;
|
||||
eventTarget.removeEventListener('scroll', this._boundScrollHandler);
|
||||
this._oldScrollTarget = null;
|
||||
}
|
||||
|
||||
if (!isAttached) {
|
||||
return;
|
||||
}
|
||||
// Support element id references
|
||||
if (scrollTarget === 'document') {
|
||||
|
||||
this.scrollTarget = this._doc;
|
||||
|
||||
} else if (typeof scrollTarget === 'string') {
|
||||
|
||||
this.scrollTarget = this.domHost ? this.domHost.$[scrollTarget] :
|
||||
Polymer.dom(this.ownerDocument).querySelector('#' + scrollTarget);
|
||||
|
||||
} else if (this._isValidScrollTarget()) {
|
||||
|
||||
eventTarget = scrollTarget === this._doc ? window : scrollTarget;
|
||||
this._boundScrollHandler = this._boundScrollHandler || this._scrollHandler.bind(this);
|
||||
this._oldScrollTarget = scrollTarget;
|
||||
|
||||
eventTarget.addEventListener('scroll', this._boundScrollHandler);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Runs on every scroll event. Consumer of this behavior may override this method.
|
||||
*
|
||||
* @protected
|
||||
*/
|
||||
_scrollHandler: function scrollHandler() {},
|
||||
|
||||
/**
|
||||
* The default scroll target. Consumers of this behavior may want to customize
|
||||
* the default scroll target.
|
||||
*
|
||||
* @type {Element}
|
||||
*/
|
||||
get _defaultScrollTarget() {
|
||||
return this._doc;
|
||||
},
|
||||
|
||||
/**
|
||||
* Shortcut for the document element
|
||||
*
|
||||
* @type {Element}
|
||||
*/
|
||||
get _doc() {
|
||||
return this.ownerDocument.documentElement;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the number of pixels that the content of an element is scrolled upward.
|
||||
*
|
||||
* @type {number}
|
||||
*/
|
||||
get _scrollTop() {
|
||||
if (this._isValidScrollTarget()) {
|
||||
return this.scrollTarget === this._doc ? window.pageYOffset : this.scrollTarget.scrollTop;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the number of pixels that the content of an element is scrolled to the left.
|
||||
*
|
||||
* @type {number}
|
||||
*/
|
||||
get _scrollLeft() {
|
||||
if (this._isValidScrollTarget()) {
|
||||
return this.scrollTarget === this._doc ? window.pageXOffset : this.scrollTarget.scrollLeft;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the number of pixels that the content of an element is scrolled upward.
|
||||
*
|
||||
* @type {number}
|
||||
*/
|
||||
set _scrollTop(top) {
|
||||
if (this.scrollTarget === this._doc) {
|
||||
window.scrollTo(window.pageXOffset, top);
|
||||
} else if (this._isValidScrollTarget()) {
|
||||
this.scrollTarget.scrollTop = top;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the number of pixels that the content of an element is scrolled to the left.
|
||||
*
|
||||
* @type {number}
|
||||
*/
|
||||
set _scrollLeft(left) {
|
||||
if (this.scrollTarget === this._doc) {
|
||||
window.scrollTo(left, window.pageYOffset);
|
||||
} else if (this._isValidScrollTarget()) {
|
||||
this.scrollTarget.scrollLeft = left;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Scrolls the content to a particular place.
|
||||
*
|
||||
* @method scroll
|
||||
* @param {number} left The left position
|
||||
* @param {number} top The top position
|
||||
*/
|
||||
scroll: function(left, top) {
|
||||
if (this.scrollTarget === this._doc) {
|
||||
window.scrollTo(left, top);
|
||||
} else if (this._isValidScrollTarget()) {
|
||||
this.scrollTarget.scrollLeft = left;
|
||||
this.scrollTarget.scrollTop = top;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the width of the scroll target.
|
||||
*
|
||||
* @type {number}
|
||||
*/
|
||||
get _scrollTargetWidth() {
|
||||
if (this._isValidScrollTarget()) {
|
||||
return this.scrollTarget === this._doc ? window.innerWidth : this.scrollTarget.offsetWidth;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the height of the scroll target.
|
||||
*
|
||||
* @type {number}
|
||||
*/
|
||||
get _scrollTargetHeight() {
|
||||
if (this._isValidScrollTarget()) {
|
||||
return this.scrollTarget === this._doc ? window.innerHeight : this.scrollTarget.offsetHeight;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the scroll target is a valid HTMLElement.
|
||||
*
|
||||
* @return {boolean}
|
||||
*/
|
||||
_isValidScrollTarget: function() {
|
||||
return this.scrollTarget instanceof HTMLElement;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
298
dashboard-ui/bower_components/iron-scroll-target-behavior/test/basic.html
vendored
Normal file
298
dashboard-ui/bower_components/iron-scroll-target-behavior/test/basic.html
vendored
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-scroll-target-behavior test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="x-scrollable.html">
|
||||
<link rel="import" href="x-nested-scrollable.html">
|
||||
|
||||
<style>
|
||||
#temporaryScrollingRegion,
|
||||
#region {
|
||||
overflow: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialScrollable">
|
||||
<template>
|
||||
<div id="temporaryScrollingRegion">
|
||||
<x-scrollable></x-scrollable>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="trivialScrollingRegion">
|
||||
<template>
|
||||
<div id="region">
|
||||
<x-scrollable scroll-target="region"></x-scrollable>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="trivialNestedScrollingRegion">
|
||||
<template>
|
||||
<x-nested-scrollable id="nestedScrollingRegion"></x-nested-scrollable>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
|
||||
<test-fixture id="trivialDocumentScroll">
|
||||
<template>
|
||||
<x-scrollable scroll-target="document"></x-scrollable>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('basic features', function() {
|
||||
var scrollingRegion, xScroll;
|
||||
|
||||
setup(function() {
|
||||
scrollingRegion = fixture('trivialScrollable');
|
||||
xScroll = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
|
||||
});
|
||||
|
||||
test('default', function() {
|
||||
assert.equal(xScroll._scrollTop, 0, '_scrollTop');
|
||||
assert.equal(xScroll._scrollLeft, 0, '_scrollLeft');
|
||||
assert.equal(xScroll._scrollTargetWidth, 0, '_scrollTargetWidth');
|
||||
assert.equal(xScroll._scrollTargetHeight, 0, '_scrollTargetHeight');
|
||||
assert.equal(xScroll.scrollTarget, null, 'scrollTarget');
|
||||
assert.equal(xScroll._defaultScrollTarget, xScroll.scrollTarget, '_defaultScrollTarget');
|
||||
});
|
||||
|
||||
test('invalid `scrollTarget` selector', function(done) {
|
||||
flush(function() {
|
||||
xScroll.scrollTarget = 'invalid-id';
|
||||
assert.equal(xScroll.scrollTarget, null);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('valid `scrollTarget` selector', function(done) {
|
||||
flush(function() {
|
||||
xScroll.scrollTarget = 'temporaryScrollingRegion';
|
||||
assert.equal(xScroll.scrollTarget, scrollingRegion);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('scrolling region', function() {
|
||||
var scrollingRegion, xScrollable;
|
||||
|
||||
setup(function() {
|
||||
scrollingRegion = fixture('trivialScrollingRegion');
|
||||
xScrollable = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
xScrollable._scrollTop = 0;
|
||||
xScrollable._scrollLeft = 0;
|
||||
});
|
||||
|
||||
test('scrollTarget reference', function(done) {
|
||||
flush(function() {
|
||||
assert.equal(xScrollable.scrollTarget, scrollingRegion);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('invalid scrollTarget', function(done) {
|
||||
flush(function() {
|
||||
assert.equal(xScrollable.scrollTarget, scrollingRegion);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('setters', function(done) {
|
||||
flush(function() {
|
||||
xScrollable._scrollTop = 100;
|
||||
xScrollable._scrollLeft = 100;
|
||||
|
||||
assert.equal(scrollingRegion.scrollTop, 100);
|
||||
assert.equal(scrollingRegion.scrollLeft, 100);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('getters', function(done) {
|
||||
flush(function() {
|
||||
scrollingRegion.scrollTop = 50;
|
||||
scrollingRegion.scrollLeft = 50;
|
||||
|
||||
assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
|
||||
assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
|
||||
assert.equal(xScrollable._scrollTargetWidth, scrollingRegion.offsetWidth, '_scrollTargetWidth');
|
||||
assert.equal(xScrollable._scrollTargetHeight, scrollingRegion.offsetHeight, '_scrollTargetHeight');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('scroll method', function(done) {
|
||||
flush(function() {
|
||||
xScrollable.scroll(110, 110);
|
||||
|
||||
assert.equal(xScrollable._scrollTop, 110);
|
||||
assert.equal(xScrollable._scrollLeft, 110);
|
||||
|
||||
xScrollable.scroll(0, 0);
|
||||
|
||||
assert.equal(xScrollable._scrollTop, 0);
|
||||
assert.equal(xScrollable._scrollLeft, 0);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('document scroll', function() {
|
||||
var xScrollable;
|
||||
|
||||
setup(function() {
|
||||
xScrollable = fixture('trivialDocumentScroll');
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
xScrollable._scrollTop = 0;
|
||||
xScrollable._scrollLeft = 0;
|
||||
});
|
||||
|
||||
test('scrollTarget reference', function(done) {
|
||||
flush(function() {
|
||||
assert.equal(xScrollable.scrollTarget, document.documentElement);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('setters', function(done) {
|
||||
flush(function() {
|
||||
xScrollable._scrollTop = 100;
|
||||
xScrollable._scrollLeft = 100;
|
||||
|
||||
assert.equal(window.pageXOffset, 100);
|
||||
assert.equal(window.pageYOffset, 100);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('getters', function(done) {
|
||||
flush(function() {
|
||||
window.scrollTo(50, 50);
|
||||
|
||||
assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
|
||||
assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
|
||||
assert.equal(xScrollable._scrollTargetWidth, window.innerWidth, '_scrollTargetWidth');
|
||||
assert.equal(xScrollable._scrollTargetHeight, window.innerHeight, '_scrollTargetHeight');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('scroll method', function(done) {
|
||||
flush(function() {
|
||||
|
||||
xScrollable.scroll(1, 2);
|
||||
|
||||
assert.equal(xScrollable._scrollLeft, 1);
|
||||
assert.equal(xScrollable._scrollTop, 2);
|
||||
|
||||
xScrollable.scroll(3, 4);
|
||||
|
||||
assert.equal(xScrollable._scrollLeft, 3);
|
||||
assert.equal(xScrollable._scrollTop, 4);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('nested scrolling region', function() {
|
||||
var xScrollingRegion;
|
||||
var xScrollable;
|
||||
|
||||
setup(function() {
|
||||
var nestedScrollingRegion = fixture('trivialNestedScrollingRegion');
|
||||
xScrollable = nestedScrollingRegion.$.xScrollable;
|
||||
xScrollingRegion = nestedScrollingRegion.$.xRegion;
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
xScrollable._scrollTop = 0;
|
||||
xScrollable._scrollLeft = 0;
|
||||
});
|
||||
|
||||
test('scrollTarget reference', function(done) {
|
||||
flush(function() {
|
||||
assert.equal(xScrollable.scrollTarget, xScrollingRegion);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('setters', function(done) {
|
||||
flush(function() {
|
||||
xScrollable._scrollTop = 10;
|
||||
xScrollable._scrollLeft = 20;
|
||||
|
||||
assert.equal(xScrollingRegion.scrollTop, 10);
|
||||
assert.equal(xScrollingRegion.scrollLeft, 20);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('getters', function(done) {
|
||||
flush(function() {
|
||||
xScrollable._scrollTop = 10;
|
||||
xScrollable._scrollLeft = 20;
|
||||
|
||||
assert.equal(xScrollable._scrollTop, 10, '_scrollTop');
|
||||
assert.equal(xScrollable._scrollLeft, 20, '_scrollLeft');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('scroll method', function(done) {
|
||||
flush(function() {
|
||||
|
||||
xScrollable.scroll(1, 2);
|
||||
|
||||
assert.equal(xScrollable._scrollLeft, 1);
|
||||
assert.equal(xScrollable._scrollTop, 2);
|
||||
|
||||
xScrollable.scroll(3, 4);
|
||||
|
||||
assert.equal(xScrollable._scrollLeft, 3);
|
||||
assert.equal(xScrollable._scrollTop, 4);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
dashboard-ui/bower_components/iron-scroll-target-behavior/test/index.html
vendored
Normal file
32
dashboard-ui/bower_components/iron-scroll-target-behavior/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
WCT.loadSuites([
|
||||
'basic.html',
|
||||
'basic.html?dom=shadow'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
dashboard-ui/bower_components/iron-scroll-target-behavior/test/x-nested-scrollable.html
vendored
Normal file
42
dashboard-ui/bower_components/iron-scroll-target-behavior/test/x-nested-scrollable.html
vendored
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="x-scrollable.html">
|
||||
|
||||
<dom-module id="x-nested-scrollable">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#xRegion {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div id="xRegion">
|
||||
<x-scrollable id="xScrollable" scroll-target="xRegion"></x-scrollable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-nested-scrollable'
|
||||
});
|
||||
</script>
|
||||
68
dashboard-ui/bower_components/iron-scroll-target-behavior/test/x-scrollable.html
vendored
Normal file
68
dashboard-ui/bower_components/iron-scroll-target-behavior/test/x-scrollable.html
vendored
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-scroll-target-behavior.html">
|
||||
|
||||
<dom-module id="x-scrollable">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
font: 14px arial;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<template is="dom-repeat" items="[[_getItems(itemCount)]]">
|
||||
<div class="item">[[index]]</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
|
||||
is: 'x-scrollable',
|
||||
|
||||
properties: {
|
||||
|
||||
itemCount: {
|
||||
type: Number,
|
||||
value: 200
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronScrollTargetBehavior
|
||||
],
|
||||
|
||||
_defaultScrollTarget: null,
|
||||
|
||||
_getItems: function(itemCount) {
|
||||
var items = new Array(itemCount);
|
||||
while (itemCount > 0) {
|
||||
items[--itemCount] = true;
|
||||
}
|
||||
return items;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue