[polymer] import all elements

Imports polymer-elements and polymer-ui-elements into (for now) the polymer package. This will allow us to begin to reuse the JavaScript custom elements.

Notes:

In an ideal world we would have some way of importing these straight from Bower, probably via Pub. However we don't have support for that.

It would also be nice to have separate Pub packages, at least for polymer-elements and polymer-ui-elements (the lovely Dart ports @ http://pub.dartlang.org/packages/polymer_elements follow this pattern). However that too depends on some kind of Pub+Bower integration, as they use (at least) the convention of "components/" for dependencies instead of "packages/" or "assets/".

So for now, we'll import them into package:polymer.

R=sigmund@google.com

Review URL: https://codereview.chromium.org//175443005

git-svn-id: https://dart.googlecode.com/svn/branches/bleeding_edge/dart@33183 260f80e4-7a28-3924-810f-c04153c831b5
This commit is contained in:
jmesserly@google.com 2014-03-01 03:03:36 +00:00
parent 45d2c5edc7
commit bde74b4050
810 changed files with 58488 additions and 0 deletions

View file

@ -0,0 +1,25 @@
{
"name": "platform",
"main": "platform.js",
"homepage": "https://github.com/Polymer/platform",
"authors": [
"The Polymer Authors"
],
"description": "Integrate platform polyfills: load, build, test",
"keywords": [
"polymer",
"web",
"components"
],
"license": "BSD",
"private": true,
"_release": "5800a7ad75",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "5800a7ad75d3f8531ec11949a5404444d90a665e"
},
"_source": "git://github.com/Polymer/platform.git",
"_target": "master",
"_originalSource": "Polymer/platform"
}

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1,73 @@
# Contributing
Want to contribute to Polymer? Great!
We are more than happy to accept external contributions to the project in the form of [feedback](https://groups.google.com/forum/?fromgroups=#!forum/polymer-dev), [bug reports](../../issues), and pull requests.
## Contributor License Agreement
Before we can accept patches, there's a quick web form you need to fill out.
- If you're contributing as an individual (e.g. you own the intellectual property), fill out [this form](http://code.google.com/legal/individual-cla-v1.0.html).
- If you're contributing under a company, fill out [this form](http://code.google.com/legal/corporate-cla-v1.0.html) instead.
This CLA asserts that contributions are owned by you and that we can license all work under our [license](LICENSE).
Other projects require a similar agreement: jQuery, Firefox, Apache, Node, and many more.
[More about CLAs](https://www.google.com/search?q=Contributor%20License%20Agreement)
## Initial setup
Here's an easy guide that should get you up and running:
1. Setup Grunt: `sudo npm install -g grunt-cli`
1. Fork the project on github and pull down your copy.
> replace the {{ username }} with your username and {{ repository }} with the repository name
git clone git@github.com:{{ username }}/{{ repository }}.git --recursive
Note the `--recursive`. This is necessary for submodules to initialize properly. If you don't do a recursive clone, you'll have to init them manually:
git submodule init
git submodule update
Download and run the `pull-all.sh` script to install the sibling dependencies.
git clone git://github.com/Polymer/tools.git && tools/bin/pull-all.sh
1. Test your change
> in the repo you've made changes to, run the tests:
cd $REPO
npm install
grunt test
1. Commit your code and make a pull request.
That's it for the one time setup. Now you're ready to make a change.
## Submitting a pull request
We iterate fast! To avoid potential merge conflicts, it's a good idea to pull from the main project before making a change and submitting a pull request. The easiest way to do this is setup a remote called `upstream` and do a pull before working on a change:
git remote add upstream git://github.com/Polymer/{{ repository }}.git
Then before making a change, do a pull from the upstream `master` branch:
git pull upstream master
To make life easier, add a "pull upstream" alias in your `.gitconfig`:
[alias]
pu = !"git fetch origin -v; git fetch upstream -v; git merge upstream/master"
That will pull in changes from your forked repo, the main (upstream) repo, and merge the two. Then it's just a matter of running `git pu` before a change and pushing to your repo:
git checkout master
git pu
# make change
git commit -a -m 'Awesome things.'
git push
Lastly, don't forget to submit the pull request.

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,6 @@
Platform
========
Aggregated polyfills the Polymer platform.
[![Analytics](https://ga-beacon.appspot.com/UA-39334307-2/Polymer/platform/README)](https://github.com/igrigorik/ga-beacon)

View file

@ -0,0 +1,16 @@
{
"name": "platform",
"main": "platform.js",
"homepage": "https://github.com/Polymer/platform",
"authors": [
"The Polymer Authors"
],
"description": "Integrate platform polyfills: load, build, test",
"keywords": [
"polymer",
"web",
"components"
],
"license": "BSD",
"private": true
}

View file

@ -0,0 +1,48 @@
BUILD LOG
---------
Build Time: 2014-02-14T15:57:20
NODEJS INFORMATION
==================
nodejs: v0.10.25
chai: 1.9.0
grunt: 0.4.2
grunt-audit: 0.0.2
grunt-concat-sourcemap: 0.4.1
grunt-contrib-concat: 0.3.0
grunt-contrib-uglify: 0.3.2
grunt-contrib-yuidoc: 0.5.0
grunt-karma: 0.6.2
karma: 0.10.9
karma-chrome-launcher: 0.1.2
karma-coffee-preprocessor: 0.1.2
karma-crbot-reporter: 0.0.4
karma-firefox-launcher: 0.1.3
karma-html2js-preprocessor: 0.1.0
karma-ie-launcher: 0.1.1
karma-jasmine: 0.1.5
karma-mocha: 0.1.1
karma-phantomjs-launcher: 0.1.2
karma-requirejs: 0.2.1
karma-safari-launcher: 0.1.1
karma-script-launcher: 0.1.0
mocha: 1.17.1
requirejs: 2.1.10
REPO REVISIONS
==============
CustomElements: 18efac1ed0fa054536a9efae2ddea678ddb986b1
HTMLImports: 69486ed9670afe6da872ed673e8a8d0448db16a8
NodeBind: eb5ee7941f712cbee755da24ab7553e2d90fb99d
PointerEvents: 1d551ce7af420577f150f5c922fc54b97f04c84d
PointerGestures: 0cded24896294ebecdfdad47583468f714a0a34e
ShadowDOM: 308a7c2e67032f746b5e52f4e27320ffe3a57ecd
TemplateBinding: 279934127f6777bdfb9f752e98eb0da172fbca1b
WeakMap: a0947a9a0f58f5733f464755c3b86de624b00a5d
observe-js: 3ba9aeec73f7864d519fb13c6f38cb10923cdfd9
platform: 6460c3d51b30b50d311eb1d7b055f29affa26f74
polymer-expressions: 470cced7cf167bd164f0b924ceb088dd7a8240b9
BUILD HASHES
============
build/platform.js: d0831d90d53d03c34a5382fdace5432599c97850

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,17 @@
{
"name": "polymer-ajax",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
},
"homepage": "https://github.com/Polymer/polymer-ajax",
"_release": "b650628b4b",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "b650628b4b281c1673e4dfde3ee5bbeb2524e8e4"
},
"_source": "git://github.com/Polymer/polymer-ajax.git",
"_target": "master",
"_originalSource": "Polymer/polymer-ajax"
}

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1 @@
See https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,7 @@
{
"name": "polymer-ajax",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
}
}

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-ajax</title>
<script src="../platform/platform.js"></script>
<link rel="import" href="polymer-ajax.html">
</head>
<body>
<polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></polymer-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("polymer-ajax");
ajax.addEventListener("polymer-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</body>
</html>

View file

@ -0,0 +1,245 @@
{
"project": {
"name": "Docs",
"description": "Docs"
},
"files": {
"..\\..\\polymer-ajax\\polymer-ajax.html": {
"name": "..\\..\\polymer-ajax\\polymer-ajax.html",
"modules": {
"Polymer Elements": 1
},
"classes": {
"polymer-ajax": 1
},
"fors": {},
"namespaces": {}
},
"..\\..\\polymer-ajax\\polymer-xhr.html": {
"name": "..\\..\\polymer-ajax\\polymer-xhr.html",
"modules": {},
"classes": {
"polymer-xhr": 1
},
"fors": {},
"namespaces": {}
}
},
"modules": {
"Polymer Elements": {
"name": "Polymer Elements",
"submodules": {},
"classes": {
"polymer-ajax": 1,
"polymer-xhr": 1
},
"fors": {},
"namespaces": {},
"tag": "module",
"file": "..\\..\\polymer-ajax\\polymer-xhr.html",
"line": 10
}
},
"classes": {
"polymer-ajax": {
"name": "polymer-ajax",
"shortname": "polymer-ajax",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Polymer Elements",
"namespace": "",
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 10,
"description": "polymer-ajax can be used to perform XMLHttpRequests.\n\nExample:\n\n <polymer-ajax auto url=\"http://gdata.youtube.com/feeds/api/videos/\" \n params='{\"alt\":\"json\", \"q\":\"chrome\"}'\n handleAs=\"json\"\n on-polymer-response=\"{{handleResponse}}\">\n </polymer-ajax>"
},
"polymer-xhr": {
"name": "polymer-xhr",
"shortname": "polymer-xhr",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Polymer Elements",
"namespace": "",
"file": "..\\..\\polymer-ajax\\polymer-xhr.html",
"line": 10,
"description": "polymer-xhr can be used to perform XMLHttpRequests.\n\nExample:\n\n <polymer-xhr id=\"xhr\"></polymer-xhr>\n ...\n this.$.xhr.request({url: url, params: params, callback: callback});"
}
},
"classitems": [
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 23,
"description": "Fired when a response is received.",
"itemtype": "event",
"name": "polymer-response",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 28,
"description": "Fired when an error is received.",
"itemtype": "event",
"name": "polymer-error",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 33,
"description": "Fired whenever a response or an error is received.",
"itemtype": "event",
"name": "polymer-complete",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 45,
"description": "The URL target of the request.",
"itemtype": "attribute",
"name": "url",
"type": "string",
"default": "''",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 53,
"description": "Specifies what data to store in the 'response' property, and\nto deliver as 'event.response' in 'response' events.\n\nOne of:\n\n `text`: uses XHR.responseText\n \n `xml`: uses XHR.responseXML\n \n `json`: uses XHR.responseText parsed as JSON",
"itemtype": "attribute",
"name": "handleAs",
"type": "string",
"default": "'text'",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 70,
"description": "If true, automatically performs an Ajax request when either url or params has changed.",
"itemtype": "attribute",
"name": "auto",
"type": "boolean",
"default": "false",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 78,
"description": "Parameters to send to the specified URL, as JSON.",
"itemtype": "attribute",
"name": "params",
"type": "string (JSON)",
"default": "''",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 86,
"description": "Returns the response object.",
"itemtype": "attribute",
"name": "response",
"type": "Object",
"default": "null",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 94,
"description": "The HTTP method to use such as 'GET', 'POST', 'PUT', 'DELETE'.\nDefault is 'GET'.",
"itemtype": "attribute",
"name": "method",
"type": "string",
"default": "''",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-ajax.html",
"line": 172,
"description": "Performs an Ajax request to the url specified.",
"itemtype": "method",
"name": "go",
"class": "polymer-ajax",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-ajax\\polymer-xhr.html",
"line": 59,
"description": "Sends a HTTP request to the server and returns the XHR object.",
"itemtype": "method",
"name": "request",
"params": [
{
"name": "inOptions",
"description": "",
"type": "Object",
"props": [
{
"name": "url",
"description": "The url to which the request is sent.",
"type": "String"
},
{
"name": "method",
"description": "The HTTP method to use, default is GET.",
"type": "String"
},
{
"name": "sync",
"description": "By default, all requests are sent asynchronously.\n To send synchronous requests, set to true.",
"type": "Boolean"
},
{
"name": "params",
"description": "Data to be sent to the server.",
"type": "Object"
},
{
"name": "body",
"description": "The content for the request body for POST method.",
"type": "Object"
},
{
"name": "headers",
"description": "HTTP request headers.",
"type": "Object"
},
{
"name": "responseType",
"description": "The response type. Default is 'text'.",
"type": "String"
},
{
"name": "callback",
"description": "Called when request is completed.",
"type": "Object"
}
]
}
],
"return": {
"description": "XHR object.",
"type": "Object"
},
"class": "polymer-xhr",
"module": "Polymer Elements"
}
],
"warnings": [
{
"message": "replacing incorrect tag: returns with return",
"line": " ..\\..\\polymer-ajax\\polymer-xhr.html:59"
}
]
}

View file

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>polymer api</title>
<style>
html, body {
font-family: Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
}
[noviewer] [ifnoviewer] {
display: block;
}
[detector], [ifnoviewer], [noviewer] [ifviewer] {
display: none;
}
[ifviewer], [ifnoviewer] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
border: none;
margin: 0;
width: 100%;
height: 100%;
}
#remote {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
</head>
<body>
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
<polymer-home-page ifviewer></polymer-home-page>
<div ifnoviewer>
<span id="remote">[remote]</span>
<iframe></iframe>
</div>
<!-- -->
<script>
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
// if no local info viewer, load it remotely
function noviewer() {
document.body.setAttribute('noviewer', '');
var path = location.pathname.split('/');
var module = path.pop() || path.pop();
document.querySelector('iframe').src = remoteDocs + module;
document.querySelector('title').textContent = module;
}
// for testing only
var opts = window.location.search;
if (opts.indexOf('noviewer') >= 0) {
noviewer();
}
</script>
</body>
</html>

View file

@ -0,0 +1,256 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* The `polymer-ajax` element performs `XMLHttpRequest`s.
*
* You can trigger a request explicitly by calling `go` on the
* element.
*
* With `auto` set to `true`, the element performs a request whenever
* its `url` or `params` properties are changed.
*
*
* Example:
*
* <polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
* params='{"alt":"json", "q":"chrome"}'
* handleAs="json"
* on-polymer-response="{{handleResponse}}">
* </polymer-ajax>
*
* Note: The `params` attribute must be double quoted JSON.
*
* @class polymer-ajax
* @status beta
* @homepage github.io
*
*/
/**
* Fired when a response is received.
*
* @event polymer-response
*/
/**
* Fired when an error is received.
*
* @event polymer-error
*/
/**
* Fired whenever a response or an error is received.
*
* @event polymer-complete
*/
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="polymer-xhr.html">
<polymer-element name="polymer-ajax" attributes="url handleAs auto params response method headers body contentType">
<script>
Polymer('polymer-ajax', {
/**
* The URL target of the request.
*
* @attribute url
* @type string
* @default ''
*/
url: '',
/**
* Specifies what data to store in the `response` property, and
* to deliver as `event.response` in `response` events.
*
* One of:
*
* `text`: uses `XHR.responseText`.
*
* `xml`: uses `XHR.responseXML`.
*
* `json`: uses `XHR.responseText` parsed as JSON.
*
* @attribute handleAs
* @type string
* @default 'text'
*/
handleAs: '',
/**
* If true, automatically performs an Ajax request when either `url` or `params` changes.
*
* @attribute auto
* @type boolean
* @default false
*/
auto: false,
/**
* Parameters to send to the specified URL, as JSON.
*
* @attribute params
* @type string (JSON)
* @default ''
*/
params: '',
/**
* Returns the response object.
*
* @attribute response
* @type Object
* @default null
*/
response: null,
/**
* The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'.
* Default is 'GET'.
*
* @attribute method
* @type string
* @default ''
*/
method: '',
/**
* HTTP request headers to send.
*
* Example:
*
* <polymer-ajax auto url="http://somesite.com"
* headers='{"X-Requested-With": "XMLHttpRequest"}'
* handleAs="json"
* on-polymer-response="{{handleResponse}}">
* </polymer-ajax>
*
* @attribute headers
* @type Object
* @default null
*/
headers: null,
/**
* Optional raw body content to send when method === "POST".
*
* Example:
*
* <polymer-ajax method="POST" auto url="http://somesite.com"
* body='{"foo":1, "bar":2}'>
* </polymer-ajax>
*
* @attribute body
* @type Object
* @default null
*/
body: null,
/**
* Content type to use when sending data.
*
* @attribute contentType
* @type string
* @default 'application/x-www-form-urlencoded'
*/
contentType: 'application/x-www-form-urlencoded',
ready: function() {
this.xhr = document.createElement('polymer-xhr');
},
receive: function(response, xhr) {
if (this.isSuccess(xhr)) {
this.processResponse(xhr);
} else {
this.error(xhr);
}
this.complete(xhr);
},
isSuccess: function(xhr) {
var status = xhr.status || 0;
return !status || (status >= 200 && status < 300);
},
processResponse: function(xhr) {
var response = this.evalResponse(xhr);
this.response = response;
this.fire('polymer-response', {response: response, xhr: xhr});
},
error: function(xhr) {
var response = xhr.status + ': ' + xhr.responseText;
this.fire('polymer-error', {response: response, xhr: xhr});
},
complete: function(xhr) {
this.fire('polymer-complete', {response: xhr.status, xhr: xhr});
},
evalResponse: function(xhr) {
return this[(this.handleAs || 'text') + 'Handler'](xhr);
},
xmlHandler: function(xhr) {
return xhr.responseXML;
},
textHandler: function(xhr) {
return xhr.responseText;
},
jsonHandler: function(xhr) {
var r = xhr.responseText;
try {
return JSON.parse(r);
} catch (x) {
return r;
}
},
urlChanged: function() {
if (!this.handleAs) {
var ext = String(this.url).split('.').pop();
switch (ext) {
case 'json':
this.handleAs = 'json';
break;
}
}
this.autoGo();
},
paramsChanged: function() {
this.autoGo();
},
autoChanged: function() {
this.autoGo();
},
// TODO(sorvell): multiple side-effects could call autoGo
// during one micro-task, use a job to have only one action
// occur
autoGo: function() {
if (this.auto) {
this.goJob = this.job(this.goJob, this.go, 0);
}
},
/**
* Performs an Ajax request to the specified URL.
*
* @method go
*/
go: function() {
var args = this.xhrArgs || {};
// TODO(sjmiles): alternatively, we could force POST if body is set
if (this.method === 'POST') {
args.body = this.body || args.body;
}
args.params = this.params || args.params;
if (args.params && typeof(args.params) == 'string') {
args.params = JSON.parse(args.params);
}
args.headers = this.headers || args.headers || {};
if (args.headers && typeof(args.headers) == 'string') {
args.headers = JSON.parse(args.headers);
}
if (this.contentType) {
args.headers['content-type'] = this.contentType;
}
args.callback = this.receive.bind(this);
args.url = this.url;
args.method = this.method;
return args.url && this.xhr.request(args);
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,96 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-xhr can be used to perform XMLHttpRequests.
* Example:
*
* <polymer-xhr id="xhr"></polymer-xhr>
* ...
* this.$.xhr.request({url: url, params: params, callback: callback});
*
* @class polymer-xhr
*/
-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="polymer-xhr">
<template>
<style>
:host {
display: none;
}
</style>
</template>
<script>
Polymer('polymer-xhr', {
makeReadyStateHandler: function(xhr, callback) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback && callback.call(null, xhr.response, xhr);
}
};
},
setRequestHeaders: function(xhr, headers) {
if (headers) {
for (var name in headers) {
xhr.setRequestHeader(name, headers[name]);
}
}
},
toQueryString: function(params) {
var r = [];
for (var n in params) {
var v = params[n];
n = encodeURIComponent(n);
r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
}
return r.join('&');
},
/**
* Sends a HTTP request to the server and returns the XHR object.
*
* @method request
* @param {Object} inOptions
* @param {String} inOptions.url The url to which the request is sent.
* @param {String} inOptions.method The HTTP method to use, default is GET.
* @param {boolean} inOptions.sync By default, all requests are sent asynchronously.
* To send synchronous requests, set to true.
* @param {Object} inOptions.params Data to be sent to the server.
* @param {Object} inOptions.body The content for the request body for POST method.
* @param {Object} inOptions.headers HTTP request headers.
* @param {String} inOptions.responseType The response type. Default is 'text'.
* @param {Object} inOptions.callback Called when request is completed.
* @returns {Object} XHR object.
*/
request: function(options) {
var xhr = new XMLHttpRequest();
var url = options.url;
var method = options.method || 'GET';
var async = !options.sync;
var params = this.toQueryString(options.params);
if (params && method == 'GET') {
url += (url.indexOf('?') > 0 ? '&' : '?') + params;
}
xhr.open(method, url, async);
if (options.responseType) {
xhr.responseType = options.responseType;
}
this.makeReadyStateHandler(xhr, options.callback);
this.setRequestHeaders(xhr, options.headers);
xhr.send(method == 'POST' ? (options.body || params) : null);
if (!async) {
xhr.onreadystatechange(xhr);
}
return xhr;
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,30 @@
<!doctype html>
<html>
<head>
<title>polymer-ajax</title>
<script src="../../../platform/platform.js"></script>
<script src="../../../tools/test/htmltest.js"></script>
<script src="../../../tools/test/chai/chai.js"></script>
<link rel="import" href="../../polymer-ajax.html">
</head>
<body>
<polymer-ajax
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"
auto
></polymer-ajax>
<script>
var assert = chai.assert;
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector('polymer-ajax');
ajax.addEventListener("polymer-response", function(event) {
assert.isTrue(event.detail.response.feed.entry.length > 0);
done();
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,9 @@
/*
* Copyright 2013 The Polymer Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
htmlSuite('polymer-ajax', function() {
htmlTest('html/polymer-ajax.html');
});

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-ajax Test Runner (Mocha)</title>
<meta charset="UTF-8">
<!-- -->
<link rel="stylesheet" href="../../tools/test/mocha/mocha.css" />
<script src="../../tools/test/mocha/mocha.js"></script>
<script src="../../tools/test/chai/chai.js"></script>
<script src="../../tools/test/mocha-htmltest.js"></script>
<!-- -->
<script src="../../platform/platform.js"></script>
</head>
<body>
<div id="mocha"></div>
<script>
mocha.setup({ui: 'tdd', slow: 1000, htmlbase: ''});
</script>
<!-- -->
<script src="js/polymer-ajax.js"></script>
<!-- -->
<script>
mocha.run();
</script>
</body>
</html>

View file

@ -0,0 +1,17 @@
{
"name": "polymer-anchor-point",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
},
"homepage": "https://github.com/Polymer/polymer-anchor-point",
"_release": "9fe2994f94",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "9fe2994f9444da025c20d8b9f82ecf35c7e83cc5"
},
"_source": "git://github.com/Polymer/polymer-anchor-point.git",
"_target": "master",
"_originalSource": "Polymer/polymer-anchor-point"
}

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1 @@
See https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,7 @@
{
"name": "polymer-anchor-point",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
}
}

View file

@ -0,0 +1,96 @@
<!doctype html>
<html>
<head>
<title>polymer-anchor-point</title>
<link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html">
<link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html">
<link rel="import" href="polymer-anchor-point.html">
<script src="../platform/platform.js"></script>
<link rel="stylesheet" href="../polymer-ui-base/base.css">
<style>
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
height: 100%;
}
#target {
padding: 5px;
border: 1px solid black;
display: none;
position: absolute;
left: -99999px;
}
#target.active {
display: block;
}
</style>
</head>
<body class="polymer-ui-body-text">
<div id="container">
<polymer-flex-layout vertical="true"></polymer-flex-layout>
<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
<polymer-ui-icon-button icon="menu" anchor-point="bottom left" target-anchor-point="top left"></polymer-ui-icon-button>
<div flex></div>
<polymer-ui-icon-button icon="refresh" anchor-point="bottom center" target-anchor-point="top center"></polymer-ui-icon-button>
<div flex></div>
<polymer-ui-icon-button icon="add" anchor-point="bottom right" target-anchor-point="top right"></polymer-ui-icon-button>
</polymer-ui-toolbar>
<div flex></div>
<div style="text-align:center">
<p><strong>Click icon buttons in the toolbars or enter custom <a href="http://dev.w3.org/csswg/css-backgrounds/#the-background-position" target="_blank">anchor-points</a> below.</strong></p>
<br>
anchor-point: <input id="customAnchorPt" value="bottom">
target anchor-point: <input id="customTargetAnchorPt" value="center -10px">
<br><br>
Click <polymer-ui-icon-button icon="settings" onclick="toggleCustom(event)"></polymer-ui-icon-button> for custom
</div>
<div flex></div>
<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
<polymer-ui-icon-button icon="drawer" anchor-point="top left" target-anchor-point="bottom left"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dots" anchor-point="top center" target-anchor-point="bottom center"></polymer-ui-icon-button>
<div flex></div>
<polymer-ui-icon-button icon="search" anchor-point="top right" target-anchor-point="bottom right"></polymer-ui-icon-button>
</polymer-ui-toolbar>
</div>
<div id="target" onclick="toggle(event)"></div>
<polymer-anchor-point id="anchorable"></polymer-anchor-point>
<script>
function toggle(e) {
var anchorable = document.querySelector('#anchorable');
var target = document.querySelector('#target');
var anchor = e.target;
if (target.classList.contains('active')) {
target.classList.remove('active');
} else {
var targetAnchorPt = anchor.getAttribute('target-anchor-point');
target.setAttribute('anchor-point', targetAnchorPt);
target.innerHTML = 'anchor-point: ' + anchor.getAttribute('anchor-point') + '<br>' + 'target anchor-point: ' + targetAnchorPt;
anchorable.target = target;
anchorable.anchor = anchor;
target.classList.add('active');
anchorable.apply();
}
};
function toggleCustom(e) {
var anchorable = document.querySelector('#anchorable');
var target = document.querySelector('#target');
var anchor = e.target;
if (target.classList.contains('active')) {
target.classList.remove('active');
} else {
var anchorPt = document.querySelector('#customAnchorPt').value;
anchor.setAttribute('anchor-point', anchorPt);
var targetAnchorPt = document.querySelector('#customTargetAnchorPt').value;
target.setAttribute('anchor-point', targetAnchorPt);
target.innerHTML = 'anchor-point: ' + anchorPt + '<br>' + 'target anchor-point: ' + targetAnchorPt;
anchorable.target = target;
anchorable.anchor = anchor;
target.classList.add('active');
anchorable.apply();
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,72 @@
{
"project": {
"name": "Docs",
"description": "Docs"
},
"files": {
"..\\..\\polymer-anchor-point\\polymer-anchor-point.html": {
"name": "..\\..\\polymer-anchor-point\\polymer-anchor-point.html",
"modules": {
"Polymer Elements": 1
},
"classes": {
"polymer-anchor-point": 1
},
"fors": {},
"namespaces": {}
}
},
"modules": {
"Polymer Elements": {
"name": "Polymer Elements",
"submodules": {},
"classes": {
"polymer-anchor-point": 1
},
"fors": {},
"namespaces": {},
"tag": "module",
"file": "..\\..\\polymer-anchor-point\\polymer-anchor-point.html",
"line": 5
}
},
"classes": {
"polymer-anchor-point": {
"name": "polymer-anchor-point",
"shortname": "polymer-anchor-point",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Polymer Elements",
"namespace": "",
"file": "..\\..\\polymer-anchor-point\\polymer-anchor-point.html",
"line": 5,
"description": "polymer-anchor-point can be used to align two nodes. The node to\nuse as the reference position is the anchor node, and the node to\nbe positioned is the target node.\n\nBoth the anchor and target nodes should have an anchor-point\nattribute. The target node is positioned such that its anchor-point\naligns with the anchor node's anchor-point.\n\nNote: The target node is positioned with position: fixed, and will not\nscroll with the page.\n\nNote: This is meant to polyfill the `<dialog>` positioning behavior when\nan anchor is provided. Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element\n\nExample:\n\n <div id=\"anchor\" anchor-point=\"bottom left\"></div>\n <div id=\"target\" anchor-point=\"top left\"></div>\n <polymer-anchor-point id=\"anchor-helper\"></polymer-anchor-point>\n <script>\n var helper = document.querySelector('#anchor-helper');\n helper.anchor = document.querySelector('#anchor');\n helper.target = document.querySelector('#target');\n helper.apply();\n </script>"
}
},
"classitems": [
{
"file": "..\\..\\polymer-anchor-point\\polymer-anchor-point.html",
"line": 156,
"description": "The node to be positioned.",
"itemtype": "attribute",
"name": "target",
"type": "Node",
"class": "polymer-anchor-point",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-anchor-point\\polymer-anchor-point.html",
"line": 162,
"description": "The node to align the target to.",
"itemtype": "attribute",
"name": "anchor",
"type": "node",
"class": "polymer-anchor-point",
"module": "Polymer Elements"
}
],
"warnings": []
}

View file

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>polymer api</title>
<style>
html, body {
font-family: Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
}
[noviewer] [ifnoviewer] {
display: block;
}
[detector], [ifnoviewer], [noviewer] [ifviewer] {
display: none;
}
[ifviewer], [ifnoviewer] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
border: none;
margin: 0;
width: 100%;
height: 100%;
}
#remote {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
</head>
<body>
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
<polymer-home-page ifviewer></polymer-home-page>
<div ifnoviewer>
<span id="remote">[remote]</span>
<iframe></iframe>
</div>
<!-- -->
<script>
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
// if no local info viewer, load it remotely
function noviewer() {
document.body.setAttribute('noviewer', '');
var path = location.pathname.split('/');
var module = path.pop() || path.pop();
document.querySelector('iframe').src = remoteDocs + module;
document.querySelector('title').textContent = module;
}
// for testing only
var opts = window.location.search;
if (opts.indexOf('noviewer') >= 0) {
noviewer();
}
</script>
</body>
</html>

View file

@ -0,0 +1,196 @@
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-anchor-point can be used to align two nodes. The node to
* use as the reference position is the anchor node, and the node to
* be positioned is the target node.
*
* Both the anchor and target nodes should have an anchor-point
* attribute. The target node is positioned such that its anchor-point
* aligns with the anchor node's anchor-point.
*
* Note: The target node is positioned with position: fixed, and will not
* scroll with the page.
*
* Note: This is meant to polyfill the `<dialog>` positioning behavior when
* an anchor is provided. Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
*
* Example:
*
* <div id="anchor" anchor-point="bottom left"></div>
* <div id="target" anchor-point="top left"></div>
* <polymer-anchor-point id="anchor-helper"></polymer-anchor-point>
* <script>
* var helper = document.querySelector('#anchor-helper');
* helper.anchor = document.querySelector('#anchor');
* helper.target = document.querySelector('#target');
* helper.apply();
* </script>
*
* @class polymer-anchor-point
*/
-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="polymer-anchor-point" attributes="target anchor">
<script>
(function() {
var DEFAULT_ANCHOR_POINT = 'center center';
function getAnchorPoint(node) {
var anchorPt = node.getAttribute('anchor-point');
if (!anchorPt || anchorPt === 'none') {
anchorPt = DEFAULT_ANCHOR_POINT;
}
return anchorPt;
};
function lengthIsPx(length) {
return length.slice(-2) === 'px';
};
function lengthIsPercent(length) {
return length.slice(-1) === '%';
};
function computeLength(length, ref) {
var computed = 0;
if (lengthIsPx(length)) {
computed = length.slice(0, -2);
} else if (lengthIsPercent(length)) {
computed = ref * length.slice(0, -1) / 100;
}
return computed;
};
function partIsX(part) {
return part === 'left' || part === 'right' || part === 'center';
};
function partIsY(part) {
return part === 'top' || part === 'bottom' || part === 'center';
};
function partIsKeyword(part) {
return part.slice(-1) !== '%' && part.slice(-2) !== 'px';
};
function parsePosition(position) {
var parsed = {};
var parts = position.split(' ');
var i = 0;
var lastEdgeX = true;
do {
if (partIsX(parts[i])) {
parsed.x = parts[i];
lastEdgeX = parts[i] !== 'center';
} else if (partIsY(parts[i])) {
parsed.y = parts[i];
lastEdgeX = false;
} else if (lastEdgeX) {
parsed.xOffset = parts[i];
lastEdgeX = false;
} else {
parsed.yOffset = parts[i];
}
} while (++i < parts.length);
return parsed;
};
function computeAnchorOffset(rect, anchorPt) {
var offset = {
left: 0,
top: 0
};
var parsed = parsePosition(anchorPt);
if (!parsed.x && !parsed.xOffset) {
offset.left = rect.width / 2;
} else if (parsed.x && !parsed.xOffset) {
switch (parsed.x) {
case 'left':
offset.left = 0;
break;
case 'right':
offset.left = rect.width;
break;
case 'center':
offset.left = rect.width / 2;
break;
}
} else {
var computed = computeLength(parsed.xOffset, rect.width);
if (parsed.x === 'right') {
offset.left = rect.width - computed;
} else if (!parsed.x || parsed.x === 'left') {
offset.left = computed;
}
}
if (!parsed.y && !parsed.yOffset) {
offset.top = rect.height / 2;
} else if (parsed.y && !parsed.yOffset) {
switch (parsed.y) {
case 'top':
offset.top = 0;
break;
case 'bottom':
offset.top = rect.height;
break;
case 'center':
offset.top = rect.height / 2;
break;
}
} else {
var computed = computeLength(parsed.yOffset, rect.height);
if (parsed.y === 'bottom') {
offset.top = rect.height - computed;
} else if (!parsed.y || parsed.y === 'top') {
offset.top = computed;
}
}
return offset;
};
Polymer('polymer-anchor-point', {
/**
* The node to be positioned.
* @attribute target
* @type Node
*/
target: null,
/**
* The node to align the target to.
* @attribute anchor
* @type node
*/
anchor: null,
canPosition: function() {
return this.target && this.anchor;
},
apply: function() {
if (!this.canPosition()) {
return;
}
var pos = this.computePosition();
this.target.style.position = 'fixed';
this.target.style.top = pos.top + 'px';
this.target.style.left = pos.left + 'px';
},
computePosition: function() {
var rect = this.anchor.getBoundingClientRect();
var anchorPt = getAnchorPoint(this.anchor);
var anchorOffset = computeAnchorOffset(rect, anchorPt);
var targetRect = this.target.getBoundingClientRect();
var targetAnchorPt = getAnchorPoint(this.target);
var targetOffset = computeAnchorOffset(targetRect, targetAnchorPt);
var pos = {
left: rect.left + anchorOffset.left - targetOffset.left,
top: rect.top + anchorOffset.top - targetOffset.top
};
return pos;
}
});
})();
</script>
</polymer-element>

View file

@ -0,0 +1,18 @@
{
"name": "polymer-animation",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master",
"web-animations-js": "web-animations/web-animations-js#master"
},
"homepage": "https://github.com/Polymer/polymer-animation",
"_release": "7620c26c5a",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "7620c26c5a0fdd2027329151485b01fd1caf3520"
},
"_source": "git://github.com/Polymer/polymer-animation.git",
"_target": "master",
"_originalSource": "Polymer/polymer-animation"
}

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1 @@
See https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,8 @@
{
"name": "polymer-animation",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master",
"web-animations-js": "web-animations/web-animations-js#master"
}
}

View file

@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<title>Polymer Animation Components</title>
<link rel="import" href="polymer-animation.html">
<link rel="import" href="polymer-animation-group.html">
<link rel="import" href="polymer-blink.html">
<link rel="import" href="polymer-bounce.html">
<link rel="import" href="polymer-fadein.html">
<link rel="import" href="polymer-fadeout.html">
<link rel="import" href="polymer-flip.html">
<link rel="import" href="polymer-shake.html">
<script src="../platform/platform.js"></script>
<style>
body {
text-align: center;
font-family: Helvetica, sans-serif;
}
div#target {
display: inline-block;
background-color: dimgrey;
border-radius: 5px;
padding: 5px 10px;
margin: 50px;
font-size: 30px;
color: white;
}
div.animations > * {
display: inline-block;
background-color: darkgrey;
border-radius: 5px;
padding: 5px 10px;
margin: 5px;
color: white;
}
</style>
</head>
<body>
<div id="target">animated!</div>
<div class="animations">
<polymer-animation duration="1">
raw
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="1">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="0.3">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="1">
</polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation-group type="seq">
raw group
<polymer-animation duration="0.3">
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="1">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="0.3">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="1">
</polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation duration="0.3">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(1)">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(1.2)">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(1)">
</polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
</polymer-animation-group>
<polymer-animation id="sample-animation" duration="0.5">sample</polymer-animation>
<polymer-bounce duration="1">bounce</polymer-bounce>
<polymer-shake>shake</polymer-shake>
<!--<polymer-shake duration="Infinity">shake forever</polymer-shake>//-->
<polymer-flip>flip X</polymer-flip>
<polymer-flip axis="y">flip Y</polymer-flip>
<polymer-blink>blink</polymer-blink>
<polymer-fadein>fade in</polymer-fadein>
<polymer-fadeout>fade out (with event)</polymer-fadeout>
</div>
<script>
var sampleAnimationFn = function(timeFraction, currentIteration, animationTarget, underlyingValue) {
if (timeFraction < 1) {
animationTarget.textContent = timeFraction;
} else {
animationTarget.textContent = 'animated!';
}
};
document.addEventListener('polymer-ready', function() {
document.querySelector('.animations').addEventListener('click',
function(e) {
var animation = e.target;
if (animation.id === 'sample-animation') {
animation.sample = sampleAnimationFn;
}
animation.target = target;
animation.play();
});
document.querySelector('polymer-fadeout').addEventListener(
'complete', function(e) {
alert('complete!');
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,356 @@
{
"project": {
"name": "Docs",
"description": "Docs"
},
"files": {
"..\\..\\polymer-animation\\polymer-animation-group.html": {
"name": "..\\..\\polymer-animation\\polymer-animation-group.html",
"modules": {
"Animation": 1
},
"classes": {
"polymer-animation-group": 1
},
"fors": {},
"namespaces": {}
},
"..\\..\\polymer-animation\\polymer-animation-keyframe.html": {
"name": "..\\..\\polymer-animation\\polymer-animation-keyframe.html",
"modules": {},
"classes": {
"polymer-animation-keyframe": 1
},
"fors": {},
"namespaces": {}
},
"..\\..\\polymer-animation\\polymer-animation-prop.html": {
"name": "..\\..\\polymer-animation\\polymer-animation-prop.html",
"modules": {},
"classes": {
"polymer-animation-prop": 1
},
"fors": {},
"namespaces": {}
},
"..\\..\\polymer-animation\\polymer-animation.html": {
"name": "..\\..\\polymer-animation\\polymer-animation.html",
"modules": {},
"classes": {
"polymer-animation": 1
},
"fors": {},
"namespaces": {}
}
},
"modules": {
"Animation": {
"name": "Animation",
"submodules": {},
"classes": {
"polymer-animation-group": 1,
"polymer-animation-keyframe": 1,
"polymer-animation-prop": 1,
"polymer-animation": 1
},
"fors": {},
"namespaces": {},
"tag": "module",
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 33,
"itemtype": "main",
"example": [
" toolkitchen/labs/animation2/grid-fade.html",
" toolkitchen/labs/animation2/group.html"
]
}
},
"classes": {
"polymer-animation-group": {
"name": "polymer-animation-group",
"shortname": "polymer-animation-group",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Animation",
"namespace": "",
"file": "..\\..\\polymer-animation\\polymer-animation-group.html",
"line": 14,
"description": "Component for a group of animations."
},
"polymer-animation-keyframe": {
"name": "polymer-animation-keyframe",
"shortname": "polymer-animation-keyframe",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Animation",
"namespace": "",
"file": "..\\..\\polymer-animation\\polymer-animation-keyframe.html",
"line": 5,
"description": "Defines a keyframe in an animation. Its children should be\n`<polymer-animation-prop>` elements specifying the css\nproperty value at the keyframe."
},
"polymer-animation-prop": {
"name": "polymer-animation-prop",
"shortname": "polymer-animation-prop",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Animation",
"namespace": "",
"file": "..\\..\\polymer-animation\\polymer-animation-prop.html",
"line": 5,
"description": "A CSS property and value to use in a `<polymer-animation-keyframe>`."
},
"polymer-animation": {
"name": "polymer-animation",
"shortname": "polymer-animation",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Animation",
"namespace": "",
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 33,
"description": "Component for a single animation.\n\nA animation component to fade out an element:\n\n <polymer-animation id=\"fadeout\">\n <polymer-animation-keyframe offset=\"0\">\n <polymer-animation-prop name=\"opacity\" value=\"0\">\n </polymer-animation-keyframe>\n </polymer-animation-keyframe>\n <polymer-animation-keyframe offset=\"1\">\n <polymer-animation-prop name=\"opacity\" value=\"1\">\n <polymer-animation-prop>\n </polymer-animation-keyframe>\n </polymer-animation>"
}
},
"classitems": [
{
"file": "..\\..\\polymer-animation\\polymer-animation-group.html",
"line": 20,
"description": "If specified the target will be assigned to all child animations.",
"itemtype": "property",
"name": "target",
"type": "HTMLElement|Node",
"default": "null",
"class": "polymer-animation-group",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation-group.html",
"line": 27,
"description": "If specified and not \"auto\" the duration will apply to the group\nand propagate to any child animations that is not a group and does\nnot specify a duration.",
"itemtype": "property",
"name": "duration",
"type": "number",
"default": "\"auto\"",
"class": "polymer-animation-group",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation-group.html",
"line": 36,
"description": "Group type. 'par' for parallel and 'seq' for sequence.",
"itemtype": "property",
"name": "type",
"type": "String",
"default": "'par'",
"class": "polymer-animation-group",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation-keyframe.html",
"line": 12,
"description": "From 0 to 1.",
"itemtype": "property",
"name": "offset",
"type": "Number",
"class": "polymer-animation-keyframe",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation-prop.html",
"line": 10,
"description": "CSS property name.",
"itemtype": "property",
"name": "name",
"type": "String",
"required": 1,
"class": "polymer-animation-prop",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation-prop.html",
"line": 16,
"description": "CSS property value.",
"itemtype": "property",
"name": "value",
"required": 1,
"class": "polymer-animation-prop",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 50,
"description": "Fired when the animation starts",
"itemtype": "event",
"name": "polymer-animation-change",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 62,
"description": "One or more nodes to animate.",
"itemtype": "property",
"name": "target",
"type": "HTMLElement|Node|Array<HTMLElement|Node>",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 68,
"description": "Selector for the node being animated.",
"itemtype": "property",
"name": "targetSelector",
"type": "String",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 75,
"description": "Animation keyframes specified as an array of dictionaries of\n&lt;css properties&gt;:&lt;array of values&gt; pairs. For example,",
"itemtype": "property",
"name": "keyframes",
"type": "Object",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 82,
"description": "A custom animation function. Either provide this or keyframes.",
"itemtype": "property",
"name": "sample",
"type": "Function",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 89,
"description": "The composition behavior. \"replace\", \"add\" or \"merge\".",
"itemtype": "property",
"name": "composite",
"type": "\"replace\"|\"add\"|\"merge\"",
"default": "\"replace\"",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 97,
"description": "Animation duration in milliseconds, 'infinity' or 'auto'. 'auto'\nmeans use the animation's intrinsic duration.",
"itemtype": "property",
"name": "duration",
"type": "Number|\"Infinity\"|\"auto\"",
"default": "\"auto\"",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 105,
"description": "\"none\", \"forwards\", \"backwards\", \"both\" or \"auto\". When set to\n\"auto\", the fillMode is \"none\" for a polymer-animation and \"both\"\nfor a polymer-animation-group.",
"itemtype": "property",
"name": "fillMode",
"type": "\"none\"|\"forwards\"|\"backwards\"|\"both\"|\"auto\"",
"default": "\"auto\"",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 114,
"description": "A transition timing function.",
"itemtype": "property",
"name": "easing",
"type": "\"linear\"|\"ease\"|\"ease-in\"|\"ease-out\"|\"ease-in-out\"|\n \"step-start\"|\"step-middle\"|\"step-end\"",
"default": "\"linear\"",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 122,
"description": "Number of iterations into the timed item in which to begin\nthe animation. e.g. 0.5 will cause the animation to begin\nhalfway through the first iteration.",
"itemtype": "property",
"name": "iterationStart",
"type": "Number",
"default": "0",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 131,
"itemtype": "property",
"name": "iterationCount",
"type": "Number|'Infinity'",
"default": "1",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 137,
"description": "Delay in milliseconds.",
"itemtype": "property",
"name": "delay",
"type": "Number",
"default": "0",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 144,
"itemtype": "property",
"name": "direction",
"type": "\"normal\"|\"reverse\"|\"alternate\"|\"alternate-reverse\"",
"default": "\"normal\"",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 150,
"itemtype": "property",
"name": "autoplay",
"type": "Boolean",
"default": "false",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 173,
"description": "Plays the animation.",
"itemtype": "method",
"name": "play",
"class": "polymer-animation",
"module": "Animation"
},
{
"file": "..\\..\\polymer-animation\\polymer-animation.html",
"line": 184,
"description": "Stops the animation.",
"itemtype": "method",
"name": "cancel",
"class": "polymer-animation",
"module": "Animation"
}
],
"warnings": []
}

View file

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>polymer api</title>
<style>
html, body {
font-family: Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
}
[noviewer] [ifnoviewer] {
display: block;
}
[detector], [ifnoviewer], [noviewer] [ifviewer] {
display: none;
}
[ifviewer], [ifnoviewer] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
border: none;
margin: 0;
width: 100%;
height: 100%;
}
#remote {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
</head>
<body>
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
<polymer-home-page ifviewer></polymer-home-page>
<div ifnoviewer>
<span id="remote">[remote]</span>
<iframe></iframe>
</div>
<!-- -->
<script>
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
// if no local info viewer, load it remotely
function noviewer() {
document.body.setAttribute('noviewer', '');
var path = location.pathname.split('/');
var module = path.pop() || path.pop();
document.querySelector('iframe').src = remoteDocs + module;
document.querySelector('title').textContent = module;
}
// for testing only
var opts = window.location.search;
if (opts.indexOf('noviewer') >= 0) {
noviewer();
}
</script>
</body>
</html>

View file

@ -0,0 +1,8 @@
<x-meta id="polymer-animation">
<property name="composite" kind="select" options="replace, add, merge"></property>
<property name="fillMode" kind="select" options="none, forwards, backwards, both, auto"></property>
</x-meta>
<x-meta id="polymer-animation-group">
<property name="type" kind="select" options="seq, par"></property>
</x-meta>

View file

@ -0,0 +1,117 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-animation-group" extends="polymer-animation" attributes="type">
<script>
(function() {
var ANIMATION_GROUPS = {
'par': ParGroup,
'seq': SeqGroup
};
/**
* @module Animation
*/
/**
* Component for a group of animations.
*
* @class polymer-animation-group
*/
Polymer('polymer-animation-group', {
/**
* If specified the target will be assigned to all child animations.
* @property target
* @type HTMLElement|Node
* @default null
*/
targetSelector: '',
/**
* If specified and not "auto" the duration will apply to the group
* and propagate to any child animations that is not a group and does
* not specify a duration.
* @property duration
* @type number
* @default "auto"
*/
duration: 'auto',
/**
* Group type. 'par' for parallel and 'seq' for sequence.
* @property type
* @type String
* @default 'par'
*/
type: 'par',
typeChanged: function() {
this.apply();
},
targetChanged: function() {
// Only propagate target to children animations if it's defined.
if (this.target) {
this.doOnChildren(function(c) {
c.target = this.target;
}.bind(this));
}
},
durationChanged: function() {
if (this.duration && this.duration !== 'auto') {
this.doOnChildren(function(c) {
// Propagate to children that is not a group and has no
// duration specified.
if (!c.type && (!c.duration || c.duration === 'auto')) {
c.duration = this.duration;
}
}.bind(this));
}
},
doOnChildren: function(inFn) {
var children = this.children;
if (!children.length) {
children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
}
Array.prototype.forEach.call(children, function(c) {
// TODO <template> in the way
c.apply && inFn(c);
}, this);
},
makeAnimation: function() {
return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
},
hasTarget: function() {
var ht = this.target !== null;
if (!ht) {
this.doOnChildren(function(c) {
ht = ht || c.hasTarget();
}.bind(this));
}
return ht;
},
apply: function() {
// Propagate target and duration to child animations first.
this.durationChanged();
this.targetChanged();
this.doOnChildren(function(c) {
c.apply();
});
return this.super();
},
get childAnimationElements() {
var list = [];
this.doOnChildren(function(c) {
if (c.makeAnimation) {
list.push(c);
}
});
return list;
},
get childAnimations() {
var list = [];
this.doOnChildren(function(c) {
if (c.animation) {
list.push(c.animation);
}
});
return list;
}
});
})();
</script>
</polymer-element>

View file

@ -0,0 +1,32 @@
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="polymer-animation-keyframe" attributes="offset value easing">
<script>
/**
* Defines a keyframe in an animation. Its children should be
* `<polymer-animation-prop>` elements specifying the css
* property value at the keyframe.
*
* @class polymer-animation-keyframe
*/
/**
* From 0 to 1.
* @property offset
* @type Number
*/
Polymer('polymer-animation-keyframe', {
get properties() {
var props = {};
var children = this.querySelectorAll('polymer-animation-prop');
Array.prototype.forEach.call(children, function(c) {
props[c.name] = c.value;
});
if (this.offset !== null) {
props.offset = this.offset;
}
return props;
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,23 @@
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="polymer-animation-prop" attributes="name value">
<script>
/**
* A CSS property and value to use in a `<polymer-animation-keyframe>`.
*
* @class polymer-animation-prop
*/
/**
* CSS property name.
* @property name
* @type String
* @required
*/
/**
* CSS property value.
* @property value
* @required
*/
Polymer('polymer-animation-prop');
</script>
</polymer-element>

View file

@ -0,0 +1,301 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="web-animations.html">
<link rel="import" href="polymer-animation-keyframe.html">
<link rel="import" href="polymer-animation-prop.html">
<polymer-element name="polymer-animation" attributes="target keyframes sample composite duration fill easing iterationStart iterationCount delay direction autoplay targetSelector">
<script>
(function() {
function findTarget(inSelector, inNode) {
var p = inNode;
var target;
while (p && !p.host && p !== document) {
p = p.parentNode;
}
if (p) {
target = p.querySelector(inSelector);
}
if (!target && p && p.host) {
target = findTarget(inSelector, p.host);
}
return target;
};
function toNumber(value, allowInfinity) {
return (allowInfinity && value === 'Infinity') ? Number.POSITIVE_INFINITY : Number(value);
};
/**
* WebAnimations module.
* @module Animation
* @main animation
* @example toolkitchen/labs/animation2/grid-fade.html
* @example toolkitchen/labs/animation2/group.html
*/
/**
* Component for a single animation.
*
* A animation component to fade out an element:
*
* <polymer-animation id="fadeout">
* <polymer-animation-keyframe offset="0">
* <polymer-animation-prop name="opacity" value="0">
* </polymer-animation-prop>
* </polymer-animation-keyframe>
* <polymer-animation-keyframe offset="1">
* <polymer-animation-prop name="opacity" value="1">
* </polymer-animation-prop>
* </polymer-animation-keyframe>
* </polymer-animation>
* @class polymer-animation
*/
/**
* Fired when the animation starts
* @event polymer-animation-start
*
* Fired when the animation completes
* @event polymer-animation-end
*
* Fired when the web animation object changes.
* @event polymer-animation-change
*
*/
Polymer('polymer-animation', {
/**
* One or more nodes to animate.
* @property target
* @type HTMLElement|Node|Array<HTMLElement|Node>
*/
target: null,
/**
* Selector for the node being animated.
* @property targetSelector
* @type String
*/
targetSelector: '',
// animation
/**
* Animation keyframes specified as an array of dictionaries of
* &lt;css properties&gt;:&lt;array of values&gt; pairs. For example,
* @property keyframes
* @type Object
*/
keyframes: null,
/**
* A custom animation function. Either provide this or keyframes.
* @property sample
* @type Function
*/
sample: null,
//accumulate: null, // not working in polyfill
/**
* The composition behavior. "replace", "add" or "merge".
* @property composite
* @type "replace"|"add"|"merge"
* @default "replace"
*/
composite: 'replace',
// timing
/**
* Animation duration in milliseconds, 'infinity' or 'auto'. 'auto'
* means use the animation's intrinsic duration.
* @property duration
* @type Number|"Infinity"|"auto"
* @default "auto"
*/
duration: 'auto',
/**
* "none", "forwards", "backwards", "both" or "auto". When set to
* "auto", the fill is "none" for a polymer-animation and "both"
* for a polymer-animation-group.
* @property fill
* @type "none"|"forwards"|"backwards"|"both"|"auto"
* @default "auto"
*/
fill: 'auto',
/**
* A transition timing function.
* @property easing
* @type "linear"|"ease"|"ease-in"|"ease-out"|"ease-in-out"|
* "step-start"|"step-middle"|"step-end"
* @default "linear"
*/
easing: 'linear',
/**
* Number of iterations into the timed item in which to begin
* the animation. e.g. 0.5 will cause the animation to begin
* halfway through the first iteration.
* @property iterationStart
* @type Number
* @default 0
*/
iterationStart: 0,
/**
* @property iterationCount
* @type Number|'Infinity'
* @default 1
*/
iterationCount: 1,
/**
* Delay in milliseconds.
* @property delay
* @type Number
* @default 0
*/
delay: 0,
/**
* @property direction
* @type "normal"|"reverse"|"alternate"|"alternate-reverse"
* @default "normal"
*/
direction: 'normal',
/**
* @property autoplay
* @type Boolean
* @default false
*/
autoplay: false,
animation: false,
observe: {
target: 'apply',
keyframes: 'apply',
sample: 'apply',
composite: 'apply',
duration: 'apply',
fill: 'apply',
easing: 'apply',
iterationCount: 'apply',
delay: 'apply',
direction: 'apply',
autoplay: 'apply'
},
ready: function() {
this.apply();
},
/**
* Plays the animation.
* @method play
*/
play: function() {
this.apply();
if (this.animation && !this.autoplay) {
this.bindAnimationEvents();
this.player = document.timeline.play(this.animation);
return this.player;
}
},
/**
* Stops the animation.
* @method cancel
*/
cancel: function() {
if (this.player) {
this.player.source = null;
}
},
hasTarget: function() {
return this.target !== null;
},
apply: function() {
this.animation = null;
this.animation = this.makeAnimation();
if (this.autoplay && this.animation) {
this.play();
}
return this.animation;
},
makeSingleAnimation: function(target) {
// XXX(yvonne): for selecting all the animated elements.
target.classList.add('polymer-animation-target');
return new Animation(target, this.animationEffect, this.timingProps);
},
makeAnimation: function() {
// this.target && console.log('makeAnimation target', this.target, 'animation', this.animationEffect, 'timing', this.timingProps);
if (!this.target) {
return null;
}
var animation;
if (Array.isArray(this.target)) {
var array = [];
this.target.forEach(function(t) {
array.push(this.makeSingleAnimation(t));
}.bind(this));
animation = new ParGroup(array);
} else {
animation = this.makeSingleAnimation(this.target);
}
return animation;
},
animationChanged: function() {
// TODO: attributes are not case sensitive.
// TODO: Sending 'this' with the event because if the children is
// in ShadowDOM the sender becomes the shadow host.
this.fire('polymer-animation-change', this);
},
targetSelectorChanged: function() {
if (this.targetSelector) {
this.target = findTarget(this.targetSelector, this);
}
},
targetChanged: function(old) {
if (old) {
old.classList.remove('polymer-animation-target');
}
},
get timingProps() {
var props = {};
var timing = {
fill: {},
easing: {},
delay: {isNumber: true},
iterationCount: {isNumber: true, allowInfinity: true},
direction: {},
duration: {isNumber: true}
};
for (t in timing) {
if (this[t] !== null) {
var name = timing[t].property || t;
props[name] = timing[t].isNumber && this[t] !== 'auto' ?
toNumber(this[t], timing[t].allowInfinity) : this[t];
}
}
return props;
},
get animationEffect() {
var props = {};
var frames = [];
var effect;
if (this.keyframes) {
frames = this.keyframes;
} else if (!this.sample) {
var children = this.querySelectorAll('polymer-animation-keyframe');
if (children.length === 0) {
children = this.shadowRoot.querySelectorAll('polymer-animation-keyframe');
}
Array.prototype.forEach.call(children, function(c) {
frames.push(c.properties);
});
}
if (this.sample) {
effect = {sample: this.sample};
} else {
effect = new KeyframeEffect(frames, this.composite);
}
return effect;
},
bindAnimationEvents: function() {
if (!this.animation.onstart) {
this.animation.onstart = this.animationStartHandler.bind(this);
}
if (!this.animation.onend) {
this.animation.onend = this.animationEndHandler.bind(this);
}
},
animationStartHandler: function() {
this.fire('polymer-animation-start');
},
animationEndHandler: function() {
this.fire('polymer-animation-end');
}
});
})();
</script>
</polymer-element>

View file

@ -0,0 +1,15 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-blink" extends="polymer-animation">
<script>
Polymer('polymer-blink', {
targetSelector: '',
duration: 0.7,
iterationCount: 'Infinity',
easing: 'cubic-bezier(1.0,0,0,1.0)',
keyframes: [
{opacity: 1},
{opacity: 0}
]
});
</script>
</polymer-element>

View file

@ -0,0 +1,29 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-bounce" extends="polymer-animation">
<script>
Polymer('polymer-bounce', {
targetSelector: '',
duration: 1,
magnitude: '-30px',
ready: function() {
this.super();
this.magnitudeChanged();
},
magnitudeChanged: function() {
this.generate();
},
generate: function() {
var parsed = this.magnitude.match(/([\-0-9]+)(.*)/);
this.keyframes = [
{offset: 0, transform: 'translateY(0)'},
{offset: 0.2, transform: 'translateY(0)'},
{offset: 0.4, transform: 'translateY(' + this.magnitude + ')'},
{offset: 0.5, transform: 'translateY(0)'},
{offset: 0.6, transform:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'},
{offset: 0.8, transform: 'translateY(0)'},
{offset: 1, transform: 'translateY(0)'}
];
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,17 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-fadein" extends="polymer-animation" duration="0.5">
<template>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="0">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="1">
</polymer-animation-prop>
</polymer-animation-keyframe>
<content></content>
</template>
<script>
Polymer('polymer-fadein');
</script>
</polymer-element>

View file

@ -0,0 +1,11 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-fadeout" extends="polymer-animation" duration="0.5">
<script>
Polymer('polymer-fadeout', {
keyframes: [
{opacity: 1},
{opacity: 0}
]
});
</script>
</polymer-element>

View file

@ -0,0 +1,36 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-flip" extends="polymer-animation" attributes="axis">
<script>
Polymer('polymer-flip', {
axis: 'x',
duration: 0.5,
ready: function() {
this.generate();
},
axisChanged: function() {
this.generate();
},
generate: function() {
var isY = this.axis === 'y' || this.axis === 'Y';
var rotate = isY ? 'rotateY' : 'rotateX';
var transZ = isY ? '150px' : '50px';
this.keyframes = [{
offset: 0,
transform: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) scale(1)'
}, {
offset: 0.4,
transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(170deg) scale(1)'
}, {
offset: 0.5,
transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(190deg) scale(1)'
}, {
offset: 0.8,
transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(.95)'
}, {
offset: 1,
transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(1)'
}];
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,31 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-scale" extends="polymer-animation" attributes="fromX fromY toX toY">
<template>
</template>
<script>
Polymer('polymer-scale', {
fromX: '1',
fromY: '1',
toX: '1',
toY: '1',
fromXChanged: function() {
this.generate();
},
fromYChanged: function() {
this.generate();
},
toXChanged: function() {
this.generate();
},
toYChanged: function() {
this.generate();
},
generate: function() {
this.keyframes = [
{transform: 'scale(' + this.fromX + ',' + this.fromY + ')'},
{transform: 'scale(' + this.toX + ',' + this.toY + ')'}
];
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,74 @@
<link rel="import" href="polymer-animation-group.html">
<polymer-element name="polymer-shake" extends="polymer-animation-group">
<template>
<polymer-animation duration="{{period}}">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(0px)">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="{{negTransform}}">
</polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation duration="{{shakeDuration}}" iterationCount="{{shakeIterations}}">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="{{negTransform}}">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="{{posTransform}}">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="{{negTransform}}">
</polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation duration="{{period}}">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="{{negTransform}}">
</polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(0px)">
</polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<content></content>
</template>
<script>
Polymer('polymer-shake', {
type: 'seq',
targetSelector: '',
duration: 0.3,
magnitude: '10px',
period: 0.1,
easing: 'ease-in',
ready: function() {
this.super();
this.magnitudeChanged();
this.periodChanged();
},
durationChanged: function() {
this.super();
this.generate();
},
magnitudeChanged: function() {
this.generate();
},
periodChanged: function() {
this.generate();
},
generate: function() {
this.negTransform = 'translateX(-' + this.magnitude + ')';
this.posTransform = 'translateX(' + this.magnitude + ')';
this.shakeDuration = this.period * 2;
this.shakeIterations = this.duration === 'Infinity' ? this.duration : Math.ceil(this.duration / this.shakeDuration);
},
get timingProps() {
return {};
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,31 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-translate" extends="polymer-animation" attributes="fromX fromY toX toY">
<template>
</template>
<script>
Polymer('polymer-translate', {
fromX: '0',
fromY: '0',
toX: '0',
toY: '0',
fromXChanged: function() {
this.generate();
},
fromYChanged: function() {
this.generate();
},
toXChanged: function() {
this.generate();
},
toYChanged: function() {
this.generate();
},
generate: function() {
this.keyframes = [
{transform: 'translate3d(' + this.fromX + ',' + this.fromY + ', 0)'},
{transform: 'translate3d(' + this.toX + ',' + this.toY + ', 0)'}
];
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-animation-group.html">
</head>
<body>
<polymer-element name="transition-hslide-scale-out" extends="polymer-animation-group" noscript>
<template>
<polymer-animation id="scale-out" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(1)"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(0.8)"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation id="hslide-in" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(100%)"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(0)"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
</template>
</polymer-element>
<transition-hslide-scale-out></transition-hslide-scale-out>
<div>Hi!</div>
<script>
document.addEventListener('polymer-ready', function() {
var a = document.querySelector('transition-hslide-scale-out');
a.target = document.querySelector('div');
setTimeout(function() {
a.play();
}, 50);
});
</script>
</body>
</html>

View file

@ -0,0 +1 @@
<script src="../web-animations-js/web-animations.js"></script>

View file

@ -0,0 +1,17 @@
{
"name": "polymer-collapse",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
},
"homepage": "https://github.com/Polymer/polymer-collapse",
"_release": "4852d16b3e",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "4852d16b3ecb5b54f37f8db89c1cfdd3175ae3de"
},
"_source": "git://github.com/Polymer/polymer-collapse.git",
"_target": "master",
"_originalSource": "Polymer/polymer-collapse"
}

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1 @@
See https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,7 @@
{
"name": "polymer-collapse",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
}
}

View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-collapse</title>
<script src="../platform/platform.js"></script>
<link rel="import" href="polymer-collapse.html">
<style>
.box {
background: #eee;
}
.content {
margin: 10px;
}
section {
padding: 10px;
}
</style>
</head>
<body unresolved>
<section style="background: blue; width: 800px;">
<button onclick="document.querySelector('#collapse1').toggle()">toggle collapse</button>
<div id="box1" class="box" style="height: 300px;">
<div class="content">Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem</div>
</div>
<polymer-collapse id="collapse1" closed fixedSize targetId="box1"></polymer-collapse>
</section>
<section style="background: green; width: 800px;">
<button onclick="document.querySelector('#collapse2').toggle()">toggle collapse</button>
<div id="box2" class="box">
<div class="content">Coercuit iunctarum vix sic aberant spisso imagine litem cetera nubes ambitae tanta usu circumfuso fulminibus umentia rectumque iuga pluviaque meis semina regat ne campoque meis coeperunt nix cura iunctarum ligavit: secant ventos seductaque permisit sic iunctarum locoque his coeptis tum terras animalia recepta aethera cornua invasit tollere videre tonitrua humanas otia tuba alta dissociata sanctius adsiduis inclusum caesa ita onus sine pluviaque litem manebat fixo extendi ubi inposuit cum sublime membra undas orba forma deducite aethera turba coercuit retinebat obliquis bracchia nisi mentisque origine peregrinum manebat</div>
<section style="background: lightgreen;">
<button onclick="document.querySelector('#collapse3').toggle()">toggle collapse</button>
<div id="box3" class="box">
<div class="content">Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem</div>
<section style="background: #00FF99;">
<button onclick="document.querySelector('#collapse4').toggle()">toggle collapse</button>
<div id="box4" class="box">
<div class="content">Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem</div>
</div>
<polymer-collapse id="collapse4" closed targetId="box4"></polymer-collapse>
</section>
</div>
<polymer-collapse id="collapse3" targetId="box3"></polymer-collapse>
</section>
<div class="content">Obstabatque cingebant nitidis rapidisque cepit moderantum discordia habentia frigore solidumque fert inter caecoque sine coeperunt corpore quarum fluminaque coercuit vultus animal austro quem os sectamque animus origo solidumque quoque melioris adspirate recepta utramque rapidisque caelumque orba unus pluviaque erant mutastis gravitate illic quisque alta calidis speciem mixtam ante contraria duae</div>
</div>
<polymer-collapse id="collapse2" closed targetId="box2"></polymer-collapse>
</section>
</body>
</html>

View file

@ -0,0 +1,127 @@
{
"project": {
"name": "Docs",
"description": "Docs"
},
"files": {
"..\\..\\polymer-collapse\\polymer-collapse.html": {
"name": "..\\..\\polymer-collapse\\polymer-collapse.html",
"modules": {
"Polymer Elements": 1
},
"classes": {
"polymer-collapse": 1
},
"fors": {},
"namespaces": {}
}
},
"modules": {
"Polymer Elements": {
"name": "Polymer Elements",
"submodules": {},
"classes": {
"polymer-collapse": 1
},
"fors": {},
"namespaces": {},
"tag": "module",
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 10
}
},
"classes": {
"polymer-collapse": {
"name": "polymer-collapse",
"shortname": "polymer-collapse",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "Polymer Elements",
"namespace": "",
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 10,
"description": "polymer-collapse is used to add collapsible behavior to the\ntarget element. It adjusts the height or width of the target element\nto make the element collapse and expand.\n\nExample:\n\n <button on-click=\"{{toggle}}\">toggle collapse</button>\n <div id=\"demo\">\n ...\n </div>\n <polymer-collapse id=\"collapse\" targetId=\"demo\"></polymer-collapse>\n\n ...\n\n toggle: function() {\n this.$.collapse.toggle();\n }"
}
},
"classitems": [
{
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 48,
"description": "The id of the target element.",
"itemtype": "attribute",
"name": "targetId",
"type": "string",
"default": "''",
"class": "polymer-collapse",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 56,
"description": "The target element.",
"itemtype": "attribute",
"name": "target",
"type": "object",
"default": "null",
"class": "polymer-collapse",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 64,
"description": "If true, the orientation is horizontal; otherwise is vertical.",
"itemtype": "attribute",
"name": "horizontal",
"type": "boolean",
"default": "false",
"class": "polymer-collapse",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 72,
"description": "If true, the target element is hidden/collapsed.",
"itemtype": "attribute",
"name": "closed",
"type": "boolean",
"default": "false",
"class": "polymer-collapse",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 80,
"description": "Collapsing/expanding animation duration in second.",
"itemtype": "attribute",
"name": "duration",
"type": "number",
"default": "0.33",
"class": "polymer-collapse",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 88,
"description": "If true, the size of the target element is fixed and is set\non the element. Otherwise it will try to \nuse auto to determine the natural size to use\nfor collapsing/expanding.",
"itemtype": "attribute",
"name": "fixedSize",
"type": "boolean",
"default": "false",
"class": "polymer-collapse",
"module": "Polymer Elements"
},
{
"file": "..\\..\\polymer-collapse\\polymer-collapse.html",
"line": 150,
"description": "Toggle the closed state of the collapsible.",
"itemtype": "method",
"name": "toggle",
"class": "polymer-collapse",
"module": "Polymer Elements"
}
],
"warnings": []
}

View file

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>polymer api</title>
<style>
html, body {
font-family: Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
}
[noviewer] [ifnoviewer] {
display: block;
}
[detector], [ifnoviewer], [noviewer] [ifviewer] {
display: none;
}
[ifviewer], [ifnoviewer] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
border: none;
margin: 0;
width: 100%;
height: 100%;
}
#remote {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
</head>
<body>
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
<polymer-home-page ifviewer></polymer-home-page>
<div ifnoviewer>
<span id="remote">[remote]</span>
<iframe></iframe>
</div>
<!-- -->
<script>
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
// if no local info viewer, load it remotely
function noviewer() {
document.body.setAttribute('noviewer', '');
var path = location.pathname.split('/');
var module = path.pop() || path.pop();
document.querySelector('iframe').src = remoteDocs + module;
document.querySelector('title').textContent = module;
}
// for testing only
var opts = window.location.search;
if (opts.indexOf('noviewer') >= 0) {
noviewer();
}
</script>
</body>
</html>

View file

@ -0,0 +1,8 @@
/*
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
.polymer-collapse-closed {
display: none;
}

View file

@ -0,0 +1,240 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer Elements
*/
/**
* polymer-collapse is used to add collapsible behavior to the
* target element. It adjusts the height or width of the target element
* to make the element collapse and expand.
*
* Example:
*
* <button on-click="{{toggle}}">toggle collapse</button>
* <div id="demo">
* ...
* </div>
* <polymer-collapse id="collapse" targetId="demo"></polymer-collapse>
*
* ...
*
* toggle: function() {
* this.$.collapse.toggle();
* }
*
* @class polymer-collapse
*/
-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="polymer-collapse" attributes="targetId target horizontal closed duration fixedSize size">
<template>
<link rel="stylesheet" polymer-scope="controller" href="polymer-collapse.css">
<link rel="stylesheet" href="polymer-collapse.css">
<style>
:host {
display: none;
}
</style>
</template>
<script>
Polymer('polymer-collapse', {
/**
* The id of the target element.
*
* @attribute targetId
* @type string
* @default ''
*/
targetId: '',
/**
* The target element.
*
* @attribute target
* @type object
* @default null
*/
target: null,
/**
* If true, the orientation is horizontal; otherwise is vertical.
*
* @attribute horizontal
* @type boolean
* @default false
*/
horizontal: false,
/**
* If true, the target element is hidden/collapsed.
*
* @attribute closed
* @type boolean
* @default false
*/
closed: false,
/**
* Collapsing/expanding animation duration in second.
*
* @attribute duration
* @type number
* @default 0.33
*/
duration: 0.33,
/**
* If true, the size of the target element is fixed and is set
* on the element. Otherwise it will try to
* use auto to determine the natural size to use
* for collapsing/expanding.
*
* @attribute fixedSize
* @type boolean
* @default false
*/
fixedSize: false,
size: null,
attached: function() {
this.installControllerStyles();
this.inDocument = true;
this.async(function() {
this.afterInitialUpdate = true;
});
},
detached: function() {
if (this.target) {
this.removeListeners(this.target);
}
},
targetIdChanged: function() {
var p = this.parentNode;
while (p.parentNode) {
p = p.parentNode;
}
this.target = p.querySelector('#' + this.targetId);
},
targetChanged: function(old) {
if (old) {
this.removeListeners(old);
}
this.horizontalChanged();
this.isTargetReady = !!this.target;
if (this.target) {
this.target.style.overflow = 'hidden';
this.addListeners(this.target);
// set polymer-collapse-closed class initially to hide the target
this.toggleClosedClass(true);
}
// don't need to update if the size is already set and it's opened
if (!this.fixedSize || !this.closed) {
this.update();
}
},
addListeners: function(node) {
this.transitionEndListener = this.transitionEndListener ||
this.transitionEnd.bind(this);
node.addEventListener('webkitTransitionEnd', this.transitionEndListener);
node.addEventListener('transitionend', this.transitionEndListener);
},
removeListeners: function(node) {
node.removeEventListener('webkitTransitionEnd', this.transitionEndListener);
node.removeEventListener('transitionend', this.transitionEndListener);
},
horizontalChanged: function() {
this.dimension = this.horizontal ? 'width' : 'height';
},
closedChanged: function() {
this.update();
},
/**
* Toggle the closed state of the collapsible.
*
* @method toggle
*/
toggle: function() {
this.closed = !this.closed;
},
setTransitionDuration: function(duration) {
var s = this.target.style;
s.webkitTransition = s.transition = duration ?
(this.dimension + ' ' + duration + 's') : null;
if (duration === 0) {
this.async('transitionEnd');
}
},
transitionEnd: function() {
if (!this.closed && !this.fixedSize) {
this.updateSize('auto', null);
}
this.setTransitionDuration(null);
this.toggleClosedClass(this.closed);
},
toggleClosedClass: function(add) {
this.hasClosedClass = add;
this.target.classList.toggle('polymer-collapse-closed', add);
},
updateSize: function(size, duration, forceEnd) {
if (duration) {
this.calcSize();
}
this.setTransitionDuration(duration);
var s = this.target.style;
var nochange = s[this.dimension] === size;
s[this.dimension] = size;
// transitonEnd will not be called if the size has not changed
if (forceEnd && nochange) {
this.transitionEnd();
}
},
update: function() {
if (!this.target || !this.inDocument) {
return;
}
if (!this.isTargetReady) {
this.targetChanged();
}
this.horizontalChanged();
this[this.closed ? 'hide' : 'show']();
},
calcSize: function() {
return this.target.getBoundingClientRect()[this.dimension] + 'px';
},
getComputedSize: function() {
return getComputedStyle(this.target)[this.dimension];
},
show: function() {
this.toggleClosedClass(false);
// for initial update, skip the expanding animation to optimize
// performance e.g. skip calcSize
if (!this.afterInitialUpdate) {
this.transitionEnd();
return;
}
if (!this.fixedSize) {
this.updateSize('auto', null);
var s = this.calcSize();
this.updateSize(0, null);
}
this.async(function() {
this.updateSize(this.size || s, this.duration, true);
});
},
hide: function() {
// don't need to do anything if it's already hidden
if (this.hasClosedClass && !this.fixedSize) {
return;
}
if (this.fixedSize) {
// save the size before hiding it
this.size = this.getComputedSize();
} else {
this.updateSize(this.calcSize(), null);
}
this.async(function() {
this.updateSize(0, this.duration);
});
}
});
</script>
</polymer-element>

View file

@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<title>polymer-collapse</title>
<script src="../../../platform/platform.js"></script>
<script src="../../../tools/test/htmltest.js"></script>
<script src="../../../tools/test/chai/chai.js"></script>
<link rel="import" href="../../polymer-collapse.html">
</head>
<body>
<button onclick="document.querySelector('#collapse').toggle()">toggle collapse</button>
<div id="box">
Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem
</div>
<polymer-collapse id="collapse" targetId="box" duration="0.1"></polymer-collapse>
<script>
var assert = chai.assert;
var delay = 200;
document.addEventListener('polymer-ready', function() {
var c = document.querySelector('#collapse');
assert.equal(c.closed, false);
Platform.flush();
setTimeout(function() {
var origH = getBoxComputedHeight();
assert.notEqual(origH, 0);
c.closed = true;
Platform.flush();
setTimeout(function() {
// after closed, height is 0
assert.equal(getBoxComputedHeight(), 0);
// should be set to display: none
assert.equal(getBoxComputedStyle().display, 'none');
c.closed = false;
Platform.flush();
setTimeout(function() {
// verify computed height
assert.equal(getBoxComputedHeight(), origH);
// after opened, height is set to 'auto'
assert.equal(document.querySelector('#box').style.height, 'auto');
done();
}, delay);
}, delay);
}, delay);
});
function getBoxComputedStyle() {
var b = document.querySelector('#box');
return getComputedStyle(b);
}
function getBoxComputedHeight() {
return parseInt(getBoxComputedStyle().height);
}
</script>
</body>
</html>

View file

@ -0,0 +1,9 @@
/*
* Copyright 2013 The Polymer Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
htmlSuite('polymer-collapse', function() {
htmlTest('html/polymer-collapse.html');
});

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>polymer-collapse Test Runner (Mocha)</title>
<meta charset="UTF-8">
<!-- -->
<link rel="stylesheet" href="../../tools/test/mocha/mocha.css" />
<script src="../../tools/test/mocha/mocha.js"></script>
<script src="../../tools/test/chai/chai.js"></script>
<script src="../../tools/test/mocha-htmltest.js"></script>
<!-- -->
<script src="../../platform/platform.js"></script>
</head>
<body>
<div id="mocha"></div>
<script>
mocha.setup({ui: 'tdd', slow: 1000, htmlbase: ''});
</script>
<!-- -->
<script src="js/polymer-collapse.js"></script>
<!-- -->
<script>
mocha.run();
</script>
</body>
</html>

View file

@ -0,0 +1,17 @@
{
"name": "polymer-cookie",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
},
"homepage": "https://github.com/Polymer/polymer-cookie",
"_release": "cf78e8e822",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "cf78e8e8221bfd232dffdadc7a4251f632692c8a"
},
"_source": "git://github.com/Polymer/polymer-cookie.git",
"_target": "master",
"_originalSource": "Polymer/polymer-cookie"
}

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1 @@
See https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,7 @@
{
"name": "polymer-cookie",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
}
}

View file

@ -0,0 +1,11 @@
{
"project": {
"name": "Docs",
"description": "Docs"
},
"files": {},
"modules": {},
"classes": {},
"classitems": [],
"warnings": []
}

View file

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>polymer api</title>
<style>
html, body {
font-family: Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
}
[noviewer] [ifnoviewer] {
display: block;
}
[detector], [ifnoviewer], [noviewer] [ifviewer] {
display: none;
}
[ifviewer], [ifnoviewer] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
border: none;
margin: 0;
width: 100%;
height: 100%;
}
#remote {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
</head>
<body>
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
<polymer-home-page ifviewer></polymer-home-page>
<div ifnoviewer>
<span id="remote">[remote]</span>
<iframe></iframe>
</div>
<!-- -->
<script>
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
// if no local info viewer, load it remotely
function noviewer() {
document.body.setAttribute('noviewer', '');
var path = location.pathname.split('/');
var module = path.pop() || path.pop();
document.querySelector('iframe').src = remoteDocs + module;
document.querySelector('title').textContent = module;
}
// for testing only
var opts = window.location.search;
if (opts.indexOf('noviewer') >= 0) {
noviewer();
}
</script>
</body>
</html>

View file

@ -0,0 +1,82 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="polymer-cookie" attributes="name value expires secure domain path max-age">
<template>
<style>
:host { display: none; }
</style>
</template>
<script>
(function() {
var EXPIRE_NOW = 'Thu, 01 Jan 1970 00:00:00 GMT';
var FOREVER = 'Fri, 31 Dec 9999 23:59:59 GMT';
var cookieProps = ['expires', 'secure', 'max-age', 'domain', 'path'];
Polymer('polymer-cookie', {
expires: FOREVER,
ready: function() {
this.load();
},
parseCookie: function() {
var pairs = document.cookie.split(/\s*;\s*/);
var map = pairs.map(function(kv) {
var eq = kv.indexOf('=');
return {
name: unescape(kv.slice(0, eq)),
value: unescape(kv.slice(eq + 1))
};
});
var nom = this.name;
return map.filter(function(kv){ return kv.name === nom; })[0];
},
load: function() {
var kv = this.parseCookie();
this.value = kv && kv.value;
},
valueChanged: function() {
this.expire = FOREVER;
this.save();
},
// TODO(dfreedman): collapse these when 'multiple props -> single change function' exists in Polymer
expiresChanged: function() {
this.save();
},
secureChanged: function() {
this.save();
},
domainChanged: function() {
this.save();
},
pathChanged: function() {
this.save();
},
maxAgeChanged: function() {
this.save();
},
isCookieStored: function() {
return Boolean(this.parseCookie());
},
deleteCookie: function() {
this.expires = EXPIRE_NOW;
},
prepareProperties: function() {
var prepared = '';
for (var i = 0, k; i < cookieProps.length; i++) {
k = cookieProps[i];
if (this[k]) {
prepared += (';' + k + '=' + this[k]);
}
}
return prepared;
},
save: function() {
document.cookie = escape(this.name) + '=' + escape(this.value) + this.prepareProperties();
}
});
})();
</script>
</polymer-element>

View file

@ -0,0 +1,44 @@
{
"name": "polymer-elements",
"authors": [
"The Polymer Authors"
],
"dependencies": {
"polymer-ajax": "Polymer/polymer-ajax#master",
"polymer-anchor-point": "Polymer/polymer-anchor-point#master",
"polymer-animation": "Polymer/polymer-animation#master",
"polymer-collapse": "Polymer/polymer-collapse#master",
"polymer-cookie": "Polymer/polymer-cookie#master",
"polymer-file": "Polymer/polymer-file#master",
"polymer-flex-layout": "Polymer/polymer-flex-layout#master",
"polymer-google-jsapi": "Polymer/polymer-google-jsapi#master",
"polymer-grid-layout": "Polymer/polymer-grid-layout#master",
"polymer-jsonp": "Polymer/polymer-jsonp#master",
"polymer-key-helper": "Polymer/polymer-key-helper#master",
"polymer-layout": "Polymer/polymer-layout#master",
"polymer-localstorage": "Polymer/polymer-localstorage#master",
"polymer-media-query": "Polymer/polymer-media-query#master",
"polymer-meta": "Polymer/polymer-meta#master",
"polymer-mock-data": "Polymer/polymer-mock-data#master",
"polymer-overlay": "Polymer/polymer-overlay#master",
"polymer-page": "Polymer/polymer-page#master",
"polymer-scrub": "Polymer/polymer-scrub#master",
"polymer-selection": "Polymer/polymer-selection#master",
"polymer-selector": "Polymer/polymer-selector#master",
"polymer-shared-lib": "Polymer/polymer-shared-lib#master",
"polymer-signals": "Polymer/polymer-signals#master",
"polymer-view-source-link": "Polymer/polymer-view-source-link#master"
},
"license": "BSD",
"private": true,
"homepage": "https://github.com/Polymer/polymer-elements",
"_release": "7dd1490e83",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "7dd1490e8339cc325588167d3932113856cc7c69"
},
"_source": "git://github.com/Polymer/polymer-elements.git",
"_target": "master",
"_originalSource": "Polymer/polymer-elements"
}

View file

@ -0,0 +1,4 @@
/node_modules
/docs
/build.bat

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1 @@
See https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,34 @@
{
"name": "polymer-elements",
"authors": [
"The Polymer Authors"
],
"dependencies": {
"polymer-ajax": "Polymer/polymer-ajax#master",
"polymer-anchor-point": "Polymer/polymer-anchor-point#master",
"polymer-animation": "Polymer/polymer-animation#master",
"polymer-collapse": "Polymer/polymer-collapse#master",
"polymer-cookie": "Polymer/polymer-cookie#master",
"polymer-file": "Polymer/polymer-file#master",
"polymer-flex-layout": "Polymer/polymer-flex-layout#master",
"polymer-google-jsapi": "Polymer/polymer-google-jsapi#master",
"polymer-grid-layout": "Polymer/polymer-grid-layout#master",
"polymer-jsonp": "Polymer/polymer-jsonp#master",
"polymer-key-helper": "Polymer/polymer-key-helper#master",
"polymer-layout": "Polymer/polymer-layout#master",
"polymer-localstorage": "Polymer/polymer-localstorage#master",
"polymer-media-query": "Polymer/polymer-media-query#master",
"polymer-meta": "Polymer/polymer-meta#master",
"polymer-mock-data": "Polymer/polymer-mock-data#master",
"polymer-overlay": "Polymer/polymer-overlay#master",
"polymer-page": "Polymer/polymer-page#master",
"polymer-scrub": "Polymer/polymer-scrub#master",
"polymer-selection": "Polymer/polymer-selection#master",
"polymer-selector": "Polymer/polymer-selector#master",
"polymer-shared-lib": "Polymer/polymer-shared-lib#master",
"polymer-signals": "Polymer/polymer-signals#master",
"polymer-view-source-link": "Polymer/polymer-view-source-link#master"
},
"license": "BSD",
"private": true
}

View file

@ -0,0 +1,11 @@
{
"project": {
"name": "Docs",
"description": "Docs"
},
"files": {},
"modules": {},
"classes": {},
"classitems": [],
"warnings": []
}

View file

@ -0,0 +1,24 @@
<link rel="import" href="../polymer-ajax/polymer-ajax.html">
<link rel="import" href="../polymer-anchor-point/polymer-anchor-point.html">
<link rel="import" href="../polymer-animation/polymer-animation.html">
<link rel="import" href="../polymer-collapse/polymer-collapse.html">
<link rel="import" href="../polymer-cookie/polymer-cookie.html">
<link rel="import" href="../polymer-file/polymer-file.html">
<link rel="import" href="../polymer-flex-layout/polymer-flex-layout.html">
<link rel="import" href="../polymer-google-jsapi/polymer-google-jsapi.html">
<link rel="import" href="../polymer-grid-layout/polymer-grid-layout.html">
<link rel="import" href="../polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="../polymer-key-helper/polymer-key-helper.html">
<link rel="import" href="../polymer-layout/polymer-layout.html">
<link rel="import" href="../polymer-localstorage/polymer-localstorage.html">
<link rel="import" href="../polymer-media-query/polymer-media-query.html">
<link rel="import" href="../polymer-meta/polymer-meta.html">
<link rel="import" href="../polymer-mock-data/polymer-mock-data.html">
<link rel="import" href="../polymer-overlay/polymer-overlay.html">
<link rel="import" href="../polymer-page/polymer-page.html">
<link rel="import" href="../polymer-scrub/polymer-scrub.html">
<link rel="import" href="../polymer-selection/polymer-selection.html">
<link rel="import" href="../polymer-selector/polymer-selector.html">
<link rel="import" href="../polymer-shared-lib/polymer-shared-lib.html">
<link rel="import" href="../polymer-signals/polymer-signals.html">
<link rel="import" href="../polymer-view-source-link/polymer-view-source-link.html">

View file

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>polymer api</title>
<style>
html, body {
font-family: Arial, sans-serif;
white-space: nowrap;
overflow: hidden;
}
[noviewer] [ifnoviewer] {
display: block;
}
[detector], [ifnoviewer], [noviewer] [ifviewer] {
display: none;
}
[ifviewer], [ifnoviewer] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
border: none;
margin: 0;
width: 100%;
height: 100%;
}
#remote {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
</head>
<body>
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
<polymer-home-page ifviewer></polymer-home-page>
<div ifnoviewer>
<span id="remote">[remote]</span>
<iframe></iframe>
</div>
<!-- -->
<script>
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
// if no local info viewer, load it remotely
function noviewer() {
document.body.setAttribute('noviewer', '');
var path = location.pathname.split('/');
var module = path.pop() || path.pop();
document.querySelector('iframe').src = remoteDocs + module;
document.querySelector('title').textContent = module;
}
// for testing only
var opts = window.location.search;
if (opts.indexOf('noviewer') >= 0) {
noviewer();
}
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<link rel="import" href="../polymer-grid-layout/metadata.html">
<!--
<x-meta id="polymer-ajax" label="Polymer Ajax"></x-meta>
<x-meta id="polymer-animation" label="Polymer Animation"></x-meta>
<x-meta id="polymer-collapse" label="Polymer Collapse"></x-meta>
<x-meta id="polymer-file" label="Polymer File"></x-meta>
<x-meta id="polymer-flex-layout" label="Polymer Flex Layout"></x-meta>
<x-meta id="polymer-google-jsapi" label="Polymer Google JsApi"></x-meta>
<x-meta id="polymer-grid-layout" label="Polymer Grid Layout">
<property name="layout" kind="json"></property>
</x-meta>
<x-meta id="polymer-jsonp" label="Polymer JSONP"></x-meta>
<x-meta id="polymer-key-helper" label="Polymer Key Helper"></x-meta>
<x-meta id="polymer-layout" label="Polymer Layout"></x-meta>
<x-meta id="polymer-localstorage" label="Polymer Local Storage"></x-meta>
<x-meta id="polymer-media-query" label="Polymer Media Query"></x-meta>
<x-meta id="polymer-meta" label="Polymer Meta"></x-meta>
<x-meta id="polymer-mock-data" label="Polymer Mock Data"></x-meta>
<x-meta id="polymer-overlay" label="Polymer Overlay"></x-meta>
<x-meta id="polymer-page" label="Polymer Page"></x-meta>
<x-meta id="polymer-selector" label="Polymer Selector"></x-meta>
<x-meta id="polymer-shared-lib" label="Polymer Shared Lib"></x-meta>
<x-meta id="polymer-view-source-link" label="Polymer View-Source Link"></x-meta>
-->

View file

@ -0,0 +1,37 @@
<!--
/**
*
* Single import for loading the standard set of `polymer-*` elements.
*
* Example:
*
* <!-- load numerous polymer elements -->
* <link rel="import" href="components/polymer-elements/polymer-elements.html">
*
* @class polymer-elements
*/
-->
<link rel="import" href="../polymer-ajax/polymer-ajax.html">
<link rel="import" href="../polymer-anchor-point/polymer-anchor-point.html">
<link rel="import" href="../polymer-animation/polymer-animation.html">
<link rel="import" href="../polymer-collapse/polymer-collapse.html">
<link rel="import" href="../polymer-cookie/polymer-cookie.html">
<link rel="import" href="../polymer-file/polymer-file.html">
<link rel="import" href="../polymer-flex-layout/polymer-flex-layout.html">
<link rel="import" href="../polymer-google-jsapi/polymer-google-jsapi.html">
<link rel="import" href="../polymer-grid-layout/polymer-grid-layout.html">
<link rel="import" href="../polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="../polymer-key-helper/polymer-key-helper.html">
<link rel="import" href="../polymer-layout/polymer-layout.html">
<link rel="import" href="../polymer-localstorage/polymer-localstorage.html">
<link rel="import" href="../polymer-media-query/polymer-media-query.html">
<link rel="import" href="../polymer-meta/polymer-meta.html">
<link rel="import" href="../polymer-mock-data/polymer-mock-data.html">
<link rel="import" href="../polymer-overlay/polymer-overlay.html">
<link rel="import" href="../polymer-page/polymer-page.html">
<link rel="import" href="../polymer-scrub/polymer-scrub.html">
<link rel="import" href="../polymer-selection/polymer-selection.html">
<link rel="import" href="../polymer-selector/polymer-selector.html">
<link rel="import" href="../polymer-shared-lib/polymer-shared-lib.html">
<link rel="import" href="../polymer-signals/polymer-signals.html">
<link rel="import" href="../polymer-view-source-link/polymer-view-source-link.html">

View file

@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-flex-layout</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-flex-layout.html">
<link rel="import" href="polymer-flex-panel.html">
<style>
body {
font-size: 20px;
}
flex-css, flex-container, flex-nonvisual {
height: 300px;
}
</style>
</head>
<body>
<polymer-element name="flex-css">
<template>
<link rel="stylesheet" href="polymer-flex-layout.css">
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<div class="flexbox" flex>
<div>Hi I'm some content</div>
<div class="flexbox column" flex>
<div class="flexbox align-center">
<h3>Title</h3>
<button>hello</button>
</div>
<div class="flexbox" flex>
<div flex>Main content</div>
<div>Sidebar content</div>
</div>
<div>Some more stuffs...</div>
<div class="flexbox justify-end">
<b>Footer</b>
</div>
</div>
<div>A last bit, like a panel</div>
</div>
</template>
<script>
Polymer('flex-css', {
ready: function() {
this.classList.add('flexbox');
}
});
</script>
</polymer-element>
<polymer-element name="flex-container" noscript extends="polymer-flex-panel">
<template>
<style>
div, polymer-flex-panel {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<div>Hi I'm some content</div>
<polymer-flex-panel vertical flex>
<polymer-flex-panel align="center">
<h3>Title</h3>
<button>hello</button>
</polymer-flex-panel>
<polymer-flex-panel flex>
<div flex>Main content</div>
<div>Sidebar content</div>
</polymer-flex-panel>
<div>Some more stuffs...</div>
<polymer-flex-panel justify="end">
<b>Footer</b>
</polymer-flex-panel>
</polymer-flex-panel>
<div>A last bit, like a panel</div>
</template>
</polymer-element>
<polymer-element name="flex-nonvisual" noscript>
<template>
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<polymer-flex-layout></polymer-flex-layout>
<div flex>
<polymer-flex-layout></polymer-flex-layout>
<div>Hi I'm some content</div>
<div flex>
<polymer-flex-layout vertical></polymer-flex-layout>
<div>
<polymer-flex-layout align="center"></polymer-flex-layout>
<h3>Title</h3>
<button>hello</button>
</div>
<div flex>
<polymer-flex-layout></polymer-flex-layout>
<div flex>Main content</div>
<div>Sidebar content</div>
</div>
<div>Some more stuffs...</div>
<div>
<polymer-flex-layout justify="end"></polymer-flex-layout>
<b>Footer</b>
</div>
</div>
<div>A last bit, like a panel</div>
</div>
</template>
</polymer-element>
<h3>polymer-flex-layout.css</h3>
<flex-css></flex-css>
<br>
<h3>polymer-flex-panel element</h3>
<flex-container></flex-container>
<br>
<h3>polymer-flex-layout element</h3>
<flex-nonvisual></flex-nonvisual>
</body>
</html>

View file

@ -0,0 +1,17 @@
{
"name": "polymer-file",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
},
"homepage": "https://github.com/Polymer/polymer-file",
"_release": "d9bdf637a4",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "d9bdf637a4c8a7d663912c0b66b7dcfb3ac65335"
},
"_source": "git://github.com/Polymer/polymer-file.git",
"_target": "master",
"_originalSource": "Polymer/polymer-file"
}

View file

@ -0,0 +1,9 @@
# Names should be added to this file with this pattern:
#
# For individuals:
# Name <email address>
#
# For organizations:
# Organization <fnmatch pattern>
#
Google Inc. <*@google.com>

View file

@ -0,0 +1 @@
See https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md

View file

@ -0,0 +1,27 @@
// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View file

@ -0,0 +1,23 @@
Additional IP Rights Grant (Patents)
"This implementation" means the copyrightable works distributed by
Google as part of the Polymer project.
Google hereby grants to You a perpetual, worldwide, non-exclusive,
no-charge, royalty-free, irrevocable (except as stated in this section)
patent license to make, have made, use, offer to sell, sell, import,
transfer and otherwise run, modify and propagate the contents of this
implementation of Polymer, where such license applies only to those
patent claims, both currently owned or controlled by Google and acquired
in the future, licensable by Google that are necessarily infringed by
this implementation of Polymer. This grant does not include claims
that would be infringed only as a consequence of further modification of
this implementation. If you or your agent or exclusive licensee
institute or order or agree to the institution of patent litigation
against any entity (including a cross-claim or counterclaim in a
lawsuit) alleging that this implementation of Polymer or any code
incorporated within this implementation of Polymer constitutes
direct or contributory patent infringement, or inducement of patent
infringement, then any patent rights granted to you under this License
for this implementation of Polymer shall terminate as of the date
such litigation is filed.

View file

@ -0,0 +1,7 @@
{
"name": "polymer-file",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master"
}
}

Some files were not shown because too many files have changed in this diff Show more