rework dialogs

This commit is contained in:
Luke Pulverenti 2016-03-22 13:46:57 -04:00
parent 5a71a65637
commit 5b66bb9ecb
39 changed files with 486 additions and 121 deletions

View File

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.1.73",
"_release": "1.1.73",
"version": "1.1.75",
"_release": "1.1.75",
"_resolution": {
"type": "version",
"tag": "1.1.73",
"commit": "f8be47bfe5f076e14224b9a61a5e08590df41c4d"
"tag": "1.1.75",
"commit": "bc766156397a317445676c829b9b5e9dc058ca8e"
},
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.1.5",

View File

@ -71,7 +71,7 @@
pos.left += options.positionTo.offsetWidth / 2;
// Account for popup size - we can't predict this yet so just estimate
pos.top -= (55 * options.items.length) / 2;
pos.top -= (45 * options.items.length) / 2;
pos.left -= 80;
// Avoid showing too close to the bottom
@ -233,6 +233,7 @@
if (pos) {
dlg.style.position = 'fixed';
dlg.style.margin = 0;
dlg.style.left = pos.left + 'px';
dlg.style.top = pos.top + 'px';
}

View File

@ -55,7 +55,7 @@ define(['layoutManager', 'dialogText'], function (layoutManager, dialogText) {
dialogOptions.modal = false;
dialogOptions.entryAnimationDuration = 160;
dialogOptions.exitAnimationDuration = 200;
dialogOptions.exitAnimationDuration = 160;
dialogOptions.autoFocus = false;
}
@ -72,18 +72,26 @@ define(['layoutManager', 'dialogText'], function (layoutManager, dialogText) {
html += '<div class="buttons">';
html += '<paper-button class="btnConfirm" dialog-confirm autofocus>' + dialogText.get('Ok') + '</paper-button>';
html += '<paper-button class="btnConfirm" autofocus>' + dialogText.get('Ok') + '</paper-button>';
html += '<paper-button dialog-dismiss>' + dialogText.get('Cancel') + '</paper-button>';
html += '<paper-button class="btnCancel">' + dialogText.get('Cancel') + '</paper-button>';
html += '</div>';
dlg.innerHTML = html;
document.body.appendChild(dlg);
paperdialoghelper.open(dlg).then(function () {
var confirmed = false;
dlg.querySelector('.btnConfirm').addEventListener('click', function () {
confirmed = true;
paperdialoghelper.close(dlg);
});
dlg.querySelector('.btnCancel').addEventListener('click', function () {
confirmed = false;
paperdialoghelper.close(dlg);
});
var confirmed = dlg.closingReason.confirmed;
paperdialoghelper.open(dlg).then(function () {
if (confirmed) {
resolve();

View File

@ -25,7 +25,7 @@ define([], function () {
}
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-TEXTAREA', 'PAPER-ICON-BUTTON', 'PAPER-FAB', 'PAPER-CHECKBOX', 'PAPER-ICON-ITEM', 'PAPER-MENU-ITEM', 'PAPER-DROPDOWN-MENU', 'EMBY-DROPDOWN-MENU'];
var focusableContainerTagNames = ['BODY', 'PAPER-DIALOG'];
var focusableContainerTagNames = ['BODY', 'PAPER-DIALOG', 'DIALOG'];
var focusableQuery = focusableTagNames.join(',') + ',.focusable';
function isFocusable(elem) {

View File

@ -1,5 +1,19 @@
.paperDialog {
margin: 0;
border-radius: 4px;
z-index: 999999 !important;
background-color: #fff;
position: fixed;
display: block;
margin: 24px 40px;
-webkit-overflow-scrolling: touch;
background: #ffffff;
color: #212121;
-webkit-font-smoothing: antialiased;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
height: auto;
border: 0;
padding: 0;
}
.paperDialog.fixedSize {
@ -12,6 +26,7 @@
border-radius: 0 !important;
max-height: none !important;
max-width: none !important;
width: auto;
}
.paperDialog.scrollY {
@ -59,4 +74,56 @@
.noScroll {
overflow-x: hidden !important;
overflow-y: hidden !important;
}
}
.paperDialog > * {
margin-top: 20px;
padding: 0 24px;
}
.paperDialog > *:first-child {
margin-top: 24px;
}
.paperDialog .buttons {
position: relative;
padding: 8px 8px 8px 24px;
margin: 0;
color: #3f51b5;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.dialogBackdrop {
background-color: #000;
opacity: 0;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
z-index: 999998 !important;
transition: opacity ease-out 0.2s;
}
.paperDialog.opened + .dialogBackdrop {
opacity: .6;
}
.paperDialog::backdrop {
opacity: 0;
background-color: #000;
transition: opacity ease-out 0.2s;
}
.paperDialog.opened::backdrop {
opacity: .6;
}

View File

@ -1,4 +1,4 @@
define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'paper-dialog', 'scale-up-animation', 'fade-out-animation', 'fade-in-animation', 'css!./paperdialoghelper.css'], function (historyManager, focusManager, browser, layoutManager, inputManager) {
define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'css!./paperdialoghelper.css'], function (historyManager, focusManager, browser, layoutManager, inputManager) {
function paperDialogHashHandler(dlg, hash, resolve) {
@ -11,13 +11,13 @@
var isBack = self.originalUrl == window.location.href;
if (isBack || !dlg.opened) {
if (isBack || !isOpened(dlg)) {
window.removeEventListener('popstate', onHashChange);
}
if (isBack) {
self.closedByBack = true;
dlg.close();
closeDialog(dlg);
}
}
@ -27,13 +27,15 @@
inputManager.off(dlg, onBackCommand);
self.closedByBack = true;
dlg.close();
closeDialog(dlg);
e.preventDefault();
}
}
function onDialogClosed() {
removeBackdrop(dlg);
if (removeScrollLockOnClose) {
document.body.classList.remove('noScroll');
}
@ -64,8 +66,43 @@
}, 1);
}
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
dlg.open();
dlg.addEventListener('close', onDialogClosed);
var center = !dlg.classList.contains('fixedSize');
if (center) {
dlg.style.left = '50%';
dlg.style.top = '50%';
}
dlg.classList.remove('hide');
// Use native methods if available
var hasManualBackdrop = false;
if (dlg.showModal) {
if (dlg.getAttribute('modal')) {
dlg.showModal();
} else {
addBackdropOverlay(dlg);
hasManualBackdrop = true;
dlg.show();
}
} else {
addBackdropOverlay(dlg);
hasManualBackdrop = true;
}
if (!hasManualBackdrop) {
dlg.classList.add('opened');
}
if (center) {
centerDialog(dlg);
}
animateDialogOpen(dlg);
if (dlg.getAttribute('data-autofocus') == 'true') {
focusManager.autoFocus(dlg);
}
if (dlg.getAttribute('data-lockscroll') == 'true' && !document.body.classList.contains('noScroll')) {
document.body.classList.add('noScroll');
@ -81,6 +118,23 @@
}
}
function addBackdropOverlay(dlg) {
var backdrop = document.createElement('div');
backdrop.classList.add('dialogBackdrop');
dlg.parentNode.insertBefore(backdrop, dlg.nextSibling);
dlg.backdrop = backdrop;
// Doing this immediately causes the opacity to jump immediately without animating
setTimeout(function () {
dlg.classList.add('opened');
}, 0);
backdrop.addEventListener('click', function () {
close(dlg);
});
}
function isHistoryEnabled(dlg) {
return dlg.getAttribute('data-history') == 'true';
}
@ -93,20 +147,84 @@
});
}
function isOpened(dlg) {
//return dlg.opened;
return !dlg.classList.contains('hide');
}
function close(dlg) {
if (dlg.opened) {
if (isOpened(dlg)) {
if (isHistoryEnabled(dlg)) {
history.back();
} else {
dlg.close();
closeDialog(dlg);
}
}
}
function onDialogOpened(e) {
function scaleUp(elem) {
focusManager.autoFocus(e.target);
var keyframes = [
{ transform: 'scale(0)', offset: 0 },
{ transform: 'scale(1,1)', offset: 1 }];
var timing = elem.animationConfig.entry.timing;
return elem.animate(keyframes, timing);
}
function fadeIn(elem) {
var keyframes = [
{ opacity: '0', offset: 0 },
{ opacity: '1', offset: 1 }];
var timing = elem.animationConfig.entry.timing;
return elem.animate(keyframes, timing);
}
function fadeOut(elem) {
var keyframes = [
{ opacity: '1', offset: 0 },
{ opacity: '0', offset: 1 }];
var timing = elem.animationConfig.exit.timing;
return elem.animate(keyframes, timing);
}
function closeDialog(dlg) {
if (!dlg.classList.contains('hide')) {
var onAnimationFinish = function () {
dlg.classList.add('hide');
if (dlg.close) {
dlg.close();
} else {
dlg.dispatchEvent(new CustomEvent('close', {
bubbles: false,
cancelable: false
}));
}
};
if (!dlg.animationConfig || !dlg.animate) {
onAnimationFinish();
return;
}
fadeOut(dlg).onfinish = onAnimationFinish;
}
}
function animateDialogOpen(dlg) {
if (!dlg.animationConfig || !dlg.animate) {
return;
}
if (dlg.animationConfig.entry.name == 'fade-in-animation') {
fadeIn(dlg);
} else if (dlg.animationConfig.entry.name == 'scale-up-animation') {
scaleUp(dlg);
}
}
function shouldLockDocumentScroll(options) {
@ -122,14 +240,34 @@
return browser.mobile;
}
function centerDialog(dlg) {
dlg.style.marginLeft = (-(dlg.offsetWidth / 2)) + 'px';
dlg.style.marginTop = (-(dlg.offsetHeight / 2)) + 'px';
}
function removeBackdrop(dlg) {
var backdrop = dlg.backdrop;
if (backdrop) {
dlg.backdrop = null;
backdrop.classList.remove('opened');
setTimeout(function () {
backdrop.parentNode.removeChild(backdrop);
}, 300);
}
}
function createDialog(options) {
options = options || {};
var dlg = document.createElement('paper-dialog');
var dlg = document.createElement('dialog');
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
dlg.classList.add('hide');
if (shouldLockDocumentScroll(options)) {
dlg.setAttribute('data-lockscroll', 'true');
@ -147,8 +285,9 @@
dlg.setAttribute('modal', 'modal');
}
// seeing max call stack size exceeded in the debugger with this
dlg.setAttribute('noAutoFocus', 'noAutoFocus');
if (options.autoFocus !== false) {
dlg.setAttribute('data-autofocus', 'true');
}
var defaultEntryAnimation = browser.animate && !browser.mobile ? 'scale-up-animation' : 'fade-in-animation';
dlg.entryAnimation = options.entryAnimation || defaultEntryAnimation;
@ -168,15 +307,15 @@
'exit': {
name: dlg.exitAnimation,
node: dlg,
timing: { duration: options.exitAnimationDuration || 400, easing: 'ease-in' }
timing: { duration: options.exitAnimationDuration || 300, easing: 'ease-in' }
}
};
// too buggy in IE, not even worth it
if (!browser.animate) {
dlg.animationConfig = null;
dlg.entryAnimation = null;
dlg.exitAnimation = null;
//dlg.animationConfig = null;
//dlg.entryAnimation = null;
//dlg.exitAnimation = null;
}
dlg.classList.add('paperDialog');
@ -197,10 +336,6 @@
dlg.classList.add(options.size);
}
if (options.autoFocus !== false) {
dlg.addEventListener('iron-overlay-opened', onDialogOpened);
}
return dlg;
}

View File

@ -57,7 +57,7 @@ define(['paperdialoghelper', 'inputManager', 'connectionManager', 'browser', 'cs
inputmanager.on(window, onInputCommand);
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
dlg.addEventListener('close', onDialogClosed);
if (options.interactive) {
loadSwiper(dlg);

View File

@ -1,6 +1,6 @@
{
"name": "iron-input",
"version": "1.0.8",
"version": "1.0.9",
"description": "An input element with data binding",
"authors": [
"The Polymer Authors"
@ -20,6 +20,7 @@
"homepage": "https://github.com/PolymerElements/iron-input",
"ignore": [],
"dependencies": {
"iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
@ -28,14 +29,14 @@
"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": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.8",
"_release": "1.0.9",
"_resolution": {
"type": "version",
"tag": "1.0.8",
"commit": "55d2b39ead32b8d90da538daa1a6681fd9ae89d9"
"tag": "v1.0.9",
"commit": "6565b5d1b5f7030eb05378718163def8e9c709b7"
},
"_source": "git://github.com/PolymerElements/iron-input.git",
"_target": "^1.0.0",

View File

@ -1,22 +1,25 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: AnFRDBxxASn2RP4u+CHJS04g2klVTM+YL1fgNfkNIiECChymGRkeBiF7zvWPfodqPGKWhBZPAMxVuFKbztawQ95kWlbPSTNJtWhHhPcRarV5AYvjhyUV372E3REZ4CGt+T8nghD9bdJiMX5x0pXAz+wfBPPpiHwbiSPPjFLFvTs=
- secure: SvsE+VQL35CZ967ZVy0+7o5xclnBM8egjhsjNRG7WxVPZQboCQ3Xwm8tIDQSWeagM3ZQRkTGca4ta91F1ZEhm4Jdt5CwKhhSNC6JgS3CX819r9UKgUnSS3nvWdqcZq4GXcMoOZm4qE9ttd3xdoKCfkLRQlEGAvM2TEw69mBhj24=
node_js: 4
- CXX=g++-4.8
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View File

@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, #40
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:

View File

@ -1,6 +1,6 @@
{
"name": "iron-input",
"version": "1.0.8",
"version": "1.0.9",
"description": "An input element with data binding",
"authors": [
"The Polymer Authors"
@ -20,6 +20,7 @@
"homepage": "https://github.com/PolymerElements/iron-input",
"ignore": [],
"dependencies": {
"iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
@ -28,7 +29,7 @@
"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": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View File

@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<script>
@ -68,18 +69,22 @@ is separate from validation, and `allowed-pattern` does not affect how the input
},
/**
* 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 `type` attribute (only
* supported for `type=number`).
* Set to true to prevent the user from entering invalid input. If `allowedPattern` is set,
* any character typed by the user will be matched against that pattern, and rejected if it's not a match.
* Pasted input will have each character checked individually; if any character
* doesn't match `allowedPattern`, the entire pasted string will be rejected.
* If `allowedPattern` is not set, it will use the `type` attribute (only supported for `type=number`).
*/
preventInvalidInput: {
type: Boolean
},
/**
* Regular expression expressing a set of characters to enforce the validity of input characters.
* The recommended value should follow this format: `[a-ZA-Z0-9.+-!;:]` that list the characters
* allowed as input.
* Regular expression that list the characters allowed as input.
* This pattern represents the allowed characters for the field; as the user inputs text,
* each individual character will be checked against the pattern (rather than checking
* the entire value as a whole). The recommended format should be a list of allowed characters;
* for example, `[a-zA-Z0-9.+-!;:]`
*/
allowedPattern: {
type: String,
@ -103,6 +108,46 @@ is separate from validation, and `allowed-pattern` does not affect how the input
'keypress': '_onKeypress'
},
registered: function() {
// Feature detect whether we need to patch dispatchEvent (i.e. on FF and IE).
if (!this._canDispatchEventOnDisabled()) {
this._origDispatchEvent = this.dispatchEvent;
this.dispatchEvent = this._dispatchEventFirefoxIE;
}
},
created: function() {
Polymer.IronA11yAnnouncer.requestAvailability();
},
_canDispatchEventOnDisabled: function() {
var input = document.createElement('input');
var canDispatch = false;
input.disabled = true;
input.addEventListener('feature-check-dispatch-event', function() {
canDispatch = true;
});
try {
input.dispatchEvent(new Event('feature-check-dispatch-event'));
} catch(e) {}
return canDispatch;
},
_dispatchEventFirefoxIE: function() {
// Due to Firefox bug, events fired on disabled form controls can throw
// errors; furthermore, neither IE nor Firefox will actually dispatch
// events from disabled form controls; as such, we toggle disable around
// the dispatch to allow notifying properties to notify
// See issue #47 for details
var disabled = this.disabled;
this.disabled = false;
this._origDispatchEvent.apply(this, arguments);
this.disabled = disabled;
},
get _patternRegExp() {
var pattern;
if (this.allowedPattern) {
@ -143,6 +188,7 @@ is separate from validation, and `allowed-pattern` does not affect how the input
if (this.preventInvalidInput && !this._patternAlreadyChecked) {
var valid = this._checkPatternValidity();
if (!valid) {
this._announceInvalidCharacter('Invalid string of characters not entered.');
this.value = this._previousValidInput;
}
}
@ -203,6 +249,7 @@ is separate from validation, and `allowed-pattern` does not affect how the input
var thisChar = String.fromCharCode(event.charCode);
if (this._isPrintable(event) && !regexp.test(thisChar)) {
event.preventDefault();
this._announceInvalidCharacter('Invalid character ' + thisChar + ' not entered.');
}
},
@ -225,23 +272,29 @@ is separate from validation, and `allowed-pattern` does not affect how the input
* @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;
// First, check what the browser thinks. Some inputs (like type=number)
// behave weirdly and will set the value to "" if something invalid is
// entered, but will set the validity correctly.
var valid = this.checkValidity();
// Only do extra checking if the browser thought this was valid.
if (valid) {
// Empty, required input is invalid
if (this.required && this.value === '') {
valid = false;
} else if (this.hasValidator()) {
valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
}
}
var valid;
if (this.hasValidator()) {
valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
} else {
valid = this.checkValidity();
this.invalid = !valid;
}
this.invalid = !valid;
this.fire('iron-input-validate');
return valid;
}
},
_announceInvalidCharacter: function(message) {
this.fire('iron-announce', { text: message });
}
});
/*

View File

@ -0,0 +1,32 @@
<!--
@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">
<dom-module id="disabled-input">
<template>
<input is="iron-input" bind-value="{{myValue}}" invalid="{{myInvalid}}" disabled id="input">
</template>
</dom-module>
<script>
Polymer({
is: 'disabled-input',
properties: {
myValue: {
value: 'foo'
},
myInvalid: {
value: false
}
}
});
</script>

View File

@ -8,7 +8,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--><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>
<title>iron-input tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>

View File

@ -20,6 +20,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../iron-input.html">
<link rel="import" href="letters-only.html">
<link rel="import" href="disabled-input.html">
</head>
<body>
@ -85,10 +86,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="native-and-custom-validator">
<template>
<letters-only></letters-only>
<input is="iron-input" validator="letters-only" pattern="[a-c]*">
</template>
</test-fixture>
<template is="dom-bind" id="bind-to-object">
<input is="iron-input" id="input" bind-value="{{foo}}">
</template>
<test-fixture id="disabled-input">
<template>
<disabled-input></disabled-input>
</template>
</test-fixture>
<script>
suite('basic', function() {
@ -209,8 +223,57 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
input._onInput();
assert.equal(input.bindValue, 'foo');
});
test('disabled input doesn\'t throw on Firefox', function() {
var el = fixture('disabled-input');
var input = el.$.input;
assert.equal(input.bindValue, 'foo');
assert.isFalse(el.myInvalid);
assert.isTrue(input.disabled);
});
test('browser validation beats custom validation', function() {
var input = fixture('native-and-custom-validator')[1];
// The input allows any letters, but the browser only allows one
// of [abc].
input.value = 'aaaa';
input.validate();
assert.isFalse(input.invalid, 'input is valid');
// The validator allows this, but the browser doesn't.
input.value = 'zzz';
input.validate();
assert.isTrue(input.invalid, 'input is invalid');
});
});
suite('a11y', function() {
test('announces invalid characters when _onInput is called', function() {
var input = fixture('prevent-invalid-input');
input.addEventListener('iron-announce', function(event) {
assert.equal(event.detail.text, 'Invalid string of characters not entered.');
});
input.value = 'foo';
input._onInput();
});
test('announces invalid characters on keypress', function() {
var input = fixture('prevent-invalid-input');
input.addEventListener('iron-announce', function(event) {
assert.equal(event.detail.text, 'Invalid character a not entered.');
});
// Simulate key press event.
var event = new CustomEvent('keypress', {
bubbles: true,
cancelable: true
});
event.charCode = 97 /* a */;
input.dispatchEvent(event);
});
});
</script>
</body>

View File

@ -45,7 +45,7 @@
"tag": "v1.0.11",
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
},
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
"_source": "git://github.com/polymerelements/paper-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-behaviors"
"_originalSource": "polymerelements/paper-behaviors"
}

View File

@ -32,14 +32,14 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/paper-ripple",
"homepage": "https://github.com/polymerelements/paper-ripple",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
},
"_source": "git://github.com/PolymerElements/paper-ripple.git",
"_source": "git://github.com/polymerelements/paper-ripple.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-ripple"
"_originalSource": "polymerelements/paper-ripple"
}

View File

@ -1,9 +1,9 @@
define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-dialog', 'paper-input'], function (paperDialogHelper, $) {
define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-input'], function (paperDialogHelper, $) {
function onSubmit() {
Dashboard.showLoadingMsg();
var panel = $(this).parents('paper-dialog')[0];
var panel = $(this).parents('dialog')[0];
var collectionId = $('#selectCollectionToAddTo', panel).val();
@ -215,7 +215,7 @@
initEditor(dlg, items);
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -237,7 +237,7 @@
$(dlg).on('iron-overlay-opened', function () {
this.querySelector('#txtDirectoryPickerPath input').focus();
});
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -204,7 +204,7 @@
paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', function () {
dlg.addEventListener('close', function () {
if (dlg.submitted) {
resolve();

View File

@ -528,7 +528,7 @@
paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', resolve);
dlg.addEventListener('close', resolve);
var onTimeout = function () {
updateFilterControls(dlg, options);

View File

@ -113,7 +113,7 @@
paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', function () {
dlg.addEventListener('close', function () {
if (dlg.submitted) {
resolve();

View File

@ -1,4 +1,4 @@
define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-dialog', 'paper-fab'], function (paperDialogHelper, $) {
define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'dialog', 'paper-fab'], function (paperDialogHelper, $) {
var currentItemId;
var currentItemType;
@ -130,7 +130,7 @@
ApiClient.downloadRemoteImage(options).then(function () {
hasChanges = true;
var dlg = $(page).parents('paper-dialog')[0];
var dlg = $(page).parents('dialog')[0];
paperDialogHelper.close(dlg);
});
}
@ -296,7 +296,7 @@
document.body.appendChild(dlg);
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -271,7 +271,7 @@
initEditor(dlg, options);
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -1,4 +1,4 @@
define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-fab'], function (paperDialogHelper, $) {
define(['paperdialoghelper', 'jQuery', 'paper-fab'], function (paperDialogHelper, $) {
var currentItemId;
var currentFile;
@ -85,7 +85,7 @@
Dashboard.showLoadingMsg();
var page = $(this).parents('paper-dialog');
var page = $(this).parents('dialog');
var imageType = $('#selectImageType', page).val();
@ -161,7 +161,7 @@
document.body.appendChild(dlg);
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -1,4 +1,4 @@
define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-fab', 'paper-input', 'paper-checkbox'], function (paperDialogHelper, $) {
define(['paperdialoghelper', 'jQuery', 'paper-fab', 'paper-input', 'paper-checkbox'], function (paperDialogHelper, $) {
var currentItem;
var currentItemType;
@ -301,7 +301,7 @@
document.body.appendChild(dlg);
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);
@ -380,7 +380,7 @@
return false;
});
dlg.addEventListener('iron-overlay-closed', function () {
dlg.addEventListener('close', function () {
Dashboard.hideLoadingMsg();
var foundItem = hasChanges ? currentSearchResult : null;

View File

@ -1,4 +1,4 @@
define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-input', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper, $) {
define(['paperdialoghelper', 'jQuery', 'paper-input', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper, $) {
var currentDeferred;
var hasChanges;
@ -18,7 +18,7 @@
}
var form = this;
var dlg = $(form).parents('paper-dialog')[0];
var dlg = $(form).parents('dialog')[0];
var name = $('#txtValue', form).val();
var type = $('#selectCollectionType', form).val();
@ -63,7 +63,7 @@
return;
}
var dlg = $(this).parents('paper-dialog')[0];
var dlg = $(this).parents('dialog')[0];
var index = this.selectedIndex;
if (index != -1) {
@ -214,7 +214,7 @@
initEditor(dlg, options.collectionTypeOptions);
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
dlg.addEventListener('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -178,7 +178,7 @@
var editorContent = dlg.querySelector('.editorContent');
initEditor(editorContent, options);
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -1,4 +1,4 @@
define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-dialog', 'paper-input', 'paper-item-body', 'paper-icon-item', 'paper-textarea', 'paper-fab'], function (paperDialogHelper, $) {
define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-input', 'paper-item-body', 'paper-icon-item', 'paper-textarea', 'paper-fab'], function (paperDialogHelper, $) {
var currentContext;
var metadataEditorInfo;
@ -6,7 +6,7 @@
function closeDialog(isSubmitted) {
if (currentContext.tagName == 'PAPER-DIALOG') {
if (currentContext.tagName == 'DIALOG') {
paperDialogHelper.close(currentContext);
}
}
@ -463,7 +463,7 @@
});
// For now this is only supported in dialog mode because we have a way of knowing when it closes
if (currentContext.tagName == 'PAPER-DIALOG') {
if (currentContext.tagName == 'DIALOG') {
bindItemChanged(context);
}
}
@ -1239,7 +1239,7 @@
paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', function () {
dlg.addEventListener('close', function () {
unbindItemChanged(dlg);
resolve();
});

View File

@ -34,7 +34,7 @@
paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', function () {
dlg.addEventListener('close', function () {
if (submitted) {
resolve(person);

View File

@ -1,4 +1,4 @@
define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-input'], function (paperDialogHelper, $) {
define(['paperdialoghelper', 'jQuery', 'paper-input'], function (paperDialogHelper, $) {
var lastPlaylistId = '';
@ -221,7 +221,7 @@
initEditor(dlg, items);
$(dlg).on('iron-overlay-closed', onDialogClosed);
$(dlg).on('close', onDialogClosed);
paperDialogHelper.open(dlg);

View File

@ -355,7 +355,7 @@
currentDialog = dlg;
dlg.addEventListener('iron-overlay-closed', function () {
dlg.addEventListener('close', function () {
if (recordingCreated) {
require(['toast'], function (toast) {

View File

@ -16,7 +16,7 @@
margin-left: .5em;
}
.background-theme-b, paper-dialog.background-theme-b {
.background-theme-b, .paperDialog.background-theme-b {
background-color: #181818;
/*background: radial-gradient(circle, #282828, #141414);*/
}

View File

@ -336,7 +336,7 @@ h1, h1 a {
}
h2 {
font-weight: 300;
font-weight: 400;
}
.ui-btn {
@ -839,10 +839,14 @@ paper-input + .fieldDescription {
box-shadow: -3px 0 10px 0 #555;*/
}
.background-theme-a, paper-dialog.background-theme-a {
.background-theme-a, .paperDialog.background-theme-a {
background-color: #f6f6f6;
}
.paperDialog:not(.background-theme-a):not(.background-theme-b) {
background-color: #fff;
}
.ui-page-theme-a .content-secondary {
background: #fff;
}

View File

@ -19,7 +19,7 @@
background-attachment: initial;
}
.background-theme-b, paper-dialog.background-theme-b {
.background-theme-b, .paperDialog.background-theme-b {
background: #181818;
}

View File

@ -13,7 +13,7 @@
font-weight: 400 !important;
}
.background-theme-b, paper-dialog.background-theme-b {
.background-theme-b, .paperDialog.background-theme-b {
background: #161616;
}

View File

@ -138,7 +138,7 @@
document.body.appendChild(dlg);
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('iron-overlay-closed', function (e) {
dlg.addEventListener('close', function (e) {
appStorage.setItem(supporterPlaybackKey, new Date().getTime());
dlg.parentNode.removeChild(dlg);
resolve();

View File

@ -216,14 +216,6 @@ iron-overlay-backdrop {
padding: 0 12px;
}
paper-dialog > *:last-child:not(.buttons) {
margin-bottom: 12px;
}
paper-dialog > *:first-child:not(h2) {
margin-top: 12px;
}
paper-icon-button paper-ripple {
color: inherit !important;
}
@ -559,7 +551,7 @@ div.dialogHeader {
margin-left: .75em;
}
paper-dialog.popupEditor h2.dialogHeader {
.paperDialog.popupEditor h2.dialogHeader {
font-weight: inherit !important;
line-height: 36px;
padding: 0 1em;
@ -571,7 +563,7 @@ paper-dialog.popupEditor h2.dialogHeader {
margin-bottom: 0;
}
paper-dialog.popupEditor {
.paperDialog.popupEditor {
padding-bottom: 100px;
}

View File

@ -179,7 +179,7 @@ define(['paperdialoghelper', 'jQuery'], function (paperDialogHelper, $) {
paperDialogHelper.open(dlg);
currentDialog = dlg;
dlg.addEventListener('iron-overlay-closed', function () {
dlg.addEventListener('close', function () {
currentDialog = null;
});