Added Polymer

This commit is contained in:
Thaum
2014-11-26 10:18:35 +00:00
parent 5eea4714b2
commit 3408ba9e8d
1210 changed files with 394645 additions and 47 deletions

View File

@@ -0,0 +1,30 @@
{
"name": "core-dropdown-menu",
"private": false,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
"core-collapse": "Polymer/core-collapse#^0.5.0",
"core-dropdown": "Polymer/core-dropdown#^0.5.0",
"core-focusable": "Polymer/core-focusable#^0.5.0",
"core-icon": "Polymer/core-icon#^0.5.0",
"core-icons": "Polymer/core-icons#^0.5.0",
"core-icon-button": "Polymer/core-icon-button#^0.5.0",
"core-item": "Polymer/core-item#^0.5.0",
"core-menu": "Polymer/core-menu#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/core-dropdown-menu",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "102bf311f68912b566cd603d6a849c5b03c89509"
},
"_source": "git://github.com/Polymer/core-dropdown-menu.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/core-dropdown-menu"
}

View File

@@ -0,0 +1,6 @@
core-dropdown-menu
==================
owner: @morethanreal
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-dropdown-menu) for more information.

View File

@@ -0,0 +1,20 @@
{
"name": "core-dropdown-menu",
"private": false,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
"core-collapse": "Polymer/core-collapse#^0.5.0",
"core-dropdown": "Polymer/core-dropdown#^0.5.0",
"core-focusable": "Polymer/core-focusable#^0.5.0",
"core-icon": "Polymer/core-icon#^0.5.0",
"core-icons": "Polymer/core-icons#^0.5.0",
"core-icon-button": "Polymer/core-icon-button#^0.5.0",
"core-item": "Polymer/core-item#^0.5.0",
"core-menu": "Polymer/core-menu#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,141 @@
<!--
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
-->
<!--
`core-dropdown-menu` works together with `core-dropdown` and `core-selector` to
implement a drop-down menu. The currently selected item is displayed in the
control. If no item is selected, the `label` is displayed instead.
The child element with the class `dropdown` will be used as the drop-down
menu. It should be a `core-dropdown` or other overlay element. You should
also provide a `core-selector` or other selector element, such as `core-menu`,
in the drop-down.
Example:
<core-dropdown-menu label="Choose a pastry">
<core-dropdown class="dropdown">
<core-selector>
<core-item label="Croissant"></core-item>
<core-item label="Donut"></core-item>
<core-item label="Financier"></core-item>
<core-item label="Madeleine"></core-item>
</core-selector>
</core-dropdown>
</core-dropdown-menu>
@group Polymer Core Elements
@element core-dropdown-menu
@extends core-dropdown-base
@status unstable
@homepage github.io
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
<link href="../core-dropdown/core-dropdown-base.html" rel="import">
<link href="../core-focusable/core-focusable.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<polymer-element name="core-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0">
<template>
<style>
:host {
background-color: #fff;
}
:host([disabled]) {
color: #a8a8a8;
}
#label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
<div flex auto id="label">{{selectedItemLabel || label}}</div>
<core-icon id="arrow" icon="{{opened ? openedIcon : closedIcon}}"></core-icon>
<content></content>
</template>
<script>
(function() {
var p = {
publish: {
/**
* A label for the control. The label is displayed if no item is selected.
*
* @attribute label
* @type string
* @default 'Select an item'
*/
label: 'Select an item',
/**
* The icon to display when the drop-down is opened.
*
* @attribute openedIcon
* @type string
* @default 'arrow-drop-up'
*/
openedIcon: 'arrow-drop-up',
/**
* The icon to display when the drop-down is closed.
*
* @attribute closedIcon
* @type string
* @default 'arrow-drop-down'
*/
closedIcon: 'arrow-drop-down'
},
selectedItemLabel: '',
overlayListeners: {
'core-overlay-open': 'openAction',
'core-activate': 'activateAction',
'core-select': 'selectAction'
},
activateAction: function(e) {
this.opened = false;
},
selectAction: function(e) {
var detail = e.detail;
if (detail.isSelected) {
this.selectedItemLabel = detail.item.label || detail.item.textContent;
} else {
this.selectedItemLabel = '';
}
}
};
Polymer.mixin2(p, Polymer.CoreFocusable);
Polymer(p);
})();
</script>
</polymer-element>

View File

@@ -0,0 +1,191 @@
<!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.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.0, user-scalable=yes">
<title>core-dropdown-menu</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link href="../core-collapse/core-collapse.html" rel="import">
<link href="../core-dropdown/core-dropdown.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link href="../core-icon-button/core-icon-button.html" rel="import">
<link href="../core-item/core-item.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="core-dropdown-menu.html" rel="import">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
font-size: 14px;
margin: 0;
padding: 24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
html /deep/ core-dropdown-menu {
box-sizing: border-box;
width: 170px;
}
html /deep/ core-dropdown {
box-sizing: border-box;
min-width: 170px;
background-color: #eee;
color: #000;
border: 1px solid #ccc;
border-radius: 3px;
}
core-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html /deep/ core-collapse {
border: 1px solid #ccc;
padding: 8px;
}
.constrained-height {
height: 150px;
}
.colored {
border: 1px solid #0f9d58;
background-color: #b7e1cd;
color: #0f9d58;
}
</style>
</head>
<body>
<template is="auto-binding">
<section>
<div>Absolutely positioned dropdowns</div>
<core-dropdown-menu label="Your favorite pastry">
<core-dropdown class="dropdown">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-dropdown-menu>
<br><br>
<core-dropdown-menu label="Disabled" disabled>
<core-dropdown class="dropdown">
<core-menu>
<core-item>Should not see this</core-item>
</core-menu>
</core-dropdown>
</core-dropdown-menu>
</section>
<section>
<div>Layered dropdowns</div>
<button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
<br>
<core-collapse id="collapse">
<core-dropdown-menu label="Your favorite pastry">
<core-dropdown layered class="dropdown">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-dropdown-menu>
</core-collapse>
</section>
<section>
<div>Custom styling</div>
<core-dropdown-menu label="Constrained height">
<core-dropdown class="dropdown constrained-height">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-dropdown-menu>
<br><br>
<core-dropdown-menu label="Colored">
<core-dropdown class="dropdown colored">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-dropdown-menu>
</section>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.pastries = [
'Apple fritter',
'Croissant',
'Donut',
'Financier',
'Jello',
'Madeleine',
'Pound cake',
'Pretzel',
'Sfogliatelle'
];
</script>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!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>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,78 @@
<!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.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>paper-dropdown-menu basic tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link href="../../core-dropdown/core-dropdown.html" rel="import">
<link href="../../core-item/core-item.html" rel="import">
<link href="../../core-menu/core-menu.html" rel="import">
<link href="../core-dropdown-menu.html" rel="import">
<style>
core-collapse {
border: 1px solid black;
}
</style>
</head>
<body>
<core-dropdown-menu id="dropdown1" label="Your favorite dessert">
<core-dropdown class="dropdown">
<core-menu id="menu1">
<core-item>Cupcake</core-item>
<core-item>Donut</core-item>
<core-item>Eclair</core-item>
<core-item>Froyo</core-item>
<core-item>Gingerbread</core-item>
<core-item>Honeycomb</core-item>
<core-item>Ice cream sandwich</core-item>
<core-item>Jellybean</core-item>
<core-item>Kit Kat</core-item>
<core-item>Lollipop</core-item>
</core-menu>
</core-dropdown>
</core-dropdown-menu>
<script>
function flushLayoutAndRender(callback) {
flush(function() {
document.body.offsetTop;
requestAnimationFrame(function() {
callback();
});
});
}
var d1 = document.getElementById('dropdown1');
var m1 = document.getElementById('menu1');
test('aria-disabled is set', function(done) {
assert.ok(!d1.hasAttribute('aria-disabled'));
d1.setAttribute('disabled', '');
flush(function() {
assert.ok(d1.hasAttribute('aria-disabled'));
d1.removeAttribute('disabled');
done();
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,106 @@
<!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.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>core-dropdown-menu basic tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link href="../../core-dropdown/core-dropdown.html" rel="import">
<link href="../../core-item/core-item.html" rel="import">
<link href="../../core-menu/core-menu.html" rel="import">
<link href="../core-dropdown-menu.html" rel="import">
<style>
core-collapse {
border: 1px solid black;
}
</style>
</head>
<body>
<core-dropdown-menu id="dropdown1" label="Your favorite dessert">
<core-dropdown class="dropdown">
<core-menu id="menu1">
<core-item foo="c">Cupcake</core-item>
<core-item foo="d">Donut</core-item>
<core-item foo="e">Eclair</core-item>
<core-item foo="f">Froyo</core-item>
<core-item foo="g">Gingerbread</core-item>
<core-item foo="h">Honeycomb</core-item>
<core-item foo="i">Ice cream sandwich</core-item>
<core-item foo="j">Jellybean</core-item>
<core-item foo="k">Kit Kat</core-item>
<core-item foo="l">Lollipop</core-item>
</core-menu>
</core-dropdown>
</core-dropdown-menu>
<script>
function flushLayoutAndRender(callback) {
flush(function() {
document.body.offsetTop;
requestAnimationFrame(function() {
callback();
});
});
}
var d1 = document.getElementById('dropdown1');
var m1 = document.getElementById('menu1');
test('shows the label when nothing selected', function(done) {
m1.selected = null;
flushLayoutAndRender(function() {
assert.strictEqual(d1.$.label.textContent, d1.label);
done();
});
});
test('shows the selected item', function(done) {
m1.selected = 2;
flushLayoutAndRender(function() {
assert.strictEqual(d1.$.label.textContent, m1.selectedItem.textContent);
done();
});
});
test('can clear the selected item', function(done) {
m1.selected = 2;
flushLayoutAndRender(function() {
assert.strictEqual(d1.$.label.textContent, m1.selectedItem.textContent);
m1.selected = null;
flushLayoutAndRender(function() {
assert.strictEqual(d1.$.label.textContent, d1.label);
done();
});
});
});
test('use the valueattr attribute', function(done) {
m1.valueattr = "foo";
m1.selected = "l";
flushLayoutAndRender(function() {
assert.strictEqual(d1.$.label.textContent, m1.selectedItem.textContent);
done();
});
});
</script>
</body>
</html>

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.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>core-dropdown-menu tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
'a11y.html'
]);
</script>
</body>
</html>