mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
remove unneeded components
This commit is contained in:
parent
aa0ed32bb7
commit
471acf85af
@ -1,34 +0,0 @@
|
||||
{
|
||||
"name": "alameda",
|
||||
"version": "1.0.0",
|
||||
"ignore": [
|
||||
".gitignore",
|
||||
".npmignore",
|
||||
"node_modules",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tests",
|
||||
"tests-requirejs",
|
||||
"copyrequirejstests.sh",
|
||||
"testBaseUrl.js"
|
||||
],
|
||||
"homepage": "https://github.com/requirejs/alameda",
|
||||
"authors": [
|
||||
"jrburke.com"
|
||||
],
|
||||
"description": "AMD loader, like requirejs, but with promises and for modern browsers",
|
||||
"main": "alameda.js",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"_release": "1.0.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.0.0",
|
||||
"commit": "f09e80862f0e40b4018531f360f5336c5ca8eaa2"
|
||||
},
|
||||
"_source": "git://github.com/requirejs/alameda.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "alameda",
|
||||
"_direct": true
|
||||
}
|
45
dashboard-ui/bower_components/alameda/LICENSE
vendored
45
dashboard-ui/bower_components/alameda/LICENSE
vendored
@ -1,45 +0,0 @@
|
||||
Copyright jQuery Foundation and other contributors, https://jquery.org/
|
||||
|
||||
This software consists of voluntary contributions made by many
|
||||
individuals. For exact contribution history, see the revision history
|
||||
available at https://github.com/requirejs/alameda
|
||||
|
||||
The following license applies to all parts of this software except as
|
||||
documented below:
|
||||
|
||||
====
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
====
|
||||
|
||||
Copyright and related rights for sample code are waived via CC0. Sample
|
||||
code is defined as all source code displayed within the prose of the
|
||||
documentation.
|
||||
|
||||
CC0: http://creativecommons.org/publicdomain/zero/1.0/
|
||||
|
||||
====
|
||||
|
||||
Files located in the node_modules directory, and certain utilities used
|
||||
to build or test the software in the tests and tests-requirejs directories, are
|
||||
externally maintained libraries used by this software which have their own
|
||||
licenses; we recommend you read them, as their terms may differ from the
|
||||
terms above.
|
1253
dashboard-ui/bower_components/alameda/alameda.js
vendored
1253
dashboard-ui/bower_components/alameda/alameda.js
vendored
File diff suppressed because it is too large
Load Diff
24
dashboard-ui/bower_components/alameda/bower.json
vendored
24
dashboard-ui/bower_components/alameda/bower.json
vendored
@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "alameda",
|
||||
"version": "1.0.0",
|
||||
"ignore": [
|
||||
".gitignore",
|
||||
".npmignore",
|
||||
"node_modules",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tests",
|
||||
"tests-requirejs",
|
||||
"copyrequirejstests.sh",
|
||||
"testBaseUrl.js"
|
||||
],
|
||||
"homepage": "https://github.com/requirejs/alameda",
|
||||
"authors": [
|
||||
"jrburke.com"
|
||||
],
|
||||
"description": "AMD loader, like requirejs, but with promises and for modern browsers",
|
||||
"main": "alameda.js",
|
||||
"license": [
|
||||
"MIT"
|
||||
]
|
||||
}
|
@ -1,8 +0,0 @@
|
||||
#!/bin/sh
|
||||
rm alameda.min.js.gz
|
||||
ls -la alameda.js
|
||||
uglifyjs -c -m -o alameda.min.js alameda.js
|
||||
ls -la alameda.min.js
|
||||
gzip alameda.min.js
|
||||
ls -la alameda.min.js.gz
|
||||
|
@ -1,47 +0,0 @@
|
||||
<script>
|
||||
|
||||
require(['imageFetcher'], function (imageFetcher) {
|
||||
window.ImageFetcherLazyloadImage = imageFetcher;
|
||||
});
|
||||
|
||||
/**
|
||||
* <lazyload-image>
|
||||
* HTMLImageElement extension for lazy loading.
|
||||
* http://github.com/1000ch/lazyload-image
|
||||
*
|
||||
* Copyright 1000ch
|
||||
* licensed under the MIT license.
|
||||
*/
|
||||
window.LazyloadImage = (function () {
|
||||
'use strict';
|
||||
|
||||
var FALLBACK_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==';
|
||||
|
||||
// create prototype from HTMLImageElement
|
||||
var LazyloadImagePrototype = Object.create(HTMLImageElement.prototype);
|
||||
|
||||
// lifecycle callbacks
|
||||
//LazyloadImagePrototype.createdCallback = function () {
|
||||
|
||||
//};
|
||||
|
||||
//LazyloadImagePrototype.attachedCallback = function () {
|
||||
|
||||
// var original = this.currentSrc || this.src;
|
||||
|
||||
// if (original && window.ImageFetcherLazyloadImage) {
|
||||
// //console.log(original);
|
||||
// this.src = FALLBACK_IMAGE;
|
||||
// console.log('loading ' + original);
|
||||
// ImageFetcherLazyloadImage.loadImage(this, original);
|
||||
// }
|
||||
//};
|
||||
|
||||
return document.registerElement('lazyload-image', {
|
||||
prototype: LazyloadImagePrototype,
|
||||
extends: 'img'
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.4.0",
|
||||
"description": "An unstyled element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer"
|
||||
],
|
||||
"main": "iron-dropdown.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-dropdown"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-dropdown",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0",
|
||||
"iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
|
||||
"iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
|
||||
"neon-animation": "polymerelements/neon-animation#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"_release": "1.4.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.4.0",
|
||||
"commit": "8e14da0aaeb791983ee4b254890c7263644f7851"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-dropdown.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-dropdown"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-dropdown/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: Nd7sbgkYVekuQRB4K3svNCL3veA6t6aGopNP2FUxlJvQuzRV1vKV67angPvMUAFelEA7/rTzrFPBMfNbsz9C2wInLLLPux4wEk1MQX+2KYZVeXKMHjgl8iQKMXnodaL7XXwBPg0L7053TWtYkIt8wZ/vN0JGPQFKhlQkSrduztkPCJQfkFsMPJ7SudPG3Ld0UPBVxo8TwH/d44p8VhLGiI0oEWw3GnGZZ1T7RJLDAVBwj1BiVHAOaS0SSeOR3ngpZyXbk8OItgzw4o/bbAt2yrHMfwymBy0Xv9v3G0QLFJnMi/gE2lWnN4+IttUPI8gVyr1TuiTgtFxdwteLO3R5iFe+qlQjq0VGssmAHcPwtLhvrT4wEkGMc8ZeyW11z+GdkIw4XHGACWj+9Jz9f19mJd9xU3fkJ+f5mFiB8vEkzjsUI9pswgd3RoHt2WewcVdHnCED2wRdQCw9H34dX7d2ieWKPl/pv+EKZOgEJJ8UNZMyKnj57Y25WRrTpIQBt6p9uVv5MsiZQm7Sd1pYQnJKPQ+BxvvL5fsoT1YkFSjyz9gwijtftXhfL8KLB6i04V3mra3f9d5hc20wAOt+ad+mTOkaM/aGxE/I3Ko13BceMvRSNzuz+N2WE6FEJj1NuOCW/AeSh5/6n9nnlDeu7Nu7VeM9kjk4dyBGNRDWLNcSCEk=
|
||||
- secure: aFsYKL6Sw8/r57wzj3pnzEwBE1mnTajJasHAbXgQMd336S2Sq/f39DCNTXgKBA4AKZGvWKe8w9nzaocQoMa4l9bLWEBJMCMPQFawOhTkuEjsLjpU3g74b46/EhjBP5zixR32xoyF5o9FTzC6UyrDjt2XpKwIQJYxaEfoyIW1vTPdoasWdaG5rXvWFTsmXtaMDpCKFH9aQ1DHn9Sbi9NZlR4izdULsbv9GZwg53xvuH4xYEkGtB29KKy04uK1nJ+9SmRWTAnu4Q/ivYWlbwBArjiYTTi0wclvDNvT1iaFNAaeK2pJea8CnoyJJ0pg9NcuzZtStGUvP00kGUpJQ4lqkr+gBCHDPYtoZ17XCz59cg6LrhG1q//vPi7Yz0xW51GHuwmcVs+PsjmWaRuO/1UFreDCQYf+GU4I1pQZf2q1R4m8noe4i5CcFXLKTrC4udBzPmzVB4As2LsxRc3HCIXmhaMxI8MJwdkQBA22u4vCwU2xpqBawJocj0Gvbeme6wG99PW7+XSkijQDk2cTJ5/CJtY22nAECvn4tve3OVvybSTjQ1yipLxJm/dtjgEXFWtknFZr++tId88wPd3EBtrwEhliD3zD/TyLPO2RPZGuI0i6oD3O89P5d8qp66T/eByDr1IEm0+FIQjgiCEMbhmaIuUKGG2GCfwPglI3uR0kbg0=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run 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,39 +0,0 @@
|
||||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.4.0",
|
||||
"description": "An unstyled element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer"
|
||||
],
|
||||
"main": "iron-dropdown.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-dropdown"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-dropdown",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0",
|
||||
"iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
|
||||
"iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
|
||||
"neon-animation": "polymerelements/neon-animation#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,36 +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="../../neon-animation/neon-animation-behavior.html">
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'expand-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
var height = node.getBoundingClientRect().height;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [{
|
||||
height: (height / 2) + 'px'
|
||||
}, {
|
||||
height: height + 'px'
|
||||
}], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
});
|
||||
</script>
|
@ -1,160 +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>iron-dropdown</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../iron-image/iron-image.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="x-select.html">
|
||||
<style>
|
||||
|
||||
.dropdown-content {
|
||||
background-color: white;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 6px #ccc;
|
||||
}
|
||||
|
||||
.random-content {
|
||||
padding: 1.5em 2em;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #eee;
|
||||
padding: 1em;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li:not(:last-of-type) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
iron-image {
|
||||
padding: 1em;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 6px #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<template is="dom-bind" id="Demo">
|
||||
<div class="vertical-section vertical-section-container ">
|
||||
<h1>iron-dropdown</h1>
|
||||
<p>Examples of vanilla elements.</p>
|
||||
<div>
|
||||
<x-select>
|
||||
<button class="dropdown-trigger">Basic</button>
|
||||
<div class="dropdown-content random-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</x-select>
|
||||
<x-select>
|
||||
<button class="dropdown-trigger">Overflowing</button>
|
||||
<div class="dropdown-content random-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
|
||||
</div>
|
||||
</x-select>
|
||||
<x-select vertical-align="bottom">
|
||||
<button class="dropdown-trigger">Bottom-left Aligned</button>
|
||||
<div class="dropdown-content random-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</x-select>
|
||||
<x-select horizontal-align="right" vertical-align="top">
|
||||
<button class="dropdown-trigger">Top-right Aligned</button>
|
||||
<div class="dropdown-content random-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</x-select>
|
||||
<x-select horizontal-align="left" vertical-align="top">
|
||||
<button class="dropdown-trigger"> Content</button>
|
||||
<iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
|
||||
</x-select>
|
||||
<x-select horizontal-align="right" vertical-align="top">
|
||||
<button class="dropdown-trigger">Unordered list</button>
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</x-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Demo.dinosaurs = [
|
||||
'allosaurus',
|
||||
'brontosaurus',
|
||||
'carcharodontosaurus',
|
||||
'diplodocus',
|
||||
'ekrixinatosaurus',
|
||||
'fukuiraptor',
|
||||
'gallimimus',
|
||||
'hadrosaurus',
|
||||
'iguanodon',
|
||||
'jainosaurus',
|
||||
'kritosaurus',
|
||||
'liaoceratops',
|
||||
'megalosaurus',
|
||||
'nemegtosaurus',
|
||||
'ornithomimus',
|
||||
'protoceratops',
|
||||
'quetecsaurus',
|
||||
'rajasaurus',
|
||||
'stegosaurus',
|
||||
'triceratops',
|
||||
'utahraptor',
|
||||
'vulcanodon',
|
||||
'wannanosaurus',
|
||||
'xenoceratops',
|
||||
'yandusaurus',
|
||||
'zephyrosaurus'
|
||||
];
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,80 +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="../iron-dropdown.html">
|
||||
<link rel="import" href="../../neon-animation/neon-animations.html">
|
||||
<link rel="import" href="grow-height-animation.html">
|
||||
|
||||
<dom-module id="x-select">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div on-tap="open">
|
||||
<content select=".dropdown-trigger"></content>
|
||||
</div>
|
||||
<iron-dropdown id="dropdown"
|
||||
vertical-align="[[verticalAlign]]"
|
||||
horizontal-align="[[horizontalAlign]]"
|
||||
disabled="[[disabled]]"
|
||||
open-animation-config="[[openAnimationConfig]]"
|
||||
close-animation-config="[[closeAnimationConfig]]">
|
||||
<content select=".dropdown-content"></content>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-select',
|
||||
|
||||
properties: {
|
||||
verticalAlign: String,
|
||||
horizontalAlign: String,
|
||||
disabled: Boolean,
|
||||
openAnimationConfig: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [{
|
||||
name: 'fade-in-animation',
|
||||
timing: {
|
||||
delay: 150,
|
||||
duration: 50
|
||||
}
|
||||
}, {
|
||||
name: 'expand-animation',
|
||||
timing: {
|
||||
delay: 150,
|
||||
duration: 200
|
||||
}
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
closeAnimationConfig: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [{
|
||||
name: 'fade-out-animation',
|
||||
timing: {
|
||||
duration: 200
|
||||
}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
open: function() {
|
||||
this.$.dropdown.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
@ -1,24 +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>
|
||||
|
||||
<title>iron-dropdown</title>
|
||||
<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,233 +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="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* The IronDropdownScrollManager is intended to provide a central source
|
||||
* of authority and control over which elements in a document are currently
|
||||
* allowed to scroll.
|
||||
*/
|
||||
|
||||
Polymer.IronDropdownScrollManager = {
|
||||
|
||||
/**
|
||||
* The current element that defines the DOM boundaries of the
|
||||
* scroll lock. This is always the most recently locking element.
|
||||
*/
|
||||
get currentLockingElement() {
|
||||
return this._lockingElements[this._lockingElements.length - 1];
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns true if the provided element is "scroll locked," which is to
|
||||
* say that it cannot be scrolled via pointer or keyboard interactions.
|
||||
*
|
||||
* @param {HTMLElement} element An HTML element instance which may or may
|
||||
* not be scroll locked.
|
||||
*/
|
||||
elementIsScrollLocked: function(element) {
|
||||
var currentLockingElement = this.currentLockingElement;
|
||||
|
||||
if (currentLockingElement === undefined)
|
||||
return false;
|
||||
|
||||
var scrollLocked;
|
||||
|
||||
if (this._hasCachedLockedElement(element)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this._hasCachedUnlockedElement(element)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
scrollLocked = !!currentLockingElement &&
|
||||
currentLockingElement !== element &&
|
||||
!this._composedTreeContains(currentLockingElement, element);
|
||||
|
||||
if (scrollLocked) {
|
||||
this._lockedElementCache.push(element);
|
||||
} else {
|
||||
this._unlockedElementCache.push(element);
|
||||
}
|
||||
|
||||
return scrollLocked;
|
||||
},
|
||||
|
||||
/**
|
||||
* Push an element onto the current scroll lock stack. The most recently
|
||||
* pushed element and its children will be considered scrollable. All
|
||||
* other elements will not be scrollable.
|
||||
*
|
||||
* Scroll locking is implemented as a stack so that cases such as
|
||||
* dropdowns within dropdowns are handled well.
|
||||
*
|
||||
* @param {HTMLElement} element The element that should lock scroll.
|
||||
*/
|
||||
pushScrollLock: function(element) {
|
||||
// Prevent pushing the same element twice
|
||||
if (this._lockingElements.indexOf(element) >= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._lockingElements.length === 0) {
|
||||
this._lockScrollInteractions();
|
||||
}
|
||||
|
||||
this._lockingElements.push(element);
|
||||
|
||||
this._lockedElementCache = [];
|
||||
this._unlockedElementCache = [];
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove an element from the scroll lock stack. The element being
|
||||
* removed does not need to be the most recently pushed element. However,
|
||||
* the scroll lock constraints only change when the most recently pushed
|
||||
* element is removed.
|
||||
*
|
||||
* @param {HTMLElement} element The element to remove from the scroll
|
||||
* lock stack.
|
||||
*/
|
||||
removeScrollLock: function(element) {
|
||||
var index = this._lockingElements.indexOf(element);
|
||||
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._lockingElements.splice(index, 1);
|
||||
|
||||
this._lockedElementCache = [];
|
||||
this._unlockedElementCache = [];
|
||||
|
||||
if (this._lockingElements.length === 0) {
|
||||
this._unlockScrollInteractions();
|
||||
}
|
||||
},
|
||||
|
||||
_lockingElements: [],
|
||||
|
||||
_lockedElementCache: null,
|
||||
|
||||
_unlockedElementCache: null,
|
||||
|
||||
_originalBodyStyles: {},
|
||||
|
||||
_isScrollingKeypress: function(event) {
|
||||
return Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(
|
||||
event, 'pageup pagedown home end up left down right');
|
||||
},
|
||||
|
||||
_hasCachedLockedElement: function(element) {
|
||||
return this._lockedElementCache.indexOf(element) > -1;
|
||||
},
|
||||
|
||||
_hasCachedUnlockedElement: function(element) {
|
||||
return this._unlockedElementCache.indexOf(element) > -1;
|
||||
},
|
||||
|
||||
_composedTreeContains: function(element, child) {
|
||||
// NOTE(cdata): This method iterates over content elements and their
|
||||
// corresponding distributed nodes to implement a contains-like method
|
||||
// that pierces through the composed tree of the ShadowDOM. Results of
|
||||
// this operation are cached (elsewhere) on a per-scroll-lock basis, to
|
||||
// guard against potentially expensive lookups happening repeatedly as
|
||||
// a user scrolls / touchmoves.
|
||||
var contentElements;
|
||||
var distributedNodes;
|
||||
var contentIndex;
|
||||
var nodeIndex;
|
||||
|
||||
if (element.contains(child)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
contentElements = Polymer.dom(element).querySelectorAll('content');
|
||||
|
||||
for (contentIndex = 0; contentIndex < contentElements.length; ++contentIndex) {
|
||||
|
||||
distributedNodes = Polymer.dom(contentElements[contentIndex]).getDistributedNodes();
|
||||
|
||||
for (nodeIndex = 0; nodeIndex < distributedNodes.length; ++nodeIndex) {
|
||||
|
||||
if (this._composedTreeContains(distributedNodes[nodeIndex], child)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
_scrollInteractionHandler: function(event) {
|
||||
var scrolledElement =
|
||||
/** @type {HTMLElement} */(Polymer.dom(event).rootTarget);
|
||||
if (Polymer
|
||||
.IronDropdownScrollManager
|
||||
.elementIsScrollLocked(scrolledElement)) {
|
||||
if (event.type === 'keydown' &&
|
||||
!Polymer.IronDropdownScrollManager._isScrollingKeypress(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
_lockScrollInteractions: function() {
|
||||
// Memoize body inline styles:
|
||||
this._originalBodyStyles.overflow = document.body.style.overflow;
|
||||
this._originalBodyStyles.overflowX = document.body.style.overflowX;
|
||||
this._originalBodyStyles.overflowY = document.body.style.overflowY;
|
||||
|
||||
// Disable overflow scrolling on body:
|
||||
// TODO(cdata): It is technically not sufficient to hide overflow on
|
||||
// body alone. A better solution might be to traverse all ancestors of
|
||||
// the current scroll locking element and hide overflow on them. This
|
||||
// becomes expensive, though, as it would have to be redone every time
|
||||
// a new scroll locking element is added.
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.overflowX = 'hidden';
|
||||
document.body.style.overflowY = 'hidden';
|
||||
|
||||
// Modern `wheel` event for mouse wheel scrolling:
|
||||
document.addEventListener('wheel', this._scrollInteractionHandler, true);
|
||||
// Older, non-standard `mousewheel` event for some FF:
|
||||
document.addEventListener('mousewheel', this._scrollInteractionHandler, true);
|
||||
// IE:
|
||||
document.addEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
|
||||
// Mobile devices can scroll on touch move:
|
||||
document.addEventListener('touchmove', this._scrollInteractionHandler, true);
|
||||
// Capture keydown to prevent scrolling keys (pageup, pagedown etc.)
|
||||
document.addEventListener('keydown', this._scrollInteractionHandler, true);
|
||||
},
|
||||
|
||||
_unlockScrollInteractions: function() {
|
||||
document.body.style.overflow = this._originalBodyStyles.overflow;
|
||||
document.body.style.overflowX = this._originalBodyStyles.overflowX;
|
||||
document.body.style.overflowY = this._originalBodyStyles.overflowY;
|
||||
|
||||
document.removeEventListener('wheel', this._scrollInteractionHandler, true);
|
||||
document.removeEventListener('mousewheel', this._scrollInteractionHandler, true);
|
||||
document.removeEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
|
||||
document.removeEventListener('touchmove', this._scrollInteractionHandler, true);
|
||||
document.removeEventListener('keydown', this._scrollInteractionHandler, true);
|
||||
}
|
||||
};
|
||||
})();
|
||||
</script>
|
@ -1,316 +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="../iron-resizable-behavior/iron-resizable-behavior.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
||||
<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
|
||||
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
|
||||
<link rel="import" href="../neon-animation/animations/opaque-animation.html">
|
||||
<link rel="import" href="iron-dropdown-scroll-manager.html">
|
||||
|
||||
<!--
|
||||
`<iron-dropdown>` is a generalized element that is useful when you have
|
||||
hidden content (`.dropdown-content`) that is revealed due to some change in
|
||||
state that should cause it to do so.
|
||||
|
||||
Note that this is a low-level element intended to be used as part of other
|
||||
composite elements that cause dropdowns to be revealed.
|
||||
|
||||
Examples of elements that might be implemented using an `iron-dropdown`
|
||||
include comboboxes, menubuttons, selects. The list goes on.
|
||||
|
||||
The `<iron-dropdown>` element exposes attributes that allow the position
|
||||
of the `.dropdown-content` relative to the `.dropdown-trigger` to be
|
||||
configured.
|
||||
|
||||
<iron-dropdown horizontal-align="right" vertical-align="top">
|
||||
<div class="dropdown-content">Hello!</div>
|
||||
</iron-dropdown>
|
||||
|
||||
In the above example, the `<div>` with class `.dropdown-content` will be
|
||||
hidden until the dropdown element has `opened` set to true, or when the `open`
|
||||
method is called on the element.
|
||||
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="iron-dropdown">
|
||||
<style>
|
||||
:host {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#contentWrapper ::content > * {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#contentWrapper.animating ::content > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="contentWrapper">
|
||||
<content id="content" select=".dropdown-content"></content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer({
|
||||
is: 'iron-dropdown',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronA11yKeysBehavior,
|
||||
Polymer.IronOverlayBehavior,
|
||||
Polymer.NeonAnimationRunnerBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The orientation against which to align the dropdown content
|
||||
* horizontally relative to the dropdown trigger.
|
||||
* Overridden from `Polymer.IronFitBehavior`.
|
||||
*/
|
||||
horizontalAlign: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the dropdown content
|
||||
* vertically relative to the dropdown trigger.
|
||||
* Overridden from `Polymer.IronFitBehavior`.
|
||||
*/
|
||||
verticalAlign: {
|
||||
type: String,
|
||||
value: 'top',
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* An animation config. If provided, this will be used to animate the
|
||||
* opening of the dropdown.
|
||||
*/
|
||||
openAnimationConfig: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* An animation config. If provided, this will be used to animate the
|
||||
* closing of the dropdown.
|
||||
*/
|
||||
closeAnimationConfig: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* If provided, this will be the element that will be focused when
|
||||
* the dropdown opens.
|
||||
*/
|
||||
focusTarget: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable animations when opening and closing the
|
||||
* dropdown.
|
||||
*/
|
||||
noAnimations: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* By default, the dropdown will constrain scrolling on the page
|
||||
* to itself when opened.
|
||||
* Set to true in order to prevent scroll from being constrained
|
||||
* to the dropdown when it opens.
|
||||
*/
|
||||
allowOutsideScroll: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
|
||||
],
|
||||
|
||||
/**
|
||||
* The element that is contained by the dropdown, if any.
|
||||
*/
|
||||
get containedElement() {
|
||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be focused when the dropdown opens.
|
||||
* @deprecated
|
||||
*/
|
||||
get _focusTarget() {
|
||||
return this.focusTarget || this.containedElement;
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the value of `opened` changes.
|
||||
* Overridden from `IronOverlayBehavior`
|
||||
*/
|
||||
_openedChanged: function() {
|
||||
if (this.opened && this.disabled) {
|
||||
this.cancel();
|
||||
} else {
|
||||
this.cancelAnimation();
|
||||
this.sizingTarget = this.containedElement || this.sizingTarget;
|
||||
this._updateAnimationConfig();
|
||||
if (this.opened && !this.allowOutsideScroll) {
|
||||
Polymer.IronDropdownScrollManager.pushScrollLock(this);
|
||||
} else {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(this);
|
||||
}
|
||||
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Overridden from `IronOverlayBehavior`.
|
||||
*/
|
||||
_renderOpened: function() {
|
||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.open();
|
||||
}
|
||||
this.$.contentWrapper.classList.add('animating');
|
||||
this.playAnimation('open');
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Overridden from `IronOverlayBehavior`.
|
||||
*/
|
||||
_renderClosed: function() {
|
||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.close();
|
||||
}
|
||||
this.$.contentWrapper.classList.add('animating');
|
||||
this.playAnimation('close');
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when animation finishes on the dropdown (when opening or
|
||||
* closing). Responsible for "completing" the process of opening or
|
||||
* closing the dropdown by positioning it or setting its display to
|
||||
* none.
|
||||
*/
|
||||
_onNeonAnimationFinish: function() {
|
||||
this.$.contentWrapper.classList.remove('animating');
|
||||
if (this.opened) {
|
||||
Polymer.IronOverlayBehaviorImpl._finishRenderOpened.apply(this);
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._finishRenderClosed.apply(this);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Constructs the final animation config from different properties used
|
||||
* to configure specific parts of the opening and closing animations.
|
||||
*/
|
||||
_updateAnimationConfig: function() {
|
||||
var animationConfig = {};
|
||||
var animations = [];
|
||||
|
||||
if (this.openAnimationConfig) {
|
||||
// NOTE(cdata): When making `display:none` elements visible in Safari,
|
||||
// the element will paint once in a fully visible state, causing the
|
||||
// dropdown to flash before it fades in. We prepend an
|
||||
// `opaque-animation` to fix this problem:
|
||||
animationConfig.open = [{
|
||||
name: 'opaque-animation',
|
||||
}].concat(this.openAnimationConfig);
|
||||
animations = animations.concat(animationConfig.open);
|
||||
}
|
||||
|
||||
if (this.closeAnimationConfig) {
|
||||
animationConfig.close = this.closeAnimationConfig;
|
||||
animations = animations.concat(animationConfig.close);
|
||||
}
|
||||
|
||||
animations.forEach(function(animation) {
|
||||
animation.node = this.containedElement;
|
||||
}, this);
|
||||
|
||||
this.animationConfig = animationConfig;
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the overlay position based on configured horizontal
|
||||
* and vertical alignment.
|
||||
*/
|
||||
_updateOverlayPosition: function() {
|
||||
if (this.isAttached) {
|
||||
// This triggers iron-resize, and iron-overlay-behavior will call refit if needed.
|
||||
this.notifyResize();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Useful to call this after the element, the window, or the `fitInfo`
|
||||
* element has been resized. Will maintain the scroll position.
|
||||
*/
|
||||
refit: function () {
|
||||
if (!this.opened) {
|
||||
return
|
||||
}
|
||||
var containedElement = this.containedElement;
|
||||
var scrollTop;
|
||||
var scrollLeft;
|
||||
|
||||
if (containedElement) {
|
||||
scrollTop = containedElement.scrollTop;
|
||||
scrollLeft = containedElement.scrollLeft;
|
||||
}
|
||||
Polymer.IronFitBehavior.refit.apply(this, arguments);
|
||||
|
||||
if (containedElement) {
|
||||
containedElement.scrollTop = scrollTop;
|
||||
containedElement.scrollLeft = scrollLeft;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Apply focus to focusTarget or containedElement
|
||||
*/
|
||||
_applyFocus: function () {
|
||||
var focusTarget = this.focusTarget || this.containedElement;
|
||||
if (focusTarget && this.opened && !this.noAutoFocus) {
|
||||
focusTarget.focus();
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</dom-module>
|
@ -1,28 +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>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>iron-dropdown tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'iron-dropdown.html',
|
||||
'iron-dropdown-scroll-manager.html',
|
||||
'iron-dropdown.html?dom=shadow',
|
||||
'iron-dropdown-scroll-manager.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,152 +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>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-dropdown-scroll-manager tests</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="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../iron-dropdown-scroll-manager.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="x-scrollable-element.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="DOMSubtree">
|
||||
<template>
|
||||
<x-scrollable-element id="Parent"></x-scrollable-element>
|
||||
</template>
|
||||
</test-fixture>
|
||||
<script>
|
||||
suite('IronDropdownScrollManager', function() {
|
||||
var parent;
|
||||
var childOne;
|
||||
var childTwo;
|
||||
var grandchildOne;
|
||||
var grandchildTwo;
|
||||
var ancestor;
|
||||
|
||||
setup(function() {
|
||||
parent = fixture('DOMSubtree');
|
||||
childOne = parent.$$('#ChildOne');
|
||||
childTwo = parent.$$('#ChildTwo');
|
||||
grandChildOne = parent.$$('#GrandchildOne');
|
||||
grandChildTwo = parent.$$('#GrandchildTwo');
|
||||
ancestor = document.body;
|
||||
});
|
||||
|
||||
suite('constraining scroll in the DOM', function() {
|
||||
setup(function() {
|
||||
Polymer.IronDropdownScrollManager.pushScrollLock(childOne);
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
|
||||
});
|
||||
|
||||
test('recognizes sibling as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childTwo))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes neice as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildTwo))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes parent as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes ancestor as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(ancestor))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes locking child as unlocked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childOne))
|
||||
.to.be.equal(false);
|
||||
});
|
||||
|
||||
test('recognizes descendant of locking child as unlocked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildOne))
|
||||
.to.be.equal(false);
|
||||
});
|
||||
|
||||
test('unlocks locked elements when there are no locking elements', function() {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
|
||||
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
|
||||
.to.be.equal(false);
|
||||
});
|
||||
|
||||
test('does not check locked elements when there are no locking elements', function() {
|
||||
sinon.spy(Polymer.IronDropdownScrollManager, 'elementIsScrollLocked');
|
||||
childOne.dispatchEvent(new CustomEvent('wheel', {
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}));
|
||||
expect(Polymer.IronDropdownScrollManager
|
||||
.elementIsScrollLocked.callCount).to.be.eql(1);
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
|
||||
childOne.dispatchEvent(new CustomEvent('wheel', {
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}));
|
||||
expect(Polymer.IronDropdownScrollManager
|
||||
.elementIsScrollLocked.callCount).to.be.eql(1);
|
||||
});
|
||||
|
||||
suite('various scroll events', function() {
|
||||
var scrollEvents;
|
||||
var events;
|
||||
|
||||
setup(function() {
|
||||
scrollEvents = [
|
||||
'wheel',
|
||||
'mousewheel',
|
||||
'DOMMouseScroll',
|
||||
'touchmove'
|
||||
];
|
||||
|
||||
events = scrollEvents.map(function(scrollEvent) {
|
||||
return new CustomEvent(scrollEvent, {
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('prevents wheel events from locked elements', function() {
|
||||
events.forEach(function(event) {
|
||||
childTwo.dispatchEvent(event);
|
||||
expect(event.defaultPrevented).to.be.eql(true);
|
||||
});
|
||||
});
|
||||
|
||||
test('allows wheel events from unlocked elements', function() {
|
||||
events.forEach(function(event) {
|
||||
childOne.dispatchEvent(event);
|
||||
expect(event.defaultPrevented).to.be.eql(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,416 +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>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-dropdown basic tests</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="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../iron-dropdown.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.positioned {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.big {
|
||||
width: 3000px;
|
||||
height: 3000px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<test-fixture id="TrivialDropdown">
|
||||
<template>
|
||||
<iron-dropdown>
|
||||
<div class="dropdown-content"></div>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="NonLockingDropdown">
|
||||
<template>
|
||||
<iron-dropdown allow-outside-scroll>
|
||||
<div class="dropdown-content">I don't lock scroll!</div>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="AlignedDropdown">
|
||||
<template>
|
||||
<div class="container">
|
||||
<iron-dropdown horizontal-align="right" vertical-align="top">
|
||||
<div class="dropdown-content big"></div>
|
||||
</iron-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<!-- Absolutely position the dropdown so that it has enough space to move around -->
|
||||
<test-fixture id="OffsetDropdownTopLeft">
|
||||
<template>
|
||||
<div class="container positioned">
|
||||
<iron-dropdown>
|
||||
<div class="dropdown-content"></div>
|
||||
</iron-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="OffsetDropdownBottomRight">
|
||||
<template>
|
||||
<div class="container positioned">
|
||||
<iron-dropdown horizontal-align="right" vertical-align="bottom">
|
||||
<div class="dropdown-content"></div>
|
||||
</iron-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="FocusableContentDropdown">
|
||||
<template>
|
||||
<iron-dropdown>
|
||||
<div class="dropdown-content" tabindex="0">
|
||||
<div class="subcontent" tabindex="0"></div>
|
||||
</div>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="RTLDropdownLeft">
|
||||
<template>
|
||||
<div dir="rtl" class="container">
|
||||
<iron-dropdown>
|
||||
<div class="dropdown-content"></div>
|
||||
</iron-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="RTLDropdownRight">
|
||||
<template>
|
||||
<div dir="rtl" class="container">
|
||||
<iron-dropdown horizontal-align="right">
|
||||
<div class="dropdown-content"></div>
|
||||
</iron-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
function elementIsVisible(element) {
|
||||
var contentRect = element.getBoundingClientRect();
|
||||
var computedStyle = window.getComputedStyle(element);
|
||||
|
||||
return computedStyle.display !== 'none' &&
|
||||
contentRect.width > 0 &&
|
||||
contentRect.height > 0;
|
||||
}
|
||||
|
||||
function runAfterOpen(overlay, callback) {
|
||||
overlay.addEventListener('iron-overlay-opened', callback);
|
||||
overlay.open();
|
||||
}
|
||||
|
||||
suite('<iron-dropdown>', function() {
|
||||
var dropdown;
|
||||
var content;
|
||||
|
||||
suite('basic', function() {
|
||||
setup(function() {
|
||||
dropdown = fixture('TrivialDropdown');
|
||||
content = Polymer.dom(dropdown).querySelector('.dropdown-content');
|
||||
});
|
||||
|
||||
test('effectively hides the dropdown content', function() {
|
||||
expect(elementIsVisible(content)).to.be.equal(false);
|
||||
});
|
||||
|
||||
test('shows dropdown content when opened', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
expect(elementIsVisible(content)).to.be.equal(true);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('hides dropdown content when outside is clicked', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
expect(elementIsVisible(content)).to.be.equal(true);
|
||||
dropdown.addEventListener('iron-overlay-closed', function() {
|
||||
expect(elementIsVisible(content)).to.be.equal(false);
|
||||
done();
|
||||
});
|
||||
MockInteractions.tap(dropdown.parentNode);
|
||||
});
|
||||
});
|
||||
|
||||
suite('when content is focusable', function() {
|
||||
setup(function() {
|
||||
dropdown = fixture('FocusableContentDropdown');
|
||||
content = Polymer.dom(dropdown).querySelector('.dropdown-content');
|
||||
});
|
||||
test('focuses the content when opened', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
expect(document.activeElement).to.be.equal(content);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('focuses a configured focus target', function(done) {
|
||||
var focusableChild = Polymer.dom(content).querySelector('div[tabindex]');
|
||||
dropdown.focusTarget = focusableChild;
|
||||
|
||||
runAfterOpen(dropdown, function () {
|
||||
expect(document.activeElement).to.not.be.equal(content);
|
||||
expect(document.activeElement).to.be.equal(focusableChild);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('locking scroll', function() {
|
||||
|
||||
setup(function() {
|
||||
dropdown = fixture('TrivialDropdown');
|
||||
});
|
||||
|
||||
test('should lock, only once', function(done) {
|
||||
var openCount = 0;
|
||||
runAfterOpen(dropdown, function() {
|
||||
expect(Polymer.IronDropdownScrollManager._lockingElements.length)
|
||||
.to.be.equal(1);
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(document.body))
|
||||
.to.be.equal(true);
|
||||
|
||||
if(openCount === 0) {
|
||||
// This triggers a second `pushScrollLock` with the same element, however
|
||||
// that should not add the element to the `_lockingElements` stack twice
|
||||
dropdown.close();
|
||||
dropdown.open();
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
openCount++;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('non locking scroll', function() {
|
||||
|
||||
setup(function() {
|
||||
dropdown = fixture('NonLockingDropdown');
|
||||
});
|
||||
|
||||
test('can be disabled with `allowOutsideScroll`', function(done) {
|
||||
runAfterOpen(dropdown, function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(document.body))
|
||||
.to.be.equal(false);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('aligned dropdown', function() {
|
||||
var parent;
|
||||
var parentRect;
|
||||
var dropdownRect;
|
||||
|
||||
setup(function() {
|
||||
parent = fixture('AlignedDropdown');
|
||||
dropdown = parent.querySelector('iron-dropdown');
|
||||
});
|
||||
|
||||
test('can be re-aligned to the right and the top', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
assert.equal(dropdownRect.top, parentRect.top, 'top ok');
|
||||
assert.equal(dropdownRect.left, 0, 'left ok');
|
||||
assert.equal(dropdownRect.bottom, document.documentElement.clientHeight, 'bottom ok');
|
||||
assert.equal(dropdownRect.right, parentRect.right, 'right ok');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('can be re-aligned to the bottom', function(done) {
|
||||
dropdown.verticalAlign = 'bottom';
|
||||
runAfterOpen(dropdown, function () {
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
assert.equal(dropdownRect.top, 0, 'top ok');
|
||||
assert.equal(dropdownRect.left, 0, 'left ok');
|
||||
assert.equal(dropdownRect.bottom, parentRect.bottom, 'bottom ok');
|
||||
assert.equal(dropdownRect.right, parentRect.right, 'right ok');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('handles parent\'s stacking context', function(done) {
|
||||
// This will create a new stacking context.
|
||||
parent.style.transform = 'translateZ(0)';
|
||||
runAfterOpen(dropdown, function () {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
assert.equal(dropdownRect.top, parentRect.top, 'top ok');
|
||||
assert.equal(dropdownRect.left, 0, 'left ok');
|
||||
assert.equal(dropdownRect.bottom, document.documentElement.clientHeight, 'bottom ok');
|
||||
assert.equal(dropdownRect.right, parentRect.right, 'right ok');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when align is left/top, with an offset', function() {
|
||||
var dropdownRect;
|
||||
var offsetDropdownRect;
|
||||
setup(function() {
|
||||
var parent = fixture('OffsetDropdownTopLeft');
|
||||
dropdown = parent.querySelector('iron-dropdown');
|
||||
});
|
||||
|
||||
test('can be offset towards the bottom right', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
dropdown.verticalOffset = 10;
|
||||
dropdown.horizontalOffset = 10;
|
||||
// Force refit instead of waiting for requestAnimationFrame.
|
||||
dropdown.refit();
|
||||
offsetDropdownRect = dropdown.getBoundingClientRect();
|
||||
// verticalAlign is top, so a positive offset moves down.
|
||||
assert.equal(dropdownRect.top + 10, offsetDropdownRect.top, 'top ok');
|
||||
// horizontalAlign is left, so a positive offset moves to the right.
|
||||
assert.equal(dropdownRect.left + 10, offsetDropdownRect.left, 'left ok');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('can be offset towards the top left', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
dropdown.verticalOffset = -10;
|
||||
dropdown.horizontalOffset = -10;
|
||||
// Force refit instead of waiting for requestAnimationFrame.
|
||||
dropdown.refit();
|
||||
offsetDropdownRect = dropdown.getBoundingClientRect();
|
||||
// verticalAlign is top, so a negative offset moves up.
|
||||
assert.equal(dropdownRect.top - 10, offsetDropdownRect.top, 'top ok');
|
||||
// horizontalAlign is left, so a negative offset moves to the left.
|
||||
assert.equal(dropdownRect.left - 10, offsetDropdownRect.left, 'left ok');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when align is right/bottom, with an offset', function() {
|
||||
var dropdownRect;
|
||||
var offsetDropdownRect;
|
||||
setup(function() {
|
||||
var parent = fixture('OffsetDropdownBottomRight');
|
||||
dropdown = parent.querySelector('iron-dropdown');
|
||||
});
|
||||
|
||||
test('can be offset towards the top left', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
dropdown.verticalOffset = 10;
|
||||
dropdown.horizontalOffset = 10;
|
||||
// Force refit instead of waiting for requestAnimationFrame.
|
||||
dropdown.refit();
|
||||
offsetDropdownRect = dropdown.getBoundingClientRect();
|
||||
// verticalAlign is bottom, so a positive offset moves up.
|
||||
assert.equal(dropdownRect.bottom - 10, offsetDropdownRect.bottom, 'bottom ok');
|
||||
// horizontalAlign is right, so a positive offset moves to the left.
|
||||
assert.equal(dropdownRect.right - 10, offsetDropdownRect.right, 'right ok');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('can be offset towards the bottom right', function(done) {
|
||||
runAfterOpen(dropdown, function () {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
dropdown.verticalOffset = -10;
|
||||
dropdown.horizontalOffset = -10;
|
||||
// Force refit instead of waiting for requestAnimationFrame.
|
||||
dropdown.refit();
|
||||
offsetDropdownRect = dropdown.getBoundingClientRect();
|
||||
// verticalAlign is bottom, so a negative offset moves down.
|
||||
assert.equal(dropdownRect.bottom + 10, offsetDropdownRect.bottom, 'bottom ok');
|
||||
// horizontalAlign is right, so a positive offset moves to the right.
|
||||
assert.equal(dropdownRect.right + 10, offsetDropdownRect.right, 'right ok');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('RTL', function() {
|
||||
var dropdownRect;
|
||||
|
||||
test('with horizontalAlign=left', function(done) {
|
||||
var parent = fixture('RTLDropdownLeft');
|
||||
dropdown = parent.querySelector('iron-dropdown');
|
||||
runAfterOpen(dropdown, function () {
|
||||
// In RTL, if `horizontalAlign` is "left", that's the same as
|
||||
// being right-aligned in LTR. So the dropdown should be in the top
|
||||
// right corner.
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
expect(dropdownRect.top).to.be.equal(0);
|
||||
expect(dropdownRect.right).to.be.equal(100);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('with horizontalAlign=right', function(done) {
|
||||
var parent = fixture('RTLDropdownRight');
|
||||
dropdown = parent.querySelector('iron-dropdown');
|
||||
runAfterOpen(dropdown, function () {
|
||||
// In RTL, if `horizontalAlign` is "right", that's the same as
|
||||
// being left-aligned in LTR. So the dropdown should be in the top
|
||||
// left corner.
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
expect(dropdownRect.top).to.be.equal(0);
|
||||
expect(dropdownRect.left).to.be.equal(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,27 +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">
|
||||
|
||||
<dom-module id="x-scrollable-element">
|
||||
<template>
|
||||
<div id="ChildOne">
|
||||
<div id="GrandchildOne"></div>
|
||||
</div>
|
||||
<div id="ChildTwo">
|
||||
<div id="GrandchildTwo"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-scrollable-element'
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "iron-fit-behavior",
|
||||
"version": "1.1.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Fits an element inside another element",
|
||||
"private": true,
|
||||
"main": "iron-fit-behavior.html",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"behavior"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-fit-behavior.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-fit-behavior",
|
||||
"_release": "1.1.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.1",
|
||||
"commit": "c87fd44553b9ce2c60f695146d667932a7be2f8f"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-fit-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-fit-behavior"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-fit-behavior/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
@ -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: QL2j7nfSA/40iIPMKLMosv9hj8q7eGBbPQXVQmCL3uXD5qoMPTqo1qronKKX+bi3Rh7W104ufV4CzzbWvBwQh8gipx+4REGijzc77Fro2y3v3/wUp9H/UEWnbhAWPDsqEoAD8xQXFHkVv7874/VwOlubQyXDGlvqh0fzYbUNUQo=
|
||||
- secure: ajBo8YcSzi4kNuCHcmajCirWQKf5Mj4OZ3tQjNAcJJAy0UtyrAgTenayWN2ijKqD5V8wfTK66jUXGYMZkoJV4EpknrUliqRgRqKHHfULXYWRSC7lDGxf835ReFxstkPun4HmNtxraAWJgmgFz7mylntTVKm46Ce4INj3n8reWaY=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run 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,31 +0,0 @@
|
||||
{
|
||||
"name": "iron-fit-behavior",
|
||||
"version": "1.1.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Fits an element inside another element",
|
||||
"private": true,
|
||||
"main": "iron-fit-behavior.html",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"behavior"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-fit-behavior.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,132 +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>iron-fit-behavior demo</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="simple-fit.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
demo-snippet {
|
||||
--demo-snippet-code: {
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body unresolved class="centered">
|
||||
<h3>
|
||||
An element with <code>IronFitBehavior</code> can be centered in
|
||||
<code>fitInto</code> or positioned around a <code>positionTarget</code>
|
||||
</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style>
|
||||
.target {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid;
|
||||
width: 100px;
|
||||
padding: 20px 0;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#myFit {
|
||||
z-index: 10;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
<template is="dom-bind">
|
||||
<template is="dom-repeat" items="[[containers]]">
|
||||
<div class="target" on-tap="updatePositionTarget">Target</div>
|
||||
</template>
|
||||
<simple-fit id="myFit" auto-fit-on-attach>
|
||||
<h2>Align</h2>
|
||||
<p>
|
||||
<button on-tap="updateAlign" vertical-align="top">top</button>
|
||||
<button on-tap="updateAlign" vertical-align="bottom">bottom</button>
|
||||
<button on-tap="updateAlign" vertical-align="auto">auto</button>
|
||||
<button on-tap="updateAlign" vertical-align>null</button>
|
||||
</p>
|
||||
<p>
|
||||
<button on-tap="updateAlign" horizontal-align="left">left</button>
|
||||
<button on-tap="updateAlign" horizontal-align="right">right</button>
|
||||
<button on-tap="updateAlign" horizontal-align="auto">auto</button>
|
||||
<button on-tap="updateAlign" horizontal-align>null</button>
|
||||
</p>
|
||||
<button on-tap="toggleNoOverlap">Toggle overlap</button>
|
||||
</simple-fit>
|
||||
<script>
|
||||
var defaultTarget = Polymer.dom(myFit).parentNode;
|
||||
var template = document.querySelector('template[is="dom-bind"]');
|
||||
|
||||
template.containers = new Array(30);
|
||||
|
||||
template.updatePositionTarget = function(e) {
|
||||
var target = Polymer.dom(e).rootTarget;
|
||||
target = myFit.positionTarget === target ? defaultTarget : target;
|
||||
myFit.positionTarget.style.backgroundColor = '';
|
||||
target.style.backgroundColor = 'orange';
|
||||
myFit.positionTarget = target;
|
||||
template.refit();
|
||||
};
|
||||
|
||||
template._raf = null;
|
||||
template.refit = function() {
|
||||
template._raf && window.cancelAnimationFrame(template._raf);
|
||||
template._raf = window.requestAnimationFrame(function() {
|
||||
template._raf = null;
|
||||
myFit.refit();
|
||||
});
|
||||
};
|
||||
|
||||
template.updateAlign = function(e) {
|
||||
var target = Polymer.dom(e).rootTarget;
|
||||
if (target.hasAttribute('horizontal-align')) {
|
||||
myFit.horizontalAlign = target.getAttribute('horizontal-align');
|
||||
}
|
||||
if (target.hasAttribute('vertical-align')) {
|
||||
myFit.verticalAlign = target.getAttribute('vertical-align');
|
||||
}
|
||||
template.refit();
|
||||
};
|
||||
|
||||
template.toggleNoOverlap = function() {
|
||||
myFit.noOverlap = !myFit.noOverlap;
|
||||
template.refit();
|
||||
};
|
||||
|
||||
// Listen for resize and scroll on window.
|
||||
window.addEventListener('resize', template.refit);
|
||||
window.addEventListener('scroll', template.refit);
|
||||
</script>
|
||||
</template>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -1,42 +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="../iron-fit-behavior.html">
|
||||
<link rel="import" href="../../paper-styles/color.html">
|
||||
|
||||
<dom-module id="simple-fit">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
background-color: var(--paper-light-blue-500);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'simple-fit',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronFitBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,30 +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>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<title>iron-fit-behavior</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,552 +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">
|
||||
|
||||
<script>
|
||||
/**
|
||||
`Polymer.IronFitBehavior` fits an element in another element using `max-height` and `max-width`, and
|
||||
optionally centers it in the window or another element.
|
||||
|
||||
The element will only be sized and/or positioned if it has not already been sized and/or positioned
|
||||
by CSS.
|
||||
|
||||
CSS properties | Action
|
||||
-----------------------------|-------------------------------------------
|
||||
`position` set | Element is not centered horizontally or vertically
|
||||
`top` or `bottom` set | Element is not vertically centered
|
||||
`left` or `right` set | Element is not horizontally centered
|
||||
`max-height` set | Element respects `max-height`
|
||||
`max-width` set | Element respects `max-width`
|
||||
|
||||
`Polymer.IronFitBehavior` can position an element into another element using
|
||||
`verticalAlign` and `horizontalAlign`. This will override the element's css position.
|
||||
|
||||
<div class="container">
|
||||
<iron-fit-impl vertical-align="top" horizontal-align="auto">
|
||||
Positioned into the container
|
||||
</iron-fit-impl>
|
||||
</div>
|
||||
|
||||
Use `noOverlap` to position the element around another element without overlapping it.
|
||||
|
||||
<div class="container">
|
||||
<iron-fit-impl no-overlap vertical-align="auto" horizontal-align="auto">
|
||||
Positioned around the container
|
||||
</iron-fit-impl>
|
||||
</div>
|
||||
|
||||
@demo demo/index.html
|
||||
@polymerBehavior
|
||||
*/
|
||||
|
||||
Polymer.IronFitBehavior = {
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* The element that will receive a `max-height`/`width`. By default it is the same as `this`,
|
||||
* but it can be set to a child element. This is useful, for example, for implementing a
|
||||
* scrolling region inside the element.
|
||||
* @type {!Element}
|
||||
*/
|
||||
sizingTarget: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return this;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The element to fit `this` into.
|
||||
*/
|
||||
fitInto: {
|
||||
type: Object,
|
||||
value: window
|
||||
},
|
||||
|
||||
/**
|
||||
* Will position the element around the positionTarget without overlapping it.
|
||||
*/
|
||||
noOverlap: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be used to position the element. If not set, it will
|
||||
* default to the parent node.
|
||||
* @type {!Element}
|
||||
*/
|
||||
positionTarget: {
|
||||
type: Element
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the element horizontally
|
||||
* relative to the `positionTarget`. Possible values are "left", "right", "auto".
|
||||
*/
|
||||
horizontalAlign: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the element vertically
|
||||
* relative to the `positionTarget`. Possible values are "top", "bottom", "auto".
|
||||
*/
|
||||
verticalAlign: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The same as setting margin-left and margin-right css properties.
|
||||
* @deprecated
|
||||
*/
|
||||
horizontalOffset: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The same as setting margin-top and margin-bottom css properties.
|
||||
* @deprecated
|
||||
*/
|
||||
verticalOffset: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to auto-fit on attach.
|
||||
*/
|
||||
autoFitOnAttach: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/** @type {?Object} */
|
||||
_fitInfo: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
get _fitWidth() {
|
||||
var fitWidth;
|
||||
if (this.fitInto === window) {
|
||||
fitWidth = this.fitInto.innerWidth;
|
||||
} else {
|
||||
fitWidth = this.fitInto.getBoundingClientRect().width;
|
||||
}
|
||||
return fitWidth;
|
||||
},
|
||||
|
||||
get _fitHeight() {
|
||||
var fitHeight;
|
||||
if (this.fitInto === window) {
|
||||
fitHeight = this.fitInto.innerHeight;
|
||||
} else {
|
||||
fitHeight = this.fitInto.getBoundingClientRect().height;
|
||||
}
|
||||
return fitHeight;
|
||||
},
|
||||
|
||||
get _fitLeft() {
|
||||
var fitLeft;
|
||||
if (this.fitInto === window) {
|
||||
fitLeft = 0;
|
||||
} else {
|
||||
fitLeft = this.fitInto.getBoundingClientRect().left;
|
||||
}
|
||||
return fitLeft;
|
||||
},
|
||||
|
||||
get _fitTop() {
|
||||
var fitTop;
|
||||
if (this.fitInto === window) {
|
||||
fitTop = 0;
|
||||
} else {
|
||||
fitTop = this.fitInto.getBoundingClientRect().top;
|
||||
}
|
||||
return fitTop;
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be used to position the element,
|
||||
* if no position target is configured.
|
||||
*/
|
||||
get _defaultPositionTarget() {
|
||||
var parent = Polymer.dom(this).parentNode;
|
||||
|
||||
if (parent && parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
|
||||
parent = parent.host;
|
||||
}
|
||||
|
||||
return parent;
|
||||
},
|
||||
|
||||
/**
|
||||
* The horizontal align value, accounting for the RTL/LTR text direction.
|
||||
*/
|
||||
get _localeHorizontalAlign() {
|
||||
if (this._isRTL) {
|
||||
// In RTL, "left" becomes "right".
|
||||
if (this.horizontalAlign === 'right') {
|
||||
return 'left';
|
||||
}
|
||||
if (this.horizontalAlign === 'left') {
|
||||
return 'right';
|
||||
}
|
||||
}
|
||||
return this.horizontalAlign;
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
// Memoize this to avoid expensive calculations & relayouts.
|
||||
this._isRTL = window.getComputedStyle(this).direction == 'rtl';
|
||||
this.positionTarget = this.positionTarget || this._defaultPositionTarget;
|
||||
if (this.autoFitOnAttach) {
|
||||
if (window.getComputedStyle(this).display === 'none') {
|
||||
setTimeout(function() {
|
||||
this.fit();
|
||||
}.bind(this));
|
||||
} else {
|
||||
this.fit();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Positions and fits the element into the `fitInto` element.
|
||||
*/
|
||||
fit: function() {
|
||||
this._discoverInfo();
|
||||
this.position();
|
||||
this.constrain();
|
||||
this.center();
|
||||
},
|
||||
|
||||
/**
|
||||
* Memoize information needed to position and size the target element.
|
||||
*/
|
||||
_discoverInfo: function() {
|
||||
if (this._fitInfo) {
|
||||
return;
|
||||
}
|
||||
var target = window.getComputedStyle(this);
|
||||
var sizer = window.getComputedStyle(this.sizingTarget);
|
||||
|
||||
this._fitInfo = {
|
||||
inlineStyle: {
|
||||
top: this.style.top || '',
|
||||
left: this.style.left || '',
|
||||
position: this.style.position || ''
|
||||
},
|
||||
sizerInlineStyle: {
|
||||
maxWidth: this.sizingTarget.style.maxWidth || '',
|
||||
maxHeight: this.sizingTarget.style.maxHeight || '',
|
||||
boxSizing: this.sizingTarget.style.boxSizing || ''
|
||||
},
|
||||
positionedBy: {
|
||||
vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
|
||||
'bottom' : null),
|
||||
horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
|
||||
'right' : null)
|
||||
},
|
||||
sizedBy: {
|
||||
height: sizer.maxHeight !== 'none',
|
||||
width: sizer.maxWidth !== 'none',
|
||||
minWidth: parseInt(sizer.minWidth, 10) || 0,
|
||||
minHeight: parseInt(sizer.minHeight, 10) || 0
|
||||
},
|
||||
margin: {
|
||||
top: parseInt(target.marginTop, 10) || 0,
|
||||
right: parseInt(target.marginRight, 10) || 0,
|
||||
bottom: parseInt(target.marginBottom, 10) || 0,
|
||||
left: parseInt(target.marginLeft, 10) || 0
|
||||
}
|
||||
};
|
||||
|
||||
// Support these properties until they are removed.
|
||||
if (this.verticalOffset) {
|
||||
this._fitInfo.margin.top = this._fitInfo.margin.bottom = this.verticalOffset;
|
||||
this._fitInfo.inlineStyle.marginTop = this.style.marginTop || '';
|
||||
this._fitInfo.inlineStyle.marginBottom = this.style.marginBottom || '';
|
||||
this.style.marginTop = this.style.marginBottom = this.verticalOffset + 'px';
|
||||
}
|
||||
if (this.horizontalOffset) {
|
||||
this._fitInfo.margin.left = this._fitInfo.margin.right = this.horizontalOffset;
|
||||
this._fitInfo.inlineStyle.marginLeft = this.style.marginLeft || '';
|
||||
this._fitInfo.inlineStyle.marginRight = this.style.marginRight || '';
|
||||
this.style.marginLeft = this.style.marginRight = this.horizontalOffset + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets the target element's position and size constraints, and clear
|
||||
* the memoized data.
|
||||
*/
|
||||
resetFit: function() {
|
||||
var info = this._fitInfo || {};
|
||||
for (var property in info.sizerInlineStyle) {
|
||||
this.sizingTarget.style[property] = info.sizerInlineStyle[property];
|
||||
}
|
||||
for (var property in info.inlineStyle) {
|
||||
this.style[property] = info.inlineStyle[property];
|
||||
}
|
||||
|
||||
this._fitInfo = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Equivalent to calling `resetFit()` and `fit()`. Useful to call this after
|
||||
* the element or the `fitInto` element has been resized, or if any of the
|
||||
* positioning properties (e.g. `horizontalAlign, verticalAlign`) is updated.
|
||||
*/
|
||||
refit: function() {
|
||||
this.resetFit();
|
||||
this.fit();
|
||||
},
|
||||
|
||||
/**
|
||||
* Positions the element according to `horizontalAlign, verticalAlign`.
|
||||
*/
|
||||
position: function() {
|
||||
if (!this.horizontalAlign && !this.verticalAlign) {
|
||||
// needs to be centered, and it is done after constrain.
|
||||
return;
|
||||
}
|
||||
|
||||
this.style.position = 'fixed';
|
||||
// Need border-box for margin/padding.
|
||||
this.sizingTarget.style.boxSizing = 'border-box';
|
||||
// Set to 0, 0 in order to discover any offset caused by parent stacking contexts.
|
||||
this.style.left = '0px';
|
||||
this.style.top = '0px';
|
||||
|
||||
var rect = this.getBoundingClientRect();
|
||||
var positionRect = this.__getNormalizedRect(this.positionTarget);
|
||||
var fitRect = this.__getNormalizedRect(this.fitInto);
|
||||
|
||||
// Consider the margin as part of the size for position calculations.
|
||||
var width = rect.width + this._fitInfo.margin.left + this._fitInfo.margin.right;
|
||||
var height = rect.height + this._fitInfo.margin.top + this._fitInfo.margin.bottom;
|
||||
|
||||
var alignRight = this.__isAlignRight(this._localeHorizontalAlign, width, positionRect, fitRect);
|
||||
var alignBottom = this.__isAlignBottom(this.verticalAlign, height, positionRect, fitRect);
|
||||
|
||||
var top = alignBottom ? positionRect.bottom - height : positionRect.top;
|
||||
var left = alignRight ? positionRect.right - width : positionRect.left;
|
||||
|
||||
if (this.noOverlap) {
|
||||
// We can overlap one of the dimensions, choose the one that minimizes the cropped area.
|
||||
var noOverlapLeft = left + positionRect.width * (alignRight ? -1 : 1);
|
||||
var noOverlapTop = top + positionRect.height * (alignBottom ? -1 : 1);
|
||||
var areaOverlapLeft = this.__getCroppedArea({
|
||||
top: noOverlapTop,
|
||||
left: left,
|
||||
width: width,
|
||||
height: height
|
||||
}, fitRect);
|
||||
var areaOverlapTop = this.__getCroppedArea({
|
||||
top: top,
|
||||
left: noOverlapLeft,
|
||||
width: width,
|
||||
height: height
|
||||
}, fitRect);
|
||||
if (areaOverlapLeft >= areaOverlapTop) {
|
||||
left = noOverlapLeft;
|
||||
} else {
|
||||
top = noOverlapTop;
|
||||
}
|
||||
}
|
||||
|
||||
left += this._fitInfo.margin.left;
|
||||
top += this._fitInfo.margin.top;
|
||||
|
||||
// Use original size (without margin)
|
||||
var right = left + rect.width;
|
||||
var bottom = top + rect.height;
|
||||
|
||||
left = Math.max(left, this._fitInfo.margin.left);
|
||||
top = Math.max(top, this._fitInfo.margin.top);
|
||||
|
||||
var maxWidth = Math.min(fitRect.right - this._fitInfo.margin.right, right) - left;
|
||||
var maxHeight = Math.min(fitRect.bottom - this._fitInfo.margin.bottom, bottom) - top;
|
||||
|
||||
var minWidth = this._fitInfo.sizedBy.minWidth;
|
||||
var minHeight = this._fitInfo.sizedBy.minHeight;
|
||||
|
||||
if (maxWidth < minWidth || right < minWidth) {
|
||||
left = -9999;
|
||||
maxWidth = 0;
|
||||
}
|
||||
if (maxHeight < minHeight || bottom < minHeight) {
|
||||
top = -9999;
|
||||
maxHeight = 0;
|
||||
}
|
||||
|
||||
this.sizingTarget.style.maxWidth = maxWidth + 'px';
|
||||
this.sizingTarget.style.maxHeight = maxHeight + 'px';
|
||||
|
||||
// Remove the offset caused by any stacking context.
|
||||
this.style.left = (left - rect.left) + 'px';
|
||||
this.style.top = (top - rect.top) + 'px';
|
||||
},
|
||||
|
||||
/**
|
||||
* Constrains the size of the element to `fitInto` by setting `max-height`
|
||||
* and/or `max-width`.
|
||||
*/
|
||||
constrain: function() {
|
||||
if (this.horizontalAlign || this.verticalAlign) {
|
||||
return;
|
||||
}
|
||||
var info = this._fitInfo;
|
||||
// position at (0px, 0px) if not already positioned, so we can measure the natural size.
|
||||
if (!info.positionedBy.vertically) {
|
||||
this.style.position = 'fixed';
|
||||
this.style.top = '0px';
|
||||
}
|
||||
if (!info.positionedBy.horizontally) {
|
||||
this.style.position = 'fixed';
|
||||
this.style.left = '0px';
|
||||
}
|
||||
|
||||
// need border-box for margin/padding
|
||||
this.sizingTarget.style.boxSizing = 'border-box';
|
||||
// constrain the width and height if not already set
|
||||
var rect = this.getBoundingClientRect();
|
||||
if (!info.sizedBy.height) {
|
||||
this.__sizeDimension(rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
|
||||
}
|
||||
if (!info.sizedBy.width) {
|
||||
this.__sizeDimension(rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* @deprecated
|
||||
*/
|
||||
_sizeDimension: function(rect, positionedBy, start, end, extent) {
|
||||
this.__sizeDimension(rect, positionedBy, start, end, extent);
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
__sizeDimension: function(rect, positionedBy, start, end, extent) {
|
||||
var info = this._fitInfo;
|
||||
var fitRect = this.__getNormalizedRect(this.fitInto);
|
||||
var max = extent === 'Width' ? fitRect.width : fitRect.height;
|
||||
var flip = (positionedBy === end);
|
||||
var offset = flip ? max - rect[end] : rect[start];
|
||||
var margin = info.margin[flip ? start : end];
|
||||
var offsetExtent = 'offset' + extent;
|
||||
var sizingOffset = this[offsetExtent] - this.sizingTarget[offsetExtent];
|
||||
this.sizingTarget.style['max' + extent] = (max - margin - offset - sizingOffset) + 'px';
|
||||
},
|
||||
|
||||
/**
|
||||
* Centers horizontally and vertically if not already positioned. This also sets
|
||||
* `position:fixed`.
|
||||
*/
|
||||
center: function() {
|
||||
if (this.horizontalAlign || this.verticalAlign) {
|
||||
return;
|
||||
}
|
||||
var positionedBy = this._fitInfo.positionedBy;
|
||||
if (positionedBy.vertically && positionedBy.horizontally) {
|
||||
// Already positioned.
|
||||
return;
|
||||
}
|
||||
// Need position:fixed to center
|
||||
this.style.position = 'fixed';
|
||||
// Take into account the offset caused by parents that create stacking
|
||||
// contexts (e.g. with transform: translate3d). Translate to 0,0 and
|
||||
// measure the bounding rect.
|
||||
if (!positionedBy.vertically) {
|
||||
this.style.top = '0px';
|
||||
}
|
||||
if (!positionedBy.horizontally) {
|
||||
this.style.left = '0px';
|
||||
}
|
||||
// It will take in consideration margins and transforms
|
||||
var rect = this.getBoundingClientRect();
|
||||
var fitRect = this.__getNormalizedRect(this.fitInto);
|
||||
if (!positionedBy.vertically) {
|
||||
var top = fitRect.top - rect.top + (fitRect.height - rect.height) / 2;
|
||||
this.style.top = top + 'px';
|
||||
}
|
||||
if (!positionedBy.horizontally) {
|
||||
var left = fitRect.left - rect.left + (fitRect.width - rect.width) / 2;
|
||||
this.style.left = left + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
__getNormalizedRect: function(target) {
|
||||
if (target === document.documentElement || target === window) {
|
||||
return {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
right: window.innerWidth,
|
||||
bottom: window.innerHeight
|
||||
};
|
||||
}
|
||||
return target.getBoundingClientRect();
|
||||
},
|
||||
|
||||
__isAlignRight: function(hAlign, size, positionRect, fitRect) {
|
||||
if (hAlign === 'right') {
|
||||
return true;
|
||||
}
|
||||
if (hAlign === 'auto') {
|
||||
// We should align on the right if positionTarget is on the right of fitInto,
|
||||
// or if we can overlap and aligning on the left would cause more cropping
|
||||
// than aligning on the right.
|
||||
var positionTargetCenter = positionRect.left + positionRect.width/2;
|
||||
var fitIntoCenter = fitRect.left + fitRect.width/2;
|
||||
var croppedLeft = Math.abs(Math.min(0, positionRect.left));
|
||||
var croppedRight = Math.abs(Math.min(0, positionRect.right - size));
|
||||
return positionTargetCenter > fitIntoCenter ||
|
||||
(!this.noOverlap && croppedLeft > croppedRight);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
__isAlignBottom: function(vAlign, size, positionRect, fitRect) {
|
||||
if (vAlign === 'bottom') {
|
||||
return true;
|
||||
}
|
||||
if (vAlign === 'auto') {
|
||||
// We should align on the bottom if positionTarget is on the bottom of fitInto,
|
||||
// or if we can overlap and aligning on the top would cause more cropping
|
||||
// than aligning on the bottom.
|
||||
var positionTargetCenter = positionRect.top + positionRect.height/2;
|
||||
var fitIntoCenter = fitRect.top + fitRect.height/2;
|
||||
var croppedTop = Math.abs(Math.min(0, positionRect.top));
|
||||
var croppedBottom = Math.abs(Math.min(0, positionRect.bottom - size));
|
||||
return positionTargetCenter > fitIntoCenter ||
|
||||
(!this.noOverlap && croppedTop > croppedBottom);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
__getCroppedArea: function(rect, fitRect) {
|
||||
var verticalCrop = Math.min(0, rect.top) + Math.min(0, fitRect.bottom - (rect.top + rect.height));
|
||||
var horizontalCrop = Math.min(0, rect.left) + Math.min(0, fitRect.right - (rect.left + rect.width));
|
||||
return Math.abs(verticalCrop) * rect.width + Math.abs(horizontalCrop) * rect.height;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
@ -1,31 +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>iron-fit-behavior tests</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'iron-fit-behavior.html',
|
||||
'iron-fit-behavior.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
@ -1,788 +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>iron-fit-behavior tests</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<link rel="import" href="test-fit.html">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.scrolling {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sized-x {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.sized-y {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.positioned-left {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.positioned-right {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
.positioned-top {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.positioned-bottom {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
}
|
||||
|
||||
.with-max-width {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.with-max-height {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.with-margin {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.constrain {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="constrain"></div>
|
||||
|
||||
<test-fixture id="absolute">
|
||||
<template>
|
||||
<test-fit auto-fit-on-attach class="absolute">
|
||||
Absolutely positioned
|
||||
</test-fit>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="sized-xy">
|
||||
<template>
|
||||
<test-fit auto-fit-on-attach class="sized-x sized-y">
|
||||
Sized (x/y), auto center/center
|
||||
</test-fit>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="sized-x">
|
||||
<template>
|
||||
<test-fit auto-fit-on-attach class="sized-x">
|
||||
Sized (x), auto center/center
|
||||
</test-fit>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="positioned-xy">
|
||||
<template>
|
||||
<test-fit auto-fit-on-attach class="sized-x positioned-left positioned-top">
|
||||
Sized (x/y), positioned/positioned
|
||||
</test-fit>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="inline-positioned-xy">
|
||||
<template>
|
||||
<test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;left:100px;top:100px;">
|
||||
Sized (x/y), positioned/positioned
|
||||
</test-fit>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="sectioned">
|
||||
<template>
|
||||
<test-fit auto-fit-on-attach class="sized-x">
|
||||
<div>
|
||||
Sized (x), auto center/center with scrolling section
|
||||
</div>
|
||||
<div class="internal"></div>
|
||||
</test-fit>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="constrain-target">
|
||||
<template>
|
||||
<div class="constrain">
|
||||
<test-fit auto-fit-on-attach class="el sized-x sized-y">
|
||||
<div>
|
||||
Auto center/center to parent element
|
||||
</div>
|
||||
</test-fit>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="offscreen-container">
|
||||
<template>
|
||||
<div style="position: fixed; top: -1px; left: 0;">
|
||||
<test-fit auto-fit-on-attach class="el sized-x">
|
||||
<div>
|
||||
Sized (x), auto center/center, container is offscreen
|
||||
</div>
|
||||
</test-fit>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<template id="ipsum">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
function makeScrolling(el) {
|
||||
el.classList.add('scrolling');
|
||||
var template = document.getElementById('ipsum');
|
||||
for (var i = 0; i < 20; i++) {
|
||||
el.appendChild(template.content.cloneNode(true));
|
||||
}
|
||||
}
|
||||
|
||||
function intersects(r1, r2) {
|
||||
return !(r2.left >= r1.right || r2.right <= r1.left || r2.top >= r1.bottom || r2.bottom <= r1.top);
|
||||
}
|
||||
|
||||
suite('manual positioning', function() {
|
||||
|
||||
test('css positioned element is not re-positioned', function() {
|
||||
var el = fixture('positioned-xy');
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, 100, 'top is unset');
|
||||
assert.equal(rect.left, 100, 'left is unset');
|
||||
|
||||
});
|
||||
|
||||
test('inline positioned element is not re-positioned', function() {
|
||||
var el = fixture('inline-positioned-xy');
|
||||
var rect = el.getBoundingClientRect();
|
||||
// need to measure document.body here because mocha sets a min-width on html,body, and
|
||||
// the element is positioned wrt to that by css
|
||||
var bodyRect = document.body.getBoundingClientRect();
|
||||
assert.equal(rect.top, 100, 'top is unset');
|
||||
assert.equal(rect.left, 100, 'left is unset');
|
||||
|
||||
el.refit();
|
||||
|
||||
rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, 100, 'top is unset after refit');
|
||||
assert.equal(rect.left, 100, 'left is unset after refit');
|
||||
|
||||
});
|
||||
|
||||
test('position property is preserved after', function() {
|
||||
var el = fixture('absolute');
|
||||
assert.equal(getComputedStyle(el).position, 'absolute', 'position:absolute is preserved');
|
||||
});
|
||||
});
|
||||
|
||||
suite('fit to window', function() {
|
||||
|
||||
test('sized element is centered in viewport', function() {
|
||||
var el = fixture('sized-xy');
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
|
||||
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
|
||||
});
|
||||
|
||||
test('sized element with margin is centered in viewport', function() {
|
||||
var el = fixture('sized-xy');
|
||||
el.classList.add('with-margin');
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
|
||||
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
|
||||
});
|
||||
|
||||
test('sized element with transformed parent is centered in viewport', function() {
|
||||
var constrain = fixture('constrain-target');
|
||||
var el = Polymer.dom(constrain).querySelector('.el');
|
||||
var rectBefore = el.getBoundingClientRect();
|
||||
constrain.style.transform = 'translate3d(5px, 5px, 0)';
|
||||
el.center();
|
||||
var rectAfter = el.getBoundingClientRect();
|
||||
assert.equal(rectBefore.top, rectAfter.top, 'top ok');
|
||||
assert.equal(rectBefore.bottom, rectAfter.bottom, 'bottom ok');
|
||||
assert.equal(rectBefore.left, rectAfter.left, 'left ok');
|
||||
assert.equal(rectBefore.right, rectAfter.right, 'right ok');
|
||||
});
|
||||
|
||||
test('scrolling element is centered in viewport', function() {
|
||||
var el = fixture('sized-x');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
|
||||
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
|
||||
});
|
||||
|
||||
test('scrolling element is constrained to viewport height', function() {
|
||||
var el = fixture('sized-x');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
test('scrolling element with offscreen container is constrained to viewport height', function() {
|
||||
var container = fixture('offscreen-container');
|
||||
var el = Polymer.dom(container).querySelector('.el')
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
test('scrolling element with max-height is centered in viewport', function() {
|
||||
var el = fixture('sized-x');
|
||||
el.classList.add('with-max-height');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
|
||||
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
|
||||
});
|
||||
|
||||
test('scrolling element with max-height respects max-height', function() {
|
||||
var el = fixture('sized-x');
|
||||
el.classList.add('with-max-height');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= 500, 'height is less than or equal to max-height');
|
||||
});
|
||||
|
||||
test('css positioned, scrolling element is constrained to viewport height (top,left)', function() {
|
||||
var el = fixture('positioned-xy');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
test('css positioned, scrolling element is constrained to viewport height (bottom, right)', function() {
|
||||
var el = fixture('sized-x');
|
||||
el.classList.add('positioned-bottom');
|
||||
el.classList.add('positioned-right');
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
test('sized, scrolling element with margin is centered in viewport', function() {
|
||||
var el = fixture('sized-x');
|
||||
el.classList.add('with-margin');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
|
||||
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
|
||||
});
|
||||
|
||||
test('sized, scrolling element is constrained to viewport height', function() {
|
||||
var el = fixture('sized-x');
|
||||
el.classList.add('with-margin');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight - 20 * 2, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
test('css positioned, scrolling element with margin is constrained to viewport height (top, left)', function() {
|
||||
var el = fixture('positioned-xy');
|
||||
el.classList.add('with-margin');
|
||||
makeScrolling(el);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
test('css positioned, scrolling element with margin is constrained to viewport height (bottom, right)', function() {
|
||||
var el = fixture('sized-x');
|
||||
el.classList.add('positioned-bottom');
|
||||
el.classList.add('positioned-right');
|
||||
el.classList.add('with-margin')
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
test('scrolling sizingTarget is constrained to viewport height', function() {
|
||||
el = fixture('sectioned');
|
||||
var internal = Polymer.dom(el).querySelector('.internal');
|
||||
el.sizingTarget = internal;
|
||||
makeScrolling(internal);
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('fit to element', function() {
|
||||
|
||||
test('element fits in another element', function() {
|
||||
var constrain = fixture('constrain-target');
|
||||
var el = Polymer.dom(constrain).querySelector('.el')
|
||||
makeScrolling(el);
|
||||
el.fitInto = constrain;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
var crect = constrain.getBoundingClientRect();
|
||||
assert.isTrue(rect.height <= crect.height, 'width is less than or equal to fitInto width');
|
||||
assert.isTrue(rect.height <= crect.height, 'height is less than or equal to fitInto height');
|
||||
});
|
||||
|
||||
test('element centers in another element', function() {
|
||||
var constrain = fixture('constrain-target');
|
||||
var el = Polymer.dom(constrain).querySelector('.el');
|
||||
makeScrolling(el);
|
||||
el.fitInto = constrain;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
var crect = constrain.getBoundingClientRect();
|
||||
assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
|
||||
assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
|
||||
});
|
||||
|
||||
test('element with max-width centers in another element', function() {
|
||||
var constrain = document.querySelector('.constrain');
|
||||
var el = fixture('sized-xy');
|
||||
el.classList.add('with-max-width');
|
||||
el.fitInto = constrain;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
var crect = constrain.getBoundingClientRect();
|
||||
assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
|
||||
assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('horizontal/vertical align', function() {
|
||||
var parent, parentRect;
|
||||
var el, elRect;
|
||||
var fitRect = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: window.innerWidth,
|
||||
bottom: window.innerHeight,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
};
|
||||
|
||||
setup(function() {
|
||||
parent = fixture('constrain-target');
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el = Polymer.dom(parent).querySelector('.el');
|
||||
elRect = el.getBoundingClientRect();
|
||||
});
|
||||
|
||||
test('intersects works', function() {
|
||||
var base = {top: 0, bottom: 1, left:0, right: 1};
|
||||
assert.isTrue(intersects(base, base), 'intersects itself');
|
||||
assert.isFalse(intersects(base, {top:1, bottom: 2, left: 0, right: 1}), 'no intersect on edge');
|
||||
assert.isFalse(intersects(base, {top:-2, bottom: -1, left: 0, right: 1}), 'no intersect on edge (negative values)');
|
||||
assert.isFalse(intersects(base, {top:2, bottom: 3, left: 0, right: 1}), 'no intersect');
|
||||
});
|
||||
|
||||
suite('when verticalAlign is top', function() {
|
||||
test('element is aligned to the positionTarget top', function() {
|
||||
el.verticalAlign = 'top';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, parentRect.top, 'top ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('element is aligned to the positionTarget top without overlapping it', function() {
|
||||
// Allow enough space on the parent's bottom & right.
|
||||
parent.style.width = '10px';
|
||||
parent.style.height = '10px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.verticalAlign = 'top';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('element margin is considered as offset', function() {
|
||||
el.verticalAlign = 'top';
|
||||
el.style.marginTop = '10px';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, parentRect.top + 10, 'top ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
|
||||
el.style.marginTop = '-10px';
|
||||
el.refit();
|
||||
rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, parentRect.top - 10, 'top ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('verticalOffset is applied', function() {
|
||||
el.verticalAlign = 'top';
|
||||
el.verticalOffset = 10;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, parentRect.top + 10, 'top ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('max-height is updated', function() {
|
||||
parent.style.top = '-10px';
|
||||
el.verticalAlign = 'top';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, 0, 'top ok');
|
||||
assert.isBelow(rect.height, elRect.height, 'height ok');
|
||||
});
|
||||
|
||||
test('min-height is respected: element is hidden if does not have enough height', function() {
|
||||
parent.style.top = '-10px';
|
||||
el.verticalAlign = 'top';
|
||||
el.style.minHeight = elRect.height + 'px';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, fitRect), 'not visible');
|
||||
});
|
||||
});
|
||||
|
||||
suite('when verticalAlign is bottom', function() {
|
||||
test('element is aligned to the positionTarget bottom', function() {
|
||||
el.verticalAlign = 'bottom';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.bottom, parentRect.bottom, 'bottom ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('element is aligned to the positionTarget bottom without overlapping it', function() {
|
||||
el.verticalAlign = 'bottom';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('element margin is considered as offset', function() {
|
||||
el.verticalAlign = 'bottom';
|
||||
el.style.marginBottom = '10px';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.bottom, parentRect.bottom - 10, 'bottom ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
|
||||
el.style.marginBottom = '-10px';
|
||||
el.refit();
|
||||
rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.bottom, parentRect.bottom + 10, 'bottom ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('verticalOffset is applied', function() {
|
||||
el.verticalAlign = 'bottom';
|
||||
el.verticalOffset = 10;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.bottom, parentRect.bottom - 10, 'bottom ok');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('element max-height is updated', function() {
|
||||
parent.style.top = (100 - parentRect.height) + 'px';
|
||||
el.verticalAlign = 'bottom';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.bottom, 100, 'bottom ok');
|
||||
assert.equal(rect.height, 100, 'height ok');
|
||||
});
|
||||
|
||||
test('min-height is respected: element is hidden if does not have enough height', function() {
|
||||
parent.style.top = (elRect.height - 10 - parentRect.height) + 'px';
|
||||
el.verticalAlign = 'bottom';
|
||||
el.style.minHeight = elRect.height + 'px';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, fitRect), 'not visible');
|
||||
});
|
||||
});
|
||||
|
||||
suite('when verticalAlign is auto', function() {
|
||||
test('element is aligned to the positionTarget top', function() {
|
||||
el.verticalAlign = 'auto';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.top, parentRect.top, 'auto aligned to top');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('element is aligned to the positionTarget top without overlapping it', function() {
|
||||
// Allow enough space on the parent's bottom & right.
|
||||
parent.style.width = '10px';
|
||||
parent.style.height = '10px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.verticalAlign = 'auto';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
});
|
||||
|
||||
test('bottom is preferred to top if it diminishes the cropped area', function() {
|
||||
// This would cause a cropping of the element, so it should automatically
|
||||
// align to the bottom to avoid it.
|
||||
parent.style.top = '-10px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.verticalAlign = 'auto';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.bottom, parentRect.bottom, 'auto aligned to bottom');
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
});
|
||||
|
||||
test('bottom is preferred to top if it diminishes the cropped area, without overlapping positionTarget', function() {
|
||||
// This would cause a cropping of the element, so it should automatically
|
||||
// align to the bottom to avoid it.
|
||||
parent.style.top = '-10px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.verticalAlign = 'auto';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.height, elRect.height, 'no cropping');
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
});
|
||||
});
|
||||
|
||||
suite('when horizontalAlign is left', function() {
|
||||
test('element is aligned to the positionTarget left', function() {
|
||||
el.horizontalAlign = 'left';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.left, parentRect.left, 'left ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('element is aligned to the positionTarget left without overlapping it', function() {
|
||||
// Make space at the parent's right.
|
||||
parent.style.width = '10px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.horizontalAlign = 'left';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('element margin is considered as offset', function() {
|
||||
el.horizontalAlign = 'left';
|
||||
el.style.marginLeft = '10px';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.left, parentRect.left + 10, 'left ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
|
||||
el.style.marginLeft = '-10px';
|
||||
el.refit();
|
||||
rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.left, parentRect.left - 10, 'left ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('horizontalOffset is applied', function() {
|
||||
el.horizontalAlign = 'left';
|
||||
el.horizontalOffset = 10;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.left, parentRect.left + 10, 'left ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('element max-width is updated', function() {
|
||||
parent.style.left = '-10px';
|
||||
el.horizontalAlign = 'left';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.left, 0, 'left ok');
|
||||
assert.isBelow(rect.width, elRect.width, 'width ok');
|
||||
});
|
||||
|
||||
test('min-width is respected: element is hidden if does not have enough width', function() {
|
||||
parent.style.left = '-10px';
|
||||
el.style.minWidth = elRect.width + 'px';
|
||||
el.horizontalAlign = 'left';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, fitRect), 'not visible');
|
||||
});
|
||||
});
|
||||
|
||||
suite('when horizontalAlign is right', function() {
|
||||
test('element is aligned to the positionTarget right', function() {
|
||||
el.horizontalAlign = 'right';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.right, parentRect.right, 'right ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('element is aligned to the positionTarget right without overlapping it', function() {
|
||||
// Make space at the parent's left.
|
||||
parent.style.left = elRect.width + 'px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.horizontalAlign = 'right';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('element margin is considered as offset', function() {
|
||||
el.horizontalAlign = 'right';
|
||||
el.style.marginRight = '10px';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.right, parentRect.right - 10, 'right ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
|
||||
el.style.marginRight = '-10px';
|
||||
el.refit();
|
||||
rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.right, parentRect.right + 10, 'right ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('horizontalOffset is applied', function() {
|
||||
el.horizontalAlign = 'right';
|
||||
el.horizontalOffset = 10;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.right, parentRect.right - 10, 'right ok');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('element max-width is updated', function() {
|
||||
parent.style.left = (100 - parentRect.width) + 'px';
|
||||
el.horizontalAlign = 'right';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.right, 100, 'right ok');
|
||||
assert.equal(rect.width, 100, 'width ok');
|
||||
});
|
||||
|
||||
test('min-width is respected: element is hidden if does not have enough width', function() {
|
||||
parent.style.left = (elRect.width - 10 - parentRect.width) + 'px';
|
||||
el.horizontalAlign = 'right';
|
||||
el.style.minWidth = elRect.width + 'px';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.isFalse(intersects(rect, fitRect), 'not visible');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('when horizontalAlign is auto', function() {
|
||||
test('element is aligned to the positionTarget left', function() {
|
||||
el.horizontalAlign = 'auto';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.left, parentRect.left, 'auto aligned to left');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('element is aligned to the positionTarget left without overlapping positionTarget', function() {
|
||||
// Make space at the parent's left.
|
||||
parent.style.left = elRect.width + 'px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.horizontalAlign = 'auto';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
});
|
||||
|
||||
test('right is preferred to left if it diminishes the cropped area', function() {
|
||||
// This would cause a cropping of the element, so it should automatically
|
||||
// align to the right to avoid it.
|
||||
parent.style.left = '-10px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.horizontalAlign = 'auto';
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.right, parentRect.right, 'auto aligned to right');
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
});
|
||||
|
||||
test('right is preferred to left if it diminishes the cropped area, without overlapping positionTarget', function() {
|
||||
// Make space at the parent's right.
|
||||
parent.style.width = '10px';
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
el.horizontalAlign = 'auto';
|
||||
el.noOverlap = true;
|
||||
el.refit();
|
||||
var rect = el.getBoundingClientRect();
|
||||
assert.equal(rect.width, elRect.width, 'no cropping');
|
||||
assert.isFalse(intersects(rect, parentRect), 'no overlap');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,42 +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="../iron-fit-behavior.html">
|
||||
|
||||
<dom-module id="test-fit">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'test-fit',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronFitBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,47 +0,0 @@
|
||||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.7.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
"main": "iron-overlay-behavior.html",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"behavior",
|
||||
"overlay"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-overlay-behavior.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-fit-behavior": "PolymerElements/iron-fit-behavior#^1.0.0",
|
||||
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||
"_release": "1.7.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.7.1",
|
||||
"commit": "4655445cb91e19ef3cdae247ded2ffc9f50b46a8"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-overlay-behavior"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-overlay-behavior/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
@ -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: H8AA9JkWfG/vc3MiimoIoYi45KD10hKzitLJnExkomgzFI/f5o9SGtwjCii5P8Kvf4xndftDjYwRgbYyJpSg0IJeq8rm1WS89cY8O6/1dlI/tK1j5xbVRrhqmRQncxUb3K4MAT6Z9br1jwEeamRa+NKmq+v+VEpQY5vwuQ/BHJw=
|
||||
- secure: EaE1AUVgWyn0Y6kqkb54z5r39RvTJzAOmeM0lRl7wXzr5k0mq3VGlxTksJqCVd1PdJESXEhy8eldBnlkwZir/imDTNQxKm13k7ZiFC0000XAzpLZElkH2cLlYCRWcuM+vS7dA9hytV0UcGK2VGqbxfpcesB20dPSneDEUuc5X64=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run 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,37 +0,0 @@
|
||||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.7.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
"main": "iron-overlay-behavior.html",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"behavior",
|
||||
"overlay"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-overlay-behavior.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-fit-behavior": "PolymerElements/iron-fit-behavior#^1.0.0",
|
||||
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,179 +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>simple-overlay demo</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="simple-overlay.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
demo-snippet {
|
||||
--demo-snippet-code: {
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body unresolved class="centered">
|
||||
|
||||
<h3>An element with <code>IronOverlayBehavior</code> can be opened, closed, toggled.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="plain.open()">Plain overlay</button>
|
||||
<simple-overlay id="plain" tabindex=-1>
|
||||
<h2>Hello world!</h2>
|
||||
<p>This can be closed by pressing the ESC key too.</p>
|
||||
<button onclick="plain.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Use <code>with-backdrop</code> to add a backdrop to your overlay. Tabbing will be trapped within the overlay.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="backdrop.open()">Overlay with backdrop</button>
|
||||
<simple-overlay id="backdrop" with-backdrop>
|
||||
<p>Hello world!</p>
|
||||
<button>Button</button>
|
||||
<button onclick="backdrop.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Use <code>restore-focus-on-close</code> to return the focus to the element that opened the overlay when it gets closed.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="returnFocus.open()">Overlay that restores focus</button>
|
||||
<simple-overlay id="returnFocus" restore-focus-on-close>
|
||||
<p>Hello world!</p>
|
||||
<button onclick="returnFocus.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="withAutofocus.open()">Overlay with autofocus child</button>
|
||||
<simple-overlay id="withAutofocus">
|
||||
<p>Hello world!</p>
|
||||
<button autofocus>autofocus</button>
|
||||
<button onclick="withAutofocus.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Multiple overlays can be opened.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="multiple.open()">Open first overlay</button>
|
||||
<simple-overlay id="multiple" tabindex=-1>
|
||||
<p>click to open another overlay</p>
|
||||
<button onclick="multiple2.open()">Open second overlay</button>
|
||||
<button onclick="multiple.close()">Close this</button>
|
||||
</simple-overlay>
|
||||
<simple-overlay id="multiple2" tabindex=-1>
|
||||
<h2>Hi!</h2>
|
||||
<button onclick="multiple2.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Use <code>always-on-top</code> to keep the overlay on top of others.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="onTop.open()">Open always-on-top</button>
|
||||
<simple-overlay id="onTop" always-on-top tabindex=-1>
|
||||
<h2>Always on top</h2>
|
||||
<button onclick="backdrop2.open()">Open with backdrop</button>
|
||||
<button onclick="onTop.close()">Close this</button>
|
||||
</simple-overlay>
|
||||
<simple-overlay id="backdrop2" with-backdrop tabindex=-1>
|
||||
<h2>With backdrop</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<button onclick="backdrop2.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>An element with <code>IronOverlayBehavior</code> can be scrollable or contain scrollable content.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style>
|
||||
.with-margin {
|
||||
margin: 24px 40px;
|
||||
}
|
||||
.scrollable {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<button onclick="scrolling.open()">Scrolling overlay</button>
|
||||
|
||||
<simple-overlay id="scrolling" class="with-margin scrollable" tabindex=-1>
|
||||
<h2>This dialog scrolls internally.</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<button onclick="scrolling.close()">Close</button>
|
||||
</simple-overlay>
|
||||
|
||||
<button onclick="scrolling2.open()">Scrolling content</button>
|
||||
|
||||
<simple-overlay id="scrolling2" class="with-margin" tabindex=-1>
|
||||
<h2>This dialog has a scrolling child.</h2>
|
||||
<div class="scrollable">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<p>
|
||||
<button onclick="scrolling2.close()">Close</button>
|
||||
</p>
|
||||
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -1,49 +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="../iron-overlay-behavior.html">
|
||||
|
||||
<dom-module id="simple-overlay">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 24px;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) -2.3408942051048403px 5.524510324047423px 12.090680100755666px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'simple-overlay',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronOverlayBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
@ -1,30 +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>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<title>iron-overlay-behavior</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,168 +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">
|
||||
|
||||
<!--
|
||||
`iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It should be a
|
||||
singleton.
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling.
|
||||
|
||||
Custom property | Description | Default
|
||||
-------------------------------------------|------------------------|---------
|
||||
`--iron-overlay-backdrop-background-color` | Backdrop background color | #000
|
||||
`--iron-overlay-backdrop-opacity` | Backdrop opacity | 0.6
|
||||
`--iron-overlay-backdrop` | Mixin applied to `iron-overlay-backdrop`. | {}
|
||||
`--iron-overlay-backdrop-opened` | Mixin applied to `iron-overlay-backdrop` when it is displayed | {}
|
||||
-->
|
||||
|
||||
<dom-module id="iron-overlay-backdrop">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--iron-overlay-backdrop-background-color, #000);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
@apply(--iron-overlay-backdrop);
|
||||
}
|
||||
|
||||
:host(.opened) {
|
||||
opacity: var(--iron-overlay-backdrop-opacity, 0.6);
|
||||
pointer-events: auto;
|
||||
@apply(--iron-overlay-backdrop-opened);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'iron-overlay-backdrop',
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Returns true if the backdrop is opened.
|
||||
*/
|
||||
opened: {
|
||||
reflectToAttribute: true,
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: '_openedChanged'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'transitionend': '_onTransitionend'
|
||||
},
|
||||
|
||||
created: function() {
|
||||
// Used to cancel previous requestAnimationFrame calls when opened changes.
|
||||
this.__openedRaf = null;
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this.opened && this._openedChanged(this.opened);
|
||||
},
|
||||
|
||||
/**
|
||||
* Appends the backdrop to document body if needed.
|
||||
*/
|
||||
prepare: function() {
|
||||
if (this.opened && !this.parentNode) {
|
||||
Polymer.dom(document.body).appendChild(this);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows the backdrop.
|
||||
*/
|
||||
open: function() {
|
||||
this.opened = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Hides the backdrop.
|
||||
*/
|
||||
close: function() {
|
||||
this.opened = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes the backdrop from document body if needed.
|
||||
*/
|
||||
complete: function() {
|
||||
if (!this.opened && this.parentNode === document.body) {
|
||||
Polymer.dom(this.parentNode).removeChild(this);
|
||||
}
|
||||
},
|
||||
|
||||
_onTransitionend: function(event) {
|
||||
if (event && event.target === this) {
|
||||
this.complete();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {boolean} opened
|
||||
* @private
|
||||
*/
|
||||
_openedChanged: function(opened) {
|
||||
if (opened) {
|
||||
// Auto-attach.
|
||||
this.prepare();
|
||||
} else {
|
||||
// Animation might be disabled via the mixin or opacity custom property.
|
||||
// If it is disabled in other ways, it's up to the user to call complete.
|
||||
var cs = window.getComputedStyle(this);
|
||||
if (cs.transitionDuration === '0s' || cs.opacity == 0) {
|
||||
this.complete();
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.isAttached) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Always cancel previous requestAnimationFrame.
|
||||
if (this.__openedRaf) {
|
||||
window.cancelAnimationFrame(this.__openedRaf);
|
||||
this.__openedRaf = null;
|
||||
}
|
||||
// Force relayout to ensure proper transitions.
|
||||
this.scrollTop = this.scrollTop;
|
||||
this.__openedRaf = window.requestAnimationFrame(function() {
|
||||
this.__openedRaf = null;
|
||||
this.toggleClass('opened', this.opened);
|
||||
}.bind(this));
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
@ -1,582 +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="../iron-fit-behavior/iron-fit-behavior.html">
|
||||
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
|
||||
<link rel="import" href="iron-overlay-manager.html">
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or shown, and displays
|
||||
on top of other content. It includes an optional backdrop, and can be used to implement a variety
|
||||
of UI controls including dialogs and drop downs. Multiple overlays may be displayed at once.
|
||||
|
||||
### Closing and canceling
|
||||
|
||||
A dialog may be hidden by closing or canceling. The difference between close and cancel is user
|
||||
intent. Closing generally implies that the user acknowledged the content on the overlay. By default,
|
||||
it will cancel whenever the user taps outside it or presses the escape key. This behavior is
|
||||
configurable with the `no-cancel-on-esc-key` and the `no-cancel-on-outside-click` properties.
|
||||
`close()` should be called explicitly by the implementer when the user interacts with a control
|
||||
in the overlay element. When the dialog is canceled, the overlay fires an 'iron-overlay-canceled'
|
||||
event. Call `preventDefault` on this event to prevent the overlay from closing.
|
||||
|
||||
### Positioning
|
||||
|
||||
By default the element is sized and positioned to fit and centered inside the window. You can
|
||||
position and size it manually using CSS. See `Polymer.IronFitBehavior`.
|
||||
|
||||
### Backdrop
|
||||
|
||||
Set the `with-backdrop` attribute to display a backdrop behind the overlay. The backdrop is
|
||||
appended to `<body>` and is of type `<iron-overlay-backdrop>`. See its doc page for styling
|
||||
options.
|
||||
|
||||
### Limitations
|
||||
|
||||
The element is styled to appear on top of other content by setting its `z-index` property. You
|
||||
must ensure no element has a stacking context with a higher `z-index` than its parent stacking
|
||||
context. You should place this element as a child of `<body>` whenever possible.
|
||||
|
||||
@demo demo/index.html
|
||||
@polymerBehavior Polymer.IronOverlayBehavior
|
||||
*/
|
||||
|
||||
Polymer.IronOverlayBehaviorImpl = {
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* True if the overlay is currently displayed.
|
||||
*/
|
||||
opened: {
|
||||
observer: '_openedChanged',
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the overlay was canceled when it was last closed.
|
||||
*/
|
||||
canceled: {
|
||||
observer: '_canceledChanged',
|
||||
readOnly: true,
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to display a backdrop behind the overlay.
|
||||
*/
|
||||
withBackdrop: {
|
||||
observer: '_withBackdropChanged',
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable auto-focusing the overlay or child nodes with
|
||||
* the `autofocus` attribute` when the overlay is opened.
|
||||
*/
|
||||
noAutoFocus: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable canceling the overlay with the ESC key.
|
||||
*/
|
||||
noCancelOnEscKey: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable canceling the overlay by clicking outside it.
|
||||
*/
|
||||
noCancelOnOutsideClick: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Contains the reason(s) this overlay was last closed (see `iron-overlay-closed`).
|
||||
* `IronOverlayBehavior` provides the `canceled` reason; implementers of the
|
||||
* behavior can provide other reasons in addition to `canceled`.
|
||||
*/
|
||||
closingReason: {
|
||||
// was a getter before, but needs to be a property so other
|
||||
// behaviors can override this.
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to enable restoring of focus when overlay is closed.
|
||||
*/
|
||||
restoreFocusOnClose: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to keep overlay always on top.
|
||||
*/
|
||||
alwaysOnTop: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
/**
|
||||
* Shortcut to access to the overlay manager.
|
||||
* @private
|
||||
* @type {Polymer.IronOverlayManagerClass}
|
||||
*/
|
||||
_manager: {
|
||||
type: Object,
|
||||
value: Polymer.IronOverlayManager
|
||||
},
|
||||
|
||||
/**
|
||||
* The node being focused.
|
||||
* @type {?Node}
|
||||
*/
|
||||
_focusedChild: {
|
||||
type: Object
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'iron-resize': '_onIronResize'
|
||||
},
|
||||
|
||||
/**
|
||||
* The backdrop element.
|
||||
* @type {Element}
|
||||
*/
|
||||
get backdropElement() {
|
||||
return this._manager.backdropElement;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the node to give focus to.
|
||||
* @type {Node}
|
||||
*/
|
||||
get _focusNode() {
|
||||
return this._focusedChild || Polymer.dom(this).querySelector('[autofocus]') || this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Array of nodes that can receive focus (overlay included), ordered by `tabindex`.
|
||||
* This is used to retrieve which is the first and last focusable nodes in order
|
||||
* to wrap the focus for overlays `with-backdrop`.
|
||||
*
|
||||
* If you know what is your content (specifically the first and last focusable children),
|
||||
* you can override this method to return only `[firstFocusable, lastFocusable];`
|
||||
* @type {Array<Node>}
|
||||
* @protected
|
||||
*/
|
||||
get _focusableNodes() {
|
||||
// Elements that can be focused even if they have [disabled] attribute.
|
||||
var FOCUSABLE_WITH_DISABLED = [
|
||||
'a[href]',
|
||||
'area[href]',
|
||||
'iframe',
|
||||
'[tabindex]',
|
||||
'[contentEditable=true]'
|
||||
];
|
||||
|
||||
// Elements that cannot be focused if they have [disabled] attribute.
|
||||
var FOCUSABLE_WITHOUT_DISABLED = [
|
||||
'input',
|
||||
'select',
|
||||
'textarea',
|
||||
'button'
|
||||
];
|
||||
|
||||
// Discard elements with tabindex=-1 (makes them not focusable).
|
||||
var selector = FOCUSABLE_WITH_DISABLED.join(':not([tabindex="-1"]),') +
|
||||
':not([tabindex="-1"]),' +
|
||||
FOCUSABLE_WITHOUT_DISABLED.join(':not([disabled]):not([tabindex="-1"]),') +
|
||||
':not([disabled]):not([tabindex="-1"])';
|
||||
|
||||
var focusables = Polymer.dom(this).querySelectorAll(selector);
|
||||
if (this.tabIndex >= 0) {
|
||||
// Insert at the beginning because we might have all elements with tabIndex = 0,
|
||||
// and the overlay should be the first of the list.
|
||||
focusables.splice(0, 0, this);
|
||||
}
|
||||
// Sort by tabindex.
|
||||
return focusables.sort(function (a, b) {
|
||||
if (a.tabIndex === b.tabIndex) {
|
||||
return 0;
|
||||
}
|
||||
if (a.tabIndex === 0 || a.tabIndex > b.tabIndex) {
|
||||
return 1;
|
||||
}
|
||||
return -1;
|
||||
});
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// Used to skip calls to notifyResize and refit while the overlay is animating.
|
||||
this.__isAnimating = false;
|
||||
// with-backdrop needs tabindex to be set in order to trap the focus.
|
||||
// If it is not set, IronOverlayBehavior will set it, and remove it if with-backdrop = false.
|
||||
this.__shouldRemoveTabIndex = false;
|
||||
// Used for wrapping the focus on TAB / Shift+TAB.
|
||||
this.__firstFocusableNode = this.__lastFocusableNode = null;
|
||||
// Used for requestAnimationFrame when opened changes.
|
||||
this.__openChangedAsync = null;
|
||||
// Used for requestAnimationFrame when iron-resize is fired.
|
||||
this.__onIronResizeAsync = null;
|
||||
this._ensureSetup();
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
// Call _openedChanged here so that position can be computed correctly.
|
||||
if (this.opened) {
|
||||
this._openedChanged();
|
||||
}
|
||||
this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
Polymer.dom(this).unobserveNodes(this._observer);
|
||||
this._observer = null;
|
||||
this.opened = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the opened state of the overlay.
|
||||
*/
|
||||
toggle: function() {
|
||||
this._setCanceled(false);
|
||||
this.opened = !this.opened;
|
||||
},
|
||||
|
||||
/**
|
||||
* Open the overlay.
|
||||
*/
|
||||
open: function() {
|
||||
this._setCanceled(false);
|
||||
this.opened = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the overlay.
|
||||
*/
|
||||
close: function() {
|
||||
this._setCanceled(false);
|
||||
this.opened = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancels the overlay.
|
||||
* @param {Event=} event The original event
|
||||
*/
|
||||
cancel: function(event) {
|
||||
var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
|
||||
if (cancelEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._setCanceled(true);
|
||||
this.opened = false;
|
||||
},
|
||||
|
||||
_ensureSetup: function() {
|
||||
if (this._overlaySetup) {
|
||||
return;
|
||||
}
|
||||
this._overlaySetup = true;
|
||||
this.style.outline = 'none';
|
||||
this.style.display = 'none';
|
||||
},
|
||||
|
||||
_openedChanged: function() {
|
||||
if (this.opened) {
|
||||
this.removeAttribute('aria-hidden');
|
||||
} else {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
// wait to call after ready only if we're initially open
|
||||
if (!this._overlaySetup) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._manager.addOrRemoveOverlay(this);
|
||||
|
||||
if (this.__openChangedAsync) {
|
||||
window.cancelAnimationFrame(this.__openChangedAsync);
|
||||
}
|
||||
|
||||
// Defer any animation-related code on attached
|
||||
// (_openedChanged gets called again on attached).
|
||||
if (!this.isAttached) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.__isAnimating = true;
|
||||
|
||||
if (this.opened) {
|
||||
// requestAnimationFrame for non-blocking rendering
|
||||
this.__openChangedAsync = window.requestAnimationFrame(function() {
|
||||
this.__openChangedAsync = null;
|
||||
this._prepareRenderOpened();
|
||||
this._renderOpened();
|
||||
}.bind(this));
|
||||
} else {
|
||||
this._renderClosed();
|
||||
}
|
||||
},
|
||||
|
||||
_canceledChanged: function() {
|
||||
this.closingReason = this.closingReason || {};
|
||||
this.closingReason.canceled = this.canceled;
|
||||
},
|
||||
|
||||
_withBackdropChanged: function() {
|
||||
// If tabindex is already set, no need to override it.
|
||||
if (this.withBackdrop && !this.hasAttribute('tabindex')) {
|
||||
this.setAttribute('tabindex', '-1');
|
||||
this.__shouldRemoveTabIndex = true;
|
||||
} else if (this.__shouldRemoveTabIndex) {
|
||||
this.removeAttribute('tabindex');
|
||||
this.__shouldRemoveTabIndex = false;
|
||||
}
|
||||
if (this.opened) {
|
||||
this._manager.trackBackdrop();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* tasks which must occur before opening; e.g. making the element visible.
|
||||
* @protected
|
||||
*/
|
||||
_prepareRenderOpened: function() {
|
||||
|
||||
// Needed to calculate the size of the overlay so that transitions on its size
|
||||
// will have the correct starting points.
|
||||
this._preparePositioning();
|
||||
this.refit();
|
||||
this._finishPositioning();
|
||||
|
||||
// Safari will apply the focus to the autofocus element when displayed for the first time,
|
||||
// so we blur it. Later, _applyFocus will set the focus if necessary.
|
||||
if (this.noAutoFocus && document.activeElement === this._focusNode) {
|
||||
this._focusNode.blur();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Tasks which cause the overlay to actually open; typically play an animation.
|
||||
* @protected
|
||||
*/
|
||||
_renderOpened: function() {
|
||||
this._finishRenderOpened();
|
||||
},
|
||||
|
||||
/**
|
||||
* Tasks which cause the overlay to actually close; typically play an animation.
|
||||
* @protected
|
||||
*/
|
||||
_renderClosed: function() {
|
||||
this._finishRenderClosed();
|
||||
},
|
||||
|
||||
/**
|
||||
* Tasks to be performed at the end of open action. Will fire `iron-overlay-opened`.
|
||||
* @protected
|
||||
*/
|
||||
_finishRenderOpened: function() {
|
||||
// Focus the child node with [autofocus]
|
||||
this._applyFocus();
|
||||
|
||||
this.notifyResize();
|
||||
this.__isAnimating = false;
|
||||
this.fire('iron-overlay-opened');
|
||||
},
|
||||
|
||||
/**
|
||||
* Tasks to be performed at the end of close action. Will fire `iron-overlay-closed`.
|
||||
* @protected
|
||||
*/
|
||||
_finishRenderClosed: function() {
|
||||
// Hide the overlay and remove the backdrop.
|
||||
this.style.display = 'none';
|
||||
// Reset z-index only at the end of the animation.
|
||||
this.style.zIndex = '';
|
||||
|
||||
this._applyFocus();
|
||||
|
||||
this.notifyResize();
|
||||
this.__isAnimating = false;
|
||||
this.fire('iron-overlay-closed', this.closingReason);
|
||||
},
|
||||
|
||||
_preparePositioning: function() {
|
||||
this.style.transition = this.style.webkitTransition = 'none';
|
||||
this.style.transform = this.style.webkitTransform = 'none';
|
||||
this.style.display = '';
|
||||
},
|
||||
|
||||
_finishPositioning: function() {
|
||||
// First, make it invisible & reactivate animations.
|
||||
this.style.display = 'none';
|
||||
// Force reflow before re-enabling animations so that they don't start.
|
||||
// Set scrollTop to itself so that Closure Compiler doesn't remove this.
|
||||
this.scrollTop = this.scrollTop;
|
||||
this.style.transition = this.style.webkitTransition = '';
|
||||
this.style.transform = this.style.webkitTransform = '';
|
||||
// Now that animations are enabled, make it visible again
|
||||
this.style.display = '';
|
||||
// Force reflow, so that following animations are properly started.
|
||||
// Set scrollTop to itself so that Closure Compiler doesn't remove this.
|
||||
this.scrollTop = this.scrollTop;
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies focus according to the opened state.
|
||||
* @protected
|
||||
*/
|
||||
_applyFocus: function() {
|
||||
if (this.opened) {
|
||||
if (!this.noAutoFocus) {
|
||||
this._focusNode.focus();
|
||||
}
|
||||
} else {
|
||||
this._focusNode.blur();
|
||||
this._focusedChild = null;
|
||||
this._manager.focusOverlay();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancels (closes) the overlay. Call when click happens outside the overlay.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureClick: function(event) {
|
||||
if (!this.noCancelOnOutsideClick) {
|
||||
this.cancel(event);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Keeps track of the focused child. If withBackdrop, traps focus within overlay.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureFocus: function (event) {
|
||||
if (!this.withBackdrop) {
|
||||
return;
|
||||
}
|
||||
var path = Polymer.dom(event).path;
|
||||
if (path.indexOf(this) === -1) {
|
||||
event.stopPropagation();
|
||||
this._applyFocus();
|
||||
} else {
|
||||
this._focusedChild = path[0];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles the ESC key event and cancels (closes) the overlay.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureEsc: function(event) {
|
||||
if (!this.noCancelOnEscKey) {
|
||||
this.cancel(event);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles TAB key events to track focus changes.
|
||||
* Will wrap focus for overlays withBackdrop.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureTab: function(event) {
|
||||
// TAB wraps from last to first focusable.
|
||||
// Shift + TAB wraps from first to last focusable.
|
||||
var shift = event.shiftKey;
|
||||
var nodeToCheck = shift ? this.__firstFocusableNode : this.__lastFocusableNode;
|
||||
var nodeToSet = shift ? this.__lastFocusableNode : this.__firstFocusableNode;
|
||||
if (this.withBackdrop && this._focusedChild === nodeToCheck) {
|
||||
// We set here the _focusedChild so that _onCaptureFocus will handle the
|
||||
// wrapping of the focus (the next event after tab is focus).
|
||||
this._focusedChild = nodeToSet;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Refits if the overlay is opened and not animating.
|
||||
* @protected
|
||||
*/
|
||||
_onIronResize: function() {
|
||||
if (this.__onIronResizeAsync) {
|
||||
window.cancelAnimationFrame(this.__onIronResizeAsync);
|
||||
this.__onIronResizeAsync = null;
|
||||
}
|
||||
if (this.opened && !this.__isAnimating) {
|
||||
this.__onIronResizeAsync = window.requestAnimationFrame(function() {
|
||||
this.__onIronResizeAsync = null;
|
||||
this.refit();
|
||||
}.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Will call notifyResize if overlay is opened.
|
||||
* Can be overridden in order to avoid multiple observers on the same node.
|
||||
* @protected
|
||||
*/
|
||||
_onNodesChange: function() {
|
||||
if (this.opened && !this.__isAnimating) {
|
||||
this.notifyResize();
|
||||
}
|
||||
// Store it so we don't query too much.
|
||||
var focusableNodes = this._focusableNodes;
|
||||
this.__firstFocusableNode = focusableNodes[0];
|
||||
this.__lastFocusableNode = focusableNodes[focusableNodes.length - 1];
|
||||
}
|
||||
};
|
||||
|
||||
/** @polymerBehavior */
|
||||
Polymer.IronOverlayBehavior = [Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl];
|
||||
|
||||
/**
|
||||
* Fired after the overlay opens.
|
||||
* @event iron-overlay-opened
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the overlay is canceled, but before it is closed.
|
||||
* @event iron-overlay-canceled
|
||||
* @param {Event} event The closing of the overlay can be prevented
|
||||
* by calling `event.preventDefault()`. The `event.detail` is the original event that
|
||||
* originated the canceling (e.g. ESC keyboard event or click event outside the overlay).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired after the overlay closes.
|
||||
* @event iron-overlay-closed
|
||||
* @param {Event} event The `event.detail` is the `closingReason` property
|
||||
* (contains `canceled`, whether the overlay was canceled).
|
||||
*/
|
||||
|
||||
})();
|
||||
</script>
|
@ -1,402 +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="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="iron-overlay-backdrop.html">
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* @struct
|
||||
* @constructor
|
||||
* @private
|
||||
*/
|
||||
Polymer.IronOverlayManagerClass = function() {
|
||||
/**
|
||||
* Used to keep track of the opened overlays.
|
||||
* @private {Array<Element>}
|
||||
*/
|
||||
this._overlays = [];
|
||||
|
||||
/**
|
||||
* iframes have a default z-index of 100,
|
||||
* so this default should be at least that.
|
||||
* @private {number}
|
||||
*/
|
||||
this._minimumZ = 101;
|
||||
|
||||
/**
|
||||
* Memoized backdrop element.
|
||||
* @private {Element|null}
|
||||
*/
|
||||
this._backdropElement = null;
|
||||
|
||||
// Listen to mousedown or touchstart to be sure to be the first to capture
|
||||
// clicks outside the overlay.
|
||||
var clickEvent = ('ontouchstart' in window) ? 'touchstart' : 'mousedown';
|
||||
document.addEventListener(clickEvent, this._onCaptureClick.bind(this), true);
|
||||
document.addEventListener('focus', this._onCaptureFocus.bind(this), true);
|
||||
document.addEventListener('keydown', this._onCaptureKeyDown.bind(this), true);
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype = {
|
||||
|
||||
constructor: Polymer.IronOverlayManagerClass,
|
||||
|
||||
/**
|
||||
* The shared backdrop element.
|
||||
* @type {!Element} backdropElement
|
||||
*/
|
||||
get backdropElement() {
|
||||
if (!this._backdropElement) {
|
||||
this._backdropElement = document.createElement('iron-overlay-backdrop');
|
||||
}
|
||||
return this._backdropElement;
|
||||
},
|
||||
|
||||
/**
|
||||
* The deepest active element.
|
||||
* @type {!Element} activeElement the active element
|
||||
*/
|
||||
get deepActiveElement() {
|
||||
// document.activeElement can be null
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
|
||||
// In case of null, default it to document.body.
|
||||
var active = document.activeElement || document.body;
|
||||
while (active.root && Polymer.dom(active.root).activeElement) {
|
||||
active = Polymer.dom(active.root).activeElement;
|
||||
}
|
||||
return active;
|
||||
},
|
||||
|
||||
/**
|
||||
* Brings the overlay at the specified index to the front.
|
||||
* @param {number} i
|
||||
* @private
|
||||
*/
|
||||
_bringOverlayAtIndexToFront: function(i) {
|
||||
var overlay = this._overlays[i];
|
||||
if (!overlay) {
|
||||
return;
|
||||
}
|
||||
var lastI = this._overlays.length - 1;
|
||||
var currentOverlay = this._overlays[lastI];
|
||||
// Ensure always-on-top overlay stays on top.
|
||||
if (currentOverlay && this._shouldBeBehindOverlay(overlay, currentOverlay)) {
|
||||
lastI--;
|
||||
}
|
||||
// If already the top element, return.
|
||||
if (i >= lastI) {
|
||||
return;
|
||||
}
|
||||
// Update z-index to be on top.
|
||||
var minimumZ = Math.max(this.currentOverlayZ(), this._minimumZ);
|
||||
if (this._getZ(overlay) <= minimumZ) {
|
||||
this._applyOverlayZ(overlay, minimumZ);
|
||||
}
|
||||
|
||||
// Shift other overlays behind the new on top.
|
||||
while (i < lastI) {
|
||||
this._overlays[i] = this._overlays[i + 1];
|
||||
i++;
|
||||
}
|
||||
this._overlays[lastI] = overlay;
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds the overlay and updates its z-index if it's opened, or removes it if it's closed.
|
||||
* Also updates the backdrop z-index.
|
||||
* @param {!Element} overlay
|
||||
*/
|
||||
addOrRemoveOverlay: function(overlay) {
|
||||
if (overlay.opened) {
|
||||
this.addOverlay(overlay);
|
||||
} else {
|
||||
this.removeOverlay(overlay);
|
||||
}
|
||||
this.trackBackdrop();
|
||||
},
|
||||
|
||||
/**
|
||||
* Tracks overlays for z-index and focus management.
|
||||
* Ensures the last added overlay with always-on-top remains on top.
|
||||
* @param {!Element} overlay
|
||||
*/
|
||||
addOverlay: function(overlay) {
|
||||
var i = this._overlays.indexOf(overlay);
|
||||
if (i >= 0) {
|
||||
this._bringOverlayAtIndexToFront(i);
|
||||
return;
|
||||
}
|
||||
var insertionIndex = this._overlays.length;
|
||||
var currentOverlay = this._overlays[insertionIndex - 1];
|
||||
var minimumZ = Math.max(this._getZ(currentOverlay), this._minimumZ);
|
||||
var newZ = this._getZ(overlay);
|
||||
|
||||
// Ensure always-on-top overlay stays on top.
|
||||
if (currentOverlay && this._shouldBeBehindOverlay(overlay, currentOverlay)) {
|
||||
// This bumps the z-index of +2.
|
||||
this._applyOverlayZ(currentOverlay, minimumZ);
|
||||
insertionIndex--;
|
||||
// Update minimumZ to match previous overlay's z-index.
|
||||
var previousOverlay = this._overlays[insertionIndex - 1];
|
||||
minimumZ = Math.max(this._getZ(previousOverlay), this._minimumZ);
|
||||
}
|
||||
|
||||
// Update z-index and insert overlay.
|
||||
if (newZ <= minimumZ) {
|
||||
this._applyOverlayZ(overlay, minimumZ);
|
||||
}
|
||||
this._overlays.splice(insertionIndex, 0, overlay);
|
||||
|
||||
// Get focused node.
|
||||
var element = this.deepActiveElement;
|
||||
overlay.restoreFocusNode = this._overlayParent(element) ? null : element;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {!Element} overlay
|
||||
*/
|
||||
removeOverlay: function(overlay) {
|
||||
var i = this._overlays.indexOf(overlay);
|
||||
if (i === -1) {
|
||||
return;
|
||||
}
|
||||
this._overlays.splice(i, 1);
|
||||
|
||||
var node = overlay.restoreFocusOnClose ? overlay.restoreFocusNode : null;
|
||||
overlay.restoreFocusNode = null;
|
||||
// Focus back only if still contained in document.body
|
||||
if (node && Polymer.dom(document.body).deepContains(node)) {
|
||||
node.focus();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the current overlay.
|
||||
* @return {Element|undefined}
|
||||
*/
|
||||
currentOverlay: function() {
|
||||
var i = this._overlays.length - 1;
|
||||
return this._overlays[i];
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the current overlay z-index.
|
||||
* @return {number}
|
||||
*/
|
||||
currentOverlayZ: function() {
|
||||
return this._getZ(this.currentOverlay());
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensures that the minimum z-index of new overlays is at least `minimumZ`.
|
||||
* This does not effect the z-index of any existing overlays.
|
||||
* @param {number} minimumZ
|
||||
*/
|
||||
ensureMinimumZ: function(minimumZ) {
|
||||
this._minimumZ = Math.max(this._minimumZ, minimumZ);
|
||||
},
|
||||
|
||||
focusOverlay: function() {
|
||||
var current = /** @type {?} */ (this.currentOverlay());
|
||||
// We have to be careful to focus the next overlay _after_ any current
|
||||
// transitions are complete (due to the state being toggled prior to the
|
||||
// transition). Otherwise, we risk infinite recursion when a transitioning
|
||||
// (closed) overlay becomes the current overlay.
|
||||
//
|
||||
// NOTE: We make the assumption that any overlay that completes a transition
|
||||
// will call into focusOverlay to kick the process back off. Currently:
|
||||
// transitionend -> _applyFocus -> focusOverlay.
|
||||
if (current && !current.transitioning) {
|
||||
current._applyFocus();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the backdrop z-index.
|
||||
*/
|
||||
trackBackdrop: function() {
|
||||
var overlay = this._overlayWithBackdrop();
|
||||
// Avoid creating the backdrop if there is no overlay with backdrop.
|
||||
if (!overlay && !this._backdropElement) {
|
||||
return;
|
||||
}
|
||||
this.backdropElement.style.zIndex = this._getZ(overlay) - 1;
|
||||
this.backdropElement.opened = !!overlay;
|
||||
},
|
||||
|
||||
/**
|
||||
* @return {Array<Element>}
|
||||
*/
|
||||
getBackdrops: function() {
|
||||
var backdrops = [];
|
||||
for (var i = 0; i < this._overlays.length; i++) {
|
||||
if (this._overlays[i].withBackdrop) {
|
||||
backdrops.push(this._overlays[i]);
|
||||
}
|
||||
}
|
||||
return backdrops;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the z-index for the backdrop.
|
||||
* @return {number}
|
||||
*/
|
||||
backdropZ: function() {
|
||||
return this._getZ(this._overlayWithBackdrop()) - 1;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the first opened overlay that has a backdrop.
|
||||
* @return {Element|undefined}
|
||||
* @private
|
||||
*/
|
||||
_overlayWithBackdrop: function() {
|
||||
for (var i = 0; i < this._overlays.length; i++) {
|
||||
if (this._overlays[i].withBackdrop) {
|
||||
return this._overlays[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculates the minimum z-index for the overlay.
|
||||
* @param {Element=} overlay
|
||||
* @private
|
||||
*/
|
||||
_getZ: function(overlay) {
|
||||
var z = this._minimumZ;
|
||||
if (overlay) {
|
||||
var z1 = Number(overlay.style.zIndex || window.getComputedStyle(overlay).zIndex);
|
||||
// Check if is a number
|
||||
// Number.isNaN not supported in IE 10+
|
||||
if (z1 === z1) {
|
||||
z = z1;
|
||||
}
|
||||
}
|
||||
return z;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {!Element} element
|
||||
* @param {number|string} z
|
||||
* @private
|
||||
*/
|
||||
_setZ: function(element, z) {
|
||||
element.style.zIndex = z;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {!Element} overlay
|
||||
* @param {number} aboveZ
|
||||
* @private
|
||||
*/
|
||||
_applyOverlayZ: function(overlay, aboveZ) {
|
||||
this._setZ(overlay, aboveZ + 2);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the overlay containing the provided node. If the node is an overlay,
|
||||
* it returns the node.
|
||||
* @param {Element=} node
|
||||
* @return {Element|undefined}
|
||||
* @private
|
||||
*/
|
||||
_overlayParent: function(node) {
|
||||
while (node && node !== document.body) {
|
||||
// Check if it is an overlay.
|
||||
if (node._manager === this) {
|
||||
return node;
|
||||
}
|
||||
// Use logical parentNode, or native ShadowRoot host.
|
||||
node = Polymer.dom(node).parentNode || node.host;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the deepest overlay in the path.
|
||||
* @param {Array<Element>=} path
|
||||
* @return {Element|undefined}
|
||||
* @private
|
||||
*/
|
||||
_overlayInPath: function(path) {
|
||||
path = path || [];
|
||||
for (var i = 0; i < path.length; i++) {
|
||||
if (path[i]._manager === this) {
|
||||
return path[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensures the click event is delegated to the right overlay.
|
||||
* @param {!Event} event
|
||||
* @private
|
||||
*/
|
||||
_onCaptureClick: function(event) {
|
||||
var overlay = /** @type {?} */ (this.currentOverlay());
|
||||
// Check if clicked outside of top overlay.
|
||||
if (overlay && this._overlayInPath(Polymer.dom(event).path) !== overlay) {
|
||||
if (overlay.withBackdrop) {
|
||||
// There's no need to stop the propagation as the backdrop element
|
||||
// already got this mousedown/touchstart event. Calling preventDefault
|
||||
// on this event ensures that click/tap won't be triggered at all.
|
||||
event.preventDefault();
|
||||
}
|
||||
overlay._onCaptureClick(event);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensures the focus event is delegated to the right overlay.
|
||||
* @param {!Event} event
|
||||
* @private
|
||||
*/
|
||||
_onCaptureFocus: function(event) {
|
||||
var overlay = /** @type {?} */ (this.currentOverlay());
|
||||
if (overlay) {
|
||||
overlay._onCaptureFocus(event);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensures TAB and ESC keyboard events are delegated to the right overlay.
|
||||
* @param {!Event} event
|
||||
* @private
|
||||
*/
|
||||
_onCaptureKeyDown: function(event) {
|
||||
var overlay = /** @type {?} */ (this.currentOverlay());
|
||||
if (overlay) {
|
||||
if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'esc')) {
|
||||
overlay._onCaptureEsc(event);
|
||||
} else if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'tab')) {
|
||||
overlay._onCaptureTab(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns if the overlay1 should be behind overlay2.
|
||||
* @param {!Element} overlay1
|
||||
* @param {!Element} overlay2
|
||||
* @return {boolean}
|
||||
* @private
|
||||
*/
|
||||
_shouldBeBehindOverlay: function(overlay1, overlay2) {
|
||||
var o1 = /** @type {?} */ (overlay1);
|
||||
var o2 = /** @type {?} */ (overlay2);
|
||||
return !o1.alwaysOnTop && o2.alwaysOnTop;
|
||||
}
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass();
|
||||
</script>
|
@ -1,31 +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>iron-overlay-behavior tests</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'iron-overlay-behavior.html',
|
||||
'iron-overlay-behavior.html?dom=shadow',
|
||||
'iron-overlay-backdrop.html',
|
||||
'iron-overlay-backdrop.html?dom=shadow',
|
||||
]);
|
||||
</script>
|
||||
|
||||
</body></html>
|
@ -1,94 +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
|
||||
-->
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>iron-overlay-backdrop tests</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
|
||||
<link rel="import" href="test-overlay.html">
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.sizer {
|
||||
width: 4000px;
|
||||
height: 5000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style is="custom-style">
|
||||
iron-overlay-backdrop {
|
||||
/* For quicker tests */
|
||||
--iron-overlay-backdrop: {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="sizer"></div>
|
||||
|
||||
<test-fixture id="backdrop">
|
||||
<template>
|
||||
<test-overlay with-backdrop>
|
||||
Overlay with backdrop
|
||||
</test-overlay>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
function runAfterOpen(overlay, callback) {
|
||||
overlay.addEventListener('iron-overlay-opened', callback);
|
||||
overlay.open();
|
||||
}
|
||||
|
||||
suite('overlay with backdrop', function() {
|
||||
var overlay;
|
||||
|
||||
setup(function() {
|
||||
overlay = fixture('backdrop');
|
||||
});
|
||||
|
||||
test('backdrop size matches parent size', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
Polymer.Base.async(function() {
|
||||
var backdrop = overlay.backdropElement;
|
||||
var parent = backdrop.parentElement;
|
||||
assert.strictEqual(backdrop.offsetWidth, parent.clientWidth, 'backdrop width matches parent width');
|
||||
assert.strictEqual(backdrop.offsetHeight, parent.clientHeight, 'backdrop height matches parent height');
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
File diff suppressed because it is too large
Load Diff
@ -1,40 +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">
|
||||
|
||||
<dom-module id="test-buttons">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<button id="button0">button0</button>
|
||||
<button id="button1">button1</button>
|
||||
<button id="button2">button2</button>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
Polymer({
|
||||
is: 'test-buttons'
|
||||
});
|
||||
})();
|
||||
|
||||
</script>
|
@ -1,36 +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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="test-overlay.html">
|
||||
|
||||
<dom-module id="test-menu-button">
|
||||
|
||||
<template>
|
||||
<button id="trigger" on-click="toggle">Open</button>
|
||||
<test-overlay id="dropdown">
|
||||
<content></content>
|
||||
</test-overlay>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
Polymer({
|
||||
is: 'test-menu-button',
|
||||
toggle: function() {
|
||||
this.$.dropdown.toggle();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
</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.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../iron-overlay-behavior.html">
|
||||
|
||||
<dom-module id="test-overlay">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
:host([animated]) {
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateY(300px);
|
||||
}
|
||||
|
||||
:host(.opened[animated]) {
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'test-overlay',
|
||||
|
||||
properties: {
|
||||
animated: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true
|
||||
}
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronOverlayBehavior
|
||||
],
|
||||
|
||||
listeners: {
|
||||
'transitionend': '__onTransitionEnd'
|
||||
},
|
||||
|
||||
_renderOpened: function() {
|
||||
if (this.animated) {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.open();
|
||||
}
|
||||
this.classList.add('opened');
|
||||
this.fire('simple-overlay-open-animation-start');
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
_renderClosed: function() {
|
||||
if (this.animated) {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.close();
|
||||
}
|
||||
this.classList.remove('opened');
|
||||
this.fire('simple-overlay-close-animation-start');
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
__onTransitionEnd: function(e) {
|
||||
if (e && e.target === this) {
|
||||
if (this.opened) {
|
||||
this._finishRenderOpened();
|
||||
} else {
|
||||
this._finishRenderClosed();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
@ -1,49 +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="../iron-overlay-behavior.html">
|
||||
|
||||
<dom-module id="test-overlay2">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'test-overlay2',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronOverlayBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
@ -1,61 +0,0 @@
|
||||
{
|
||||
"name": "neon-animation",
|
||||
"description": "A system for animating Polymer-based web components",
|
||||
"version": "1.2.2",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"web-animations"
|
||||
],
|
||||
"main": [
|
||||
"neon-animated-pages.html",
|
||||
"neon-animatable-behavior.html",
|
||||
"neon-animation-behavior.html",
|
||||
"neon-animation-runner-behavior.html",
|
||||
"neon-shared-element-animatable-behavior.html",
|
||||
"neon-shared-element-animation-behavior.html",
|
||||
"neon-animatable.html",
|
||||
"neon-animations.html"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/neon-animation"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/neon-animation",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
|
||||
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
|
||||
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
|
||||
"web-animations-js": "web-animations/web-animations-js#^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"paper-item": "PolymerElements/paper-item#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||
},
|
||||
"_release": "1.2.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.2.2",
|
||||
"commit": "67b614a9261c84be12293f1105bafc158a2f443c"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/neon-animation.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/neon-animation"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/neon-animation/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
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
env:
|
||||
global:
|
||||
- secure: AnPpB3uzTWU0hmrDmPyOb/3mJZRv4BgPFJrpaT/mQ/9979IBeFfFHJX6MqQlgo894lJWvKSvAjEutgK5Z3LQh6cLB3JuhPBInwKgFPUx/V14VIju+Z7jwx6RycE3flb2f9Y6y5My13ovswsTNnhJEkpDGlbRnJlh5c+HeP+6D0oFPFaGWvULZsAHQnEykir1TMPL2TD8SfuYWifmBj7QYQ2vsYnqZoAkPNedv/OtdoA3rziFXSG3GqXX2NJVnYqlaLj/HiHK7xLlZu/ODfo6En12DMtqJajBP7NfJkEUAF72ScOsYxlwiI1aYcVSUy6upkxxPwkBj5x7wDZ0tRFmlautyq2skDAh/fgIfRw9AMe8kj/YLef+T8bmZNT9IIelNaNcpfTQHpYWcOpPk2uBT3iIOcmp+Ys8RZKqzYmekBtHTwCGmQcfQrjBXjrjz5xlUaoMH7vauh7Ct7SkD7Fu87XSUvks4v2yypxxmHXO8jUilKuUdtAzb3dtOboO0ptsoLuBm/qSeURco4be6KPyVnDxdWdbYOxIZtE8JeY2DbonS45OgFtL1NKeEIhiTQIcOuSs0qwJFFzaBBAfek1tkTvBhMJP3JPWpIbNJhdZWzSd0LUSe892sbiZJY67FA4xcY8vK5JZNWnxFyKX1+A8ljPEd1yBImxMzUDMNS9t0G0=
|
||||
- secure: jdh0G/FDRghnjasav0/8nOZsYgXUd5DLKgD5XrDCVrBvPwXly+AnMXE+Hr/bztEXylcEmcqrWUUfB1ODUdVn1EGk8CJaYpHyKcoMcpJiEjHYS/3i1rXRsnHs2o3dcRO69rA8A5LZeG3yYfiPVUiKlyl7MWOal3pNohDGi8dZcT0CoWnA8UaV//0uXG3GGG3X8KcbVfB2hQvG1mK6wM6W4eHVOplcBaE2xnnFDMxfU2KnRgjLSPw66PeJGczWOBR9fZql9p6kV38ZM2s4qnUsMlTZkNqn0f6CuEPqcG6+S6Tk9+0dvAHet+Ky9fgiyJPq+p6sDGfdm1ZJwOjz5MoyudzGSuHAJHH2nscQf8pUBQ1gxKaGg7GV9LUj0cjLDAFWA2KpxTlabDZhZPIMoMKFpqpvJG49gDVga5gGabom21nd/+E1i/2vvoP16kY9rjf+Gd5+tIzajXCu8Tq06Xz63idZDJbt38GjArfFFqe5k7CqE+m2vpWx/iTwe+cT70wnIq/xigvaNq6CgUuNdzkVnVBj/C7yVqwwZkfbBC7HhRna9Nyzts/j2M2vwy0oYB73WzuhpYSweaAOZq2kcUIQ5ZMGO3UkZRjwWnHxAi5mrvZhRcRIqkvJJhoMQnjwJSTah/3cz0cJh19DL+Ozde24/tuY+vOnhFb+ddo1OKD6FtM=
|
||||
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,95 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<cascaded-animation>` applies an animation on an array of elements with a delay between each.
|
||||
the delay defaults to 50ms.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'cascaded-animation',
|
||||
animation: <animation-name>,
|
||||
nodes: <array-of-nodes>,
|
||||
nodeDelay: <node-delay-in-ms>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'cascaded-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* animation: string,
|
||||
* nodes: !Array<!Element>,
|
||||
* nodeDelay: (number|undefined),
|
||||
* timing: (Object|undefined)
|
||||
* }} config
|
||||
*/
|
||||
configure: function(config) {
|
||||
this._animations = [];
|
||||
var nodes = config.nodes;
|
||||
var effects = [];
|
||||
var nodeDelay = config.nodeDelay || 50;
|
||||
|
||||
config.timing = config.timing || {};
|
||||
config.timing.delay = config.timing.delay || 0;
|
||||
|
||||
var oldDelay = config.timing.delay;
|
||||
var abortedConfigure;
|
||||
for (var node, index = 0; node = nodes[index]; index++) {
|
||||
config.timing.delay += nodeDelay;
|
||||
config.node = node;
|
||||
|
||||
var animation = document.createElement(config.animation);
|
||||
if (animation.isNeonAnimation) {
|
||||
var effect = animation.configure(config);
|
||||
|
||||
this._animations.push(animation);
|
||||
effects.push(effect);
|
||||
} else {
|
||||
Polymer.Base._warn(this.is + ':', config.animation, 'not found!');
|
||||
abortedConfigure = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
config.timing.delay = oldDelay;
|
||||
config.node = null;
|
||||
// if a bad animation was configured, abort config.
|
||||
if (abortedConfigure) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._effect = new GroupEffect(effects);
|
||||
return this._effect;
|
||||
},
|
||||
|
||||
complete: function() {
|
||||
for (var animation, index = 0; animation = this._animations[index]; index++) {
|
||||
animation.complete(animation.config);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,49 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<fade-in-animation>` animates the opacity of an element from 0 to 1.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'fade-in-animation',
|
||||
node: <node>
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fade-in-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'opacity': '0'},
|
||||
{'opacity': '1'}
|
||||
], this.timingFromConfig(config));
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,49 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<fade-out-animation>` animates the opacity of an element from 1 to 0.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'fade-out-animation',
|
||||
node: <node>
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fade-out-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'opacity': '1'},
|
||||
{'opacity': '0'}
|
||||
], this.timingFromConfig(config));
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,83 +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="../neon-shared-element-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<hero-animation>` is a shared element animation that scales and transform an element such that it
|
||||
appears to be shared between two pages. Use this in `<neon-animated-pages>`. The source page
|
||||
should use this animation in an 'exit' animation and set the `fromPage` configuration property to
|
||||
itself, and the destination page should use this animation in an `entry` animation and set the
|
||||
`toPage` configuration property to itself. They should also define the hero elements in the
|
||||
`sharedElements` property (not a configuration property, see
|
||||
`Polymer.NeonSharedElementAnimatableBehavior`).
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'hero-animation',
|
||||
id: <shared-element-id>,
|
||||
timing: <animation-timing>,
|
||||
toPage: <node>, /* define for the destination page */
|
||||
fromPage: <node>, /* define for the source page */
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'hero-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var shared = this.findSharedElements(config);
|
||||
if (!shared) {
|
||||
return;
|
||||
}
|
||||
|
||||
var fromRect = shared.from.getBoundingClientRect();
|
||||
var toRect = shared.to.getBoundingClientRect();
|
||||
|
||||
var deltaLeft = fromRect.left - toRect.left;
|
||||
var deltaTop = fromRect.top - toRect.top;
|
||||
var deltaWidth = fromRect.width / toRect.width;
|
||||
var deltaHeight = fromRect.height / toRect.height;
|
||||
|
||||
this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0');
|
||||
shared.to.style.zIndex = 10000;
|
||||
shared.from.style.visibility = 'hidden';
|
||||
|
||||
this._effect = new KeyframeEffect(shared.to, [
|
||||
{'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 'px) scale(' + deltaWidth + ',' + deltaHeight + ')'},
|
||||
{'transform': 'none'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
},
|
||||
|
||||
complete: function(config) {
|
||||
var shared = this.findSharedElements(config);
|
||||
if (!shared) {
|
||||
return null;
|
||||
}
|
||||
shared.to.style.zIndex = '';
|
||||
shared.from.style.visibility = '';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,46 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<opaque-animation>` makes an element `opacity:1` for the duration of the animation. Used to prevent
|
||||
webkit/safari from drawing a frame before an animation for elements that animate from display:none.
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'opaque-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
node.style.opacity = '0';
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'opacity': '1'},
|
||||
{'opacity': '1'}
|
||||
], this.timingFromConfig(config));
|
||||
return this._effect;
|
||||
},
|
||||
|
||||
complete: function(config) {
|
||||
config.node.style.opacity = '';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,86 +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="../neon-shared-element-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<reverse-ripple-animation>` scales and transform an element such that it appears to ripple down from this element, to either
|
||||
a shared element, or a screen position.
|
||||
|
||||
If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
|
||||
animation in the source page and in an `entry` animation in the destination page. Also, define the
|
||||
reverse-ripple elements in the `sharedElements` property (not a configuration property, see
|
||||
`Polymer.NeonSharedElementAnimatableBehavior`).
|
||||
If using a screen position, define the `gesture` property.
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'reverse-ripple-animation`.
|
||||
id: <shared-element-id>, /* set this or gesture */
|
||||
gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
|
||||
timing: <animation-timing>,
|
||||
toPage: <node>, /* define for the destination page */
|
||||
fromPage: <node>, /* define for the source page */
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'reverse-ripple-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var shared = this.findSharedElements(config);
|
||||
if (!shared) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var translateX, translateY;
|
||||
var fromRect = shared.from.getBoundingClientRect();
|
||||
if (config.gesture) {
|
||||
translateX = config.gesture.x - (fromRect.left + (fromRect.width / 2));
|
||||
translateY = config.gesture.y - (fromRect.top + (fromRect.height / 2));
|
||||
} else {
|
||||
var toRect = shared.to.getBoundingClientRect();
|
||||
translateX = (toRect.left + (toRect.width / 2)) - (fromRect.left + (fromRect.width / 2));
|
||||
translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromRect.height / 2));
|
||||
}
|
||||
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
|
||||
|
||||
var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.height + Math.abs(translateY) * 2);
|
||||
var diameter = Math.sqrt(2 * size * size);
|
||||
var scaleX = diameter / fromRect.width;
|
||||
var scaleY = diameter / fromRect.height;
|
||||
var scale = 'scale(' + scaleX + ',' + scaleY + ')';
|
||||
|
||||
this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%');
|
||||
shared.from.style.borderRadius = '50%';
|
||||
|
||||
this._effect = new KeyframeEffect(shared.from, [
|
||||
{'transform': translate + ' ' + scale},
|
||||
{'transform': translate + ' scale(0)'}
|
||||
], this.timingFromConfig(config));
|
||||
return this._effect;
|
||||
},
|
||||
|
||||
complete: function() {
|
||||
if (this.sharedElements) {
|
||||
this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', '');
|
||||
this.sharedElements.from.style.borderRadius = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
@ -1,92 +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="../neon-shared-element-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<ripple-animation>` scales and transform an element such that it appears to ripple from either
|
||||
a shared element, or from a screen position, to full screen.
|
||||
|
||||
If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
|
||||
animation in the source page and in an `entry` animation in the destination page. Also, define the
|
||||
hero elements in the `sharedElements` property (not a configuration property, see
|
||||
`Polymer.NeonSharedElementAnimatableBehavior`).
|
||||
|
||||
If using a screen position, define the `gesture` property.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'ripple-animation`.
|
||||
id: <shared-element-id>, /* set this or gesture */
|
||||
gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
|
||||
timing: <animation-timing>,
|
||||
toPage: <node>, /* define for the destination page */
|
||||
fromPage: <node>, /* define for the source page */
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'ripple-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var shared = this.findSharedElements(config);
|
||||
if (!shared) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var translateX, translateY;
|
||||
var toRect = shared.to.getBoundingClientRect();
|
||||
if (config.gesture) {
|
||||
translateX = config.gesture.x - (toRect.left + (toRect.width / 2));
|
||||
translateY = config.gesture.y - (toRect.top + (toRect.height / 2));
|
||||
} else {
|
||||
var fromRect = shared.from.getBoundingClientRect();
|
||||
translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (toRect.width / 2));
|
||||
translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.top + (toRect.height / 2));
|
||||
}
|
||||
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
|
||||
|
||||
var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height + Math.abs(translateY) * 2);
|
||||
var diameter = Math.sqrt(2 * size * size);
|
||||
var scaleX = diameter / toRect.width;
|
||||
var scaleY = diameter / toRect.height;
|
||||
var scale = 'scale(' + scaleX + ',' + scaleY + ')';
|
||||
|
||||
this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%');
|
||||
shared.to.style.borderRadius = '50%';
|
||||
|
||||
this._effect = new KeyframeEffect(shared.to, [
|
||||
{'transform': translate + ' scale(0)'},
|
||||
{'transform': translate + ' ' + scale}
|
||||
], this.timingFromConfig(config));
|
||||
return this._effect;
|
||||
},
|
||||
|
||||
complete: function() {
|
||||
if (this.sharedElements) {
|
||||
this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', '');
|
||||
this.sharedElements.to.style.borderRadius = '';
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,65 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<scale-down-animation>` animates the scale transform of an element from 1 to 0. By default it
|
||||
scales in both the x and y axes.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'scale-down-animation',
|
||||
node: <node>,
|
||||
axis: 'x' | 'y' | '',
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'scale-down-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
}
|
||||
|
||||
var scaleProperty = 'scale(0, 0)';
|
||||
if (config.axis === 'x') {
|
||||
scaleProperty = 'scale(0, 1)';
|
||||
} else if (config.axis === 'y') {
|
||||
scaleProperty = 'scale(1, 0)';
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'scale(1,1)'},
|
||||
{'transform': scaleProperty}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,65 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<scale-up-animation>` animates the scale transform of an element from 0 to 1. By default it
|
||||
scales in both the x and y axes.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'scale-up-animation',
|
||||
node: <node>,
|
||||
axis: 'x' | 'y' | '',
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'scale-up-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
}
|
||||
|
||||
var scaleProperty = 'scale(0)';
|
||||
if (config.axis === 'x') {
|
||||
scaleProperty = 'scale(0, 1)';
|
||||
} else if (config.axis === 'y') {
|
||||
scaleProperty = 'scale(1, 0)';
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': scaleProperty},
|
||||
{'transform': 'scale(1, 1)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,59 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-down-animation>` animates the transform of an element from `none` `translateY(100%)`.
|
||||
The `transformOrigin` defaults to `50% 0`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-down-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-down-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateY(0%)'},
|
||||
{'transform': 'translateY(100%)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,59 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`.
|
||||
The `transformOrigin` defaults to `50% 0`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-from-bottom-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-from-bottom-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateY(100%)'},
|
||||
{'transform': 'translateY(0)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-from-left-animation>` animates the transform of an element from
|
||||
`translateX(-100%)` to `none`.
|
||||
The `transformOrigin` defaults to `0 50%`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-from-left-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-from-left-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateX(-100%)'},
|
||||
{'transform': 'none'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-from-right-animation>` animates the transform of an element from
|
||||
`translateX(100%)` to `none`.
|
||||
The `transformOrigin` defaults to `0 50%`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-from-right-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-from-right-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateX(100%)'},
|
||||
{'transform': 'none'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,59 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-from-top-animation>` animates the transform of an element from `translateY(-100%)` to
|
||||
`none`. The `transformOrigin` defaults to `50% 0`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-from-top-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-from-top-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateY(-100%)'},
|
||||
{'transform': 'translateY(0%)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,59 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-left-animation>` animates the transform of an element from `none` to `translateX(-100%)`.
|
||||
The `transformOrigin` defaults to `0 50%`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-left-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-left-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'none'},
|
||||
{'transform': 'translateX(-100%)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,59 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-right-animation>` animates the transform of an element from `none` to `translateX(100%)`.
|
||||
The `transformOrigin` defaults to `0 50%`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-right-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-right-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'none'},
|
||||
{'transform': 'translateX(100%)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,59 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<slide-up-animation>` animates the transform of an element from `translateY(0)` to
|
||||
`translateY(-100%)`. The `transformOrigin` defaults to `50% 0`.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'slide-up-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'slide-up-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translate(0)'},
|
||||
{'transform': 'translateY(-100%)'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,70 +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="../neon-animation-behavior.html">
|
||||
<link rel="import" href="../web-animations.html">
|
||||
|
||||
<!--
|
||||
`<transform-animation>` animates a custom transform on an element. Use this to animate multiple
|
||||
transform properties, or to apply a custom transform value.
|
||||
|
||||
Configuration:
|
||||
```
|
||||
{
|
||||
name: 'transform-animation',
|
||||
node: <node>,
|
||||
transformOrigin: <transform-origin>,
|
||||
transformFrom: <transform-from-string>,
|
||||
transformTo: <transform-to-string>,
|
||||
timing: <animation-timing>
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'transform-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* node: !Element,
|
||||
* transformOrigin: (string|undefined),
|
||||
* transformFrom: (string|undefined),
|
||||
* transformTo: (string|undefined),
|
||||
* timing: (Object|undefined)
|
||||
* }} config
|
||||
*/
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
var transformFrom = config.transformFrom || 'none';
|
||||
var transformTo = config.transformTo || 'none';
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
}
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': transformFrom},
|
||||
{'transform': transformTo}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,52 +0,0 @@
|
||||
{
|
||||
"name": "neon-animation",
|
||||
"description": "A system for animating Polymer-based web components",
|
||||
"version": "1.2.2",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"web-animations"
|
||||
],
|
||||
"main": [
|
||||
"neon-animated-pages.html",
|
||||
"neon-animatable-behavior.html",
|
||||
"neon-animation-behavior.html",
|
||||
"neon-animation-runner-behavior.html",
|
||||
"neon-shared-element-animatable-behavior.html",
|
||||
"neon-shared-element-animation-behavior.html",
|
||||
"neon-animatable.html",
|
||||
"neon-animations.html"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/neon-animation"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/neon-animation",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
|
||||
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
|
||||
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
|
||||
"web-animations-js": "web-animations/web-animations-js#^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"paper-item": "PolymerElements/paper-item#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||
}
|
||||
}
|
@ -1,166 +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>neon-animated-pages demo: card</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-animated-pages.html">
|
||||
<link rel="import" href="../../neon-animations.html">
|
||||
<link rel="import" href="../../../paper-styles/typography.html">
|
||||
<link rel="import" href="x-card.html">
|
||||
<link rel="import" href="x-cards-list.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
body {
|
||||
padding: 15px;
|
||||
@apply(--layout-fullbleed);
|
||||
@apply(--paper-font-common-base);
|
||||
}
|
||||
|
||||
neon-animated-pages {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.large {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.button {
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 2px;
|
||||
font-size: 0.9em;
|
||||
background-color: #fff;
|
||||
color: #646464;
|
||||
}
|
||||
|
||||
.button.blue {
|
||||
background-color: #4285f4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.raised {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.button.back {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.card-contents {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
.button-container {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-around-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<template is="dom-bind">
|
||||
<neon-animated-pages id="pages" selected="0">
|
||||
<x-cards-list id="list">
|
||||
<div class="card-contents">
|
||||
<h2>Choose a subject</h2>
|
||||
<div class="button-container large">
|
||||
<div class="blue raised button" on-click="_onPolymerClick">
|
||||
POLYMER
|
||||
</div>
|
||||
<div class="blue raised button" on-click="_onAngularClick">
|
||||
ANGULAR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-cards-list>
|
||||
|
||||
<x-card>
|
||||
<div class="card-contents">
|
||||
<div class="raised back button" on-click="_onBackClick">
|
||||
BACK
|
||||
</div>
|
||||
<h2>Polymer</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
</x-card>
|
||||
|
||||
<x-card>
|
||||
<div class="card-contents">
|
||||
<div class="raised back button" on-click="_onBackClick">
|
||||
BACK
|
||||
</div>
|
||||
<h2>Angular</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
</x-card>
|
||||
|
||||
</neon-animated-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var scope = document.querySelector('template[is="dom-bind"]');
|
||||
|
||||
scope._onPolymerClick = function(event) {
|
||||
this.$.list.sharedElements = {
|
||||
'ripple': event.target,
|
||||
'reverse-ripple': event.target
|
||||
};
|
||||
this.$.pages.selected = 1;
|
||||
};
|
||||
|
||||
scope._onAngularClick = function(event) {
|
||||
this.$.list.sharedElements = {
|
||||
'ripple': event.target,
|
||||
'reverse-ripple': event.target
|
||||
};
|
||||
this.$.pages.selected = 2;
|
||||
};
|
||||
|
||||
scope._onBackClick = function(event) {
|
||||
this.$.pages.selected = 0;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,97 +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="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
||||
|
||||
<dom-module id="x-card">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
#placeholder {
|
||||
opacity: 0;
|
||||
background-color: grey;
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="placeholder"></div>
|
||||
<div id="container">
|
||||
<content select="div"></content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
Polymer({
|
||||
is: 'x-card',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
animationConfig: {
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'ripple-animation',
|
||||
id: 'ripple',
|
||||
toPage: this
|
||||
}, {
|
||||
name: 'fade-out-animation',
|
||||
node: this.$.placeholder,
|
||||
timing: {
|
||||
delay: 250
|
||||
}
|
||||
}, {
|
||||
name: 'fade-in-animation',
|
||||
node: this.$.container,
|
||||
timing: {
|
||||
delay: 50
|
||||
}
|
||||
}],
|
||||
|
||||
'exit': [{
|
||||
name: 'opaque-animation',
|
||||
node: this.$.placeholder
|
||||
}, {
|
||||
name: 'fade-out-animation',
|
||||
node: this.$.container,
|
||||
timing: {
|
||||
duration: 0
|
||||
}
|
||||
}, {
|
||||
name: 'reverse-ripple-animation',
|
||||
id: 'reverse-ripple',
|
||||
fromPage: this
|
||||
}]
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
sharedElements: {
|
||||
value: function() {
|
||||
return {
|
||||
'ripple': this.$.placeholder,
|
||||
'reverse-ripple': this.$.placeholder
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
@ -1,75 +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="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
||||
|
||||
<dom-module id="x-cards-list">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#placeholder {
|
||||
opacity: 0;
|
||||
background-color: grey;
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="placeholder"></div>
|
||||
<div id="container">
|
||||
<content select="div"></content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
Polymer({
|
||||
is: 'x-cards-list',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
animationConfig: {
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'reverse-ripple-animation',
|
||||
id: 'reverse-ripple',
|
||||
toPage: this
|
||||
}],
|
||||
|
||||
'exit': [{
|
||||
name: 'fade-out-animation',
|
||||
node: this.$.container,
|
||||
timing: {
|
||||
delay: 150,
|
||||
duration: 0
|
||||
}
|
||||
}, {
|
||||
name: 'ripple-animation',
|
||||
id: 'ripple',
|
||||
fromPage: this
|
||||
}]
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
@ -1,132 +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>neon-animated-pages demo: declarative</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../../paper-styles/typography.html">
|
||||
<link rel="import" href="../../../paper-styles/color.html">
|
||||
<link rel="import" href="../../neon-animated-pages.html">
|
||||
<link rel="import" href="../../neon-animatable.html">
|
||||
<link rel="import" href="../../neon-animations.html">
|
||||
|
||||
<style is="custom-style">
|
||||
body {
|
||||
overflow: hidden;
|
||||
@apply(--layout-fullbleed);
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
|
||||
padding: 8px;
|
||||
|
||||
background-color: white;
|
||||
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
neon-animated-pages {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
neon-animatable {
|
||||
color: white;
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-center);
|
||||
@apply(--paper-font-display4);
|
||||
}
|
||||
|
||||
neon-animatable:nth-child(1) {
|
||||
background: var(--paper-red-500);
|
||||
}
|
||||
|
||||
neon-animatable:nth-child(2) {
|
||||
background: var(--paper-blue-500);
|
||||
}
|
||||
|
||||
neon-animatable:nth-child(3) {
|
||||
background: var(--paper-orange-500);
|
||||
}
|
||||
|
||||
neon-animatable:nth-child(4) {
|
||||
background: var(--paper-green-500);
|
||||
}
|
||||
|
||||
neon-animatable:nth-child(5) {
|
||||
background: var(--paper-purple-500);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<template is="dom-bind">
|
||||
|
||||
<div class="toolbar">
|
||||
<button on-click="_onPrevClick">⇦</button>
|
||||
<button on-click="_onNextClick">⇨</button>
|
||||
<button on-click="_onUpClick">⇧</button>
|
||||
<button on-click="_onDownClick">⇩</button>
|
||||
</div>
|
||||
|
||||
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
|
||||
<neon-animatable>1</neon-animatable>
|
||||
<neon-animatable>2</neon-animatable>
|
||||
<neon-animatable>3</neon-animatable>
|
||||
<neon-animatable>4</neon-animatable>
|
||||
<neon-animatable>5</neon-animatable>
|
||||
</neon-animated-pages>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var scope = document.querySelector('template[is="dom-bind"]');
|
||||
scope.selected = 0;
|
||||
|
||||
scope._onPrevClick = function() {
|
||||
this.entryAnimation = 'slide-from-left-animation';
|
||||
this.exitAnimation = 'slide-right-animation';
|
||||
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
|
||||
}
|
||||
|
||||
scope._onNextClick = function() {
|
||||
this.entryAnimation = 'slide-from-right-animation';
|
||||
this.exitAnimation = 'slide-left-animation';
|
||||
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
|
||||
}
|
||||
|
||||
scope._onUpClick = function() {
|
||||
this.entryAnimation = 'slide-from-top-animation';
|
||||
this.exitAnimation = 'slide-down-animation';
|
||||
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
|
||||
}
|
||||
|
||||
scope._onDownClick = function() {
|
||||
this.entryAnimation = 'slide-from-bottom-animation';
|
||||
this.exitAnimation = 'slide-up-animation';
|
||||
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,70 +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>neon-animation demo: basic</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="my-animatable.html">
|
||||
<link rel="import" href="my-dialog.html">
|
||||
|
||||
</head>
|
||||
<style>
|
||||
my-animatable {
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<template is="dom-bind">
|
||||
|
||||
<button on-click="_onCircleButtonClick">toggle circle</button>
|
||||
<button on-click="_onDialogButtonClick">toggle dialog</button>
|
||||
|
||||
<div style="text-align: center">
|
||||
<my-dialog>Hello World!</my-dialog>
|
||||
</div>
|
||||
|
||||
<my-animatable></my-animatable>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var scope = document.querySelector('template[is="dom-bind"]');
|
||||
|
||||
scope._onCircleButtonClick = function(event) {
|
||||
var node = document.querySelector('my-animatable');
|
||||
if (node) {
|
||||
node.animate();
|
||||
}
|
||||
};
|
||||
|
||||
scope._onDialogButtonClick = function(event) {
|
||||
var node = document.querySelector('my-dialog');
|
||||
if (node) {
|
||||
if (node.opened) {
|
||||
node.hide();
|
||||
} else {
|
||||
node.show();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,68 +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="../../neon-animation-runner-behavior.html">
|
||||
<link rel="import" href="../../animations/scale-down-animation.html">
|
||||
|
||||
<dom-module id="my-animatable">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'my-animatable',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationRunnerBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
name: 'scale-down-animation',
|
||||
node: this
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
||||
},
|
||||
|
||||
animate: function() {
|
||||
this.playAnimation();
|
||||
},
|
||||
|
||||
_onNeonAnimationFinish: function() {
|
||||
console.log('animation finish!');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,94 +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/shadow.html">
|
||||
<link rel="import" href="../../neon-animation-runner-behavior.html">
|
||||
<link rel="import" href="../../animations/scale-up-animation.html">
|
||||
<link rel="import" href="../../animations/fade-out-animation.html">
|
||||
|
||||
|
||||
<dom-module id="my-dialog">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: none;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
color: black;
|
||||
margin: 0 auto;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'my-dialog',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationRunnerBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
opened: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'scale-up-animation',
|
||||
node: this
|
||||
}],
|
||||
'exit': [{
|
||||
name: 'fade-out-animation',
|
||||
node: this
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'neon-animation-finish': '_onAnimationFinish'
|
||||
},
|
||||
|
||||
_onAnimationFinish: function() {
|
||||
if (!this.opened) {
|
||||
this.style.display = '';
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.opened = true;
|
||||
this.style.display = 'inline-block';
|
||||
this.playAnimation('entry');
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.opened = false;
|
||||
this.playAnimation('exit');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,90 +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/shadow.html">
|
||||
<link rel="import" href="../../neon-animation-runner-behavior.html">
|
||||
|
||||
<dom-module id="animated-dropdown">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: none;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
color: black;
|
||||
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'animated-dropdown',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationRunnerBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'scale-up-animation',
|
||||
node: this,
|
||||
transformOrigin: '0 0'
|
||||
}],
|
||||
'exit': [{
|
||||
name: 'fade-out-animation',
|
||||
node: this
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_showing: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'neon-animation-finish': '_onAnimationFinish'
|
||||
},
|
||||
|
||||
_onAnimationFinish: function() {
|
||||
if (this._showing) {
|
||||
} else {
|
||||
this.style.display = '';
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.style.display = 'inline-block';
|
||||
this._showing = true;
|
||||
this.playAnimation('entry');
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this._showing = false;
|
||||
this.playAnimation('exit');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,54 +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>neon-animated-pages demo: dropdown</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../neon-animated-pages.html">
|
||||
<link rel="import" href="../../neon-animations.html">
|
||||
<link rel="import" href="animated-dropdown.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<template is="dom-bind">
|
||||
|
||||
<button dropdown-id="dropdown" on-click="_onButtonClick">dropdown</button>
|
||||
<br>
|
||||
<animated-dropdown id="dropdown" on-click="_onDropdownClick">Hello world!</animated-dropdown>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var scope = document.querySelector('template[is="dom-bind"]');
|
||||
|
||||
scope._onButtonClick = function(event) {
|
||||
var dropdown = document.querySelector('#' + event.target.getAttribute('dropdown-id'));
|
||||
if (dropdown) {
|
||||
dropdown.show();
|
||||
}
|
||||
};
|
||||
|
||||
scope._onDropdownClick = function(event) {
|
||||
event.target.hide();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</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-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
||||
<link rel="import" href="../shared-styles.html">
|
||||
|
||||
<dom-module id="animated-grid">
|
||||
<template>
|
||||
<style include="shared-styles"></style>
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.tile {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
|
||||
@apply(--paper-font-title);
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(1) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(4) {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(5) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(8) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(9) {
|
||||
position: absolute;
|
||||
top: calc(100% / 3 * 2);
|
||||
left: 0;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(10) {
|
||||
position: absolute;
|
||||
top: calc(100% / 3 * 2);
|
||||
left: calc(100% / 6);;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template is="dom-repeat" items="[[config]]">
|
||||
<div class$="[[_computeTileClass(item.color)]]">
|
||||
<span>[[item.value]]</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'animated-grid',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
config: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [
|
||||
{value: 1, color: 'blue'},
|
||||
{value: 2, color: 'red'},
|
||||
{value: 3, color: 'blue'},
|
||||
{value: 4, color: 'green'},
|
||||
{value: 5, color: 'yellow'},
|
||||
{value: 6, color: 'blue'},
|
||||
{value: 7, color: 'red'},
|
||||
{value: 8, color: 'green'},
|
||||
{value: 9, color: 'yellow'},
|
||||
{value: 10, color: 'red'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'exit': [{
|
||||
name: 'ripple-animation',
|
||||
id: 'ripple',
|
||||
fromPage: this
|
||||
}, {
|
||||
name: 'hero-animation',
|
||||
id: 'hero',
|
||||
fromPage: this
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
click: '_onClick'
|
||||
},
|
||||
|
||||
_computeTileClass: function(color) {
|
||||
return 'tile ' + color + '-300';
|
||||
},
|
||||
|
||||
_onClick: function(event) {
|
||||
var target = event.target;
|
||||
while (target !== this && !target._templateInstance) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
// configure the page animation
|
||||
this.sharedElements = {
|
||||
'hero': target,
|
||||
'ripple': target
|
||||
};
|
||||
this.animationConfig['exit'][0].gesture = {
|
||||
x: event.x || event.pageX,
|
||||
y: event.y || event.pageY
|
||||
};
|
||||
|
||||
this.fire('tile-click', {
|
||||
tile: target,
|
||||
data: target._templateInstance.item
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,122 +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="../../neon-shared-element-animatable-behavior.html">
|
||||
<link rel="import" href="../../../paper-styles/color.html">
|
||||
<link rel="import" href="../shared-styles.html">
|
||||
|
||||
<dom-module id="fullsize-page-with-card">
|
||||
<template>
|
||||
<style include="shared-styles"></style>
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
margin: 200px 100px 0;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
|
||||
<div id="card" class$="[[_computeCardClass(color)]]"></div>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fullsize-page-with-card',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
color: {
|
||||
type: String
|
||||
},
|
||||
|
||||
sharedElements: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'hero': this.$.card,
|
||||
'ripple': this.$.fixed
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'ripple-animation',
|
||||
id: 'ripple',
|
||||
toPage: this,
|
||||
}, {
|
||||
name: 'hero-animation',
|
||||
id: 'hero',
|
||||
toPage: this,
|
||||
timing: {
|
||||
delay: 150
|
||||
}
|
||||
}],
|
||||
'exit': [{
|
||||
name: 'fade-out-animation',
|
||||
node: this.$.fixed
|
||||
}, {
|
||||
name: 'transform-animation',
|
||||
transformFrom: 'none',
|
||||
transformTo: 'translate(0px,-200vh) scale(0.9,1)',
|
||||
node: this.$.card
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_computeCardClass: function(color) {
|
||||
var cls = 'card';
|
||||
if (color) {
|
||||
cls += ' ' + color + '-300';
|
||||
}
|
||||
return cls;
|
||||
},
|
||||
|
||||
_computeFixedBackgroundClass: function(color) {
|
||||
var cls = 'fixed';
|
||||
if (color) {
|
||||
cls += ' ' + color + '-100';
|
||||
}
|
||||
return cls;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,64 +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>neon-animated-pages demo: grid</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../neon-animated-pages.html">
|
||||
<link rel="import" href="../../neon-animations.html">
|
||||
<link rel="import" href="animated-grid.html">
|
||||
<link rel="import" href="fullsize-page-with-card.html">
|
||||
|
||||
<style is="custom-style">
|
||||
body {
|
||||
overflow: hidden;
|
||||
@apply(--layout-fullbleed);
|
||||
}
|
||||
|
||||
neon-animated-pages {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<template is="dom-bind">
|
||||
<neon-animated-pages id="pages" selected="0">
|
||||
<animated-grid on-tile-click="_onTileClick"></animated-grid>
|
||||
<fullsize-page-with-card id="fullsize-card" on-click="_onFullsizeClick">
|
||||
</fullsize-page-with-card>
|
||||
</neon-animated-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var scope = document.querySelector('template[is="dom-bind"]');
|
||||
|
||||
scope._onTileClick = function(event) {
|
||||
this.$['fullsize-card'].color = event.detail.data.color;
|
||||
this.$.pages.selected = 1;
|
||||
};
|
||||
|
||||
scope._onFullsizeClick = function(event) {
|
||||
this.$.pages.selected = 0;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,45 +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 lang="en">
|
||||
<head>
|
||||
<title>neon-animated pages demo</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
</head>
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<body unresolved>
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Sample demos</h4>
|
||||
<div class="horizontal-section">
|
||||
<a href="doc/index.html">basic</a>
|
||||
<a href="declarative/index.html">declarative</a>
|
||||
<a href="dropdown/index.html">dropdown</a>
|
||||
<a href="grid/index.html">grid</a>
|
||||
<a href="list/index.html">list</a>
|
||||
<a href="load/index.html">load</a>
|
||||
<a href="tiles/index.html">tiles</a>
|
||||
<a href="card/index.html">card</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,118 +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="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../../paper-styles/shadow.html">
|
||||
<link rel="import" href="../../neon-animatable-behavior.html">
|
||||
|
||||
<dom-module id="full-view">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.main {
|
||||
background: white;
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-scroll);
|
||||
@apply(--shadow-elevation-8dp);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#f5f5f5,
|
||||
#f5f5f5 8px,
|
||||
#e0e0e0 8px,
|
||||
#e0e0e0 16px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<paper-toolbar class="medium-tall">
|
||||
<paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
<div id="main" class="main">
|
||||
<div class="image-container">
|
||||
<div class="image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'full-view',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
sharedElements: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'hero': this.$.main
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'fade-in-animation',
|
||||
node: this.$.button
|
||||
}, {
|
||||
name: 'hero-animation',
|
||||
id: 'hero',
|
||||
toPage: this
|
||||
}],
|
||||
|
||||
'exit': [{
|
||||
name: 'fade-out-animation',
|
||||
node: this.$.button
|
||||
}, {
|
||||
name: 'scale-down-animation',
|
||||
node: this.$.main,
|
||||
transformOrigin: '50% 50%',
|
||||
axis: 'y'
|
||||
}]
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_onClearButtonClick: function() {
|
||||
this.fire('close');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,35 +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>neon-animated-pages demo: list</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="list-demo.html">
|
||||
|
||||
</head>
|
||||
<style is="custom-style">
|
||||
body {
|
||||
@apply(--layout-fullbleed);
|
||||
}
|
||||
|
||||
list-demo {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<list-demo></list-demo>
|
||||
</body>
|
||||
</html>
|
@ -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.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-toolbar/paper-toolbar.html">
|
||||
<link rel="import" href="../../neon-animated-pages.html">
|
||||
<link rel="import" href="../../neon-animations.html">
|
||||
<link rel="import" href="list-view.html">
|
||||
<link rel="import" href="full-view.html">
|
||||
|
||||
<dom-module id="list-demo">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
neon-animated-pages {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<neon-animated-pages id="pages" selected="0">
|
||||
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
|
||||
<full-view on-close="_onClose"></full-view>
|
||||
</neon-animated-pages>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'list-demo',
|
||||
|
||||
properties: {
|
||||
|
||||
fileData: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [
|
||||
{fileName: 'IMG_4130.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4131.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4132.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4133.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4134.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4135.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4136.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4137.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4138.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4139.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4140.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4141.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4142.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4143.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4144.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4145.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4146.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4147.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4148.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4149.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4150.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4151.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4152.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4153.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4154.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4155.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4156.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4157.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4158.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4159.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4160.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4161.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4162.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4163.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4164.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4165.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4166.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4167.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4168.jpg', modifiedDate: 'May 12 2015'},
|
||||
{fileName: 'IMG_4169.jpg', modifiedDate: 'May 12 2015'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_onItemClick: function() {
|
||||
this.$.pages.selected = 1;
|
||||
},
|
||||
|
||||
_onClose: function() {
|
||||
this.$.pages.selected = 0;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,124 +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="../../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../../paper-item/paper-item.html">
|
||||
<link rel="import" href="../../../paper-item/paper-item-body.html">
|
||||
<link rel="import" href="../../../paper-styles/color.html">
|
||||
<link rel="import" href="../../neon-animatable-behavior.html">
|
||||
|
||||
<dom-module id="list-view">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.main {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-scroll);
|
||||
}
|
||||
|
||||
iron-icon {
|
||||
color: var(--google-grey-500);
|
||||
}
|
||||
</style>
|
||||
<paper-toolbar class="medium-tall">
|
||||
<paper-icon-button id="button" icon="arrow-back"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<template is="dom-repeat" items="[[data]]">
|
||||
|
||||
<paper-item>
|
||||
<paper-item-body two-line>
|
||||
<div>[[item.fileName]]</div>
|
||||
<div secondary>[[item.modifiedDate]]</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="info"></iron-icon>
|
||||
</paper-item>
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'list-view',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimatableBehavior
|
||||
],
|
||||
|
||||
listeners: {
|
||||
'click': '_onClick'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
data: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'fade-in-animation',
|
||||
node: this.$.button
|
||||
}],
|
||||
|
||||
'exit': [{
|
||||
name: 'fade-out-animation',
|
||||
node: this.$.button
|
||||
}, {
|
||||
name: 'hero-animation',
|
||||
id: 'hero',
|
||||
fromPage: this
|
||||
}]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_onClick: function(event) {
|
||||
var target = event.target;
|
||||
while (target !== this && !target._templateInstance) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
// configure the page animation
|
||||
this.sharedElements = {
|
||||
'hero': target,
|
||||
};
|
||||
|
||||
this.fire('item-click', {
|
||||
item: target,
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,146 +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="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
||||
<link rel="import" href="../../../paper-styles/typography.html">
|
||||
<link rel="import" href="../../../paper-styles/color.html">
|
||||
<link rel="import" href="../shared-styles.html">
|
||||
|
||||
<dom-module id="animated-grid">
|
||||
<template>
|
||||
<style include="shared-styles"></style>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.tile {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
|
||||
@apply(--paper-font-title);
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(1) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(4) {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(5) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(8) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(9) {
|
||||
position: absolute;
|
||||
top: calc(100% / 3 * 2);
|
||||
left: 0;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(10) {
|
||||
position: absolute;
|
||||
top: calc(100% / 3 * 2);
|
||||
left: calc(100% / 6);;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template is="dom-repeat" items="[[config]]">
|
||||
<div class$="[[_computeTileClass(item.color)]]">
|
||||
<span>[[item.value]]</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'animated-grid',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
config: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [
|
||||
{value: 1, color: 'blue'},
|
||||
{value: 2, color: 'red'},
|
||||
{value: 3, color: 'blue'},
|
||||
{value: 4, color: 'green'},
|
||||
{value: 5, color: 'yellow'},
|
||||
{value: 6, color: 'blue'},
|
||||
{value: 7, color: 'red'},
|
||||
{value: 8, color: 'green'},
|
||||
{value: 9, color: 'yellow'},
|
||||
{value: 10, color: 'red'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'cascaded-animation',
|
||||
animation: 'transform-animation',
|
||||
transformFrom: 'translateY(100%)',
|
||||
transformTo: 'none',
|
||||
timing: {
|
||||
delay: 50
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this.async(function() {
|
||||
var nodeList = Polymer.dom(this.root).querySelectorAll('.tile');
|
||||
this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList);
|
||||
});
|
||||
},
|
||||
|
||||
_computeTileClass: function(color) {
|
||||
return 'tile ' + color + '-300';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,82 +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="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-animatable-behavior.html">
|
||||
<link rel="import" href="../../neon-animation-runner-behavior.html">
|
||||
<link rel="import" href="../../../paper-styles/shadow.html">
|
||||
<link rel="import" href="animated-grid.html">
|
||||
|
||||
<dom-module id="full-page">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
background: black;
|
||||
visibility: hidden;
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background: #9c27b0;
|
||||
height: 72px;
|
||||
z-index: 1;
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
|
||||
animated-grid {
|
||||
height: calc(100% - 72px);
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="toolbar" class="toolbar"></div>
|
||||
<animated-grid id="grid"></animated-grid>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'full-page',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimatableBehavior,
|
||||
Polymer.NeonAnimationRunnerBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'slide-from-top-animation',
|
||||
node: this.$.toolbar
|
||||
}, {
|
||||
animatable: this.$.grid,
|
||||
type: 'entry'
|
||||
}]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.style.visibility = 'visible';
|
||||
this.playAnimation('entry');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,48 +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>neon-animated-pages demo: load</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-animated-pages.html">
|
||||
<link rel="import" href="../../neon-animations.html">
|
||||
<link rel="import" href="full-page.html">
|
||||
|
||||
<style is="custom-style">
|
||||
body {
|
||||
overflow: hidden;
|
||||
@apply(--layout-fullbleed);
|
||||
}
|
||||
full-page {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<full-page></full-page>
|
||||
|
||||
<script>
|
||||
|
||||
document.addEventListener('WebComponentsReady', function() {
|
||||
document.querySelector('full-page').show();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,167 +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="../../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
||||
<link rel="import" href="../../../paper-styles/typography.html">
|
||||
<link rel="import" href="../../../paper-styles/color.html">
|
||||
<link rel="import" href="../shared-styles.html">
|
||||
|
||||
<dom-module id="animated-grid">
|
||||
<template>
|
||||
<style include="shared-styles"></style>
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.tile {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
|
||||
@apply(--paper-font-title);
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(1) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(4) {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(5) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(8) {
|
||||
width: calc(100% / 3);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(9) {
|
||||
position: absolute;
|
||||
top: calc(100% / 3 * 2);
|
||||
left: 0;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
|
||||
.tile:nth-of-type(10) {
|
||||
position: absolute;
|
||||
top: calc(100% / 3 * 2);
|
||||
left: calc(100% / 6);;
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 3);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template is="dom-repeat" items="[[config]]">
|
||||
<div class$="[[_computeTileClass(item.color)]]">
|
||||
<span>[[item.value]]</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'animated-grid',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
config: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [
|
||||
{value: 1, color: 'blue'},
|
||||
{value: 2, color: 'red'},
|
||||
{value: 3, color: 'blue'},
|
||||
{value: 4, color: 'green'},
|
||||
{value: 5, color: 'yellow'},
|
||||
{value: 6, color: 'blue'},
|
||||
{value: 7, color: 'red'},
|
||||
{value: 8, color: 'green'},
|
||||
{value: 9, color: 'yellow'},
|
||||
{value: 10, color: 'red'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'exit': [{
|
||||
name: 'ripple-animation',
|
||||
id: 'ripple',
|
||||
fromPage: this
|
||||
}, {
|
||||
name: 'hero-animation',
|
||||
id: 'hero',
|
||||
fromPage: this
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
click: '_onClick'
|
||||
},
|
||||
|
||||
_computeTileClass: function(color) {
|
||||
return 'tile ' + color + '-300';
|
||||
},
|
||||
|
||||
_onClick: function(event) {
|
||||
var target = event.target;
|
||||
while (target !== this && !target._templateInstance) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
// configure the page animation
|
||||
this.sharedElements = {
|
||||
'hero': target,
|
||||
'ripple': target
|
||||
};
|
||||
this.animationConfig['exit'][0].gesture = {
|
||||
x: event.x,
|
||||
y: event.y
|
||||
};
|
||||
|
||||
this.fire('tile-click', {
|
||||
tile: target,
|
||||
data: target._templateInstance.item
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,120 +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="../../neon-shared-element-animatable-behavior.html">
|
||||
<link rel="import" href="../shared-styles.html">
|
||||
|
||||
<dom-module id="fullsize-page-with-card">
|
||||
<template>
|
||||
<style include="shared-styles"></style>
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
margin: 200px 100px 0;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
|
||||
<div id="card" class$="[[_computeCardClass(color)]]"></div>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fullsize-page-with-card',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonSharedElementAnimatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
color: {
|
||||
type: String
|
||||
},
|
||||
|
||||
sharedElements: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'hero': this.$.card,
|
||||
'ripple': this.$.fixed
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
animationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'entry': [{
|
||||
name: 'ripple-animation',
|
||||
id: 'ripple',
|
||||
toPage: this,
|
||||
}, {
|
||||
name: 'hero-animation',
|
||||
id: 'hero',
|
||||
toPage: this,
|
||||
timing: {
|
||||
delay: 150
|
||||
}
|
||||
}],
|
||||
'exit': [{
|
||||
name: 'fade-out-animation',
|
||||
node: this.$.fixed
|
||||
}, {
|
||||
name: 'transform-animation',
|
||||
transformFrom: 'none',
|
||||
transformTo: 'translate(0px,-200vh) scale(0.9,1)',
|
||||
node: this.$.card
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_computeCardClass: function(color) {
|
||||
var cls = 'card';
|
||||
if (color) {
|
||||
cls += ' ' + color + '-300';
|
||||
}
|
||||
return cls;
|
||||
},
|
||||
|
||||
_computeFixedBackgroundClass: function(color) {
|
||||
var cls = 'fixed';
|
||||
if (color) {
|
||||
cls += ' ' + color + '-100';
|
||||
}
|
||||
return cls;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user