1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
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"> <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="#" data-role="button" class="ui-btn-active">${TabActivityLog}</a>
<a href="autoorganizetv.html" data-role="button">${TabTV}</a> <a href="autoorganizetv.html" data-role="button">${TabTV}</a>
<a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
</div> </div>
<div style="margin: -25px 0 1em; text-align: right;"> <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"> <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="autoorganizelog.html" data-role="button">${TabActivityLog}</a> <a href="autoorganizelog.html" data-role="button">${TabActivityLog}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabTV}</a> <a href="#" data-role="button" class="ui-btn-active">${TabTV}</a>
<a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
</div> </div>
<form class="libraryFileOrganizerForm"> <form class="libraryFileOrganizerForm">
@ -128,6 +129,11 @@
<td>%e_n</td> <td>%e_n</td>
<td>${ValueEpisodeNameUnderscore}</td> <td>${ValueEpisodeNameUnderscore}</td>
</tr> </tr>
<tr>
<td>${FileExtension}</td>
<td>%ext</td>
<td>mkv</td>
</tr>
</tbody> </tbody>
</table> </table>

View file

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

View file

@ -3444,5 +3444,57 @@
contentType: "application/json" 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, ServerSelection: 1,
ServerSignIn: 2, ServerSignIn: 2,
SignedIn: 3, SignedIn: 3,
ConnectSignIn: 4 ConnectSignIn: 4,
ServerUpdateNeeded: 5
}; };
var ConnectionMode = { var ConnectionMode = {
@ -214,6 +215,16 @@
return connectUser; return connectUser;
}; };
var minServerVersion = '3.0.5724';
self.minServerVersion = function (val) {
if (val) {
minServerVersion = val;
}
return minServerVersion;
};
self.appVersion = function () { self.appVersion = function () {
return appVersion; return appVersion;
}; };
@ -1014,6 +1025,30 @@
return (str1 || '').toLowerCase() == (str2 || '').toLowerCase(); 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) { function testNextConnectionMode(tests, index, server, wakeOnLanSendTime, options, resolve) {
if (index >= tests.length) { if (index >= tests.length) {
@ -1052,8 +1087,18 @@
tryConnect(address, timeout).then(function (result) { tryConnect(address, timeout).then(function (result) {
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); console.log('calling onSuccessfulConnection with connection mode ' + mode + ' with server ' + server.Name);
onSuccessfulConnection(server, result, mode, options, resolve); onSuccessfulConnection(server, result, mode, options, resolve);
}
}, function () { }, function () {

View file

@ -15,12 +15,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.0.83", "version": "1.0.90",
"_release": "1.0.83", "_release": "1.0.90",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.0.83", "tag": "1.0.90",
"commit": "2d07f1da3ed23cf12b40ed2639e42dd737eb83fd" "commit": "2722d205b177e50517bb46b4d416b8ea2e8e2e3b"
}, },
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git", "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.0.0", "_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, Container: audioFormat == 'webma' ? 'webma,webm' : audioFormat,
Type: 'Audio' Type: 'Audio'
}); });
// aac also appears in the m4a container
if (audioFormat == 'aac') {
profile.DirectPlayProfiles.push({
Container: 'm4a',
AudioCodec: audioFormat,
Type: 'Audio'
});
}
}); });
if (canPlayWebm) { if (canPlayWebm) {
@ -198,7 +207,8 @@ define(['browser'], function (browser) {
Type: 'Video', Type: 'Video',
AudioCodec: videoAudioCodecs.join(','), AudioCodec: videoAudioCodecs.join(','),
VideoCodec: 'h264', VideoCodec: 'h264',
Context: 'Streaming' Context: 'Streaming',
CopyTimestamps: true
}); });
} }

View file

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

View file

@ -136,7 +136,7 @@
// but not needed here since this is already on top of an existing dialog // 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 // 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 // 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'); dlg.setAttribute('modal', 'modal');
} }

View file

@ -38,7 +38,9 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
html += '</h2>'; 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) { if (options.description) {
html += '<div class="fieldDescription">'; html += '<div class="fieldDescription">';
@ -46,7 +48,6 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
html += '</div>'; html += '</div>';
} }
// TODO: An actual form element should probably be added
html += '<br/>'; html += '<br/>';
if (raisedButtons) { if (raisedButtons) {
html += '<paper-button raised class="btnSubmit"><iron-icon icon="dialog:check"></iron-icon><span>' + globalize.translate(dialogText.buttonOk) + '</span></paper-button>'; 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 += '<paper-button class="btnPromptExit">' + globalize.translate(dialogText.buttonCancel) + '</paper-button>';
html += '</div>'; html += '</div>';
} }
html += '</form>';
html += '</div>'; html += '</div>';
dlg.innerHTML = html; 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); document.body.appendChild(dlg);
dlg.querySelector('.btnSubmit').addEventListener('click', function (e) { dlg.querySelector('form').addEventListener('submit', function (e) {
submitValue = dlg.querySelector('.txtPromptValue').value; submitValue = dlg.querySelector('.txtPromptValue').value;
paperdialoghelper.close(dlg); 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) { dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-autogrow-textarea", "name": "iron-autogrow-textarea",
"version": "1.0.10", "version": "1.0.11",
"description": "A textarea element that automatically grows with input", "description": "A textarea element that automatically grows with input",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -29,17 +29,18 @@
}, },
"devDependencies": { "devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "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", "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0", "test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0", "web-component-tester": "^4.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0", "paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"_release": "1.0.10", "_release": "1.0.11",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.10", "tag": "v1.0.11",
"commit": "1ba4f97e250dc14e9638d95be582dd62b9083736" "commit": "8fe629c9fecb14b76319ab4fbeef7f0237d93004"
}, },
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git", "_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -1,22 +1,25 @@
language: node_js language: node_js
sudo: false sudo: false
before_script: before_script:
- npm install web-component-tester - npm install -g bower polylint web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install - bower install
- polylint
env: env:
global: global:
- secure: lIogwlz5kFUKYy1OWASXxQgZE4YTyjUY0QcEgnqbv6wQ0GX8wRMgbI3zhbAv+xXU5ieYXg6Bd47ZFZZ1kVEWzQynAdd2od14Eu1vfN60/yc/llz62VTYuFsPt8r+Tgw41Iz8plwejK4a+V26Da5tXW+soJQOJKvE/MOiPzKi2m0= - secure: lIogwlz5kFUKYy1OWASXxQgZE4YTyjUY0QcEgnqbv6wQ0GX8wRMgbI3zhbAv+xXU5ieYXg6Bd47ZFZZ1kVEWzQynAdd2od14Eu1vfN60/yc/llz62VTYuFsPt8r+Tgw41Iz8plwejK4a+V26Da5tXW+soJQOJKvE/MOiPzKi2m0=
- secure: cj3uSCQwLY6pyP3oTdGFjJoTRjv3G1lSe73fMd6i15XnMMxM4DVarfDtK+a0dPPxDY8BBhfr4sFClZuWX71bAHQuqUA84oigbeWt2xfl8d3HUuvr9aEnQxAGe2eQE7atpYJPC9M447sw48QKiUVgQo33DeJ1BGj6SBqkw0BJXO8= - secure: cj3uSCQwLY6pyP3oTdGFjJoTRjv3G1lSe73fMd6i15XnMMxM4DVarfDtK+a0dPPxDY8BBhfr4sFClZuWX71bAHQuqUA84oigbeWt2xfl8d3HUuvr9aEnQxAGe2eQE7atpYJPC9M447sw48QKiUVgQo33DeJ1BGj6SBqkw0BJXO8=
node_js: 4 - CXX=g++-4.8
node_js: stable
addons: addons:
firefox: '42.0' firefox: latest
apt: apt:
sources: sources:
- google-chrome - google-chrome
- ubuntu-toolchain-r-test
packages: packages:
- google-chrome-stable - google-chrome-stable
- g++-4.8
sauce_connect: true
script: script:
- xvfb-run wct - xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

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

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-autogrow-textarea", "name": "iron-autogrow-textarea",
"version": "1.0.10", "version": "1.0.11",
"description": "A textarea element that automatically grows with input", "description": "A textarea element that automatically grows with input",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -29,9 +29,10 @@
}, },
"devDependencies": { "devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "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", "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0", "test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0", "web-component-tester": "^4.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0", "paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.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> <title>iron-autogrow-textarea demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script> <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="../iron-autogrow-textarea.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
</head> <style is="custom-style" include="demo-pages-shared-styles">
<style>
iron-autogrow-textarea { iron-autogrow-textarea {
display: block;
width: 200px;
margin: 5px 0;
}
textarea {
width: 200px; width: 200px;
} }
.vertical-section {
box-sizing: border-box;
width: 400px;
margin: 0;
}
</style> </style>
<body> </head>
<body unresolved>
<div class="vertical-section-container centered"> <div class="vertical-section-container centered">
<h4>Updating the value imperatively</h4> <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>
<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>
<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>
<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"> <template is="dom-bind">
<div class="vertical-section"> <div class="vertical-section">
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea> <iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
<br><br> <br>
<code>bind-value</code>: <span>[[bindValue]]</span> <code>bind-value</code>: <span>[[bindValue]]</span>
<p on-click="setValue"> <p on-click="setValue">
set <code>bind-value</code> to: <br> Imperatively changing <code>bind-value</code> will also update
<code>textarea.value</code>:<br>
<textarea></textarea> <textarea></textarea>
<button value="bindValue">set</button> <button value="bindValue">set</button>
<br><br> <br><br>
set <code>textarea.value</code> to: <br> Imperatively updating <code>textarea.value</code> will update
the display, but not update <code>bind-value</code>:<br>
<textarea></textarea> <textarea></textarea>
<button value="value">set</button> <button value="value">set</button>
</p> </p>
</div> </div>
</template> </template>
<h4>Custom</h4>
<div class="vertical-section">
<p>Scrolls after 4 rows:</p>
<iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
<p>Initial height of 4 rows</p>
<iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
</div> </div>
</div> </div>
<script> <script>
var scope = document.querySelector('template[is=dom-bind]'); 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; var inputValue = event.target.previousElementSibling.value;
if (event.target.value == "bindValue") { if (event.target.value == "bindValue") {
document.querySelector('iron-autogrow-textarea').bindValue = inputValue; document.querySelector('#a1').bindValue = inputValue;
} else { } else {
document.querySelector('iron-autogrow-textarea').textarea.value = inputValue; document.querySelector('#a1').textarea.value = inputValue;
} }
} }
</script> </script>
</body> </body>
</html> </html>

View file

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

View file

@ -1,5 +1,4 @@
<!doctype html> <!DOCTYPE html><!--
<!--
@license @license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 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 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 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> --><html><head>
<html>
<head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-autogrow-textarea tests</title> <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> <script>
WCT.loadSuites([ WCT.loadSuites([
'basic.html', 'basic.html',
'basic.html?dom=shadow'
]); ]);
</script> </script>
</body>
</html>
</body></html>

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-behaviors", "name": "iron-behaviors",
"version": "1.0.12", "version": "1.0.13",
"description": "Provides a set of behaviors for the iron elements", "description": "Provides a set of behaviors for the iron elements",
"private": true, "private": true,
"authors": [ "authors": [
@ -25,16 +25,16 @@
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0", "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0", "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0", "test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/PolymerElements/iron-behaviors", "homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.12", "_release": "1.0.13",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.12", "tag": "v1.0.13",
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3" "commit": "a7bc3428a6da2beed21987b3a8028206826a12bc"
}, },
"_source": "git://github.com/PolymerElements/iron-behaviors.git", "_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -1,22 +1,25 @@
language: node_js language: node_js
sudo: false sudo: false
before_script: before_script:
- npm install bower - npm install -g bower polylint web-component-tester
- npm install web-component-tester
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install - bower install
- polylint
env: env:
global: global:
- secure: ZOqj2XVNVwfT74rHxg/ljcAsS6FnmDpRSsXbsy1Icv9DcLHrMlmyQ10gWBjE/YXYF0Uv4akQ1qqn0TJaKOtp9HZeH+P6OPAYk2vJbWD7qp52pPtIqEFomcsUyflt4IjfaXKuN4FMod7PSWVSGJ+DxSguJvZKILkrs5d/rJdFv3c= - secure: ZOqj2XVNVwfT74rHxg/ljcAsS6FnmDpRSsXbsy1Icv9DcLHrMlmyQ10gWBjE/YXYF0Uv4akQ1qqn0TJaKOtp9HZeH+P6OPAYk2vJbWD7qp52pPtIqEFomcsUyflt4IjfaXKuN4FMod7PSWVSGJ+DxSguJvZKILkrs5d/rJdFv3c=
- secure: clkqemGQG16TXyAPkv9LBv6x3SbT3ZM0eo8LETx4uNKi3WzlwgXxZA9b5Sr5wYzxyxFFpnhDXW7CL4+UjYu1atGNeTW2TuSaYUPHtgu67OFDr8Jbw047p1XQb5enPSt9+YxrHKfjHBiJvWulJ8rCSQshU9Rhe0DC6NrFRPFgk0A= - secure: clkqemGQG16TXyAPkv9LBv6x3SbT3ZM0eo8LETx4uNKi3WzlwgXxZA9b5Sr5wYzxyxFFpnhDXW7CL4+UjYu1atGNeTW2TuSaYUPHtgu67OFDr8Jbw047p1XQb5enPSt9+YxrHKfjHBiJvWulJ8rCSQshU9Rhe0DC6NrFRPFgk0A=
node_js: 4 - CXX=g++-4.8
node_js: stable
addons: addons:
firefox: latest firefox: latest
apt: apt:
sources: sources:
- google-chrome - google-chrome
- ubuntu-toolchain-r-test
packages: packages:
- google-chrome-stable - google-chrome-stable
- g++-4.8
sauce_connect: true
script: script:
- xvfb-run wct - xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

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

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-behaviors", "name": "iron-behaviors",
"version": "1.0.12", "version": "1.0.13",
"description": "Provides a set of behaviors for the iron elements", "description": "Provides a set of behaviors for the iron elements",
"private": true, "private": true,
"authors": [ "authors": [
@ -25,7 +25,7 @@
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0", "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0", "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0", "test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [] "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._oldTabIndex = this.tabIndex;
this.focused = false; this.focused = false;
this.tabIndex = -1; this.tabIndex = -1;
this.blur();
} else if (this._oldTabIndex !== undefined) { } else if (this._oldTabIndex !== undefined) {
this.tabIndex = this._oldTabIndex; 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() { suite('when the focused state is disabled', function() {
setup(function() {
focusTarget.disabled = true;
});
test('will not be focusable', function() { 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(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
expect(blurSpy.called).to.be.eql(true);
}); });
}); });
}); });

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-demo-helpers", "name": "iron-demo-helpers",
"version": "1.0.3", "version": "1.1.0",
"description": "Utility classes to make building demo pages easier", "description": "Utility classes to make building demo pages easier",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -21,25 +21,27 @@
"ignore": [], "ignore": [],
"dependencies": { "dependencies": {
"polymer": "Polymer/polymer#^1.1.0", "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", "paper-styles": "PolymerElements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0", "marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0" "prism-element": "PolymerElements/prism-element#^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", "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", "test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2", "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" "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
}, },
"_release": "1.0.3", "_release": "1.1.0",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.3", "tag": "v1.1.0",
"commit": "dbcd14c318654f0e42d391af409efff9a8a241a2" "commit": "ea98e51e3ac7b52dd53cea05d3f027b3a41388ad"
}, },
"_source": "git://github.com/polymerelements/iron-demo-helpers.git", "_source": "git://github.com/polymerelements/iron-demo-helpers.git",
"_target": "^1.0.0", "_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 that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :) If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
--> -->
# Polymer Elements # Polymer Elements
## Guide for Contributors ## Guide for Contributors
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
3. Click the `paper-foo` element. 3. Click the `paper-foo` element.
``` ```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output). 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
When submitting pull requests, please provide: When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax: 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown ```markdown
(For a single issue) (For a single issue)
Fixes #20 Fixes #20
(For multiple issues) (For multiple issues)
Fixes #32, #40 Fixes #32, fixes #40
``` ```
2. **A succinct description of the design** used to fix any related issues. For example: 2. **A succinct description of the design** used to fix any related issues. For example:

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-demo-helpers", "name": "iron-demo-helpers",
"version": "1.0.3", "version": "1.1.0",
"description": "Utility classes to make building demo pages easier", "description": "Utility classes to make building demo pages easier",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -21,18 +21,20 @@
"ignore": [], "ignore": [],
"dependencies": { "dependencies": {
"polymer": "Polymer/polymer#^1.1.0", "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", "paper-styles": "PolymerElements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0", "marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0" "prism-element": "PolymerElements/prism-element#^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", "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", "test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2", "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" "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="../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="../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/color.html">
<link rel="import" href="../paper-styles/shadow.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 `demo-snippet` is a helper element that displays the source of a code snippet and
@ -61,7 +62,7 @@ Custom property | Description | Default
} }
.demo { .demo {
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid var(--google-grey-300);
background-color: white; background-color: white;
margin: 0; margin: 0;
padding: 20px; padding: 20px;
@ -71,7 +72,7 @@ Custom property | Description | Default
.code { .code {
padding: 0 20px; padding: 0 20px;
margin: 0; margin: 0;
background-color: #fafafa; background-color: var(--google-grey-100);
font-size: 13px; font-size: 13px;
overflow: auto; overflow: auto;
@apply(--demo-snippet-code); @apply(--demo-snippet-code);
@ -81,6 +82,17 @@ Custom property | Description | Default
margin: 0; margin: 0;
padding: 0 0 10px 0; padding: 0 0 10px 0;
} }
.code-container {
position: relative;
}
paper-icon-button {
position: absolute;
top: 0;
right: 0px;
}
</style> </style>
<prism-highlighter></prism-highlighter> <prism-highlighter></prism-highlighter>
@ -89,12 +101,22 @@ Custom property | Description | Default
<content id="content"></content> <content id="content"></content>
</div> </div>
<div class="code-container">
<marked-element markdown=[[_markdown]] id="marked"> <marked-element markdown=[[_markdown]] id="marked">
<div class="markdown-html code"></div> <div class="markdown-html code" id="code"></div>
</marked-element> </marked-element>
<paper-icon-button
id="copyButton"
icon="content-copy"
title="copy to clipboard"
on-tap="_copyToClipboard">
</paper-icon-button>
</div>
</template> </template>
<script> <script>
'use strict';
Polymer({ Polymer({
is: 'demo-snippet', is: 'demo-snippet',
@ -114,9 +136,7 @@ Custom property | Description | Default
return; return;
} }
// TODO(noms): When marked-element/issues/23 lands, this will become var snippet = this.$.marked.unindent(template.innerHTML);
// a public method and will need to be updated.
var snippet = this.$.marked._unindent(template.innerHTML);
// Boolean properties are displayed as checked="", so remove the ="" bit. // Boolean properties are displayed as checked="", so remove the ="" bit.
snippet = snippet.replace(/=""/g, ''); snippet = snippet.replace(/=""/g, '');
@ -125,6 +145,34 @@ Custom property | Description | Default
// Stamp the template. // Stamp the template.
Polymer.dom(this).appendChild(document.importNode(template.content, true)); 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> </script>

View file

@ -22,65 +22,56 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</head> </head>
<body> <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,
<template> need to remember that an element's state is maintained between tests.
<demo-snippet></demo-snippet> If you don't want this, either use a new element, or clean up after
</template> your test.
</test-fixture> -->
<test-fixture id="native-demo"> <demo-snippet id="emptyDemo"></demo-snippet>
<template>
<demo-snippet> <demo-snippet id="nativeDemo">
<template> <template>
<input disabled> <input disabled>
</template> </template>
</demo-snippet> </demo-snippet>
</template>
</test-fixture>
<test-fixture id="custom-demo"> <demo-snippet id="customDemo">
<template>
<demo-snippet>
<template> <template>
<paper-checkbox disabled></paper-checkbox> <paper-checkbox disabled></paper-checkbox>
</template> </template>
</demo-snippet> </demo-snippet>
</template>
</test-fixture>
<test-fixture id="demo-with-attributes"> <demo-snippet id="demoWithAttributes">
<template>
<demo-snippet>
<template> <template>
<input disabled type="date"> <input disabled type="date">
</template> </template>
</demo-snippet> </demo-snippet>
</template>
</test-fixture>
<script> <script>
// TODO(notwaldorf): Tests are currently very unhappy in IE
function isNotIE() {
return !navigator.userAgent.match(/MSIE/i);
}
suite('display', function() { suite('display', function() {
var emptyHeight; var emptyHeight;
setup(function() { setup(function() {
var emptyDemo = fixture('empty-demo'); var emptyDemo = document.getElementById('emptyDemo');
emptyHeight = emptyDemo.getBoundingClientRect().height; emptyHeight = emptyDemo.getBoundingClientRect().height;
}); });
test('can render native elements', skipUnless(isNotIE, function() { test('can render native elements', function() {
var element = fixture('native-demo'); var element = document.getElementById('nativeDemo');
// Render the distributed children. // Render the distributed children.
Polymer.dom.flush(); Polymer.dom.flush();
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
expect(rect.height).to.be.greaterThan(emptyHeight); expect(rect.height).to.be.greaterThan(emptyHeight);
// The demo is rendered in the light dom, so it should exist, and // 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; var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal('```\n\n<input disabled>\n\n```'); expect(markdownElement.markdown).to.be.equal('```\n\n<input disabled>\n\n```');
})); });
test('can render custom elements', skipUnless(isNotIE, function() { test('can render custom elements', function() {
var element = fixture('custom-demo'); var element = document.getElementById('customDemo');
// Render the distributed children. // Render the distributed children.
Polymer.dom.flush(); Polymer.dom.flush();
var rect = element.getBoundingClientRect(); var rect = element.getBoundingClientRect();
expect(rect.height).to.be.greaterThan(emptyHeight); expect(rect.height).to.be.greaterThan(emptyHeight);
// The demo is rendered in the light dom, so it should exist, and // 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; var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal( expect(markdownElement.markdown).to.be.equal(
'```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```'); '```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```');
})); });
}); });
suite('parsing', function() { suite('parsing', function() {
var element; test('preserves attributes', function() {
var element = document.getElementById('demoWithAttributes');
setup(function() {
var element = fixture('demo-with-attributes');
});
test('preserves attributes', skipUnless(isNotIE, function() {
var element = fixture('demo-with-attributes');
// Render the distributed children. // Render the distributed children.
Polymer.dom.flush(); 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; var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal( expect(markdownElement.markdown).to.be.equal(
'```\n\n<input disabled type="date">\n\n```'); '```\n\n<input disabled type="date">\n\n```');
})); });
}); });
</script> </script>
</body> </body>

View file

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

View file

@ -1,22 +1,25 @@
language: node_js language: node_js
sudo: false sudo: false
before_script: before_script:
- npm install web-component-tester - npm install -g bower polylint web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install - bower install
- polylint
env: env:
global: global:
- secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw= - secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw=
- secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI= - secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI=
node_js: 4 - CXX=g++-4.8
node_js: stable
addons: addons:
firefox: latest firefox: latest
apt: apt:
sources: sources:
- google-chrome - google-chrome
- ubuntu-toolchain-r-test
packages: packages:
- google-chrome-stable - google-chrome-stable
- g++-4.8
sauce_connect: true
script: script:
- 'true || xvfb-run wct' - xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then true || wct -s 'default'; fi" - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

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

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-flex-layout", "name": "iron-flex-layout",
"version": "1.2.2", "version": "1.2.3",
"description": "Provide flexbox-based layouts", "description": "Provide flexbox-based layouts",
"keywords": [ "keywords": [
"web-components", "web-components",
@ -21,11 +21,11 @@
"polymer": "Polymer/polymer#^1.1.0" "polymer": "Polymer/polymer#^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0", "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0", "test-fixture": "PolymerElements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0" "web-component-tester": "^4.0.0"
}, },
"ignore": [] "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> <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html"> <link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="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"> <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 { .container {
background-color: #ccc; background-color: #ccc;
padding: 5px; padding: 5px;
@ -35,20 +41,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
min-height: 20px; min-height: 20px;
} }
demo-snippet { .vertical-section-container {
width: 100%; max-width: 700px
}
.vertical-section {
padding: 0 !important;
} }
</style> </style>
</head> </head>
<body unresolved class="fullbleed"> <body unresolved class="fullbleed">
<div class="vertical-section-container centered">
<h4>Horizontal and vertical layout</h4> <h4>Horizontal and vertical layout</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <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); @apply(--layout-horizontal);
} }
</style> </style>
<div class="container flex"> <div class="container flex">
<div>one</div> <div>one</div>
<div>two</div> <div>two</div>
@ -64,10 +64,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Flexible children</h4> <h4>Flexible children</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -86,10 +84,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Flexible children in vertical layouts</h4> <h4>Flexible children in vertical layouts</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -109,10 +105,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Flex ratios</h4> <h4>Flex ratios</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -137,10 +131,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Cross-axis stretch alignment (default)</h4> <h4>Cross-axis stretch alignment (default)</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -155,10 +147,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Cross-axis center alignment</h4> <h4>Cross-axis center alignment</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -174,10 +164,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Cross-axis start alignment</h4> <h4>Cross-axis start alignment</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -193,10 +181,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Cross-axis end alignment</h4> <h4>Cross-axis end alignment</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -212,10 +198,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Justification, start justified</h4> <h4>Justification, start justified</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -230,10 +214,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Justification, start justified</h4> <h4>Justification, start justified</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -248,10 +230,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Justification, end justified</h4> <h4>Justification, end justified</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -266,10 +246,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Justification, equal space between elements</h4> <h4>Justification, equal space between elements</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -286,10 +264,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Justification, equal space around each element</h4> <h4>Justification, equal space around each element</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -305,10 +281,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Self alignment</h4> <h4>Self alignment</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -342,10 +316,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Wrapping</h4> <h4>Wrapping</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -364,10 +336,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>Reversed layouts</h4> <h4>Reversed layouts</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <style is="custom-style">
@ -384,10 +354,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div> </div>
</template> </template>
</demo-snippet> </demo-snippet>
</div>
<h4>General purpose ruls</h4> <h4>General purpose rules</h4>
<div class="vertical-section">
<demo-snippet> <demo-snippet>
<template> <template>
<style is="custom-style"> <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: { --layout-around-justified: {
-ms-flex-pack: around; -ms-flex-pack: distribute;
-webkit-justify-content: space-around; -webkit-justify-content: space-around;
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", "name": "iron-menu-behavior",
"version": "1.1.1", "version": "1.1.2",
"description": "Provides accessible menu behavior", "description": "Provides accessible menu behavior",
"authors": "The Polymer Authors", "authors": "The Polymer Authors",
"keywords": [ "keywords": [
@ -34,11 +34,11 @@
"web-component-tester": "^4.0.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"_release": "1.1.1", "_release": "1.1.2",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.1", "tag": "v1.1.2",
"commit": "0fc2c95803badd8e8f50cbe7f5d3669d647e7229" "commit": "8b09b6187b748499a0b8e9ddc789391d26e1d5d1"
}, },
"_source": "git://github.com/polymerelements/iron-menu-behavior.git", "_source": "git://github.com/polymerelements/iron-menu-behavior.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

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

View file

@ -273,6 +273,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
_onUpKey: function(event) { _onUpKey: function(event) {
// up and down arrows moves the focus // up and down arrows moves the focus
this._focusPrevious(); 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) { _onDownKey: function(event) {
this._focusNext(); 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'; return window.getComputedStyle(this)['direction'] === 'rtl';
}, },
_onLeftKey: function() { _onLeftKey: function(event) {
if (this._isRTL) { if (this._isRTL) {
this._focusNext(); this._focusNext();
} else { } else {
this._focusPrevious(); this._focusPrevious();
} }
event.detail.keyboardEvent.preventDefault();
}, },
_onRightKey: function() { _onRightKey: function(event) {
if (this._isRTL) { if (this._isRTL) {
this._focusPrevious(); this._focusPrevious();
} else { } else {
this._focusNext(); this._focusNext();
} }
event.detail.keyboardEvent.preventDefault();
}, },
_onKeydown: function(event) { _onKeydown: function(event) {

View file

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

View file

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

View file

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

View file

@ -9,7 +9,8 @@ Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> -->
<html> <html>
<head>
<head>
<title>simple-overlay demo</title> <title>simple-overlay demo</title>
@ -21,136 +22,130 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="simple-overlay.html"> <link rel="import" href="simple-overlay.html">
<link rel="import" href="../../paper-styles/demo-pages.html"> <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<style is="custom-style"> <style is="custom-style" include="demo-pages-shared-styles">
demo-snippet {
.with-margin { --demo-snippet-code: {
margin: 24px 40px; max-height: 250px;
} }
.full-height {
height: 100%;
}
.scrollable {
overflow: auto;
}
.vertical {
@apply(--layout-vertical);
}
.flex {
@apply(--layout-flex);
} }
</style> </style>
</head> </head>
<body onclick="clickHandler(event);">
<div class="vertical-section centered"> <body unresolved class="centered">
<button data-dialog="plain">plain</button>
<simple-overlay id="plain"> <h3>An element with <code>IronOverlayBehavior</code> can be opened, closed, toggled.</h3>
Hello world! <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> </simple-overlay>
</template>
</demo-snippet>
<button data-dialog="scrolling">scrolling</button> <h3>Use <code>with-backdrop</code> to add a backdrop to your overlay. Tabbing will be trapped within the overlay.</h3>
<demo-snippet>
<simple-overlay id="scrolling" class="with-margin scrollable"> <template>
<p>This dialog scrolls internally.</p> <button onclick="backdrop.open()">Overlay with backdrop</button>
<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>
<simple-overlay id="backdrop" with-backdrop> <simple-overlay id="backdrop" with-backdrop>
<p>Hello world!</p> <p>Hello world!</p>
<button>button</button> <button>Button</button>
<button>button</button> <button onclick="backdrop.close()">Close</button>
<button>button</button>
</simple-overlay> </simple-overlay>
</template>
</demo-snippet>
<button data-dialog="autofocus">autofocus</button> <h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3>
<demo-snippet>
<simple-overlay id="autofocus"> <template>
<button onclick="withAutofocus.open()">Overlay with autofocus child</button>
<simple-overlay id="withAutofocus">
<p>Hello world!</p> <p>Hello world!</p>
<button>cancel</button>
<button autofocus>autofocus</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> </simple-overlay>
<button onclick="scrolling2.open()">Scrolling content</button>
<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> </div>
<p>
<button onclick="scrolling2.close()">Close</button>
</p>
<script> </simple-overlay>
</template>
</demo-snippet>
function clickHandler(e) { </body>
if (!e.target.hasAttribute('data-dialog')) {
return;
}
var id = e.target.getAttribute('data-dialog');
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
}
}
</script>
</body>
</html> </html>

View file

@ -179,9 +179,12 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this._callOpenedWhenReady) { if (this._callOpenedWhenReady) {
this._openedChanged(); this._openedChanged();
} }
this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
}, },
detached: function() { detached: function() {
Polymer.dom(this).unobserveNodes(this._observer);
this._observer = null;
this.opened = false; this.opened = false;
this._manager.trackBackdrop(this); this._manager.trackBackdrop(this);
this._manager.removeOverlay(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. * Cancels the overlay.
* @param {?Event} event The original event
*/ */
cancel: function() { cancel: function(event) {
var cancelEvent = this.fire('iron-overlay-canceled', undefined, {cancelable: true}); var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
if (cancelEvent.defaultPrevented) { if (cancelEvent.defaultPrevented) {
return; return;
} }
@ -238,7 +242,6 @@ context. You should place this element as a child of `<body>` whenever possible.
this.removeAttribute('aria-hidden'); this.removeAttribute('aria-hidden');
} else { } else {
this.setAttribute('aria-hidden', 'true'); this.setAttribute('aria-hidden', 'true');
Polymer.dom(this).unobserveNodes(this._observer);
} }
// wait to call after ready only if we're initially open // 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 // tasks which must occur before opening; e.g. making the element visible
_prepareRenderOpened: function() { _prepareRenderOpened: function() {
this._manager.addOverlay(this); 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._preparePositioning();
this.fit(); this.fit();
this._finishPositioning(); this._finishPositioning();
@ -335,6 +341,12 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this.withBackdrop) { if (this.withBackdrop) {
this.backdropElement.prepare(); 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 // 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() { _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._applyFocus();
this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
this.fire('iron-overlay-opened'); this.fire('iron-overlay-opened');
}, },
_finishRenderClosed: function() { _finishRenderClosed: function() {
// hide the overlay and remove the backdrop // Hide the overlay and remove the backdrop.
this.resetFit(); this.resetFit();
this.style.display = 'none'; this.style.display = 'none';
this._manager.removeOverlay(this); this._manager.removeOverlay(this);
this._focusedChild = null;
this._applyFocus(); this._applyFocus();
this.notifyResize(); this.notifyResize();
this.fire('iron-overlay-closed', this.closingReason); 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() { _finishPositioning: function() {
this.style.display = 'none'; this.style.display = 'none';
this.style.transform = this.style.webkitTransform = ''; this.style.transform = this.style.webkitTransform = '';
// force layout to avoid application of transform // Force layout layout to avoid application of transform.
/** @suppress {suspiciousCode} */ this.offsetWidth; // Set offsetWidth to itself so that compilers won't remove it.
this.offsetWidth = this.offsetWidth;
this.style.transition = this.style.webkitTransition = ''; this.style.transition = this.style.webkitTransition = '';
}, },
@ -395,6 +409,7 @@ context. You should place this element as a child of `<body>` whenever possible.
} }
} else { } else {
this._focusNode.blur(); this._focusNode.blur();
this._focusedChild = null;
this._manager.focusOverlay(); this._manager.focusOverlay();
} }
}, },
@ -405,7 +420,7 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this.noCancelOnOutsideClick) { if (this.noCancelOnOutsideClick) {
this._applyFocus(); this._applyFocus();
} else { } 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 && if (this._manager.currentOverlay() === this &&
!this.noCancelOnEscKey && !this.noCancelOnEscKey &&
event.keyCode === ESC) { 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) { if (this.opened) {
this.refit(); 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. * Fired when the `iron-overlay` is canceled, but before it is closed.
* Cancel the event to prevent the `iron-overlay` from closing. * Cancel the event to prevent the `iron-overlay` from closing.
* @event iron-overlay-canceled * @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 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> -->
<html> <html>
<head> <head>
<title>iron-overlay-behavior tests</title> <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-overlay.html">
<link rel="import" href="test-overlay2.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> </head>
<body> <body>
<test-fixture id="basic"> <test-fixture id="basic">
@ -52,55 +63,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template> </template>
</test-fixture> </test-fixture>
<test-fixture id="backdrop">
<template>
<test-overlay with-backdrop>
Overlay with backdrop
</test-overlay>
</template>
</test-fixture>
<test-fixture id="multiple"> <test-fixture id="multiple">
<template> <template>
<test-overlay class="overlay-1"> <test-overlay class="overlay-1">
Overlay 1 Test overlay 1
</test-overlay> </test-overlay>
<test-overlay class="overlay-2"> <test-overlay class="overlay-2">
Overlay 2 Test overlay 2
</test-overlay> </test-overlay>
<test-overlay class="overlay-3"> <test-overlay2 class="overlay-3">
Overlay 3 Other 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> </test-overlay2>
</template> </template>
</test-fixture> </test-fixture>
<script> <script>
function runAfterOpen(overlay, callback) {
function runAfterOpen(overlay, cb) {
overlay.addEventListener('iron-overlay-opened', function() { overlay.addEventListener('iron-overlay-opened', function() {
Polymer.Base.async(cb, 1); Polymer.Base.async(callback, 1);
}); });
overlay.open(); 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; var overlay;
setup(function() { 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'); 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) { test('overlay open/close events', function(done) {
var nevents = 0; var nevents = 0;
@ -148,13 +127,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overlay.opened = true; 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() { test('closed overlay does not refit on iron-resize', function() {
var spy = sinon.spy(overlay, 'refit'); var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize'); 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) { test('open() triggers iron-resize', function(done) {
// Ignore the iron-resize on attached.
var callCount = -1;
// Ignore iron-resize triggered by window resize. // Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true); window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; }); overlay.addEventListener('iron-resize', function() { callCount++; });
runAfterOpen(overlay, function () { runAfterOpen(overlay, function() {
assert.equal(callCount, 1, 'iron-resize should be called once'); assert.equal(callCount, 1, 'iron-resize called once before iron-overlay-opened');
done(); 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) { test('closed overlay does not trigger iron-resize when its content changes', function(done) {
// Ignore iron-resize triggered by window resize. // Ignore iron-resize triggered by window resize.
var callCount = 0; var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true); window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; }); overlay.addEventListener('iron-resize', function() { callCount++; });
var child = document.createElement('div'); Polymer.dom(overlay).appendChild(document.createElement('div'));
child.innerHTML = 'hi'; overlay.async(function() {
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
assert.equal(callCount, 0, 'iron-resize should not be called'); assert.equal(callCount, 0, 'iron-resize should not be called');
done(); done();
}, 10); }, 10);
}); });
test('open overlay triggers iron-resize when its content changes', function(done) { test('open overlay triggers iron-resize when its content changes', function(done) {
runAfterOpen(overlay, function () { runAfterOpen(overlay, function() {
// Ignore iron-resize triggered by window resize. var spy = sinon.stub();
var callCount = 0; overlay.addEventListener('iron-resize', spy);
window.addEventListener('resize', function() { callCount--; }, true); Polymer.dom(overlay).appendChild(document.createElement('div'));
overlay.addEventListener('iron-resize', function () { callCount++; }); overlay.async(function() {
var child = document.createElement('div'); assert.equal(spy.callCount, 1, 'iron-resize should be called once');
child.innerHTML = 'hi';
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
assert.equal(callCount, 1, 'iron-resize should be called once');
done(); done();
}, 10); }, 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) { test('clicking an overlay does not close it', function(done) {
runAfterOpen(overlay, function() { runAfterOpen(overlay, function() {
var spy = sinon.stub(); var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy); overlay.addEventListener('iron-overlay-closed', spy);
overlay.fire('click'); MockInteractions.tap(overlay);
setTimeout(function() { overlay.async(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire'); assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done(); done();
}, 10); }, 10);
}); });
}); });
test('node with autofocus is focused', function(done) { test('clicking outside fires iron-overlay-canceled', 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) {
runAfterOpen(overlay, function() { runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) { overlay.addEventListener('iron-overlay-canceled', function(event) {
assert.equal(event.detail.target, document.body, 'detail contains original click event');
done(); done();
}); });
MockInteractions.tap(document.body); MockInteractions.tap(document.body);
}); });
}); });
test('close an overlay by clicking outside', function(done) { test('clicking outside closes the overlay', function(done) {
runAfterOpen(overlay, function() { runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-closed', function(event) { overlay.addEventListener('iron-overlay-closed', function(event) {
assert.isTrue(event.detail.canceled, 'overlay is canceled'); 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() { runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) { overlay.addEventListener('iron-overlay-canceled', function(event) {
event.preventDefault(); event.preventDefault();
@ -280,8 +233,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var spy = sinon.stub(); var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy); overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body); MockInteractions.tap(document.body);
setTimeout(function() { Polymer.Base.async(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire'); assert.isTrue(overlay.opened, 'overlay is still open');
assert.isFalse(spy.called, 'iron-overlay-closed not fired');
done(); done();
}, 10); }, 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) { test('cancel an overlay with esc key', function(done) {
runAfterOpen(overlay, function() { runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) { overlay.addEventListener('iron-overlay-canceled', function(event) {
assert.equal(event.detail.type, 'keydown');
done(); done();
}); });
fireEvent('keydown', { MockInteractions.pressAndReleaseKeyOn(document, 27);
keyCode: 27
}, document);
}); });
}); });
@ -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'); assert.isTrue(event.detail.canceled, 'overlay is canceled');
done(); done();
}); });
fireEvent('keydown', { MockInteractions.pressAndReleaseKeyOn(document, 27);
keyCode: 27
}, document);
}); });
}); });
@ -316,86 +267,262 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var spy = sinon.stub(); var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy); overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body); MockInteractions.tap(document.body);
setTimeout(function() { Polymer.Base.async(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire'); assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done(); done();
}, 10); }, 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) { test('no-cancel-on-esc-key property', function(done) {
overlay.noCancelOnEscKey = true; overlay.noCancelOnEscKey = true;
runAfterOpen(overlay, function() { runAfterOpen(overlay, function() {
var spy = sinon.stub(); var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy); overlay.addEventListener('iron-overlay-closed', spy);
fireEvent('keydown', { MockInteractions.pressAndReleaseKeyOn(document, 27);
keyCode: 27 Polymer.Base.async(function() {
}, document);
setTimeout(function() {
assert.isFalse(spy.called, 'iron-overlay-cancel should not fire'); assert.isFalse(spy.called, 'iron-overlay-cancel should not fire');
done(); done();
}, 10); }, 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() { suite('multiple overlays', function() {
var overlays; var overlay1, overlay2;
setup(function() { setup(function() {
overlays = fixture('multiple'); var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
}); });
test('new overlays appear on top', function(done) { test('new overlays appear on top', function(done) {
runAfterOpen(overlays[0], function() { runAfterOpen(overlay1, function() {
runAfterOpen(overlays[1], function() { runAfterOpen(overlay2, function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10); var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var styleZ1 = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10); var styleZ1 = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
assert.isTrue(styleZ1 > styleZ, 'overlays[1] has higher z-index than overlays[0]'); assert.isTrue(styleZ1 > styleZ, 'overlay2 has higher z-index than overlay1');
done(); done();
}); });
}); });
}); });
test('ESC closes only one opened overlay', function(done) { test('ESC closes only the top overlay', function(done) {
runAfterOpen(overlays[0], function() { runAfterOpen(overlay1, function() {
runAfterOpen(overlays[1], function() { runAfterOpen(overlay2, function() {
// keydown is sync, keyup async (but no need to wait for it). MockInteractions.pressAndReleaseKeyOn(document, 27);
MockInteractions.pressAndReleaseKeyOn(document.body, 27); assert.isFalse(overlay2.opened, 'overlay2 was closed');
// Ideally overlays[1] should be closed and overlays[0] still open, assert.isTrue(overlay1.opened, 'overlay1 is still opened');
// 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');
done(); 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() { suite('z-ordering', function() {
var overlays;
var originalMinimumZ; var originalMinimumZ;
var overlay1, overlay2;
setup(function() { setup(function() {
overlays = fixture('multiple'); var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
originalMinimumZ = Polymer.IronOverlayManager._minimumZ; originalMinimumZ = Polymer.IronOverlayManager._minimumZ;
}); });
@ -405,9 +532,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// for iframes // for iframes
test('default z-index is greater than 100', function(done) { test('default z-index is greater than 100', function(done) {
runAfterOpen(overlays[0], function() { runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10); var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 100, 'overlays[0] z-index is <= 100'); assert.isTrue(styleZ > 100, 'overlay1 z-index is <= 100');
done(); 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) { test('ensureMinimumZ() effects z-index', function(done) {
Polymer.IronOverlayManager.ensureMinimumZ(1000); Polymer.IronOverlayManager.ensureMinimumZ(1000);
runAfterOpen(overlays[0], function() { runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10); var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000'); assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
done(); 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(1000);
Polymer.IronOverlayManager.ensureMinimumZ(500); Polymer.IronOverlayManager.ensureMinimumZ(500);
runAfterOpen(overlays[0], function() { runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10); var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000'); assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
done(); 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() { suite('multiple overlays with backdrop', function() {
var overlays; var overlay1, overlay2, overlay3;
setup(function() { 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() { 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('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('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) { test('newest overlay appear on top', function(done) {
runAfterOpen(overlays[0], function() { runAfterOpen(overlay1, function() {
runAfterOpen(overlays[1], function() { runAfterOpen(overlay2, function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10); var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10); var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10); var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
assert.isTrue(style1Z > styleZ, 'overlays[1] has higher z-index than overlays[0]'); assert.isTrue(style1Z > styleZ, 'overlay2 has higher z-index than overlay1');
assert.isTrue(styleZ > bgStyleZ, 'overlays[0] has higher z-index than backdrop'); assert.isTrue(styleZ > bgStyleZ, 'overlay1 has higher z-index than backdrop');
done(); done();
}); });
}); });
}); });
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');
done();
}, 1);
});
test('updating with-backdrop updates z-index', function(done) { test('updating with-backdrop updates z-index', function(done) {
runAfterOpen(overlays[0], function() { runAfterOpen(overlay1, function() {
runAfterOpen(overlays[1], function() { runAfterOpen(overlay2, function() {
overlays[0].withBackdrop = false; overlay1.withBackdrop = false;
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10); var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10); var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10); var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
assert.isTrue(style1Z > bgStyleZ, 'overlays[1] has higher z-index than backdrop'); assert.isTrue(style1Z > bgStyleZ, 'overlay2 has higher z-index than backdrop');
assert.isTrue(styleZ < bgStyleZ, 'overlays[0] has lower z-index than backdrop'); assert.isTrue(styleZ < bgStyleZ, 'overlay1 has lower z-index than backdrop');
done(); 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() { suite('a11y', function() {
test('overlay has aria-hidden=true when opened', 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> </script>
</body> </body>
</html> </html>

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-resizable-behavior", "name": "iron-resizable-behavior",
"version": "1.0.2", "version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt", "license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements", "description": "Coordinates the flow of resizeable elements",
"private": true, "private": true,
@ -24,15 +24,16 @@
"devDependencies": { "devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0", "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^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" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-resizable-behavior", "homepage": "https://github.com/polymerelements/iron-resizable-behavior",
"_release": "1.0.2", "_release": "1.0.3",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.2", "tag": "v1.0.3",
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674" "commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
}, },
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git", "_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
"_target": "^1.0.0", "_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", "name": "iron-resizable-behavior",
"version": "1.0.2", "version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt", "license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements", "description": "Coordinates the flow of resizeable elements",
"private": true, "private": true,
@ -24,7 +24,8 @@
"devDependencies": { "devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0", "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^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" "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 * 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 * notified when they are resized or un-hidden by their parents in order to take
* action on their new measurements). * action on their new measurements).
*
* Elements that perform measurement should add the `IronResizableBehavior` behavior to * Elements that perform measurement should add the `IronResizableBehavior` behavior to
* their element definition and listen for the `iron-resize` event on themselves. * 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, * 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 * when they are resized explicitly by another resizable, or when the window has been
* resized. * resized.
*
* Note, the `iron-resize` event is non-bubbling. * Note, the `iron-resize` event is non-bubbling.
* *
* @polymerBehavior Polymer.IronResizableBehavior * @polymerBehavior Polymer.IronResizableBehavior

View file

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

View file

@ -1,5 +1,4 @@
<!doctype html> <!DOCTYPE html><!--
<!--
@license @license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@ -7,10 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> --><html><head>
<html>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Tests</title> <title>Tests</title>
@ -20,13 +16,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body> <body>
<script> <script>
WCT.loadSuites([ WCT.loadSuites([
'basic.html', 'basic.html',
'iron-resizable-behavior.html' 'iron-resizable-behavior.html',
'basic.html?dom=shadow',
'iron-resizable-behavior.html?dom=shadow'
]); ]);
</script> </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() { suite('window\'s resize', function() {
test('causes all iron-resize events to fire once', function() { test('causes all iron-resize events to fire once', function() {
window.dispatchEvent(new CustomEvent('resize')); window.dispatchEvent(new CustomEvent('resize'));
Polymer.dom.flush();
expect(resizable.ironResizeCount).to.be.equal(2); expect(resizable.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2); expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable2.ironResizeCount).to.be.equal(2); expect(resizable.$.childResizable2.ironResizeCount).to.be.equal(2);

View file

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

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-selector", "name": "iron-selector",
"version": "1.2.1", "version": "1.2.4",
"description": "Manages a set of elements that can be selected", "description": "Manages a set of elements that can be selected",
"private": true, "private": true,
"license": "http://polymer.github.io/LICENSE.txt", "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: [ 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); (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() { _updateSelected: function() {
if (this.multi) { if (this.multi) {
this._selectMulti(this.selectedValues); 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) { _selectMulti: function(values) {
this._selection.clear();
if (values) { if (values) {
for (var i = 0; i < values.length; i++) { var selectedItems = this._valuesToItems(values);
this._selection.setItemSelected(this._valueToItem(values[i]), true); // 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.splice('selectedValues',i,1);
} }
this._selection.setItemSelected(this._valueToItem(value), unselected); 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: [ observers: [
'_updateSelected(attrForSelected, selected)' '_updateAttrForSelected(attrForSelected)',
'_updateSelected(selected)'
], ],
created: function() { 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._observer = this._observeItems(this);
this._updateItems(); this._updateItems();
if (!this._shouldUpdateSelection) { if (!this._shouldUpdateSelection) {
this._updateSelected(this.attrForSelected,this.selected) this._updateSelected();
} }
this._addListener(this.activateEvent); 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); this._setItems(nodes);
}, },
_updateAttrForSelected: function() {
if (this._shouldUpdateSelection) {
this.selected = this._indexToValue(this.indexOf(this.selectedItem));
}
},
_updateSelected: function() { _updateSelected: function() {
this._selectSelected(this.selected); 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 // 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, { this.fire('iron-items-changed', mutations, {
bubbles: false, bubbles: false,
cancelable: false cancelable: false

View file

@ -69,6 +69,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
*/ */
setItemSelected: function(item, isSelected) { setItemSelected: function(item, isSelected) {
if (item != null) { if (item != null) {
if (isSelected !== this.isSelected(item)) {
// proceed to update selection only if requested state differs from current
if (isSelected) { if (isSelected) {
this.selection.push(item); this.selection.push(item);
} else { } else {
@ -81,6 +83,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this.selectCallback(item, isSelected); this.selectCallback(item, isSelected);
} }
} }
}
}, },
/** /**

View file

@ -1,15 +1,11 @@
<!doctype html> <!DOCTYPE html><!--
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.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 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> --><html><head>
<html>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Tests</title> <title>Tests</title>
@ -19,7 +15,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body> <body>
<script> <script>
WCT.loadSuites([ WCT.loadSuites([
'activate-event.html', 'activate-event.html',
'basic.html', 'basic.html',
@ -29,10 +24,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
'selected-attribute.html', 'selected-attribute.html',
'template-repeat.html', 'template-repeat.html',
'content.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> </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() { test('set multi-selection via tap', function() {
// set selectedValues // set selectedValues
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true})); MockInteractions.tap(s.children[0]);
s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true})); MockInteractions.tap(s.children[2]);
// check selected class // check selected class
assert.isTrue(s.children[0].classList.contains('iron-selected')); assert.isTrue(s.children[0].classList.contains('iron-selected'));
assert.isTrue(s.children[2].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]); assert.equal(s.selectedItems[1], s.children[2]);
}); });
test('fire iron-select/deselect events', function() { test('fire iron-select/deselect events when selectedValues changes', function() {
// setup listener for iron-select event // setup listener for iron-select/deselect events
var selectEventCounter = 0; 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) { 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) { 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 // check events
assert.equal(selectEventCounter, 1); assert.equal(selectEventCounters[0], 1);
assert.equal(deselectEventCounter, 0); assert.equal(deselectEventCounters[0], 1);
// tap on already selected item should deselect it assert.equal(selectEventCounters[1], 1);
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true})); assert.equal(deselectEventCounters[1], 1);
// check selectedValues assert.equal(selectEventCounters[2], 1);
assert.equal(s.selectedValues.length, 0); assert.equal(deselectEventCounters[2], 1);
// check class });
assert.isFalse(s.children[0].classList.contains('iron-selected'));
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 // check events
assert.equal(selectEventCounter, 1); assert.equal(selectEventCounters[0], 1);
assert.equal(deselectEventCounter, 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() { test('fires selected-values-changed when selection changes', function() {
@ -180,11 +255,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.dom(s).removeChild(lastChild); Polymer.dom(s).removeChild(lastChild);
Polymer.Base.async(function() { Polymer.dom.flush();
expect(s.selectedItems.length).to.be.equal(1); expect(s.selectedItems.length).to.be.equal(1);
expect(s.selectedItems[0]).to.be.equal(firstChild);
done(); done();
}); });
});
}); });

View file

@ -43,6 +43,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template> </template>
</test-fixture> </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> <script>
suite('selected attributes', function() { 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> </script>
</body> </body>

View file

@ -45,7 +45,7 @@
"tag": "v1.0.11", "tag": "v1.0.11",
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5" "commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
}, },
"_source": "git://github.com/PolymerElements/paper-behaviors.git", "_source": "git://github.com/polymerelements/paper-behaviors.git",
"_target": "^1.0.0", "_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" "iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/polymerelements/paper-icon-button", "homepage": "https://github.com/PolymerElements/paper-icon-button",
"_release": "1.0.6", "_release": "1.0.6",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.6", "tag": "v1.0.6",
"commit": "35347d81939093cd2abe2783ac1b17fa57b7b303" "commit": "35347d81939093cd2abe2783ac1b17fa57b7b303"
}, },
"_source": "git://github.com/polymerelements/paper-icon-button.git", "_source": "git://github.com/PolymerElements/paper-icon-button.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/paper-icon-button" "_originalSource": "PolymerElements/paper-icon-button"
} }

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-input", "name": "paper-input",
"version": "1.1.5", "version": "1.1.6",
"description": "Material design text fields", "description": "Material design text fields",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -33,7 +33,7 @@
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0", "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
"iron-input": "PolymerElements/iron-input#^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" "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
}, },
"devDependencies": { "devDependencies": {
@ -47,11 +47,11 @@
"web-component-tester": "^4.0.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"_release": "1.1.5", "_release": "1.1.6",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.5", "tag": "v1.1.6",
"commit": "0aa8318b5e026688f94c78c7673acabf5bad0f17" "commit": "d918956322b733ee7673aec6e1ce9939aadb4c63"
}, },
"_source": "git://github.com/polymerelements/paper-input.git", "_source": "git://github.com/polymerelements/paper-input.git",
"_target": "^1.0.9", "_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 that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :) If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
--> -->
# Polymer Elements # Polymer Elements
## Guide for Contributors ## Guide for Contributors
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
3. Click the `paper-foo` element. 3. Click the `paper-foo` element.
``` ```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output). 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
When submitting pull requests, please provide: When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax: 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown ```markdown
(For a single issue) (For a single issue)
Fixes #20 Fixes #20
(For multiple issues) (For multiple issues)
Fixes #32, #40 Fixes #32, fixes #40
``` ```
2. **A succinct description of the design** used to fix any related issues. For example: 2. **A succinct description of the design** used to fix any related issues. For example:

View file

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

View file

@ -365,13 +365,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
listeners: { listeners: {
'addon-attached': '_onAddonAttached', 'addon-attached': '_onAddonAttached',
'focus': '_onFocus'
}, },
observers: [
'_focusedControlStateChanged(focused)'
],
keyBindings: { keyBindings: {
'shift+tab:keydown': '_onShiftTabDown' '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() { _focusBlurHandler: function(event) {
if (!this._shiftTabPressed) { if (this._shiftTabPressed)
return;
Polymer.IronControlState._focusBlurHandler.call(this, event);
// Forward the focus to the nested input.
if (this.focused)
this._focusableElement.focus(); this._focusableElement.focus();
}
}, },
/** /**
@ -497,24 +497,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return placeholder || alwaysFloatLabel; 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() { _updateAriaLabelledBy: function() {
var label = Polymer.dom(this.root).querySelector('label'); var label = Polymer.dom(this.root).querySelector('label');
if (!label) { if (!label) {

View file

@ -72,13 +72,13 @@ Custom property | Description | Default
state.value = state.value || ''; state.value = state.value || '';
// Account for the textarea's new lines. var counter = state.value.length;
var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
if (state.inputElement.hasAttribute('maxlength')) { if (state.inputElement.hasAttribute('maxlength')) {
str += '/' + state.inputElement.getAttribute('maxlength'); counter += '/' + state.inputElement.getAttribute('maxlength');
} }
this._charCounterStr = str;
this._charCounterStr = counter;
} }
}); });
</script> </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="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.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/default-theme.html">
<link rel="import" href="../paper-styles/typography.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 Custom property | Description | Default
----------------|-------------|---------- ----------------|-------------|----------
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color` `--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-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 | `--google-red-500` `--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-input-color` | Input foreground color | `--primary-text-color`
`--paper-input-container` | Mixin applied to the container | `{}` `--paper-input-container` | Mixin applied to the container | `{}`
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}` `--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 { .focused-line {
@apply(--layout-fit); @apply(--layout-fit);
background: var(--paper-input-container-focus-color, --default-primary-color); background: var(--paper-input-container-focus-color, --primary-color);
height: 2px; height: 2px;
-webkit-transform-origin: center center; -webkit-transform-origin: center center;
transform-origin: center center; transform-origin: center center;
-webkit-transform: scale3d(0,1,1); -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 { .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; -webkit-transform: none;
transform: none; transform: none;
-webkit-transition: -webkit-transform 0.25s; -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 { .unfocused-line {
@apply(--layout-fit); @apply(--layout-fit);
height: 1px;
background: var(--paper-input-container-color, --secondary-text-color); background: var(--paper-input-container-color, --secondary-text-color);
height: 1px;
@apply(--paper-input-container-underline); @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 { .label-and-input-container {
@apply(--layout-flex-auto); @apply(--layout-flex-auto);
@apply(--layout-relative); @apply(--layout-relative);
width: 100%; width: 100%;
max-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%; width: 100%;
font: inherit; font: inherit;
color: var(--paper-input-container-color, --secondary-text-color); 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-common-nowrap);
@apply(--paper-font-subhead); @apply(--paper-font-subhead);
@apply(--paper-input-container-label); @apply(--paper-input-container-label);
@apply(--paper-transition-easing);
} }
.input-content.label-is-floating ::content label, .input-content.label-is-floating ::content label,
.input-content.label-is-floating ::content .paper-input-label { .input-content.label-is-floating ::content .paper-input-label {
-webkit-transform: translateY(-75%) scale(0.75); -webkit-transform: translateY(-75%) scale(0.75);
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 /* Since we scale to 75/100 of the size, we actually have 100/75 of the
original space now available */ original space now available */
width: 133%; width: 133%;
@apply(--paper-transition-easing);
@apply(--paper-input-container-label-floating); @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 label,
.input-content.label-is-highlighted ::content .paper-input-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); @apply(--paper-input-container-label-focus);
} }
.input-content.is-invalid ::content label, .input-content.is-invalid ::content label,
.input-content.is-invalid ::content .paper-input-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, .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] { ::content [prefix] {
@apply(--paper-font-subhead); @apply(--paper-font-subhead);
@apply(--paper-input-prefix); @apply(--paper-input-prefix);
@apply(--layout-flex-none); @apply(--layout-flex-none);
} }
::content [suffix] { ::content [suffix] {
@apply(--paper-font-subhead); @apply(--paper-font-subhead);
@apply(--paper-input-suffix); @apply(--paper-input-suffix);
@apply(--layout-flex-none); @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 * { .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 * { .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> </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="../polymer/polymer.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html"> <link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="paper-input-addon-behavior.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 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 | `{}` `--paper-input-error` | Mixin applied to the error | `{}`
--> -->
@ -39,7 +38,7 @@ Custom property | Description | Default
display: inline-block; display: inline-block;
visibility: hidden; 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-font-caption);
@apply(--paper-input-error); @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') var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
assert.ok(counter, 'paper-input-char-counter exists'); assert.ok(counter, 'paper-input-char-counter exists');
// A new line counts as two characters. assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
assert.equal(counter._charCounterStr, input.value.length + 1, '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'); input = fixture('basic');
}); });
test('focus/blur events fired on host element', function() { // At the moment, it is very hard to correctly fire exactly
var nFocusEvents = 0; // one focus/blur events on a paper-input. This is because
var nBlurEvents = 0; // 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) { input.addEventListener('focus', function(event) {
nFocusEvents += 1;
assert(input.focused, 'input is focused'); assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement);
}); });
input.addEventListener('blur', function() { MockInteractions.focus(input);
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');
}); });
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() { 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> </template>
</test-fixture> </test-fixture>
<test-fixture id="has-tabindex">
<template>
<paper-textarea tabindex="0"></paper-textarea>
</template>
</test-fixture>
<test-fixture id="label"> <test-fixture id="label">
<template> <template>
<paper-textarea label="foo"></paper-textarea> <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'); input = fixture('basic');
}); });
test('focus/blur events fired on host element', function() { // At the moment, it is very hard to correctly fire exactly
var nFocusEvents = 0; // one focus/blur events on a paper-textarea. This is because
var nBlurEvents = 0; // 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) { input.addEventListener('focus', function(event) {
nFocusEvents += 1;
assert(input.focused, 'input is focused'); assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement.textarea);
}); });
input.addEventListener('blur', function() { MockInteractions.focus(input);
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')
}); });
test('focus a textarea with tabindex', function(done) { test('focus events fired on host element if nested element is focused', function() {
var input = fixture('has-tabindex'); input.addEventListener('focus', function(event) {
flush(function() { assert(input.focused, 'input is focused');
assert.notEqual(document.activeElement, input._focusableElement); });
MockInteractions.focus(input.inputElement.textarea);
});
test('blur events fired on host element', function() {
MockInteractions.focus(input); MockInteractions.focus(input);
setTimeout(function() { input.addEventListener('blur', function(event) {
assert.equal(document.activeElement, input.shadowRoot ? input : input._focusableElement); assert(!input.focused, 'input is blurred');
done(); });
}, 1); 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" "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/PolymerElements/paper-ripple", "homepage": "https://github.com/polymerelements/paper-ripple",
"_release": "1.0.5", "_release": "1.0.5",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.5", "tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5" "commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
}, },
"_source": "git://github.com/PolymerElements/paper-ripple.git", "_source": "git://github.com/polymerelements/paper-ripple.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-ripple" "_originalSource": "polymerelements/paper-ripple"
} }

View file

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

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.20 // @version 0.7.21
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; 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 * Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.20 // @version 0.7.21
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; var defineProperty = Object.defineProperty;
@ -948,7 +948,7 @@ window.HTMLImports.addModule(function(scope) {
if (doc && this._mayParse.indexOf(doc) < 0) { if (doc && this._mayParse.indexOf(doc) < 0) {
this._mayParse.push(doc); this._mayParse.push(doc);
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(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.isParsed(n)) {
if (this.hasResource(n)) { if (this.hasResource(n)) {
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : 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 * Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.20 // @version 0.7.21
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; 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 * Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.20 // @version 0.7.21
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; var defineProperty = Object.defineProperty;
@ -3411,10 +3411,7 @@ window.ShadowDOMPolyfill = {};
var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement; var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement;
if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null; if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null;
var activeElement = wrap(unwrappedActiveElement); var activeElement = wrap(unwrappedActiveElement);
if (activeElement === this.host) { while (!this.contains(activeElement)) {
return null;
}
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
while (activeElement.parentNode) { while (activeElement.parentNode) {
activeElement = activeElement.parentNode; activeElement = activeElement.parentNode;
} }

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.20 // @version 0.7.21
(function() { (function() {
window.WebComponents = window.WebComponents || { window.WebComponents = window.WebComponents || {
flags: {} flags: {}
@ -912,14 +912,29 @@ if (typeof WeakMap === "undefined") {
} }
})(self); })(self);
if (typeof HTMLTemplateElement === "undefined") { (function() {
(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 TEMPLATE_TAG = "template";
var TemplateImpl = function() {};
if (needsTemplate) {
var contentDoc = document.implementation.createHTMLDocument("template"); var contentDoc = document.implementation.createHTMLDocument("template");
var canDecorate = true; var canDecorate = true;
HTMLTemplateElement = function() {}; var templateStyle = document.createElement("style");
HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype); templateStyle.textContent = TEMPLATE_TAG + "{display:none;}";
HTMLTemplateElement.decorate = function(template) { var head = document.head;
head.insertBefore(templateStyle, head.firstElementChild);
TemplateImpl.prototype = Object.create(HTMLElement.prototype);
TemplateImpl.decorate = function(template) {
if (template.content) { if (template.content) {
return; return;
} }
@ -940,7 +955,7 @@ if (typeof HTMLTemplateElement === "undefined") {
}, },
set: function(text) { set: function(text) {
contentDoc.body.innerHTML = text; contentDoc.body.innerHTML = text;
HTMLTemplateElement.bootstrap(contentDoc); TemplateImpl.bootstrap(contentDoc);
while (this.content.firstChild) { while (this.content.firstChild) {
this.content.removeChild(this.content.firstChild); this.content.removeChild(this.content.firstChild);
} }
@ -950,27 +965,30 @@ if (typeof HTMLTemplateElement === "undefined") {
}, },
configurable: true configurable: true
}); });
template.cloneNode = function(deep) {
return TemplateImpl.cloneNode(this, deep);
};
} catch (err) { } catch (err) {
canDecorate = false; canDecorate = false;
} }
} }
HTMLTemplateElement.bootstrap(template.content); TemplateImpl.bootstrap(template.content);
}; };
HTMLTemplateElement.bootstrap = function(doc) { TemplateImpl.bootstrap = function(doc) {
var templates = doc.querySelectorAll(TEMPLATE_TAG); var templates = doc.querySelectorAll(TEMPLATE_TAG);
for (var i = 0, l = templates.length, t; i < l && (t = templates[i]); i++) { for (var i = 0, l = templates.length, t; i < l && (t = templates[i]); i++) {
HTMLTemplateElement.decorate(t); TemplateImpl.decorate(t);
} }
}; };
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
HTMLTemplateElement.bootstrap(document); TemplateImpl.bootstrap(document);
}); });
var createElement = document.createElement; var createElement = document.createElement;
document.createElement = function() { document.createElement = function() {
"use strict"; "use strict";
var el = createElement.apply(document, arguments); var el = createElement.apply(document, arguments);
if (el.localName == "template") { if (el.localName == "template") {
HTMLTemplateElement.decorate(el); TemplateImpl.decorate(el);
} }
return el; return el;
}; };
@ -993,8 +1011,61 @@ if (typeof HTMLTemplateElement === "undefined") {
function escapeData(s) { function escapeData(s) {
return s.replace(escapeDataRegExp, escapeReplace); 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) { (function(scope) {
"use strict"; "use strict";
@ -1595,7 +1666,7 @@ window.HTMLImports.addModule(function(scope) {
if (doc && this._mayParse.indexOf(doc) < 0) { if (doc && this._mayParse.indexOf(doc) < 0) {
this._mayParse.push(doc); this._mayParse.push(doc);
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(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.isParsed(n)) {
if (this.hasResource(n)) { if (this.hasResource(n)) {
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : 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 * Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.20 // @version 0.7.21
(function() { (function() {
window.WebComponents = window.WebComponents || { window.WebComponents = window.WebComponents || {
flags: {} flags: {}
@ -3420,10 +3420,7 @@ if (WebComponents.flags.shadow) {
var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement; var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement;
if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null; if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null;
var activeElement = wrap(unwrappedActiveElement); var activeElement = wrap(unwrappedActiveElement);
if (activeElement === this.host) { while (!this.contains(activeElement)) {
return null;
}
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
while (activeElement.parentNode) { while (activeElement.parentNode) {
activeElement = activeElement.parentNode; activeElement = activeElement.parentNode;
} }
@ -6368,7 +6365,7 @@ window.HTMLImports.addModule(function(scope) {
if (doc && this._mayParse.indexOf(doc) < 0) { if (doc && this._mayParse.indexOf(doc) < 0) {
this._mayParse.push(doc); this._mayParse.push(doc);
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(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.isParsed(n)) {
if (this.hasResource(n)) { if (this.hasResource(n)) {
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : 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 += '<form class="newCollectionForm" style="margin:auto;">';
html += '<div class="fldSelectCollection">'; 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 += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
html += '</div>'; html += '</div>';

View file

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

View file

@ -12,6 +12,13 @@
function initEpisodeForm(context, item) { 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); $('.inputFile', context).html(item.OriginalFileName);
$('#txtSeason', context).val(item.ExtractedSeasonNumber); $('#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> <paper-input id="txtEndingEpisode" type="number" pattern="[0-9]*" min="0" label="${LabelEndingEpisodeNumber}"></paper-input>
<div class="fieldDescription">${LabelEndingEpisodeNumberHelp}</div> <div class="fieldDescription">${LabelEndingEpisodeNumberHelp}</div>
</div> </div>
<div class="hide"> <div class="fldRemember hide">
<br /> <br />
<paper-checkbox type="checkbox" id="chkRememberCorrection">${OptionRememberOrganizeCorrection}</paper-checkbox> <paper-checkbox type="checkbox" id="chkRememberCorrection">${OptionRememberOrganizeCorrection}</paper-checkbox>
</div> </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) { function renderLibrarySharingList(context, result) {
var folderHtml = ''; var folderHtml = '';
folderHtml += '<div data-role="controlgroup">'; folderHtml += '<div class="paperCheckboxList">';
folderHtml += result.Items.map(function (i) { folderHtml += result.Items.map(function (i) {
var currentHtml = ''; var currentHtml = '';
var id = 'chkShareFolder' + i.Id;
currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
var isChecked = true; var isChecked = true;
var checkedHtml = isChecked ? ' checked="checked"' : ''; 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; return currentHtml;
@ -25,7 +21,7 @@
folderHtml += '</div>'; folderHtml += '</div>';
$('.librarySharingList', context).html(folderHtml).trigger('create'); context.querySelector('.librarySharingList').innerHTML = folderHtml;
} }
function inviteUser(dlg) { function inviteUser(dlg) {
@ -34,7 +30,11 @@
ApiClient.getJSON(ApiClient.getUrl("Channels", {})).then(function (channelsResult) { 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'); return i.getAttribute('data-folderid');
}); });

View file

@ -324,7 +324,7 @@
return { return {
show: function (itemId, itemType, imageType) { show: function (itemId, itemType, imageType) {
var deferred = DeferredBuilder.Deferred(); var deferred = jQuery.Deferred();
currentDeferred = deferred; currentDeferred = deferred;
hasChanges = false; hasChanges = false;

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