mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update xmltv downloading
This commit is contained in:
Luke Pulverenti
parent
caf2199d45
commit
ac3ca6cde8
56 changed files with 214 additions and 35707 deletions
|
|
@ -15,12 +15,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.47",
|
||||
"_release": "1.4.47",
|
||||
"version": "1.4.48",
|
||||
"_release": "1.4.48",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.47",
|
||||
"commit": "b57164cb8d8222bd7fc039bed2cfa01132ee2862"
|
||||
"tag": "1.4.48",
|
||||
"commit": "8377df0c30c2a05e1a344780f001a6103e70642c"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -43,6 +43,11 @@ button.actionSheetMenuItem {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.noflex .actionSheetItemText {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layout-tv button.actionSheetMenuItem {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
this.setAttribute('data-embybutton', 'true');
|
||||
|
||||
if (browser.safari) {
|
||||
if (browser.safari || browser.firefox || browser.noFlex) {
|
||||
this.classList.add('noflex');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@
|
|||
this.addEventListener('change', function () {
|
||||
this.dragging = false;
|
||||
updateValues(this, backgroundLower, backgroundUpper);
|
||||
updateBubble(this, sliderBubble);
|
||||
sliderBubble.classList.add('hide');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -183,17 +183,11 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper'], function (ap
|
|||
|
||||
function refresh(apiClient, itemId) {
|
||||
|
||||
apiClient.refreshItem(itemId, {
|
||||
|
||||
Recursive: true,
|
||||
ImageRefreshMode: 'FullRefresh',
|
||||
MetadataRefreshMode: 'FullRefresh',
|
||||
ReplaceAllImages: false,
|
||||
ReplaceAllMetadata: true
|
||||
});
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(globalize.translate('sharedcomponents#RefreshQueued'));
|
||||
require(['refreshDialog'], function (refreshDialog) {
|
||||
new refreshDialog({
|
||||
itemIds: [itemId],
|
||||
serverId: apiClient.serverInfo().Id
|
||||
}).show();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
148
dashboard-ui/bower_components/emby-webcomponents/refreshdialog/refreshdialog.js
vendored
Normal file
148
dashboard-ui/bower_components/emby-webcomponents/refreshdialog/refreshdialog.js
vendored
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
|
||||
|
||||
function parentWithClass(elem, className) {
|
||||
|
||||
while (!elem.classList || !elem.classList.contains(className)) {
|
||||
elem = elem.parentNode;
|
||||
|
||||
if (!elem) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function getEditorHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="dialogContent smoothScrollY">';
|
||||
html += '<div class="dialogContentInner centeredContent">';
|
||||
html += '<form style="margin:auto;">';
|
||||
|
||||
html += '<div class="fldSelectPlaylist selectContainer">';
|
||||
html += '<select is="emby-select" id="selectMetadataRefreshMode" label="' + globalize.translate('sharedcomponents#LabelRefreshMode') + '">';
|
||||
html += '<option value="missing">' + globalize.translate('sharedcomponents#SearchForMissingMetadata') + '</option>';
|
||||
html += '<option value="all" selected>' + globalize.translate('sharedcomponents#ReplaceAllMetadata') + '</option>';
|
||||
html += '</select>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<label class="checkboxContainer">';
|
||||
html += '<input type="checkbox" is="emby-checkbox" class="chkReplaceImages" />';
|
||||
html += '<span>' + globalize.translate('sharedcomponents#ReplaceExistingImages') + '</span>';
|
||||
html += '</label>';
|
||||
|
||||
html += '<div class="fieldDescription">';
|
||||
html += globalize.translate('sharedcomponents#RefreshDialogHelp');
|
||||
html += '</div>';
|
||||
|
||||
html += '<br />';
|
||||
html += '<div>';
|
||||
html += '<button is="emby-button" type="submit" class="raised btnSubmit block" autofocus>' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<input type="hidden" class="fldSelectedItemIds" />';
|
||||
|
||||
html += '</form>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
return function (options) {
|
||||
|
||||
var self = this;
|
||||
|
||||
function onSubmit(e) {
|
||||
|
||||
loading.show();
|
||||
|
||||
var dlg = parentWithClass(this, 'dialog');
|
||||
|
||||
var apiClient = connectionManager.getApiClient(options.serverId);
|
||||
|
||||
var replaceAllImages = dlg.querySelector('.chkReplaceImages').checked;
|
||||
var replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value == 'all';
|
||||
|
||||
options.itemIds.forEach(function (itemId) {
|
||||
apiClient.refreshItem(itemId, {
|
||||
|
||||
Recursive: true,
|
||||
ImageRefreshMode: 'FullRefresh',
|
||||
MetadataRefreshMode: 'FullRefresh',
|
||||
ReplaceAllImages: replaceAllImages,
|
||||
ReplaceAllMetadata: replaceAllMetadata
|
||||
});
|
||||
});
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(globalize.translate('sharedcomponents#RefreshQueued'));
|
||||
});
|
||||
|
||||
loading.hide();
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
function initEditor(content, items) {
|
||||
|
||||
content.querySelector('form').addEventListener('submit', onSubmit);
|
||||
}
|
||||
|
||||
self.show = function () {
|
||||
|
||||
var dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
} else {
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
var title = globalize.translate('sharedcomponents#RefreshMetadata');
|
||||
|
||||
html += '<div class="dialogHeader" style="margin:0 0 2em;">';
|
||||
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
||||
html += '<div class="dialogHeaderTitle">';
|
||||
html += title;
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += getEditorHtml();
|
||||
|
||||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
initEditor(dlg);
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
|
||||
}
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
dlg.addEventListener('close', resolve);
|
||||
dialogHelper.open(dlg);
|
||||
});
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
@ -80,5 +80,11 @@
|
|||
"MySubtitles": "My Subtitles",
|
||||
"MessageDownloadQueued": "Download queued.",
|
||||
"EditSubtitles": "Edit Subtitles",
|
||||
"UnlockGuide": "Unlock Guide"
|
||||
"UnlockGuide": "Unlock Guide",
|
||||
"RefreshMetadata": "Refresh Metadata",
|
||||
"ReplaceExistingImages": "Replace existing images",
|
||||
"ReplaceAllMetadata": "Replace all metadata",
|
||||
"SearchForMissingMetadata": "Search for missing metadata",
|
||||
"LabelRefreshMode": "Refresh mode:",
|
||||
"RefreshDialogHelp": "Metadata is refreshed based on settings and internet services that are enabled in the Emby Server dashboard."
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
{
|
||||
"name": "iron-list",
|
||||
"description": "Displays a virtual, 'infinite' scrolling list of items",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"list",
|
||||
"virtual-list"
|
||||
],
|
||||
"version": "1.3.2",
|
||||
"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.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.3.2",
|
||||
"commit": "5e6f1991f0b8f427b8432ce9538f3b100402545c"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-list.git",
|
||||
"_target": "^1.3.1",
|
||||
"_originalSource": "PolymerElements/iron-list"
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!-- 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 +0,0 @@
|
|||
bower_components
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<!--
|
||||
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!
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
{
|
||||
"name": "iron-list",
|
||||
"description": "Displays a virtual, 'infinite' scrolling list of items",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"list",
|
||||
"virtual-list"
|
||||
],
|
||||
"version": "1.3.2",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,302 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,191 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,287 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!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>
|
||||
1759
dashboard-ui/bower_components/iron-list/iron-list.html
vendored
1759
dashboard-ui/bower_components/iron-list/iron-list.html
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -1,201 +0,0 @@
|
|||
<!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() {
|
||||
container.data = buildDataSet(100);
|
||||
Polymer.dom.flush();
|
||||
assert.equal(list.firstVisibleIndex, 0);
|
||||
list.scroll(0, container.itemHeight * 10);
|
||||
list.fire('scroll');
|
||||
assert.equal(list.firstVisibleIndex, 10);
|
||||
list.scroll(0, container.itemHeight * 50);
|
||||
list.fire('scroll');
|
||||
assert.equal(list.firstVisibleIndex, 50);
|
||||
list.scrollToIndex(60);
|
||||
Polymer.dom.flush();
|
||||
assert.equal(list.firstVisibleIndex, 60);
|
||||
list.scrollToIndex(0);
|
||||
Polymer.dom.flush();
|
||||
assert.equal(list.firstVisibleIndex, 0);
|
||||
});
|
||||
|
||||
test('last visible index', function() {
|
||||
container.data = buildDataSet(1);
|
||||
container.itemHeight = 1000;
|
||||
Polymer.dom.flush();
|
||||
assert.equal(list.lastVisibleIndex, 0);
|
||||
container.data = buildDataSet(2);
|
||||
container.itemHeight = 50;
|
||||
Polymer.dom.flush();
|
||||
assert.equal(list.lastVisibleIndex, 1);
|
||||
container.data = buildDataSet(10);
|
||||
Polymer.dom.flush();
|
||||
list.scrollToIndex(8);
|
||||
Polymer.dom.flush();
|
||||
assert.equal(list.lastVisibleIndex, 9);
|
||||
container.itemHeight = 50;
|
||||
container.data = buildDataSet(100);
|
||||
Polymer.dom.flush();
|
||||
list.scroll(0, 100);
|
||||
list.fire('scroll');
|
||||
assert.equal(list.lastVisibleIndex, ((list._scrollTop + container.listHeight) / container.itemHeight) - 1);
|
||||
});
|
||||
|
||||
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('scroll to top', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
Polymer.dom.flush();
|
||||
list.scrollToIndex(99);
|
||||
Polymer.dom.flush();
|
||||
list.scroll(0, 0);
|
||||
setTimeout(function() {
|
||||
assert.equal(list._scrollTop, 0, 'scrollTop = 0');
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
test('scroll to a given scrollTop', function(done) {
|
||||
list.items = buildDataSet(100);
|
||||
Polymer.dom.flush();
|
||||
list.scrollToIndex(99);
|
||||
Polymer.dom.flush();
|
||||
list.scroll(0, 500);
|
||||
setTimeout(function() {
|
||||
assert.equal(list._scrollTop, 500, 'scrollTop = 500');
|
||||
done();
|
||||
}, 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>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,292 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,352 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,205 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,296 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
{
|
||||
"name": "paper-toast",
|
||||
"version": "1.0.0",
|
||||
"description": "A material design notification toast",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"toast",
|
||||
"notification"
|
||||
],
|
||||
"main": "paper-toast.html",
|
||||
"dependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"iron-a11y-announcer": "polymerelements/iron-a11y-announcer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/paper-toast",
|
||||
"_release": "1.0.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.0",
|
||||
"commit": "71e6c327f7aafe9c71010c83d4c4571f63990072"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-toast.git",
|
||||
"_target": "~1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-toast",
|
||||
"_direct": true
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
bower_components
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
{
|
||||
"name": "paper-toast",
|
||||
"version": "1.0.0",
|
||||
"description": "A material design notification toast",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"toast",
|
||||
"notification"
|
||||
],
|
||||
"main": "paper-toast.html",
|
||||
"dependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"iron-a11y-announcer": "polymerelements/iron-a11y-announcer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<!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.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>paper-toast</title>
|
||||
|
||||
<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="../paper-toast.html">
|
||||
<link rel="import" href="../../paper-button/paper-button.html" >
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
paper-button {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<paper-button raised onclick="document.querySelector('#toast1').show()">Discard Draft</paper-button>
|
||||
|
||||
<paper-button raised onclick="document.querySelector('#toast2').show()">Get Messages</paper-button>
|
||||
|
||||
<paper-toast id="toast1" text="Your draft has been discarded."></paper-toast>
|
||||
|
||||
<paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
|
||||
<span role="button" tabindex="0" style="color: #eeff41;margin: 10px" onclick="console.log('RETRY')">Retry</span>
|
||||
</paper-toast>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
|
||||
<g id="background" display="none">
|
||||
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
|
||||
</g>
|
||||
<g id="label">
|
||||
</g>
|
||||
<g id="art">
|
||||
<path d="M164,114H13V88h151V114z M15,112h147V90H15V112z"/>
|
||||
<rect x="26" y="100" width="79" height="2"/>
|
||||
<rect x="135" y="100" width="16" height="2"/>
|
||||
<g id="ic_x5F_add_x0D_">
|
||||
</g>
|
||||
</g>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 785 B |
|
|
@ -1,26 +0,0 @@
|
|||
<!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, 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>
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
<!--
|
||||
@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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
|
||||
|
||||
<!--
|
||||
`paper-toast` provides a subtle notification toast.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-toast
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
-->
|
||||
<dom-module id="paper-toast">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
|
||||
background: #323232;
|
||||
color: #f1f1f1;
|
||||
min-height: 48px;
|
||||
min-width: 288px;
|
||||
padding: 16px 24px 12px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
border-radius: 2px;
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
|
||||
-webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
|
||||
transition: visibility 0.3s, transform 0.3s;
|
||||
|
||||
-webkit-transform: translateY(100px);
|
||||
transform: translateY(100px);
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
:host(.capsule) {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
:host(.fit-bottom) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:host(.paper-toast-open){
|
||||
visibility: visible;
|
||||
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span id="label">{{text}}</span>
|
||||
<content></content>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
var PaperToast = Polymer({
|
||||
is: 'paper-toast',
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The duration in milliseconds to show the toast.
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 3000
|
||||
},
|
||||
|
||||
/**
|
||||
* The text to display in the toast.
|
||||
*/
|
||||
text: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the toast is currently visible.
|
||||
*/
|
||||
visible: {
|
||||
type: Boolean,
|
||||
readOnly: true,
|
||||
value: false,
|
||||
observer: '_visibleChanged'
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
Polymer.IronA11yAnnouncer.requestAvailability();
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.async(function() {
|
||||
this.hide();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the toast.
|
||||
* @method show
|
||||
*/
|
||||
show: function() {
|
||||
if (PaperToast.currentToast) {
|
||||
PaperToast.currentToast.hide();
|
||||
}
|
||||
PaperToast.currentToast = this;
|
||||
this.removeAttribute('aria-hidden');
|
||||
this._setVisible(true);
|
||||
this.fire('iron-announce', {
|
||||
text: this.text
|
||||
});
|
||||
this.debounce('hide', this.hide, this.duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the toast
|
||||
*/
|
||||
hide: function() {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
this._setVisible(false);
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the opened state of the toast.
|
||||
* @method toggle
|
||||
*/
|
||||
toggle: function() {
|
||||
if (!this.visible) {
|
||||
this.show();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
_visibleChanged: function(visible) {
|
||||
this.toggleClass('paper-toast-open', visible);
|
||||
}
|
||||
});
|
||||
|
||||
PaperToast.currentToast = null;
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
|
@ -166,10 +166,10 @@
|
|||
});
|
||||
|
||||
if (images.length) {
|
||||
$('#backdropsContainer', page).show();
|
||||
page.querySelector('#backdropsContainer', page).classList.remove('hide');
|
||||
renderImages(page, item, images, imageProviders, page.querySelector('#backdrops'));
|
||||
} else {
|
||||
$('#backdropsContainer', page).hide();
|
||||
page.querySelector('#backdropsContainer', page).classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -183,10 +183,10 @@
|
|||
});
|
||||
|
||||
if (images.length) {
|
||||
$('#screenshotsContainer', page).show();
|
||||
page.querySelector('#screenshotsContainer', page).classList.remove('hide');
|
||||
renderImages(page, item, images, imageProviders, page.querySelector('#screenshots'));
|
||||
} else {
|
||||
$('#screenshotsContainer', page).hide();
|
||||
page.querySelector('#screenshotsContainer', page).classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -246,7 +246,8 @@
|
|||
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {
|
||||
|
||||
var dlg = dialogHelper.createDialog({
|
||||
size: 'fullscreen-border'
|
||||
size: 'fullscreen-border',
|
||||
removeOnClose: true
|
||||
});
|
||||
|
||||
var theme = options.theme || 'b';
|
||||
|
|
@ -271,14 +272,14 @@
|
|||
initEditor(dlg, options);
|
||||
|
||||
// Has to be assigned a z-index after the call to .open()
|
||||
$(dlg).on('close', onDialogClosed);
|
||||
dlg.addEventListener('close', onDialogClosed);
|
||||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
var editorContent = dlg.querySelector('.editorContent');
|
||||
reload(editorContent, item);
|
||||
|
||||
$('.btnCloseDialog', dlg).on('click', function () {
|
||||
dlg.querySelector('.btnCloseDialog').addEventListener('click', function () {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
|
@ -290,7 +291,6 @@
|
|||
|
||||
function onDialogClosed() {
|
||||
|
||||
$(this).remove();
|
||||
Dashboard.hideLoadingMsg();
|
||||
currentDeferred.resolveWith(null, [hasChanges]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<br />
|
||||
</div>
|
||||
|
||||
<div id="backdropsContainer" style="display: none;">
|
||||
<div id="backdropsContainer" class="hide">
|
||||
<div>
|
||||
<h1 style="display:inline-block;vertical-align:middle;">${HeaderBackdrops}</h1>
|
||||
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Backdrop"></paper-fab>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<br />
|
||||
</div>
|
||||
|
||||
<div id="screenshotsContainer" style="display: none;">
|
||||
<div id="screenshotsContainer" class="hide">
|
||||
<div>
|
||||
<h1 style="display:inline-block;vertical-align:middle;">${Screenshots}</h1>
|
||||
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Screenshot"></paper-fab>
|
||||
|
|
|
|||
|
|
@ -269,16 +269,11 @@
|
|||
|
||||
function showRefreshMenu(context, button) {
|
||||
|
||||
ApiClient.refreshItem(currentItem.Id, {
|
||||
Recursive: true,
|
||||
ImageRefreshMode: 'FullRefresh',
|
||||
MetadataRefreshMode: 'FullRefresh',
|
||||
ReplaceAllImages: false,
|
||||
ReplaceAllMetadata: true
|
||||
});
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRefreshQueued'));
|
||||
require(['refreshDialog'], function (refreshDialog) {
|
||||
new refreshDialog({
|
||||
itemIds: [currentItem.Id],
|
||||
serverId: ApiClient.serverInfo().Id
|
||||
}).show();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
text-align: left;
|
||||
position: relative;
|
||||
contain: style;
|
||||
|
||||
/*box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);*/
|
||||
}
|
||||
|
||||
/*.itemsContainer .card {
|
||||
|
|
@ -54,7 +56,7 @@
|
|||
}
|
||||
|
||||
.cardBox {
|
||||
margin: 5px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
|
|
@ -68,18 +70,20 @@
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 1em .5em .5em 1em;
|
||||
padding: 1em .25em .5em 1em;
|
||||
}
|
||||
|
||||
.cardOverlayMoreButton, .cardOverlayPlayButton {
|
||||
color: #333 !important;
|
||||
background-color: rgba(210,210,210,.9) !important;
|
||||
color: #fff !important;
|
||||
background-color: rgba(0,0,0,.7) !important;
|
||||
border-radius: 500px;
|
||||
padding: 5px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.cardOverlayMoreButton:hover, .cardOverlayPlayButton:hover {
|
||||
background-color: rgba(0,0,0,.9) !important;
|
||||
transition: background-color .5s ease-out;
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
|
|
@ -270,6 +274,7 @@
|
|||
background-position: center bottom;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cardImage canvas {
|
||||
|
|
|
|||
|
|
@ -186,6 +186,7 @@
|
|||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
padding: 0 0 0;
|
||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.libraryViewNav.bottom {
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@ html {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
html.smallerDefault {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll !important;
|
||||
/* This is needed to prevent a horizontal scrollbar while neon-animated-pages are animating. */
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.libraryViewNav {
|
||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media all and (min-width: 300px) {
|
||||
|
||||
.libraryViewNav {
|
||||
|
|
|
|||
|
|
@ -743,23 +743,6 @@
|
|||
return false;
|
||||
},
|
||||
|
||||
refreshItem: function (itemId) {
|
||||
|
||||
ApiClient.refreshItem(itemId, {
|
||||
|
||||
Recursive: true,
|
||||
ImageRefreshMode: 'FullRefresh',
|
||||
MetadataRefreshMode: 'FullRefresh',
|
||||
ReplaceAllImages: false,
|
||||
ReplaceAllMetadata: true
|
||||
|
||||
});
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRefreshQueued'));
|
||||
});
|
||||
},
|
||||
|
||||
deleteItems: function (itemIds) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
|
@ -980,17 +963,11 @@
|
|||
LibraryBrowser.identifyItem(itemId);
|
||||
break;
|
||||
case 'refresh':
|
||||
ApiClient.refreshItem(itemId, {
|
||||
|
||||
Recursive: true,
|
||||
ImageRefreshMode: 'FullRefresh',
|
||||
MetadataRefreshMode: 'FullRefresh',
|
||||
ReplaceAllImages: false,
|
||||
ReplaceAllMetadata: true
|
||||
});
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRefreshQueued'));
|
||||
require(['refreshDialog'], function (refreshDialog) {
|
||||
new refreshDialog({
|
||||
itemIds: [itemId],
|
||||
serverId: serverId
|
||||
}).show();
|
||||
});
|
||||
break;
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -544,17 +544,11 @@
|
|||
}
|
||||
break;
|
||||
case 'refresh':
|
||||
ApiClient.refreshItem(itemId, {
|
||||
|
||||
Recursive: true,
|
||||
ImageRefreshMode: 'FullRefresh',
|
||||
MetadataRefreshMode: 'FullRefresh',
|
||||
ReplaceAllImages: false,
|
||||
ReplaceAllMetadata: true
|
||||
});
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRefreshQueued'));
|
||||
require(['refreshDialog'], function (refreshDialog) {
|
||||
new refreshDialog({
|
||||
itemIds: [itemId],
|
||||
serverId: serverId
|
||||
}).show();
|
||||
});
|
||||
break;
|
||||
case 'instantmix':
|
||||
|
|
@ -1317,22 +1311,11 @@
|
|||
hideSelections();
|
||||
break;
|
||||
case 'refresh':
|
||||
items.map(function (itemId) {
|
||||
|
||||
// TODO: Create an endpoint to do this in bulk
|
||||
ApiClient.refreshItem(itemId, {
|
||||
|
||||
Recursive: true,
|
||||
ImageRefreshMode: 'FullRefresh',
|
||||
MetadataRefreshMode: 'FullRefresh',
|
||||
ReplaceAllImages: false,
|
||||
ReplaceAllMetadata: true
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRefreshQueued'));
|
||||
require(['refreshDialog'], function (refreshDialog) {
|
||||
new refreshDialog({
|
||||
itemIds: items,
|
||||
serverId: serverId
|
||||
}).show();
|
||||
});
|
||||
hideSelections();
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1660,10 +1660,6 @@ var AppInfo = {};
|
|||
|
||||
var elem = document.documentElement;
|
||||
|
||||
if (!browser.android && !browser.mobile) {
|
||||
elem.classList.add('smallerDefault');
|
||||
}
|
||||
|
||||
if (AppInfo.isTouchPreferred) {
|
||||
elem.classList.add('touch');
|
||||
}
|
||||
|
|
@ -1808,6 +1804,7 @@ var AppInfo = {};
|
|||
define("recordingEditor", [embyWebComponentsBowerPath + "/recordingcreator/recordingeditor"], returnFirstDependency);
|
||||
define("subtitleEditor", [embyWebComponentsBowerPath + "/subtitleeditor/subtitleeditor"], returnFirstDependency);
|
||||
define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
|
||||
define("refreshDialog", [embyWebComponentsBowerPath + "/refreshdialog/refreshdialog"], returnFirstDependency);
|
||||
define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
|
||||
define("fetchHelper", [embyWebComponentsBowerPath + "/fetchhelper"], returnFirstDependency);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue