mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update translations
This commit is contained in:
Luke Pulverenti
parent
9e8e2dddad
commit
569aa605b4
93 changed files with 1443 additions and 319 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-menu-behavior",
|
||||
"version": "1.1.0",
|
||||
"version": "1.1.1",
|
||||
"description": "Provides accessible menu behavior",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
|
|
@ -34,11 +34,11 @@
|
|||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.1.0",
|
||||
"_release": "1.1.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.0",
|
||||
"commit": "b18d5478f1d4d6befb15533716d60d5772f8e812"
|
||||
"tag": "v1.1.1",
|
||||
"commit": "0fc2c95803badd8e8f50cbe7f5d3669d647e7229"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-menu-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-menu-behavior",
|
||||
"version": "1.1.0",
|
||||
"version": "1.1.1",
|
||||
"description": "Provides accessible menu behavior",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
|
|
|
|||
|
|
@ -239,6 +239,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
return;
|
||||
}
|
||||
|
||||
// Do not focus the selected tab if the deepest target is part of the
|
||||
// menu element's local DOM and is focusable.
|
||||
var rootTarget = Polymer.dom(event).rootTarget;
|
||||
if (rootTarget !== this && typeof rootTarget.tabIndex !== "undefined" && !this.isLightDescendant(rootTarget)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.blur();
|
||||
|
||||
// clear the cached focus item
|
||||
|
|
|
|||
|
|
@ -72,7 +72,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
var menu = fixture('basic');
|
||||
MockInteractions.focus(menu);
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, menu.firstElementChild, 'document.activeElement is first item')
|
||||
var ownerRoot = Polymer.dom(menu.firstElementChild).getOwnerRoot() || document;
|
||||
var activeElement = Polymer.dom(ownerRoot).activeElement;
|
||||
assert.equal(activeElement, menu.firstElementChild, 'menu.firstElementChild is focused');
|
||||
done();
|
||||
// wait for async in _onFocus
|
||||
}, 200);
|
||||
|
|
@ -83,7 +85,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
menu.selected = 1;
|
||||
MockInteractions.focus(menu);
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, menu.selectedItem, 'document.activeElement is selected item');
|
||||
var ownerRoot = Polymer.dom(menu.selectedItem).getOwnerRoot() || document;
|
||||
var activeElement = Polymer.dom(ownerRoot).activeElement;
|
||||
assert.equal(activeElement, menu.selectedItem, 'menu.selectedItem is focused');
|
||||
done();
|
||||
// wait for async in _onFocus
|
||||
}, 200);
|
||||
});
|
||||
|
||||
test('focusing non-item content does not auto-focus an item', function(done) {
|
||||
var menu = fixture('basic');
|
||||
menu.extraContent.focus();
|
||||
setTimeout(function() {
|
||||
var menuOwnerRoot = Polymer.dom(menu.extraContent).getOwnerRoot() || document;
|
||||
var menuActiveElement = Polymer.dom(menuOwnerRoot).activeElement;
|
||||
assert.equal(menuActiveElement, menu.extraContent, 'menu.extraContent is focused');
|
||||
assert.equal(Polymer.dom(document).activeElement, menu, 'menu is document.activeElement');
|
||||
done();
|
||||
// wait for async in _onFocus
|
||||
}, 200);
|
||||
|
|
@ -94,7 +111,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
menu.selected = 0;
|
||||
menu.items[1].click();
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, menu.items[1], 'document.activeElement is last activated item');
|
||||
var ownerRoot = Polymer.dom(menu.items[1]).getOwnerRoot() || document;
|
||||
var activeElement = Polymer.dom(ownerRoot).activeElement;
|
||||
assert.equal(activeElement, menu.items[1], 'menu.items[1] is focused');
|
||||
done();
|
||||
// wait for async in _onFocus
|
||||
}, 200);
|
||||
|
|
@ -105,7 +124,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
menu.selected = 0;
|
||||
menu.items[0].click();
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, menu.items[0], 'document.activeElement is last activated item');
|
||||
var ownerRoot = Polymer.dom(menu.items[0]).getOwnerRoot() || document;
|
||||
var activeElement = Polymer.dom(ownerRoot).activeElement;
|
||||
assert.equal(activeElement, menu.items[0], 'menu.items[0] is focused');
|
||||
done();
|
||||
// wait for async in _onFocus
|
||||
}, 200);
|
||||
|
|
|
|||
|
|
@ -87,6 +87,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}, 200);
|
||||
});
|
||||
|
||||
test('focusing non-item content does not auto-focus an item', function(done) {
|
||||
var menubar = fixture('basic');
|
||||
menubar.extraContent.focus();
|
||||
setTimeout(function() {
|
||||
var ownerRoot = Polymer.dom(menubar.extraContent).getOwnerRoot() || document;
|
||||
var activeElement = Polymer.dom(ownerRoot).activeElement;
|
||||
assert.equal(activeElement, menubar.extraContent, 'menubar.extraContent is focused');
|
||||
assert.equal(Polymer.dom(document).activeElement, menubar, 'menubar is document.activeElement');
|
||||
done();
|
||||
// wait for async in _onFocus
|
||||
}, 200);
|
||||
});
|
||||
|
||||
test('last activated item in a multi select menubar is focused', function(done) {
|
||||
var menubar = fixture('multi');
|
||||
menubar.selected = 0;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<content></content>
|
||||
|
||||
<div id="extraContent" tabindex="-1">focusable extra content</div>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
|
@ -31,7 +33,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
behaviors: [
|
||||
Polymer.IronMenuBehavior
|
||||
]
|
||||
],
|
||||
|
||||
get extraContent() {
|
||||
return this.$.extraContent;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<content></content>
|
||||
|
||||
<div id="extraContent" tabindex="-1">focusable extra content</div>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
|
@ -31,7 +33,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
behaviors: [
|
||||
Polymer.IronMenubarBehavior
|
||||
]
|
||||
],
|
||||
|
||||
get extraContent() {
|
||||
return this.$.extraContent;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
|
|
@ -33,11 +33,11 @@
|
|||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||
"_release": "1.3.0",
|
||||
"_release": "1.3.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.3.0",
|
||||
"commit": "b488ce94ec1c17c3a5491af1a2fba2f7382684da"
|
||||
"tag": "v1.3.1",
|
||||
"commit": "efaa64da9dbaa4209483c2d9fd7bf3bd20beb5e2"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
|
|
|
|||
|
|
@ -26,6 +26,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
this._minimumZ = 101;
|
||||
|
||||
this._backdrops = [];
|
||||
|
||||
this._backdropElement = null;
|
||||
Object.defineProperty(this, 'backdropElement', {
|
||||
get: function() {
|
||||
if (!this._backdropElement) {
|
||||
this._backdropElement = document.createElement('iron-overlay-backdrop');
|
||||
}
|
||||
return this._backdropElement;
|
||||
}.bind(this)
|
||||
});
|
||||
}
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype._applyOverlayZ = function(overlay, aboveZ) {
|
||||
|
|
@ -107,15 +117,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}
|
||||
};
|
||||
|
||||
Object.defineProperty(Polymer.IronOverlayManagerClass.prototype, "backdropElement", {
|
||||
get: function() {
|
||||
if (!this._backdropElement) {
|
||||
this._backdropElement = document.createElement('iron-overlay-backdrop');
|
||||
}
|
||||
return this._backdropElement;
|
||||
}
|
||||
});
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype.getBackdrops = function() {
|
||||
return this._backdrops;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
"tag": "v1.2.1",
|
||||
"commit": "1e6a7ee05e5ff350472ffc1ee780f145a7606b7b"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||
"_source": "git://github.com/polymerelements/iron-selector.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-selector"
|
||||
"_originalSource": "polymerelements/iron-selector"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-dialog-behavior",
|
||||
"version": "1.1.1",
|
||||
"version": "1.2.0",
|
||||
"description": "Implements a behavior used for material design dialogs",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
|
|
@ -26,17 +26,19 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.0",
|
||||
"paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.1.1",
|
||||
"_release": "1.2.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.1",
|
||||
"commit": "5831039e9f878c63478064abed115c98992b5504"
|
||||
"tag": "v1.2.0",
|
||||
"commit": "a3be07d2784073d5e9e5175fb7d13f7b1f2a5558"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-dialog-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-dialog-behavior",
|
||||
"version": "1.1.1",
|
||||
"version": "1.2.0",
|
||||
"description": "Implements a behavior used for material design dialogs",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
|
|
@ -26,9 +26,11 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.0",
|
||||
"paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,83 +21,72 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<link rel="import" href="simple-dialog.html">
|
||||
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../../paper-button/paper-button.html">
|
||||
<link rel="import" href="../../paper-dialog-scrollable/paper-dialog-scrollable.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
|
||||
<style is="custom-style">
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<style is="custom-style" include="demo-pages-shared-styles"></style>
|
||||
</head>
|
||||
<body unresolved onclick="clickHandler(event)">
|
||||
<body unresolved class="centered">
|
||||
|
||||
<div class="vertical-section centered">
|
||||
|
||||
<button data-dialog="dialog">dialog</button>
|
||||
|
||||
<simple-dialog id="dialog">
|
||||
<h2>Dialog Title</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</simple-dialog>
|
||||
|
||||
<button data-dialog="alert">modal alert</button>
|
||||
|
||||
<simple-dialog id="alert" modal role="alertdialog">
|
||||
<h2>Alert</h2>
|
||||
<p>Discard draft?</p>
|
||||
<div class="buttons">
|
||||
<paper-button data-dialog="multiple">More details</paper-button>
|
||||
<paper-button dialog-dismiss>Cancel</paper-button>
|
||||
<paper-button dialog-confirm autofocus>Discard</paper-button>
|
||||
</div>
|
||||
</simple-dialog>
|
||||
|
||||
<simple-dialog id="multiple" modal>
|
||||
<h2>Details</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<paper-button dialog-confirm autofocus>OK</paper-button>
|
||||
</simple-dialog>
|
||||
|
||||
<button data-dialog="scrolling">scrolling</button>
|
||||
|
||||
<simple-dialog id="scrolling">
|
||||
<h2>Scrolling</h2>
|
||||
<paper-dialog-scrollable>
|
||||
<h3>An element with <code>PaperDialogBehavior</code> can be opened, closed, toggled. Use <code>h2</code> for the title</h3>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-button raised onclick="dialog.toggle()">dialog</paper-button>
|
||||
<simple-dialog id="dialog">
|
||||
<h2>Dialog Title</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</paper-dialog-scrollable>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-dismiss>Cancel</paper-button>
|
||||
<paper-button dialog-confirm>OK</paper-button>
|
||||
</div>
|
||||
</simple-dialog>
|
||||
</simple-dialog>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
</div>
|
||||
<h3>An element with <code>PaperDialogBehavior</code> can be modal. Use the attributes <code>dialog-dismiss</code> and <code>dialog-confirm</code> on the children to close it.</h3>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-button raised onclick="modalAlert.toggle()">modal alert</paper-button>
|
||||
<simple-dialog id="modalAlert" modal role="alertdialog">
|
||||
<h2>Alert</h2>
|
||||
<p>Discard draft?</p>
|
||||
<div class="buttons">
|
||||
<paper-button onclick="modalDetails.toggle()">More details</paper-button>
|
||||
<paper-button dialog-dismiss>Cancel</paper-button>
|
||||
<paper-button dialog-confirm autofocus>Discard</paper-button>
|
||||
</div>
|
||||
</simple-dialog>
|
||||
<simple-dialog id="modalDetails" modal>
|
||||
<h2>Details</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-confirm autofocus>OK</paper-button>
|
||||
</div>
|
||||
</simple-dialog>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<script>
|
||||
|
||||
function clickHandler(e) {
|
||||
if (!e.target.hasAttribute('data-dialog')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var id = e.target.getAttribute('data-dialog');
|
||||
var dialog = document.getElementById(id);
|
||||
if (dialog) {
|
||||
dialog.toggle();
|
||||
e.target.toggleAttribute && e.target.toggleAttribute('data-dialog-opened', dialog.opened);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<h3>Use <code>paper-dialog-scrollable</code> for scrolling content</h3>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-button raised onclick="scrolling.toggle()">scrolling</paper-button>
|
||||
<simple-dialog id="scrolling">
|
||||
<h2>Scrolling</h2>
|
||||
<paper-dialog-scrollable>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</paper-dialog-scrollable>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-dismiss>Cancel</paper-button>
|
||||
<paper-button dialog-confirm>OK</paper-button>
|
||||
</div>
|
||||
</simple-dialog>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -77,39 +77,28 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
properties: {
|
||||
|
||||
/**
|
||||
* If `modal` is true, this implies `no-cancel-on-outside-click` and `with-backdrop`.
|
||||
* If `modal` is true, this implies `no-cancel-on-outside-click`, `no-cancel-on-esc-key` and `with-backdrop`.
|
||||
*/
|
||||
modal: {
|
||||
observer: '_modalChanged',
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/** @type {?Node} */
|
||||
_lastFocusedElement: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
_boundOnFocus: {
|
||||
type: Function,
|
||||
value: function() {
|
||||
return this._onFocus.bind(this);
|
||||
}
|
||||
},
|
||||
|
||||
_boundOnBackdropClick: {
|
||||
type: Function,
|
||||
value: function() {
|
||||
return this._onBackdropClick.bind(this);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_modalChanged(modal, _readied)'
|
||||
],
|
||||
|
||||
listeners: {
|
||||
'tap': '_onDialogClick',
|
||||
'iron-overlay-opened': '_onIronOverlayOpened',
|
||||
'iron-overlay-closed': '_onIronOverlayClosed'
|
||||
'tap': '_onDialogClick'
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
// Only now these properties can be read.
|
||||
this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
|
||||
this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
|
||||
this.__prevWithBackdrop = this.withBackdrop;
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
|
|
@ -122,17 +111,34 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
Polymer.dom(this).unobserveNodes(this._ariaObserver);
|
||||
},
|
||||
|
||||
_modalChanged: function() {
|
||||
if (this.modal) {
|
||||
_modalChanged: function(modal, readied) {
|
||||
if (modal) {
|
||||
this.setAttribute('aria-modal', 'true');
|
||||
} else {
|
||||
this.setAttribute('aria-modal', 'false');
|
||||
}
|
||||
// modal implies noCancelOnOutsideClick and withBackdrop if true, don't overwrite
|
||||
// those properties otherwise.
|
||||
if (this.modal) {
|
||||
|
||||
// modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop.
|
||||
// We need to wait for the element to be ready before we can read the
|
||||
// properties values.
|
||||
if (!readied) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (modal) {
|
||||
this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
|
||||
this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
|
||||
this.__prevWithBackdrop = this.withBackdrop;
|
||||
this.noCancelOnOutsideClick = true;
|
||||
this.noCancelOnEscKey = true;
|
||||
this.withBackdrop = true;
|
||||
} else {
|
||||
// If the value was changed to false, let it false.
|
||||
this.noCancelOnOutsideClick = this.noCancelOnOutsideClick &&
|
||||
this.__prevNoCancelOnOutsideClick;
|
||||
this.noCancelOnEscKey = this.noCancelOnEscKey &&
|
||||
this.__prevNoCancelOnEscKey;
|
||||
this.withBackdrop = this.withBackdrop && this.__prevWithBackdrop;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -162,57 +168,21 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
this.closingReason.confirmed = confirmed;
|
||||
},
|
||||
|
||||
/**
|
||||
* Will dismiss the dialog if user clicked on an element with dialog-dismiss
|
||||
* or dialog-confirm attribute.
|
||||
*/
|
||||
_onDialogClick: function(event) {
|
||||
var target = Polymer.dom(event).rootTarget;
|
||||
while (target && target !== this) {
|
||||
if (target.hasAttribute) {
|
||||
if (target.hasAttribute('dialog-dismiss')) {
|
||||
this._updateClosingReasonConfirmed(false);
|
||||
this.close();
|
||||
event.stopPropagation();
|
||||
break;
|
||||
} else if (target.hasAttribute('dialog-confirm')) {
|
||||
this._updateClosingReasonConfirmed(true);
|
||||
this.close();
|
||||
event.stopPropagation();
|
||||
break;
|
||||
}
|
||||
}
|
||||
target = Polymer.dom(target).parentNode;
|
||||
}
|
||||
},
|
||||
|
||||
_onIronOverlayOpened: function() {
|
||||
if (this.modal) {
|
||||
document.body.addEventListener('focus', this._boundOnFocus, true);
|
||||
document.body.addEventListener('click', this._boundOnBackdropClick, true);
|
||||
}
|
||||
},
|
||||
|
||||
_onIronOverlayClosed: function() {
|
||||
this._lastFocusedElement = null;
|
||||
document.body.removeEventListener('focus', this._boundOnFocus, true);
|
||||
document.body.removeEventListener('click', this._boundOnBackdropClick, true);
|
||||
},
|
||||
|
||||
_onFocus: function(event) {
|
||||
if (this.modal && this._manager.currentOverlay() === this) {
|
||||
if (Polymer.dom(event).path.indexOf(this) !== -1) {
|
||||
this._lastFocusedElement = event.target;
|
||||
} else if (this._lastFocusedElement) {
|
||||
this._lastFocusedElement.focus();
|
||||
} else {
|
||||
this._focusNode.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_onBackdropClick: function(event) {
|
||||
if (this.modal && this._manager.currentOverlay() === this && Polymer.dom(event).path.indexOf(this) === -1) {
|
||||
if (this._lastFocusedElement) {
|
||||
this._lastFocusedElement.focus();
|
||||
} else {
|
||||
this._focusNode.focus();
|
||||
// Search for the element with dialog-confirm or dialog-dismiss,
|
||||
// from the root target until this (excluded).
|
||||
var path = Polymer.dom(event).path;
|
||||
for (var i = 0; i < path.indexOf(this); i++) {
|
||||
var target = path[i];
|
||||
if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') || target.hasAttribute('dialog-confirm'))) {
|
||||
this._updateClosingReasonConfirmed(target.hasAttribute('dialog-confirm'));
|
||||
this.close();
|
||||
event.stopPropagation();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ 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-dialog-behavior tests</title>
|
||||
|
|
@ -18,15 +19,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<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="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
|
||||
<link rel="import" href="test-dialog.html">
|
||||
<link rel="import" href="test-buttons.html">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<test-fixture id="basic">
|
||||
|
|
@ -51,6 +53,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="custom-element-button">
|
||||
<template>
|
||||
<test-dialog>
|
||||
<p>Dialog</p>
|
||||
<div class="buttons">
|
||||
<paper-icon-button icon="cancel" dialog-dismiss></paper-icon-button>
|
||||
<paper-icon-button icon="add-circle" dialog-confirm></paper-icon-button>
|
||||
<paper-icon-button icon="favorite"></paper-icon-button>
|
||||
</div>
|
||||
</test-dialog>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="modal">
|
||||
<template>
|
||||
<test-dialog modal>
|
||||
|
|
@ -63,14 +78,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="backdrop">
|
||||
<test-fixture id="like-modal">
|
||||
<template>
|
||||
<test-dialog with-backdrop>
|
||||
<test-dialog no-cancel-on-esc-key no-cancel-on-outside-click with-backdrop>
|
||||
<p>Dialog</p>
|
||||
<div class="buttons">
|
||||
<button dialog-dismiss>dismiss</button>
|
||||
<button dialog-confirm autofocus>confirm</button>
|
||||
</div>
|
||||
</test-dialog>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
|
@ -132,6 +143,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<script>
|
||||
|
||||
// Firefox 43 and later will keep the focus on the search bar, so we need
|
||||
// to move the focus on the document for focus-related tests.
|
||||
function ensureDocumentHasFocus() {
|
||||
window.top && window.top.focus();
|
||||
}
|
||||
|
||||
function runAfterOpen(dialog, cb) {
|
||||
dialog.addEventListener('iron-overlay-opened', function() {
|
||||
cb();
|
||||
|
|
@ -147,7 +164,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
dialog.addEventListener('iron-overlay-closed', function() {
|
||||
assert('dialog should not close');
|
||||
});
|
||||
dialog.click();
|
||||
MockInteractions.tap(dialog);
|
||||
setTimeout(function() {
|
||||
done();
|
||||
}, 100);
|
||||
|
|
@ -162,7 +179,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.isFalse(event.detail.confirmed, 'dialog is not confirmed');
|
||||
done();
|
||||
});
|
||||
Polymer.dom(dialog).querySelector('[dialog-dismiss]').click();
|
||||
MockInteractions.tap(Polymer.dom(dialog).querySelector('[dialog-dismiss]'));
|
||||
});
|
||||
});
|
||||
|
||||
test('dialog-dismiss on a custom element is handled', function(done) {
|
||||
var dialog = fixture('custom-element-button');
|
||||
runAfterOpen(dialog, function() {
|
||||
dialog.addEventListener('iron-overlay-closed', function(event) {
|
||||
assert.isFalse(event.detail.canceled, 'dialog is not canceled');
|
||||
assert.isFalse(event.detail.confirmed, 'dialog is not confirmed');
|
||||
done();
|
||||
});
|
||||
MockInteractions.tap(Polymer.dom(dialog).querySelector('[dialog-dismiss]'));
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -174,11 +203,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.isFalse(event.detail.confirmed, 'dialog is not confirmed');
|
||||
done();
|
||||
});
|
||||
Polymer.dom(dialog).querySelector('test-buttons').$.dismiss.click();
|
||||
// We don't wait too long to fail.
|
||||
setTimeout(function didNotClose() {
|
||||
done(new Error('dialog-dismiss click did not close overlay'));
|
||||
}, 20);
|
||||
MockInteractions.tap(Polymer.dom(dialog).querySelector('test-buttons').$.dismiss);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -190,7 +215,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.isTrue(event.detail.confirmed, 'dialog is confirmed');
|
||||
done();
|
||||
});
|
||||
Polymer.dom(dialog).querySelector('[dialog-confirm]').click();
|
||||
MockInteractions.tap(Polymer.dom(dialog).querySelector('[dialog-confirm]'));
|
||||
});
|
||||
});
|
||||
|
||||
test('dialog-confirm on a custom element handled', function(done) {
|
||||
var dialog = fixture('custom-element-button');
|
||||
runAfterOpen(dialog, function() {
|
||||
dialog.addEventListener('iron-overlay-closed', function(event) {
|
||||
assert.isFalse(event.detail.canceled, 'dialog is not canceled');
|
||||
assert.isTrue(event.detail.confirmed, 'dialog is confirmed');
|
||||
done();
|
||||
});
|
||||
MockInteractions.tap(Polymer.dom(dialog).querySelector('[dialog-confirm]'));
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -202,18 +239,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.isTrue(event.detail.confirmed, 'dialog is confirmed');
|
||||
done();
|
||||
});
|
||||
Polymer.dom(dialog).querySelector('test-buttons').$.confirm.click();
|
||||
// We don't wait too long to fail.
|
||||
setTimeout(function didNotClose() {
|
||||
done(new Error('dialog-confirm click did not close overlay'));
|
||||
}, 20);
|
||||
MockInteractions.tap(Polymer.dom(dialog).querySelector('test-buttons').$.confirm);
|
||||
});
|
||||
});
|
||||
|
||||
test('clicking dialog-dismiss button closes only the dialog where is contained', function(done) {
|
||||
var dialog = fixture('nestedmodals');
|
||||
var innerDialog = Polymer.dom(dialog).querySelector('test-dialog');
|
||||
Polymer.dom(innerDialog).querySelector('[dialog-dismiss]').click();
|
||||
MockInteractions.tap(Polymer.dom(innerDialog).querySelector('[dialog-dismiss]'));
|
||||
setTimeout(function() {
|
||||
assert.isFalse(innerDialog.opened, 'inner dialog is closed');
|
||||
assert.isTrue(dialog.opened, 'dialog is still open');
|
||||
|
|
@ -224,7 +257,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
test('clicking dialog-confirm button closes only the dialog where is contained', function(done) {
|
||||
var dialog = fixture('nestedmodals');
|
||||
var innerDialog = Polymer.dom(dialog).querySelector('test-dialog');
|
||||
Polymer.dom(innerDialog).querySelector('[dialog-confirm]').click();
|
||||
MockInteractions.tap(Polymer.dom(innerDialog).querySelector('[dialog-confirm]'));
|
||||
setTimeout(function() {
|
||||
assert.isFalse(innerDialog.opened, 'inner dialog is closed');
|
||||
assert.isTrue(dialog.opened, 'dialog is still open');
|
||||
|
|
@ -232,20 +265,53 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}, 10);
|
||||
});
|
||||
|
||||
test('modal dialog has backdrop', function() {
|
||||
var dialog = fixture('modal');
|
||||
assert.isTrue(dialog.withBackdrop, 'withBackdrop is true');
|
||||
});
|
||||
var properties = ['noCancelOnEscKey', 'noCancelOnOutsideClick', 'withBackdrop'];
|
||||
properties.forEach(function(property) {
|
||||
|
||||
test('modal sets ' + property + ' to true', function() {
|
||||
var dialog = fixture('modal');
|
||||
assert.isTrue(dialog[property], property);
|
||||
});
|
||||
|
||||
test('modal toggling keeps current value of ' + property, function() {
|
||||
var dialog = fixture('modal');
|
||||
// Changed to false while modal is true.
|
||||
dialog[property] = false;
|
||||
dialog.modal = false;
|
||||
assert.isFalse(dialog[property], property + ' is false');
|
||||
});
|
||||
|
||||
test('modal toggling keeps previous value of ' + property, function() {
|
||||
var dialog = fixture('basic');
|
||||
// Changed before modal is true.
|
||||
dialog[property] = true;
|
||||
// Toggle twice to trigger observer.
|
||||
dialog.modal = true;
|
||||
dialog.modal = false;
|
||||
assert.isTrue(dialog[property], property + ' is still true');
|
||||
});
|
||||
|
||||
test('default modal does not override ' + property +' (attribute)', function() {
|
||||
// Property is set on ready from attribute.
|
||||
var dialog = fixture('like-modal');
|
||||
assert.isTrue(dialog[property], property + ' is true');
|
||||
});
|
||||
|
||||
test('modal toggling keeps previous value of ' + property + ' (attribute)', function() {
|
||||
// Property is set on ready from attribute.
|
||||
var dialog = fixture('like-modal');
|
||||
// Toggle twice to trigger observer.
|
||||
dialog.modal = true;
|
||||
dialog.modal = false;
|
||||
assert.isTrue(dialog[property], property + ' is still true');
|
||||
});
|
||||
|
||||
test('modal dialog has no-cancel-on-outside-click', function() {
|
||||
var dialog = fixture('modal');
|
||||
assert.isTrue(dialog.noCancelOnOutsideClick, 'noCancelOnOutsideClick is true');
|
||||
});
|
||||
|
||||
test('clicking outside a modal dialog does not move focus from dialog', function(done) {
|
||||
var dialog = fixture('modal');
|
||||
runAfterOpen(dialog, function() {
|
||||
document.body.click();
|
||||
MockInteractions.tap(document.body);
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, Polymer.dom(dialog).querySelector('[autofocus]'), 'document.activeElement is the autofocused button');
|
||||
done();
|
||||
|
|
@ -262,11 +328,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
// should not throw exception here
|
||||
done();
|
||||
});
|
||||
button.click();
|
||||
MockInteractions.tap(button);
|
||||
});
|
||||
});
|
||||
|
||||
test('multiple modal dialogs opened, handle focus change', function(done) {
|
||||
ensureDocumentHasFocus();
|
||||
|
||||
var dialogs = fixture('multiple');
|
||||
var focusChange = sinon.stub();
|
||||
document.body.addEventListener('focus', focusChange, true);
|
||||
|
|
@ -286,6 +354,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
|
||||
test('multiple modal dialogs opened, handle backdrop click', function(done) {
|
||||
ensureDocumentHasFocus();
|
||||
|
||||
var dialogs = fixture('multiple');
|
||||
var focusChange = sinon.stub();
|
||||
document.body.addEventListener('focus', focusChange, true);
|
||||
|
|
@ -295,7 +365,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
dialogs[1].async(dialogs[1].open, 10);
|
||||
dialogs[1].addEventListener('iron-overlay-opened', function() {
|
||||
// This will trigger click listener for both dialogs.
|
||||
document.body.click();
|
||||
MockInteractions.tap(document.body);
|
||||
// Wait 10ms to allow focus changes
|
||||
setTimeout(function() {
|
||||
// Should not enter in an infinite loop.
|
||||
|
|
@ -315,8 +385,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
dialog.removeEventListener('iron-overlay-opened', onFirstOpen);
|
||||
dialog.addEventListener('iron-overlay-closed', onFirstClose);
|
||||
// Set the focus on dismiss button
|
||||
// Calling .focus() won't trigger the dialog._onFocus
|
||||
Polymer.dom(dialog).querySelector('[dialog-dismiss]').dispatchEvent(new Event('focus'));
|
||||
MockInteractions.focus(Polymer.dom(dialog).querySelector('[dialog-dismiss]'));
|
||||
// Close the dialog
|
||||
dialog.close();
|
||||
}
|
||||
|
|
@ -328,7 +397,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}
|
||||
|
||||
function onSecondOpen() {
|
||||
document.body.click();
|
||||
MockInteractions.tap(document.body);
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, Polymer.dom(dialog).querySelector('[autofocus]'), 'document.activeElement is the autofocused button');
|
||||
done();
|
||||
|
|
@ -382,8 +451,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue