switch polymer to bower

This commit is contained in:
Luke Pulverenti 2015-06-19 12:36:51 -04:00
parent b9598ffaa1
commit 8f6cbe8de2
348 changed files with 40895 additions and 310 deletions

View File

@ -0,0 +1,42 @@
{
"name": "iron-a11y-announcer",
"version": "1.0.1",
"description": "A singleton element that simplifies announcing text to screen readers.",
"keywords": [
"web-components",
"polymer",
"a11y",
"live"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-announcer.git"
},
"main": "iron-a11y-announcer.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"paper-button": "polymerelements/paper-button#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*"
},
"homepage": "https://github.com/polymerelements/iron-a11y-announcer",
"_release": "1.0.1",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "699697fe8935400ab11e3e33cd6a5a54d762300e"
},
"_source": "git://github.com/polymerelements/iron-a11y-announcer.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-a11y-announcer"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,32 @@
{
"name": "iron-a11y-announcer",
"version": "1.0.1",
"description": "A singleton element that simplifies announcing text to screen readers.",
"keywords": [
"web-components",
"polymer",
"a11y",
"live"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-announcer.git"
},
"main": "iron-a11y-announcer.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"paper-button": "polymerelements/paper-button#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*"
}
}

View File

@ -0,0 +1,40 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>iron-a11y-announcer demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="x-announces.html">
</head>
<body>
<div class="horizontal center-justified layout">
<div>
<div class="vertical-section">
<span>Note: in order to hear the announcements, be sure to turn on your favorite screen reader!</span>
<x-announces>Hello, my name is Ava.</x-announces>
<x-announces>This true sentence is false.</x-announces>
<x-announces>Are you paying attention?</x-announces>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,50 @@
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../iron-a11y-announcer.html">
<dom-module id="x-announces">
<style>
:host {
display: block;
position: relative;
padding: 1em 0;
}
paper-button {
background: #4285f4;
color: #fff;
}
</style>
<template>
<paper-button on-tap="_onTapAnnounce" raised>Announce</paper-button>
<span id="content" aria-hidden="true">
<content></content>
</span>
</template>
<script>
Polymer({
is: 'x-announces',
attached: function() {
Polymer.IronA11yAnnouncer.requestAvailability();
},
_onTapAnnounce: function() {
this.fire('iron-announce', {
text: this.$.content.textContent.trim()
}, {
bubbles: true
});
}
});
</script>
</dom-module>

View File

@ -0,0 +1,28 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-a11y-announcer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<title>iron-a11y-announcer tests</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-a11y-announcer.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,59 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-a11y-announcer</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-a11y-announcer.html">
</head>
<body>
<test-fixture id="Announcer">
<template>
<iron-a11y-announcer></iron-a11y-announcer>
</template>
</test-fixture>
<script>
suite('<iron-a11y-announcer>', function() {
var announcer;
setup(function() {
announcer = fixture('Announcer');
});
test('announces when there is an iron-announce event', function() {
var event = new CustomEvent('iron-announce', {
bubbles: true,
detail: {
text: 'foo'
}
});
sinon.spy(announcer, 'announce');
document.body.dispatchEvent(event);
expect(announcer.announce.callCount).to.be.equal(1);
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,42 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.0.3",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
"web-component",
"polymer",
"a11y",
"input"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "85609bfee93654cfe7be0bcf4cde169411ba535f"
},
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,32 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.0.3",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
"web-component",
"polymer",
"a11y",
"input"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,24 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<title>Iron A11y Keys Behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="x-key-aware.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<x-key-aware></x-key-aware>
</div>
</body>
</html>

View File

@ -0,0 +1,91 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../iron-a11y-keys-behavior.html">
<dom-module id="x-key-aware">
<style>
:host {
display: block;
position: relative;
}
pre {
color: var(--google-blue-700);
}
.keys {
line-height: 25px;
}
.keys span {
cursor: default;
background-color: var(--google-grey-100);
border: 1px solid var(--google-grey-300);
padding: 1px 5px;
border-radius: 5px;
}
</style>
<template>
<h4>Press any of these keys</h4>
<p class="keys">
<template is="dom-repeat" items="[[boundKeys]]">
<span>{{item}}</span>
</template>
</p>
<pre>[[pressed]]</pre>
</template>
</dom-module>
<script>
Polymer({
is: 'x-key-aware',
behaviors: [
Polymer.IronA11yKeysBehavior
],
properties: {
pressed: {
type: String,
readOnly: true,
value: ''
},
boundKeys: {
type: Array,
value: function() {
return Object.keys(this.keyBindings).join(' ').split(' ');
}
},
keyEventTarget: {
type: Object,
value: function() {
return document.body;
}
}
},
keyBindings: {
'* pageup pagedown left right down up shift+a alt+a home end space enter': '_updatePressed'
},
_updatePressed: function(event) {
console.log(event.detail);
this._setPressed(
this.pressed + event.detail.combo + ' pressed!\n'
);
}
});
</script>

View File

@ -0,0 +1,24 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<title>iron-a11y-keys-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View File

@ -0,0 +1,248 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-a11y-keys</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-a11y-keys-behavior.html">
</head>
<body>
<test-fixture id="BasicKeys">
<template>
<x-a11y-basic-keys></x-a11y-basic-keys>
</template>
</test-fixture>
<test-fixture id="ComboKeys">
<template>
<x-a11y-combo-keys></x-a11y-combo-keys>
</template>
</test-fixture>
<test-fixture id="AlternativeEventKeys">
<template>
<x-a11y-alternate-event-keys></x-a11y-alternate-event-keys>
</template>
</test-fixture>
<test-fixture id="BehaviorKeys">
<template>
<x-a11y-behavior-keys></x-a11y-behavior-keys>
</template>
</test-fixture>
<script>
suite('Polymer.IronA11yKeysBehavior', function() {
var keys;
suiteSetup(function() {
var KeysTestBehavior = [Polymer.IronA11yKeysBehavior, {
properties: {
keyCount: {
type: Number,
value: 0
}
},
_keyHandler: function(event) {
this.keyCount++;
this.lastEvent = event;
}
}];
Polymer({
is: 'x-a11y-basic-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'space': '_keyHandler'
}
});
Polymer({
is: 'x-a11y-combo-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'ctrl+shift+a': '_keyHandler'
}
});
Polymer({
is: 'x-a11y-alternate-event-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'space:keyup': '_keyHandler'
}
});
var XA11yBehavior = {
keyBindings: {
'enter': '_keyHandler'
}
};
Polymer({
is: 'x-a11y-behavior-keys',
behaviors: [
KeysTestBehavior,
XA11yBehavior
],
keyBindings: {
'space': '_keyHandler'
}
});
});
suite('basic keys', function() {
setup(function() {
keys = fixture('BasicKeys');
});
test('trigger the handler when the specified key is pressed', function() {
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(1);
});
test('do not trigger the handler for non-specified keys', function() {
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(0);
});
test('can have bindings added imperatively', function() {
keys.addOwnKeyBinding('enter', '_keyHandler');
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(1);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(2);
});
test('can remove imperatively added bindings', function() {
keys.addOwnKeyBinding('enter', '_keyHandler');
keys.removeOwnKeyBindings();
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(0);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(1);
});
suite('edge cases', function() {
test('knows that `spacebar` is the same as `space`', function() {
var event = new CustomEvent('keydown');
event.key = 'spacebar';
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
});
});
suite('matching keyboard events to keys', function() {
test('can be done imperatively', function() {
var event = new CustomEvent('keydown');
event.keyCode = 65;
expect(keys.keyboardEventMatchesKeys(event, 'a')).to.be.equal(true);
});
test('can be done with a provided keyboardEvent', function() {
var event;
MockInteractions.pressSpace(keys);
event = keys.lastEvent;
expect(event.detail.keyboardEvent).to.be.okay;
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
});
test('can handle variations in arrow key names', function() {
var event = new CustomEvent('keydown');
event.key = 'up';
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
event.key = 'ArrowUp';
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
});
});
});
suite('combo keys', function() {
setup(function() {
keys = fixture('ComboKeys');
});
test('trigger the handler when the combo is pressed', function() {
var event = new CustomEvent('keydown');
event.ctrlKey = true;
event.shiftKey = true;
event.keyCode = event.code = 65;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
});
});
suite('alternative event keys', function() {
setup(function() {
keys = fixture('AlternativeEventKeys');
});
test('trigger on the specified alternative keyboard event', function() {
MockInteractions.keyDownOn(keys, 32);
expect(keys.keyCount).to.be.equal(0);
MockInteractions.keyUpOn(keys, 32);
expect(keys.keyCount).to.be.equal(1);
});
});
suite('behavior keys', function() {
setup(function() {
keys = fixture('BehaviorKeys');
});
test('bindings in other behaviors are transitive', function() {
MockInteractions.pressEnter(keys);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(2);
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Tests</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
// Load and run all tests (.html, .js) as one suite:
WCT.loadSuites([
'basic-test.html',
]);
</script>
</body>
</html>

View File

@ -0,0 +1,40 @@
{
"name": "iron-behaviors",
"version": "1.0.4",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-behaviors.git"
},
"main": [
"iron-button-state.html",
"iron-control-state.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "8792edd457de697a74f398c09b67df30adf7d866"
},
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-behaviors"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,30 @@
{
"name": "iron-behaviors",
"version": "1.0.4",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-behaviors.git"
},
"main": [
"iron-button-state.html",
"iron-control-state.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,47 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>simple-button</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link href="../../paper-styles/demo-pages.html" rel="import">
<link href="simple-button.html" rel="import">
<style>
.vertical-section {
text-align: center;
}
</style>
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<h3>Normal</h3>
<simple-button tabindex="0">Hello World</simple-button>
<h3>Toggles</h3>
<simple-button toggles tabindex="0">Hello World</simple-button>
<h3>Disabled</h3>
<simple-button disabled tabindex="0">Hello World</simple-button>
</div>
</body>
</html>

View File

@ -0,0 +1,70 @@
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-button-state.html">
<link rel="import" href="../iron-control-state.html">
<dom-module id="simple-button">
<style>
:host {
display: inline-block;
background-color: #4285F4;
color: #fff;
min-height: 8px;
min-width: 8px;
padding: 16px;
text-transform: uppercase;
border-radius: 3px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
:host([disabled]) {
opacity: 0.3;
pointer-events: none;
}
:host([active]),
:host([pressed]) {
background-color: #3367D6;
box-shadow: inset 0 3px 5px rgba(0,0,0,.2);
}
</style>
<template>
<content></content>
</template>
<script>
Polymer({
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
],
hostAttributes: {
role: 'button'
}
});
</script>
</dom-module>

View File

@ -0,0 +1,27 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>Iron Behaviors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="iron-button-state.html"></iron-component-page>
</body>
</html>

View File

@ -16,7 +16,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/** /**
* @demo demo/index.html * @demo demo/index.html
* @polymerBehavior * @polymerBehavior Polymer.IronButtonState
*/ */
Polymer.IronButtonStateImpl = { Polymer.IronButtonStateImpl = {
@ -177,7 +177,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}; };
/** @polymerBehavior Polymer.IronButtonState */ /** @polymerBehavior */
Polymer.IronButtonState = [ Polymer.IronButtonState = [
Polymer.IronA11yKeysBehavior, Polymer.IronA11yKeysBehavior,
Polymer.IronButtonStateImpl Polymer.IronButtonStateImpl

View File

@ -0,0 +1,154 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>active-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialActiveState">
<template>
<test-button></test-button>
</template>
</test-fixture>
<test-fixture id="ToggleActiveState">
<template>
<test-button toggles></test-button>
</template>
</test-fixture>
<script>
suite('active-state', function() {
var activeTarget;
setup(function() {
activeTarget = fixture('TrivialActiveState');
});
suite('active state with toggles attribute', function() {
setup(function() {
activeTarget = fixture('ToggleActiveState');
});
suite('when clicked', function() {
test('is activated', function(done) {
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
done();
} catch (e) {
done(e);
}
});
});
test('is deactivated by a subsequent click', function(done) {
MockInteractions.downAndUp(activeTarget, function() {
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
done();
} catch (e) {
done(e);
}
});
});
});
});
});
suite('without toggles attribute', function() {
suite('when mouse is down', function() {
test('does not get an active attribute', function() {
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
MockInteractions.down(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
});
});
suite('when mouse is up', function() {
test('does not get an active attribute', function() {
MockInteractions.down(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
MockInteractions.up(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
});
});
});
suite('when space is pressed', function() {
test('triggers a click event', function(done) {
activeTarget.addEventListener('click', function() {
done();
});
MockInteractions.pressSpace(activeTarget);
});
test('only triggers click after the key is released', function(done) {
var keyupTriggered = false;
activeTarget.addEventListener('keyup', function() {
keyupTriggered = true;
});
activeTarget.addEventListener('click', function() {
try {
expect(keyupTriggered).to.be.eql(true);
done();
} catch (e) {
done(e);
}
});
MockInteractions.pressSpace(activeTarget);
});
});
suite('when enter is pressed', function() {
test('triggers a click event', function(done) {
activeTarget.addEventListener('click', function() {
done();
});
MockInteractions.pressEnter(activeTarget);
});
test('only triggers click before the key is released', function(done) {
var keyupTriggered = false;
activeTarget.addEventListener('keyup', function() {
keyupTriggered = true;
});
activeTarget.addEventListener('click', function() {
try {
expect(keyupTriggered).to.be.eql(false);
done();
} catch (e) {
done(e);
}
});
MockInteractions.pressEnter(activeTarget);
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,85 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>disabled-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialDisabledState">
<template>
<test-control></test-control>
</template>
</test-fixture>
<test-fixture id="InitiallyDisabledState">
<template>
<test-control disabled></test-control>
</template>
</test-fixture>
<script>
suite('disabled-state', function() {
var disableTarget;
suite('a trivial disabled state', function() {
setup(function() {
disableTarget = fixture('TrivialDisabledState');
});
suite('when disabled is true', function() {
test('receives a disabled attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
});
test('receives an appropriate aria attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
});
});
suite('when disabled is false', function() {
test('loses the disabled attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
disableTarget.disabled = false;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(false);
});
});
});
suite('a state with an initially disabled target', function() {
setup(function() {
disableTarget = fixture('InitiallyDisabledState');
});
test('preserves the disabled attribute on target', function() {
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
expect(disableTarget.disabled).to.be.eql(true);
});
test('adds `aria-disabled` to the target', function() {
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,120 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>focused-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialFocusedState">
<template>
<test-control tabindex="-1"></test-control>
</template>
</test-fixture>
<test-fixture id="NestedFocusedState">
<template>
<nested-focusable></nested-focusable>
</template>
</test-fixture>
<script>
suite('focused-state', function() {
var focusTarget;
setup(function() {
focusTarget = fixture('TrivialFocusedState');
});
suite('when is focused', function() {
test('receives a focused attribute', function() {
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
MockInteractions.focus(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
});
test('focused property is true', function() {
expect(focusTarget.focused).to.not.be.eql(true);
MockInteractions.focus(focusTarget);
expect(focusTarget.focused).to.be.eql(true);
});
});
suite('when is blurred', function() {
test('loses the focused attribute', function() {
MockInteractions.focus(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
MockInteractions.blur(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
});
test('focused property is false', function() {
MockInteractions.focus(focusTarget);
expect(focusTarget.focused).to.be.eql(true);
MockInteractions.blur(focusTarget);
expect(focusTarget.focused).to.be.eql(false);
});
});
suite('when the focused state is disabled', function() {
setup(function() {
focusTarget.disabled = true;
});
test('will not be focusable', function() {
expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
});
});
});
suite('nested focusable', function() {
var focusable;
setup(function() {
focusable = fixture('NestedFocusedState');
});
test('focus/blur events fired on host element', function(done) {
var nFocusEvents = 0;
var nBlurEvents = 0;
focusable.addEventListener('focus', function() {
nFocusEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nFocusEvents, 1, 'one focus event fired');
MockInteractions.blur(focusable.$.input);
});
});
focusable.addEventListener('blur', function() {
nBlurEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nBlurEvents, 1, 'one blur event fired');
done();
});
});
MockInteractions.focus(focusable.$.input);
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'focused-state.html',
'active-state.html',
'disabled-state.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,66 @@
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../iron-control-state.html">
<link rel="import" href="../iron-button-state.html">
<script>
Polymer({
is: 'test-control',
behaviors: [
Polymer.IronControlState
]
});
</script>
<script>
Polymer({
is: 'test-button',
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
],
_buttonStateChanged: function() {
}
});
</script>
<dom-module id="nested-focusable">
<template>
<input id="input">
</template>
</dom-module>
<script>
Polymer({
is: 'nested-focusable',
behaviors: [
Polymer.IronControlState
]
});
</script>

View File

@ -0,0 +1,41 @@
{
"name": "iron-fit-behavior",
"version": "1.0.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Fits an element inside another element",
"private": true,
"main": [
"iron-fit-behavior.html"
],
"keywords": [
"web-components",
"polymer",
"behavior"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-fit-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-fit-behavior",
"_release": "1.0.0",
"_resolution": {
"type": "version",
"tag": "v1.0.0",
"commit": "971104a539e356fc9f8d5c640fced7f1af653c15"
},
"_source": "git://github.com/PolymerElements/iron-fit-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-fit-behavior"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,31 @@
{
"name": "iron-fit-behavior",
"version": "1.0.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Fits an element inside another element",
"private": true,
"main": [
"iron-fit-behavior.html"
],
"keywords": [
"web-components",
"polymer",
"behavior"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-fit-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,42 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-fit-behavior demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="simple-fit.html">
<style>
.sized {
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<simple-fit auto-fit-on-attach class="sized">
centered in window
</simple-fit>
</body>
</html>

View File

@ -0,0 +1,42 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-fit-behavior.html">
<dom-module id="simple-fit">
<style>
:host {
display: block;
background: black;
color: white;
padding: 8px;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'simple-fit',
behaviors: [
Polymer.IronFitBehavior
]
});
</script>

View File

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-fit-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View File

@ -0,0 +1,230 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<script>
/**
Polymer.IronFitBehavior fits an element in another element using `max-height` and `max-width`, and
optionally centers it in the window or another element.
The element will only be sized and/or positioned if it has not already been sized and/or positioned
by CSS.
CSS properties | Action
-----------------------------|-------------------------------------------
`position` set | Element is not centered horizontally or vertically
`top` or `bottom` set | Element is not vertically centered
`left` or `right` set | Element is not horizontally centered
`max-height` or `height` set | Element respects `max-height` or `height`
`max-width` or `width` set | Element respects `max-width` or `width`
@demo demo/index.html
@polymerBehavior
*/
Polymer.IronFitBehavior = {
properties: {
/**
* The element that will receive a `max-height`/`width`. By default it is the same as `this`,
* but it can be set to a child element. This is useful, for example, for implementing a
* scrolling region inside the element.
*/
sizingTarget: {
type: Object,
value: function() {
return this;
}
},
/**
* The element to fit `this` into.
*/
fitInto: {
type: Object,
value: window
},
/**
* Set to true to auto-fit on attach.
*/
autoFitOnAttach: {
type: Boolean,
value: false
},
_fitInfo: {
type: Object
}
},
get _fitWidth() {
var fitWidth;
if (this.fitInto === window) {
fitWidth = this.fitInto.innerWidth;
} else {
fitWidth = this.fitInto.getBoundingClientRect().width;
}
return fitWidth;
},
get _fitHeight() {
var fitHeight;
if (this.fitInto === window) {
fitHeight = this.fitInto.innerHeight;
} else {
fitHeight = this.fitInto.getBoundingClientRect().height;
}
return fitHeight;
},
attached: function() {
if (this.autoFitOnAttach) {
if (window.getComputedStyle(this).display === 'none') {
setTimeout(function() {
this.fit();
}.bind(this));
} else {
this.fit();
}
}
},
/**
* Fits and optionally centers the element into the window, or `fitInfo` if specified.
*/
fit: function() {
this._discoverInfo();
this.constrain();
this.center();
},
/**
* Memoize information needed to position and size the target element.
*/
_discoverInfo: function() {
if (this._fitInfo) {
return;
}
var target = window.getComputedStyle(this);
var sizer = window.getComputedStyle(this.sizingTarget);
this._fitInfo = {
positionedBy: {
vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
'bottom' : null),
horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
'right' : null),
css: target.position
},
sizedBy: {
height: sizer.maxHeight !== 'none',
width: sizer.maxWidth !== 'none'
},
margin: {
top: parseInt(target.marginTop, 10) || 0,
right: parseInt(target.marginRight, 10) || 0,
bottom: parseInt(target.marginBottom, 10) || 0,
left: parseInt(target.marginLeft, 10) || 0
}
};
},
/**
* Resets the target element's position and size constraints, and clear
* the memoized data.
*/
resetFit: function() {
if (!this._fitInfo || !this._fitInfo.sizedBy.height) {
this.sizingTarget.style.maxHeight = '';
this.style.top = '';
}
if (!this._fitInfo || !this._fitInfo.sizedBy.width) {
this.sizingTarget.style.maxWidth = '';
this.style.left = '';
}
if (this._fitInfo) {
this.style.position = this._fitInfo.positionedBy.css;
}
this._fitInfo = null;
},
/**
* Equivalent to calling `resetFit()` and `fit()`. Useful to call this after the element,
* the window, or the `fitInfo` element has been resized.
*/
refit: function() {
this.resetFit();
this.fit();
},
/**
* Constrains the size of the element to the window or `fitInfo` by setting `max-height`
* and/or `max-width`.
*/
constrain: function() {
var info = this._fitInfo;
// position at (0px, 0px) if not already positioned, so we can measure the natural size.
if (!this._fitInfo.positionedBy.vertically) {
this.style.top = '0px';
}
if (!this._fitInfo.positionedBy.horizontally) {
this.style.left = '0px';
}
// need border-box for margin/padding
this.sizingTarget.style.boxSizing = 'border-box';
// constrain the width and height if not already set
var rect = this.getBoundingClientRect();
if (!info.sizedBy.height) {
this._sizeDimension(rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
}
if (!info.sizedBy.width) {
this._sizeDimension(rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
}
},
_sizeDimension: function(rect, positionedBy, start, end, extent) {
var info = this._fitInfo;
var max = extent === 'Width' ? this._fitWidth : this._fitHeight;
var flip = (positionedBy === end);
var offset = flip ? max - rect[end] : rect[start];
var margin = info.margin[flip ? start : end];
var offsetExtent = 'offset' + extent;
var sizingOffset = this[offsetExtent] - this.sizingTarget[offsetExtent];
this.sizingTarget.style['max' + extent] = (max - margin - offset - sizingOffset) + 'px';
},
/**
* Centers horizontally and vertically if not already positioned. This also sets
* `position:fixed`.
*/
center: function() {
if (!this._fitInfo.positionedBy.vertically || !this._fitInfo.positionedBy.horizontally) {
// need position:fixed to center
this.style.position = 'fixed';
}
if (!this._fitInfo.positionedBy.vertically) {
var top = (this._fitHeight - this.offsetHeight) / 2;
top -= this._fitInfo.margin.top;
this.style.top = top + 'px';
}
if (!this._fitInfo.positionedBy.horizontally) {
var left = (this._fitWidth - this.offsetWidth) / 2;
left -= this._fitInfo.margin.left;
this.style.left = left + 'px';
}
}
};
</script>

View File

@ -0,0 +1,34 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-fit-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-fit-behavior.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,332 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-fit-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-fit.html">
<style>
body {
margin: 0;
padding: 0;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.scrolling {
overflow: auto;
}
.sized-x {
width: 200px;
}
.sized-y {
height: 200px;
}
.positioned-left {
position: absolute;
left: 100px;
}
.positioned-right {
position: absolute;
right: 100px;
}
.positioned-top {
position: absolute;
top: 100px;
}
.positioned-bottom {
position: absolute;
bottom: 100px;
}
.with-max-width {
max-width: 500px;
}
.with-max-height {
max-height: 500px;
}
.with-margin {
margin: 20px;
}
</style>
</head>
<body>
<test-fixture id="absolute">
<template>
<test-fit auto-fit-on-attach class="absolute">
Absolutely positioned
</test-fit>
</template>
</test-fixture>
<test-fixture id="sized-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x sized-y">
Sized (x/y), auto center/center
</test-fit>
</template>
</test-fixture>
<test-fixture id="sized-x">
<template>
<test-fit auto-fit-on-attach class="sized-x">
Sized (x), auto center/center
</test-fit>
</template>
</test-fixture>
<test-fixture id="positioned-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x positioned-left positioned-top">
Sized (x/y), positioned/positioned
</test-fit>
</template>
</test-fixture>
<test-fixture id="inline-positioned-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;right:100px;bottom:100px;">
Sized (x/y), positioned/positioned
</test-fit>
</template>
</test-fixture>
<test-fixture id="sectioned">
<template>
<test-fit auto-fit-on-attach class="sized-x">
<div>
Sized (x), auto center/center with scrolling section
</div>
<div class="internal"></div>
</test-fit>
</template>
</test-fixture>
<test-fixture id="constrain-target">
<template>
<div class="constrain" style="position: fixed; top: 0; left: 0; width: 50vw; height: 50vh; border: 1px solid black;">
<test-fit auto-fit-on-attach class="el">
<div>
Auto center/center to parent element
</div>
</test-fit>
</div>
</template>
</test-fixture>
<template id="ipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</template>
<script>
function makeScrolling(el) {
el.classList.add('scrolling');
var template = document.getElementById('ipsum');
for (var i = 0; i < 20; i++) {
el.appendChild(template.content.cloneNode(true));
}
}
suite('manual positioning', function() {
test('css positioned element is not re-positioned', function() {
var el = fixture('positioned-xy');
var rect = el.getBoundingClientRect();
assert.equal(rect.top, 100, 'top is unset');
assert.equal(rect.left, 100, 'left is unset');
});
test('inline positioned element is not re-positioned', function() {
var el = fixture('inline-positioned-xy');
var rect = el.getBoundingClientRect();
// need to measure document.body here because mocha sets a min-width on html,body, and
// the element is positioned wrt to that by css
var bodyRect = document.body.getBoundingClientRect();
assert.equal(rect.top, bodyRect.height - rect.height - 100, 'top is unset');
assert.equal(rect.left, bodyRect.width - rect.width - 100, 'left is unset');
});
test('position property is preserved after', function() {
var el = fixture('absolute');
assert.equal(getComputedStyle(el).position, 'absolute', 'position:absolute is preserved');
})
});
suite('fit to window', function() {
test('sized element is centered in viewport', function() {
var el = fixture('sized-xy');
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('sized element with margin is centered in viewport', function() {
var el = fixture('sized-xy');
el.classList.add('with-margin');
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('scrolling element is centered in viewport', function() {
var el = fixture('sized-x');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('scrolling element is constrained to viewport height', function() {
var el = fixture('sized-x');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
});
test('scrolling element with max-height is centered in viewport', function() {
var el = fixture('sized-x');
el.classList.add('with-max-height');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('scrolling element with max-height respects max-height', function() {
var el = fixture('sized-x');
el.classList.add('with-max-height');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= 500, 'height is less than or equal to max-height');
});
test('css positioned, scrolling element is constrained to viewport height (top,left)', function() {
var el = fixture('positioned-xy');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
});
test('css positioned, scrolling element is constrained to viewport height (bottom, right)', function() {
var el = fixture('sized-x');
el.classList.add('positioned-bottom');
el.classList.add('positioned-right');
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
});
test('sized, scrolling element with margin is centered in viewport', function() {
var el = fixture('sized-x');
el.classList.add('with-margin');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('sized, scrolling element is constrained to viewport height', function() {
var el = fixture('sized-x');
el.classList.add('with-margin');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 20 * 2, 'height is less than or equal to viewport height');
});
test('css positioned, scrolling element with margin is constrained to viewport height (top, left)', function() {
var el = fixture('positioned-xy');
el.classList.add('with-margin');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
});
test('css positioned, scrolling element with margin is constrained to viewport height (bottom, right)', function() {
var el = fixture('sized-x');
el.classList.add('positioned-bottom');
el.classList.add('positioned-right');
el.classList.add('with-margin')
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
});
test('scrolling sizingTarget is constrained to viewport height', function() {
el = fixture('sectioned');
var internal = Polymer.dom(el).querySelector('.internal');
el.sizingTarget = internal;
makeScrolling(internal);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
});
});
suite('fit to element', function() {
test('element fits in another element', function() {
var constrain = fixture('constrain-target');
var el = Polymer.dom(constrain).querySelector('.el')
makeScrolling(el);
el.fitInto = constrain;
el.refit();
var rect = el.getBoundingClientRect();
var crect = constrain.getBoundingClientRect();
assert.isTrue(rect.height <= crect.height, 'width is less than or equal to fitInto width');
assert.isTrue(rect.height <= crect.height, 'height is less than or equal to fitInto height');
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,42 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-fit-behavior.html">
<dom-module id="test-fit">
<style>
:host {
display: block;
background: black;
color: white;
padding: 8px;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'test-fit',
behaviors: [
Polymer.IronFitBehavior
]
});
</script>

View File

@ -0,0 +1,36 @@
{
"name": "iron-flex-layout",
"version": "1.0.2",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
"polymer",
"layout"
],
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-flex-layout",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "50bcecf40ab23caa7c2cd90030555e00c5ba7154"
},
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-flex-layout"
}

View File

@ -0,0 +1,2 @@
bower_components

View File

@ -0,0 +1,26 @@
{
"name": "iron-flex-layout",
"version": "1.0.2",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
"polymer",
"layout"
],
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,42 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<title>iron-flex-layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="x-app.html">
<style>
html, body, x-app {
height: 100%;
}
body {
margin: 0;
}
</style>
</head>
<body class="fullbleed">
<x-app></x-app>
</body>
</html>

View File

@ -0,0 +1,118 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<link rel="import" href="../iron-flex-layout.html">
<dom-module id="x-app">
<style>
:host {
@apply(--layout-horizontal);
@apply(--paper-font-body2);
}
[nav] {
@apply(--layout-vertical);
width: 200px;
background-color: var(--paper-grey-300);
}
[item] {
@apply(--layout-horizontal);
@apply(--layout-center);
height: 60px;
padding-left: 16px;
border-bottom: 1px solid var(--paper-grey-400);
}
[main] {
@apply(--layout-flex);
@apply(--layout-vertical);
}
[header] {
@apply(--layout-horizontal);
@apply(--layout-center);
@apply(--paper-font-subhead);
height: 60px;
background-color: var(--google-blue-700);
padding: 0 16px;
color: white;
}
[tool] {
@apply(--layout-inline);
}
[content] {
@apply(--layout-flex);
overflow: auto;
padding: 0 10px;
}
[card] {
@apply(--layout-vertical);
@apply(--layout-center-center);
@apply(--shadow-elevation-2dp);
height: 300px;
max-width: 800px;
margin: 16px auto;
font-weight: bold;
background-color: var(--paper-grey-200);
}
</style>
<template>
<div nav>
<div content>
<div item>ITEM 1</div>
<div item>ITEM 2</div>
<div item>ITEM 3</div>
<div item>ITEM 4</div>
<div item>ITEM 5</div>
</div>
</div>
<div main>
<div header>
<div tool>Foo</div>
<div class="flex"></div>
<div tool>Bar</div>
</div>
<div content>
<div card>CARD 1</div>
<div card>CARD 2</div>
<div card>CARD 3</div>
<div card>CARD 4</div>
<div card>CARD 5</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-app'
});
</script>

View File

@ -0,0 +1,43 @@
{
"name": "iron-icon",
"private": true,
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "An element that supports displaying an icon",
"main": "iron-icon.html",
"author": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"icon"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-icon.git"
},
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-iconset": "polymerelements/iron-iconset#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-icon",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "f9246c47ecb1c682f0fb9ea48255d5f7debd1e03"
},
"_source": "git://github.com/polymerelements/iron-icon.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-icon"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,33 @@
{
"name": "iron-icon",
"private": true,
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "An element that supports displaying an icon",
"main": "iron-icon.html",
"author": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"icon"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-icon.git"
},
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-iconset": "polymerelements/iron-iconset#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,48 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-icon demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-icon.html">
<link rel="import" href="../../iron-iconset/iron-iconset.html">
<link href="../../paper-styles/demo-pages.html" rel="import">
<style is="custom-style">
.vertical-section h4 {
border-left: 3px solid var(--paper-grey-300);
padding-left: 10px;
}
.vertical-section h4:hover {
border-left-color: var(--google-blue-700);
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h4>This demo is for a single &lt;iron-icon&gt;. If you're looking for the
whole set of available icons, check out the &lt;iron-icons&gt; demo.</h4>
<div class="vertical-section">
<!-- iron-icon using a iron-iconset as its icon source -->
<iron-iconset name="example" icons="location" src="location.png" size="24" width="24"></iron-iconset>
<h4>&lt;iron-icon icon="example:location"&gt;</h4>
<iron-icon icon="example:location"></iron-icon>
<!-- iron-icon using an image url as its icon source -->
<h4>&lt;iron-icon src="location.png"&gt;</h4>
<iron-icon src="location.png"></iron-icon>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 324 B

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<circle cx="112" cy="61" r="8"/>
<path d="M129,78H95V44h34V78z M97,76h30V46H97V76z"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 720 B

View File

@ -0,0 +1,26 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-icon.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,120 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-icon</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../iron-icon.html">
<link rel="import" href="../../iron-iconset/iron-iconset.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="TrivialIcon">
<template>
<iron-icon src="../demo/location.png"></iron-icon>
</template>
</test-fixture>
<test-fixture id="IconFromIconset">
<template>
<iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset>
<iron-icon icon="example:location"></iron-icon>
</template>
</test-fixture>
<test-fixture id="WithoutAnIconSource">
<template>
<iron-icon icon=""></iron-icon>
<iron-icon></iron-icon>
<iron-icon src=""></iron-icon>
</template>
</test-fixture>
<script>
function iconElementFor (node) {
var nodes = Polymer.dom(node.root).childNodes;
for (var i = 0; i < nodes.length; ++i) {
if (nodes[i].nodeName.match(/DIV|IMG/)) {
return nodes[i];
}
}
}
function hasIcon (node) {
return /png/.test(node.style.backgroundImage);
}
suite('<iron-icon>', function() {
suite('basic behavior', function() {
var icon;
setup(function() {
icon = fixture('TrivialIcon');
});
test('can be assigned an icon with the src attribute', function() {
expect(iconElementFor(icon)).to.be.ok;
expect(iconElementFor(icon).src).to.match(/demo\/location\.png/);
});
test('can change its src dynamically', function() {
icon.src = 'foo.png';
expect(iconElementFor(icon).src).to.match(/foo\.png/);
});
});
suite('when paired with an iconset', function() {
var icon;
setup(function() {
var elements = fixture('IconFromIconset');
icon = elements[1];
});
test('can be assigned an icon from the iconset', function() {
expect(hasIcon(icon)).to.be.ok;
});
test('can change its icon dynamically', function() {
var style = icon.style;
expect(style.backgroundPosition).to.match(/0(%|px) 0(%|px)/);
icon.icon = "example:blank";
expect(style.backgroundPosition).to.match(/-24px 0(%|px)/);
});
});
suite('when no icon source is provided', function() {
test('will politely wait for an icon source without throwing', function() {
document.createElement('iron-icon');
fixture('WithoutAnIconSource');
});
})
});
</script>
</body>
</html>

View File

@ -0,0 +1,46 @@
{
"name": "iron-icons",
"version": "1.0.2",
"description": "A set of icons for use with iron-icon",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"icon"
],
"main": "iron-icons.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-icons"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-icons",
"dependencies": {
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#1.0.0",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [
"util",
"update-icons.sh"
],
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "7340b4e26a0235ffdf2477299ccecd0c5d3d99e8"
},
"_source": "git://github.com/polymerelements/iron-icons.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-icons"
}

View File

@ -0,0 +1,3 @@
util/node_modules
material-design-icons
bower_components

View File

@ -0,0 +1,37 @@
{
"name": "iron-icons",
"version": "1.0.2",
"description": "A set of icons for use with iron-icon",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"icon"
],
"main": "iron-icons.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-icons"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-icons",
"dependencies": {
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#1.0.0",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [
"util",
"update-icons.sh"
]
}

View File

@ -0,0 +1,132 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-icons</title>
<!-- polyfill WebComponents, if needed -->
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<!-- styles for the demo -->
<link href="../../paper-styles/demo-pages.html" rel="import">
<!-- load layout classes -->
<link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
<!-- load default iconset -->
<link rel="import" href="../iron-icons.html">
<!-- load the rest -->
<link rel="import" href="../av-icons.html">
<link rel="import" href="../communication-icons.html">
<link rel="import" href="../device-icons.html">
<link rel="import" href="../editor-icons.html">
<link rel="import" href="../hardware-icons.html">
<link rel="import" href="../image-icons.html">
<link rel="import" href="../maps-icons.html">
<link rel="import" href="../notification-icons.html">
<link rel="import" href="../social-icons.html">
<style is="custom-style">
h2 {
text-transform: capitalize;
}
iron-icon {
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
iron-icon:hover {
fill: var(--google-yellow-700);
}
.set {
margin: auto;
padding: 1em 0;
border-bottom: 1px solid silver;
}
.set:last-of-type {
border-bottom: none;
}
.set:nth-of-type(4n-3) {
color: var(--paper-grey-700);
}
.set:nth-of-type(4n-2) {
color: var(--google-yellow-300);
}
.set:nth-of-type(4n-1) {
color: var(--google-green-500);
}
.set:nth-of-type(4n) {
color: var( --google-blue-500);
}
.container {
min-width: 10em;
padding: 1em 0.5em;
text-align: center;
}
.container > div {
margin-top: 0.5em;
color: black;
font-size: 10px;
}
</style>
</head>
<body>
<template is="dom-bind">
<iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
<template is="dom-repeat" items="{{iconsets}}">
<h2>{{item.name}}</h2>
<div class="set horizontal wrap layout">
<template is="dom-repeat" items="{{getIconNames(item)}}">
<span class="container vertical center layout flex-1">
<iron-icon icon="{{item}}"></iron-icon>
<div>{{item}}</div>
</span>
</template>
</div>
</template>
</template>
<script>
document.querySelector('[is=dom-bind]').getIconNames = function(iconset) {
return iconset.getIconNames();
};
</script>
</body>
</html>

View File

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<circle cx="73" cy="24" r="4"/>
<path d="M82,33H64V15h18V33z M66,31h14V17H66V31z"/>
<circle cx="112.5" cy="24" r="4"/>
<circle cx="151" cy="24" r="4"/>
<path d="M121,33h-18V15h18V33z M105,31h14V17h-14V31z"/>
<path d="M160,33h-18V15h18V33z M144,31h14V17h-14V31z"/>
<circle cx="73" cy="62" r="4"/>
<path d="M82,71H64V53h18V71z M66,69h14V55H66V69z"/>
<circle cx="112.5" cy="62" r="4"/>
<path d="M121,71h-18V53h18V71z M105,69h14V55h-14V69z"/>
<circle cx="151" cy="62" r="4"/>
<path d="M160,71h-18V53h18V71z M144,69h14V55h-14V69z"/>
<circle cx="73" cy="102" r="4"/>
<path d="M82,111H64V93h18V111z M66,109h14V95H66V109z"/>
<circle cx="112.5" cy="102" r="4"/>
<path d="M121,111h-18V93h18V111z M105,109h14V95h-14V109z"/>
<circle cx="151" cy="102" r="4"/>
<path d="M160,111h-18V93h18V111z M144,109h14V95h-14V109z"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,25 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View File

@ -0,0 +1,41 @@
{
"name": "iron-iconset-svg",
"description": "Manages a set of svg icons",
"version": "1.0.4",
"keywords": [
"web-components",
"polymer",
"icon"
],
"license": "http://polymer.github.io/LICENSE.txt",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-iconset-svg.git"
},
"dependencies": {
"polymer": "polymer/polymer#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*"
},
"homepage": "https://github.com/polymerelements/iron-iconset-svg",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "795aa82ac22971421bc4375efbd2419ebba9099f"
},
"_source": "git://github.com/polymerelements/iron-iconset-svg.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-iconset-svg"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,31 @@
{
"name": "iron-iconset-svg",
"description": "Manages a set of svg icons",
"version": "1.0.4",
"keywords": [
"web-components",
"polymer",
"icon"
],
"license": "http://polymer.github.io/LICENSE.txt",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-iconset-svg.git"
},
"dependencies": {
"polymer": "polymer/polymer#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*"
}
}

View File

@ -0,0 +1,65 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-iconset-svg</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link href="../../paper-styles/demo-pages.html" rel="import">
<link rel="import" href="svg-sample-icons.html">
<style is="custom-style">
.centered {
text-align: center;
}
iron-icon {
height: 64px;
width: 64px;
margin: auto 1em;
}
iron-icon:nth-of-type(1) {
fill: orange;
}
iron-icon:nth-of-type(2) {
fill: green;
}
iron-icon:nth-of-type(3) {
fill: navy;
}
iron-icon {
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
iron-icon:hover {
-webkit-filter: drop-shadow( 2px 2px 2px var(--google-grey-700) );
filter: drop-shadow( 2px 2px 2px var(--google-grey-700) );
}
</style>
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<iron-icon icon="svg-sample-icons:codepen"></iron-icon>
<iron-icon icon="svg-sample-icons:twitter"></iron-icon>
<iron-icon icon="svg-sample-icons:youtube"></iron-icon>
</div>
</body>
</html>

View File

@ -0,0 +1,69 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg.html">
<iron-iconset-svg name="svg-sample-icons" size="100">
<svg>
<defs>
<g id="codepen">
<path class="outer-ring" d="M50,0C22.385,0,0,22.385,0,50c0,27.615,22.385,50,50,50c27.614,0,50-22.385,50-50C100,22.385,77.615,0,50,0z M50,91.789
C26.958,91.789,8.212,73.042,8.212,50C8.212,26.958,26.958,8.212,50,8.212c23.042,0,41.788,18.747,41.788,41.789
C91.788,73.042,73.042,91.789,50,91.789z"></path>
<path class="inner-logo" d="M80.893,40.234c-0.006-0.039-0.016-0.076-0.022-0.115c-0.013-0.075-0.027-0.15-0.046-0.223
c-0.012-0.044-0.028-0.086-0.042-0.128c-0.021-0.065-0.042-0.13-0.068-0.193c-0.018-0.044-0.039-0.088-0.059-0.13
c-0.028-0.06-0.057-0.119-0.09-0.175c-0.024-0.042-0.051-0.083-0.076-0.124c-0.036-0.055-0.073-0.109-0.112-0.161
c-0.029-0.039-0.06-0.078-0.091-0.115c-0.042-0.049-0.086-0.098-0.132-0.143c-0.035-0.036-0.069-0.072-0.106-0.104
c-0.049-0.044-0.099-0.086-0.15-0.127c-0.04-0.031-0.079-0.062-0.12-0.091c-0.016-0.01-0.029-0.023-0.044-0.033L51.474,19.531
c-0.893-0.595-2.055-0.595-2.947,0L20.267,38.371c-0.015,0.01-0.028,0.023-0.044,0.033c-0.042,0.029-0.081,0.06-0.12,0.091
c-0.052,0.041-0.102,0.083-0.15,0.127c-0.037,0.032-0.071,0.068-0.106,0.104c-0.046,0.045-0.09,0.094-0.132,0.143
c-0.031,0.038-0.062,0.077-0.092,0.115c-0.039,0.052-0.076,0.106-0.111,0.161c-0.027,0.041-0.052,0.082-0.076,0.124
c-0.033,0.057-0.062,0.115-0.09,0.175c-0.021,0.042-0.042,0.086-0.06,0.13c-0.026,0.063-0.047,0.128-0.068,0.193
c-0.014,0.042-0.029,0.084-0.042,0.128c-0.02,0.073-0.032,0.148-0.046,0.223c-0.006,0.039-0.016,0.076-0.021,0.115
c-0.016,0.114-0.024,0.229-0.024,0.346V59.42c0,0.117,0.009,0.233,0.024,0.348c0.005,0.038,0.015,0.077,0.021,0.114
c0.014,0.075,0.027,0.149,0.046,0.223c0.012,0.043,0.028,0.086,0.042,0.128c0.021,0.065,0.042,0.13,0.068,0.195
c0.018,0.044,0.039,0.086,0.06,0.129c0.028,0.06,0.058,0.118,0.09,0.177c0.024,0.041,0.049,0.082,0.076,0.122
c0.035,0.056,0.072,0.109,0.111,0.161c0.029,0.041,0.061,0.078,0.092,0.115c0.042,0.049,0.086,0.098,0.132,0.144
c0.035,0.036,0.069,0.071,0.106,0.104c0.048,0.044,0.099,0.086,0.15,0.127c0.039,0.031,0.078,0.062,0.12,0.091
c0.016,0.01,0.029,0.023,0.044,0.032l28.259,18.84c0.446,0.297,0.96,0.447,1.474,0.447c0.513,0,1.027-0.149,1.473-0.447
l28.259-18.84c0.015-0.009,0.028-0.022,0.044-0.032c0.042-0.029,0.081-0.06,0.12-0.091c0.051-0.041,0.102-0.083,0.15-0.127
c0.037-0.033,0.071-0.068,0.106-0.104c0.046-0.046,0.09-0.095,0.132-0.144c0.031-0.037,0.062-0.075,0.091-0.115
c0.04-0.052,0.076-0.105,0.112-0.161c0.025-0.041,0.051-0.081,0.076-0.122c0.033-0.059,0.062-0.117,0.09-0.177
c0.02-0.042,0.041-0.085,0.059-0.129c0.026-0.065,0.047-0.13,0.068-0.195c0.014-0.042,0.03-0.085,0.042-0.128
c0.02-0.074,0.033-0.148,0.046-0.223c0.006-0.037,0.016-0.076,0.022-0.114c0.014-0.115,0.023-0.231,0.023-0.348V40.581
C80.916,40.464,80.907,40.348,80.893,40.234z M52.657,26.707l20.817,13.877l-9.298,6.221l-11.519-7.706V26.707z M47.343,26.707
v12.393l-11.518,7.706l-9.299-6.221L47.343,26.707z M24.398,45.554L31.046,50l-6.648,4.446V45.554z M47.343,73.294L26.525,59.417
l9.299-6.219l11.518,7.704V73.294z M50,56.286L40.603,50L50,43.715L59.397,50L50,56.286z M52.657,73.294V60.902l11.519-7.704
l9.298,6.219L52.657,73.294z M75.602,54.447L68.955,50l6.647-4.446V54.447z"></path>
</g>
<path id="twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"></path>
<g id="youtube">
<path class="youtube" d="M98.77,27.492c-1.225-5.064-5.576-8.799-10.811-9.354C75.561,16.818,63.01,15.993,50.514,16
c-12.495-0.007-25.045,0.816-37.446,2.139c-5.235,0.557-9.583,4.289-10.806,9.354C0.522,34.704,0.5,42.574,0.5,50.001
c0,7.426,0,15.296,1.741,22.509c1.224,5.061,5.572,8.799,10.807,9.352c12.399,1.32,24.949,2.145,37.446,2.14
c12.494,0.005,25.047-0.817,37.443-2.14c5.234-0.555,9.586-4.291,10.81-9.352c1.741-7.213,1.753-15.083,1.753-22.509
S100.51,34.704,98.77,27.492 M67.549,52.203L43.977,64.391c-2.344,1.213-4.262,0.119-4.262-2.428V38.036
c0-2.548,1.917-3.644,4.262-2.429l23.572,12.188C69.896,49.008,69.896,50.992,67.549,52.203"></path>
</g>
</defs>
</svg>
</iron-iconset-svg>

View File

@ -0,0 +1,26 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View File

@ -24,7 +24,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
* *
* Example: * Example:
* *
* <iron-iconset-svg id="my-svg-icons" iconSize="24"> * <iron-iconset-svg name="my-svg-icons" size="24">
* <svg> * <svg>
* <defs> * <defs>
* <g id="shape"> * <g id="shape">

View File

@ -0,0 +1,30 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-iconset-svg.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,107 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-iconset-svg</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../iron-iconset-svg.html">
<link rel="import" href="../../iron-meta/iron-meta.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="TrivialIconsetSvg">
<template>
<iron-iconset-svg name="foo"></iron-iconset-svg>
<iron-meta type="iconset"></iron-meta>
</template>
</test-fixture>
<test-fixture id="StandardIconsetSvg">
<template>
<iron-iconset-svg name="my-icons" size="20">
<svg>
<defs>
<circle id="circle" cx="20" cy="20" r="10"></circle>
<rect id="square" x="0" y="0" width="20" height="20"></rect>
</defs>
</svg>
</iron-iconset-svg>
<div></div>
</template>
</test-fixture>
<script>
suite('<iron-iconset>', function () {
suite('basic behavior', function () {
var iconset;
var meta;
setup(function () {
var elements = fixture('TrivialIconsetSvg');
iconset = elements[0];
meta = elements[1];
});
test('it can be accessed via iron-meta', function () {
expect(meta.byKey('foo')).to.be.equal(iconset);
});
});
suite('when paired with a size and SVG definition', function () {
var iconset;
var div;
setup(function () {
var elements = fixture('StandardIconsetSvg');
iconset = elements[0];
div = elements[1];
});
test('appends a child to the target element', function () {
expect(div.firstElementChild).to.not.be.ok;
iconset.applyIcon(div, 'circle');
expect(div.firstElementChild).to.be.ok;
});
test('can be queried for all available icons', function () {
expect(iconset.getIconNames()).to.deep.eql(['my-icons:circle', 'my-icons:square']);
});
test('supports any icon defined in the svg', function () {
var lastSvgIcon;
iconset.getIconNames().forEach(function (iconName) {
iconset.applyIcon(div, iconName.split(':').pop());
expect(div.firstElementChild).to.not.be.equal(lastSvgIcon);
lastSvgIcon = div.firstElementChild;
});
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,38 @@
{
"name": "iron-meta",
"version": "1.0.2",
"keywords": [
"web-components",
"polymer"
],
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Useful for sharing information across a DOM tree",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-meta.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.4",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-meta",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "85d0258556a25a34dbe98657ce9f40d878d4c5bf"
},
"_source": "git://github.com/polymerelements/iron-meta.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-meta"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,28 @@
{
"name": "iron-meta",
"version": "1.0.2",
"keywords": [
"web-components",
"polymer"
],
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Useful for sharing information across a DOM tree",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-meta.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.4",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,46 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iron-meta</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../iron-meta.html">
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<h1>&lt;iron-meta&gt;</h1>
<iron-meta key="info" value="foo/bar"></iron-meta>
The <code>value</code> stored at <code>key="info"</code> is <code><meta-test></meta-test></code>.
</div>
<script>
Polymer({
is: 'meta-test',
ready: function() {
this.textContent = new Polymer.IronMetaQuery({key: 'info'}).value;
}
});
</script>
</body>
</html>

View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<circle cx="22" cy="85" r="4"/>
<circle cx="88" cy="98" r="4"/>
<path d="M87.5,100c-3.8-0.3-5.5-2.8-7-5c-1.4-2.1-2.7-3.9-5.5-4.2c-2.8-0.3-4.4,1.3-6.2,3.1c-1.9,1.9-4,4-7.8,3.7
c-3.8-0.3-5.5-2.8-7-5c-1.4-2.1-2.7-3.9-5.5-4.2c-2.8-0.3-4.4,1.3-6.2,3.1c-1.9,1.9-4,4-7.8,3.7c-3.8-0.3-5.5-2.8-7-5
c-1.4-2.1-2.7-3.9-5.5-4.2l0.2-2c3.8,0.3,5.5,2.8,7,5c1.4,2.1,2.7,3.9,5.5,4.2c2.8,0.3,4.4-1.3,6.2-3.1c1.9-1.9,4-4,7.8-3.7
c3.8,0.3,5.5,2.8,7,5c1.4,2.1,2.7,3.9,5.5,4.2c2.8,0.3,4.4-1.3,6.2-3.1c1.9-1.9,4-4,7.8-3.7c3.8,0.3,5.5,2.8,7,5
c1.4,2.1,2.7,3.9,5.5,4.2L87.5,100z"/>
<circle cx="96" cy="86" r="4"/>
<circle cx="162" cy="98" r="4"/>
<rect x="95.5" y="91" transform="matrix(0.9839 0.1789 -0.1789 0.9839 18.5382 -21.5923)" width="67.1" height="2"/>
<g>
<path d="M27,41.5l4.5,13.4l4.9-13.4h5.4v32h-4.4V61l0.4-13.4l-5.4,14.5h-2L25.6,48L26,61v12.5h-4.4v-32H27z"/>
<path d="M67.5,58.7H53.4V70h16.4v3.5H49v-32h20.6V45H53.4v10.2h14.2V58.7z"/>
<path d="M98.5,45H88.3v28.5h-4.4V45H73.6v-3.5h24.9V45z"/>
<path d="M116.2,65.3H105l-2.6,8.2h-4.5l10.9-32h3.8l10.6,32h-4.5L116.2,65.3z M106.2,61.6h8.9l-4.4-14.2L106.2,61.6z"/>
</g>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,27 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iron-meta</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View File

@ -25,25 +25,25 @@ Examples:
If I create an instance like this: If I create an instance like this:
<iron-meta key="info" keyUrl="foo/bar"></iron-meta> <iron-meta key="info" value="foo/bar"></iron-meta>
Note that keyUrl="foo/bar" is the metadata I've defined. I could define more Note that value="foo/bar" is the metadata I've defined. I could define more
attributes or use child nodes to define additional metadata. attributes or use child nodes to define additional metadata.
Now I can access that element (and it's metadata) from any iron-meta instance Now I can access that element (and it's metadata) from any iron-meta instance
via the byKey method, e.g. via the byKey method, e.g.
meta.byKey('info').getAttribute('keyUrl'). meta.byKey('info').getAttribute('value').
Pure imperative form would be like: Pure imperative form would be like:
document.createElement('iron-meta').byKey('info').getAttribute('keyUrl'); document.createElement('iron-meta').byKey('info').getAttribute('value');
Or, in a Polymer element, you can include a meta in your template: Or, in a Polymer element, you can include a meta in your template:
<iron-meta id="meta"></iron-meta> <iron-meta id="meta"></iron-meta>
... ...
this.$.meta.byKey('info').getAttribute('keyUrl'); this.$.meta.byKey('info').getAttribute('value');
@group Iron Elements @group Iron Elements
@demo demo/index.html @demo demo/index.html
@ -68,10 +68,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* The type of meta-data. All meta-data of the same type is stored * The type of meta-data. All meta-data of the same type is stored
* together. * together.
*
* @attribute type
* @type String
* @default 'default'
*/ */
type: { type: {
type: String, type: String,
@ -81,10 +77,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* The key used to store `value` under the `type` namespace. * The key used to store `value` under the `type` namespace.
*
* @attribute key
* @type String
* @default ''
*/ */
key: { key: {
type: String, type: String,
@ -93,10 +85,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* The meta-data to store or retrieve. * The meta-data to store or retrieve.
*
* @attribute value
* @type *
* @default this
*/ */
value: { value: {
type: Object, type: Object,
@ -106,10 +94,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* If true, `value` is set to the iron-meta instance itself. * If true, `value` is set to the iron-meta instance itself.
*
* @attribute self
* @type Boolean
* @default false
*/ */
self: { self: {
type: Boolean, type: Boolean,
@ -118,9 +102,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* Array of all meta-data values for the given type. * Array of all meta-data values for the given type.
*
* @property list
* @type Array
*/ */
list: { list: {
type: Array, type: Array,
@ -232,7 +213,7 @@ Or, in a Polymer element, you can include a meta in your template:
<iron-meta key="info" value="foo/bar"></iron-meta> <iron-meta key="info" value="foo/bar"></iron-meta>
Note that keyUrl="foo/bar" is the metadata I've defined. I could define more Note that value="foo/bar" is the metadata I've defined. I could define more
attributes or use child nodes to define additional metadata. attributes or use child nodes to define additional metadata.
Now I can access that element (and it's metadata) from any `iron-meta-query` instance: Now I can access that element (and it's metadata) from any `iron-meta-query` instance:
@ -251,10 +232,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* The type of meta-data. All meta-data of the same type is stored * The type of meta-data. All meta-data of the same type is stored
* together. * together.
*
* @attribute type
* @type String
* @default 'default'
*/ */
type: { type: {
type: String, type: String,
@ -265,9 +242,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* Specifies a key to use for retrieving `value` from the `type` * Specifies a key to use for retrieving `value` from the `type`
* namespace. * namespace.
*
* @attribute key
* @type String
*/ */
key: { key: {
type: String, type: String,
@ -276,10 +250,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* The meta-data to store or retrieve. * The meta-data to store or retrieve.
*
* @attribute value
* @type *
* @default this
*/ */
value: { value: {
type: Object, type: Object,
@ -289,9 +259,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* Array of all meta-data values for the given type. * Array of all meta-data values for the given type.
*
* @property list
* @type Array
*/ */
list: { list: {
type: Array, type: Array,
@ -304,7 +271,7 @@ Or, in a Polymer element, you can include a meta in your template:
* Actually a factory method, not a true constructor. Only runs if * Actually a factory method, not a true constructor. Only runs if
* someone invokes it directly (via `new Polymer.IronMeta()`); * someone invokes it directly (via `new Polymer.IronMeta()`);
*/ */
constructor: function(config) { factoryImpl: function(config) {
if (config) { if (config) {
for (var n in config) { for (var n in config) {
switch(n) { switch(n) {
@ -337,10 +304,6 @@ Or, in a Polymer element, you can include a meta in your template:
/** /**
* Retrieves meta data value by key. * Retrieves meta data value by key.
*
* @method byKey
* @param {String} key The key of the meta-data to be returned.
* @returns *
*/ */
byKey: function(key) { byKey: function(key) {
return this._metaData && this._metaData[key]; return this._metaData && this._metaData[key];

View File

@ -0,0 +1,48 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-meta-basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../iron-meta.html">
</head>
<body>
<iron-meta key="info" value="foo/bar"></iron-meta>
<script>
suite('basic', function() {
test('byKey', function() {
var meta = document.createElement('iron-meta');
assert.equal(meta.byKey('info'), 'foo/bar');
});
test('list', function() {
var meta = document.createElement('iron-meta');
assert.equal(meta.list.length, 1);
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
'iron-meta.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,186 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-meta</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../iron-meta.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="TrivialMeta">
<template>
<iron-meta self key="info"></iron-meta>
</template>
</test-fixture>
<test-fixture id="ManyMetas">
<template>
<iron-meta self key="default1"></iron-meta>
<iron-meta self key="default2"></iron-meta>
<iron-meta self key="default3"></iron-meta>
</template>
</test-fixture>
<test-fixture id="DifferentTypedMetas">
<template>
<iron-meta self type="foo" key="foobarKey"></iron-meta>
<iron-meta self type="bar" key="foobarKey"></iron-meta>
<iron-meta self key="defaultKey"></iron-meta>
</template>
</test-fixture>
<test-fixture id="ClashingMetas">
<template>
<iron-meta self key="baz"></iron-meta>
<iron-meta self key="baz"></iron-meta>
</template>
</test-fixture>
<script>
suite('<iron-meta>', function () {
suite('basic behavior', function () {
var meta;
setup(function () {
meta = fixture('TrivialMeta');
});
teardown(function () {
meta.key = null;
});
test('uses itself as the default value', function () {
expect(meta.value).to.be.equal(meta);
});
test('can be assigned alternative values', function () {
meta.value = 'foobar';
expect(meta.list[0]).to.be.equal('foobar');
});
test('can access same-type meta values by key', function () {
expect(meta.byKey(meta.key)).to.be.equal(meta.value);
});
test('yields a list of same-type meta data', function () {
expect(meta.list).to.be.ok;
expect(meta.list.length).to.be.equal(1);
expect(meta.list[0]).to.be.equal(meta);
});
});
suite('many same-typed metas', function () {
var metas;
setup(function () {
metas = fixture('ManyMetas');
});
teardown(function () {
metas.forEach(function (meta) {
meta.key = null;
});
});
test('all cache all meta values', function () {
metas.forEach(function (meta, index) {
expect(meta.list.length).to.be.equal(metas.length);
expect(meta.list[index].value).to.be.equal(meta.value);
});
});
test('can be unregistered individually', function () {
metas[0].key = null;
expect(metas[0].list.length).to.be.equal(2);
expect(metas[0].list).to.be.deep.equal([metas[1], metas[2]])
});
test('can access each others value by key', function () {
expect(metas[0].byKey('default2')).to.be.equal(metas[1].value);
});
});
suite('different-typed metas', function () {
var metas;
setup(function () {
metas = fixture('DifferentTypedMetas');
});
teardown(function () {
metas.forEach(function (meta) {
meta.key = null;
});
});
test('cache their values separately', function () {
var fooMeta = metas[0];
var barMeta = metas[1];
expect(fooMeta.value).to.not.be.equal(barMeta.value);
expect(fooMeta.byKey('foobarKey')).to.be.equal(fooMeta.value);
expect(barMeta.byKey('foobarKey')).to.be.equal(barMeta.value);
});
test('cannot access values of other types', function () {
var defaultMeta = metas[2];
expect(defaultMeta.byKey('foobarKey')).to.be.equal(undefined);
});
test('only list values of their type', function () {
metas.forEach(function (meta) {
expect(meta.list.length).to.be.equal(1);
expect(meta.list[0]).to.be.equal(meta.value);
})
});
});
suite('metas with clashing keys', function () {
var metaPair;
setup(function () {
metaPair = fixture('ClashingMetas');
});
teardown(function () {
metaPair.forEach(function (meta) {
meta.key = null;
});
});
test('let the last value win registration against the key', function () {
var registeredValue = metaPair[0].byKey(metaPair[0].key);
var firstValue = metaPair[0].value;
var secondValue = metaPair[1].value;
expect(registeredValue).to.not.be.equal(firstValue);
expect(registeredValue).to.be.equal(secondValue);
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,47 @@
{
"name": "iron-overlay-behavior",
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
"main": [
"iron-overlay-behavior.html"
],
"keywords": [
"web-components",
"polymer",
"behavior",
"overlay"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-overlay-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-fit-behavior": "PolymerElements/iron-fit-behavior#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-overlay-behavior",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "e84965cddda459c9e4a24e8d442c56ba4d5823eb"
},
"_source": "git://github.com/PolymerElements/iron-overlay-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-overlay-behavior"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,37 @@
{
"name": "iron-overlay-behavior",
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
"main": [
"iron-overlay-behavior.html"
],
"keywords": [
"web-components",
"polymer",
"behavior",
"overlay"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-overlay-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-fit-behavior": "PolymerElements/iron-fit-behavior#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,149 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>simple-overlay demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
<!-- <link rel="import" href="../core-transition/core-transition-css.html"> -->
<link rel="import" href="simple-overlay.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style>
.with-margin {
margin: 24px 40px;
}
.full-height {
height: 100%;
}
.scrollable {
overflow: auto;
}
</style>
</head>
<body onclick="clickHandler(event);">
<div class="vertical-section centered">
<button data-dialog="plain">plain</button>
<simple-overlay id="plain">
Hello world!
</simple-overlay>
<button data-dialog="scrolling">scrolling</button>
<simple-overlay id="scrolling" class="with-margin scrollable">
<p>This dialog scrolls internally.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</simple-overlay>
<button data-dialog="scrolling-2">scrolling 2</button>
<simple-overlay id="scrolling-2" class="with-margin full-height layout vertical">
<p>This dialog has a scrolling child.</p>
<div class="flex scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</simple-overlay>
<button data-dialog="multiple">multiple</button>
<simple-overlay id="multiple">
<p>click to open another overlay</p>
<p><button data-dialog="multiple2">click</button></p>
</simple-overlay>
<simple-overlay id="multiple2">
Hi!
</simple-overlay>
<button data-dialog="backdrop">backdrop</button>
<simple-overlay id="backdrop" with-backdrop>
Hello world!
</simple-overlay>
<button data-dialog="autofocus">autofocus</button>
<simple-overlay id="autofocus">
<p>Hello world!</p>
<button>cancel</button>
<button autofocus>autofocus</button>
</simple-overlay>
</div>
<script>
function clickHandler(e) {
if (!e.target.hasAttribute('data-dialog')) {
return;
}
var id = e.target.getAttribute('data-dialog');
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
}
}
</script>
</body>
</html>

View File

@ -0,0 +1,50 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-overlay-behavior.html">
<dom-module id="simple-overlay">
<style>
:host {
background: white;
color: black;
padding: 24px;
box-shadow: rgba(0, 0, 0, 0.24) -2.3408942051048403px 5.524510324047423px 12.090680100755666px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'simple-overlay',
behaviors: [
Polymer.IronOverlayBehavior
]
});
})();
</script>

View File

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-overlay-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

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