1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-03-04 22:39:49 -05:00
parent 7dbb1f7535
commit b447272b19
26 changed files with 478 additions and 107 deletions

View file

@ -15,12 +15,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.1.17", "version": "1.1.19",
"_release": "1.1.17", "_release": "1.1.19",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.1.17", "tag": "1.1.19",
"commit": "63e912c84d018cb8b6adb6975898d1bde3961b16" "commit": "703a21b89d8650d4520fb2f5f16d10161721c3e4"
}, },
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git", "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.1.5", "_target": "~1.1.5",

View file

@ -4,18 +4,21 @@ define([], function () {
if (elem.tagName !== "IMG") { if (elem.tagName !== "IMG") {
var tmp = new Image(); return new Promise(function (resolve, reject) {
tmp.onload = function () { var tmp = new Image();
elem.style.backgroundImage = "url('" + url + "')";
}; tmp.onload = function () {
tmp.src = url; elem.style.backgroundImage = "url('" + url + "')";
resolve(elem);
};
tmp.src = url;
});
} else { } else {
elem.setAttribute("src", url); elem.setAttribute("src", url);
return Promise.resolve(elem);
} }
return Promise.resolve(elem);
} }
return { return {

View file

@ -1,13 +1,23 @@
define(['cryptojs-md5'], function () { define(['cryptojs-md5'], function () {
function setImageIntoElement(elem, url) { function loadImage(elem, url) {
if (elem.tagName !== "IMG") { if (elem.tagName !== "IMG") {
elem.style.backgroundImage = "url('" + url + "')"; return new Promise(function (resolve, reject) {
var tmp = new Image();
tmp.onload = function () {
elem.style.backgroundImage = "url('" + url + "')";
resolve(elem);
};
tmp.src = url;
});
} else { } else {
elem.setAttribute("src", url); elem.setAttribute("src", url);
return Promise.resolve(elem);
} }
} }
@ -151,12 +161,10 @@ define(['cryptojs-md5'], function () {
return getImageUrl(url).then(function (localUrl) { return getImageUrl(url).then(function (localUrl) {
setImageIntoElement(elem, localUrl); return loadImage(elem, localUrl);
return elem;
}, function () { }, function () {
setImageIntoElement(elem, url); return loadImage(elem, url);
return elem;
}); });
} }
}; };

View file

@ -23,11 +23,13 @@
function onBackCommand(e) { function onBackCommand(e) {
inputManager.off(dlg, onBackCommand); if (e.detail.command == 'back') {
inputManager.off(dlg, onBackCommand);
self.closedByBack = true; self.closedByBack = true;
dlg.close(); dlg.close();
e.preventDefault(); e.preventDefault();
}
} }
function onDialogClosed() { function onDialogClosed() {

View file

@ -62,6 +62,15 @@ define(['appSettings', 'apiClientResolver', 'events'], function (appsettings, ap
return self.get('language'); return self.get('language');
}; };
self.skipLength = function (val) {
if (val != null) {
self.set('skipLength', val.toString());
}
return parseInt(self.get('skipLength') || '15000');
};
self.serverConfig = function (config) { self.serverConfig = function (config) {
if (config) { if (config) {

View file

@ -1,7 +1,7 @@
{ {
"name": "iron-icon", "name": "iron-icon",
"private": true, "private": true,
"version": "1.0.7", "version": "1.0.8",
"license": "http://polymer.github.io/LICENSE.txt", "license": "http://polymer.github.io/LICENSE.txt",
"description": "An element that supports displaying an icon", "description": "An element that supports displaying an icon",
"main": "iron-icon.html", "main": "iron-icon.html",
@ -17,6 +17,7 @@
"type": "git", "type": "git",
"url": "git://github.com/PolymerElements/iron-icon.git" "url": "git://github.com/PolymerElements/iron-icon.git"
}, },
"ignore": [],
"dependencies": { "dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0", "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0", "iron-meta": "polymerelements/iron-meta#^1.0.0",
@ -28,17 +29,17 @@
"iron-iconset": "polymerelements/iron-iconset#^1.0.0", "iron-iconset": "polymerelements/iron-iconset#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0", "iron-icons": "polymerelements/iron-icons#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0", "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"web-component-tester": "*", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"homepage": "https://github.com/polymerelements/iron-icon", "homepage": "https://github.com/PolymerElements/iron-icon",
"_release": "1.0.7", "_release": "1.0.8",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.7", "tag": "v1.0.8",
"commit": "6f4d152dc3998a6cc12a5a585a654f893dc99381" "commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
}, },
"_source": "git://github.com/polymerelements/iron-icon.git", "_source": "git://github.com/PolymerElements/iron-icon.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/iron-icon" "_originalSource": "PolymerElements/iron-icon"
} }

View file

@ -0,0 +1,25 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: Cyo7MV8FASyf2EZyrSmDbmoZmopQhuTbV79Ntl6eDq6JxEOAApULHn6W+ht0tvmaA+L2cRNq3Z4uvy3tbZCI5SCgQuEKLDJFoghzNp4Izc54bBlJzsxMjcgxEEMbw1jDIKp+PJ+1+8oyT5H1NogcGoNWcvMCjn+8Vl64/999mhw=
- secure: dI3wfjJoooFlq6Kb8V1fkbc9N5jrvw7dExN4tp4KlvJFiXIvgb823jEyLGnK/oeVLwP9yncvOYxiG/enNbjpk6fId3zjwptN2H1am3pIsPQASOZJ0Pwvwa1dX7EYGk2kxOwY1pyX4is/QRVDrlUkLm3YAPOFfYJEiVB7m6TNFIo=
- 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

@ -0,0 +1,77 @@
<!--
This file is autogenerated based on
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
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the users goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
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: [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.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
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 in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so dont be afraid to ask us if you need help with that!

View file

@ -1,7 +1,7 @@
{ {
"name": "iron-icon", "name": "iron-icon",
"private": true, "private": true,
"version": "1.0.7", "version": "1.0.8",
"license": "http://polymer.github.io/LICENSE.txt", "license": "http://polymer.github.io/LICENSE.txt",
"description": "An element that supports displaying an icon", "description": "An element that supports displaying an icon",
"main": "iron-icon.html", "main": "iron-icon.html",
@ -17,6 +17,7 @@
"type": "git", "type": "git",
"url": "git://github.com/PolymerElements/iron-icon.git" "url": "git://github.com/PolymerElements/iron-icon.git"
}, },
"ignore": [],
"dependencies": { "dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0", "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0", "iron-meta": "polymerelements/iron-meta#^1.0.0",
@ -28,7 +29,7 @@
"iron-iconset": "polymerelements/iron-iconset#^1.0.0", "iron-iconset": "polymerelements/iron-iconset#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0", "iron-icons": "polymerelements/iron-icons#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0", "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"web-component-tester": "*", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
} }
} }

View file

@ -2,11 +2,11 @@
<!-- <!--
@license @license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> -->
<html> <html>
<head> <head>

View file

@ -58,6 +58,10 @@ how to create a custom iconset.
See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available
in the various iconsets. in the various iconsets.
To load a subset of icons from one of the default `iron-icons` sets, you can
use the [poly-icon](https://poly-icon.appspot.com/) tool. It allows you
to select individual icons, and creates an iconset from them that you can
use directly in your elements.
### Styling ### Styling
@ -138,7 +142,8 @@ Custom property | Description | Default
* @type {!Polymer.IronMeta} * @type {!Polymer.IronMeta}
*/ */
_meta: { _meta: {
value: Polymer.Base.create('iron-meta', {type: 'iconset'}) value: Polymer.Base.create('iron-meta', {type: 'iconset'}),
observer: '_updateIcon'
} }
}, },
@ -163,7 +168,14 @@ Custom property | Description | Default
/** @suppress {visibility} */ /** @suppress {visibility} */
_updateIcon: function() { _updateIcon: function() {
if (this._usesIconset()) { if (this._usesIconset()) {
if (this._iconsetName) { if (this._img && this._img.parentNode) {
Polymer.dom(this.root).removeChild(this._img);
}
if (this._iconName === "") {
if (this._iconset) {
this._iconset.removeIcon(this);
}
} else if (this._iconsetName && this._meta) {
this._iconset = /** @type {?Polymer.Iconset} */ ( this._iconset = /** @type {?Polymer.Iconset} */ (
this._meta.byKey(this._iconsetName)); this._meta.byKey(this._iconsetName));
if (this._iconset) { if (this._iconset) {
@ -174,6 +186,9 @@ Custom property | Description | Default
} }
} }
} else { } else {
if (this._iconset) {
this._iconset.removeIcon(this);
}
if (!this._img) { if (!this._img) {
this._img = document.createElement('img'); this._img = document.createElement('img');
this._img.style.width = '100%'; this._img.style.width = '100%';

View file

@ -1,5 +1,4 @@
<!doctype html> <!DOCTYPE html><!--
<!--
@license @license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@ -7,10 +6,7 @@ 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 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 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 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> --><html><head>
<html>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Tests</title> <title>Tests</title>
@ -20,12 +16,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body> <body>
<script> <script>
WCT.loadSuites([ WCT.loadSuites([
'iron-icon.html' 'iron-icon.html',
'iron-icon.html?dom=shadow'
]); ]);
</script> </script>
</body>
</html>
</body></html>

View file

@ -24,6 +24,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../../iron-iconset/iron-iconset.html"> <link rel="import" href="../../iron-iconset/iron-iconset.html">
<link rel="import" href="../../promise-polyfill/promise-polyfill.html"> <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
<link rel="import" href="../../test-fixture/test-fixture.html"> <link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="icon-holder.html">
</head> </head>
<body> <body>
@ -61,6 +62,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template> </template>
</test-fixture> </test-fixture>
<test-fixture id="SrcIconSwitch">
<template>
<iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset>
<iron-icon></iron-icon>
</template>
</test-fixture>
<test-fixture id="ParentForceUpdate">
<template>
<icon-holder>
<iron-icon></iron-icon>
</icon-holder>
</template>
</test-fixture>
<script> <script>
function iconElementFor (node) { function iconElementFor (node) {
var nodes = Polymer.dom(node.root).childNodes; var nodes = Polymer.dom(node.root).childNodes;
@ -143,6 +159,60 @@ suite('<iron-icon>', function() {
}); });
}); });
}); });
suite('when switching between src and icon properties', function() {
var icon;
setup(function() {
var elements = fixture('IconFromIconset');
icon = elements[1];
});
test('will display the icon if both icon and src are set', function() {
icon.src = '../demo/location.png';
icon.icon = 'example:location';
expect(hasIcon(icon)).to.be.true;
expect(iconElementFor(icon)).to.not.exist;
// Check if it works too it we change the affectation order
icon.icon = 'example:location';
icon.src = '../demo/location.png';
expect(hasIcon(icon)).to.be.true;
expect(iconElementFor(icon)).to.not.exist;
});
test('will display the icon when src is defined first and then reset', function() {
icon.src = '../demo/location.png';
icon.icon = null;
icon.src = null;
icon.icon = 'example:location';
expect(hasIcon(icon)).to.be.true;
expect(iconElementFor(icon)).to.not.exist;
});
test('will display the src when icon is defined first and then reset', function() {
icon.src = null;
icon.icon = 'example:location';
icon.src = '../demo/location.png';
icon.icon = null;
expect(hasIcon(icon)).to.be.false;
expect(iconElementFor(icon)).to.exist;
});
test('will display nothing if both properties are unset', function() {
icon.src = '../demo/location.png';
icon.icon = 'example:location';
icon.src = null;
icon.icon = null;
expect(hasIcon(icon)).to.be.false;
expect(iconElementFor(icon)).to.not.exist;
});
});
suite('ancestor direct updates', function() {
test('handle properties set before ready', function() {
var holder = fixture('ParentForceUpdate');
});
});
}); });
</script> </script>

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-menu-behavior", "name": "iron-menu-behavior",
"version": "1.1.3", "version": "1.1.4",
"description": "Provides accessible menu behavior", "description": "Provides accessible menu behavior",
"authors": "The Polymer Authors", "authors": "The Polymer Authors",
"keywords": [ "keywords": [
@ -34,11 +34,11 @@
"web-component-tester": "^4.0.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"_release": "1.1.3", "_release": "1.1.4",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.3", "tag": "v1.1.4",
"commit": "9372abaa7925669fd1a34e9e73c973ed70a05f2f" "commit": "637c4ae4654b53d4ca29ba97239c1ffba13cfc93"
}, },
"_source": "git://github.com/polymerelements/iron-menu-behavior.git", "_source": "git://github.com/polymerelements/iron-menu-behavior.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-menu-behavior", "name": "iron-menu-behavior",
"version": "1.1.3", "version": "1.1.4",
"description": "Provides accessible menu behavior", "description": "Provides accessible menu behavior",
"authors": "The Polymer Authors", "authors": "The Polymer Authors",
"keywords": [ "keywords": [

View file

@ -241,7 +241,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// Do not focus the selected tab if the deepest target is part of the // Do not focus the selected tab if the deepest target is part of the
// menu element's local DOM and is focusable. // menu element's local DOM and is focusable.
var rootTarget = Polymer.dom(event).rootTarget; var rootTarget = /** @type {?HTMLElement} */(
Polymer.dom(event).rootTarget);
if (rootTarget !== this && typeof rootTarget.tabIndex !== "undefined" && !this.isLightDescendant(rootTarget)) { if (rootTarget !== this && typeof rootTarget.tabIndex !== "undefined" && !this.isLightDescendant(rootTarget)) {
return; return;
} }

View file

@ -36,7 +36,7 @@
"tag": "v1.2.4", "tag": "v1.2.4",
"commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4" "commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4"
}, },
"_source": "git://github.com/PolymerElements/iron-selector.git", "_source": "git://github.com/polymerelements/iron-selector.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-selector" "_originalSource": "polymerelements/iron-selector"
} }

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-drawer-panel", "name": "paper-drawer-panel",
"version": "1.0.6", "version": "1.0.7",
"description": "A responsive drawer panel", "description": "A responsive drawer panel",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -28,17 +28,18 @@
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0", "paper-button": "PolymerElements/paper-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0", "paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^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" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"main": "paper-drawer-panel.html", "main": "paper-drawer-panel.html",
"ignore": [], "ignore": [],
"_release": "1.0.6", "_release": "1.0.7",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.6", "tag": "v1.0.7",
"commit": "9dd19ef9153ed303a5f8b6d573179cde31b2f5e6" "commit": "1d791255c062c0c4c4fd9f6f2b2c1ef16b533721"
}, },
"_source": "git://github.com/PolymerElements/paper-drawer-panel.git", "_source": "git://github.com/PolymerElements/paper-drawer-panel.git",
"_target": "~1.0.2", "_target": "~1.0.2",

View file

@ -1,22 +1,25 @@
language: node_js language: node_js
sudo: false sudo: false
before_script: before_script:
- npm install web-component-tester - npm install -g bower polylint web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install - bower install
- polylint
env: env:
global: global:
- secure: PLe0gvvFLKijrgyroIeymIP14SikK6RobNUOqHyUiLDCh9S2/vSBJUp8U5TYkVmpxMr+rcKXpfIhYt/bne97bARTnMjRQUa+rlraek6EPXyFILDsyaTosYD7rmY2f8ViiW+CM3eUA+ym0P8tvYONdTx+CEdO7S6esotfq3LHrLw= - secure: PLe0gvvFLKijrgyroIeymIP14SikK6RobNUOqHyUiLDCh9S2/vSBJUp8U5TYkVmpxMr+rcKXpfIhYt/bne97bARTnMjRQUa+rlraek6EPXyFILDsyaTosYD7rmY2f8ViiW+CM3eUA+ym0P8tvYONdTx+CEdO7S6esotfq3LHrLw=
- secure: U4i/ZSfd87xQ+0YZCKxk3knQQk23V/2IxtSrvY42OnaGi10uz04Cad5XMuBcB1kCyRkAP/e9flQyp4iLaDpG+edm2fxJNPqXepWjtMr0rVFr2LoQ7dPAQCFkzO25dSiO+Wj4ffDO//hwgF5Xl/BXnyRBfSEjURZXr4EP+NjoMWU= - secure: U4i/ZSfd87xQ+0YZCKxk3knQQk23V/2IxtSrvY42OnaGi10uz04Cad5XMuBcB1kCyRkAP/e9flQyp4iLaDpG+edm2fxJNPqXepWjtMr0rVFr2LoQ7dPAQCFkzO25dSiO+Wj4ffDO//hwgF5Xl/BXnyRBfSEjURZXr4EP+NjoMWU=
node_js: 4 - CXX=g++-4.8
node_js: stable
addons: addons:
firefox: latest firefox: latest
apt: apt:
sources: sources:
- google-chrome - google-chrome
- ubuntu-toolchain-r-test
packages: packages:
- google-chrome-stable - google-chrome-stable
- g++-4.8
sauce_connect: true
script: script:
- xvfb-run wct - xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" - "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 that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :) 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 # Polymer Elements
## Guide for Contributors ## 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. 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. 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: 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 ```markdown
(For a single issue) (For a single issue)
Fixes #20 Fixes #20
(For multiple issues) (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: 2. **A succinct description of the design** used to fix any related issues. For example:

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-drawer-panel", "name": "paper-drawer-panel",
"version": "1.0.6", "version": "1.0.7",
"description": "A responsive drawer panel", "description": "A responsive drawer panel",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -28,8 +28,9 @@
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0", "paper-button": "PolymerElements/paper-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0", "paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^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" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"main": "paper-drawer-panel.html", "main": "paper-drawer-panel.html",

View file

@ -16,7 +16,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script> <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html"> <link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../../paper-button/paper-button.html"> <link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../paper-drawer-panel.html"> <link rel="import" href="../paper-drawer-panel.html">
@ -24,6 +24,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<style is="custom-style"> <style is="custom-style">
#paperDrawerPanel [main] { #paperDrawerPanel [main] {
text-align: center;
background-color: var(--google-grey-100); background-color: var(--google-grey-100);
} }
@ -42,13 +43,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
white-space: nowrap; white-space: nowrap;
} }
button {
display: block;
line-height: 40px;
background-color: transparent;
border: none;
font-size: 14px;
margin: 20px;
}
</style> </style>
</head> </head>
<body unresolved> <body unresolved>
<paper-drawer-panel id="paperDrawerPanel"> <paper-drawer-panel id="paperDrawerPanel" force-narrow>
<div drawer></div> <div drawer>
<button tabindex="0">Options</button>
<button tabindex="0">Settings</button>
<button tabindex="0" paper-drawer-toggle>Close drawer</button>
</div>
<div main> <div main>
<div> <div>
<paper-button onclick="flipDrawer()" raised>flip drawer</paper-button> <paper-button onclick="flipDrawer()" raised>flip drawer</paper-button>

View file

@ -230,6 +230,8 @@ Custom property | Description | Default
} }
.left-drawer.narrow-layout > #drawer:not(.iron-selected) { .left-drawer.narrow-layout > #drawer:not(.iron-selected) {
visibility: hidden;
-webkit-transform: translateX(-100%); -webkit-transform: translateX(-100%);
transform: translateX(-100%); transform: translateX(-100%);
} }
@ -242,8 +244,10 @@ Custom property | Description | Default
transform: translateX(100%); transform: translateX(100%);
} }
.right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected), .left-drawer.dragging > #drawer:not(.iron-selected),
.right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) { .left-drawer.peeking > #drawer:not(.iron-selected),
.right-drawer.dragging > #drawer:not(.iron-selected),
.right-drawer.peeking > #drawer:not(.iron-selected) {
visibility: visible; visibility: visible;
} }
@ -272,7 +276,7 @@ Custom property | Description | Default
box-sizing: border-box; box-sizing: border-box;
} }
iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] { iron-selector:not(.narrow-layout) ::content [paper-drawer-toggle] {
display: none; display: none;
} }
</style> </style>
@ -289,13 +293,13 @@ Custom property | Description | Default
activate-event="" activate-event=""
selected="[[selected]]"> selected="[[selected]]">
<div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]" on-transitionend="_onMainTransitionEnd"> <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
<content select="[main]"></content> <content select="[main]"></content>
<div id="scrim" on-tap="closeDrawer"></div> <div id="scrim" on-tap="closeDrawer"></div>
</div> </div>
<div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]"> <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
<content select="[drawer]"></content> <content id="drawerContent" select="[drawer]"></content>
</div> </div>
</iron-selector> </iron-selector>
@ -492,6 +496,25 @@ Custom property | Description | Default
value: 'paper-drawer-toggle' value: 'paper-drawer-toggle'
}, },
/**
* The CSS selector for the element that should receive focus when the drawer is open.
* By default, when the drawer opens, it focuses the first tabbable element. That is,
* the first element that can receive focus.
*/
drawerFocusSelector: {
type: String,
value:
'a[href]:not([tabindex="-1"]),'+
'area[href]:not([tabindex="-1"]),'+
'input:not([disabled]):not([tabindex="-1"]),'+
'select:not([disabled]):not([tabindex="-1"]),'+
'textarea:not([disabled]):not([tabindex="-1"]),'+
'button:not([disabled]):not([tabindex="-1"]),'+
'iframe:not([tabindex="-1"]),'+
'[tabindex]:not([tabindex="-1"]),'+
'[contentEditable=true]:not([tabindex="-1"])'
},
/** /**
* Whether the transition is enabled. * Whether the transition is enabled.
*/ */
@ -506,13 +529,22 @@ Custom property | Description | Default
tap: '_onTap', tap: '_onTap',
track: '_onTrack', track: '_onTrack',
down: '_downHandler', down: '_downHandler',
up: '_upHandler' up: '_upHandler',
transitionend: '_onTransitionEnd'
}, },
observers: [ observers: [
'_forceNarrowChanged(forceNarrow, defaultSelected)' '_forceNarrowChanged(forceNarrow, defaultSelected)',
'_toggleFocusListener(selected)'
], ],
ready: function() {
// Avoid transition at the beginning e.g. page loads and enable
// transitions only after the element is rendered and ready.
this._transition = true;
this._boundFocusListener = this._didFocus.bind(this);
},
/** /**
* Toggles the panel open and closed. * Toggles the panel open and closed.
* *
@ -544,16 +576,19 @@ Custom property | Description | Default
this.selected = 'main'; this.selected = 'main';
}, },
ready: function() { _onTransitionEnd: function (e) {
// Avoid transition at the beginning e.g. page loads and enable var target = Polymer.dom(e).localTarget;
// transitions only after the element is rendered and ready. if (target !== this) {
this._transition = true; // ignore events coming from the light dom
}, return;
}
_onMainTransitionEnd: function (e) { if (e.propertyName === 'left' || e.propertyName === 'right') {
if (e.currentTarget === this.$.main && (e.propertyName === 'left' || e.propertyName === 'right')) {
this.notifyResize(); this.notifyResize();
} }
if (e.propertyName === 'transform' && this.selected === 'drawer') {
var focusedChild = this._getAutoFocusedNode();
focusedChild && focusedChild.focus();
}
}, },
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) { _computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) {
@ -606,15 +641,12 @@ Custom property | Description | Default
this._trackEnd(event); this._trackEnd(event);
break; break;
} }
}, },
_responsiveChange: function(narrow) { _responsiveChange: function(narrow) {
this._setNarrow(narrow); this._setNarrow(narrow);
if (this.narrow) { this.selected = this.narrow ? this.defaultSelected : null;
this.selected = this.defaultSelected;
}
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
this.fire('paper-responsive-change', {narrow: this.narrow}); this.fire('paper-responsive-change', {narrow: this.narrow});
@ -724,12 +756,6 @@ Custom property | Description | Default
} }
this._setPeeking(false); this._setPeeking(false);
} }
var dy = event.detail.dy;
var absDy = Math.abs(dy);
if (absDy >= 70) {
// Ignore trackx until we move past the edge peek.
return;
}
this._moveDrawer(this._translateXForDeltaX(dx)); this._moveDrawer(this._translateXForDeltaX(dx));
} }
@ -743,13 +769,11 @@ Custom property | Description | Default
this._transition = true; this._transition = true;
sharedPanel = null; sharedPanel = null;
this._moveDrawer(null); this._moveDrawer(null);
var dx = event.detail.dx;
var dy = event.detail.dy;
var absDy = Math.abs(dy);
if (this.rightDrawer) { if (this.rightDrawer) {
this[xDirection ? 'closeDrawer' : 'openDrawer'](); this[xDirection ? 'closeDrawer' : 'openDrawer']();
} else { } else {
this[xDirection || dx > -80 || absDy >= 70 ? 'openDrawer' : 'closeDrawer'](); this[xDirection ? 'openDrawer' : 'closeDrawer']();
} }
} }
}, },
@ -758,16 +782,51 @@ Custom property | Description | Default
if (translateX === null) { if (translateX === null) {
return ''; return '';
} }
return this.hasWillChange ? 'translateX(' + translateX + 'px)' : return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
'translate3d(' + translateX + 'px, 0, 0)'; 'translate3d(' + translateX + 'px, 0, 0)';
}, },
_moveDrawer: function(translateX) { _moveDrawer: function(translateX) {
this.transform(this._transformForTranslateX(translateX), this.$.drawer); this.transform(this._transformForTranslateX(translateX), this.$.drawer);
} },
_getDrawerContent: function() {
return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0];
},
_getAutoFocusedNode: function() {
var drawerContent = this._getDrawerContent();
return Polymer.dom(drawerContent).querySelector(this.drawerFocusSelector) || drawerContent;
},
_toggleFocusListener: function(selected) {
if (selected === 'drawer') {
document.addEventListener('focus', this._boundFocusListener, true);
} else {
document.removeEventListener('focus', this._boundFocusListener, true);
}
},
_didFocus: function(event) {
var path = Polymer.dom(event).path;
var focusedChild = path[0];
var drawerContent = this._getDrawerContent();
var focusedChildCameFromDrawer = false;
var autoFocusedNode = this._getAutoFocusedNode();
while (!focusedChildCameFromDrawer && path[0] && path[0].hasAttribute) {
focusedChildCameFromDrawer = path.shift() === drawerContent;
}
if (!focusedChildCameFromDrawer && autoFocusedNode) {
autoFocusedNode.focus();
}
},
_isDrawerClosed: function(narrow, selected) {
return !narrow || selected !== 'drawer';
}
}); });
}()); }());
</script> </script>
</dom-module> </dom-module>

View file

@ -0,0 +1,78 @@
<!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-drawer-panel tests</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>
<link rel="import" href="../paper-drawer-panel.html">
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
</head>
<style>
body {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
</style>
<body>
<test-fixture id="drawer">
<template>
<paper-drawer-panel force-narrow>
<div drawer>
<input id="innerLink1" tabindex="0" value="inside drawer 1">
<input id="innerLink2" tabindex="0" value="inside drawer 2">
</div>
<div main>
<input id="outerLink" tabindex="0" value="outside drawer">
</div>
</paper-drawer-panel>
</template>
</test-fixture>
<script>
function ensureDocumentHasFocus() {
window.top && window.top.focus();
}
suite('focus', function() {
var drawer, innerLink, outerLink;
setup(function() {
drawer = fixture('drawer');
innerLink = drawer.querySelector('#innerLink1');
outerLink = drawer.querySelector('#outerLink');
ensureDocumentHasFocus();
});
test('should not focus content in drawer if the drawer is closed', function(done) {
Polymer.Base.async(function() {
expect(Polymer.dom(document).activeElement).to.not.be.equal(innerLink);
done();
}, 1);
MockInteractions.focus(innerLink);
});
});
</script>
</body>
</html>

View file

@ -20,8 +20,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
WCT.loadSuites([ WCT.loadSuites([
'positioning.html', 'positioning.html',
'small-devices.html', 'small-devices.html',
'focus.html',
'positioning.html?dom=shadow', 'positioning.html?dom=shadow',
'small-devices.html?dom=shadow' 'small-devices.html?dom=shadow',
'focus.html?dom=shadow'
]); ]);
</script> </script>
</body> </body>

View file

@ -34,6 +34,6 @@
"commit": "61fac558012d9ef56ea78ed5435de0c418a4afbb" "commit": "61fac558012d9ef56ea78ed5435de0c418a4afbb"
}, },
"_source": "git://github.com/Polymer/polymer.git", "_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.0.0", "_target": "^1.2.0",
"_originalSource": "Polymer/polymer" "_originalSource": "Polymer/polymer"
} }