added tests with paper-slider

This commit is contained in:
DadaMonad
2015-01-03 03:44:50 +00:00
parent e73829f73b
commit 17a752c93e
158 changed files with 9702 additions and 7 deletions

View File

@@ -0,0 +1,25 @@
{
"name": "paper-button",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-focusable": "Polymer/core-focusable#^0.5.0",
"core-icon": "Polymer/core-icon#^0.5.0",
"paper-ripple": "Polymer/paper-ripple#^0.5.0",
"paper-shadow": "Polymer/paper-shadow#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.2",
"homepage": "https://github.com/Polymer/paper-button",
"_release": "0.5.2",
"_resolution": {
"type": "version",
"tag": "0.5.2",
"commit": "8fc1b68fcf590bc867434ad0683b2971ecd5fe53"
},
"_source": "git://github.com/Polymer/paper-button.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/paper-button"
}

View File

@@ -0,0 +1,4 @@
paper-button
===================
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-button) for more information.

View File

@@ -0,0 +1,15 @@
{
"name": "paper-button",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-focusable": "Polymer/core-focusable#^0.5.0",
"core-icon": "Polymer/core-icon#^0.5.0",
"paper-ripple": "Polymer/paper-ripple#^0.5.0",
"paper-shadow": "Polymer/paper-shadow#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.2"
}

135
bower_components/paper-button/demo.html vendored Normal file
View File

@@ -0,0 +1,135 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<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>paper-button</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link href="../font-roboto/roboto.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link href="paper-button.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;
}
paper-button.colored {
color: #4285f4;
}
paper-button[raised].colored {
background: #4285f4;
color: #fff;
}
paper-button.custom > core-icon {
margin-right: 4px;
}
paper-button.hover:hover {
background: #eee;
}
paper-button.blue-ripple::shadow #ripple {
color: #4285f4;
}
</style>
</head>
<body unresolved onclick="clickAction(event);">
<section>
<div>Flat buttons</div>
<paper-button>button</paper-button>
<paper-button class="colored">colored</paper-button>
<paper-button disabled>disabled</paper-button>
<paper-button noink>noink</paper-button>
</section>
<br>
<section>
<div>Raised buttons</div>
<paper-button raised>button</paper-button>
<paper-button raised class="colored">colored</paper-button>
<paper-button raised disabled>disabled</paper-button>
<paper-button raised noink>noink</paper-button>
</section>
<section>
<div>Custom button content</div>
<paper-button class="colored custom">
<core-icon icon="check"></core-icon>
ok
</paper-button>
<paper-button class="custom">
<core-icon icon="clear"></core-icon>
cancel
</paper-button>
<br>
<paper-button>
<a href="https://www.polymer-project.org" target="_blank">link</a>
</paper-button>
</section>
<section>
<div>Styling options</div>
<paper-button class="hover">hover</paper-button>
<paper-button class="blue-ripple">custom ripple</paper-button>
</section>
<script>
function clickAction(e) {
var t = e.target;
if (t.localName === 'paper-button') {
if (t.hasAttribute('disabled')) {
console.error('should not be able to click disabled button', t);
} else {
console.log('click', t);
}
}
}
</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 sources='["paper-button.html","paper-button-base.html"]'></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,17 @@
<!--
@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
-->
<x-meta id="paper-button" label="Button" group="Paper" isContainer>
<template>
<paper-button>button</paper-button>
</template>
<template id="imports">
<link rel="import" href="paper-button.html">
</template>
</x-meta>

View File

@@ -0,0 +1,121 @@
<!--
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
-->
<!--
@group Paper Elements
`paper-button-base` is the base class for button-like elements with ripple and optional shadow.
@element paper-button-base
@mixins Polymer.CoreFocusable
@status unstable
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-focusable/core-focusable.html" rel="import">
<link href="../paper-ripple/paper-ripple.html" rel="import">
<polymer-element name="paper-button-base" tabindex="0">
<script>
(function() {
var p = {
eventDelegates: {
down: 'downAction'
},
activeChanged: function() {
this.super();
if (this.$.ripple) {
if (this.active) {
// FIXME: remove when paper-ripple can have a default 'down' state.
if (!this.lastEvent) {
var rect = this.getBoundingClientRect();
this.lastEvent = {
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2
}
}
this.$.ripple.downAction(this.lastEvent);
} else {
this.$.ripple.upAction();
}
}
this.adjustZ();
},
disabledChanged: function() {
this._disabledChanged();
this.adjustZ();
},
recenteringTouchChanged: function() {
if (this.$.ripple) {
this.$.ripple.classList.toggle('recenteringTouch', this.recenteringTouch);
}
},
fillChanged: function() {
if (this.$.ripple) {
this.$.ripple.classList.toggle('fill', this.fill);
}
},
adjustZ: function() {
if (!this.$.shadow) {
return;
}
if (this.active) {
this.$.shadow.setZ(2);
} else if (this.disabled) {
this.$.shadow.setZ(0);
} else {
this.$.shadow.setZ(1);
}
},
downAction: function(e) {
this._downAction();
if (this.hasAttribute('noink')) {
return;
}
this.lastEvent = e;
if (!this.$.ripple) {
var ripple = document.createElement('paper-ripple');
ripple.setAttribute('id', 'ripple');
ripple.setAttribute('fit', '');
if (this.recenteringTouch) {
ripple.classList.add('recenteringTouch');
}
if (!this.fill) {
ripple.classList.add('circle');
}
this.$.ripple = ripple;
this.shadowRoot.insertBefore(ripple, this.shadowRoot.firstChild);
// No need to forward the event to the ripple because the ripple
// is triggered in activeChanged
}
}
};
Polymer.mixin2(p, Polymer.CoreFocusable);
Polymer(p);
})();
</script>
</polymer-element>

View File

@@ -0,0 +1,178 @@
<!--
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
-->
<!--
@group Paper Elements
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
`paper-button` is a button. When the user touches the button, a ripple effect emanates
from the point of contact. It may be flat or raised. A raised button is styled with a
shadow.
Example:
<paper-button>flat button</paper-button>
<paper-button raised>raised button</paper-button>
<paper-button noink>No ripple effect</paper-button>
You may use custom DOM in the button body to create a variety of buttons. For example, to
create a button with an icon and some text:
<paper-button>
<core-icon icon="favorite"></core-icon>
custom button content
</paper-button>
Styling
-------
Style the button with CSS as you would a normal DOM element.
/* make #my-button green with yellow text */
#my-button {
background: green;
color: yellow;
}
By default, the ripple is the same color as the foreground at 25% opacity. You may
customize the color using this selector:
/* make #my-button use a blue ripple instead of foreground color */
#my-button::shadow #ripple {
color: blue;
}
The opacity of the ripple is not customizable via CSS.
@element paper-button
@extends paper-button-base
@status unstable
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">
<link href="paper-button-base.html" rel="import">
<polymer-element name="paper-button" extends="paper-button-base" attributes="raised recenteringTouch fill"
role="button">
<template>
<style>
:host {
display: inline-block;
position: relative;
box-sizing: border-box;
min-width: 5.14em;
margin: 0 0.29em;
background: transparent;
text-align: center;
font: inherit;
text-transform: uppercase;
outline: none;
border-radius: 3px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
}
:host([disabled]) {
background: #eaeaea;
color: #a8a8a8;
cursor: auto;
pointer-events: none;
}
::content * {
text-transform: inherit;
}
#shadow {
border-radius: inherit;
}
#ripple {
pointer-events: none;
z-index: -1;
}
.button-content {
padding: 0.7em 0.57em
}
polyfill-next-selector { content: '.button-content > a'; }
::content > a {
height: 100%;
padding: 0.7em 0.57em;
/* flex */
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
}
</style>
<template if="{{raised}}">
<paper-shadow id="shadow" fit animated></paper-shadow>
</template>
<!-- this div is needed to position the ripple behind text content -->
<div class="button-content" relative layout horizontal center-center>
<content></content>
</div>
</template>
<script>
Polymer({
publish: {
/**
* If true, the button will be styled with a shadow.
*
* @attribute raised
* @type boolean
* @default false
*/
raised: false,
/**
* By default the ripple emanates from where the user touched the button.
* Set this to true to always center the ripple.
*
* @attribute recenteringTouch
* @type boolean
* @default false
*/
recenteringTouch: false,
/**
* By default the ripple expands to fill the button. Set this to true to
* constrain the ripple to a circle within the button.
*
* @attribute fill
* @type boolean
* @default true
*/
fill: true
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,46 @@
<!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-button a11y 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="../paper-button.html" rel="import">
</head>
<body>
<paper-button id="button1" disabled>button</paper-button>
<script>
var b1 = document.getElementById('button1');
test('aria role is a button', function() {
assert.strictEqual('button', b1.getAttribute('role'));
});
test('aria-disabled is set', function(done) {
assert.ok(b1.hasAttribute('aria-disabled'));
b1.removeAttribute('disabled');
asyncPlatformFlush(function() {
assert.ok(!b1.hasAttribute('aria-disabled'));
done();
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!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-button 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="../paper-button.html" rel="import">
</head>
<body>
<paper-button id="button1">button</paper-button>
<script>
var b1 = document.getElementById('button1');
test('can set raised imperatively', function(done) {
assert.ok(!b1.shadowRoot.querySelector('paper-shadow'));
b1.raised = true;
flush(function() {
var shadow = b1.shadowRoot.querySelector('paper-shadow');
assert.ok(shadow);
assert.notEqual(getComputedStyle(shadow.$['shadow-top'])['box-shadow'], 'none');
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>paper-button tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
'a11y.html'
]);
</script>
</body>
</html>