This commit is contained in:
Tavares André 2016-02-22 18:41:38 +01:00
commit 9b938fcfdb
240 changed files with 6956 additions and 5917 deletions

View File

@ -12,6 +12,7 @@
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" class="ui-btn-active">${TabActivityLog}</a>
<a href="autoorganizetv.html" data-role="button">${TabTV}</a>
<a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
</div>
<div style="margin: -25px 0 1em; text-align: right;">

View File

@ -11,6 +11,7 @@
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="autoorganizelog.html" data-role="button">${TabActivityLog}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabTV}</a>
<a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
</div>
<form class="libraryFileOrganizerForm">
@ -128,6 +129,11 @@
<td>%e_n</td>
<td>${ValueEpisodeNameUnderscore}</td>
</tr>
<tr>
<td>${FileExtension}</td>
<td>%ext</td>
<td>mkv</td>
</tr>
</tbody>
</table>
@ -171,4 +177,4 @@
</div>
</div>
</body>
</html>
</html>

View File

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.0.37",
"_release": "1.0.37",
"version": "1.0.41",
"_release": "1.0.41",
"_resolution": {
"type": "version",
"tag": "1.0.37",
"commit": "b383fff379b92417525a3295ebbe3b7db9e0b1a4"
"tag": "1.0.41",
"commit": "19bdc440adac07ea1a5491abaec89cbdb1c99e17"
},
"_source": "git://github.com/MediaBrowser/Emby.ApiClient.Javascript.git",
"_target": "~1.0.3",

View File

@ -3444,5 +3444,57 @@
contentType: "application/json"
});
};
self.createPin = function () {
return self.ajax({
type: "POST",
url: self.getUrl('Auth/Pin'),
data: {
deviceId: self.deviceId(),
appName: self.appName()
},
dataType: "json"
});
};
self.getPinStatus = function (pinInfo) {
var queryString = {
deviceId: pinInfo.DeviceId,
pin: pinInfo.Pin
};
return self.ajax({
type: 'GET',
url: self.getUrl('Auth/Pin', queryString),
dataType: 'json'
});
};
function exchangePin(pinInfo) {
return self.ajax({
type: 'POST',
url: self.getUrl('Auth/Pin/Exchange'),
data: {
deviceId: pinInfo.DeviceId,
pin: pinInfo.Pin
},
dataType: 'json'
});
}
self.exchangePin = function (pinInfo) {
return exchangePin(pinInfo).then(function (result) {
if (self.onAuthenticated) {
self.onAuthenticated(self, result);
}
return result;
});
};
};
});

View File

@ -5,7 +5,8 @@
ServerSelection: 1,
ServerSignIn: 2,
SignedIn: 3,
ConnectSignIn: 4
ConnectSignIn: 4,
ServerUpdateNeeded: 5
};
var ConnectionMode = {
@ -214,6 +215,16 @@
return connectUser;
};
var minServerVersion = '3.0.5724';
self.minServerVersion = function (val) {
if (val) {
minServerVersion = val;
}
return minServerVersion;
};
self.appVersion = function () {
return appVersion;
};
@ -1014,6 +1025,30 @@
return (str1 || '').toLowerCase() == (str2 || '').toLowerCase();
}
function compareVersions(a, b) {
// -1 a is smaller
// 1 a is larger
// 0 equal
a = a.split('.');
b = b.split('.');
for (var i = 0, length = Math.max(a.length, b.length) ; i < length; i++) {
var aVal = parseInt(a[i] || '0');
var bVal = parseInt(b[i] || '0');
if (aVal < bVal) {
return -1;
}
if (aVal > bVal) {
return 1;
}
}
return 0;
}
function testNextConnectionMode(tests, index, server, wakeOnLanSendTime, options, resolve) {
if (index >= tests.length) {
@ -1052,8 +1087,18 @@
tryConnect(address, timeout).then(function (result) {
console.log('calling onSuccessfulConnection with connection mode ' + mode + ' with server ' + server.Name);
onSuccessfulConnection(server, result, mode, options, resolve);
if (compareVersions(self.minServerVersion(), result.Version) == 1) {
console.log('minServerVersion requirement not met. Server version: ' + result.Version);
resolve({
State: ConnectionState.ServerUpdateNeeded,
Servers: [server]
});
} else {
console.log('calling onSuccessfulConnection with connection mode ' + mode + ' with server ' + server.Name);
onSuccessfulConnection(server, result, mode, options, resolve);
}
}, function () {

View File

@ -15,12 +15,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.0.83",
"_release": "1.0.83",
"version": "1.0.90",
"_release": "1.0.90",
"_resolution": {
"type": "version",
"tag": "1.0.83",
"commit": "2d07f1da3ed23cf12b40ed2639e42dd737eb83fd"
"tag": "1.0.90",
"commit": "2722d205b177e50517bb46b4d416b8ea2e8e2e3b"
},
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.0.0",

View File

@ -0,0 +1,54 @@
.actionSheet {
display: flex;
justify-content: center;
}
.actionSheet.centered .actionSheetContent {
text-align: center;
align-items: center;
}
.actionSheetContent {
margin: 0 !important;
padding: 1em 1em !important;
flex-direction: column;
display: flex;
justify-content: center;
height: 100%;
}
.actionSheetMenuItem {
padding: .4em .5em;
margin: 0;
text-transform: none;
text-align: inherit;
display: flex;
justify-content: center;
font-weight: inherit;
}
.actionSheetItemIcon {
margin-right: 1.5em !important;
}
.actionSheetScroller {
max-height: 60%;
overflow-x: hidden;
overflow-y: auto;
/* Override default style being applied by polymer */
margin-bottom: 0 !important;
scroll-behavior: smooth;
}
.actionSheetScroller::-webkit-scrollbar, .actionSheetScroller::-webkit-scrollbar {
width: 0 !important;
display: none;
}
h1.actionSheetTitle {
margin: .5em 0 .7em !important;
}
h2.actionSheetTitle {
margin: .25em 0 .55em !important;
}

View File

@ -0,0 +1,196 @@
define(['paperdialoghelper', 'layoutManager', 'paper-button', 'css!./actionsheet'], function (paperdialoghelper, layoutManager) {
function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function getPosition(options) {
var windowHeight = $(window).height();
if (windowHeight < 540) {
return null;
}
var pos = $(options.positionTo).offset();
pos.top += $(options.positionTo).innerHeight() / 2;
pos.left += $(options.positionTo).innerWidth() / 2;
// Account for margins
pos.top -= 24;
pos.left -= 24;
// Account for popup size - we can't predict this yet so just estimate
pos.top -= (55 * options.items.length) / 2;
pos.left -= 80;
// Account for scroll position
pos.top -= $(window).scrollTop();
pos.left -= $(window).scrollLeft();
// Avoid showing too close to the bottom
pos.top = Math.min(pos.top, windowHeight - 300);
pos.left = Math.min(pos.left, $(window).width() - 300);
// Do some boundary checking
pos.top = Math.max(pos.top, 0);
pos.left = Math.max(pos.left, 0);
return pos;
}
function show(options) {
// items
// positionTo
// showCancel
// title
var dialogOptions = {
removeOnClose: true,
enableHistory: options.enableHistory
};
var backButton = false;
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
backButton = true;
dialogOptions.autoFocus = true;
} else {
dialogOptions.modal = false;
dialogOptions.entryAnimationDuration = 160;
dialogOptions.exitAnimationDuration = 200;
dialogOptions.autoFocus = false;
}
var dlg = paperdialoghelper.createDialog(dialogOptions);
var pos = options.positionTo ? getPosition(options) : null;
dlg.classList.add('actionSheet');
var html = '';
html += '<div class="actionSheetContent">';
if (options.title) {
if (layoutManager.tv) {
html += '<h1 class="actionSheetTitle">';
html += options.title;
html += '</h1>';
} else {
html += '<h2 class="actionSheetTitle">';
html += options.title;
html += '</h2>';
}
}
html += '<div class="actionSheetScroller">';
var itemsWithIcons = options.items.filter(function (o) {
return o.ironIcon;
});
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly
var renderIcon = itemsWithIcons.length;
var center = options.title && (!itemsWithIcons.length);
if (center) {
dlg.classList.add('centered');
}
var enablePaperMenu = !layoutManager.tv;
enablePaperMenu = false;
var itemTagName = 'paper-button';
if (enablePaperMenu) {
html += '<paper-menu>';
itemTagName = 'paper-menu-item';
}
for (var i = 0, length = options.items.length; i < length; i++) {
var option = options.items[i];
var autoFocus = option.selected ? ' autoFocus' : '';
html += '<' + itemTagName + autoFocus + ' noink class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
if (option.ironIcon) {
html += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
}
else if (renderIcon && !center) {
html += '<iron-icon class="actionSheetItemIcon"></iron-icon>';
}
html += '<span>' + option.name + '</span>';
html += '</' + itemTagName + '>';
}
if (enablePaperMenu) {
html += '</paper-menu>';
}
if (options.showCancel) {
html += '<div class="buttons">';
html += '<paper-button dialog-dismiss>' + Globalize.translate('core#ButtonCancel') + '</paper-button>';
html += '</div>';
}
html += '</div>';
dlg.innerHTML = html;
if (pos) {
dlg.style.position = 'fixed';
dlg.style.left = pos.left + 'px';
dlg.style.top = pos.top + 'px';
}
document.body.appendChild(dlg);
// Seeing an issue in some non-chrome browsers where this is requiring a double click
//var eventName = browser.firefox ? 'mousedown' : 'click';
var eventName = 'click';
return new Promise(function (resolve, reject) {
dlg.addEventListener(eventName, function (e) {
var actionSheetMenuItem = parentWithClass(e.target, 'actionSheetMenuItem');
if (actionSheetMenuItem) {
var selectedId = actionSheetMenuItem.getAttribute('data-id');
paperdialoghelper.close(dlg);
// Add a delay here to allow the click animation to finish, for nice effect
setTimeout(function () {
if (options.callback) {
options.callback(selectedId);
}
resolve(selectedId);
}, 100);
}
});
paperdialoghelper.open(dlg);
});
}
return {
show: show
};
});

View File

@ -162,6 +162,15 @@ define(['browser'], function (browser) {
Container: audioFormat == 'webma' ? 'webma,webm' : audioFormat,
Type: 'Audio'
});
// aac also appears in the m4a container
if (audioFormat == 'aac') {
profile.DirectPlayProfiles.push({
Container: 'm4a',
AudioCodec: audioFormat,
Type: 'Audio'
});
}
});
if (canPlayWebm) {
@ -198,7 +207,8 @@ define(['browser'], function (browser) {
Type: 'Video',
AudioCodec: videoAudioCodecs.join(','),
VideoCodec: 'h264',
Context: 'Streaming'
Context: 'Streaming',
CopyTimestamps: true
});
}

View File

@ -1,8 +1,8 @@
.docspinner {
margin-top: -4vh;
margin-left: -4vh;
width: 8vh;
height: 8vh;
width: 7vh;
height: 7vh;
position: fixed;
top: 50%;
left: 50%;

View File

@ -136,7 +136,7 @@
// but not needed here since this is already on top of an existing dialog
// but skip it in IE because it's causing the entire browser to hang
// Also have to disable for firefox because it's causing select elements to not be clickable
if (!browser.msie && !browser.firefox && options.modal !== false) {
if (options.modal !== false) {
dlg.setAttribute('modal', 'modal');
}

View File

@ -38,7 +38,9 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
html += '</h2>';
}
html += '<paper-input autoFocus class="txtPromptValue"></paper-input>';
html += '<form>';
html += '<paper-input autoFocus class="txtPromptValue" value="' + (options.value || '') + '" label="' + (options.label || '') + '"></paper-input>';
if (options.description) {
html += '<div class="fieldDescription">';
@ -46,7 +48,6 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
html += '</div>';
}
// TODO: An actual form element should probably be added
html += '<br/>';
if (raisedButtons) {
html += '<paper-button raised class="btnSubmit"><iron-icon icon="dialog:check"></iron-icon><span>' + globalize.translate(dialogText.buttonOk) + '</span></paper-button>';
@ -56,25 +57,32 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
html += '<paper-button class="btnPromptExit">' + globalize.translate(dialogText.buttonCancel) + '</paper-button>';
html += '</div>';
}
html += '</form>';
html += '</div>';
dlg.innerHTML = html;
if (options.text) {
dlg.querySelector('.txtPromptValue').value = options.text;
}
if (options.label) {
dlg.querySelector('.txtPromptValue').label = options.label;
}
document.body.appendChild(dlg);
dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
dlg.querySelector('form').addEventListener('submit', function (e) {
submitValue = dlg.querySelector('.txtPromptValue').value;
paperdialoghelper.close(dlg);
e.preventDefault();
return false;
});
dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = dlg.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
form.removeChild(fakeSubmit);
});
dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {

View File

@ -1,6 +1,6 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.10",
"version": "1.0.11",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
@ -29,17 +29,18 @@
},
"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",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.10",
"_release": "1.0.11",
"_resolution": {
"type": "version",
"tag": "v1.0.10",
"commit": "1ba4f97e250dc14e9638d95be582dd62b9083736"
"tag": "v1.0.11",
"commit": "8fe629c9fecb14b76319ab4fbeef7f0237d93004"
},
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.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: lIogwlz5kFUKYy1OWASXxQgZE4YTyjUY0QcEgnqbv6wQ0GX8wRMgbI3zhbAv+xXU5ieYXg6Bd47ZFZZ1kVEWzQynAdd2od14Eu1vfN60/yc/llz62VTYuFsPt8r+Tgw41Iz8plwejK4a+V26Da5tXW+soJQOJKvE/MOiPzKi2m0=
- secure: cj3uSCQwLY6pyP3oTdGFjJoTRjv3G1lSe73fMd6i15XnMMxM4DVarfDtK+a0dPPxDY8BBhfr4sFClZuWX71bAHQuqUA84oigbeWt2xfl8d3HUuvr9aEnQxAGe2eQE7atpYJPC9M447sw48QKiUVgQo33DeJ1BGj6SBqkw0BJXO8=
node_js: 4
- CXX=g++-4.8
node_js: stable
addons:
firefox: '42.0'
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-autogrow-textarea",
"version": "1.0.10",
"version": "1.0.11",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
@ -29,9 +29,10 @@
},
"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",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}

View File

@ -18,46 +18,80 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<title>iron-autogrow-textarea demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../iron-autogrow-textarea.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style is="custom-style" include="demo-pages-shared-styles">
iron-autogrow-textarea {
display: block;
width: 200px;
margin: 5px 0;
}
textarea {
width: 200px;
}
.vertical-section {
box-sizing: border-box;
width: 400px;
margin: 0;
}
</style>
</head>
<style>
iron-autogrow-textarea {
width: 200px;
}
</style>
<body>
<body unresolved>
<div class="vertical-section-container centered">
<h4>Updating the value imperatively</h4>
<template is="dom-bind">
<div class="vertical-section">
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
<br><br>
<h3>An iron-autogrow-textarea grows automatically as more text is entered</h3>
<demo-snippet class="centered-demo">
<template>
<iron-autogrow-textarea></iron-autogrow-textarea>
</template>
</demo-snippet>
<code>bind-value</code>: <span>[[bindValue]]</span>
<h3>The maximum height can be controlled either through the <i>max-rows</i>
property, or through a fixed max height</h3>
<demo-snippet class="centered-demo">
<template>
<iron-autogrow-textarea max-rows="4" placeholder="scrolls after 4 rows"></iron-autogrow-textarea>
<iron-autogrow-textarea style="max-height: 50px;" placeholder="scrolls after 50px"></iron-autogrow-textarea>
</template>
</demo-snippet>
<p on-click="setValue">
set <code>bind-value</code> to: <br>
<textarea></textarea>
<button value="bindValue">set</button>
<br><br>
<h3>The initial height can also be controlled using the <i>rows</i> property,
or through a fixed height</h3>
<demo-snippet class="centered-demo">
<template>
<iron-autogrow-textarea rows="4" placeholder="start with 4 rows"></iron-autogrow-textarea>
<iron-autogrow-textarea style="height: 50px;"></iron-autogrow-textarea>
</template>
</demo-snippet>
set <code>textarea.value</code> to: <br>
<textarea></textarea>
<button value="value">set</button>
</p>
</div>
</template>
<h3>Example of updating the value imperatively</h3>
<!-- TODO: replace this with a demo-snippet when https://github.com/webcomponents/webcomponentsjs/issues/362
is fixed -->
<div class="example">
<template is="dom-bind">
<div class="vertical-section">
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
<br>
<code>bind-value</code>: <span>[[bindValue]]</span>
<p on-click="setValue">
Imperatively changing <code>bind-value</code> will also update
<code>textarea.value</code>:<br>
<textarea></textarea>
<button value="bindValue">set</button>
<br><br>
<h4>Custom</h4>
<div class="vertical-section">
<p>Scrolls after 4 rows:</p>
<iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
<p>Initial height of 4 rows</p>
<iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
Imperatively updating <code>textarea.value</code> will update
the display, but not update <code>bind-value</code>:<br>
<textarea></textarea>
<button value="value">set</button>
</p>
</div>
</template>
</div>
</div>
<script>
var scope = document.querySelector('template[is=dom-bind]');
@ -67,13 +101,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
var inputValue = event.target.previousElementSibling.value;
if (event.target.value == "bindValue") {
document.querySelector('iron-autogrow-textarea').bindValue = inputValue;
document.querySelector('#a1').bindValue = inputValue;
} else {
document.querySelector('iron-autogrow-textarea').textarea.value = inputValue;
document.querySelector('#a1').textarea.value = inputValue;
}
}
</script>
</body>
</html>

View File

@ -33,6 +33,7 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--iron-autogrow-textarea` | Mixin applied to the textarea | `{}`
`--iron-autogrow-textarea-placeholder` | Mixin applied to the textarea placeholder | `{}`
@group Iron Elements
@hero hero.svg
@ -50,6 +51,7 @@ Custom property | Description | Default
padding: 2px;
-moz-appearance: textarea;
-webkit-appearance: textarea;
overflow: hidden;
}
.mirror-text {
@ -82,6 +84,21 @@ Custom property | Description | Default
box-shadow: none;
}
textarea::-webkit-input-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
textarea:-moz-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
textarea::-moz-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
textarea:-ms-input-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
</style>
<template>
<!-- the mirror sizes the input/textarea so it grows with typing -->
@ -120,8 +137,6 @@ Custom property | Description | Default
/**
* Use this property instead of `value` for two-way data binding.
*
* @type {string|number|undefined|null}
*/
bindValue: {
observer: '_bindValueChanged',
@ -191,6 +206,7 @@ Custom property | Description | Default
value: {
notify: true,
type: String,
value: '',
computed: '_computeValue(bindValue)'
},
@ -265,6 +281,10 @@ Custom property | Description | Default
set selectionEnd(value) {
this.$.textarea.selectionEnd = value;
},
ready: function() {
this.bindValue = this.value;
},
/**
* Returns true if `value` is valid. The validator provided in `validator`

View File

@ -1,5 +1,4 @@
<!doctype html>
<!--
<!DOCTYPE html><!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@ -7,9 +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
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>
--><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-autogrow-textarea tests</title>
@ -19,7 +16,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script>
WCT.loadSuites([
'basic.html',
'basic.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View File

@ -1,6 +1,6 @@
{
"name": "iron-behaviors",
"version": "1.0.12",
"version": "1.0.13",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
@ -25,16 +25,16 @@
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^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"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.12",
"_release": "1.0.13",
"_resolution": {
"type": "version",
"tag": "v1.0.12",
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
"tag": "v1.0.13",
"commit": "a7bc3428a6da2beed21987b3a8028206826a12bc"
},
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0",

View File

@ -1,22 +1,25 @@
language: node_js
sudo: false
before_script:
- npm install bower
- npm install web-component-tester
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: ZOqj2XVNVwfT74rHxg/ljcAsS6FnmDpRSsXbsy1Icv9DcLHrMlmyQ10gWBjE/YXYF0Uv4akQ1qqn0TJaKOtp9HZeH+P6OPAYk2vJbWD7qp52pPtIqEFomcsUyflt4IjfaXKuN4FMod7PSWVSGJ+DxSguJvZKILkrs5d/rJdFv3c=
- secure: clkqemGQG16TXyAPkv9LBv6x3SbT3ZM0eo8LETx4uNKi3WzlwgXxZA9b5Sr5wYzxyxFFpnhDXW7CL4+UjYu1atGNeTW2TuSaYUPHtgu67OFDr8Jbw047p1XQb5enPSt9+YxrHKfjHBiJvWulJ8rCSQshU9Rhe0DC6NrFRPFgk0A=
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-behaviors",
"version": "1.0.12",
"version": "1.0.13",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
@ -25,7 +25,7 @@
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^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"
},
"ignore": []

View File

@ -89,6 +89,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this._oldTabIndex = this.tabIndex;
this.focused = false;
this.tabIndex = -1;
this.blur();
} else if (this._oldTabIndex !== undefined) {
this.tabIndex = this._oldTabIndex;
}

View File

@ -77,12 +77,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
suite('when the focused state is disabled', function() {
setup(function() {
focusTarget.disabled = true;
});
test('will not be focusable', function() {
var blurSpy = sinon.spy(focusTarget, 'blur');
MockInteractions.focus(focusTarget);
focusTarget.disabled = true;
expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
expect(blurSpy.called).to.be.eql(true);
});
});
});

View File

@ -1,6 +1,6 @@
{
"name": "iron-demo-helpers",
"version": "1.0.3",
"version": "1.1.0",
"description": "Utility classes to make building demo pages easier",
"authors": [
"The Polymer Authors"
@ -21,25 +21,27 @@
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2",
"paper-styles": "PolymerElements/paper-styles#1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
},
"_release": "1.0.3",
"_release": "1.1.0",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "dbcd14c318654f0e42d391af409efff9a8a241a2"
"tag": "v1.1.0",
"commit": "ea98e51e3ac7b52dd53cea05d3f027b3a41388ad"
},
"_source": "git://github.com/polymerelements/iron-demo-helpers.git",
"_target": "^1.0.0",

View File

@ -0,0 +1,27 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
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"
SAUCE_USERNAME=polymer-ci:
secure: MdclMoQBh7FSa11Mfw1Q7Gx5dYmsfHp5w3tSj5i798eMsrDrHIbmJwnYAIEHch4wpIteQL4dynfzWyfpU3S1WSCTR7vNsbzz8XlmT+t+Bk474XOsKQ/I+z1Fd3NMSNR73H/rJxH3nEJfDSR6TFKfoT/SAO0/yPE1taSvvYJV3dRD6A+ZrftgDzaDB3YukiE+OU4Hsk0Fy8JnF3Lb5iAl9jkd8G5i0IfYpcXJwlPq3C9krs7i/QhVCa/PI2TQNubihGnQc9oSVYxU4BV2oJ7JvEgPYLc21jL07c71Mr7Nl7ZCxnGqPYHxtwFMalBaenHg+CdnReOyh3CjbPhK/c0avX9Xgnpsex2pt3gXo98sZ0TBCfsEm/eKPpzxktAs2XwQXV3Xct1t8Oop4tbwUqgobXOSR3GM/YY8+FONr7D4NENtMiarujvywfhUK4dwc5sSY44uEocEUoYfcNEO3YAu0TyGhtjlTkhRscW6W10ASnLHQ3Vkg1/OOwBiQC1OSZHudffc11yY6rQGlD7K48n2TIu8yI8m2AyEXWxTF6XINCC80+rSNJEibiih1McGbwqACv71S6fBhCNdS2UXfO8MWDe6Lg7TgFXfLqkLRuNz+YR/Jpp9Kx5JgdDLbDvddSaOZII5WUcP+CjAwe+dOHXxuiIao18Y1AUs1K49zShukN8=
env:
global:
- secure: ZdORgF+qeVeCULluFHTdv3rWkff5UZQB2R/XY4WlDX6VMNoa4ox+Bv9jEwC9dFISX3YGZP+jxA3EAm3vNUdnRfi0WgecISGpagRippqk6pj3sz1thsllVBZgxRo6x63BGog74zxE0Okv01p1gMF1xEmO7cKlkDl4Axo8H1CLU3zOaG3W8tuY9TMgghq9cJAi8ybsojh26LKWaD8UnOfyb406fjEtHMammJ0+mnCnqUFF4suEj0G3Pujld8DZsZG0A/xKCLfykPsIdEnsP823aCIJX99XE0clCd/FTlNTHRhgdcAFwc3jqOrRFwXkGG8aW0W+ciKFESwmS5cAZZ6an+4LsDoOLBlmReACNq85HAu45ID+xfIKuG4gROMwRdOeIH1Zh9SZ0szcnYO8/JsuxyoXHeaiQnHc0ZZ/bzO3AV5p1APflDi5V2/q4OdXRZ7K7CQNO7b3GQk1vvXWG+553BJLbyWv/D04NpvQbdQqI2Zt/SDTdb7zRQVDnk6rZuODe8LU4QtF7EaO5+KHWjOvEsEsstPS8NFelw6Iqv8sAMO7dErAjWFuDXCCyTGSN7PVLcOhVy2gnpAspX1OZ/rubsDjqe3tN3BHURlRoEq3wXs93ZHcakIIor8aVs1hLd1XeX46hGGoK215SiKoCJWN8Bs/0174hE2pDNuVG5Hm/VQ=
- secure: INTBdOGAsbGQ1aokMF/OX8SxTDlUH6VKcrdcOuVbu3aAllmMgOznRtOm8IbHa+c9Dn25nMEY7Nl9DvxA9EfkKbyKFCcwwYgzAtrs4U/9qmckw8yJikDyF06wwClxeXBDZr9qxHUarX770McBMfq+zOly6ls3v0TTrERO3MoV4dBJ+sj0Oj0TCjjt7hiaFq4xdSMpuGLoOdElL8zh+bgRj98R8uzOTYW4hdf80FZqO5gXOWMRDkZCI1Y4EDsAQSZQ9jDScT5qd4qYhujuFmAd1+a4EmRE+WF8Uvo2bwnm4/Fz8EEBYNzNQGftyTazXZqplhKlu1auTmOKxWadEWP2oD28FFFgnSyp/p9IzRi8DjKg7btumiL2bZOK5RFOP4OiN8+Fje7Hi9sA7utEunH8zqRYwZZehxQG3s/Ixi7wiOs9IoKxyjRpZTGMrb8tuCjsgtNTSsGbQ9Si3l/7q6zXd9ctC5F0HAhOANPUxqLt67NLxUDjp6mOcsdtEnB7hEGcC6g3NTGZnE6icTGi2f7SokK1dsxxoW8Z+FGWG+AT3FKTFJJlfoAx3Y/cSa/gI6/jyqheANbviD3qllrwvTCEjUPjMs0UoiLxEIb57aiY8cB1LplDnHQhZarXrOe1jcgOxs9H+YFaeSX6zL+WswLPwBvTgsvXuP018XBwBRpYbN8=
- CXX=g++-4.8

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-demo-helpers",
"version": "1.0.3",
"version": "1.1.0",
"description": "Utility classes to make building demo pages easier",
"authors": [
"The Polymer Authors"
@ -21,18 +21,20 @@
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2",
"paper-styles": "PolymerElements/paper-styles#1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
}
}

View File

@ -9,11 +9,12 @@ 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="../prism-element/prism-highlighter.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/shadow.html">
<link rel="import" href="../prism-element/prism-highlighter.html">
<!--
`demo-snippet` is a helper element that displays the source of a code snippet and
@ -61,7 +62,7 @@ Custom property | Description | Default
}
.demo {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid var(--google-grey-300);
background-color: white;
margin: 0;
padding: 20px;
@ -71,7 +72,7 @@ Custom property | Description | Default
.code {
padding: 0 20px;
margin: 0;
background-color: #fafafa;
background-color: var(--google-grey-100);
font-size: 13px;
overflow: auto;
@apply(--demo-snippet-code);
@ -81,6 +82,17 @@ Custom property | Description | Default
margin: 0;
padding: 0 0 10px 0;
}
.code-container {
position: relative;
}
paper-icon-button {
position: absolute;
top: 0;
right: 0px;
}
</style>
<prism-highlighter></prism-highlighter>
@ -89,12 +101,22 @@ Custom property | Description | Default
<content id="content"></content>
</div>
<marked-element markdown=[[_markdown]] id="marked">
<div class="markdown-html code"></div>
</marked-element>
<div class="code-container">
<marked-element markdown=[[_markdown]] id="marked">
<div class="markdown-html code" id="code"></div>
</marked-element>
<paper-icon-button
id="copyButton"
icon="content-copy"
title="copy to clipboard"
on-tap="_copyToClipboard">
</paper-icon-button>
</div>
</template>
<script>
'use strict';
Polymer({
is: 'demo-snippet',
@ -114,9 +136,7 @@ Custom property | Description | Default
return;
}
// TODO(noms): When marked-element/issues/23 lands, this will become
// a public method and will need to be updated.
var snippet = this.$.marked._unindent(template.innerHTML);
var snippet = this.$.marked.unindent(template.innerHTML);
// Boolean properties are displayed as checked="", so remove the ="" bit.
snippet = snippet.replace(/=""/g, '');
@ -125,6 +145,34 @@ Custom property | Description | Default
// Stamp the template.
Polymer.dom(this).appendChild(document.importNode(template.content, true));
},
_copyToClipboard: function() {
// From https://github.com/google/material-design-lite/blob/master/docs/_assets/snippets.js
var snipRange = document.createRange();
snipRange.selectNodeContents(this.$.code);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(snipRange);
var result = false;
try {
result = document.execCommand('copy');
this.$.copyButton.icon = 'done';
} catch (err) {
// Copy command is not available
console.error(err);
this.$.copyButton.icon = 'error';
}
// Return to the copy button after a second.
setTimeout(this._resetCopyButtonState.bind(this), 1000);
selection.removeAllRanges();
return result;
},
_resetCopyButtonState: function() {
this.$.copyButton.icon = 'content-copy';
}
});
</script>

View File

@ -69,7 +69,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--paper-checkbox-unchecked-ink-color: var(--paper-red-900);
--paper-checkbox-label-color: var(--paper-red-500);
}
</style>
</style>
<paper-checkbox class="blue">Checkbox</paper-checkbox>
<paper-checkbox checked class="red">Checkbox</paper-checkbox>

View File

@ -22,65 +22,56 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</head>
<body>
<!--
*** Important! ***
You'll notice that these tests don't use test-fixture. That's because
there's a problem stamping nested templates in IE/Safari 8. This
should eventually be patched in webcomponents.js, but in the meantime
we're going to run these tests "the old way".
<test-fixture id="empty-demo">
This is relevant because this means that you, as the test writer,
need to remember that an element's state is maintained between tests.
If you don't want this, either use a new element, or clean up after
your test.
-->
<demo-snippet id="emptyDemo"></demo-snippet>
<demo-snippet id="nativeDemo">
<template>
<demo-snippet></demo-snippet>
<input disabled>
</template>
</test-fixture>
</demo-snippet>
<test-fixture id="native-demo">
<demo-snippet id="customDemo">
<template>
<demo-snippet>
<template>
<input disabled>
</template>
</demo-snippet>
<paper-checkbox disabled></paper-checkbox>
</template>
</test-fixture>
</demo-snippet>
<test-fixture id="custom-demo">
<demo-snippet id="demoWithAttributes">
<template>
<demo-snippet>
<template>
<paper-checkbox disabled></paper-checkbox>
</template>
</demo-snippet>
<input disabled type="date">
</template>
</test-fixture>
<test-fixture id="demo-with-attributes">
<template>
<demo-snippet>
<template>
<input disabled type="date">
</template>
</demo-snippet>
</template>
</test-fixture>
</demo-snippet>
<script>
// TODO(notwaldorf): Tests are currently very unhappy in IE
function isNotIE() {
return !navigator.userAgent.match(/MSIE/i);
}
suite('display', function() {
var emptyHeight;
setup(function() {
var emptyDemo = fixture('empty-demo');
var emptyDemo = document.getElementById('emptyDemo');
emptyHeight = emptyDemo.getBoundingClientRect().height;
});
test('can render native elements', skipUnless(isNotIE, function() {
var element = fixture('native-demo');
test('can render native elements', function() {
var element = document.getElementById('nativeDemo');
// Render the distributed children.
Polymer.dom.flush();
var rect = element.getBoundingClientRect();
expect(rect.height).to.be.greaterThan(emptyHeight);
// The demo is rendered in the light dom, so it should exist, and
@ -93,15 +84,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal('```\n\n<input disabled>\n\n```');
}));
});
test('can render custom elements', skipUnless(isNotIE, function() {
var element = fixture('custom-demo');
test('can render custom elements', function() {
var element = document.getElementById('customDemo');
// Render the distributed children.
Polymer.dom.flush();
var rect = element.getBoundingClientRect();
expect(rect.height).to.be.greaterThan(emptyHeight);
// The demo is rendered in the light dom, so it should exist, and
@ -115,18 +107,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal(
'```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```');
}));
});
});
suite('parsing', function() {
var element;
setup(function() {
var element = fixture('demo-with-attributes');
});
test('preserves attributes', skipUnless(isNotIE, function() {
var element = fixture('demo-with-attributes');
test('preserves attributes', function() {
var element = document.getElementById('demoWithAttributes');
// Render the distributed children.
Polymer.dom.flush();
@ -134,7 +120,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal(
'```\n\n<input disabled type="date">\n\n```');
}));
});
});
</script>
</body>

View File

@ -1,6 +1,6 @@
{
"name": "iron-flex-layout",
"version": "1.2.2",
"version": "1.2.3",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
@ -21,21 +21,21 @@
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
"web-component-tester": "^4.0.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
"_release": "1.2.2",
"homepage": "https://github.com/polymerelements/iron-flex-layout",
"_release": "1.2.3",
"_resolution": {
"type": "version",
"tag": "v1.2.2",
"commit": "41c4f35be1368afb770312b907a258175565dbdf"
"tag": "v1.2.3",
"commit": "3ae26f4a248ccc7a4c035590473840342182293e"
},
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-flex-layout"
"_originalSource": "polymerelements/iron-flex-layout"
}

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: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw=
- secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI=
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:
- 'true || xvfb-run wct'
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then true || wct -s 'default'; fi"
- 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-flex-layout",
"version": "1.2.2",
"version": "1.2.3",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
@ -21,11 +21,11 @@
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
"web-component-tester": "^4.0.0"
},
"ignore": []
}

View File

@ -1,95 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../prism-element/prism-highlighter.html">
<link rel="import" href="../../marked-element/marked-element.html">
<!--
Quick element that can display the source of a code snippet and a rendered demo.
<demo-snippet>
<template>
<style is="custom-style">
#demo6 {
@apply(--layout-horizontal);
@apply(--layout-start);
height: 120px;
}
</style>
<div class="container" id="demo6">
<div>start</div>
</div>
</template>
</demo-snippet>
-->
<dom-module id="demo-snippet">
<template>
<style>
:host {
display:inline-block;
}
.demo {
border-bottom: 1px solid #e5e5e5;
margin: 0;
}
.code {
padding: 0;
margin: 0;
background-color: #fafafa;
font-size: 13px;
word-wrap: break-word;
}
.code > pre {
margin: 0;
padding: 0 0 10px 0;
}
</style>
<prism-highlighter></prism-highlighter>
<div class="demo">
<content id="content"></content>
</div>
<marked-element markdown=[[_markdown]]>
<div class="markdown-html code"></div>
</marked-element>
</template>
<script>
Polymer({
is: 'demo-snippet',
properties: {
_markdown: {
type: String,
value: ''
}
},
attached: function() {
var template = Polymer.dom(this).queryDistributedElements('template')[0];
var snippet = Polymer.domInnerHTML.getInnerHTML(template);
this._markdown = '```\n' + snippet + '\n' + '```';
// Stamp the template.
Polymer.dom(this).appendChild(document.importNode(template.content, true));
}
});
</script>
</dom-module>

View File

@ -19,10 +19,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../iron-flex-layout.html">
<style>
<style is="custom-style" include="demo-pages-shared-styles">
demo-snippet {
--demo-snippet-demo: {
padding: 0;
}
}
.container {
background-color: #ccc;
padding: 5px;
@ -35,20 +41,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
min-height: 20px;
}
demo-snippet {
width: 100%;
}
.vertical-section {
padding: 0 !important;
.vertical-section-container {
max-width: 700px
}
</style>
</head>
<body unresolved class="fullbleed">
<h4>Horizontal and vertical layout</h4>
<div class="vertical-section">
<div class="vertical-section-container centered">
<h4>Horizontal and vertical layout</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -56,7 +57,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
@apply(--layout-horizontal);
}
</style>
<div class="container flex">
<div>one</div>
<div>two</div>
@ -64,10 +64,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Flexible children</h4>
<div class="vertical-section">
<h4>Flexible children</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -86,10 +84,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Flexible children in vertical layouts</h4>
<div class="vertical-section">
<h4>Flexible children in vertical layouts</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -109,10 +105,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Flex ratios</h4>
<div class="vertical-section">
<h4>Flex ratios</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -137,10 +131,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis stretch alignment (default)</h4>
<div class="vertical-section">
<h4>Cross-axis stretch alignment (default)</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -155,10 +147,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis center alignment</h4>
<div class="vertical-section">
<h4>Cross-axis center alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -174,10 +164,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis start alignment</h4>
<div class="vertical-section">
<h4>Cross-axis start alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -193,10 +181,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis end alignment</h4>
<div class="vertical-section">
<h4>Cross-axis end alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -212,10 +198,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, start justified</h4>
<div class="vertical-section">
<h4>Justification, start justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -230,10 +214,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, start justified</h4>
<div class="vertical-section">
<h4>Justification, start justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -248,10 +230,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, end justified</h4>
<div class="vertical-section">
<h4>Justification, end justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -266,10 +246,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, equal space between elements</h4>
<div class="vertical-section">
<h4>Justification, equal space between elements</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -286,10 +264,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, equal space around each element</h4>
<div class="vertical-section">
<h4>Justification, equal space around each element</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -305,10 +281,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Self alignment</h4>
<div class="vertical-section">
<h4>Self alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -342,10 +316,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Wrapping</h4>
<div class="vertical-section">
<h4>Wrapping</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -364,10 +336,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Reversed layouts</h4>
<div class="vertical-section">
<h4>Reversed layouts</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -384,10 +354,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>General purpose ruls</h4>
<div class="vertical-section">
<h4>General purpose rules</h4>
<demo-snippet>
<template>
<style is="custom-style">

View File

@ -217,7 +217,7 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
};
--layout-around-justified: {
-ms-flex-pack: around;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
};

View File

@ -0,0 +1,29 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-flex-layout.html',
'iron-flex-layout.html?dom=shadow'
]);
</script>
</body>
</html>

View File

@ -0,0 +1,344 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../iron-flex-layout.html">
<style is="custom-style">
body {
margin: 0;
padding: 0;
}
.container {
width: 300px;
min-height: 50px;
background-color: #ccc;
}
.container > div {
width: 50px;
min-height: 50px; /* so that it can grow in vertical layouts. */
}
/* IE11 does not calculate flex proportions correctly in a vertical
* layout if the children just have a min-height. For those tests,
* use a fixed height instead. */
.container > div.fixed-height {
min-height: 0;
height: 50px;
}
.relative { @apply(--layout-relative); }
.container.relative > div {
min-width: 50px;
min-height: 50px;
width: inherit;
}
.container.small { width: 120px; }
.container.tall { height: 300px; }
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
.horizontal { @apply(--layout-horizontal); }
.horizontal-reverse { @apply(--layout-horizontal-reverse); }
.vertical { @apply(--layout-vertical); }
.vertical-reverse { @apply(--layout-vertical-reverse); }
.wrap { @apply(--layout-wrap); }
.wrap-reverse { @apply(--layout-wrap-reverse); }
.flex { @apply(--layout-flex); }
.flex2 { @apply(--layout-flex-2); }
.flex3 { @apply(--layout-flex-3); }
.center { @apply(--layout-center); }
.start { @apply(--layout-start); }
.end { @apply(--layout-end); }
.start-justified { @apply(--layout-start-justified); }
.center-justified { @apply(--layout-center-justified); }
.end-justified { @apply(--layout-end-justified); }
.justified { @apply(--layout-justified); }
.around-justified { @apply(--layout-around-justified); }
.fit { @apply(--layout-fit); }
</style>
</head>
<body>
<test-fixture id="basic">
<template>
<div class="container">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
</template>
</test-fixture>
<test-fixture id="flex">
<template>
<div class="container">
<div id="c1" class="fixed-height"></div>
<div id="c2" class="fixed-height"></div>
<div id="c3" class="fixed-height"></div>
</div>
</template>
</test-fixture>
<test-fixture id="single-child">
<template>
<div class="container">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<test-fixture id="positioning">
<template>
<div class="container relative">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<script>
function positionEquals(node, top, bottom, left, right) {
var rect = node.getBoundingClientRect();
return rect.top === top && rect.bottom === bottom
&& rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
setup(function() {
container = fixture('basic');
});
test('--layout-horizontal', function() {
container.classList.add('horizontal');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok");
});
test('--layout-horizontal-reverse', function() {
container.classList.add('horizontal-reverse');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok");
});
test('--layout-vertical', function() {
container.classList.add('vertical');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok");
});
test('--layout-vertical-reverse', function() {
container.classList.add('vertical-reverse');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
});
test('--layout-wrap', function() {
container.classList.add('horizontal');
container.classList.add('wrap');
container.classList.add('small');
assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
// |c1| |c2|
// |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
});
test('--layout-wrap-reverse', function() {
container.classList.add('horizontal');
container.classList.add('wrap-reverse');
container.classList.add('small');
assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
// |c3|
// |c1| |c2|
assert.isTrue(positionEquals(c1, 50, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
});
});
suite('flex', function() {
var container;
setup(function() {
container = fixture('flex');
});
test('--layout-flex child in a horizontal layout', function() {
container.classList.add('horizontal');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('--layout-flex child in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok");
});
test('--layout-flex, --layout-flex-2, --layout-flex-3 in a horizontal layout', function() {
container.classList.add('horizontal');
c1.classList.add('flex');
c2.classList.add('flex2');
c3.classList.add('flex3');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok");
});
test('--layout-flex, --layout-flex-2, --layout-flex-3 in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c1.classList.add('flex');
c2.classList.add('flex2');
c3.classList.add('flex3');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok");
});
});
suite('alignment', function() {
var container;
setup(function() {
container = fixture('single-child');
container.classList.add('horizontal');
});
test('stretch (default)', function() {
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok");
});
test('--layout-center', function() {
container.classList.add('center');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok");
});
test('--layout-start', function() {
container.classList.add('start');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('--layout-end', function() {
container.classList.add('end');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok");
});
test('--layout-start-justified', function() {
container.classList.add('start-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('--layout-end-justified', function() {
container.classList.add('end-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
});
test('--layout-center-justified', function() {
container.classList.add('center-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok");
});
});
suite('justification', function() {
var container;
setup(function() {
container = fixture('flex');
container.classList.add('horizontal');
});
test('--layout-justified', function() {
container.classList.add('justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('--layout-around-justified', function() {
container.classList.add('around-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var spacing = (300 - 50 * 3) / 6;
// Every child gets `spacing` on its left and right side.
assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok");
var end = spacing + 50 + spacing;
assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok");
end = end + spacing + 50 + spacing;
assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok");
});
});
suite('positioning', function() {
var container;
setup(function() {
container = fixture('positioning');
container.classList.add('tall');
});
test('--layout-fit', function() {
c1.classList.add('fit');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok");
});
});
</script>
</body>
</html>

View File

@ -1,6 +1,6 @@
{
"name": "iron-menu-behavior",
"version": "1.1.1",
"version": "1.1.2",
"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.1",
"_release": "1.1.2",
"_resolution": {
"type": "version",
"tag": "v1.1.1",
"commit": "0fc2c95803badd8e8f50cbe7f5d3669d647e7229"
"tag": "v1.1.2",
"commit": "8b09b6187b748499a0b8e9ddc789391d26e1d5d1"
},
"_source": "git://github.com/polymerelements/iron-menu-behavior.git",
"_target": "^1.0.0",

View File

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

View File

@ -273,6 +273,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
_onUpKey: function(event) {
// up and down arrows moves the focus
this._focusPrevious();
event.detail.keyboardEvent.preventDefault();
},
/**
@ -282,6 +283,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
*/
_onDownKey: function(event) {
this._focusNext();
event.detail.keyboardEvent.preventDefault();
},
/**

View File

@ -43,20 +43,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return window.getComputedStyle(this)['direction'] === 'rtl';
},
_onLeftKey: function() {
_onLeftKey: function(event) {
if (this._isRTL) {
this._focusNext();
} else {
this._focusPrevious();
}
event.detail.keyboardEvent.preventDefault();
},
_onRightKey: function() {
_onRightKey: function(event) {
if (this._isRTL) {
this._focusPrevious();
} else {
this._focusNext();
}
event.detail.keyboardEvent.preventDefault();
},
_onKeydown: function(event) {

View File

@ -26,14 +26,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "iron-meta.html",
"homepage": "https://github.com/polymerelements/iron-meta",
"homepage": "https://github.com/PolymerElements/iron-meta",
"_release": "1.1.1",
"_resolution": {
"type": "version",
"tag": "v1.1.1",
"commit": "e171ee234b482219c9514e6f9551df48ef48bd9f"
},
"_source": "git://github.com/polymerelements/iron-meta.git",
"_source": "git://github.com/PolymerElements/iron-meta.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-meta"
"_originalSource": "PolymerElements/iron-meta"
}

View File

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.3.1",
"version": "1.3.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
@ -25,6 +25,7 @@
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
@ -33,11 +34,11 @@
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
"_release": "1.3.1",
"_release": "1.3.3",
"_resolution": {
"type": "version",
"tag": "v1.3.1",
"commit": "efaa64da9dbaa4209483c2d9fd7bf3bd20beb5e2"
"tag": "v1.3.3",
"commit": "7279b3bedd0f0dd70dbfb3d7557d1f49c7432941"
},
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
"_target": "^1.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.3.1",
"version": "1.3.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
@ -25,6 +25,7 @@
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.2",

View File

@ -9,148 +9,143 @@ 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>simple-overlay demo</title>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>simple-overlay demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="simple-overlay.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<style is="custom-style">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="simple-overlay.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
.with-margin {
margin: 24px 40px;
<style is="custom-style" include="demo-pages-shared-styles">
demo-snippet {
--demo-snippet-code: {
max-height: 250px;
}
}
</style>
.full-height {
height: 100%;
}
</head>
.scrollable {
overflow: auto;
}
<body unresolved class="centered">
.vertical {
@apply(--layout-vertical);
}
.flex {
@apply(--layout-flex);
}
</style>
</head>
<body onclick="clickHandler(event);">
<div class="vertical-section centered">
<button data-dialog="plain">plain</button>
<simple-overlay id="plain">
Hello world!
<h3>An element with <code>IronOverlayBehavior</code> can be opened, closed, toggled.</h3>
<demo-snippet>
<template>
<button onclick="plain.open()">Plain overlay</button>
<simple-overlay id="plain" tabindex=-1>
<h2>Hello world!</h2>
<p>This can be closed by pressing the ESC key too.</p>
<button onclick="plain.close()">Close</button>
</simple-overlay>
</template>
</demo-snippet>
<button data-dialog="scrolling">scrolling</button>
<simple-overlay id="scrolling" class="with-margin scrollable">
<p>This dialog scrolls internally.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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-overlay>
<button data-dialog="scrolling-2">scrolling 2</button>
<simple-overlay id="scrolling-2" class="with-margin full-height vertical">
<p>This dialog has a scrolling child.</p>
<div class="flex scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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>
</simple-overlay>
<button data-dialog="multiple">multiple</button>
<simple-overlay id="multiple">
<p>click to open another overlay</p>
<p><button data-dialog="multiple2">click</button></p>
</simple-overlay>
<simple-overlay id="multiple2">
Hi!
</simple-overlay>
<button data-dialog="backdrop">backdrop</button>
<h3>Use <code>with-backdrop</code> to add a backdrop to your overlay. Tabbing will be trapped within the overlay.</h3>
<demo-snippet>
<template>
<button onclick="backdrop.open()">Overlay with backdrop</button>
<simple-overlay id="backdrop" with-backdrop>
<p>Hello world!</p>
<button>button</button>
<button>button</button>
<button>button</button>
<button>Button</button>
<button onclick="backdrop.close()">Close</button>
</simple-overlay>
</template>
</demo-snippet>
<button data-dialog="autofocus">autofocus</button>
<simple-overlay id="autofocus">
<h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3>
<demo-snippet>
<template>
<button onclick="withAutofocus.open()">Overlay with autofocus child</button>
<simple-overlay id="withAutofocus">
<p>Hello world!</p>
<button>cancel</button>
<button autofocus>autofocus</button>
<button onclick="withAutofocus.close()">Close</button>
</simple-overlay>
</template>
</demo-snippet>
<h3>Multiple overlays can be opened.</h3>
<demo-snippet>
<template>
<button onclick="multiple.open()">Open first overlay</button>
<simple-overlay id="multiple" tabindex=-1>
<p>click to open another overlay</p>
<button onclick="multiple2.open()">Open second overlay</button>
<button onclick="multiple.close()">Close this</button>
</simple-overlay>
<simple-overlay id="multiple2" tabindex=-1>
<h2>Hi!</h2>
<button onclick="multiple2.close()">Close</button>
</simple-overlay>
</template>
</demo-snippet>
<h3>An element with <code>IronOverlayBehavior</code> can be scrollable or contain scrollable content.</h3>
<demo-snippet>
<template>
<style>
.with-margin {
margin: 24px 40px;
}
.scrollable {
max-height: 300px;
overflow: auto;
}
</style>
<button onclick="scrolling.open()">Scrolling overlay</button>
<simple-overlay id="scrolling" class="with-margin scrollable" tabindex=-1>
<h2>This dialog scrolls internally.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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>
<button onclick="scrolling.close()">Close</button>
</simple-overlay>
</div>
<button onclick="scrolling2.open()">Scrolling content</button>
<script>
<simple-overlay id="scrolling2" class="with-margin" tabindex=-1>
<h2>This dialog has a scrolling child.</h2>
<div class="scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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>
</div>
<p>
<button onclick="scrolling2.close()">Close</button>
</p>
function clickHandler(e) {
if (!e.target.hasAttribute('data-dialog')) {
return;
}
</simple-overlay>
</template>
</demo-snippet>
var id = e.target.getAttribute('data-dialog');
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
}
}
</body>
</script>
</body>
</html>

View File

@ -179,9 +179,12 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this._callOpenedWhenReady) {
this._openedChanged();
}
this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
},
detached: function() {
Polymer.dom(this).unobserveNodes(this._observer);
this._observer = null;
this.opened = false;
this._manager.trackBackdrop(this);
this._manager.removeOverlay(this);
@ -213,9 +216,10 @@ context. You should place this element as a child of `<body>` whenever possible.
/**
* Cancels the overlay.
* @param {?Event} event The original event
*/
cancel: function() {
var cancelEvent = this.fire('iron-overlay-canceled', undefined, {cancelable: true});
cancel: function(event) {
var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
if (cancelEvent.defaultPrevented) {
return;
}
@ -238,7 +242,6 @@ context. You should place this element as a child of `<body>` whenever possible.
this.removeAttribute('aria-hidden');
} else {
this.setAttribute('aria-hidden', 'true');
Polymer.dom(this).unobserveNodes(this._observer);
}
// wait to call after ready only if we're initially open
@ -326,8 +329,11 @@ context. You should place this element as a child of `<body>` whenever possible.
// tasks which must occur before opening; e.g. making the element visible
_prepareRenderOpened: function() {
this._manager.addOverlay(this);
// Needed to calculate the size of the overlay so that transitions on its size
// will have the correct starting points.
this._preparePositioning();
this.fit();
this._finishPositioning();
@ -335,6 +341,12 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this.withBackdrop) {
this.backdropElement.prepare();
}
// Safari will apply the focus to the autofocus element when displayed for the first time,
// so we blur it. Later, _applyFocus will set the focus if necessary.
if (this.noAutoFocus && document.activeElement === this._focusNode) {
this._focusNode.blur();
}
},
// tasks which cause the overlay to actually open; typically play an
@ -354,23 +366,24 @@ context. You should place this element as a child of `<body>` whenever possible.
},
_finishRenderOpened: function() {
// focus the child node with [autofocus]
// This ensures the overlay is visible before we set the focus
// (by calling _onIronResize -> refit).
this.notifyResize();
// Focus the child node with [autofocus]
this._applyFocus();
this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
this.fire('iron-overlay-opened');
},
_finishRenderClosed: function() {
// hide the overlay and remove the backdrop
// Hide the overlay and remove the backdrop.
this.resetFit();
this.style.display = 'none';
this._manager.removeOverlay(this);
this._focusedChild = null;
this._applyFocus();
this.notifyResize();
this.fire('iron-overlay-closed', this.closingReason);
},
@ -383,8 +396,9 @@ context. You should place this element as a child of `<body>` whenever possible.
_finishPositioning: function() {
this.style.display = 'none';
this.style.transform = this.style.webkitTransform = '';
// force layout to avoid application of transform
/** @suppress {suspiciousCode} */ this.offsetWidth;
// Force layout layout to avoid application of transform.
// Set offsetWidth to itself so that compilers won't remove it.
this.offsetWidth = this.offsetWidth;
this.style.transition = this.style.webkitTransition = '';
},
@ -395,6 +409,7 @@ context. You should place this element as a child of `<body>` whenever possible.
}
} else {
this._focusNode.blur();
this._focusedChild = null;
this._manager.focusOverlay();
}
},
@ -405,7 +420,7 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this.noCancelOnOutsideClick) {
this._applyFocus();
} else {
this.cancel();
this.cancel(event);
}
}
},
@ -415,7 +430,7 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this._manager.currentOverlay() === this &&
!this.noCancelOnEscKey &&
event.keyCode === ESC) {
this.cancel();
this.cancel(event);
}
},
@ -436,6 +451,17 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this.opened) {
this.refit();
}
},
/**
* @protected
* Will call notifyResize if overlay is opened.
* Can be overridden in order to avoid multiple observers on the same node.
*/
_onNodesChange: function() {
if (this.opened) {
this.notifyResize();
}
}
/**
@ -447,6 +473,7 @@ context. You should place this element as a child of `<body>` whenever possible.
* Fired when the `iron-overlay` is canceled, but before it is closed.
* Cancel the event to prevent the `iron-overlay` from closing.
* @event iron-overlay-canceled
* @param {?Event} event The event in case the user pressed ESC or clicked outside the overlay
*/
/**

View File

@ -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>iron-overlay-behavior tests</title>
@ -24,7 +25,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="test-overlay.html">
<link rel="import" href="test-overlay2.html">
<style is="custom-style">
iron-overlay-backdrop {
/* For quicker tests */
--iron-overlay-backdrop: {
transition: none;
}
}
</style>
</head>
<body>
<test-fixture id="basic">
@ -52,55 +63,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="backdrop">
<template>
<test-overlay with-backdrop>
Overlay with backdrop
</test-overlay>
</template>
</test-fixture>
<test-fixture id="multiple">
<template>
<test-overlay class="overlay-1">
Overlay 1
Test overlay 1
</test-overlay>
<test-overlay class="overlay-2">
Overlay 2
Test overlay 2
</test-overlay>
<test-overlay class="overlay-3">
Overlay 3
</test-overlay>
</template>
</test-fixture>
<test-fixture id="backdrop-multiple">
<template>
<test-overlay with-backdrop class="overlay-1">
Overlay 1 with backdrop
</test-overlay>
<test-overlay with-backdrop class="overlay-2">
Overlay 2 with backdrop
</test-overlay>
<test-overlay with-backdrop class="overlay-3">
Overlay 3 with backdrop
</test-overlay>
</template>
</test-fixture>
<test-fixture id="backdrop-different-elements">
<template>
<test-overlay with-backdrop class="overlay-1">
Overlay 1 with backdrop
</test-overlay>
<test-overlay2 with-backdrop class="overlay-2">
Overlay 2 with backdrop
<test-overlay2 class="overlay-3">
Other overlay 3
</test-overlay2>
</template>
</test-fixture>
<script>
function runAfterOpen(overlay, cb) {
function runAfterOpen(overlay, callback) {
overlay.addEventListener('iron-overlay-opened', function() {
Polymer.Base.async(cb, 1);
Polymer.Base.async(callback, 1);
});
overlay.open();
}
suite('basic overlay tests', function() {
function runAfterClose(overlay, callback) {
overlay.addEventListener('iron-overlay-closed', callback);
overlay.close();
}
suite('basic overlay', function() {
var overlay;
setup(function() {
@ -112,25 +110,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.equal(getComputedStyle(overlay).display, 'none', 'overlay starts hidden');
});
test('overlay open by default', function(done) {
overlay = fixture('opened');
overlay.addEventListener('iron-overlay-opened', function() {
assert.isTrue(overlay.opened, 'overlay starts opened');
assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay starts showing');
done();
});
});
test('overlay positioned & sized properly', function(done) {
overlay = fixture('opened');
overlay.addEventListener('iron-overlay-opened', function() {
var s = getComputedStyle(overlay);
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth)/2, 'centered horizontally');
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight)/2, 'centered vertically');
done();
});
});
test('overlay open/close events', function(done) {
var nevents = 0;
@ -148,13 +127,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overlay.opened = true;
});
test('open overlay refits on iron-resize', function() {
var overlay = fixture('opened');
var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize');
assert.isTrue(spy.called, 'overlay should refit');
});
test('closed overlay does not refit on iron-resize', function() {
var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize');
@ -162,41 +134,47 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
test('open() triggers iron-resize', function(done) {
// Ignore the iron-resize on attached.
var callCount = -1;
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
runAfterOpen(overlay, function () {
assert.equal(callCount, 1, 'iron-resize should be called once');
overlay.addEventListener('iron-resize', function() { callCount++; });
runAfterOpen(overlay, function() {
assert.equal(callCount, 1, 'iron-resize called once before iron-overlay-opened');
done();
});
});
test('close() triggers iron-resize', function(done) {
runAfterOpen(overlay, function() {
var spy = sinon.stub();
overlay.addEventListener('iron-resize', spy);
runAfterClose(overlay, function() {
assert.equal(spy.callCount, 1, 'iron-resize called once before iron-overlay-closed');
done();
});
});
});
test('closed overlay does not trigger iron-resize when its content changes', function(done) {
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
var child = document.createElement('div');
child.innerHTML = 'hi';
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
overlay.addEventListener('iron-resize', function() { callCount++; });
Polymer.dom(overlay).appendChild(document.createElement('div'));
overlay.async(function() {
assert.equal(callCount, 0, 'iron-resize should not be called');
done();
}, 10);
});
test('open overlay triggers iron-resize when its content changes', function(done) {
runAfterOpen(overlay, function () {
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
var child = document.createElement('div');
child.innerHTML = 'hi';
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
assert.equal(callCount, 1, 'iron-resize should be called once');
runAfterOpen(overlay, function() {
var spy = sinon.stub();
overlay.addEventListener('iron-resize', spy);
Polymer.dom(overlay).appendChild(document.createElement('div'));
overlay.async(function() {
assert.equal(spy.callCount, 1, 'iron-resize should be called once');
done();
}, 10);
});
@ -215,54 +193,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
test('close an overlay in proximity to another overlay', function(done) {
var secondOverlay = fixture('basic');
// Open and close a separate overlay.
secondOverlay.open();
secondOverlay.close();
// Open the overlay we care about.
overlay.open();
// Wait for infinite recursion, otherwise we win:
overlay.addEventListener('iron-overlay-closed', function() {
done();
});
// Immediately close the first overlay:
overlay.close();
});
test('clicking an overlay does not close it', function(done) {
runAfterOpen(overlay, function() {
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
overlay.fire('click');
setTimeout(function() {
MockInteractions.tap(overlay);
overlay.async(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done();
}, 10);
});
});
test('node with autofocus is focused', function(done) {
overlay = fixture('autofocus');
runAfterOpen(overlay, function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
});
});
test('cancel an overlay by clicking outside', function(done) {
test('clicking outside fires iron-overlay-canceled', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) {
assert.equal(event.detail.target, document.body, 'detail contains original click event');
done();
});
MockInteractions.tap(document.body);
});
});
test('close an overlay by clicking outside', function(done) {
test('clicking outside closes the overlay', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-closed', function(event) {
assert.isTrue(event.detail.canceled, 'overlay is canceled');
@ -272,7 +225,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
test('cancel event can be prevented', function(done) {
test('iron-overlay-canceled event can be prevented', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) {
event.preventDefault();
@ -280,8 +233,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body);
setTimeout(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
Polymer.Base.async(function() {
assert.isTrue(overlay.opened, 'overlay is still open');
assert.isFalse(spy.called, 'iron-overlay-closed not fired');
done();
}, 10);
});
@ -290,11 +244,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('cancel an overlay with esc key', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) {
assert.equal(event.detail.type, 'keydown');
done();
});
fireEvent('keydown', {
keyCode: 27
}, document);
MockInteractions.pressAndReleaseKeyOn(document, 27);
});
});
@ -304,9 +257,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.isTrue(event.detail.canceled, 'overlay is canceled');
done();
});
fireEvent('keydown', {
keyCode: 27
}, document);
MockInteractions.pressAndReleaseKeyOn(document, 27);
});
});
@ -316,86 +267,262 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body);
setTimeout(function() {
Polymer.Base.async(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done();
}, 10);
});
});
test('no-cancel-on-outside-click property; focus stays on overlay when click outside', function(done) {
overlay = fixture('autofocus');
overlay.noCancelOnOutsideClick = true;
runAfterOpen(overlay, function() {
MockInteractions.tap(document.body);
setTimeout(function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
}, 10);
});
});
test('no-cancel-on-esc-key property', function(done) {
overlay.noCancelOnEscKey = true;
runAfterOpen(overlay, function() {
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
fireEvent('keydown', {
keyCode: 27
}, document);
setTimeout(function() {
MockInteractions.pressAndReleaseKeyOn(document, 27);
Polymer.Base.async(function() {
assert.isFalse(spy.called, 'iron-overlay-cancel should not fire');
done();
}, 10);
});
});
test('with-backdrop sets tabindex=-1 and removes it', function() {
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '-1', 'tabindex is -1');
overlay.withBackdrop = false;
assert.isFalse(overlay.hasAttribute('tabindex'), 'tabindex removed');
});
test('with-backdrop does not override tabindex if already set', function() {
overlay.setAttribute('tabindex', '1');
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is 1');
overlay.withBackdrop = false;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is still 1');
});
});
suite('opened overlay', function() {
var overlay;
setup(function() {
overlay = fixture('opened');
});
test('overlay open by default', function(done) {
overlay.addEventListener('iron-overlay-opened', function() {
assert.isTrue(overlay.opened, 'overlay starts opened');
assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay starts showing');
done();
});
});
test('overlay positioned & sized properly', function(done) {
overlay.addEventListener('iron-overlay-opened', function() {
var s = getComputedStyle(overlay);
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth) / 2, 'centered horizontally');
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight) / 2, 'centered vertically');
done();
});
});
test('open overlay refits on iron-resize', function() {
var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize');
assert.isTrue(spy.called, 'overlay should refit');
});
});
suite('focus handling', function() {
var overlay;
setup(function() {
overlay = fixture('autofocus');
});
test('node with autofocus is focused', function(done) {
runAfterOpen(overlay, function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
});
});
test('no-auto-focus will not focus node with autofocus', function(done) {
overlay.noAutoFocus = true;
runAfterOpen(overlay, function() {
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not focused after opened');
done();
});
// In Safari the element with autofocus will immediately receive focus when displayed for the first time http://jsbin.com/woroci/2/
// Ensure this is not the case for overlay.
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not immediately focused');
});
test('no-cancel-on-outside-click property; focus stays on overlay when click outside', function(done) {
overlay.noCancelOnOutsideClick = true;
runAfterOpen(overlay, function() {
MockInteractions.tap(document.body);
Polymer.Base.async(function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
}, 10);
});
});
test('with-backdrop traps the focus within the overlay', function(done) {
var focusSpy = sinon.stub();
var button = document.createElement('button');
document.body.appendChild(button);
button.addEventListener('focus', focusSpy, true);
overlay.withBackdrop = true;
runAfterOpen(overlay, function() {
// Try to steal the focus
MockInteractions.focus(button);
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
assert.equal(focusSpy.callCount, 0, 'button in body did not get the focus');
document.body.removeChild(button);
done();
});
});
});
suite('overlay with backdrop', function() {
var overlay;
setup(function() {
overlay = fixture('backdrop');
});
test('backdrop is opened when overlay is opened', function(done) {
assert.isDefined(overlay.backdropElement, 'backdrop is defined');
runAfterOpen(overlay, function() {
assert.isTrue(overlay.backdropElement.opened, 'backdrop is opened');
assert.isDefined(overlay.backdropElement.parentNode, 'backdrop is inserted in the DOM');
done();
});
});
test('backdrop appears behind the overlay', function(done) {
runAfterOpen(overlay, function() {
styleZ = parseInt(window.getComputedStyle(overlay).zIndex, 10);
backdropStyleZ = parseInt(window.getComputedStyle(overlay.backdropElement).zIndex, 10);
assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index than backdrop');
done();
});
});
test('backdrop is removed when overlay is closed', function(done) {
runAfterOpen(overlay, function() {
runAfterClose(overlay, function() {
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
done();
});
});
});
test('backdrop is removed when the element is removed from DOM', function(done) {
runAfterOpen(overlay, function() {
Polymer.dom(overlay).parentNode.removeChild(overlay);
// Wait enough so detached is executed.
Polymer.Base.async(function() {
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
done();
}, 100);
});
});
test('manager.getBackdrops() immediately updated on opened changes', function() {
overlay.opened = true;
assert.equal(overlay._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
overlay.opened = false;
assert.equal(overlay._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
});
test('updating with-backdrop to false closes backdrop', function(done) {
runAfterOpen(overlay, function() {
overlay.withBackdrop = false;
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
done();
});
});
test('backdrop is removed when toggling overlay opened', function(done) {
overlay.open();
assert.isObject(overlay.backdropElement.parentNode, 'backdrop is immediately inserted in the document');
runAfterClose(overlay, function() {
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
done();
});
});
});
suite('multiple overlays', function() {
var overlays;
var overlay1, overlay2;
setup(function() {
overlays = fixture('multiple');
var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
});
test('new overlays appear on top', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
var styleZ1 = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
assert.isTrue(styleZ1 > styleZ, 'overlays[1] has higher z-index than overlays[0]');
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var styleZ1 = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
assert.isTrue(styleZ1 > styleZ, 'overlay2 has higher z-index than overlay1');
done();
});
});
});
test('ESC closes only one opened overlay', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
// keydown is sync, keyup async (but no need to wait for it).
MockInteractions.pressAndReleaseKeyOn(document.body, 27);
// Ideally overlays[1] should be closed and overlays[0] still open,
// but in this test env overlays[0]._onCaptureKeydown gets called before
// overlays[1]._onCaptureKeydown.
// TODO investigate if this is because of CustomEvents in MockInteractions.
var opened0 = overlays[0].opened && !overlays[1].opened;
var opened1 = !overlays[0].opened && overlays[1].opened;
assert.isTrue(opened0 || opened1, 'only one overlay is still opened');
test('ESC closes only the top overlay', function(done) {
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
MockInteractions.pressAndReleaseKeyOn(document, 27);
assert.isFalse(overlay2.opened, 'overlay2 was closed');
assert.isTrue(overlay1.opened, 'overlay1 is still opened');
done();
});
});
});
test('close an overlay in proximity to another overlay', function(done) {
// Open and close a separate overlay.
overlay1.open();
overlay1.close();
// Open the overlay we care about.
overlay2.open();
// Immediately close the first overlay.
// Wait for infinite recursion, otherwise we win.
runAfterClose(overlay2, function() {
done();
})
});
});
suite('z-ordering', function() {
var overlays;
var originalMinimumZ;
var overlay1, overlay2;
setup(function() {
overlays = fixture('multiple');
var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
originalMinimumZ = Polymer.IronOverlayManager._minimumZ;
});
@ -405,9 +532,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// for iframes
test('default z-index is greater than 100', function(done) {
runAfterOpen(overlays[0], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
assert.isTrue(styleZ > 100, 'overlays[0] z-index is <= 100');
runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 100, 'overlay1 z-index is <= 100');
done();
});
});
@ -415,9 +542,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('ensureMinimumZ() effects z-index', function(done) {
Polymer.IronOverlayManager.ensureMinimumZ(1000);
runAfterOpen(overlays[0], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000');
runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
done();
});
});
@ -426,155 +553,69 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.IronOverlayManager.ensureMinimumZ(1000);
Polymer.IronOverlayManager.ensureMinimumZ(500);
runAfterOpen(overlays[0], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000');
runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
done();
});
});
});
suite('overlays with backdrop', function() {
var overlays;
setup(function() {
overlays = fixture('backdrop-multiple');
});
test('backdrop appears behind the overlay', function(done) {
runAfterOpen(overlays[0], function() {
assert.isDefined(overlays[0].backdropElement, 'backdrop is defined');
assert.isDefined(overlays[0].backdropElement.parentNode, 'backdrop is inserted in the DOM');
styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
backdropStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index than backdrop');
done();
});
});
test('backdrop is removed when the element is removed from DOM', function(done) {
runAfterOpen(overlays[0], function() {
var backdrop = overlays[0].backdropElement;
Polymer.dom(backdrop.parentNode).removeChild(backdrop);
Polymer.dom.flush();
assert.isNull(backdrop.parentNode, 'backdrop is removed from DOM');
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), (0));
done();
});
});
test('backdrop is opened when iron-overlay-open-completed fires', function(done) {
runAfterOpen(overlays[0], function() {
assert.isTrue(overlays[0].backdropElement.opened, 'backdrop is opened');
done();
});
});
test('manager backdrops immediately updated on opened changes', function() {
overlays[0].opened = true;
assert.equal(overlays[0]._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
overlays[0].opened = false;
assert.equal(overlays[0]._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
});
test('with-backdrop sets tabindex=-1 and removes it', function() {
var overlay = fixture('basic');
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '-1', 'tabindex is -1');
overlay.withBackdrop = false;
assert.isFalse(overlay.hasAttribute('tabindex'), 'tabindex removed');
});
test('with-backdrop does not override tabindex if already set', function() {
var overlay = fixture('basic');
overlay.setAttribute('tabindex', '1');
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is 1');
overlay.withBackdrop = false;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is still 1');
});
test('with-backdrop traps the focus within the overlay', function(done) {
// Add button to try to "steal" focus.
var button = document.createElement('button');
var focusSpy = sinon.stub();
button.addEventListener('focus', focusSpy, true);
document.body.appendChild(button);
var overlay = fixture('autofocus');
overlay.withBackdrop = true;
runAfterOpen(overlay, function() {
// Try to steal the focus
MockInteractions.focus(button);
assert.isFalse(focusSpy.called, 'button in body did not get the focus');
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
button.parentNode.removeChild(button);
done();
});
});
});
suite('multiple overlays with backdrop', function() {
var overlays;
var overlay1, overlay2, overlay3;
setup(function() {
overlays = fixture('backdrop-multiple');
var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
overlay3 = f[2];
overlay1.withBackdrop = overlay2.withBackdrop = overlay3.withBackdrop = true;
});
test('multiple overlays share the same backdrop', function() {
assert.isTrue(overlays[0].backdropElement === overlays[1].backdropElement, 'overlays[0] has the same backdrop element as overlays[1]');
assert.isTrue(overlay1.backdropElement === overlay2.backdropElement, 'overlay1 and overlay2 have the same backdrop element');
assert.isTrue(overlay1.backdropElement === overlay3.backdropElement, 'overlay1 and overlay3 have the same backdrop element');
});
test('newest overlay appear on top', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
assert.isTrue(style1Z > styleZ, 'overlays[1] has higher z-index than overlays[0]');
assert.isTrue(styleZ > bgStyleZ, 'overlays[0] has higher z-index than backdrop');
done();
});
});
test('only one iron-overlay-backdrop in the DOM', function() {
// Open them all.
overlay1.opened = overlay2.opened = overlay3.opened = true;
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1, 'only one backdrop element in the DOM');
});
test('updating with-backdrop to false closes backdrop', function(done) {
// no waiting for animations
overlays[0].backdropElement.style.transitionDuration = '0s';
runAfterOpen(overlays[0], function() {
overlays[0].withBackdrop = false;
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
overlays[0].backdropElement.style.transitionDuration = '';
done();
});
});
test('backdrop is removed when toggling overlay opened', function(done) {
overlays[0].open();
assert.isObject(overlays[0].backdropElement.parentNode, 'backdrop is immediately inserted in the document');
overlays[0].close();
// Wait a tick (overlay will call backdropElement.close in the _openChangedAsync)
setTimeout(function() {
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
test('iron-overlay-backdrop is removed from the DOM when all overlays with backdrop are closed', function(done) {
// Open & close them all.
overlay1.opened = overlay2.opened = overlay3.opened = true;
overlay1.opened = overlay2.opened = overlay3.opened = false;
Polymer.Base.async(function() {
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'backdrop element removed from the DOM');
done();
}, 1);
});
test('newest overlay appear on top', function(done) {
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
assert.isTrue(style1Z > styleZ, 'overlay2 has higher z-index than overlay1');
assert.isTrue(styleZ > bgStyleZ, 'overlay1 has higher z-index than backdrop');
done();
});
});
});
test('updating with-backdrop updates z-index', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
overlays[0].withBackdrop = false;
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
assert.isTrue(style1Z > bgStyleZ, 'overlays[1] has higher z-index than backdrop');
assert.isTrue(styleZ < bgStyleZ, 'overlays[0] has lower z-index than backdrop');
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
overlay1.withBackdrop = false;
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
assert.isTrue(style1Z > bgStyleZ, 'overlay2 has higher z-index than backdrop');
assert.isTrue(styleZ < bgStyleZ, 'overlay1 has lower z-index than backdrop');
done();
});
});
@ -582,44 +623,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
suite('multiple overlays with backdrop implemented in different elements', function () {
var overlays;
setup(function() {
overlays = fixture('backdrop-different-elements');
});
test('multiple overlays share the same backdrop', function() {
assert.equal(overlays[0].backdropElement, overlays[1].backdropElement);
});
test('when overlays close, the backdrop is closed', function(done) {
runAfterOpen(overlays[0], function () {
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1);
// After second overlay is closed, both backdrops should be hidden
overlays[1].addEventListener('iron-overlay-closed', function() {
Polymer.Base.async(function () {
assert.isFalse(overlays[1].backdropElement.opened, 'second overlay backdrop is closed');
assert.isFalse(overlays[0].backdropElement.opened, 'first overlay backdrop is closed');
done();
}, 1);
});
// After second overlay is opened, immediately close it
overlays[1].addEventListener('iron-overlay-opened', function() {
Polymer.Base.async(function () {
overlays[1].close();
}, 1);
});
// Immediately close first overlay and open the other one
overlays[0].close();
overlays[1].open();
});
});
})
suite('a11y', function() {
test('overlay has aria-hidden=true when opened', function() {
@ -632,8 +635,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
})
</script>
</body>
</html>

View File

@ -1,6 +1,6 @@
{
"name": "iron-resizable-behavior",
"version": "1.0.2",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements",
"private": true,
@ -24,15 +24,16 @@
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-resizable-behavior",
"_release": "1.0.2",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
"tag": "v1.0.3",
"commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
},
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
"_target": "^1.0.0",

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: fs6PoLBRc5z3vn6PWJTkxmGWTHnHVcXx2c7sb7wUlLFLjWUegb93X5gAUhAQvvLvFYT8uMYxT7sNsP15O16CH9OWS8h6ZbgaPp61zRJXvGN+pOtohOloanjzANzsYNFsV3LKEFg8/BULqQAKkRAdsg4hXfMWDzPvCGl1++y5mGc=
- secure: gm+c5R0tFY/GJfKOnfV3J0IADe7QSzo5wZvRq4wZnroK9gBixuI66fq0dhRFtMjkc3dip1h+iqwmRqY8bKoMriCcl8J8ya7mG92sUTz57H7Sr6hxoYDdT4v+JUrQ+iZmTczh77IAQDZrAnxQIeEnBsLezidZD4b+EAYCICvL9WE=
- 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,6 +1,6 @@
{
"name": "iron-resizable-behavior",
"version": "1.0.2",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements",
"private": true,
@ -24,7 +24,8 @@
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
},
"ignore": []
}

View File

@ -17,11 +17,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
* size or hidden state of their children) and "resizables" (elements that need to be
* notified when they are resized or un-hidden by their parents in order to take
* action on their new measurements).
*
* Elements that perform measurement should add the `IronResizableBehavior` behavior to
* their element definition and listen for the `iron-resize` event on themselves.
* This event will be fired when they become showing after having been hidden,
* when they are resized explicitly by another resizable, or when the window has been
* resized.
*
* Note, the `iron-resize` event is non-bubbling.
*
* @polymerBehavior Polymer.IronResizableBehavior

View File

@ -82,7 +82,7 @@ Notes on Polyfill compatibility in tests:
suite('x-resizer-parent', function() {
test('notify resizables from window', function(done) {
test('notify resizables from window', function() {
var listeners = [
ListenForResize(testEl.$.parent),
ListenForResize(testEl.$.child1a),
@ -91,22 +91,13 @@ Notes on Polyfill compatibility in tests:
ListenForResize(testEl.$.shadow1d.$.resizable)
];
setTimeout(function() {
try {
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
expect(pendingNotifications).to.be.eql(0);
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
RemoveListeners(listeners);
});
test('notify resizables from parent', function(done) {
test('notify resizables from parent', function() {
var listeners = [
ListenForResize(testEl.$.parent),
ListenForResize(testEl.$.child1a),
@ -115,43 +106,33 @@ Notes on Polyfill compatibility in tests:
ListenForResize(testEl.$.shadow1d.$.resizable)
];
setTimeout(function() {
try {
testEl.$.parent.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
testEl.$.parent.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
test('detach resizables then notify parent', function(done) {
var listeners = [
ListenForResize(testEl.$.parent),
ListenForResize(testEl.$.child1a, false),
ListenForResize(testEl.$.child1b),
ListenForResize(testEl.$.shadow1c.$.resizable, false),
ListenForResize(testEl.$.shadow1d.$.resizable)
];
test('detach resizables then notify parent', function() {
sinon.spy(testEl.$.child1a, 'notifyResize');
sinon.spy(testEl.$.shadow1c.$.resizable, 'notifyResize');
sinon.spy(testEl.$.child1b, 'notifyResize');
sinon.spy(testEl.$.shadow1d.$.resizable, 'notifyResize');
var el = Polymer.dom(testEl.root).querySelector('#child1a');
var firstElementToRemove = testEl.$.child1a;
var firstElementParent = Polymer.dom(firstElementToRemove).parentNode;
var secondElementToRemove = testEl.$.shadow1c.$.resizable;
var secondElementParent = Polymer.dom(secondElementToRemove).parentNode;
el.parentNode.removeChild(el);
el = Polymer.dom(testEl.root).querySelector('#shadow1c');
el.parentNode.removeChild(el);
Polymer.dom(firstElementParent).removeChild(firstElementToRemove);
Polymer.dom(secondElementParent).removeChild(secondElementToRemove);
setTimeout(function() {
try {
testEl.$.parent.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
Polymer.dom.flush();
testEl.$.parent.notifyResize();
expect(testEl.$.child1a.notifyResize.callCount).to.be.equal(0);
expect(testEl.$.shadow1c.$.resizable.notifyResize.callCount).to.be.equal(0);
expect(testEl.$.child1b.notifyResize.callCount).to.be.equal(1);
expect(testEl.$.shadow1d.$.resizable.notifyResize.callCount).to.be.equal(1);
});
test('detach parent then notify window', function(done) {
@ -183,7 +164,7 @@ Notes on Polyfill compatibility in tests:
suite('x-resizer-parent-filtered', function() {
test('notify resizables from window', function(done) {
test('notify resizables from window', function() {
var listeners = [
ListenForResize(testEl.$.parentFiltered),
ListenForResize(testEl.$.child2a),
@ -194,19 +175,12 @@ Notes on Polyfill compatibility in tests:
testEl.$.parentFiltered.active = testEl.$.child2a;
setTimeout(function() {
try {
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
test('notify resizables from parent', function(done) {
test('notify resizables from parent', function() {
var listeners = [
ListenForResize(testEl.$.parentFiltered),
ListenForResize(testEl.$.child2a),
@ -217,19 +191,12 @@ Notes on Polyfill compatibility in tests:
testEl.$.parentFiltered.active = testEl.$.child2a;
setTimeout(function() {
try {
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
test('detach resizables then notify parent', function(done) {
test('detach resizables then notify parent', function() {
var listeners = [
ListenForResize(testEl.$.parentFiltered),
ListenForResize(testEl.$.child2a, false),
@ -245,16 +212,9 @@ Notes on Polyfill compatibility in tests:
testEl.$.parentFiltered.active = testEl.$.shadow2d.$.resizable;
setTimeout(function() {
try {
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
});
});

View File

@ -1,5 +1,4 @@
<!doctype html>
<!--
<!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
@ -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
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>
--><html><head>
<meta charset="utf-8">
<title>Tests</title>
@ -20,13 +16,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'basic.html',
'iron-resizable-behavior.html'
'iron-resizable-behavior.html',
'basic.html?dom=shadow',
'iron-resizable-behavior.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View File

@ -74,6 +74,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
suite('window\'s resize', function() {
test('causes all iron-resize events to fire once', function() {
window.dispatchEvent(new CustomEvent('resize'));
Polymer.dom.flush();
expect(resizable.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable2.ironResizeCount).to.be.equal(2);

View File

@ -1,6 +1,6 @@
{
"name": "iron-selector",
"version": "1.2.1",
"version": "1.2.4",
"description": "Manages a set of elements that can be selected",
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
@ -30,11 +30,11 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.2.1",
"_release": "1.2.4",
"_resolution": {
"type": "version",
"tag": "v1.2.1",
"commit": "1e6a7ee05e5ff350472ffc1ee780f145a7606b7b"
"tag": "v1.2.4",
"commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4"
},
"_source": "git://github.com/PolymerElements/iron-selector.git",
"_target": "^1.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "iron-selector",
"version": "1.2.1",
"version": "1.2.4",
"description": "Manages a set of elements that can be selected",
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",

View File

@ -46,7 +46,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
observers: [
'_updateSelected(attrForSelected, selectedValues)'
'_updateSelected(selectedValues)'
],
/**
@ -77,6 +77,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
(this.selectedValues != null && this.selectedValues.length);
},
_updateAttrForSelected: function() {
if (!this.multi) {
Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
} else if (this._shouldUpdateSelection) {
this.selectedValues = this.selectedItems.map(function(selectedItem) {
return this._indexToValue(this.indexOf(selectedItem));
}, this).filter(function(unfilteredValue) {
return unfilteredValue != null;
}, this);
}
},
_updateSelected: function() {
if (this.multi) {
this._selectMulti(this.selectedValues);
@ -86,11 +98,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
_selectMulti: function(values) {
this._selection.clear();
if (values) {
for (var i = 0; i < values.length; i++) {
this._selection.setItemSelected(this._valueToItem(values[i]), true);
var selectedItems = this._valuesToItems(values);
// clear all but the current selected items
this._selection.clear(selectedItems);
// select only those not selected yet
for (var i = 0; i < selectedItems.length; i++) {
this._selection.setItemSelected(selectedItems[i], true);
}
} else {
this._selection.clear();
}
},
@ -113,6 +130,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this.splice('selectedValues',i,1);
}
this._selection.setItemSelected(this._valueToItem(value), unselected);
},
_valuesToItems: function(values) {
return (values == null) ? null : values.map(function(value) {
return this._valueToItem(value);
}, this);
}
};

View File

@ -136,7 +136,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
observers: [
'_updateSelected(attrForSelected, selected)'
'_updateAttrForSelected(attrForSelected)',
'_updateSelected(selected)'
],
created: function() {
@ -148,7 +149,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this._observer = this._observeItems(this);
this._updateItems();
if (!this._shouldUpdateSelection) {
this._updateSelected(this.attrForSelected,this.selected)
this._updateSelected();
}
this._addListener(this.activateEvent);
},
@ -241,6 +242,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this._setItems(nodes);
},
_updateAttrForSelected: function() {
if (this._shouldUpdateSelection) {
this.selected = this._indexToValue(this.indexOf(this.selectedItem));
}
},
_updateSelected: function() {
this._selectSelected(this.selected);
},
@ -310,7 +317,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
// Let other interested parties know about the change so that
// we don't have to recreate mutation observers everywher.
// we don't have to recreate mutation observers everywhere.
this.fire('iron-items-changed', mutations, {
bubbles: false,
cancelable: false

View File

@ -69,16 +69,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
*/
setItemSelected: function(item, isSelected) {
if (item != null) {
if (isSelected) {
this.selection.push(item);
} else {
var i = this.selection.indexOf(item);
if (i >= 0) {
this.selection.splice(i, 1);
if (isSelected !== this.isSelected(item)) {
// proceed to update selection only if requested state differs from current
if (isSelected) {
this.selection.push(item);
} else {
var i = this.selection.indexOf(item);
if (i >= 0) {
this.selection.splice(i, 1);
}
}
if (this.selectCallback) {
this.selectCallback(item, isSelected);
}
}
if (this.selectCallback) {
this.selectCallback(item, isSelected);
}
}
},

View File

@ -1,15 +1,11 @@
<!doctype html>
<!--
<!DOCTYPE html><!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
--><html><head>
<meta charset="utf-8">
<title>Tests</title>
@ -19,7 +15,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'activate-event.html',
'basic.html',
@ -29,10 +24,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
'selected-attribute.html',
'template-repeat.html',
'content.html',
'excluded-local-names.html'
'excluded-local-names.html',
'activate-event.html?dom=shadow',
'basic.html?dom=shadow',
'multi.html?dom=shadow',
'next-previous.html?dom=shadow',
'selected-attribute.html?dom=shadow',
'template-repeat.html?dom=shadow',
'content.html?dom=shadow',
'excluded-local-names.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View File

@ -93,8 +93,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('set multi-selection via tap', function() {
// set selectedValues
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
MockInteractions.tap(s.children[0]);
MockInteractions.tap(s.children[2]);
// check selected class
assert.isTrue(s.children[0].classList.contains('iron-selected'));
assert.isTrue(s.children[2].classList.contains('iron-selected'));
@ -104,31 +104,106 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.equal(s.selectedItems[1], s.children[2]);
});
test('fire iron-select/deselect events', function() {
// setup listener for iron-select event
var selectEventCounter = 0;
test('fire iron-select/deselect events when selectedValues changes', function() {
// setup listener for iron-select/deselect events
var items = [s.children[0], s.children[1], s.children[2]],
selectEventCounters = [0, 0, 0],
deselectEventCounters = [0, 0, 0];
s.addEventListener('iron-select', function(e) {
selectEventCounter++;
selectEventCounters[items.indexOf(e.detail.item)]++;
});
// setup listener for core-deselect event
var deselectEventCounter = 0;
s.addEventListener('iron-deselect', function(e) {
deselectEventCounter++;
deselectEventCounters[items.indexOf(e.detail.item)]++;
});
// tap to select an item
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
// programatically select values 0 and 1 (both fire select)
s.selectedValues = [0, 1];
// programatically select values 1 and 2 (2 fires select, 0 fires deselect)
s.selectedValues = [1, 2];
// programatically deselect all values (1 and 2 fire deselect)
s.selectedValues = [];
// check events
assert.equal(selectEventCounter, 1);
assert.equal(deselectEventCounter, 0);
// tap on already selected item should deselect it
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
// check selectedValues
assert.equal(s.selectedValues.length, 0);
// check class
assert.isFalse(s.children[0].classList.contains('iron-selected'));
assert.equal(selectEventCounters[0], 1);
assert.equal(deselectEventCounters[0], 1);
assert.equal(selectEventCounters[1], 1);
assert.equal(deselectEventCounters[1], 1);
assert.equal(selectEventCounters[2], 1);
assert.equal(deselectEventCounters[2], 1);
});
test('fire iron-select/deselect events when toggling items', function() {
// setup listener for iron-select/deselect events
var items = [s.children[0], s.children[1], s.children[2]],
selectEventCounters = [0, 0, 0],
deselectEventCounters = [0, 0, 0];
s.addEventListener('iron-select', function(e) {
selectEventCounters[items.indexOf(e.detail.item)]++;
});
s.addEventListener('iron-deselect', function(e) {
deselectEventCounters[items.indexOf(e.detail.item)]++;
});
// tap to select items 0 and 1 (both fire select)
MockInteractions.tap(items[0]);
MockInteractions.tap(items[1]);
// programatically select values 1 and 2 (2 fires select, 0 fires deselect)
s.selectedValues = [1, 2];
// tap to deselect items 1 and 2 (both fire deselect)
MockInteractions.tap(items[1]);
MockInteractions.tap(items[2]);
// check events
assert.equal(selectEventCounter, 1);
assert.equal(deselectEventCounter, 1);
assert.equal(selectEventCounters[0], 1);
assert.equal(deselectEventCounters[0], 1);
assert.equal(selectEventCounters[1], 1);
assert.equal(deselectEventCounters[1], 1);
assert.equal(selectEventCounters[2], 1);
assert.equal(deselectEventCounters[2], 1);
});
test('toggle iron-selected class when toggling items selection', function() {
// setup listener for iron-item-select/deselect events
var item0 = s.children[0], item1 = s.children[1];
assert.isFalse(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
// tap to select item 0 (add iron-selected class)
MockInteractions.tap(item0);
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
// tap to select item 1 (add iron-selected class)
MockInteractions.tap(item1);
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isTrue(item1.classList.contains('iron-selected'));
// tap to deselect item 1 (remove iron-selected class)
MockInteractions.tap(item1);
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
// programatically select both values (1 add iron-selected class)
s.selectedValues = [0, 1];
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isTrue(item1.classList.contains('iron-selected'));
// programatically deselect all values (both removes iron-selected class)
s.selectedValues = [];
assert.isFalse(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
});
test('fires selected-values-changed when selection changes', function() {
@ -180,10 +255,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.dom(s).removeChild(lastChild);
Polymer.Base.async(function() {
expect(s.selectedItems.length).to.be.equal(1);
done();
});
Polymer.dom.flush();
expect(s.selectedItems.length).to.be.equal(1);
expect(s.selectedItems[0]).to.be.equal(firstChild);
done();
});
});

View File

@ -43,6 +43,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="test-attr-change">
<template>
<iron-selector id="selector" attr-for-selected="data-x" selected="x-1">
<div data-x="x-1" data-y="y-1">1</div>
<div data-x="x-2" data-y="y-2">2</div>
<div data-x="x-3" data-y="y-3">3</div>
</iron-selector>
</template>
</test-fixture>
<test-fixture id="test-attr-change-multi">
<template>
<iron-selector multi id="selector"
attr-for-selected="data-x"
selected-values='["x-1","x-2"]'>
<div data-x="x-1" data-y="y-1">1</div>
<div data-x="x-2" data-y="y-2">2</div>
<div data-x="x-3" data-y="y-3">3</div>
</iron-selector>
</template>
</test-fixture>
<script>
suite('selected attributes', function() {
@ -66,6 +88,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
suite('changing attrForSelected', function() {
var s;
setup(function () {
s = fixture('test-attr-change');
});
test('changing selectedAttribute', function() {
Polymer.dom.flush();
s.attrForSelected = 'data-y';
assert.equal(s.selected, 'y-1');
});
});
suite('changing attrForSelected in multi', function() {
var s;
setup(function () {
s = fixture('test-attr-change-multi');
});
test('changing selectedAttribute', function() {
Polymer.dom.flush();
s.attrForSelected = 'data-y';
assert.equal(s.selectedValues.length, 2);
assert.equal(s.selectedValues[0],'y-1');
assert.equal(s.selectedValues[1],'y-2');
});
});
</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

@ -36,14 +36,14 @@
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/paper-icon-button",
"homepage": "https://github.com/PolymerElements/paper-icon-button",
"_release": "1.0.6",
"_resolution": {
"type": "version",
"tag": "v1.0.6",
"commit": "35347d81939093cd2abe2783ac1b17fa57b7b303"
},
"_source": "git://github.com/polymerelements/paper-icon-button.git",
"_source": "git://github.com/PolymerElements/paper-icon-button.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-icon-button"
"_originalSource": "PolymerElements/paper-icon-button"
}

View File

@ -1,6 +1,6 @@
{
"name": "paper-input",
"version": "1.1.5",
"version": "1.1.6",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
@ -33,7 +33,7 @@
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
"iron-input": "PolymerElements/iron-input#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
@ -47,11 +47,11 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.1.5",
"_release": "1.1.6",
"_resolution": {
"type": "version",
"tag": "v1.1.5",
"commit": "0aa8318b5e026688f94c78c7673acabf5bad0f17"
"tag": "v1.1.6",
"commit": "d918956322b733ee7673aec6e1ce9939aadb4c63"
},
"_source": "git://github.com/polymerelements/paper-input.git",
"_target": "^1.0.9",

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": "paper-input",
"version": "1.1.5",
"version": "1.1.6",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
@ -33,7 +33,7 @@
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
"iron-input": "PolymerElements/iron-input#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {

View File

@ -365,13 +365,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
listeners: {
'addon-attached': '_onAddonAttached',
'focus': '_onFocus'
},
observers: [
'_focusedControlStateChanged(focused)'
],
keyBindings: {
'shift+tab:keydown': '_onShiftTabDown'
},
@ -440,12 +435,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
/**
* Forward focus to inputElement
* Forward focus to inputElement. Overriden from IronControlState.
*/
_onFocus: function() {
if (!this._shiftTabPressed) {
_focusBlurHandler: function(event) {
if (this._shiftTabPressed)
return;
Polymer.IronControlState._focusBlurHandler.call(this, event);
// Forward the focus to the nested input.
if (this.focused)
this._focusableElement.focus();
}
},
/**
@ -497,24 +497,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return placeholder || alwaysFloatLabel;
},
_focusedControlStateChanged: function(focused) {
// IronControlState stops the focus and blur events in order to redispatch them on the host
// element, but paper-input-container listens to those events. Since there are more
// pending work on focus/blur in IronControlState, I'm putting in this hack to get the
// input focus state working for now.
if (!this.$.container) {
this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
if (!this.$.container) {
return;
}
}
if (focused) {
this.$.container._onFocus();
} else {
this.$.container._onBlur();
}
},
_updateAriaLabelledBy: function() {
var label = Polymer.dom(this.root).querySelector('label');
if (!label) {

View File

@ -72,13 +72,13 @@ Custom property | Description | Default
state.value = state.value || '';
// Account for the textarea's new lines.
var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
var counter = state.value.length;
if (state.inputElement.hasAttribute('maxlength')) {
str += '/' + state.inputElement.getAttribute('maxlength');
counter += '/' + state.inputElement.getAttribute('maxlength');
}
this._charCounterStr = str;
this._charCounterStr = counter;
}
});
</script>

View File

@ -10,7 +10,6 @@ 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-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/typography.html">
@ -74,8 +73,8 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--primary-color`
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--error-color`
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
`--paper-input-container` | Mixin applied to the container | `{}`
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
@ -125,8 +124,9 @@ This element is `display:block` by default, but you can set the `inline` attribu
.focused-line {
@apply(--layout-fit);
background: var(--paper-input-container-focus-color, --default-primary-color);
background: var(--paper-input-container-focus-color, --primary-color);
height: 2px;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale3d(0,1,1);
@ -145,7 +145,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
}
.underline.is-invalid .focused-line {
background: var(--paper-input-container-invalid-color, --google-red-500);
background: var(--paper-input-container-invalid-color, --error-color);
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform 0.25s;
@ -157,8 +157,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
.unfocused-line {
@apply(--layout-fit);
height: 1px;
background: var(--paper-input-container-color, --secondary-text-color);
height: 1px;
@apply(--paper-input-container-underline);
}
@ -174,6 +174,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
.label-and-input-container {
@apply(--layout-flex-auto);
@apply(--layout-relative);
width: 100%;
max-width: 100%;
}
@ -194,26 +195,26 @@ This element is `display:block` by default, but you can set the `inline` attribu
width: 100%;
font: inherit;
color: var(--paper-input-container-color, --secondary-text-color);
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
transition: transform 0.25s, width 0.25s;
-webkit-transform-origin: left top;
transform-origin: left top;
@apply(--paper-font-common-nowrap);
@apply(--paper-font-subhead);
@apply(--paper-input-container-label);
@apply(--paper-transition-easing);
}
.input-content.label-is-floating ::content label,
.input-content.label-is-floating ::content .paper-input-label {
-webkit-transform: translateY(-75%) scale(0.75);
transform: translateY(-75%) scale(0.75);
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
transition: transform 0.25s, width 0.25s;
-webkit-transform-origin: left top;
transform-origin: left top;
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
original space now available */
width: 133%;
@apply(--paper-transition-easing);
@apply(--paper-input-container-label-floating);
}
@ -229,14 +230,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
.input-content.label-is-highlighted ::content label,
.input-content.label-is-highlighted ::content .paper-input-label {
color: var(--paper-input-container-focus-color, --default-primary-color);
color: var(--paper-input-container-focus-color, --primary-color);
@apply(--paper-input-container-label-focus);
}
.input-content.is-invalid ::content label,
.input-content.is-invalid ::content .paper-input-label {
color: var(--paper-input-container-invalid-color, --google-red-500);
color: var(--paper-input-container-invalid-color, --error-color);
}
.input-content.label-is-hidden ::content label,
@ -266,12 +267,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
::content [prefix] {
@apply(--paper-font-subhead);
@apply(--paper-input-prefix);
@apply(--layout-flex-none);
}
::content [suffix] {
@apply(--paper-font-subhead);
@apply(--paper-input-suffix);
@apply(--layout-flex-none);
}
@ -290,11 +293,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
}
.add-on-content.is-invalid ::content * {
color: var(--paper-input-container-invalid-color, --google-red-500);
color: var(--paper-input-container-invalid-color, --error-color);
}
.add-on-content.is-highlighted ::content * {
color: var(--paper-input-container-focus-color, --default-primary-color);
color: var(--paper-input-container-focus-color, --primary-color);
}
</style>

View File

@ -9,7 +9,6 @@ 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="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="paper-input-addon-behavior.html">
@ -28,7 +27,7 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
`--paper-input-container-invalid-color` | The foreground color of the error | `--error-color`
`--paper-input-error` | Mixin applied to the error | `{}`
-->
@ -39,7 +38,7 @@ Custom property | Description | Default
display: inline-block;
visibility: hidden;
color: var(--paper-input-container-invalid-color, --google-red-500);
color: var(--paper-input-container-invalid-color, --error-color);
@apply(--paper-font-caption);
@apply(--paper-input-error);

View File

@ -97,8 +97,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
assert.ok(counter, 'paper-input-char-counter exists');
// A new line counts as two characters.
assert.equal(counter._charCounterStr, input.value.length + 1, 'character counter shows the value length');
assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
});
});

View File

@ -196,23 +196,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
input = fixture('basic');
});
test('focus/blur events fired on host element', function() {
var nFocusEvents = 0;
var nBlurEvents = 0;
// At the moment, it is very hard to correctly fire exactly
// one focus/blur events on a paper-input. This is because
// when a paper-input is focused, it needs to focus
// its underlying native input, which will also fire a `blur`
// event.
test('focus events fired on host element', function() {
input.addEventListener('focus', function(event) {
nFocusEvents += 1;
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement);
});
input.addEventListener('blur', function() {
nBlurEvents += 1;
assert(!input.focused, 'input is blurred');
});
MockInteractions.focus(input.inputElement);
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
assert.isTrue(nBlurEvents >= 1, 'blur event fired');
MockInteractions.focus(input);
});
test('focus events fired on host element if nested element is focused', function() {
input.addEventListener('focus', function(event) {
assert(input.focused, 'input is focused');
});
MockInteractions.focus(input.inputElement);
});
test('blur events fired on host element', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input);
});
test('blur events fired on host element nested element is blurred', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input.inputElement);
});
test('focusing then bluring sets the focused attribute correctly', function() {
MockInteractions.focus(input);
assert(input.focused, 'input is focused');
MockInteractions.blur(input);
assert(!input.focused, 'input is blurred');
MockInteractions.focus(input.inputElement);
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement);
assert(!input.focused, 'input is blurred');
});
});
suite('focused styling (integration test)', function() {

View File

@ -32,12 +32,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="has-tabindex">
<template>
<paper-textarea tabindex="0"></paper-textarea>
</template>
</test-fixture>
<test-fixture id="label">
<template>
<paper-textarea label="foo"></paper-textarea>
@ -139,33 +133,50 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
input = fixture('basic');
});
test('focus/blur events fired on host element', function() {
var nFocusEvents = 0;
var nBlurEvents = 0;
// At the moment, it is very hard to correctly fire exactly
// one focus/blur events on a paper-textarea. This is because
// when a paper-textarea is focused, it needs to focus
// its underlying native textarea, which will also fire a `blur`
// event.
test('focus events fired on host element', function() {
input.addEventListener('focus', function(event) {
nFocusEvents += 1;
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement.textarea);
});
input.addEventListener('blur', function() {
nBlurEvents += 1;
assert(!input.focused, 'input is blurred');
});
MockInteractions.focus(input.inputElement.textarea);
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
assert.isTrue(nBlurEvents >= 1, 'blur event fired')
MockInteractions.focus(input);
});
test('focus a textarea with tabindex', function(done) {
var input = fixture('has-tabindex');
flush(function() {
assert.notEqual(document.activeElement, input._focusableElement);
MockInteractions.focus(input);
setTimeout(function() {
assert.equal(document.activeElement, input.shadowRoot ? input : input._focusableElement);
done();
}, 1);
})
test('focus events fired on host element if nested element is focused', function() {
input.addEventListener('focus', function(event) {
assert(input.focused, 'input is focused');
});
MockInteractions.focus(input.inputElement.textarea);
});
test('blur events fired on host element', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input);
});
test('blur events fired on host element nested element is blurred', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input.inputElement.textarea);
});
test('focusing then bluring sets the focused attribute correctly', function() {
MockInteractions.focus(input);
assert(input.focused, 'input is focused');
MockInteractions.blur(input);
assert(!input.focused, 'input is blurred');
MockInteractions.focus(input.inputElement.textarea);
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement.textarea);
assert(!input.focused, 'input is blurred');
});
});

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,7 +1,7 @@
{
"name": "webcomponentsjs",
"main": "webcomponents.js",
"version": "0.7.20",
"version": "0.7.21",
"homepage": "http://webcomponents.org",
"authors": [
"The Polymer Authors"
@ -18,11 +18,11 @@
"devDependencies": {
"web-component-tester": "^4.0.1"
},
"_release": "0.7.20",
"_release": "0.7.21",
"_resolution": {
"type": "version",
"tag": "v0.7.20",
"commit": "ce9c8597696ec4bafc772c2126a3b1c7b0e948c0"
"tag": "v0.7.21",
"commit": "19ffcd921e1aef84b55f515b00eb56e8e9116126"
},
"_source": "git://github.com/Polymer/webcomponentsjs.git",
"_target": "^0.7.20",

View File

@ -7,7 +7,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
*/
// @version 0.7.20
// @version 0.7.21
if (typeof WeakMap === "undefined") {
(function() {
var defineProperty = Object.defineProperty;

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,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
*/
// @version 0.7.20
// @version 0.7.21
if (typeof WeakMap === "undefined") {
(function() {
var defineProperty = Object.defineProperty;
@ -948,7 +948,7 @@ window.HTMLImports.addModule(function(scope) {
if (doc && this._mayParse.indexOf(doc) < 0) {
this._mayParse.push(doc);
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
for (var i = 0, l = nodes.length, p = 0, n; i < l && (n = nodes[i]); i++) {
for (var i = 0, l = nodes.length, n; i < l && (n = nodes[i]); i++) {
if (!this.isParsed(n)) {
if (this.hasResource(n)) {
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,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
*/
// @version 0.7.20
// @version 0.7.21
if (typeof WeakMap === "undefined") {
(function() {
var defineProperty = Object.defineProperty;

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,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
*/
// @version 0.7.20
// @version 0.7.21
if (typeof WeakMap === "undefined") {
(function() {
var defineProperty = Object.defineProperty;
@ -3411,10 +3411,7 @@ window.ShadowDOMPolyfill = {};
var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement;
if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null;
var activeElement = wrap(unwrappedActiveElement);
if (activeElement === this.host) {
return null;
}
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
while (!this.contains(activeElement)) {
while (activeElement.parentNode) {
activeElement = activeElement.parentNode;
}

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
{
"name": "webcomponentsjs",
"main": "webcomponents.js",
"version": "0.7.20",
"version": "0.7.21",
"homepage": "http://webcomponents.org",
"authors": [
"The Polymer Authors"

View File

@ -1,6 +1,6 @@
{
"name": "webcomponents.js",
"version": "0.7.20",
"version": "0.7.21",
"description": "webcomponents.js",
"main": "webcomponents.js",
"directories": {

View File

@ -7,7 +7,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
*/
// @version 0.7.20
// @version 0.7.21
(function() {
window.WebComponents = window.WebComponents || {
flags: {}
@ -912,14 +912,29 @@ if (typeof WeakMap === "undefined") {
}
})(self);
if (typeof HTMLTemplateElement === "undefined") {
(function() {
var TEMPLATE_TAG = "template";
(function() {
var needsTemplate = typeof HTMLTemplateElement === "undefined";
var needsCloning = function() {
if (!needsTemplate) {
var frag = document.createDocumentFragment();
var t = document.createElement("template");
frag.appendChild(t);
t.content.appendChild(document.createElement("div"));
var clone = frag.cloneNode(true);
return clone.firstChild.content.childNodes.length === 0;
}
}();
var TEMPLATE_TAG = "template";
var TemplateImpl = function() {};
if (needsTemplate) {
var contentDoc = document.implementation.createHTMLDocument("template");
var canDecorate = true;
HTMLTemplateElement = function() {};
HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype);
HTMLTemplateElement.decorate = function(template) {
var templateStyle = document.createElement("style");
templateStyle.textContent = TEMPLATE_TAG + "{display:none;}";
var head = document.head;
head.insertBefore(templateStyle, head.firstElementChild);
TemplateImpl.prototype = Object.create(HTMLElement.prototype);
TemplateImpl.decorate = function(template) {
if (template.content) {
return;
}
@ -940,7 +955,7 @@ if (typeof HTMLTemplateElement === "undefined") {
},
set: function(text) {
contentDoc.body.innerHTML = text;
HTMLTemplateElement.bootstrap(contentDoc);
TemplateImpl.bootstrap(contentDoc);
while (this.content.firstChild) {
this.content.removeChild(this.content.firstChild);
}
@ -950,27 +965,30 @@ if (typeof HTMLTemplateElement === "undefined") {
},
configurable: true
});
template.cloneNode = function(deep) {
return TemplateImpl.cloneNode(this, deep);
};
} catch (err) {
canDecorate = false;
}
}
HTMLTemplateElement.bootstrap(template.content);
TemplateImpl.bootstrap(template.content);
};
HTMLTemplateElement.bootstrap = function(doc) {
TemplateImpl.bootstrap = function(doc) {
var templates = doc.querySelectorAll(TEMPLATE_TAG);
for (var i = 0, l = templates.length, t; i < l && (t = templates[i]); i++) {
HTMLTemplateElement.decorate(t);
TemplateImpl.decorate(t);
}
};
document.addEventListener("DOMContentLoaded", function() {
HTMLTemplateElement.bootstrap(document);
TemplateImpl.bootstrap(document);
});
var createElement = document.createElement;
document.createElement = function() {
"use strict";
var el = createElement.apply(document, arguments);
if (el.localName == "template") {
HTMLTemplateElement.decorate(el);
TemplateImpl.decorate(el);
}
return el;
};
@ -993,8 +1011,61 @@ if (typeof HTMLTemplateElement === "undefined") {
function escapeData(s) {
return s.replace(escapeDataRegExp, escapeReplace);
}
})();
}
}
if (needsTemplate || needsCloning) {
var nativeCloneNode = Node.prototype.cloneNode;
TemplateImpl.cloneNode = function(template, deep) {
var clone = nativeCloneNode.call(template);
if (this.decorate) {
this.decorate(clone);
}
if (deep) {
clone.content.appendChild(nativeCloneNode.call(template.content, true));
this.fixClonedDom(clone.content, template.content);
}
return clone;
};
TemplateImpl.fixClonedDom = function(clone, source) {
var s$ = source.querySelectorAll(TEMPLATE_TAG);
var t$ = clone.querySelectorAll(TEMPLATE_TAG);
for (var i = 0, l = t$.length, t, s; i < l; i++) {
s = s$[i];
t = t$[i];
if (this.decorate) {
this.decorate(s);
}
t.parentNode.replaceChild(s.cloneNode(true), t);
}
};
var originalImportNode = document.importNode;
Node.prototype.cloneNode = function(deep) {
var dom = nativeCloneNode.call(this, deep);
if (deep) {
TemplateImpl.fixClonedDom(dom, this);
}
return dom;
};
document.importNode = function(element, deep) {
if (element.localName === TEMPLATE_TAG) {
return TemplateImpl.cloneNode(element, deep);
} else {
var dom = originalImportNode.call(document, element, deep);
if (deep) {
TemplateImpl.fixClonedDom(dom, element);
}
return dom;
}
};
if (needsCloning) {
HTMLTemplateElement.prototype.cloneNode = function(deep) {
return TemplateImpl.cloneNode(this, deep);
};
}
}
if (needsTemplate) {
HTMLTemplateElement = TemplateImpl;
}
})();
(function(scope) {
"use strict";
@ -1595,7 +1666,7 @@ window.HTMLImports.addModule(function(scope) {
if (doc && this._mayParse.indexOf(doc) < 0) {
this._mayParse.push(doc);
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
for (var i = 0, l = nodes.length, p = 0, n; i < l && (n = nodes[i]); i++) {
for (var i = 0, l = nodes.length, n; i < l && (n = nodes[i]); i++) {
if (!this.isParsed(n)) {
if (this.hasResource(n)) {
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,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
*/
// @version 0.7.20
// @version 0.7.21
(function() {
window.WebComponents = window.WebComponents || {
flags: {}
@ -3420,10 +3420,7 @@ if (WebComponents.flags.shadow) {
var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement;
if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null;
var activeElement = wrap(unwrappedActiveElement);
if (activeElement === this.host) {
return null;
}
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
while (!this.contains(activeElement)) {
while (activeElement.parentNode) {
activeElement = activeElement.parentNode;
}
@ -6368,7 +6365,7 @@ window.HTMLImports.addModule(function(scope) {
if (doc && this._mayParse.indexOf(doc) < 0) {
this._mayParse.push(doc);
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
for (var i = 0, l = nodes.length, p = 0, n; i < l && (n = nodes[i]); i++) {
for (var i = 0, l = nodes.length, n; i < l && (n = nodes[i]); i++) {
if (!this.isParsed(n)) {
if (this.hasResource(n)) {
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;

File diff suppressed because one or more lines are too long

View File

@ -122,7 +122,7 @@
html += '<form class="newCollectionForm" style="margin:auto;">';
html += '<div class="fldSelectCollection">';
html += '<label for="selectCollectionToAddTo">' + Globalize.translate('LabelSelectCollection') + '</label>';
html += '<label for="selectCollectionToAddTo" class="selectLabel">' + Globalize.translate('LabelSelectCollection') + '</label>';
html += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
html += '</div>';

View File

@ -3,7 +3,7 @@
var systemInfo;
function getSystemInfo() {
var deferred = DeferredBuilder.Deferred();
var deferred = jQuery.Deferred();
if (systemInfo) {
deferred.resolveWith(null, [systemInfo]);

View File

@ -12,6 +12,13 @@
function initEpisodeForm(context, item) {
if (!item.ExtractedName || item.ExtractedName.length < 4) {
context.querySelector('.fldRemember').classList.add('hide');
}
else {
context.querySelector('.fldRemember').classList.remove('hide');
}
$('.inputFile', context).html(item.OriginalFileName);
$('#txtSeason', context).val(item.ExtractedSeasonNumber);

View File

@ -22,7 +22,7 @@
<paper-input id="txtEndingEpisode" type="number" pattern="[0-9]*" min="0" label="${LabelEndingEpisodeNumber}"></paper-input>
<div class="fieldDescription">${LabelEndingEpisodeNumberHelp}</div>
</div>
<div class="hide">
<div class="fldRemember hide">
<br />
<paper-checkbox type="checkbox" id="chkRememberCorrection">${OptionRememberOrganizeCorrection}</paper-checkbox>
</div>

View File

@ -1,23 +1,19 @@
define(['paperdialoghelper', 'paper-input', 'paper-button', 'jqmcollapsible'], function (paperDialogHelper) {
define(['paperdialoghelper', 'paper-input', 'paper-button', 'jqmcollapsible', 'paper-checkbox'], function (paperDialogHelper) {
function renderLibrarySharingList(context, result) {
var folderHtml = '';
folderHtml += '<div data-role="controlgroup">';
folderHtml += '<div class="paperCheckboxList">';
folderHtml += result.Items.map(function (i) {
var currentHtml = '';
var id = 'chkShareFolder' + i.Id;
currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
var isChecked = true;
var checkedHtml = isChecked ? ' checked="checked"' : '';
currentHtml += '<input data-mini="true" class="chkShareFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
currentHtml += '<paper-checkbox class="chkShareFolder" data-folderid="' + i.Id + '" type="checkbox"' + checkedHtml + '>' + i.Name + '</paper-checkbox>';
return currentHtml;
@ -25,7 +21,7 @@
folderHtml += '</div>';
$('.librarySharingList', context).html(folderHtml).trigger('create');
context.querySelector('.librarySharingList').innerHTML = folderHtml;
}
function inviteUser(dlg) {
@ -34,7 +30,11 @@
ApiClient.getJSON(ApiClient.getUrl("Channels", {})).then(function (channelsResult) {
var shareExcludes = $(".chkShareFolder:checked", dlg).get().map(function (i) {
var shareExcludes = $(".chkShareFolder", dlg).get().filter(function (i) {
return i.checked;
}).map(function (i) {
return i.getAttribute('data-folderid');
});

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