add new slider

This commit is contained in:
Luke Pulverenti 2015-06-26 23:27:38 -04:00
parent e33e5875cf
commit 09d4af3357
133 changed files with 9418 additions and 256 deletions

View File

@ -558,7 +558,7 @@
self.logout = function () {
console.log('begin connectionManager loguot');
Logger.log('begin connectionManager loguot');
var promises = [];
for (var i = 0, length = apiClients.length; i < length; i++) {

View File

@ -16,7 +16,7 @@
var json = appStorage.getItem(key) || '{}';
console.log('credentials initialized with: ' + json);
Logger.log('credentials initialized with: ' + json);
credentials = JSON.parse(json);
credentials.Servers = credentials.Servers || credentials.servers || [];

View File

@ -0,0 +1,48 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.2",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input",
"textarea"
],
"main": [
"iron-autogrow-textarea.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-autogrow-textarea.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-autogrow-textarea",
"ignore": [],
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"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",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "1697690de3010aa7b4d3557e7f3fa582e82dee6a"
},
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-autogrow-textarea"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,39 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.2",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input",
"textarea"
],
"main": [
"iron-autogrow-textarea.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-autogrow-textarea.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-autogrow-textarea",
"ignore": [],
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"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",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,81 @@
<!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-autogrow-textarea demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-autogrow-textarea.html">
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
</head>
<style>
iron-autogrow-textarea {
width: 200px;
}
</style>
<body>
<div class="vertical-section-container centered">
<h4>Updating the value imperatively</h4>
<template is="dom-bind">
<div class="vertical-section">
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
<br><br>
<code>bind-value</code>: <span>[[bindValue]]</span>
<p on-click="setValue">
set <code>bind-value</code> to: <br>
<textarea></textarea>
<button value="bindValue">set</button>
<br><br>
set <code>textarea.value</code> to: <br>
<textarea></textarea>
<button value="value">set</button>
</p>
</div>
</template>
<h4>Custom</h4>
<div class="vertical-section">
<p>Scrolls after 4 rows:</p>
<iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
<p>Initial height of 4 rows</p>
<iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
</div>
</div>
<script>
var scope = document.querySelector('template[is=dom-bind]');
scope.setValue = function(event) {
if (!(event.target instanceof HTMLButtonElement)) {
return;
}
var inputValue = event.target.previousElementSibling.value;
if (event.target.value == "bindValue") {
document.querySelector('iron-autogrow-textarea').bindValue = inputValue;
} else {
document.querySelector('iron-autogrow-textarea').textarea.value = inputValue;
}
}
</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">
<path d="M140,47c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
c1.3,1.9,2.5,3.6,4.5,3.6V47z"/>
<path d="M140,65c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
c1.3,1.9,2.5,3.6,4.5,3.6V65z"/>
<path d="M140,83c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
c1.3,1.9,2.5,3.6,4.5,3.6V83z"/>
<g id="ic_x5F_add_x0D_">
</g>
<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

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-autogrow-textarea</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,266 @@
<!--
@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-behaviors/iron-control-state.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<!--
`iron-autogrow-textarea` is an element containing a textarea that grows in height as more
lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
never scroll.
Example:
<iron-autogrow-textarea id="a1">
<textarea id="t1"></textarea>
</iron-autogrow-textarea>
Because the `textarea`'s `value` property is not observable, you should use
this element's `bind-value` instead for imperative updates.
@group Iron Elements
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="iron-autogrow-textarea">
<style>
:host {
display: inline-block;
position: relative;
width: 400px;
border: 1px solid;
padding: 2px;
-moz-appearance: textarea;
-webkit-appearance: textarea;
}
.mirror-text {
visibility: hidden;
word-wrap: break-word;
}
textarea {
position: relative;
outline: none;
border: none;
resize: none;
background: inherit;
/* see comments in template */
width: 100%;
height: 100%;
font-size: inherit;
font-family: inherit;
}
::content textarea:invalid {
box-shadow: none;
}
</style>
<template>
<!-- the mirror sizes the input/textarea so it grows with typing -->
<div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
<!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
<div class="textarea-container fit">
<textarea id="textarea"
autocomplete$="[[autocomplete]]"
autofocus$="[[autofocus]]"
inputmode$="[[inputmode]]"
name$="[[name]]"
placeholder$="[[placeholder]]"
readonly$="[[readonly]]"
required$="[[required]]"
rows$="[[rows]]"
maxlength$="[[maxlength]]"></textarea>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'iron-autogrow-textarea',
behaviors: [
Polymer.IronValidatableBehavior,
Polymer.IronControlState
],
properties: {
/**
* Use this property instead of `value` for two-way data binding.
*/
bindValue: {
observer: '_bindValueChanged',
type: String
},
/**
* The initial number of rows.
*
* @attribute rows
* @type number
* @default 1
*/
rows: {
type: Number,
value: 1,
observer: '_updateCached'
},
/**
* The maximum number of rows this element can grow to until it
* scrolls. 0 means no maximum.
*
* @attribute maxRows
* @type number
* @default 0
*/
maxRows: {
type: Number,
value: 0,
observer: '_updateCached'
},
/**
* Bound to the textarea's `autocomplete` attribute.
*/
autocomplete: {
type: String,
value: 'off'
},
/**
* Bound to the textarea's `autofocus` attribute.
*/
autofocus: {
type: String,
value: 'off'
},
/**
* Bound to the textarea's `inputmode` attribute.
*/
inputmode: {
type: String
},
/**
* Bound to the textarea's `name` attribute.
*/
name: {
type: String
},
/**
* Bound to the textarea's `placeholder` attribute.
*/
placeholder: {
type: String
},
/**
* Bound to the textarea's `readonly` attribute.
*/
readonly: {
type: String
},
/**
* Set to true to mark the textarea as required.
*/
required: {
type: Boolean
},
/**
* The maximum length of the input value.
*/
maxlength: {
type: Number
}
},
listeners: {
'input': '_onInput'
},
/**
* Returns the underlying textarea.
*/
get textarea() {
return this.$.textarea;
},
_update: function() {
this.$.mirror.innerHTML = this._valueForMirror();
var textarea = this.textarea;
// If the value of the textarea was updated imperatively, then we
// need to manually update bindValue as well.
if (textarea && this.bindValue != textarea.value) {
this.bindValue = textarea.value;
}
},
_bindValueChanged: function() {
var textarea = this.textarea;
if (!textarea) {
return;
}
textarea.value = this.bindValue;
this._update();
// manually notify because we don't want to notify until after setting value
this.fire('bind-value-changed', {value: this.bindValue});
},
_onInput: function(event) {
this.bindValue = event.path ? event.path[0].value : event.target.value;
this._update();
},
_constrain: function(tokens) {
var _tokens;
tokens = tokens || [''];
// Enforce the min and max heights for a multiline input to avoid measurement
if (this.maxRows > 0 && tokens.length > this.maxRows) {
_tokens = tokens.slice(0, this.maxRows);
} else {
_tokens = tokens.slice(0);
}
while (this.rows > 0 && _tokens.length < this.rows) {
_tokens.push('');
}
return _tokens.join('<br>') + '&nbsp;';
},
_valueForMirror: function() {
var input = this.textarea;
if (!input) {
return;
}
this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
return this._constrain(this.tokens);
},
_updateCached: function() {
this.$.mirror.innerHTML = this._constrain(this.tokens);
}
})
</script>

View File

@ -0,0 +1,126 @@
<!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-autogrow-textarea tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-autogrow-textarea.html">
</head>
<body>
<test-fixture id="basic">
<template>
<iron-autogrow-textarea></iron-autogrow-textarea>
</template>
</test-fixture>
<test-fixture id="has-bindValue">
<template>
<iron-autogrow-textarea bind-value="foobar"></iron-autogrow-textarea>
</template>
</test-fixture>
<test-fixture id="rows">
<template>
<iron-autogrow-textarea rows="3"></iron-autogrow-textarea>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('setting bindValue sets textarea value', function() {
var autogrow = fixture('basic');
var textarea = autogrow.textarea;
autogrow.bindValue = 'batman';
assert.equal(textarea.value, autogrow.bindValue, 'textarea value equals to bindValue');
});
test('can set an initial bindValue', function() {
var autogrow = fixture('has-bindValue');
assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
});
test('can set an initial number of rows', function() {
var autogrow = fixture("rows");
assert.equal(autogrow.textarea.rows, 3, 'textarea has rows=3');
});
test('adding rows grows the textarea', function() {
var autogrow = fixture('basic');
var initialHeight = autogrow.offsetHeight;
autogrow.bindValue = 'batman\nand\nrobin';
var finalHeight = autogrow.offsetHeight
assert.isTrue(finalHeight > initialHeight);
});
test('removing rows shrinks the textarea', function() {
var autogrow = fixture('basic');
autogrow.bindValue = 'batman\nand\nrobin';
var initialHeight = autogrow.offsetHeight;
autogrow.bindValue = 'batman';
var finalHeight = autogrow.offsetHeight
assert.isTrue(finalHeight < initialHeight);
});
});
suite('focus/blur events', function() {
var input;
setup(function() {
input = fixture('basic');
});
test('focus/blur events fired on host element', function(done) {
var nFocusEvents = 0;
var nBlurEvents = 0;
input.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(input.textarea);
});
});
input.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(input.textarea);
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!doctype html>
<!--
@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
-->
<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-autogrow-textarea tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
]);
</script>
</body>
</html>

View File

@ -0,0 +1,37 @@
{
"name": "iron-form-element-behavior",
"version": "1.0.1",
"license": "http://polymer.github.io/LICENSE.txt",
"private": true,
"main": "iron-form-element-behavior",
"authors": "The Polymer Authors",
"description": "Enables a custom element to be included in an iron-form",
"keywords": [
"web-components",
"polymer",
"form"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-form-element-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-form-element-behavior",
"_release": "1.0.1",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "f386143e866c320025589f3d79798c12103377a4"
},
"_source": "git://github.com/PolymerElements/iron-form-element-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-form-element-behavior"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,27 @@
{
"name": "iron-form-element-behavior",
"version": "1.0.1",
"license": "http://polymer.github.io/LICENSE.txt",
"private": true,
"main": "iron-form-element-behavior",
"authors": "The Polymer Authors",
"description": "Enables a custom element to be included in an iron-form",
"keywords": [
"web-components",
"polymer",
"form"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-form-element-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,53 @@
<!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-form-element-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-form.html">
<link rel="import" href="simple-element.html">
</head>
<body>
<form is="simple-form" id="form">
Element the form is tracking: <input is="simple-element" type="text" name="one" value="one">
<br>
Element the form isn't tracking: <input type="text" name="two" value="two">
<br>
Another one the form is tracking: <input is="simple-element" type="text" name="three" value="three">
</form>
<h4>Elements tracked by the form: </h4>
<ul id="output">
</ul>
</body>
<script>
var output = document.getElementById('output');
var elements = document.getElementById('form').formElements;
for (var i = 0; i < elements.length; i++) {
var li = document.createElement('li');
var text = document.createTextNode(elements[i].value);
li.appendChild(text);
output.appendChild(li);
}
</script>
</html>

View File

@ -0,0 +1,27 @@
<!--
@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-form-element-behavior.html">
<script>
Polymer({
is: 'simple-element',
extends: 'input',
behaviors: [
Polymer.IronFormElementBehavior
]
});
</script>

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">
<script>
Polymer({
is: 'simple-form',
extends: 'form',
properties: {
formElements: {
type: Object,
notify: true
}
},
listeners: {
'iron-form-element-register': '_elementRegistered'
},
ready: function() {
this.formElements = [];
},
_elementRegistered: function(e) {
this.formElements.push(e.target);
this.fire('element-registered');
}
});
</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-form-element-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,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">
<!--
Enables a custom element to be included in an `iron-form`.
-->
<script>
/**
@demo demo/index.html
@polymerBehavior
*/
Polymer.IronFormElementBehavior = {
properties: {
/**
* The name of this element.
*/
name: {
type: String
},
/**
* The value for this element.
*/
value: {
notify: true,
type: String
},
},
attached: function() {
this.fire('iron-form-element-register');
}
};
</script>

View File

@ -0,0 +1,45 @@
{
"name": "iron-input",
"version": "1.0.3",
"description": "An input element with data binding",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input"
],
"main": [
"iron-input.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-input.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-input",
"ignore": [],
"dependencies": {
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^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-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "edb505f41d67120cb505deedb92aa69e90078d2f"
},
"_source": "git://github.com/PolymerElements/iron-input.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-input"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,36 @@
{
"name": "iron-input",
"version": "1.0.3",
"description": "An input element with data binding",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input"
],
"main": [
"iron-input.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-input.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-input",
"ignore": [],
"dependencies": {
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^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-validator-behavior": "PolymerElements/iron-validator-behavior#^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,87 @@
<!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-input demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-input.html">
<link href="../../paper-styles/paper-styles.html" rel="import">
<link href="../../paper-styles/demo-pages.html" rel="import">
<style is="custom-style">
.vertical-section {
@apply(--paper-font-body1);
line-height: 40px;
}
code {
color: var(--google-grey-700);
}
input[is=iron-input] {
width: 100%;
box-sizing: border-box;
}
input, button {
font-size: 20px;
padding: 0.2em;
}
</style>
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<template is="dom-bind">
<p>
<input is="iron-input" bind-value="{{bindValue}}" value="{{value::input}}">
<br>
bind to <code>bind-value</code>: <b>[[bindValue]]</b>
<br>
bind to <code>value::input</code>: <b>{{value}}</b>
</p>
<p on-click="setValue">
set bind-value to: <input> <button is="paper-button" value="bindValue">set</button>
<br>
set value to: <input> <button value="value">set</button>
</p>
</template>
<p>only allows these characters:
<code>!@#0123456789</code></p>
<input is="iron-input" allowed-pattern="[!@#0-9]" prevent-invalid-input>
</div>
<script>
var scope = document.querySelector('template[is=dom-bind]');
scope.setValue = function(event) {
if (!(event.target instanceof HTMLButtonElement)) {
return;
}
document.querySelector('input[is=iron-input]')[event.target.value] = event.target.previousElementSibling.value;
}
</script>
</body>
</html>

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">
<rect x="49" y="53" width="2" height="18"/>
<path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 733 B

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-input</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,237 @@
<!--
@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-validatable-behavior/iron-validatable-behavior.html">
<script>
/*
`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
to `<input>`.
### Two-way binding
By default you can only get notified of changes to an `input`'s `value` due to user input:
<input value="{{myValue::input}}">
`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
<input is="iron-input" bind-value="{{myValue}}">
### Custom validators
You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
<input is="iron-input" validator="my-custom-validator">
### Stopping invalid input
It may be desirable to only allow users to enter certain characters. You can use the
`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
is separate from validation, and `allowed-pattern` does not affect how the input is validated.
<!-- only allow characters that match [0-9] -->
<input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
@hero hero.svg
@demo demo/index.html
*/
Polymer({
is: 'iron-input',
extends: 'input',
behaviors: [
Polymer.IronValidatableBehavior
],
properties: {
/**
* Use this property instead of `value` for two-way data binding.
*/
bindValue: {
observer: '_bindValueChanged',
type: String
},
/**
* Set to true to prevent the user from entering invalid input. The new input characters are
* matched with `allowedPattern` if it is set, otherwise it will use the `pattern` attribute if
* set, or the `type` attribute (only supported for `type=number`).
*/
preventInvalidInput: {
type: Boolean
},
/**
* Regular expression to match valid input characters.
*/
allowedPattern: {
type: String
},
_previousValidInput: {
type: String,
value: ''
},
_patternAlreadyChecked: {
type: Boolean,
value: false
}
},
listeners: {
'input': '_onInput',
'keypress': '_onKeypress'
},
get _patternRegExp() {
var pattern;
if (this.allowedPattern) {
pattern = new RegExp(this.allowedPattern);
} else if (this.pattern) {
pattern = new RegExp(this.pattern);
} else {
switch (this.type) {
case 'number':
pattern = /[0-9.,e-]/;
break;
}
}
return pattern;
},
ready: function() {
this.bindValue = this.value;
},
_bindValueChanged: function() {
if (this.value !== this.bindValue) {
this.value = !this.bindValue ? '' : this.bindValue;
}
// manually notify because we don't want to notify until after setting value
this.fire('bind-value-changed', {value: this.bindValue});
},
_onInput: function() {
// Need to validate each of the characters pasted if they haven't
// been validated inside `_onKeypress` already.
if (this.preventInvalidInput && !this._patternAlreadyChecked) {
var valid = this._checkPatternValidity();
if (!valid) {
this.value = this._previousValidInput;
}
}
this.bindValue = this.value;
this._previousValidInput = this.value;
this._patternAlreadyChecked = false;
},
_isPrintable: function(event) {
// What a control/printable character is varies wildly based on the browser.
// - most control characters (arrows, backspace) do not send a `keypress` event
// in Chrome, but the *do* on Firefox
// - in Firefox, when they do send a `keypress` event, control chars have
// a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
// - printable characters always send a keypress event.
// - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
// always matches the charCode.
// None of this makes any sense.
var nonPrintable =
(event.keyCode == 8) || // backspace
(event.keyCode == 19) || // pause
(event.keyCode == 20) || // caps lock
(event.keyCode == 27) || // escape
(event.keyCode == 45) || // insert
(event.keyCode == 46) || // delete
(event.keyCode == 144) || // num lock
(event.keyCode == 145) || // scroll lock
(event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, home, arrows
(event.keyCode > 111 && event.keyCode < 124); // fn keys
return !(event.charCode == 0 && nonPrintable);
},
_onKeypress: function(event) {
if (!this.preventInvalidInput && this.type !== 'number') {
return;
}
var regexp = this._patternRegExp;
if (!regexp) {
return;
}
// Handle special keys and backspace
if (event.metaKey || event.ctrlKey || event.altKey)
return;
// Check the pattern either here or in `_onInput`, but not in both.
this._patternAlreadyChecked = true;
var thisChar = String.fromCharCode(event.charCode);
if (this._isPrintable(event) && !regexp.test(thisChar)) {
event.preventDefault();
}
},
_checkPatternValidity: function() {
var regexp = this._patternRegExp;
if (!regexp) {
return true;
}
for (var i = 0; i < this.value.length; i++) {
if (!regexp.test(this.value[i])) {
return false;
}
}
return true;
},
/**
* Returns true if `value` is valid. The validator provided in `validator` will be used first,
* then any constraints.
* @return {boolean} True if the value is valid.
*/
validate: function() {
// Empty, non-required input is valid.
if (!this.required && this.value == '') {
this.invalid = false;
return true;
}
var valid;
if (this.hasValidator()) {
valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
} else {
this.invalid = !this.validity.valid;
valid = this.validity.valid;
}
this.fire('iron-input-validate');
return valid;
}
});
/*
The `iron-input-validate` event is fired whenever `validate()` is called.
@event iron-input-validate
*/
</script>

View File

@ -0,0 +1,24 @@
<!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>iron-input ests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-input.html',
]);
</script>
</body>
</html>

View File

@ -0,0 +1,139 @@
<!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-input tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-input.html">
<link rel="import" href="letters-only.html">
</head>
<body>
<test-fixture id="basic">
<template>
<input is="iron-input">
</template>
</test-fixture>
<test-fixture id="has-value">
<template>
<input is="iron-input" value="foobar">
</template>
</test-fixture>
<test-fixture id="has-bind-value">
<template>
<input is="iron-input" bind-value="foobar">
</template>
</test-fixture>
<test-fixture id="prevent-invalid-input">
<template>
<input is="iron-input" prevent-invalid-input pattern="[0-9]">
</template>
</test-fixture>
<test-fixture id="prevent-invalid-input-has-value">
<template>
<input is="iron-input" prevent-invalid-input pattern="[0-9]*" value="foobar">
</template>
</test-fixture>
<test-fixture id="prevent-invalid-input-has-bind-value">
<template>
<input is="iron-input" prevent-invalid-input pattern="[0-9]*" bind-value="foobar">
</template>
</test-fixture>
<test-fixture id="has-validator">
<template>
<letters-only></letters-only>
<input is="iron-input" validator="letters-only" pattern="[0-9]*">
</template>
</test-fixture>
<template is="dom-bind" id="bind-to-object">
<input is="iron-input" id="input" bind-value="{{foo}}">
</template>
<script>
suite('basic', function() {
test('setting bindValue sets value', function() {
var input = fixture('basic');
input.bindValue = 'foobar';
assert.equal(input.value, input.bindValue, 'value equals to bindValue');
});
test('changing the input triggers an event', function(done) {
var input = fixture('basic');
input.addEventListener('bind-value-changed', function(value) {
assert.equal(input.value, input.bindValue, 'value equals to bindValue');
done();
});
input.value = "foo";
input._onInput();
});
test('default value sets bindValue', function() {
var input = fixture('has-value');
assert.equal(input.bindValue, input.value, 'bindValue equals value');
});
test('default bindValue sets value', function() {
var input = fixture('has-bind-value');
assert.equal(input.value, input.bindValue, 'value equals to bindValue');
});
test('set bindValue to undefined', function() {
var scope = document.getElementById('bind-to-object');
scope.foo = undefined;
assert.ok(!scope.$.input.bindValue, 'bindValue is falsy');
assert.ok(!scope.$.input.value, 'value is falsy');
});
test('validator used instead of constraints api if provided', function() {
var input = fixture('has-validator')[1];
input.value = '123';
input.validate();
assert.isTrue(input.invalid, 'input is invalid');
});
test('prevent invalid input works in _onInput', function() {
var input = fixture('prevent-invalid-input');
input.value = '123';
input._onInput();
assert.equal(input.bindValue, '123');
input.value = '123foo';
input._onInput();
assert.equal(input.bindValue, '123');
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!--
@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-validator-behavior/iron-validator-behavior.html">
<script>
Polymer({
is: 'letters-only',
behaviors: [
Polymer.IronValidatorBehavior
],
validate: function(value) {
return !value || value.match(/^[a-zA-Z]*$/) !== null;
}
});
</script>

View File

@ -0,0 +1,40 @@
{
"name": "iron-range-behavior",
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for something with a minimum and maximum value",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior"
],
"main": [
"iron-range-behavior.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-range-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-input": "PolymerElements/iron-input#^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-range-behavior",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "a743ac0b204a8e76466c2dba349ab2180c9f15f5"
},
"_source": "git://github.com/PolymerElements/iron-range-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-range-behavior"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,30 @@
{
"name": "iron-range-behavior",
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for something with a minimum and maximum value",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior"
],
"main": [
"iron-range-behavior.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-range-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-input": "PolymerElements/iron-input#^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,79 @@
<!--
@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
-->
<!doctype html>
<html>
<head>
<title>iron-range-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-range-behavior.html">
<link rel="import" href="../../iron-input/iron-input.html">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body unresolved>
<dom-module id="x-progressbar">
<style>
:host {
display: block;
height: 40px;
background-color: #555;
border-radius: 4px;
padding: 8px;
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.progress {
background-color: #999;
height: 100%;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.progress-value {
padding: 0 8px;
font-size: 18px;
color: #fff;
}
</style>
<template>
<div class="progress" horizontal center layout style$="{{_computeStyle(ratio)}}">
<div class="progress-value"><span>{{ratio}}</span>%</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-progressbar',
behaviors: [Polymer.IronRangeBehavior],
_computeStyle: function(ratio) {
return 'width: ' + ratio + '%;';
}
});
});
</script>
<x-progressbar min="0" max="200" value="120"></x-progressbar>
</body>
</html>

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">
<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,109 @@
<!--
@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>
/**
* `iron-range-behavior` provides the behavior for something with a minimum to maximum range.
*
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronRangeBehavior = {
properties: {
/**
* The number that represents the current value.
*/
value: {
type: Number,
value: 0,
notify: true,
reflectToAttribute: true
},
/**
* The number that indicates the minimum value of the range.
*/
min: {
type: Number,
value: 0,
notify: true
},
/**
* The number that indicates the maximum value of the range.
*/
max: {
type: Number,
value: 100,
notify: true
},
/**
* Specifies the value granularity of the range's value.
*/
step: {
type: Number,
value: 1,
notify: true
},
/**
* Returns the ratio of the value.
*/
ratio: {
type: Number,
value: 0,
readOnly: true,
notify: true
},
},
observers: [
'_update(value, min, max, step)'
],
_calcRatio: function(value) {
return (this._clampValue(value) - this.min) / (this.max - this.min);
},
_clampValue: function(value) {
return Math.min(this.max, Math.max(this.min, this._calcStep(value)));
},
_calcStep: function(value) {
/**
* if we calculate the step using
* `Math.round(value / step) * step` we may hit a precision point issue
* eg. 0.1 * 0.2 = 0.020000000000000004
* http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
*
* as a work around we can divide by the reciprocal of `step`
*/
return this.step ? (Math.round(value / this.step) / (1 / this.step)) : value;
},
_validateValue: function() {
var v = this._clampValue(this.value);
this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
return this.value !== v;
},
_update: function() {
this._validateValue();
this._setRatio(this._calcRatio(this.value) * 100);
}
};
</script>

View File

@ -0,0 +1,111 @@
<!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-range-behavior</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="x-progressbar.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="trivialRange">
<template>
<x-progressbar></x-progressbar>
</template>
</test-fixture>
<script>
suite('<x-progressbar>', function() {
var range;
setup(function() {
range = fixture('trivialRange');
});
test('check default', function() {
assert.equal(range.min, 0);
assert.equal(range.max, 100);
assert.equal(range.value, 0);
});
test('set value', function(done) {
range.value = 50;
asyncPlatformFlush(function() {
assert.equal(range.value, 50);
// test clamp value
range.value = 60.1;
asyncPlatformFlush(function() {
assert.equal(range.value, 60);
done();
});
});
});
test('set max', function(done) {
range.max = 10;
range.value = 11;
asyncPlatformFlush(function() {
assert.equal(range.value, range.max);
done();
});
});
test('test ratio', function(done) {
range.max = 10;
range.value = 5;
asyncPlatformFlush(function() {
assert.equal(range.ratio, 50);
done();
});
});
test('set min', function(done) {
range.min = 10
range.max = 50;
range.value = 30;
asyncPlatformFlush(function() {
assert.equal(range.ratio, 50);
range.value = 0;
asyncPlatformFlush(function() {
assert.equal(range.value, range.min);
done();
});
});
});
test('set step', function(done) {
range.min = 0;
range.max = 10;
range.value = 5.1;
asyncPlatformFlush(function() {
assert.equal(range.value, 5);
range.step = 0.1;
range.value = 5.1;
asyncPlatformFlush(function() {
assert.equal(range.value, 5.1);
done();
});
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!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>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,18 @@
<!--
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-range-behavior.html">
<script>
Polymer({
is: 'x-progressbar',
behaviors: [Polymer.IronRangeBehavior]
});
</script>

View File

@ -0,0 +1,44 @@
{
"name": "iron-validatable-behavior",
"version": "1.0.2",
"description": "Provides a behavior for an element that validates user input",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"iron",
"behavior"
],
"main": [
"iron-validatable-behavior.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-validatable-behavior.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-validatable-behavior",
"ignore": [],
"dependencies": {
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
"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",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "1.0.2",
"commit": "a4fc340fdb268e274f312dadedd0633b025ac3a4"
},
"_source": "git://github.com/PolymerElements/iron-validatable-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-validatable-behavior"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,35 @@
{
"name": "iron-validatable-behavior",
"version": "1.0.2",
"description": "Provides a behavior for an element that validates user input",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"iron",
"behavior"
],
"main": [
"iron-validatable-behavior.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-validatable-behavior.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-validatable-behavior",
"ignore": [],
"dependencies": {
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
"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",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^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 @@
<!--
@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-validator-behavior/iron-validator-behavior.html">
<script>
Polymer({
is: 'cats-only',
behaviors: [
Polymer.IronValidatorBehavior
],
validateObject: function(obj) {
var valid = true;
for (key in obj) {
if (obj[key] !== 'cats') {
valid = false;
break;
}
}
return valid;
},
validate: function(values) {
if (typeof values === 'object') {
return this.validateObject(values);
} else {
var value = Array.isArray(values) ? values.join('') : values;
return value.match(/^(c|ca|cat|cats)?$/) !== null;
}
}
});
</script>

View File

@ -0,0 +1,71 @@
<!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-validatable-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="cats-only.html">
<link rel="import" href="validatable-input.html">
<style is="custom-style">
.valid {
color: var(--google-green-500);
}
.invalid {
color: var(--google-red-500);
}
</style>
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<h1>&lt;iron-validatable-behavior&gt;</h1>
<template is="dom-bind">
<cats-only></cats-only>
<section>
<p>
only type <code>cats</code>:
<input is="validatable-input" invalid="{{invalid}}" validator="cats-only">
<span class="valid" hidden$="[[invalid]]">valid</span>
<span class="invalid" hidden$="[[!invalid]]">invalid</span>
</p>
</section>
</template>
</div>
<script>
document.querySelector('template[is="dom-bind"]').invalid = false;
</script>
</body>
</html>

View File

@ -0,0 +1,46 @@
<!--
@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-validatable-behavior.html">
<script>
Polymer({
is: 'validatable-input',
extends: 'input',
properties: {
invalid: {
notify: true,
type: Boolean,
value: false
}
},
behaviors: [
Polymer.IronValidatableBehavior
],
listeners: {
'input': '_onInput'
},
_onInput: function(event) {
this.invalid = !this.validate(event.target.value);
}
});
</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-validatable-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,101 @@
<!--
@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-meta/iron-meta.html">
<script>
/**
* Use `Polymer.IronValidatableBehavior` to implement an element that validates user input.
*
* ### Accessiblity
*
* Changing the `invalid` property, either manually or by calling `validate()` will update the
* `aria-invalid` attribute.
*
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronValidatableBehavior = {
properties: {
/**
* Namespace for this validator.
*/
validatorType: {
type: String,
value: 'validator'
},
/**
* Name of the validator to use.
*/
validator: {
type: String
},
/**
* True if the last call to `validate` is invalid.
*/
invalid: {
notify: true,
reflectToAttribute: true,
type: Boolean,
value: false
},
_validatorMeta: {
type: Object
}
},
observers: [
'_invalidChanged(invalid)'
],
get _validator() {
return this._validatorMeta && this._validatorMeta.byKey(this.validator);
},
ready: function() {
this._validatorMeta = new Polymer.IronMeta({type: this.validatorType});
},
_invalidChanged: function() {
if (this.invalid) {
this.setAttribute('aria-invalid', 'true');
} else {
this.removeAttribute('aria-invalid');
}
},
/**
* @return {boolean} True if the validator `validator` exists.
*/
hasValidator: function() {
return this._validator != null;
},
/**
* @param {Object} values Passed to the validator's `validate()` function.
* @return {boolean} True if `values` is valid.
*/
validate: function(values) {
var valid = this._validator && this._validator.validate(values);
this.invalid = !valid;
return valid;
}
};
</script>

View File

@ -0,0 +1,35 @@
<!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>paper-validatable-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>
/* no tests */
WCT.loadSuites([
'iron-validatable-behavior.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,52 @@
<!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-validatable-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-lite.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-validatable.html">
</head>
<body>
<test-fixture id="basic">
<template>
<test-validatable></test-validatable>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('setting `invalid` sets `aria-invalid=true`', function() {
var node = fixture('basic');
node.invalid = true;
assert.equal(node.getAttribute('aria-invalid'), 'true', 'aria-invalid is set');
node.invalid = false;
assert.isFalse(node.hasAttribute('aria-invalid'), 'aria-invalid is unset');
});
});
</script>
</body>

View File

@ -0,0 +1,28 @@
<!--
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-validatable-behavior.html">
<dom-module id="test-validatable">
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'test-validatable',
behaviors: [
Polymer.IronValidatableBehavior
]
});
</script>

View File

@ -0,0 +1,54 @@
{
"name": "paper-input",
"version": "1.0.5",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input"
],
"main": [
"paper-input.html",
"paper-textarea.html",
"paper-input-behavior.html",
"paper-input-container.html",
"paper-input-error.html",
"paper-input-char-counter.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-input.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-input",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
"iron-input": "PolymerElements/iron-input#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "72821a081710d9d5443e7b2311ff561def260807"
},
"_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-input"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,12 @@
<!--
@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="paper-input.html">
<link rel="import" href="paper-textarea.html">

View File

@ -0,0 +1,45 @@
{
"name": "paper-input",
"version": "1.0.5",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input"
],
"main": [
"paper-input.html",
"paper-textarea.html",
"paper-input-behavior.html",
"paper-input-container.html",
"paper-input-error.html",
"paper-input-char-counter.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-input.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-input",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
"iron-input": "PolymerElements/iron-input#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^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,96 @@
<!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>paper-input demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../paper-input.html">
<link rel="import" href="../paper-input-container.html">
<link rel="import" href="../paper-input-error.html">
<link rel="import" href="../paper-input-char-counter.html">
<link rel="import" href="../paper-textarea.html">
<link rel="import" href="../../iron-input/iron-input.html">
<link rel="import" href="ssn-input.html">
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style>
body {
padding: 40px;
}
</style>
</head>
<body unresolved>
<div class="vertical center-justified layout">
<h4>Text input</h4>
<div class="vertical-section">
<paper-input label="label"></paper-input>
<paper-input label="password" type="password"></paper-input>
<paper-input no-label-float label="label (no-label-float)"></paper-input>
<paper-input label="disabled" disabled></paper-input>
</div>
<h4>Text area</h4>
<div class="vertical-section">
<paper-textarea label="textarea label"></paper-textarea>
</div>
<h4>Validation</h4>
<div class="vertical-section">
<paper-input label="only type letters (auto-validate)" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
<paper-input id="inputForValidation" required label="only type letters (no auto validate)" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
<br>
<button onclick="validate()">Validate!</button>
</div>
<h4>Character counter</h4>
<div class="vertical-section">
<paper-input label="label" char-counter></paper-input>
<paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]*" maxlength="10" error-message="letters only!"></paper-input>
<paper-textarea label="textarea" char-counter></paper-textarea>
<paper-textarea label="textarea with maxlength" char-counter maxlength="10"></paper-textarea>
</div>
<h4>Complex inputs</h4>
<div class="vertical-section">
<template is="dom-bind">
<paper-input-container always-float-label auto-validate attr-for-value="value">
<label>Social Security Number</label>
<ssn-input class="paper-input-input"></ssn-input>
<paper-input-error>SSN invalid!</paper-input-error>
</paper-input-container>
</template>
</div>
</div>
<script>
function validate() {
document.getElementById('inputForValidation').validate();
}
</script>
</body>
</html>

View File

@ -0,0 +1,94 @@
<!--
@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-input/iron-input.html">
<link rel="import" href="ssn-validator.html">
<dom-module id="ssn-input">
<style>
:host {
display: inline-block;
}
input[is="iron-input"] {
font: inherit;
outline: none;
box-shadow: none;
border: none;
width: auto;
text-align: center;
}
</style>
<template>
<ssn-validator></ssn-validator>
<input is="iron-input" maxlength="3" bind-value="{{_ssn1}}" size="3" aria-label="First 3 digits of social security number">
-
<input is="iron-input" maxlength="2" bind-value="{{_ssn2}}" size="2" aria-label="Middle 2 digits of social security number">
-
<input is="iron-input" maxlength="4" bind-value="{{_ssn3}}" size="4" aria-label="Last 4 digits of social security number">
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'ssn-input',
behaviors: [
Polymer.IronValidatableBehavior
],
properties: {
value: {
notify: true,
type: String
},
_ssn1: {
type: String
},
_ssn2: {
type: String
},
_ssn3: {
type: String
},
validator: {
type: String,
value: 'ssn-validator'
}
},
observers: [
'_computeValue(_ssn1,_ssn2,_ssn3)'
],
_computeValue: function(ssn1, ssn2, ssn3) {
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
}
})
})();
</script>

View File

@ -0,0 +1,31 @@
<!--
@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-validator-behavior/iron-validator-behavior.html">
<script>
Polymer({
is: 'ssn-validator',
behaviors: [
Polymer.IronValidatorBehavior
],
validate: function(value) {
// this regex validates incomplete ssn's (by design)
return !value || value.match(/^[0-9]{0,3}-[0-9]{0,2}-[0-9]{0,4}$/);
}
});
</script>

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">
<rect x="49" y="53" width="2" height="18"/>
<path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 733 B

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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>paper-input</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="all-imports.html"></iron-component-page>
</body>
</html>

View File

@ -0,0 +1,47 @@
<!--
@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>
/**
* Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-container>`. A
* add-on appears below the input, and may display information based on the input value and
* validity such as a character counter or an error message.
* @polymerBehavior
*/
Polymer.PaperInputAddonBehavior = {
hostAttributes: {
'add-on': ''
},
attached: function() {
this.fire('addon-attached');
},
/**
* The function called by `<paper-input-container>` when the input value or validity changes.
* @param {{
* inputElement: (Node|undefined),
* value: (string|undefined),
* invalid: (boolean|undefined)
* }} state All properties are optional -
* inputElement: The input element.
* value: The input value.
* invalid: True if the input value is invalid.
*/
update: function(state) {
}
};
</script>

View File

@ -0,0 +1,328 @@
<!--
@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-behaviors/iron-control-state.html">
<script>
/**
* Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
* behavior is implemented by `<paper-input>`. It exposes a number of properties from
* `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
* template.
*
* The input element can be accessed by the `inputElement` property if you need to access
* properties or methods that are not exposed.
* @polymerBehavior Polymer.PaperInputBehavior
*/
Polymer.PaperInputBehaviorImpl = {
properties: {
/**
* The label for this input. Bind this to `<paper-input-container>`'s `label` property.
*/
label: {
type: String
},
/**
* The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
* property, or the value property of your input that is `notify:true`.
*/
value: {
notify: true,
type: String
},
/**
* Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
* and the input's `disabled` property.
*/
disabled: {
type: Boolean,
value: false
},
/**
* Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
* and the input's `invalid` property.
*/
invalid: {
type: Boolean,
value: false
},
/**
* Set to true to prevent the user from entering invalid input. Bind this to the
* `<input is="iron-input">`'s `preventInvalidInput` property.
*/
preventInvalidInput: {
type: Boolean
},
/**
* Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
* `<input is="iron-input">`'s `allowedPattern` property.
*/
allowedPattern: {
type: String
},
/**
* The type of the input. The supported types are `text`, `number` and `password`. Bind this
* to the `<input is="iron-input">`'s `type` property.
*/
type: {
type: String
},
/**
* The datalist of the input (if any). This should match the id of an existing <datalist>. Bind this
* to the `<input is="iron-input">`'s `list` property.
*/
list: {
type: String
},
/**
* A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
* `pattern` property.
*/
pattern: {
type: String
},
/**
* Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
* `required` property.
*/
required: {
type: Boolean,
value: false
},
/**
* The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
* `maxlength` property.
*/
maxlength: {
type: Number
},
/**
* The error message to display when the input is invalid. Bind this to the
* `<paper-input-error>`'s content, if using.
*/
errorMessage: {
type: String
},
/**
* Set to true to show a character counter.
*/
charCounter: {
type: Boolean,
value: false
},
/**
* Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
* `noLabelFloat` property.
*/
noLabelFloat: {
type: Boolean,
value: false
},
/**
* Set to true to always float the label. Bind this to the `<paper-input-container>`'s
* `alwaysFloatLabel` property.
*/
alwaysFloatLabel: {
type: Boolean,
value: false
},
/**
* Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
* `autoValidate` property.
*/
autoValidate: {
type: Boolean,
value: false
},
/**
* Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
* property.
*/
validator: {
type: String
},
// HTMLInputElement attributes for binding if needed
/**
* Bind this to the `<input is="iron-input">`'s `autocomplete` property.
*/
autocomplete: {
type: String,
value: 'off'
},
/**
* Bind this to the `<input is="iron-input">`'s `autofocus` property.
*/
autofocus: {
type: Boolean
},
/**
* Bind this to the `<input is="iron-input">`'s `inputmode` property.
*/
inputmode: {
type: String
},
/**
* Bind this to the `<input is="iron-input">`'s `minlength` property.
*/
minlength: {
type: Number
},
/**
* Bind this to the `<input is="iron-input">`'s `name` property.
*/
name: {
type: String
},
/**
* A placeholder string in addition to the label. If this is set, the label will always float.
*/
placeholder: {
type: String,
// need to set a default so _computeAlwaysFloatLabel is run
value: ''
},
/**
* Bind this to the `<input is="iron-input">`'s `readonly` property.
*/
readonly: {
type: Boolean,
value: false
},
/**
* Bind this to the `<input is="iron-input">`'s `size` property.
*/
size: {
type: Number
},
_ariaDescribedBy: {
type: String,
value: ''
}
},
listeners: {
'addon-attached': '_onAddonAttached'
},
/**
* Returns a reference to the input element.
*/
get inputElement() {
return this.$.input;
},
attached: function() {
this._updateAriaLabelledBy();
},
_appendStringWithSpace: function(str, more) {
if (str) {
str = str + ' ' + more;
} else {
str = more;
}
return str;
},
_onAddonAttached: function(event) {
var target = event.path ? event.path[0] : event.target;
if (target.id) {
this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
} else {
var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
target.id = id;
this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
}
},
/**
* Validates the input element and sets an error style if needed.
*/
validate: function() {
return this.inputElement.validate();
},
/**
* Restores the cursor to its original position after updating the value.
* @param {string} newValue The value that should be saved.
*/
updateValueAndPreserveCaret: function(newValue) {
// Not all elements might have selection, and even if they have the
// right properties, accessing them might throw an exception (like for
// <input type=number>)
try {
var start = this.inputElement.selectionStart;
this.value = newValue;
// The cursor automatically jumps to the end after re-setting the value,
// so restore it to its original position.
this.inputElement.selectionStart = start;
this.inputElement.selectionEnd = start;
} catch (e) {
// Just set the value and give up on the caret.
this.value = newValue;
}
},
_computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
return placeholder || alwaysFloatLabel;
},
_updateAriaLabelledBy: function() {
var label = Polymer.dom(this.root).querySelector('label');
if (!label) {
this._ariaLabelledBy = '';
return;
}
var labelledBy;
if (label.id) {
labelledBy = label.id;
} else {
labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
label.id = labelledBy;
}
this._ariaLabelledBy = labelledBy;
}
};
Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBehaviorImpl];
</script>

View File

@ -0,0 +1,95 @@
<!--
@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="paper-input-addon-behavior.html">
<!--
`<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`. It
shows the number of characters entered in the input and the max length if it is specified.
<paper-input-container>
<input is="iron-input" maxlength="20">
<paper-input-char-counter></paper-input-char-counter>
</paper-input-container>
### Styling
The following mixin is available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-char-counter` | Mixin applied to the element | `{}`
-->
<dom-module id="paper-input-char-counter">
<style>
:host {
display: inline-block;
float: right;
@apply(--paper-font-caption);
@apply(--paper-input-char-counter);
}
</style>
<template>
<span>[[_charCounterStr]]</span>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-input-char-counter',
behaviors: [
Polymer.PaperInputAddonBehavior
],
properties: {
_charCounterStr: {
type: String,
value: '0'
}
},
update: function(state) {
if (!state.inputElement) {
return;
}
state.value = state.value || '';
// Account for the textarea's new lines.
var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
if (state.inputElement.hasAttribute('maxlength')) {
str += '/' + state.inputElement.getAttribute('maxlength');
}
this._charCounterStr = str;
}
});
})();
</script>

View File

@ -0,0 +1,506 @@
<!--
@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">
<!--
`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or
`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character
counter, used to implement Material Design text fields.
For example:
<paper-input-container>
<label>Your name</label>
<input is="iron-input">
</paper-input-container>
### Listening for input changes
By default, it listens for changes on the `bind-value` attribute on its children nodes and perform
tasks such as auto-validating and label styling when the `bind-value` changes. You can configure
the attribute it listens to with the `attr-for-value` attribute.
### Using a custom input element
You can use a custom input element in a `<paper-input-container>`, for example to implement a
compound input field like a social security number input. The custom input element should have the
`paper-input-input` class, have a `notify:true` value property and optionally implements
`Polymer.IronValidatableBehavior` if it is validatble.
<paper-input-container attr-for-value="ssn-value">
<label>Social security number</label>
<ssn-input class="paper-input-input"></ssn-input>
</paper-input-container>
### Validation
If the `auto-validate` attribute is set, the input container will validate the input and update
the container styling when the input value changes.
### Add-ons
Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and
implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value
or validity changes, and may implement functionality such as error messages or character counters.
They appear at the bottom of the input.
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
`--paper-input-container-invalid-color` | Label and underline color when the input is focused | `--google-red-500`
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
`--paper-input-container` | Mixin applied to the container | `{}`
`--paper-input-container-label` | Mixin applied to the label | `{}`
`--paper-input-container-input` | Mixin applied to the input | `{}`
This element is `display:block` by default, but you can set the `inline` attribute to make it
`display:inline-block`.
-->
<dom-module id="paper-input-container">
<style>
:host {
display: block;
padding: 8px 0;
@apply(--paper-input-container);
}
:host[inline] {
display: inline-block;
}
:host([disabled]) {
pointer-events: none;
opacity: 0.33;
}
.floated-label-placeholder {
@apply(--paper-font-caption);
}
.underline {
position: relative;
}
.focused-line {
height: 2px;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
background: var(--paper-input-container-focus-color, --default-primary-color);
}
.underline.is-highlighted .focused-line {
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
@apply(--paper-transition-easing);
}
.underline.is-invalid .focused-line {
background: var(--paper-input-container-invalid-color, --google-red-500);
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
@apply(--paper-transition-easing);
}
.unfocused-line {
height: 1px;
background: var(--paper-input-container-color, --secondary-text-color);
}
:host([disabled]) .unfocused-line {
border-bottom: 1px dashed;
border-color: var(--paper-input-container-color, --secondary-text-color);
background: transparent;
}
.input-content {
position: relative;
}
.input-content ::content label,
.input-content ::content .paper-input-label {
position: absolute;
top: 0;
right: 0;
left: 0;
font: inherit;
color: var(--paper-input-container-color, --secondary-text-color);
@apply(--paper-font-subhead);
@apply(--paper-input-container-label);
}
.input-content.label-is-floating ::content label,
.input-content.label-is-floating ::content .paper-input-label {
-webkit-transform: translate3d(0, -75%, 0) scale(0.75);
transform: translate3d(0, -75%, 0) scale(0.75);
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
@apply(--paper-transition-easing);
}
.input-content.label-is-highlighted ::content label,
.input-content.label-is-highlighted ::content .paper-input-label {
color: var(--paper-input-container-focus-color, --default-primary-color);
}
.input-content.is-invalid ::content label,
.input-content.is-invalid ::content .paper-input-label {
color: var(--paper-input-container-invalid-color, --google-red-500);
}
.input-content.label-is-hidden ::content label,
.input-content.label-is-hidden ::content .paper-input-label {
visibility: hidden;
}
.input-content ::content input,
.input-content ::content textarea,
.input-content ::content iron-autogrow-textarea,
.input-content ::content .paper-input-input {
position: relative; /* to make a stacking context */
outline: none;
box-shadow: none;
padding: 0;
width: 100%;
background: transparent;
border: none;
color: var(--paper-input-container-input-color, --primary-text-color);
@apply(--paper-font-subhead);
@apply(--paper-input-container-input);
}
/* Firefox sets a min-width on the input, which can cause layout issues */
.input-content ::content input {
min-width: 0;
}
.input-content ::content textarea {
resize: none;
}
.add-on-content.is-invalid ::content * {
color: var(--paper-input-container-invalid-color, --google-red-500);
}
.add-on-content.is-highlighted ::content * {
color: var(--paper-input-container-focus-color, --default-primary-color);
}
</style>
<template>
<template is="dom-if" if="[[!noLabelFloat]]">
<div class="floated-label-placeholder">&nbsp;</div>
</template>
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
<content select=":not([add-on])"></content>
</div>
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
<div class="unfocused-line fit"></div>
<div class="focused-line fit"></div>
</div>
<div class$="[[_computeAddOnContentClass(focused,invalid)]]">
<content id="addOnContent" select="[add-on]"></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-input-container',
properties: {
/**
* Set to true to disable the floating label. The label disappears when the input value is
* not null.
*/
noLabelFloat: {
type: Boolean,
value: false
},
/**
* Set to true to always float the floating label.
*/
alwaysFloatLabel: {
type: Boolean,
value: false
},
/**
* The attribute to listen for value changes on.
*/
attrForValue: {
type: String,
value: 'bind-value'
},
/**
* Set to true to auto-validate the input value when it changes.
*/
autoValidate: {
type: Boolean,
value: false
},
/**
* True if the input is invalid. This property is set automatically when the input value
* changes if auto-validating, or when the `iron-input-valid` event is heard from a child.
*/
invalid: {
observer: '_invalidChanged',
type: Boolean,
value: false
},
/**
* True if the input has focus.
*/
focused: {
readOnly: true,
type: Boolean,
value: false
},
_addons: {
type: Array
// do not set a default value here intentionally - it will be initialized lazily when a
// distributed child is attached, which may occur before configuration for this element
// in polyfill.
},
_inputHasContent: {
type: Boolean,
value: false
},
_inputSelector: {
type: String,
value: 'input,textarea,.paper-input-input'
},
_boundOnFocus: {
type: Function,
value: function() {
return this._onFocus.bind(this);
}
},
_boundOnBlur: {
type: Function,
value: function() {
return this._onBlur.bind(this);
}
},
_boundOnInput: {
type: Function,
value: function() {
return this._onInput.bind(this);
}
},
_boundValueChanged: {
type: Function,
value: function() {
return this._onValueChanged.bind(this);
}
}
},
listeners: {
'addon-attached': '_onAddonAttached',
'iron-input-validate': '_onIronInputValidate'
},
get _valueChangedEvent() {
return this.attrForValue + '-changed';
},
get _propertyForValue() {
return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
},
get _inputElement() {
return Polymer.dom(this).querySelector(this._inputSelector);
},
ready: function() {
if (!this._addons) {
this._addons = [];
}
this.addEventListener('focus', this._boundOnFocus, true);
this.addEventListener('blur', this._boundOnBlur, true);
if (this.attrForValue) {
this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
} else {
this.addEventListener('input', this._onInput);
}
},
attached: function() {
this._handleValue(this._inputElement);
},
_onAddonAttached: function(event) {
if (!this._addons) {
this._addons = [];
}
var target = event.target;
if (this._addons.indexOf(target) === -1) {
this._addons.push(target);
if (this.isAttached) {
this._handleValue(this._inputElement);
}
}
},
_onFocus: function() {
this._setFocused(true);
},
_onBlur: function() {
this._setFocused(false);
},
_onInput: function(event) {
this._handleValue(event.target);
},
_onValueChanged: function(event) {
this._handleValue(event.target);
},
_handleValue: function(inputElement) {
var value = inputElement[this._propertyForValue] || inputElement.value;
if (this.autoValidate) {
var valid;
if (inputElement.validate) {
valid = inputElement.validate(value);
} else {
valid = inputElement.checkValidity();
}
this.invalid = !valid;
}
// type="number" hack needed because this.value is empty until it's valid
if (value || (inputElement.type === 'number' && !inputElement.checkValidity())) {
this._inputHasContent = true;
} else {
this._inputHasContent = false;
}
this.updateAddons({
inputElement: inputElement,
value: value,
invalid: this.invalid
});
},
_onIronInputValidate: function(event) {
this.invalid = this._inputElement.invalid;
},
_invalidChanged: function() {
if (this._addons) {
this.updateAddons({invalid: this.invalid});
}
},
/**
* Call this to update the state of add-ons.
* @param {Object} state Add-on state.
*/
updateAddons: function(state) {
for (var addon, index = 0; addon = this._addons[index]; index++) {
addon.update(state);
}
},
_computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
var cls = 'input-content';
if (!noLabelFloat) {
if (alwaysFloatLabel || _inputHasContent) {
cls += ' label-is-floating';
if (invalid) {
cls += ' is-invalid';
} else if (focused) {
cls += " label-is-highlighted";
}
}
} else {
if (_inputHasContent) {
cls += ' label-is-hidden';
}
}
return cls;
},
_computeUnderlineClass: function(focused, invalid) {
var cls = 'underline';
if (invalid) {
cls += ' is-invalid';
} else if (focused) {
cls += ' is-highlighted'
}
return cls;
},
_computeAddOnContentClass: function(focused, invalid) {
var cls = 'add-on-content';
if (invalid) {
cls += ' is-invalid';
} else if (focused) {
cls += ' is-highlighted'
}
return cls;
}
});
})();
</script>

View File

@ -0,0 +1,99 @@
<!--
@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="paper-input-addon-behavior.html">
<!--
`<paper-input-error>` is an error message for use with `<paper-input-container>`. The error is
displayed when the `<paper-input-container>` is `invalid`.
<paper-input-container>
<input is="iron-input" pattern="[0-9]*">
<paper-input-error>Only numbers are allowed!</paper-input-error>
</paper-input-container>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
`--paper-input-error` | Mixin applied to the error | `{}`
-->
<dom-module id="paper-input-error">
<style>
:host {
/* need to use display: none for role="alert" */
display: none;
float: left;
color: var(--paper-input-container-invalid-color, --google-red-500);
@apply(--paper-font-caption);
@apply(--paper-input-error);
}
:host([invalid]) {
display: inline-block;
};
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-input-error',
behaviors: [
Polymer.PaperInputAddonBehavior
],
hostAttributes: {
'role': 'alert'
},
properties: {
/**
* True if the error is showing.
*/
invalid: {
readOnly: true,
reflectToAttribute: true,
type: Boolean
}
},
update: function(state) {
this._setInvalid(state.invalid);
}
})
})();
</script>

View File

@ -0,0 +1,127 @@
<!--
@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-input/iron-input.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="paper-input-behavior.html">
<link rel="import" href="paper-input-container.html">
<link rel="import" href="paper-input-error.html">
<link rel="import" href="paper-input-char-counter.html">
<!--
`<paper-input>` is a single-line text field with Material Design styling.
<paper-input label="Input label"></paper-input>
It may include an optional error message or character counter.
<paper-input error-message="Invalid input!" label="Input label"></paper-input>
<paper-input char-counter label="Input label"></paper-input>
See `Polymer.PaperInputBehavior` for more API docs.
### Styling
See `Polymer.PaperInputContainer` for a list of custom properties used to
style this element.
@group Paper Elements
@element paper-input
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="paper-input">
<style>
:host {
display: block;
}
input::-webkit-input-placeholder {
color: var(--paper-input-container-color, --secondary-text-color);
}
input:-moz-placeholder {
color: var(--paper-input-container-color, --secondary-text-color);
}
input::-moz-placeholder {
color: var(--paper-input-container-color, --secondary-text-color);
}
input:-ms-input-placeholder {
color: var(--paper-input-container-color, --secondary-text-color);
}
</style>
<template>
<paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
<label hidden$="[[!label]]">[[label]]</label>
<input is="iron-input" id="input"
aria-labelledby$="[[_ariaLabelledBy]]"
aria-describedby$="[[_ariaDescribedBy]]"
disabled$="[[disabled]]"
bind-value="{{value}}"
invalid="{{invalid}}"
prevent-invalid-input="[[preventInvalidInput]]"
allowed-pattern="[[allowedPattern]]"
validator="[[validator]]"
type$="[[type]]"
pattern$="[[pattern]]"
maxlength$="[[maxlength]]"
required$="[[required]]"
autocomplete$="[[autocomplete]]"
autofocus$="[[autofocus]]"
inputmode$="[[inputmode]]"
minlength$="[[minlength]]"
name$="[[name]]"
placeholder$="[[placeholder]]"
readonly$="[[readonly]]"
list$="[[list]]"
size$="[[size]]">
<template is="dom-if" if="[[errorMessage]]">
<paper-input-error>[[errorMessage]]</paper-input-error>
</template>
<template is="dom-if" if="[[charCounter]]">
<paper-input-char-counter></paper-input-char-counter>
</template>
</paper-input-container>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-input',
behaviors: [
Polymer.PaperInputBehavior,
Polymer.IronControlState
]
})
})();
</script>

View File

@ -0,0 +1,106 @@
<!--
@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-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="paper-input-behavior.html">
<link rel="import" href="paper-input-container.html">
<link rel="import" href="paper-input-error.html">
<link rel="import" href="paper-input-char-counter.html">
<!--
`<paper-textarea>` is a multi-line text field with Material Design styling.
<paper-textarea label="Textarea label"></paper-textarea>
See `Polymer.PaperInputBehavior` for more API docs.
### Validation
Currently only `required` and `maxlength` validation is supported.
### Styling
See `Polymer.PaperInputContainer` for a list of custom properties used to
style this element.
-->
<dom-module id="paper-textarea">
<template>
<paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
<label hidden$="[[!label]]">[[label]]</label>
<iron-autogrow-textarea id="input" class="paper-input-input"
bind-value="{{value}}"
autocomplete$="[[autocomplete]]"
autofocus$="[[autofocus]]"
inputmode$="[[inputmode]]"
name$="[[name]]"
placeholder$="[[placeholder]]"
readonly$="[[readonly]]"
required$="[[required]]"
maxlength$="[[maxlength]]"></iron-autogrow-textarea>
<template is="dom-if" if="[[errorMessage]]">
<paper-input-error>[[errorMessage]]</paper-input-error>
</template>
<template is="dom-if" if="[[charCounter]]">
<paper-input-char-counter></paper-input-char-counter>
</template>
</paper-input-container>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-textarea',
behaviors: [
Polymer.PaperInputBehavior,
Polymer.IronFormElementBehavior
],
properties: {
_ariaLabelledBy: {
observer: '_ariaLabelledByChanged',
type: String
},
_ariaDescribedBy: {
observer: '_ariaDescribedByChanged',
type: String
}
},
_ariaLabelledByChanged: function(ariaLabelledBy) {
this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
},
_ariaDescribedByChanged: function(ariaDescribedBy) {
this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
}
});
})();
</script>

View File

@ -0,0 +1,28 @@
<!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-input tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'paper-input.html',
'paper-textarea.html',
'paper-input-container.html',
'paper-input-error.html',
'paper-input-char-counter.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!--
@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-validator-behavior/iron-validator-behavior.html">
<script>
Polymer({
is: 'letters-only',
behaviors: [
Polymer.IronValidatorBehavior
],
validate: function(value) {
return !value || value.match(/^[a-zA-Z]*$/) !== null;
}
});
</script>

View File

@ -0,0 +1,112 @@
<!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>paper-input-counter tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/test-helpers.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../iron-input/iron-input.html">
<link rel="import" href="../paper-input-container.html">
<link rel="import" href="../paper-input-char-counter.html">
<link rel="import" href="../paper-textarea.html">
</head>
<body>
<test-fixture id="counter">
<template>
<paper-input-container>
<label id="l">label</label>
<input id="i" value="foobar">
<paper-input-char-counter id="c"></paper-input-char-counter>
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="counter-with-max">
<template>
<paper-input-container>
<label id="l">label</label>
<input id="i" value="foobar" maxlength="10">
<paper-input-char-counter id="c"></paper-input-char-counter>
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="textarea">
<template>
<paper-textarea char-counter value="foobar"></paper-textarea>
</template>
</test-fixture>
<test-fixture id="textarea-with-max">
<template>
<paper-textarea char-counter value="foobar" maxlength="100"></paper-textarea>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('character counter shows the value length', function() {
var container = fixture('counter');
var input = Polymer.dom(container).querySelector('#i');
var counter = Polymer.dom(container).querySelector('#c');
assert.equal(counter._charCounterStr, input.value.length, 'character counter shows input value length');
});
test('character counter shows the value length with maxlength', function() {
var container = fixture('counter-with-max');
var input = Polymer.dom(container).querySelector('#i');
var counter = Polymer.dom(container).querySelector('#c');
assert.equal(counter._charCounterStr, input.value.length + '/' + input.maxLength, 'character counter shows input value length and maxLength');
});
test('character counter shows the value length with maxlength', function() {
var input = fixture('textarea-with-max');
forceXIfStamp(input);
var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter');
assert.ok(counter, 'paper-input-char-counter exists');
assert.equal(counter._charCounterStr, input.value.length + '/' + input.inputElement.textarea.getAttribute('maxlength'), 'character counter shows input value length and maxLength');
});
test('character counter counts new lines in textareas correctly', function() {
var input = fixture('textarea');
input.value = 'foo\nbar';
forceXIfStamp(input);
var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
assert.ok(counter, 'paper-input-char-counter exists');
// A new line counts as two characters.
assert.equal(counter._charCounterStr, input.value.length + 1, 'character counter shows the value length');
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,237 @@
<!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>paper-input-container tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../iron-input/iron-input.html">
<link rel="import" href="../paper-input-container.html">
<link rel="import" href="letters-only.html">
</head>
<body>
<test-fixture id="basic">
<template>
<paper-input-container>
<label id="l">label</label>
<input id="i">
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="has-value">
<template>
<paper-input-container>
<label id="l">label</label>
<input id="i" value="value">
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="no-float-has-value">
<template>
<paper-input-container no-label-float>
<label id="l">label</label>
<input id="i" value="value">
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="always-float">
<template>
<paper-input-container always-float-label>
<label id="l">label</label>
<input id="i" value="value">
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="auto-validate-numbers">
<template>
<paper-input-container auto-validate>
<label id="l">label</label>
<input is="iron-input" id="i" pattern="[0-9]*">
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="manual-validate-numbers">
<template>
<paper-input-container>
<label id="l">label</label>
<input is="iron-input" id="i" pattern="[0-9]*">
</paper-input-container>
</template>
</test-fixture>
<letters-only></letters-only>
<test-fixture id="auto-validate-validator">
<template>
<paper-input-container auto-validate>
<label id="l">label</label>
<input is="iron-input" id="i" pattern="[0-9]*" validator="letters-only">
</paper-input-container>
</template>
</test-fixture>
<test-fixture id="auto-validate-validator-has-invalid-value">
<template>
<paper-input-container auto-validate>
<label id="l">label</label>
<input is="iron-input" id="i" validator="letters-only" value="123123">
</paper-input-container>
</template>
</test-fixture>
<script>
function getTransform(node) {
var style = getComputedStyle(node);
return style.transform || style.webkitTransform;
}
suite('label position', function() {
test('label is visible by default', function() {
var container = fixture('basic');
assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible');
});
test('label is floated if value is initialized to not null', function() {
var container = fixture('has-value');
assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
});
test('label is invisible if no-label-float and value is initialized to not null', function() {
var container = fixture('no-float-has-value');
assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'hidden', 'label has visibility:hidden');
});
test('label is floated if always-float-label is true', function() {
var container = fixture('always-float');
assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
})
});
suite('focused styling', function() {
test('label is colored when input is focused and has value', function(done) {
var container = fixture('has-value');
var label = Polymer.dom(container).querySelector('#l');
var input = Polymer.dom(container).querySelector('#i');
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
input.focus();
// 'focus' event isn't firing on windows ff for some reason when you call focus()
container._onFocus();
requestAnimationFrame(function() {
assert.equal(document.activeElement, input, 'input is focused');
assert.isTrue(container.focused, 'focused is true');
assert.isTrue(inputContent.classList.contains('label-is-highlighted'), 'label is highlighted when input has focus');
done();
});
});
test('label is not colored when input is focused and has null value', function(done) {
var container = fixture('basic');
var label = Polymer.dom(container).querySelector('#l');
var input = Polymer.dom(container).querySelector('#i');
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
input.focus();
container._onFocus();
requestAnimationFrame(function() {
assert.isFalse(inputContent.classList.contains('label-is-highlighted'), 'label is not highlighted when input has focus and has null value');
done();
});
});
test('underline is colored when input is focused', function(done) {
var container = fixture('basic');
var input = Polymer.dom(container).querySelector('#i');
var line = Polymer.dom(container.root).querySelector('.underline');
assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused');
input.focus();
container._onFocus();
requestAnimationFrame(function() {
assert.equal(document.activeElement, input, 'input is focused');
assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused');
done();
});
});
});
suite('validation', function() {
test('styled when the input is set to an invalid value with auto-validate', function() {
var container = fixture('auto-validate-numbers');
var input = Polymer.dom(container).querySelector('#i');
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
var line = Polymer.dom(container.root).querySelector('.underline');
input.bindValue = 'foobar';
assert.isTrue(container.invalid, 'invalid is true');
assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
});
test('styled when the input is set to an invalid value with auto-validate, with validator', function() {
var container = fixture('auto-validate-validator');
var input = Polymer.dom(container).querySelector('#i');
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
var line = Polymer.dom(container.root).querySelector('.underline');
input.bindValue = '123123';
assert.isTrue(container.invalid, 'invalid is true');
assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
});
test('styled when the input is set initially to an invalid value with auto-validate, with validator', function() {
var container = fixture('auto-validate-validator-has-invalid-value');
assert.isTrue(container.invalid, 'invalid is true');
assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class');
});
test('styled when the input is set to an invalid value with manual validation', function() {
var container = fixture('manual-validate-numbers');
var input = Polymer.dom(container).querySelector('#i');
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
var line = Polymer.dom(container.root).querySelector('.underline');
input.bindValue = 'foobar';
input.validate();
assert.isTrue(container.invalid, 'invalid is true');
assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,70 @@
<!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>paper-input-error tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../iron-input/iron-input.html">
<link rel="import" href="../paper-input-container.html">
<link rel="import" href="../paper-input-error.html">
</head>
<body>
<paper-input-container id="container">
<input is="iron-input">
<paper-input-error>error</paper-input-error>
</paper-input-container>
<test-fixture id="auto-validate-numbers">
<template>
<paper-input-container auto-validate attr-for-value="bind-value">
<label id="l">label</label>
<input is="iron-input" id="i" pattern="[0-9]*">
<paper-input-error id="e">error</paper-input-error>
</paper-input-container>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('error message only appears when input is invalid', function() {
var container = fixture('auto-validate-numbers');
var input = Polymer.dom(container).querySelector('#i');
var error = Polymer.dom(container).querySelector('#e');
assert.equal(getComputedStyle(error).display, 'none', 'error is display:none');
input.bindValue = 'foobar';
assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
});
test('error message add on is registered', function() {
var container = document.getElementById('container');
assert.isTrue(container._addons && container._addons.length === 1, 'add on is registered');
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,244 @@
<!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>paper-input tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/test-helpers.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-input.html">
<link rel="import" href="letters-only.html">
</head>
<body>
<test-fixture id="basic">
<template>
<paper-input></paper-input>
</template>
</test-fixture>
<test-fixture id="label">
<template>
<paper-input label="foo"></paper-input>
</template>
</test-fixture>
<test-fixture id="error">
<template>
<paper-input auto-validate pattern="[0-9]*" value="foobar" error-message="error"></paper-input>
</template>
</test-fixture>
<test-fixture id="required">
<template>
<paper-input auto-validate required error-message="error"></paper-input>
</template>
</test-fixture>
<test-fixture id="required-no-auto-validate">
<template>
<paper-input required error-message="error"></paper-input>
</template>
</test-fixture>
<test-fixture id="required-char-counter">
<template>
<paper-input auto-validate char-counter required error-message="error"></paper-input>
</template>
</test-fixture>
<test-fixture id="char-counter">
<template>
<paper-input char-counter value="foobar"></paper-input>
</template>
</test-fixture>
<test-fixture id="always-float-label">
<template>
<paper-input always-float-label label="foo"></paper-input>
</template>
</test-fixture>
<test-fixture id="placeholder">
<template>
<paper-input label="foo" placeholder="bar"></paper-input>
</template>
</test-fixture>
<letters-only></letters-only>
<test-fixture id="validator">
<template>
<paper-input value="123123" validator="letters-only" auto-validate></paper-input>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('setting value sets the input value', function() {
var input = fixture('basic');
input.value = 'foobar';
assert.equal(input.inputElement.value, input.value, 'inputElement.value equals input.value');
});
test('placeholder does not overlap label', function() {
var input = fixture('placeholder');
assert.equal(input.inputElement.placeholder, input.placeholder, 'inputElement.placeholder equals input.placeholder');
assert.equal(input.noLabelFloat, false);
var floatingLabel = Polymer.dom(Polymer.dom(input.root).querySelector('paper-input-container').root).querySelector('.label-is-floating');
assert.ok(floatingLabel);
});
test('always-float-label attribute works without placeholder', function() {
var input = fixture('always-float-label');
var container = Polymer.dom(input.root).querySelector('paper-input-container');
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
});
test('error message is displayed', function() {
var input = fixture('error');
forceXIfStamp(input);
var error = Polymer.dom(input.root).querySelector('paper-input-error');
assert.ok(error, 'paper-input-error exists');
assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
});
test('empty required input shows error', function() {
var input = fixture('required');
forceXIfStamp(input);
var error = Polymer.dom(input.root).querySelector('paper-input-error');
assert.ok(error, 'paper-input-error exists');
assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
});
test('character counter is displayed', function() {
var input = fixture('char-counter');
forceXIfStamp(input);
var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
assert.ok(counter, 'paper-input-char-counter exists');
assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
});
test('validator is used', function() {
var input = fixture('validator');
assert.ok(input.inputElement.invalid, 'input is invalid');
});
test('caret position is preserved', function() {
var input = fixture('basic');
var ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]');
input.value = 'nananana';
ironInput.selectionStart = 2;
ironInput.selectionEnd = 2;
input.updateValueAndPreserveCaret('nanananabatman');
assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
});
});
suite('focus/blur events', function() {
var input;
setup(function() {
input = fixture('basic');
});
test('focus/blur events fired on host element', function(done) {
var nFocusEvents = 0;
var nBlurEvents = 0;
input.addEventListener('focus', function() {
nFocusEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nFocusEvents, 1, 'one focus event fired');
input.inputElement.blur();
});
});
input.addEventListener('blur', function() {
nBlurEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nBlurEvents, 1, 'one blur event fired');
done();
});
});
input.inputElement.focus();
});
});
suite('validation', function() {
test('invalid attribute updated after calling validate()', function() {
var input = fixture('required-no-auto-validate');
forceXIfStamp(input);
input.validate();
var error = Polymer.dom(input.root).querySelector('paper-input-error');
assert.ok(error, 'paper-input-error exists');
assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
assert.isTrue(input.invalid, 'invalid is true');
});
});
suite('a11y', function() {
test('has aria-labelledby', function() {
var input = fixture('label');
assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
});
test('has aria-describedby for error message', function() {
var input = fixture('required');
forceXIfStamp(input);
assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
});
test('has aria-describedby for character counter', function() {
var input = fixture('char-counter');
forceXIfStamp(input);
assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
});
test('has aria-describedby for character counter and error', function() {
var input = fixture('required-char-counter');
forceXIfStamp(input);
assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,200 @@
<!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>paper-textarea tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/test-helpers.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-textarea.html">
</head>
<body>
<test-fixture id="basic">
<template>
<paper-textarea></paper-textarea>
</template>
</test-fixture>
<test-fixture id="label">
<template>
<paper-textarea label="foo"></paper-textarea>
</template>
</test-fixture>
<test-fixture id="char-counter">
<template>
<paper-textarea char-counter></paper-textarea>
</template>
</test-fixture>
<test-fixture id="required">
<template>
<paper-textarea auto-validate required error-message="error"></paper-textarea>
</template>
</test-fixture>
<test-fixture id="required-char-counter">
<template>
<paper-textarea auto-validate char-counter required error-message="error"></paper-textarea>
</template>
</test-fixture>
<test-fixture id="always-float-label">
<template>
<paper-textarea always-float-label label="label"></paper-textarea>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('setting value sets the input value', function() {
var input = fixture('basic');
input.value = 'foobar';
assert.equal(input.inputElement.bindValue, input.value, 'inputElement value equals input.value');
});
test('empty required input shows error', function() {
var input = fixture('required');
forceXIfStamp(input);
var error = Polymer.dom(input.root).querySelector('paper-input-error');
assert.ok(error, 'paper-input-error exists');
assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
});
test('caret position is preserved', function() {
var input = fixture('basic');
var ironTextarea = Polymer.dom(input.root).querySelector('iron-autogrow-textarea');
input.value = 'nananana';
ironTextarea.selectionStart = 2;
ironTextarea.selectionEnd = 2;
input.updateValueAndPreserveCaret('nanananabatman');
assert.equal(ironTextarea.selectionStart, 2, 'selectionStart is preserved');
assert.equal(ironTextarea.selectionEnd, 2, 'selectionEnd is preserved');
});
test('input attributes are bound to textarea', function() {
var input = fixture('basic');
var attrs = {
'autocomplete': 'true',
'autofocus': true,
'inputmode': 'number',
'name': 'foo',
'placeholder': 'bar',
'readonly': true,
'required': true,
'maxlength': 3
};
for (var attr in attrs) {
input[attr] = attrs[attr];
}
for (var attr in attrs) {
var inputAttr = input.inputElement.getAttribute(attr);
if (typeof attrs[attr] === 'boolean') {
assert.equal(inputAttr !== null, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr !== null + ')');
} else {
assert.equal(inputAttr, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr + ')');
}
}
});
test('always-float-label attribute works', function() {
var input = fixture('always-float-label');
var container = Polymer.dom(input.root).querySelector('paper-input-container');
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
});
});
suite('focus/blur events', function() {
var input;
setup(function() {
input = fixture('basic');
});
test('focus/blur events fired on host element', function(done) {
var nFocusEvents = 0;
var nBlurEvents = 0;
input.addEventListener('focus', function() {
nFocusEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nFocusEvents, 1, 'one focus event fired');
input.inputElement.textarea.blur();
});
});
input.addEventListener('blur', function() {
nBlurEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nBlurEvents, 1, 'one blur event fired');
done();
});
});
input.inputElement.textarea.focus();
});
});
suite('a11y', function() {
test('has aria-labelledby', function() {
var input = fixture('label');
assert.isTrue(input.inputElement.textarea.hasAttribute('aria-labelledby'))
assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
});
test('has aria-describedby for error message', function() {
var input = fixture('required');
forceXIfStamp(input);
assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
});
test('has aria-describedby for character counter', function() {
var input = fixture('char-counter');
forceXIfStamp(input);
assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
});
test('has aria-describedby for character counter and error', function() {
var input = fixture('required-char-counter');
forceXIfStamp(input);
assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,41 @@
{
"name": "paper-progress",
"version": "1.0.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "A material design progress bar",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"progress"
],
"main": [
"paper-progress.html"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-progress.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-range-behavior": "PolymerElements/iron-range-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/paper-progress",
"_release": "1.0.0",
"_resolution": {
"type": "version",
"tag": "v1.0.0",
"commit": "1bef80a0d4110654b85746e70c006796ce8cdc2c"
},
"_source": "git://github.com/PolymerElements/paper-progress.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-progress"
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,31 @@
{
"name": "paper-progress",
"version": "1.0.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "A material design progress bar",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"progress"
],
"main": [
"paper-progress.html"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-progress.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-range-behavior": "PolymerElements/iron-range-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,122 @@
<!--
@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
-->
<!doctype html>
<html>
<head>
<title>paper-progress demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<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="../paper-progress.html">
<link rel="import" href="../../paper-button/paper-button.html">
<style is="custom-style">
body {
padding: 40px;
}
paper-progress {
display: block;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
}
paper-progress.blue {
--paper-progress-active-color: var(--paper-light-blue-500);
--paper-progress-secondary-color: var(--paper-light-blue-100);
}
paper-progress.red {
--paper-progress-active-color: var(--paper-red-500);
--paper-progress-secondary-color: var(--paper-red-100);
}
paper-progress.orange {
--paper-progress-active-color: var(--paper-orange-500);
--paper-progress-secondary-color: var(--paper-orange-100);
}
paper-progress.green {
--paper-progress-active-color: var(--paper-light-green-500);
--paper-progress-secondary-color: var(--paper-light-green-100);
}
</style>
</head>
<body>
<div class="vertical layout">
<h4>Progress bar</h4>
<div class="vertical-section">
<paper-progress></paper-progress>
<paper-button raised onclick="startProgress();">Start</paper-button>
</div>
<h4>Indeterminate</h4>
<div class="vertical-section">
<paper-progress indeterminate></paper-progress><br>
<paper-progress class="blue" indeterminate alue="800" min="100" max="1000"></paper-progress><br>
</div>
<h4>Color</h4>
<div class="vertical-section">
<paper-progress value="40" class="blue"></paper-progress><br>
<paper-progress value="800" min="100" max="1000" class="red"></paper-progress><br>
<paper-progress value="40" class="orange"></paper-progress><br>
<paper-progress value="200" max="200" class="green"></paper-progress><br>
<paper-progress value="40" secondary-progress="80" class="blue"></paper-progress><br>
</div>
</div>
<script>
var progress = document.querySelector('paper-progress');
var button = document.querySelector('paper-button');
var repeat, maxRepeat = 5, animating = false;
function nextProgress() {
animating = true;
if (progress.value < progress.max) {
progress.value += (progress.step || 1);
} else {
if (++repeat >= maxRepeat) {
animating = false;
button.disabled = false;
return;
}
progress.value = progress.min;
}
requestAnimationFrame(nextProgress);
}
function startProgress() {
repeat = 0;
progress.value = progress.min;
button.disabled = true;
if (!animating) {
nextProgress();
}
}
window.addEventListener('WebComponentsReady', function() {
startProgress();
});
</script>
</body>
</html>

View File

@ -0,0 +1,21 @@
<?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">
<rect x="57" y="59" width="20" height="2"/>
<rect x="38" y="59" width="11" height="2"/>
<rect x="84" y="59" width="40" height="2"/>
<rect x="133" y="59" width="54" height="2"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 813 B

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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>paper-progress</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,199 @@
<!--
@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="../paper-styles/paper-styles.html">
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<!--
The progress bars are for situations where the percentage completed can be
determined. They give users a quick sense of how much longer an operation
will take.
Example:
<paper-progress value="10"></paper-progress>
There is also a secondary progress which is useful for displaying intermediate
progress, such as the buffer level during a streaming playback progress bar.
Example:
<paper-progress value="10" secondary-progress="30"></paper-progress>
Styling progress bar:
To change the active progress bar color:
paper-progress {
--paper-progress-active-color: #e91e63;
}
To change the secondary progress bar color:
paper-progress {
--paper-progress-secondary-color: #f8bbd0;
}
To change the progress bar background color:
paper-progress {
--paper-progress-container-color: #64ffda;
}
@group Paper Elements
@element paper-progress
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="paper-progress">
<style>
:host {
display: inline-block;
width: 200px;
height: 4px;
}
#progressContainer {
position: relative;
height: 100%;
background-color: var(--paper-progress-container-color, --google-grey-300);
overflow: hidden;
}
#activeProgress,
#secondaryProgress {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
#activeProgress {
background-color: var(--paper-progress-active-color, --google-green-500);
}
#secondaryProgress {
background-color: var(--paper-progress-secondary-color, --google-green-100);
}
#activeProgress.indeterminate {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation: indeterminate-bar 1s linear infinite;
animation: indeterminate-bar 1s linear infinite;
}
@-webkit-keyframes indeterminate-bar {
0% {
-webkit-transform: translate(-50%) scaleX(0);
}
50% {
-webkit-transform: translate(0%) scaleX(0.3);
}
100% {
-webkit-transform: translate(50%) scaleX(0);
}
}
@keyframes indeterminate-bar {
0% {
transform: translate(-50%) scaleX(0);
}
50% {
transform: translate(0%) scaleX(0.3);
}
100% {
transform: translate(50%) scaleX(0);
}
}
</style>
<template>
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
<div id="secondaryProgress" class="fit"></div>
<div id="activeProgress" class="fit"></div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'paper-progress',
behaviors: [
Polymer.IronRangeBehavior
],
properties: {
/**
* The number that represents the current secondary progress.
*/
secondaryProgress: {
type: Number,
value: 0,
notify: true
},
/**
* The secondary ratio
*/
secondaryRatio: {
type: Number,
value: 0,
readOnly: true,
observer: '_secondaryRatioChanged'
},
/**
* Use an indeterminate progress indicator.
*/
indeterminate: {
type: Boolean,
value: false,
notify: true,
observer: '_toggleIndeterminate'
}
},
observers: [
'_ratioChanged(ratio)',
'_secondaryProgressChanged(secondaryProgress, min, max)'
],
_toggleIndeterminate: function() {
// If we use attribute/class binding, the animation sometimes doesn't translate properly
// on Safari 7.1. So instead, we toggle the class here in the update method.
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
},
_transformProgress: function(progress, ratio) {
var transform = 'scaleX(' + (ratio / 100) + ')';
progress.style.transform = progress.style.webkitTransform = transform;
},
_ratioChanged: function(ratio) {
this._transformProgress(this.$.activeProgress, ratio);
},
_secondaryRatioChanged: function(secondaryRatio) {
this._transformProgress(this.$.secondaryProgress, secondaryRatio);
},
_secondaryProgressChanged: function() {
this.secondaryProgress = this._clampValue(this.secondaryProgress);
this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
}
});
</script>

View File

@ -0,0 +1,121 @@
<!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">
<title>paper-progress test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../paper-progress.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="trivialProgress">
<template>
<paper-progress></paper-progress>
</template>
</test-fixture>
<script>
suite('<paper-progress>', function() {
var range;
setup(function() {
range = fixture('trivialProgress');
});
test('check default', function() {
assert.equal(range.min, 0);
assert.equal(range.max, 100);
assert.equal(range.value, 0);
});
test('set value', function(done) {
range.value = 50;
asyncPlatformFlush(function() {
assert.equal(range.value, 50);
// test clamp value
range.value = 60.1;
asyncPlatformFlush(function() {
assert.equal(range.value, 60);
done();
});
});
});
test('set max', function(done) {
range.max = 10;
range.value = 11;
asyncPlatformFlush(function() {
assert.equal(range.value, range.max);
done();
});
});
test('test ratio', function(done) {
range.max = 10;
range.value = 5;
asyncPlatformFlush(function() {
assert.equal(range.ratio, 50);
done();
});
});
test('test secondary ratio', function(done) {
range.max = 10;
range.secondaryProgress = 5;
asyncPlatformFlush(function() {
assert.equal(range.secondaryRatio, 50);
done();
});
});
test('set min', function(done) {
range.min = 10
range.max = 50;
range.value = 30;
asyncPlatformFlush(function() {
assert.equal(range.ratio, 50);
range.value = 0;
asyncPlatformFlush(function() {
assert.equal(range.value, range.min);
done();
});
});
});
test('set step', function(done) {
range.min = 0;
range.max = 10;
range.value = 5.1;
asyncPlatformFlush(function() {
assert.equal(range.value, 5);
range.step = 0.1;
range.value = 5.1;
asyncPlatformFlush(function() {
assert.equal(range.value, 5.1);
done();
});
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!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, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,50 @@
{
"name": "paper-slider",
"version": "1.0.3",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"slider",
"control"
],
"main": [
"paper-slider.html"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-slider.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/paper-slider",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "d2b1542b6f02595fa124359945a4cc00cb0fca44"
},
"_source": "git://github.com/PolymerElements/paper-slider.git",
"_target": "~1.0.3",
"_originalSource": "PolymerElements/paper-slider",
"_direct": true
}

View File

@ -0,0 +1 @@
bower_components

View File

@ -0,0 +1,39 @@
{
"name": "paper-slider",
"version": "1.0.3",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"slider",
"control"
],
"main": [
"paper-slider.html"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-slider.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -0,0 +1,117 @@
<!--
@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
-->
<!doctype html>
<html>
<head>
<title>paper-slider demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../paper-slider.html">
<style is="custom-style">
body {
padding: 40px;
}
paper-slider {
width: 100%;
}
paper-slider.blue {
--paper-slider-knob-color: var(--paper-light-blue-500);
--paper-slider-active-color: var(--paper-light-blue-500);
}
paper-slider.red {
--paper-slider-knob-color: var(--paper-red-500);
--paper-slider-active-color: var(--paper-red-500);
}
paper-slider.green {
--paper-slider-knob-color: var(--paper-green-500);
--paper-slider-active-color: var(--paper-green-500);
}
paper-slider.orange {
--paper-slider-knob-color: var(--paper-orange-500);
--paper-slider-active-color: var(--paper-orange-500);
--paper-slider-pin-color: var(--paper-orange-500);
}
#ratingsLabel {
padding-left: 12px;
color: #a0a0a0;
}
</style>
</head>
<body unresolved>
<div class="vertical center-justified layout">
<h4>Default</h4>
<div class="vertical-section">
<div>Oxygen</div>
<paper-slider value="21"></paper-slider><br><br>
<div>Argon</div>
<paper-slider value="1"></paper-slider><br><br>
<div>Hydrogen</div>
<paper-slider value="0"></paper-slider><br><br>
<div>Nitrogen</div>
<paper-slider value="78"></paper-slider><br><br>
<div>Sprinkles</div>
<paper-slider disabled value="33"></paper-slider>
</div>
<h4>Editable</h4>
<div class="vertical-section">
<div class="center horizontal layout">
<div>R</div>
<paper-slider class="red" value="23" max="255" editable></paper-slider>
</div>
<div class="center horizontal layout">
<div>G</div>
<paper-slider class="green" value="183" max="255" editable></paper-slider>
</div>
<div class="center horizontal layout">
<div>B</div>
<paper-slider class="blue" value="211" max="255" editable></paper-slider>
</div>
<div class="center horizontal layout">
<div>&alpha;</div>
<paper-slider max="1.0" step="0.01" editable></paper-slider>
</div>
</div>
<h4>Labelled pins</h4>
<div class="vertical-section">
<div>Brightness</div><br>
<paper-slider pin value="20" class="orange"></paper-slider>
<div>Ratings: <span id="ratingsLabel"></span></div><br>
<paper-slider id="ratings" pin snaps max="10" step="1" value="5" class="orange"></paper-slider>
</div>
</div>
<script>
var ratings = document.querySelector('#ratings');
ratings.addEventListener('value-change', function() {
document.querySelector('#ratingsLabel').textContent = ratings.value;
});
</script>
</body>
</html>

View File

@ -0,0 +1,20 @@
<?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="110" cy="61" r="4"/>
<rect x="61" y="60" width="49" height="2"/>
<rect x="110" y="60" width="53" height="2"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 757 B

View File

@ -0,0 +1,29 @@
<!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>paper-slider</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,257 @@
/**
@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
*/
:host {
display: inline-block;
width: 200px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:host(:not([disabled])) #sliderBar::shadow #activeProgress {
background-color: var(--paper-slider-active-color, --google-blue-700);
}
:host(:not([disabled])) #sliderBar::shadow #secondaryProgress {
background-color: var(--paper-slider-secondary-color, --google-blue-300);
}
:host([disabled]) #sliderBar::shadow #activeProgress {
background-color: var(--paper-slider-disabled-active-color, --google-grey-500);
}
:host([disabled]) #sliderBar::shadow #secondaryProgress {
background-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
}
:host(:focus) {
outline: none;
}
#sliderContainer {
position: relative;
width: calc(100% - 32px);
height: 32px;
}
#sliderContainer.editable {
float: left;
width: calc(100% - 72px);
margin: 12px 0;
}
.bar-container {
position: absolute;
top: 0;
left: 16px;
height: 100%;
width: 100%;
overflow: hidden;
}
.ring > .bar-container {
left: 20px;
width: calc(100% - 4px);
transition: left 0.18s ease, width 0.18s ease;
}
.ring.expand:not(.pin) > .bar-container {
left: 30px;
width: calc(100% - 14px);
}
.ring.expand.dragging > .bar-container {
transition: none;
}
#sliderBar {
position: absolute;
top: 15px;
left: 0;
height: 2px;
width: 100%;
padding: 8px 0;
margin: -8px 0;
background-color: var(--paper-slider-bar-color, transparent);
}
.ring #sliderBar {
left: -4px;
width: calc(100% + 4px);
}
.ring.expand:not(.pin) #sliderBar {
left: -14px;
width: calc(100% + 14px);
}
.slider-markers {
position: absolute;
top: 15px;
left: 15px;
height: 2px;
width: calc(100% + 2px);
box-sizing: border-box;
pointer-events: none;
}
.slider-markers::after,
.slider-marker::after {
content: "";
display: block;
width: 2px;
height: 2px;
border-radius: 50%;
background-color: black;
}
.transiting #sliderBar::shadow #activeProgress {
-webkit-transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnob {
@apply(--layout-center-justified);
@apply(--layout-center);
@apply(--layout-horizontal);
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
}
.transiting > #sliderKnob {
transition: left 0.08s ease;
}
#sliderKnob:focus {
outline: none;
}
#sliderKnob.dragging {
transition: none;
}
.snaps > #sliderKnob.dragging {
transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnobInner {
width: 12px;
height: 12px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%;
background-color: var(--paper-slider-knob-color, --google-blue-700);
transition-property: height, width, background-color, border;
transition-duration: 0.1s;
transition-timing-function: ease;
}
.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
width: 100%;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
border: 2px solid #c8c8c8;
}
#sliderKnobInner::before {
background-color: var(--paper-slider-pin-color, --google-blue-700);
}
.pin > #sliderKnob > #sliderKnobInner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
margin-left: 3px;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg) scale(0) translate(0);
transform: rotate(-45deg) scale(0) translate(0);
}
#sliderKnobInner::before,
#sliderKnobInner::after {
transition: -webkit-transform .2s ease, background-color .18s ease;
transition: transform .2s ease, background-color .18s ease;
}
.pin.ring > #sliderKnob > #sliderKnobInner::before {
background-color: #c8c8c8;
}
.pin.expand > #sliderKnob > #sliderKnobInner::before {
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
transform: rotate(-45deg) scale(1) translate(17px, -17px);
}
.pin > #sliderKnob > #sliderKnobInner::after {
content: attr(value);
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 26px;
text-align: center;
color: var(--paper-slider-font-color, #fff);
font-size: 10px;
-webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0);
}
.pin.expand > #sliderKnob > #sliderKnobInner::after {
-webkit-transform: scale(1) translate(0, -17px);
transform: scale(1) translate(0, -17px);
}
/* editable: paper-input */
.slider-input {
width: 40px;
float: right;
overflow: hidden;
}
.slider-input::shadow input {
/* FIXME(ffu): should one be able set text-align directly on paper-input? */
text-align: center;
}
/* disabled state */
#sliderContainer.disabled {
pointer-events: none;
}
.disabled > #sliderKnob > #sliderKnobInner {
width: 8px;
height: 8px;
background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
}
.disabled.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
}
paper-ripple {
color: var(--paper-slider-knob-color, --google-blue-700);
}

View File

@ -0,0 +1,485 @@
<!--
@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="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<!--
`paper-slider` allows user to select a value from a range of values by
moving the slider thumb. The interactive nature of the slider makes it a
great choice for settings that reflect intensity levels, such as volume,
brightness, or color saturation.
Example:
<paper-slider></paper-slider>
Use `min` and `max` to specify the slider range. Default is 0 to 100.
Example:
<paper-slider min="10" max="200" value="110"></paper-slider>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-slider-bar-color` | The background color of the slider | `transparent`
`--paper-slider-active-color` | The progress bar color | `--google-blue-700`
`--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
`--paper-slider-knob-color` | The knob color | `--google-blue-700`
`--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-500`
`--paper-slider-pin-color` | The pin color | `--google-blue-700`
`--paper-slider-font-color` | The pin's text color | `#fff`
`--paper-slider-disabled-active-color` | The disabled progress bar color | `--google-grey-500`
`--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
@group Paper Elements
@element paper-slider
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="paper-slider">
<link rel="import" type="css" href="paper-slider.css">
<template>
<div id="sliderContainer"
class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
<div class="bar-container">
<paper-progress
id="sliderBar"
aria-hidden="true"
min="[[min]]"
max="[[max]]"
step="[[step]]"
value="[[immediateValue]]"
secondary-progress="[[secondaryProgress]]"
on-down="_bardown"
on-up="_resetKnob"
on-track="_onTrack">
</paper-progress>
</div>
<template is="dom-if" if="[[snaps]]">
<div class="slider-markers horizontal layout">
<template is="dom-repeat" items="[[markers]]">
<div class="slider-marker flex"></div>
</template>
</div>
</template>
<div id="sliderKnob"
class="center-justified center horizontal layout"
on-down="_knobdown"
on-up="_resetKnob"
on-track="_onTrack"
on-transitionend="_knobTransitionEnd">
<paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
</div>
</div>
<template is="dom-if" if="[[editable]]">
<paper-input
id="input"
class="slider-input"
disabled$="[[disabled]]"
on-change="_inputChange">
</paper-input>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'paper-slider',
behaviors: [
Polymer.IronA11yKeysBehavior,
Polymer.PaperInkyFocusBehavior,
Polymer.IronFormElementBehavior,
Polymer.IronRangeBehavior
],
properties: {
/**
* If true, the slider thumb snaps to tick marks evenly spaced based
* on the `step` property value.
*/
snaps: {
type: Boolean,
value: false,
notify: true
},
/**
* If true, a pin with numeric value label is shown when the slider thumb
* is pressed. Use for settings for which users need to know the exact
* value of the setting.
*/
pin: {
type: Boolean,
value: false,
notify: true
},
/**
* The number that represents the current secondary progress.
*/
secondaryProgress: {
type: Number,
value: 0,
notify: true,
observer: '_secondaryProgressChanged'
},
/**
* If true, an input is shown and user can use it to set the slider value.
*/
editable: {
type: Boolean,
value: false
},
/**
* The immediate value of the slider. This value is updated while the user
* is dragging the slider.
*/
immediateValue: {
type: Number,
value: 0,
readOnly: true
},
/**
* The maximum number of markers
*/
maxMarkers: {
type: Number,
value: 0,
notify: true,
observer: '_maxMarkersChanged'
},
/**
* If true, the knob is expanded
*/
expand: {
type: Boolean,
value: false,
readOnly: true
},
/**
* True when the user is dragging the slider.
*/
dragging: {
type: Boolean,
value: false,
readOnly: true
},
transiting: {
type: Boolean,
value: false,
readOnly: true
},
markers: {
type: Array,
readOnly: true,
value: []
},
},
observers: [
'_updateKnob(value, min, max, snaps, step)',
'_minChanged(min)',
'_maxChanged(max)',
'_valueChanged(value)',
'_immediateValueChanged(immediateValue)'
],
hostAttributes: {
role: 'slider',
tabindex: 0
},
keyBindings: {
'left down pagedown home': '_decrementKey',
'right up pageup end': '_incrementKey'
},
ready: function() {
// issue polymer/polymer#1305
this.async(function() {
this._updateKnob(this.value);
this._updateInputValue();
}, 1);
},
/**
* Increases value by `step` but not above `max`.
* @method increment
*/
increment: function() {
this.value = this._clampValue(this.value + this.step);
},
/**
* Decreases value by `step` but not below `min`.
* @method decrement
*/
decrement: function() {
this.value = this._clampValue(this.value - this.step);
},
_updateKnob: function(value) {
this._positionKnob(this._calcRatio(value));
},
_minChanged: function() {
this.setAttribute('aria-valuemin', this.min);
},
_maxChanged: function() {
this.setAttribute('aria-valuemax', this.max);
},
_valueChanged: function() {
this.setAttribute('aria-valuenow', this.value);
this.fire('value-change');
},
_immediateValueChanged: function() {
if (this.dragging) {
this.fire('immediate-value-change');
} else {
this.value = this.immediateValue;
}
this._updateInputValue();
},
_secondaryProgressChanged: function() {
this.secondaryProgress = this._clampValue(this.secondaryProgress);
},
_updateInputValue: function() {
if (this.editable) {
this.$$('#input').value = this.immediateValue.toString();
}
},
_expandKnob: function() {
this._setExpand(true);
},
_resetKnob: function() {
this.cancelDebouncer('expandKnob');
this._setExpand(false);
},
_positionKnob: function(ratio) {
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
this._setRatio(this._calcRatio(this.immediateValue));
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
},
_inputChange: function() {
this.value = this.$$('#input').value;
this.fire('change');
},
_calcKnobPosition: function(ratio) {
return (this.max - this.min) * ratio + this.min;
},
_onTrack: function(event) {
switch (event.detail.state) {
case 'start':
this._trackStart(event);
break;
case 'track':
this._trackX(event);
break;
case 'end':
this._trackEnd();
break;
}
},
_trackStart: function(event) {
this._w = this.$.sliderBar.offsetWidth;
this._x = this.ratio * this._w;
this._startx = this._x || 0;
this._minx = - this._startx;
this._maxx = this._w - this._startx;
this.$.sliderKnob.classList.add('dragging');
this._setDragging(true);
},
_trackX: function(e) {
if (!this.dragging) {
this._trackStart(e);
}
var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
this._x = this._startx + dx;
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
this._setImmediateValue(immediateValue);
// update knob's position
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
},
_trackEnd: function() {
var s = this.$.sliderKnob.style;
this.$.sliderKnob.classList.remove('dragging');
this._setDragging(false);
this._resetKnob();
this.value = this.immediateValue;
s.transform = s.webkitTransform = '';
this.fire('change');
},
_knobdown: function(event) {
this._expandKnob();
// cancel selection
event.detail.sourceEvent.preventDefault();
// set the focus manually because we will called prevent default
this.focus();
},
_bardown: function(event) {
this._w = this.$.sliderBar.offsetWidth;
var rect = this.$.sliderBar.getBoundingClientRect();
var ratio = (event.detail.x - rect.left) / this._w;
var prevRatio = this.ratio;
this._setTransiting(true);
this._positionKnob(ratio);
this.debounce('expandKnob', this._expandKnob, 60);
// if the ratio doesn't change, sliderKnob's animation won't start
// and `_knobTransitionEnd` won't be called
// Therefore, we need to manually update the `transiting` state
if (prevRatio === this.ratio) {
this._setTransiting(false);
}
this.async(function() {
this.fire('change');
});
// cancel selection
event.detail.sourceEvent.preventDefault();
},
_knobTransitionEnd: function(event) {
if (event.target === this.$.sliderKnob) {
this._setTransiting(false);
}
},
_maxMarkersChanged: function(maxMarkers) {
var l = (this.max - this.min) / this.step;
if (!this.snaps && l > maxMarkers) {
this._setMarkers([]);
} else {
this._setMarkers(new Array(l));
}
},
_getClassNames: function() {
var classes = {};
classes.disabled = this.disabled;
classes.pin = this.pin;
classes.snaps = this.snaps;
classes.ring = this.immediateValue <= this.min;
classes.expand = this.expand;
classes.dragging = this.dragging;
classes.transiting = this.transiting;
classes.editable = this.editable;
return Object.keys(classes).filter(
function(className) {
return classes[className];
}).join(' ');
},
_incrementKey: function(event) {
if (event.detail.key === 'end') {
this.value = this.max;
} else {
this.increment();
}
this.fire('change');
},
_decrementKey: function(event) {
if (event.detail.key === 'home') {
this.value = this.min;
} else {
this.decrement();
}
this.fire('change');
}
});
/**
* Fired when the slider's value changes.
*
* @event value-change
*/
/**
* Fired when the slider's immediateValue changes.
*
* @event immediate-value-change
*/
/**
* Fired when the slider's value changes due to user interaction.
*
* Changes to the slider's value due to changes in an underlying
* bound variable will not trigger this event.
*
* @event change
*/
</script>

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>
<meta charset="UTF-8">
<title>paper-slider test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../paper-slider.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="trivialProgress">
<template>
<paper-slider></paper-slider>
</template>
</test-fixture>
<script>
suite('<paper-slider>', function() {
var slider;
setup(function() {
slider = fixture('trivialProgress');
});
test('check default', function() {
assert.equal(slider.min, 0);
assert.equal(slider.max, 100);
assert.equal(slider.value, 0);
});
test('set value', function(done) {
slider.value = 50;
flush(function() {
assert.equal(slider.value, 50);
// test clamp value
slider.value = 60.1;
flush(function() {
assert.equal(slider.value, 60);
done();
});
});
});
test('set max', function(done) {
slider.max = 10;
slider.value = 11;
flush(function() {
assert.equal(slider.value, slider.max);
done();
});
});
test('ratio', function(done) {
slider.max = 10;
slider.value = 5;
flush(function() {
assert.equal(slider.ratio, 0.5);
done();
});
});
test('snaps', function(done) {
slider.snaps = true;
slider.step = 10;
slider.max = 100;
slider.value = 25;
flush(function() {
assert.equal(slider.value, 30);
slider.value = 51.1;
flush(function() {
assert.equal(slider.value, 50);
slider.snaps = false;
slider.step = 1;
done();
});
});
});
test('secondary progress', function(done) {
slider.max = 10;
slider.secondaryProgress = 50;
flush(function() {
assert.equal(slider.secondaryProgress, slider.max);
done();
});
});
test('increment', function(done) {
slider.min = 0;
slider.max = 10;
slider.step = 2;
slider.value = 0;
slider.increment();
flush(function() {
assert.equal(slider.value, slider.step);
slider.step = 1;
done();
});
});
test('decrement', function(done) {
slider.min = 0;
slider.max = 10;
slider.step = 2;
slider.value = 8;
slider.decrement();
flush(function() {
assert.equal(slider.value, 6);
slider.step = 1;
done();
});
});
test('editable', function(done) {
slider.min = 0;
slider.max = 10;
slider.step = 1;
slider.editable = true;
flush(function() {
slider.value = 2;
assert.equal(slider.$$('#input').value, slider.value);
done();
});
});
test('decimal values', function(done) {
slider.min = 0;
slider.max = 1;
slider.value = slider.min;
slider.step = 0.1;
slider.increment();
flush(function() {
assert.equal(slider.value, slider.step);
assert.equal(slider.$.sliderBar.value, slider.step);
done();
});
});
test('snap to the correct value on tapping', function(done) {
var cursor = MockInteractions.topLeftOfNode(slider.$.sliderBar);
cursor.x += slider.$.sliderBar.getBoundingClientRect().width * 0.9;
slider.min = 0;
slider.max = 2;
slider.step = 1;
slider.value = 0;
MockInteractions.down(slider.$.sliderBar, cursor);
flush(function() {
assert.equal(slider.value, slider.max);
slider.step = 1;
done();
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!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>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html'
]);
</script>
</body>
</html>

View File

@ -2,7 +2,7 @@
function updateCredentials() {
console.log('sending updated credentials to ApiClientBridge');
Logger.log('sending updated credentials to ApiClientBridge');
var json = JSON.stringify(ConnectionManager.credentialProvider().credentials());
var credentials = JSON.parse(json);
@ -21,7 +21,7 @@
function initNativeConnectionManager() {
console.log('initNativeConnectionManager');
Logger.log('initNativeConnectionManager');
var capabilities = ConnectionManager.capabilities();

View File

@ -1,11 +1,11 @@
(function () {
function onSuccess() {
console.log('Immersive mode succeeded');
Logger.log('Immersive mode succeeded');
}
function onError() {
console.log('Immersive mode failed');
Logger.log('Immersive mode failed');
}
//// Is this plugin supported?
@ -89,7 +89,7 @@
Dashboard.ready(function () {
console.log('binding fullscreen to MediaController');
Logger.log('binding fullscreen to MediaController');
$(MediaController).on('playerchange', function () {

View File

@ -96,7 +96,7 @@
function onPlaybackStart(e, state) {
console.log('nowplaying event: ' + e.type);
Logger.log('nowplaying event: ' + e.type);
var player = this;
@ -107,7 +107,7 @@
function onPlaybackStopped(e, state) {
console.log('nowplaying event: ' + e.type);
Logger.log('nowplaying event: ' + e.type);
var player = this;
player.endPlayerUpdates();
@ -142,7 +142,7 @@
currentPlayer = player;
console.log('binding remotecontrols to MediaPlayer');
Logger.log('binding remotecontrols to MediaPlayer');
player.getPlayerState().done(function (state) {
@ -161,7 +161,7 @@
Dashboard.ready(function () {
console.log('binding remotecontrols to MediaController');
Logger.log('binding remotecontrols to MediaController');
$(MediaController).on('playerchange', function () {

View File

@ -39,7 +39,7 @@
function onError() {
var errorCode = this.error ? this.error.code : '';
console.log('Media element error code: ' + errorCode);
Logger.log('Media element error code: ' + errorCode);
$(self).trigger('error');
}

View File

@ -27,14 +27,14 @@
$(castPlayer).on("connect", function (e) {
console.log('cc: connect');
Logger.log('cc: connect');
// Reset this so the next query doesn't make it appear like content is playing.
self.lastPlayerData = {};
});
$(castPlayer).on("playbackstart", function (e, data) {
console.log('cc: playbackstart');
Logger.log('cc: playbackstart');
var state = self.getPlayerStateInternal(data);
$(self).trigger("playbackstart", [state]);
@ -42,7 +42,7 @@
$(castPlayer).on("playbackstop", function (e, data) {
console.log('cc: playbackstop');
Logger.log('cc: playbackstop');
var state = self.getPlayerStateInternal(data);
$(self).trigger("playbackstop", [state]);
@ -53,7 +53,7 @@
$(castPlayer).on("playbackprogress", function (e, data) {
console.log('cc: positionchange');
Logger.log('cc: positionchange');
var state = self.getPlayerStateInternal(data);
$(self).trigger("positionchange", [state]);
@ -416,7 +416,7 @@
data = data || self.lastPlayerData;
self.lastPlayerData = data;
console.log(JSON.stringify(data));
Logger.log(JSON.stringify(data));
return data;
};
@ -459,7 +459,7 @@
}
function handleSessionDisconnect() {
console.log("session disconnected");
Logger.log("session disconnected");
cleanupSession();
MediaController.removeActivePlayer(PlayerName);
@ -469,7 +469,7 @@
currentWebAppSession = webAppSession;
console.log('session.connect succeeded');
Logger.log('session.connect succeeded');
webAppSession.setWebAppSessionListener();
MediaController.setActivePlayer(PlayerName, convertDeviceToTarget(device));
@ -530,15 +530,15 @@
function tryLaunchWebSession(device) {
console.log('calling launchWebApp');
Logger.log('calling launchWebApp');
device.getWebAppLauncher().launchWebApp(ApplicationID).success(function (session) {
console.log('launchWebApp success. calling onSessionConnected');
Logger.log('launchWebApp success. calling onSessionConnected');
setupWebAppSession(device, session, true);
}).error(function (err1) {
console.log('launchWebApp error:' + JSON.stringify(err1));
Logger.log('launchWebApp error:' + JSON.stringify(err1));
});
}
@ -547,22 +547,22 @@
// First try to join existing session. If it fails, launch a new one
console.log('calling joinWebApp');
Logger.log('calling joinWebApp');
device.getWebAppLauncher().joinWebApp(ApplicationID).success(function (session) {
console.log('joinWebApp success. calling onSessionConnected');
Logger.log('joinWebApp success. calling onSessionConnected');
setupWebAppSession(device, session, false);
}).error(function (err) {
console.log('joinWebApp error: ' + JSON.stringify(err));
Logger.log('joinWebApp error: ' + JSON.stringify(err));
if (enableRetry) {
tryJoinWebSession(device, false);
return;
}
console.log('calling launchWebApp');
Logger.log('calling launchWebApp');
tryLaunchWebSession(device);
});
@ -581,7 +581,7 @@
device.off("ready");
console.log('creating webAppSession');
Logger.log('creating webAppSession');
launchWebApp(device);
}
@ -608,7 +608,7 @@
self.tryPairWithDevice = function (device, deferred) {
console.log('Will attempt to connect to Chromecast');
Logger.log('Will attempt to connect to Chromecast');
device.on("disconnect", function () {
device.off("ready");
@ -616,18 +616,18 @@
});
if (device.isReady()) {
console.log('Device is already ready, calling onDeviceReady');
Logger.log('Device is already ready, calling onDeviceReady');
onDeviceReady(device);
} else {
console.log('Binding device ready handler');
Logger.log('Binding device ready handler');
device.on("ready", function () {
console.log('device.ready fired');
Logger.log('device.ready fired');
onDeviceReady(device);
});
console.log('Calling device.connect');
Logger.log('Calling device.connect');
device.connect();
}
};
@ -636,7 +636,7 @@
if (newTarget.id != currentDeviceId) {
if (currentWebAppSession) {
console.log('Disconnecting from chromecast');
Logger.log('Disconnecting from chromecast');
//currentDevice.disconnect();
cleanupSession();
currentDevice = null;

View File

@ -8,12 +8,12 @@
}, function () {
console.log('plugin launch success');
Logger.log('plugin launch success');
ExternalPlayer.onPlaybackStart();
}, function () {
console.log('plugin launch error');
Logger.log('plugin launch error');
ExternalPlayer.onPlaybackStart();
});
}

View File

@ -26,7 +26,7 @@
$(castPlayer).on("playbackstart", function (e, data) {
console.log('cc: playbackstart');
Logger.log('cc: playbackstart');
var state = self.getPlayerStateInternal(data);
$(self).trigger("playbackstart", [state]);
@ -34,7 +34,7 @@
$(castPlayer).on("playbackstop", function (e, data) {
console.log('cc: playbackstop');
Logger.log('cc: playbackstop');
var state = self.getPlayerStateInternal(data);
$(self).trigger("playbackstop", [state]);
@ -45,7 +45,7 @@
$(castPlayer).on("playbackprogress", function (e, data) {
console.log('cc: positionchange');
Logger.log('cc: positionchange');
var state = self.getPlayerStateInternal(data);
$(self).trigger("positionchange", [state]);
@ -193,12 +193,12 @@
}
).success(function (launchSession, mediaControl) {
console.log("Video launch successful");
Logger.log("Video launch successful");
currentMediaControl = mediaControl && mediaControl.acquire();
}).error(function (err) {
console.log("error: " + err.message);
Logger.log("error: " + err.message);
});
deferred.resolveWith(null, [streamInfo]);
@ -557,12 +557,12 @@
data = data || self.lastPlayerData;
self.lastPlayerData = data;
console.log(JSON.stringify(data));
Logger.log(JSON.stringify(data));
return data;
};
function handleSessionDisconnect() {
console.log("session disconnected");
Logger.log("session disconnected");
cleanupSession();
MediaController.removeActivePlayer(PlayerName);
@ -578,7 +578,7 @@
cleanupSession();
}
console.log('session.connect succeeded');
Logger.log('session.connect succeeded');
MediaController.setActivePlayer(PlayerName, convertDeviceToTarget(device));
currentDevice = device;
@ -589,7 +589,7 @@
device.off("ready");
console.log('creating webAppSession');
Logger.log('creating webAppSession');
launchWebApp(device);
}
@ -616,7 +616,7 @@
self.tryPairWithDevice = function (device, deferred) {
console.log('Will attempt to connect to Connect Device');
Logger.log('Will attempt to connect to Connect Device');
device.on("disconnect", function () {
device.off("ready");
@ -624,18 +624,18 @@
});
if (device.isReady()) {
console.log('Device is already ready, calling onDeviceReady');
Logger.log('Device is already ready, calling onDeviceReady');
onDeviceReady(device);
} else {
console.log('Binding device ready handler');
Logger.log('Binding device ready handler');
device.on("ready", function () {
console.log('device.ready fired');
Logger.log('device.ready fired');
onDeviceReady(device);
});
console.log('Calling device.connect');
Logger.log('Calling device.connect');
device.connect();
}
};
@ -645,7 +645,7 @@
if (currentDevice) {
if (newTarget.id != currentDeviceId) {
if (currentDevice) {
console.log('Disconnecting from connect device');
Logger.log('Disconnecting from connect device');
//currentDevice.disconnect();
cleanupSession();
currentDevice = null;

View File

@ -101,7 +101,7 @@
store.when(unlockAppProductId).updated(function (product) {
if (product.loaded && product.valid && product.state == store.APPROVED) {
console.log('finishing previously created transaction');
Logger.log('finishing previously created transaction');
product.finish();
}
updateProductInfo(product);
@ -112,7 +112,7 @@
// go ask your boss about it! (just in case)
store.ready(function () {
console.log("Store ready");
Logger.log("Store ready");
});
// After we've done our setup, we tell the store to do

View File

@ -72,25 +72,25 @@
var deferred = DeferredBuilder.Deferred();
var key = getCacheKey(originalUrl);
console.log('getImageUrl:' + originalUrl);
Logger.log('getImageUrl:' + originalUrl);
getFileSystem().done(function (fileSystem) {
var path = fileSystem.root.toURL() + "/emby/cache/" + key;
resolveLocalFileSystemURL(path, function (fileEntry) {
var localUrl = normalizeReturnUrl(fileEntry.toURL());
console.log('returning cached file: ' + localUrl);
Logger.log('returning cached file: ' + localUrl);
deferred.resolveWith(null, [localUrl]);
}, function () {
console.log('downloading: ' + originalUrl);
Logger.log('downloading: ' + originalUrl);
var ft = new FileTransfer();
ft.download(originalUrl, path, function (entry) {
var localUrl = normalizeReturnUrl(entry.toURL());
console.log(localUrl);
Logger.log(localUrl);
deferred.resolveWith(null, [localUrl]);
});
});

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