mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
Merge branch 'dev' of https://github.com/MediaBrowser/Emby into dev
This commit is contained in:
commit
9b938fcfdb
@ -12,6 +12,7 @@
|
||||
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
|
||||
<a href="#" data-role="button" class="ui-btn-active">${TabActivityLog}</a>
|
||||
<a href="autoorganizetv.html" data-role="button">${TabTV}</a>
|
||||
<a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
|
||||
</div>
|
||||
|
||||
<div style="margin: -25px 0 1em; text-align: right;">
|
||||
|
@ -11,6 +11,7 @@
|
||||
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
|
||||
<a href="autoorganizelog.html" data-role="button">${TabActivityLog}</a>
|
||||
<a href="#" data-role="button" class="ui-btn-active">${TabTV}</a>
|
||||
<a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
|
||||
</div>
|
||||
|
||||
<form class="libraryFileOrganizerForm">
|
||||
@ -128,6 +129,11 @@
|
||||
<td>%e_n</td>
|
||||
<td>${ValueEpisodeNameUnderscore}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>${FileExtension}</td>
|
||||
<td>%ext</td>
|
||||
<td>mkv</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -171,4 +177,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
@ -16,12 +16,12 @@
|
||||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.0.37",
|
||||
"_release": "1.0.37",
|
||||
"version": "1.0.41",
|
||||
"_release": "1.0.41",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.0.37",
|
||||
"commit": "b383fff379b92417525a3295ebbe3b7db9e0b1a4"
|
||||
"tag": "1.0.41",
|
||||
"commit": "19bdc440adac07ea1a5491abaec89cbdb1c99e17"
|
||||
},
|
||||
"_source": "git://github.com/MediaBrowser/Emby.ApiClient.Javascript.git",
|
||||
"_target": "~1.0.3",
|
||||
|
@ -3444,5 +3444,57 @@
|
||||
contentType: "application/json"
|
||||
});
|
||||
};
|
||||
|
||||
self.createPin = function () {
|
||||
|
||||
return self.ajax({
|
||||
type: "POST",
|
||||
url: self.getUrl('Auth/Pin'),
|
||||
data: {
|
||||
deviceId: self.deviceId(),
|
||||
appName: self.appName()
|
||||
},
|
||||
dataType: "json"
|
||||
});
|
||||
};
|
||||
|
||||
self.getPinStatus = function (pinInfo) {
|
||||
|
||||
var queryString = {
|
||||
deviceId: pinInfo.DeviceId,
|
||||
pin: pinInfo.Pin
|
||||
};
|
||||
|
||||
return self.ajax({
|
||||
type: 'GET',
|
||||
url: self.getUrl('Auth/Pin', queryString),
|
||||
dataType: 'json'
|
||||
});
|
||||
};
|
||||
|
||||
function exchangePin(pinInfo) {
|
||||
|
||||
return self.ajax({
|
||||
type: 'POST',
|
||||
url: self.getUrl('Auth/Pin/Exchange'),
|
||||
data: {
|
||||
deviceId: pinInfo.DeviceId,
|
||||
pin: pinInfo.Pin
|
||||
},
|
||||
dataType: 'json'
|
||||
});
|
||||
}
|
||||
|
||||
self.exchangePin = function (pinInfo) {
|
||||
|
||||
return exchangePin(pinInfo).then(function (result) {
|
||||
|
||||
if (self.onAuthenticated) {
|
||||
self.onAuthenticated(self, result);
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
};
|
||||
};
|
||||
});
|
@ -5,7 +5,8 @@
|
||||
ServerSelection: 1,
|
||||
ServerSignIn: 2,
|
||||
SignedIn: 3,
|
||||
ConnectSignIn: 4
|
||||
ConnectSignIn: 4,
|
||||
ServerUpdateNeeded: 5
|
||||
};
|
||||
|
||||
var ConnectionMode = {
|
||||
@ -214,6 +215,16 @@
|
||||
return connectUser;
|
||||
};
|
||||
|
||||
var minServerVersion = '3.0.5724';
|
||||
self.minServerVersion = function (val) {
|
||||
|
||||
if (val) {
|
||||
minServerVersion = val;
|
||||
}
|
||||
|
||||
return minServerVersion;
|
||||
};
|
||||
|
||||
self.appVersion = function () {
|
||||
return appVersion;
|
||||
};
|
||||
@ -1014,6 +1025,30 @@
|
||||
return (str1 || '').toLowerCase() == (str2 || '').toLowerCase();
|
||||
}
|
||||
|
||||
function compareVersions(a, b) {
|
||||
|
||||
// -1 a is smaller
|
||||
// 1 a is larger
|
||||
// 0 equal
|
||||
a = a.split('.');
|
||||
b = b.split('.');
|
||||
|
||||
for (var i = 0, length = Math.max(a.length, b.length) ; i < length; i++) {
|
||||
var aVal = parseInt(a[i] || '0');
|
||||
var bVal = parseInt(b[i] || '0');
|
||||
|
||||
if (aVal < bVal) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (aVal > bVal) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
function testNextConnectionMode(tests, index, server, wakeOnLanSendTime, options, resolve) {
|
||||
|
||||
if (index >= tests.length) {
|
||||
@ -1052,8 +1087,18 @@
|
||||
|
||||
tryConnect(address, timeout).then(function (result) {
|
||||
|
||||
console.log('calling onSuccessfulConnection with connection mode ' + mode + ' with server ' + server.Name);
|
||||
onSuccessfulConnection(server, result, mode, options, resolve);
|
||||
if (compareVersions(self.minServerVersion(), result.Version) == 1) {
|
||||
|
||||
console.log('minServerVersion requirement not met. Server version: ' + result.Version);
|
||||
resolve({
|
||||
State: ConnectionState.ServerUpdateNeeded,
|
||||
Servers: [server]
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('calling onSuccessfulConnection with connection mode ' + mode + ' with server ' + server.Name);
|
||||
onSuccessfulConnection(server, result, mode, options, resolve);
|
||||
}
|
||||
|
||||
}, function () {
|
||||
|
||||
|
@ -15,12 +15,12 @@
|
||||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.0.83",
|
||||
"_release": "1.0.83",
|
||||
"version": "1.0.90",
|
||||
"_release": "1.0.90",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.0.83",
|
||||
"commit": "2d07f1da3ed23cf12b40ed2639e42dd737eb83fd"
|
||||
"tag": "1.0.90",
|
||||
"commit": "2722d205b177e50517bb46b4d416b8ea2e8e2e3b"
|
||||
},
|
||||
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "~1.0.0",
|
||||
|
54
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css
vendored
Normal file
54
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css
vendored
Normal 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;
|
||||
}
|
196
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
vendored
Normal file
196
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
vendored
Normal 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
|
||||
};
|
||||
});
|
@ -162,6 +162,15 @@ define(['browser'], function (browser) {
|
||||
Container: audioFormat == 'webma' ? 'webma,webm' : audioFormat,
|
||||
Type: 'Audio'
|
||||
});
|
||||
|
||||
// aac also appears in the m4a container
|
||||
if (audioFormat == 'aac') {
|
||||
profile.DirectPlayProfiles.push({
|
||||
Container: 'm4a',
|
||||
AudioCodec: audioFormat,
|
||||
Type: 'Audio'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (canPlayWebm) {
|
||||
@ -198,7 +207,8 @@ define(['browser'], function (browser) {
|
||||
Type: 'Video',
|
||||
AudioCodec: videoAudioCodecs.join(','),
|
||||
VideoCodec: 'h264',
|
||||
Context: 'Streaming'
|
||||
Context: 'Streaming',
|
||||
CopyTimestamps: true
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1,8 +1,8 @@
|
||||
.docspinner {
|
||||
margin-top: -4vh;
|
||||
margin-left: -4vh;
|
||||
width: 8vh;
|
||||
height: 8vh;
|
||||
width: 7vh;
|
||||
height: 7vh;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
@ -136,7 +136,7 @@
|
||||
// but not needed here since this is already on top of an existing dialog
|
||||
// but skip it in IE because it's causing the entire browser to hang
|
||||
// Also have to disable for firefox because it's causing select elements to not be clickable
|
||||
if (!browser.msie && !browser.firefox && options.modal !== false) {
|
||||
if (options.modal !== false) {
|
||||
dlg.setAttribute('modal', 'modal');
|
||||
}
|
||||
|
||||
|
@ -38,7 +38,9 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
|
||||
html += '</h2>';
|
||||
}
|
||||
|
||||
html += '<paper-input autoFocus class="txtPromptValue"></paper-input>';
|
||||
html += '<form>';
|
||||
|
||||
html += '<paper-input autoFocus class="txtPromptValue" value="' + (options.value || '') + '" label="' + (options.label || '') + '"></paper-input>';
|
||||
|
||||
if (options.description) {
|
||||
html += '<div class="fieldDescription">';
|
||||
@ -46,7 +48,6 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// TODO: An actual form element should probably be added
|
||||
html += '<br/>';
|
||||
if (raisedButtons) {
|
||||
html += '<paper-button raised class="btnSubmit"><iron-icon icon="dialog:check"></iron-icon><span>' + globalize.translate(dialogText.buttonOk) + '</span></paper-button>';
|
||||
@ -56,25 +57,32 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
|
||||
html += '<paper-button class="btnPromptExit">' + globalize.translate(dialogText.buttonCancel) + '</paper-button>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</form>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
dlg.innerHTML = html;
|
||||
|
||||
if (options.text) {
|
||||
dlg.querySelector('.txtPromptValue').value = options.text;
|
||||
}
|
||||
|
||||
if (options.label) {
|
||||
dlg.querySelector('.txtPromptValue').label = options.label;
|
||||
}
|
||||
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
|
||||
dlg.querySelector('form').addEventListener('submit', function (e) {
|
||||
|
||||
submitValue = dlg.querySelector('.txtPromptValue').value;
|
||||
paperdialoghelper.close(dlg);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
|
||||
|
||||
// Do a fake form submit this the button isn't a real submit button
|
||||
var fakeSubmit = document.createElement('input');
|
||||
fakeSubmit.setAttribute('type', 'submit');
|
||||
fakeSubmit.style.display = 'none';
|
||||
var form = dlg.querySelector('form');
|
||||
form.appendChild(fakeSubmit);
|
||||
fakeSubmit.click();
|
||||
form.removeChild(fakeSubmit);
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-autogrow-textarea",
|
||||
"version": "1.0.10",
|
||||
"version": "1.0.11",
|
||||
"description": "A textarea element that automatically grows with input",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
@ -29,17 +29,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.10",
|
||||
"_release": "1.0.11",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.10",
|
||||
"commit": "1ba4f97e250dc14e9638d95be582dd62b9083736"
|
||||
"tag": "v1.0.11",
|
||||
"commit": "8fe629c9fecb14b76319ab4fbeef7f0237d93004"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
|
||||
"_target": "^1.0.0",
|
||||
|
@ -1,22 +1,25 @@
|
||||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install web-component-tester
|
||||
- npm install bower
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: lIogwlz5kFUKYy1OWASXxQgZE4YTyjUY0QcEgnqbv6wQ0GX8wRMgbI3zhbAv+xXU5ieYXg6Bd47ZFZZ1kVEWzQynAdd2od14Eu1vfN60/yc/llz62VTYuFsPt8r+Tgw41Iz8plwejK4a+V26Da5tXW+soJQOJKvE/MOiPzKi2m0=
|
||||
- secure: cj3uSCQwLY6pyP3oTdGFjJoTRjv3G1lSe73fMd6i15XnMMxM4DVarfDtK+a0dPPxDY8BBhfr4sFClZuWX71bAHQuqUA84oigbeWt2xfl8d3HUuvr9aEnQxAGe2eQE7atpYJPC9M447sw48QKiUVgQo33DeJ1BGj6SBqkw0BJXO8=
|
||||
node_js: 4
|
||||
- CXX=g++-4.8
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: '42.0'
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
- ubuntu-toolchain-r-test
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
- g++-4.8
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
|
@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-autogrow-textarea",
|
||||
"version": "1.0.10",
|
||||
"version": "1.0.11",
|
||||
"description": "A textarea element that automatically grows with input",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
@ -29,9 +29,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
|
@ -18,46 +18,80 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
<title>iron-autogrow-textarea demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
<link rel="import" href="../iron-autogrow-textarea.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
iron-autogrow-textarea {
|
||||
display: block;
|
||||
width: 200px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.vertical-section {
|
||||
box-sizing: border-box;
|
||||
width: 400px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<style>
|
||||
iron-autogrow-textarea {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<body unresolved>
|
||||
<div class="vertical-section-container centered">
|
||||
<h4>Updating the value imperatively</h4>
|
||||
<template is="dom-bind">
|
||||
<div class="vertical-section">
|
||||
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
|
||||
<br><br>
|
||||
<h3>An iron-autogrow-textarea grows automatically as more text is entered</h3>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<iron-autogrow-textarea></iron-autogrow-textarea>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<code>bind-value</code>: <span>[[bindValue]]</span>
|
||||
<h3>The maximum height can be controlled either through the <i>max-rows</i>
|
||||
property, or through a fixed max height</h3>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<iron-autogrow-textarea max-rows="4" placeholder="scrolls after 4 rows"></iron-autogrow-textarea>
|
||||
<iron-autogrow-textarea style="max-height: 50px;" placeholder="scrolls after 50px"></iron-autogrow-textarea>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<p on-click="setValue">
|
||||
set <code>bind-value</code> to: <br>
|
||||
<textarea></textarea>
|
||||
<button value="bindValue">set</button>
|
||||
<br><br>
|
||||
<h3>The initial height can also be controlled using the <i>rows</i> property,
|
||||
or through a fixed height</h3>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<iron-autogrow-textarea rows="4" placeholder="start with 4 rows"></iron-autogrow-textarea>
|
||||
<iron-autogrow-textarea style="height: 50px;"></iron-autogrow-textarea>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
set <code>textarea.value</code> to: <br>
|
||||
<textarea></textarea>
|
||||
<button value="value">set</button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Example of updating the value imperatively</h3>
|
||||
<!-- TODO: replace this with a demo-snippet when https://github.com/webcomponents/webcomponentsjs/issues/362
|
||||
is fixed -->
|
||||
<div class="example">
|
||||
<template is="dom-bind">
|
||||
<div class="vertical-section">
|
||||
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
|
||||
<br>
|
||||
<code>bind-value</code>: <span>[[bindValue]]</span>
|
||||
<p on-click="setValue">
|
||||
Imperatively changing <code>bind-value</code> will also update
|
||||
<code>textarea.value</code>:<br>
|
||||
<textarea></textarea>
|
||||
<button value="bindValue">set</button>
|
||||
<br><br>
|
||||
|
||||
<h4>Custom</h4>
|
||||
<div class="vertical-section">
|
||||
<p>Scrolls after 4 rows:</p>
|
||||
<iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
|
||||
<p>Initial height of 4 rows</p>
|
||||
<iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
|
||||
Imperatively updating <code>textarea.value</code> will update
|
||||
the display, but not update <code>bind-value</code>:<br>
|
||||
<textarea></textarea>
|
||||
<button value="value">set</button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var scope = document.querySelector('template[is=dom-bind]');
|
||||
|
||||
@ -67,13 +101,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
}
|
||||
var inputValue = event.target.previousElementSibling.value;
|
||||
if (event.target.value == "bindValue") {
|
||||
document.querySelector('iron-autogrow-textarea').bindValue = inputValue;
|
||||
document.querySelector('#a1').bindValue = inputValue;
|
||||
} else {
|
||||
document.querySelector('iron-autogrow-textarea').textarea.value = inputValue;
|
||||
document.querySelector('#a1').textarea.value = inputValue;
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -33,6 +33,7 @@ The following custom properties and mixins are available for styling:
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--iron-autogrow-textarea` | Mixin applied to the textarea | `{}`
|
||||
`--iron-autogrow-textarea-placeholder` | Mixin applied to the textarea placeholder | `{}`
|
||||
|
||||
@group Iron Elements
|
||||
@hero hero.svg
|
||||
@ -50,6 +51,7 @@ Custom property | Description | Default
|
||||
padding: 2px;
|
||||
-moz-appearance: textarea;
|
||||
-webkit-appearance: textarea;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mirror-text {
|
||||
@ -82,6 +84,21 @@ Custom property | Description | Default
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
textarea::-webkit-input-placeholder {
|
||||
@apply(--iron-autogrow-textarea-placeholder);
|
||||
}
|
||||
|
||||
textarea:-moz-placeholder {
|
||||
@apply(--iron-autogrow-textarea-placeholder);
|
||||
}
|
||||
|
||||
textarea::-moz-placeholder {
|
||||
@apply(--iron-autogrow-textarea-placeholder);
|
||||
}
|
||||
|
||||
textarea:-ms-input-placeholder {
|
||||
@apply(--iron-autogrow-textarea-placeholder);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<!-- the mirror sizes the input/textarea so it grows with typing -->
|
||||
@ -120,8 +137,6 @@ Custom property | Description | Default
|
||||
|
||||
/**
|
||||
* Use this property instead of `value` for two-way data binding.
|
||||
*
|
||||
* @type {string|number|undefined|null}
|
||||
*/
|
||||
bindValue: {
|
||||
observer: '_bindValueChanged',
|
||||
@ -191,6 +206,7 @@ Custom property | Description | Default
|
||||
value: {
|
||||
notify: true,
|
||||
type: String,
|
||||
value: '',
|
||||
computed: '_computeValue(bindValue)'
|
||||
},
|
||||
|
||||
@ -265,6 +281,10 @@ Custom property | Description | Default
|
||||
set selectionEnd(value) {
|
||||
this.$.textarea.selectionEnd = value;
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.bindValue = this.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if `value` is valid. The validator provided in `validator`
|
||||
|
@ -1,5 +1,4 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
<!DOCTYPE html><!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
@ -7,9 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
--><html><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>iron-autogrow-textarea tests</title>
|
||||
@ -19,7 +16,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'basic.html',
|
||||
'basic.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-behaviors",
|
||||
"version": "1.0.12",
|
||||
"version": "1.0.13",
|
||||
"description": "Provides a set of behaviors for the iron elements",
|
||||
"private": true,
|
||||
"authors": [
|
||||
@ -25,16 +25,16 @@
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-behaviors",
|
||||
"_release": "1.0.12",
|
||||
"_release": "1.0.13",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.12",
|
||||
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
|
||||
"tag": "v1.0.13",
|
||||
"commit": "a7bc3428a6da2beed21987b3a8028206826a12bc"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
|
||||
"_target": "^1.0.0",
|
||||
|
@ -1,22 +1,25 @@
|
||||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install bower
|
||||
- npm install web-component-tester
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: ZOqj2XVNVwfT74rHxg/ljcAsS6FnmDpRSsXbsy1Icv9DcLHrMlmyQ10gWBjE/YXYF0Uv4akQ1qqn0TJaKOtp9HZeH+P6OPAYk2vJbWD7qp52pPtIqEFomcsUyflt4IjfaXKuN4FMod7PSWVSGJ+DxSguJvZKILkrs5d/rJdFv3c=
|
||||
- secure: clkqemGQG16TXyAPkv9LBv6x3SbT3ZM0eo8LETx4uNKi3WzlwgXxZA9b5Sr5wYzxyxFFpnhDXW7CL4+UjYu1atGNeTW2TuSaYUPHtgu67OFDr8Jbw047p1XQb5enPSt9+YxrHKfjHBiJvWulJ8rCSQshU9Rhe0DC6NrFRPFgk0A=
|
||||
node_js: 4
|
||||
- CXX=g++-4.8
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
- ubuntu-toolchain-r-test
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
- g++-4.8
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
|
@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-behaviors",
|
||||
"version": "1.0.12",
|
||||
"version": "1.0.13",
|
||||
"description": "Provides a set of behaviors for the iron elements",
|
||||
"private": true,
|
||||
"authors": [
|
||||
@ -25,7 +25,7 @@
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
|
@ -89,6 +89,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
this._oldTabIndex = this.tabIndex;
|
||||
this.focused = false;
|
||||
this.tabIndex = -1;
|
||||
this.blur();
|
||||
} else if (this._oldTabIndex !== undefined) {
|
||||
this.tabIndex = this._oldTabIndex;
|
||||
}
|
||||
|
@ -77,12 +77,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
});
|
||||
|
||||
suite('when the focused state is disabled', function() {
|
||||
setup(function() {
|
||||
focusTarget.disabled = true;
|
||||
});
|
||||
|
||||
test('will not be focusable', function() {
|
||||
var blurSpy = sinon.spy(focusTarget, 'blur');
|
||||
MockInteractions.focus(focusTarget);
|
||||
focusTarget.disabled = true;
|
||||
expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
|
||||
expect(blurSpy.called).to.be.eql(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-demo-helpers",
|
||||
"version": "1.0.3",
|
||||
"version": "1.1.0",
|
||||
"description": "Utility classes to make building demo pages easier",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
@ -21,25 +21,27 @@
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||
"prism-element": "PolymerElements/prism-element#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2",
|
||||
"paper-styles": "PolymerElements/paper-styles#1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.3",
|
||||
"_release": "1.1.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "dbcd14c318654f0e42d391af409efff9a8a241a2"
|
||||
"tag": "v1.1.0",
|
||||
"commit": "ea98e51e3ac7b52dd53cea05d3f027b3a41388ad"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-demo-helpers.git",
|
||||
"_target": "^1.0.0",
|
||||
|
27
dashboard-ui/bower_components/iron-demo-helpers/.travis.yml
vendored
Normal file
27
dashboard-ui/bower_components/iron-demo-helpers/.travis.yml
vendored
Normal 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
|
@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-demo-helpers",
|
||||
"version": "1.0.3",
|
||||
"version": "1.1.0",
|
||||
"description": "Utility classes to make building demo pages easier",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
@ -21,18 +21,20 @@
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||
"prism-element": "PolymerElements/prism-element#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2",
|
||||
"paper-styles": "PolymerElements/paper-styles#1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
|
||||
}
|
||||
}
|
||||
|
@ -9,11 +9,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../prism-element/prism-highlighter.html">
|
||||
<link rel="import" href="../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../marked-element/marked-element.html">
|
||||
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/shadow.html">
|
||||
|
||||
<link rel="import" href="../prism-element/prism-highlighter.html">
|
||||
|
||||
<!--
|
||||
`demo-snippet` is a helper element that displays the source of a code snippet and
|
||||
@ -61,7 +62,7 @@ Custom property | Description | Default
|
||||
}
|
||||
|
||||
.demo {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid var(--google-grey-300);
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
@ -71,7 +72,7 @@ Custom property | Description | Default
|
||||
.code {
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
background-color: #fafafa;
|
||||
background-color: var(--google-grey-100);
|
||||
font-size: 13px;
|
||||
overflow: auto;
|
||||
@apply(--demo-snippet-code);
|
||||
@ -81,6 +82,17 @@ Custom property | Description | Default
|
||||
margin: 0;
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
paper-icon-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<prism-highlighter></prism-highlighter>
|
||||
@ -89,12 +101,22 @@ Custom property | Description | Default
|
||||
<content id="content"></content>
|
||||
</div>
|
||||
|
||||
<marked-element markdown=[[_markdown]] id="marked">
|
||||
<div class="markdown-html code"></div>
|
||||
</marked-element>
|
||||
<div class="code-container">
|
||||
<marked-element markdown=[[_markdown]] id="marked">
|
||||
<div class="markdown-html code" id="code"></div>
|
||||
</marked-element>
|
||||
<paper-icon-button
|
||||
id="copyButton"
|
||||
icon="content-copy"
|
||||
title="copy to clipboard"
|
||||
on-tap="_copyToClipboard">
|
||||
</paper-icon-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
Polymer({
|
||||
is: 'demo-snippet',
|
||||
|
||||
@ -114,9 +136,7 @@ Custom property | Description | Default
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO(noms): When marked-element/issues/23 lands, this will become
|
||||
// a public method and will need to be updated.
|
||||
var snippet = this.$.marked._unindent(template.innerHTML);
|
||||
var snippet = this.$.marked.unindent(template.innerHTML);
|
||||
|
||||
// Boolean properties are displayed as checked="", so remove the ="" bit.
|
||||
snippet = snippet.replace(/=""/g, '');
|
||||
@ -125,6 +145,34 @@ Custom property | Description | Default
|
||||
|
||||
// Stamp the template.
|
||||
Polymer.dom(this).appendChild(document.importNode(template.content, true));
|
||||
},
|
||||
|
||||
_copyToClipboard: function() {
|
||||
// From https://github.com/google/material-design-lite/blob/master/docs/_assets/snippets.js
|
||||
var snipRange = document.createRange();
|
||||
snipRange.selectNodeContents(this.$.code);
|
||||
var selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(snipRange);
|
||||
var result = false;
|
||||
try {
|
||||
result = document.execCommand('copy');
|
||||
this.$.copyButton.icon = 'done';
|
||||
} catch (err) {
|
||||
// Copy command is not available
|
||||
console.error(err);
|
||||
this.$.copyButton.icon = 'error';
|
||||
}
|
||||
|
||||
// Return to the copy button after a second.
|
||||
setTimeout(this._resetCopyButtonState.bind(this), 1000);
|
||||
|
||||
selection.removeAllRanges();
|
||||
return result;
|
||||
},
|
||||
|
||||
_resetCopyButtonState: function() {
|
||||
this.$.copyButton.icon = 'content-copy';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
@ -69,7 +69,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
--paper-checkbox-unchecked-ink-color: var(--paper-red-900);
|
||||
--paper-checkbox-label-color: var(--paper-red-500);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<paper-checkbox class="blue">Checkbox</paper-checkbox>
|
||||
<paper-checkbox checked class="red">Checkbox</paper-checkbox>
|
||||
|
@ -22,65 +22,56 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
*** Important! ***
|
||||
You'll notice that these tests don't use test-fixture. That's because
|
||||
there's a problem stamping nested templates in IE/Safari 8. This
|
||||
should eventually be patched in webcomponents.js, but in the meantime
|
||||
we're going to run these tests "the old way".
|
||||
|
||||
<test-fixture id="empty-demo">
|
||||
This is relevant because this means that you, as the test writer,
|
||||
need to remember that an element's state is maintained between tests.
|
||||
If you don't want this, either use a new element, or clean up after
|
||||
your test.
|
||||
-->
|
||||
|
||||
<demo-snippet id="emptyDemo"></demo-snippet>
|
||||
|
||||
<demo-snippet id="nativeDemo">
|
||||
<template>
|
||||
<demo-snippet></demo-snippet>
|
||||
<input disabled>
|
||||
</template>
|
||||
</test-fixture>
|
||||
</demo-snippet>
|
||||
|
||||
<test-fixture id="native-demo">
|
||||
<demo-snippet id="customDemo">
|
||||
<template>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<input disabled>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
<paper-checkbox disabled></paper-checkbox>
|
||||
</template>
|
||||
</test-fixture>
|
||||
</demo-snippet>
|
||||
|
||||
<test-fixture id="custom-demo">
|
||||
<demo-snippet id="demoWithAttributes">
|
||||
<template>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<paper-checkbox disabled></paper-checkbox>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
<input disabled type="date">
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="demo-with-attributes">
|
||||
<template>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<input disabled type="date">
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
</demo-snippet>
|
||||
|
||||
<script>
|
||||
// TODO(notwaldorf): Tests are currently very unhappy in IE
|
||||
function isNotIE() {
|
||||
return !navigator.userAgent.match(/MSIE/i);
|
||||
}
|
||||
|
||||
suite('display', function() {
|
||||
var emptyHeight;
|
||||
|
||||
setup(function() {
|
||||
var emptyDemo = fixture('empty-demo');
|
||||
var emptyDemo = document.getElementById('emptyDemo');
|
||||
emptyHeight = emptyDemo.getBoundingClientRect().height;
|
||||
});
|
||||
|
||||
test('can render native elements', skipUnless(isNotIE, function() {
|
||||
var element = fixture('native-demo');
|
||||
test('can render native elements', function() {
|
||||
var element = document.getElementById('nativeDemo');
|
||||
|
||||
// Render the distributed children.
|
||||
Polymer.dom.flush();
|
||||
|
||||
var rect = element.getBoundingClientRect();
|
||||
|
||||
expect(rect.height).to.be.greaterThan(emptyHeight);
|
||||
|
||||
// The demo is rendered in the light dom, so it should exist, and
|
||||
@ -93,15 +84,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
var markdownElement = element.$.marked;
|
||||
expect(markdownElement.markdown).to.be.equal('```\n\n<input disabled>\n\n```');
|
||||
}));
|
||||
});
|
||||
|
||||
test('can render custom elements', skipUnless(isNotIE, function() {
|
||||
var element = fixture('custom-demo');
|
||||
test('can render custom elements', function() {
|
||||
var element = document.getElementById('customDemo');
|
||||
|
||||
// Render the distributed children.
|
||||
Polymer.dom.flush();
|
||||
|
||||
var rect = element.getBoundingClientRect();
|
||||
|
||||
expect(rect.height).to.be.greaterThan(emptyHeight);
|
||||
|
||||
// The demo is rendered in the light dom, so it should exist, and
|
||||
@ -115,18 +107,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
var markdownElement = element.$.marked;
|
||||
expect(markdownElement.markdown).to.be.equal(
|
||||
'```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```');
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
suite('parsing', function() {
|
||||
var element;
|
||||
|
||||
setup(function() {
|
||||
var element = fixture('demo-with-attributes');
|
||||
});
|
||||
|
||||
test('preserves attributes', skipUnless(isNotIE, function() {
|
||||
var element = fixture('demo-with-attributes');
|
||||
test('preserves attributes', function() {
|
||||
var element = document.getElementById('demoWithAttributes');
|
||||
|
||||
// Render the distributed children.
|
||||
Polymer.dom.flush();
|
||||
@ -134,7 +120,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
var markdownElement = element.$.marked;
|
||||
expect(markdownElement.markdown).to.be.equal(
|
||||
'```\n\n<input disabled type="date">\n\n```');
|
||||
}));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.2.2",
|
||||
"version": "1.2.3",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
@ -21,21 +21,21 @@
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||
"prism-element": "PolymerElements/prism-element#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"_release": "1.2.2",
|
||||
"homepage": "https://github.com/polymerelements/iron-flex-layout",
|
||||
"_release": "1.2.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.2.2",
|
||||
"commit": "41c4f35be1368afb770312b907a258175565dbdf"
|
||||
"tag": "v1.2.3",
|
||||
"commit": "3ae26f4a248ccc7a4c035590473840342182293e"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||
"_originalSource": "polymerelements/iron-flex-layout"
|
||||
}
|
@ -1,22 +1,25 @@
|
||||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install web-component-tester
|
||||
- npm install bower
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw=
|
||||
- secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI=
|
||||
node_js: 4
|
||||
- CXX=g++-4.8
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
- ubuntu-toolchain-r-test
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
- g++-4.8
|
||||
sauce_connect: true
|
||||
script:
|
||||
- 'true || xvfb-run wct'
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then true || wct -s 'default'; fi"
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
|
@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.2.2",
|
||||
"version": "1.2.3",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
@ -21,11 +21,11 @@
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||
"prism-element": "PolymerElements/prism-element#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
||||
|
@ -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>
|
@ -19,10 +19,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
<link rel="import" href="../iron-flex-layout.html">
|
||||
|
||||
<style>
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
demo-snippet {
|
||||
--demo-snippet-demo: {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
background-color: #ccc;
|
||||
padding: 5px;
|
||||
@ -35,20 +41,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
demo-snippet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vertical-section {
|
||||
padding: 0 !important;
|
||||
.vertical-section-container {
|
||||
max-width: 700px
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved class="fullbleed">
|
||||
|
||||
<h4>Horizontal and vertical layout</h4>
|
||||
<div class="vertical-section">
|
||||
<div class="vertical-section-container centered">
|
||||
<h4>Horizontal and vertical layout</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -56,7 +57,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
@ -64,10 +64,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flexible children</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Flexible children</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -86,10 +84,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flexible children in vertical layouts</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Flexible children in vertical layouts</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -109,10 +105,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flex ratios</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Flex ratios</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -137,10 +131,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis stretch alignment (default)</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis stretch alignment (default)</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -155,10 +147,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis center alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis center alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -174,10 +164,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis start alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis start alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -193,10 +181,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis end alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis end alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -212,10 +198,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, start justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -230,10 +214,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, start justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -248,10 +230,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, end justified</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, end justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -266,10 +246,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, equal space between elements</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, equal space between elements</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -286,10 +264,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, equal space around each element</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, equal space around each element</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -305,10 +281,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Self alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Self alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -342,10 +316,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Wrapping</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Wrapping</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -364,10 +336,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Reversed layouts</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Reversed layouts</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
@ -384,10 +354,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>General purpose ruls</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>General purpose rules</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
@ -217,7 +217,7 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
||||
};
|
||||
|
||||
--layout-around-justified: {
|
||||
-ms-flex-pack: around;
|
||||
-ms-flex-pack: distribute;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
};
|
||||
|
29
dashboard-ui/bower_components/iron-flex-layout/test/index.html
vendored
Normal file
29
dashboard-ui/bower_components/iron-flex-layout/test/index.html
vendored
Normal 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>
|
344
dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout.html
vendored
Normal file
344
dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout.html
vendored
Normal 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>
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-menu-behavior",
|
||||
"version": "1.1.1",
|
||||
"version": "1.1.2",
|
||||
"description": "Provides accessible menu behavior",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
@ -34,11 +34,11 @@
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.1.1",
|
||||
"_release": "1.1.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.1",
|
||||
"commit": "0fc2c95803badd8e8f50cbe7f5d3669d647e7229"
|
||||
"tag": "v1.1.2",
|
||||
"commit": "8b09b6187b748499a0b8e9ddc789391d26e1d5d1"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-menu-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-menu-behavior",
|
||||
"version": "1.1.1",
|
||||
"version": "1.1.2",
|
||||
"description": "Provides accessible menu behavior",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
|
@ -273,6 +273,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
_onUpKey: function(event) {
|
||||
// up and down arrows moves the focus
|
||||
this._focusPrevious();
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
/**
|
||||
@ -282,6 +283,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
*/
|
||||
_onDownKey: function(event) {
|
||||
this._focusNext();
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -43,20 +43,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
return window.getComputedStyle(this)['direction'] === 'rtl';
|
||||
},
|
||||
|
||||
_onLeftKey: function() {
|
||||
_onLeftKey: function(event) {
|
||||
if (this._isRTL) {
|
||||
this._focusNext();
|
||||
} else {
|
||||
this._focusPrevious();
|
||||
}
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
_onRightKey: function() {
|
||||
_onRightKey: function(event) {
|
||||
if (this._isRTL) {
|
||||
this._focusPrevious();
|
||||
} else {
|
||||
this._focusNext();
|
||||
}
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
_onKeydown: function(event) {
|
||||
|
@ -26,14 +26,14 @@
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"main": "iron-meta.html",
|
||||
"homepage": "https://github.com/polymerelements/iron-meta",
|
||||
"homepage": "https://github.com/PolymerElements/iron-meta",
|
||||
"_release": "1.1.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.1",
|
||||
"commit": "e171ee234b482219c9514e6f9551df48ef48bd9f"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-meta.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-meta.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-meta"
|
||||
"_originalSource": "PolymerElements/iron-meta"
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.3.1",
|
||||
"version": "1.3.3",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
@ -25,6 +25,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
|
||||
@ -33,11 +34,11 @@
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||
"_release": "1.3.1",
|
||||
"_release": "1.3.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.3.1",
|
||||
"commit": "efaa64da9dbaa4209483c2d9fd7bf3bd20beb5e2"
|
||||
"tag": "v1.3.3",
|
||||
"commit": "7279b3bedd0f0dd70dbfb3d7557d1f49c7432941"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.3.1",
|
||||
"version": "1.3.3",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
@ -25,6 +25,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
|
||||
|
@ -9,148 +9,143 @@ Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>simple-overlay demo</title>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
<title>simple-overlay demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="simple-overlay.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<style is="custom-style">
|
||||
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="simple-overlay.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
|
||||
.with-margin {
|
||||
margin: 24px 40px;
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
demo-snippet {
|
||||
--demo-snippet-code: {
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
</head>
|
||||
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
}
|
||||
<body unresolved class="centered">
|
||||
|
||||
.vertical {
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
.flex {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body onclick="clickHandler(event);">
|
||||
|
||||
<div class="vertical-section centered">
|
||||
<button data-dialog="plain">plain</button>
|
||||
|
||||
<simple-overlay id="plain">
|
||||
Hello world!
|
||||
<h3>An element with <code>IronOverlayBehavior</code> can be opened, closed, toggled.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="plain.open()">Plain overlay</button>
|
||||
<simple-overlay id="plain" tabindex=-1>
|
||||
<h2>Hello world!</h2>
|
||||
<p>This can be closed by pressing the ESC key too.</p>
|
||||
<button onclick="plain.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<button data-dialog="scrolling">scrolling</button>
|
||||
|
||||
<simple-overlay id="scrolling" class="with-margin scrollable">
|
||||
<p>This dialog scrolls internally.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</simple-overlay>
|
||||
|
||||
<button data-dialog="scrolling-2">scrolling 2</button>
|
||||
|
||||
<simple-overlay id="scrolling-2" class="with-margin full-height vertical">
|
||||
<p>This dialog has a scrolling child.</p>
|
||||
<div class="flex scrollable">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</simple-overlay>
|
||||
|
||||
<button data-dialog="multiple">multiple</button>
|
||||
|
||||
<simple-overlay id="multiple">
|
||||
<p>click to open another overlay</p>
|
||||
<p><button data-dialog="multiple2">click</button></p>
|
||||
</simple-overlay>
|
||||
|
||||
<simple-overlay id="multiple2">
|
||||
Hi!
|
||||
</simple-overlay>
|
||||
|
||||
<button data-dialog="backdrop">backdrop</button>
|
||||
|
||||
<h3>Use <code>with-backdrop</code> to add a backdrop to your overlay. Tabbing will be trapped within the overlay.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="backdrop.open()">Overlay with backdrop</button>
|
||||
<simple-overlay id="backdrop" with-backdrop>
|
||||
<p>Hello world!</p>
|
||||
<button>button</button>
|
||||
<button>button</button>
|
||||
<button>button</button>
|
||||
<button>Button</button>
|
||||
<button onclick="backdrop.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<button data-dialog="autofocus">autofocus</button>
|
||||
|
||||
<simple-overlay id="autofocus">
|
||||
<h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="withAutofocus.open()">Overlay with autofocus child</button>
|
||||
<simple-overlay id="withAutofocus">
|
||||
<p>Hello world!</p>
|
||||
<button>cancel</button>
|
||||
<button autofocus>autofocus</button>
|
||||
<button onclick="withAutofocus.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Multiple overlays can be opened.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<button onclick="multiple.open()">Open first overlay</button>
|
||||
<simple-overlay id="multiple" tabindex=-1>
|
||||
<p>click to open another overlay</p>
|
||||
<button onclick="multiple2.open()">Open second overlay</button>
|
||||
<button onclick="multiple.close()">Close this</button>
|
||||
</simple-overlay>
|
||||
<simple-overlay id="multiple2" tabindex=-1>
|
||||
<h2>Hi!</h2>
|
||||
<button onclick="multiple2.close()">Close</button>
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>An element with <code>IronOverlayBehavior</code> can be scrollable or contain scrollable content.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style>
|
||||
.with-margin {
|
||||
margin: 24px 40px;
|
||||
}
|
||||
.scrollable {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<button onclick="scrolling.open()">Scrolling overlay</button>
|
||||
|
||||
<simple-overlay id="scrolling" class="with-margin scrollable" tabindex=-1>
|
||||
<h2>This dialog scrolls internally.</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<button onclick="scrolling.close()">Close</button>
|
||||
</simple-overlay>
|
||||
|
||||
</div>
|
||||
<button onclick="scrolling2.open()">Scrolling content</button>
|
||||
|
||||
<script>
|
||||
<simple-overlay id="scrolling2" class="with-margin" tabindex=-1>
|
||||
<h2>This dialog has a scrolling child.</h2>
|
||||
<div class="scrollable">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
|
||||
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<p>
|
||||
<button onclick="scrolling2.close()">Close</button>
|
||||
</p>
|
||||
|
||||
function clickHandler(e) {
|
||||
if (!e.target.hasAttribute('data-dialog')) {
|
||||
return;
|
||||
}
|
||||
</simple-overlay>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
var id = e.target.getAttribute('data-dialog');
|
||||
var dialog = document.getElementById(id);
|
||||
if (dialog) {
|
||||
dialog.open();
|
||||
}
|
||||
}
|
||||
</body>
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -179,9 +179,12 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
if (this._callOpenedWhenReady) {
|
||||
this._openedChanged();
|
||||
}
|
||||
this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
Polymer.dom(this).unobserveNodes(this._observer);
|
||||
this._observer = null;
|
||||
this.opened = false;
|
||||
this._manager.trackBackdrop(this);
|
||||
this._manager.removeOverlay(this);
|
||||
@ -213,9 +216,10 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
|
||||
/**
|
||||
* Cancels the overlay.
|
||||
* @param {?Event} event The original event
|
||||
*/
|
||||
cancel: function() {
|
||||
var cancelEvent = this.fire('iron-overlay-canceled', undefined, {cancelable: true});
|
||||
cancel: function(event) {
|
||||
var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
|
||||
if (cancelEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
@ -238,7 +242,6 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
this.removeAttribute('aria-hidden');
|
||||
} else {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
Polymer.dom(this).unobserveNodes(this._observer);
|
||||
}
|
||||
|
||||
// wait to call after ready only if we're initially open
|
||||
@ -326,8 +329,11 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
|
||||
// tasks which must occur before opening; e.g. making the element visible
|
||||
_prepareRenderOpened: function() {
|
||||
|
||||
this._manager.addOverlay(this);
|
||||
|
||||
// Needed to calculate the size of the overlay so that transitions on its size
|
||||
// will have the correct starting points.
|
||||
this._preparePositioning();
|
||||
this.fit();
|
||||
this._finishPositioning();
|
||||
@ -335,6 +341,12 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.prepare();
|
||||
}
|
||||
|
||||
// Safari will apply the focus to the autofocus element when displayed for the first time,
|
||||
// so we blur it. Later, _applyFocus will set the focus if necessary.
|
||||
if (this.noAutoFocus && document.activeElement === this._focusNode) {
|
||||
this._focusNode.blur();
|
||||
}
|
||||
},
|
||||
|
||||
// tasks which cause the overlay to actually open; typically play an
|
||||
@ -354,23 +366,24 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
},
|
||||
|
||||
_finishRenderOpened: function() {
|
||||
// focus the child node with [autofocus]
|
||||
// This ensures the overlay is visible before we set the focus
|
||||
// (by calling _onIronResize -> refit).
|
||||
this.notifyResize();
|
||||
// Focus the child node with [autofocus]
|
||||
this._applyFocus();
|
||||
|
||||
this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
|
||||
this.fire('iron-overlay-opened');
|
||||
},
|
||||
|
||||
_finishRenderClosed: function() {
|
||||
// hide the overlay and remove the backdrop
|
||||
// Hide the overlay and remove the backdrop.
|
||||
this.resetFit();
|
||||
this.style.display = 'none';
|
||||
this._manager.removeOverlay(this);
|
||||
|
||||
this._focusedChild = null;
|
||||
this._applyFocus();
|
||||
|
||||
this.notifyResize();
|
||||
|
||||
this.fire('iron-overlay-closed', this.closingReason);
|
||||
},
|
||||
|
||||
@ -383,8 +396,9 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
_finishPositioning: function() {
|
||||
this.style.display = 'none';
|
||||
this.style.transform = this.style.webkitTransform = '';
|
||||
// force layout to avoid application of transform
|
||||
/** @suppress {suspiciousCode} */ this.offsetWidth;
|
||||
// Force layout layout to avoid application of transform.
|
||||
// Set offsetWidth to itself so that compilers won't remove it.
|
||||
this.offsetWidth = this.offsetWidth;
|
||||
this.style.transition = this.style.webkitTransition = '';
|
||||
},
|
||||
|
||||
@ -395,6 +409,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
}
|
||||
} else {
|
||||
this._focusNode.blur();
|
||||
this._focusedChild = null;
|
||||
this._manager.focusOverlay();
|
||||
}
|
||||
},
|
||||
@ -405,7 +420,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
if (this.noCancelOnOutsideClick) {
|
||||
this._applyFocus();
|
||||
} else {
|
||||
this.cancel();
|
||||
this.cancel(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -415,7 +430,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
if (this._manager.currentOverlay() === this &&
|
||||
!this.noCancelOnEscKey &&
|
||||
event.keyCode === ESC) {
|
||||
this.cancel();
|
||||
this.cancel(event);
|
||||
}
|
||||
},
|
||||
|
||||
@ -436,6 +451,17 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
if (this.opened) {
|
||||
this.refit();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* Will call notifyResize if overlay is opened.
|
||||
* Can be overridden in order to avoid multiple observers on the same node.
|
||||
*/
|
||||
_onNodesChange: function() {
|
||||
if (this.opened) {
|
||||
this.notifyResize();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -447,6 +473,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||
* Fired when the `iron-overlay` is canceled, but before it is closed.
|
||||
* Cancel the event to prevent the `iron-overlay` from closing.
|
||||
* @event iron-overlay-canceled
|
||||
* @param {?Event} event The event in case the user pressed ESC or clicked outside the overlay
|
||||
*/
|
||||
|
||||
/**
|
||||
|
@ -9,6 +9,7 @@ Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>iron-overlay-behavior tests</title>
|
||||
@ -24,7 +25,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
<link rel="import" href="test-overlay.html">
|
||||
<link rel="import" href="test-overlay2.html">
|
||||
|
||||
<style is="custom-style">
|
||||
iron-overlay-backdrop {
|
||||
/* For quicker tests */
|
||||
--iron-overlay-backdrop: {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<test-fixture id="basic">
|
||||
@ -52,55 +63,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="backdrop">
|
||||
<template>
|
||||
<test-overlay with-backdrop>
|
||||
Overlay with backdrop
|
||||
</test-overlay>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="multiple">
|
||||
<template>
|
||||
<test-overlay class="overlay-1">
|
||||
Overlay 1
|
||||
Test overlay 1
|
||||
</test-overlay>
|
||||
<test-overlay class="overlay-2">
|
||||
Overlay 2
|
||||
Test overlay 2
|
||||
</test-overlay>
|
||||
<test-overlay class="overlay-3">
|
||||
Overlay 3
|
||||
</test-overlay>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="backdrop-multiple">
|
||||
<template>
|
||||
<test-overlay with-backdrop class="overlay-1">
|
||||
Overlay 1 with backdrop
|
||||
</test-overlay>
|
||||
<test-overlay with-backdrop class="overlay-2">
|
||||
Overlay 2 with backdrop
|
||||
</test-overlay>
|
||||
<test-overlay with-backdrop class="overlay-3">
|
||||
Overlay 3 with backdrop
|
||||
</test-overlay>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="backdrop-different-elements">
|
||||
<template>
|
||||
<test-overlay with-backdrop class="overlay-1">
|
||||
Overlay 1 with backdrop
|
||||
</test-overlay>
|
||||
<test-overlay2 with-backdrop class="overlay-2">
|
||||
Overlay 2 with backdrop
|
||||
<test-overlay2 class="overlay-3">
|
||||
Other overlay 3
|
||||
</test-overlay2>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
function runAfterOpen(overlay, cb) {
|
||||
function runAfterOpen(overlay, callback) {
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
Polymer.Base.async(cb, 1);
|
||||
Polymer.Base.async(callback, 1);
|
||||
});
|
||||
overlay.open();
|
||||
}
|
||||
|
||||
suite('basic overlay tests', function() {
|
||||
function runAfterClose(overlay, callback) {
|
||||
overlay.addEventListener('iron-overlay-closed', callback);
|
||||
overlay.close();
|
||||
}
|
||||
|
||||
suite('basic overlay', function() {
|
||||
var overlay;
|
||||
|
||||
setup(function() {
|
||||
@ -112,25 +110,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
assert.equal(getComputedStyle(overlay).display, 'none', 'overlay starts hidden');
|
||||
});
|
||||
|
||||
test('overlay open by default', function(done) {
|
||||
overlay = fixture('opened');
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
assert.isTrue(overlay.opened, 'overlay starts opened');
|
||||
assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay starts showing');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('overlay positioned & sized properly', function(done) {
|
||||
overlay = fixture('opened');
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
var s = getComputedStyle(overlay);
|
||||
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth)/2, 'centered horizontally');
|
||||
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight)/2, 'centered vertically');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('overlay open/close events', function(done) {
|
||||
var nevents = 0;
|
||||
|
||||
@ -148,13 +127,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
overlay.opened = true;
|
||||
});
|
||||
|
||||
test('open overlay refits on iron-resize', function() {
|
||||
var overlay = fixture('opened');
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
overlay.fire('iron-resize');
|
||||
assert.isTrue(spy.called, 'overlay should refit');
|
||||
});
|
||||
|
||||
test('closed overlay does not refit on iron-resize', function() {
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
overlay.fire('iron-resize');
|
||||
@ -162,41 +134,47 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
});
|
||||
|
||||
test('open() triggers iron-resize', function(done) {
|
||||
// Ignore the iron-resize on attached.
|
||||
var callCount = -1;
|
||||
// Ignore iron-resize triggered by window resize.
|
||||
var callCount = 0;
|
||||
window.addEventListener('resize', function() { callCount--; }, true);
|
||||
overlay.addEventListener('iron-resize', function () { callCount++; });
|
||||
runAfterOpen(overlay, function () {
|
||||
assert.equal(callCount, 1, 'iron-resize should be called once');
|
||||
overlay.addEventListener('iron-resize', function() { callCount++; });
|
||||
runAfterOpen(overlay, function() {
|
||||
assert.equal(callCount, 1, 'iron-resize called once before iron-overlay-opened');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('close() triggers iron-resize', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-resize', spy);
|
||||
runAfterClose(overlay, function() {
|
||||
assert.equal(spy.callCount, 1, 'iron-resize called once before iron-overlay-closed');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('closed overlay does not trigger iron-resize when its content changes', function(done) {
|
||||
// Ignore iron-resize triggered by window resize.
|
||||
var callCount = 0;
|
||||
window.addEventListener('resize', function() { callCount--; }, true);
|
||||
overlay.addEventListener('iron-resize', function () { callCount++; });
|
||||
var child = document.createElement('div');
|
||||
child.innerHTML = 'hi';
|
||||
Polymer.dom(overlay).appendChild(child);
|
||||
overlay.async(function () {
|
||||
overlay.addEventListener('iron-resize', function() { callCount++; });
|
||||
Polymer.dom(overlay).appendChild(document.createElement('div'));
|
||||
overlay.async(function() {
|
||||
assert.equal(callCount, 0, 'iron-resize should not be called');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
||||
test('open overlay triggers iron-resize when its content changes', function(done) {
|
||||
runAfterOpen(overlay, function () {
|
||||
// Ignore iron-resize triggered by window resize.
|
||||
var callCount = 0;
|
||||
window.addEventListener('resize', function() { callCount--; }, true);
|
||||
overlay.addEventListener('iron-resize', function () { callCount++; });
|
||||
var child = document.createElement('div');
|
||||
child.innerHTML = 'hi';
|
||||
Polymer.dom(overlay).appendChild(child);
|
||||
overlay.async(function () {
|
||||
assert.equal(callCount, 1, 'iron-resize should be called once');
|
||||
runAfterOpen(overlay, function() {
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-resize', spy);
|
||||
Polymer.dom(overlay).appendChild(document.createElement('div'));
|
||||
overlay.async(function() {
|
||||
assert.equal(spy.callCount, 1, 'iron-resize should be called once');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
@ -215,54 +193,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
});
|
||||
});
|
||||
|
||||
test('close an overlay in proximity to another overlay', function(done) {
|
||||
var secondOverlay = fixture('basic');
|
||||
// Open and close a separate overlay.
|
||||
secondOverlay.open();
|
||||
secondOverlay.close();
|
||||
|
||||
// Open the overlay we care about.
|
||||
overlay.open();
|
||||
|
||||
// Wait for infinite recursion, otherwise we win:
|
||||
overlay.addEventListener('iron-overlay-closed', function() {
|
||||
done();
|
||||
});
|
||||
|
||||
// Immediately close the first overlay:
|
||||
overlay.close();
|
||||
});
|
||||
|
||||
test('clicking an overlay does not close it', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
overlay.fire('click');
|
||||
setTimeout(function() {
|
||||
MockInteractions.tap(overlay);
|
||||
overlay.async(function() {
|
||||
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
test('node with autofocus is focused', function(done) {
|
||||
overlay = fixture('autofocus');
|
||||
runAfterOpen(overlay, function() {
|
||||
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('cancel an overlay by clicking outside', function(done) {
|
||||
test('clicking outside fires iron-overlay-canceled', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
||||
assert.equal(event.detail.target, document.body, 'detail contains original click event');
|
||||
done();
|
||||
});
|
||||
MockInteractions.tap(document.body);
|
||||
});
|
||||
});
|
||||
|
||||
test('close an overlay by clicking outside', function(done) {
|
||||
test('clicking outside closes the overlay', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-closed', function(event) {
|
||||
assert.isTrue(event.detail.canceled, 'overlay is canceled');
|
||||
@ -272,7 +225,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
});
|
||||
});
|
||||
|
||||
test('cancel event can be prevented', function(done) {
|
||||
test('iron-overlay-canceled event can be prevented', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
||||
event.preventDefault();
|
||||
@ -280,8 +233,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
MockInteractions.tap(document.body);
|
||||
setTimeout(function() {
|
||||
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
||||
Polymer.Base.async(function() {
|
||||
assert.isTrue(overlay.opened, 'overlay is still open');
|
||||
assert.isFalse(spy.called, 'iron-overlay-closed not fired');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
@ -290,11 +244,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
test('cancel an overlay with esc key', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
||||
assert.equal(event.detail.type, 'keydown');
|
||||
done();
|
||||
});
|
||||
fireEvent('keydown', {
|
||||
keyCode: 27
|
||||
}, document);
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
||||
});
|
||||
});
|
||||
|
||||
@ -304,9 +257,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
assert.isTrue(event.detail.canceled, 'overlay is canceled');
|
||||
done();
|
||||
});
|
||||
fireEvent('keydown', {
|
||||
keyCode: 27
|
||||
}, document);
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
||||
});
|
||||
});
|
||||
|
||||
@ -316,86 +267,262 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
MockInteractions.tap(document.body);
|
||||
setTimeout(function() {
|
||||
Polymer.Base.async(function() {
|
||||
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
test('no-cancel-on-outside-click property; focus stays on overlay when click outside', function(done) {
|
||||
overlay = fixture('autofocus');
|
||||
overlay.noCancelOnOutsideClick = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
MockInteractions.tap(document.body);
|
||||
setTimeout(function() {
|
||||
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test('no-cancel-on-esc-key property', function(done) {
|
||||
overlay.noCancelOnEscKey = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
fireEvent('keydown', {
|
||||
keyCode: 27
|
||||
}, document);
|
||||
setTimeout(function() {
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
||||
Polymer.Base.async(function() {
|
||||
assert.isFalse(spy.called, 'iron-overlay-cancel should not fire');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
test('with-backdrop sets tabindex=-1 and removes it', function() {
|
||||
overlay.withBackdrop = true;
|
||||
assert.equal(overlay.getAttribute('tabindex'), '-1', 'tabindex is -1');
|
||||
overlay.withBackdrop = false;
|
||||
assert.isFalse(overlay.hasAttribute('tabindex'), 'tabindex removed');
|
||||
});
|
||||
|
||||
test('with-backdrop does not override tabindex if already set', function() {
|
||||
overlay.setAttribute('tabindex', '1');
|
||||
overlay.withBackdrop = true;
|
||||
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is 1');
|
||||
overlay.withBackdrop = false;
|
||||
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is still 1');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('opened overlay', function() {
|
||||
var overlay;
|
||||
|
||||
setup(function() {
|
||||
overlay = fixture('opened');
|
||||
});
|
||||
|
||||
test('overlay open by default', function(done) {
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
assert.isTrue(overlay.opened, 'overlay starts opened');
|
||||
assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay starts showing');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('overlay positioned & sized properly', function(done) {
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
var s = getComputedStyle(overlay);
|
||||
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth) / 2, 'centered horizontally');
|
||||
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight) / 2, 'centered vertically');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('open overlay refits on iron-resize', function() {
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
overlay.fire('iron-resize');
|
||||
assert.isTrue(spy.called, 'overlay should refit');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('focus handling', function() {
|
||||
var overlay;
|
||||
|
||||
setup(function() {
|
||||
overlay = fixture('autofocus');
|
||||
});
|
||||
|
||||
test('node with autofocus is focused', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('no-auto-focus will not focus node with autofocus', function(done) {
|
||||
overlay.noAutoFocus = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not focused after opened');
|
||||
done();
|
||||
});
|
||||
// In Safari the element with autofocus will immediately receive focus when displayed for the first time http://jsbin.com/woroci/2/
|
||||
// Ensure this is not the case for overlay.
|
||||
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not immediately focused');
|
||||
});
|
||||
|
||||
test('no-cancel-on-outside-click property; focus stays on overlay when click outside', function(done) {
|
||||
overlay.noCancelOnOutsideClick = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
MockInteractions.tap(document.body);
|
||||
Polymer.Base.async(function() {
|
||||
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
test('with-backdrop traps the focus within the overlay', function(done) {
|
||||
var focusSpy = sinon.stub();
|
||||
var button = document.createElement('button');
|
||||
document.body.appendChild(button);
|
||||
button.addEventListener('focus', focusSpy, true);
|
||||
|
||||
overlay.withBackdrop = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
// Try to steal the focus
|
||||
MockInteractions.focus(button);
|
||||
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
||||
assert.equal(focusSpy.callCount, 0, 'button in body did not get the focus');
|
||||
document.body.removeChild(button);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('overlay with backdrop', function() {
|
||||
var overlay;
|
||||
|
||||
setup(function() {
|
||||
overlay = fixture('backdrop');
|
||||
});
|
||||
|
||||
test('backdrop is opened when overlay is opened', function(done) {
|
||||
assert.isDefined(overlay.backdropElement, 'backdrop is defined');
|
||||
runAfterOpen(overlay, function() {
|
||||
assert.isTrue(overlay.backdropElement.opened, 'backdrop is opened');
|
||||
assert.isDefined(overlay.backdropElement.parentNode, 'backdrop is inserted in the DOM');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('backdrop appears behind the overlay', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
styleZ = parseInt(window.getComputedStyle(overlay).zIndex, 10);
|
||||
backdropStyleZ = parseInt(window.getComputedStyle(overlay.backdropElement).zIndex, 10);
|
||||
assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index than backdrop');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('backdrop is removed when overlay is closed', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
runAfterClose(overlay, function() {
|
||||
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('backdrop is removed when the element is removed from DOM', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
Polymer.dom(overlay).parentNode.removeChild(overlay);
|
||||
// Wait enough so detached is executed.
|
||||
Polymer.Base.async(function() {
|
||||
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
test('manager.getBackdrops() immediately updated on opened changes', function() {
|
||||
overlay.opened = true;
|
||||
assert.equal(overlay._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
|
||||
overlay.opened = false;
|
||||
assert.equal(overlay._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
|
||||
});
|
||||
|
||||
test('updating with-backdrop to false closes backdrop', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.withBackdrop = false;
|
||||
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('backdrop is removed when toggling overlay opened', function(done) {
|
||||
overlay.open();
|
||||
assert.isObject(overlay.backdropElement.parentNode, 'backdrop is immediately inserted in the document');
|
||||
runAfterClose(overlay, function() {
|
||||
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('multiple overlays', function() {
|
||||
var overlays;
|
||||
var overlay1, overlay2;
|
||||
|
||||
setup(function() {
|
||||
overlays = fixture('multiple');
|
||||
var f = fixture('multiple');
|
||||
overlay1 = f[0];
|
||||
overlay2 = f[1];
|
||||
});
|
||||
|
||||
test('new overlays appear on top', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
runAfterOpen(overlays[1], function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
var styleZ1 = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
|
||||
assert.isTrue(styleZ1 > styleZ, 'overlays[1] has higher z-index than overlays[0]');
|
||||
runAfterOpen(overlay1, function() {
|
||||
runAfterOpen(overlay2, function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
||||
var styleZ1 = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
|
||||
assert.isTrue(styleZ1 > styleZ, 'overlay2 has higher z-index than overlay1');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('ESC closes only one opened overlay', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
runAfterOpen(overlays[1], function() {
|
||||
// keydown is sync, keyup async (but no need to wait for it).
|
||||
MockInteractions.pressAndReleaseKeyOn(document.body, 27);
|
||||
// Ideally overlays[1] should be closed and overlays[0] still open,
|
||||
// but in this test env overlays[0]._onCaptureKeydown gets called before
|
||||
// overlays[1]._onCaptureKeydown.
|
||||
// TODO investigate if this is because of CustomEvents in MockInteractions.
|
||||
var opened0 = overlays[0].opened && !overlays[1].opened;
|
||||
var opened1 = !overlays[0].opened && overlays[1].opened;
|
||||
assert.isTrue(opened0 || opened1, 'only one overlay is still opened');
|
||||
test('ESC closes only the top overlay', function(done) {
|
||||
runAfterOpen(overlay1, function() {
|
||||
runAfterOpen(overlay2, function() {
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
||||
assert.isFalse(overlay2.opened, 'overlay2 was closed');
|
||||
assert.isTrue(overlay1.opened, 'overlay1 is still opened');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('close an overlay in proximity to another overlay', function(done) {
|
||||
// Open and close a separate overlay.
|
||||
overlay1.open();
|
||||
overlay1.close();
|
||||
|
||||
// Open the overlay we care about.
|
||||
overlay2.open();
|
||||
|
||||
// Immediately close the first overlay.
|
||||
// Wait for infinite recursion, otherwise we win.
|
||||
runAfterClose(overlay2, function() {
|
||||
done();
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
suite('z-ordering', function() {
|
||||
|
||||
var overlays;
|
||||
var originalMinimumZ;
|
||||
var overlay1, overlay2;
|
||||
|
||||
setup(function() {
|
||||
overlays = fixture('multiple');
|
||||
var f = fixture('multiple');
|
||||
overlay1 = f[0];
|
||||
overlay2 = f[1];
|
||||
originalMinimumZ = Polymer.IronOverlayManager._minimumZ;
|
||||
});
|
||||
|
||||
@ -405,9 +532,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
// for iframes
|
||||
test('default z-index is greater than 100', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
assert.isTrue(styleZ > 100, 'overlays[0] z-index is <= 100');
|
||||
runAfterOpen(overlay1, function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
||||
assert.isTrue(styleZ > 100, 'overlay1 z-index is <= 100');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -415,9 +542,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
test('ensureMinimumZ() effects z-index', function(done) {
|
||||
Polymer.IronOverlayManager.ensureMinimumZ(1000);
|
||||
|
||||
runAfterOpen(overlays[0], function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000');
|
||||
runAfterOpen(overlay1, function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
||||
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -426,155 +553,69 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
Polymer.IronOverlayManager.ensureMinimumZ(1000);
|
||||
Polymer.IronOverlayManager.ensureMinimumZ(500);
|
||||
|
||||
runAfterOpen(overlays[0], function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000');
|
||||
runAfterOpen(overlay1, function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
||||
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('overlays with backdrop', function() {
|
||||
var overlays;
|
||||
|
||||
setup(function() {
|
||||
overlays = fixture('backdrop-multiple');
|
||||
});
|
||||
|
||||
test('backdrop appears behind the overlay', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
assert.isDefined(overlays[0].backdropElement, 'backdrop is defined');
|
||||
assert.isDefined(overlays[0].backdropElement.parentNode, 'backdrop is inserted in the DOM');
|
||||
|
||||
styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
backdropStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
|
||||
assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index than backdrop');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('backdrop is removed when the element is removed from DOM', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
var backdrop = overlays[0].backdropElement;
|
||||
Polymer.dom(backdrop.parentNode).removeChild(backdrop);
|
||||
Polymer.dom.flush();
|
||||
assert.isNull(backdrop.parentNode, 'backdrop is removed from DOM');
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), (0));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('backdrop is opened when iron-overlay-open-completed fires', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
assert.isTrue(overlays[0].backdropElement.opened, 'backdrop is opened');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('manager backdrops immediately updated on opened changes', function() {
|
||||
overlays[0].opened = true;
|
||||
assert.equal(overlays[0]._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
|
||||
overlays[0].opened = false;
|
||||
assert.equal(overlays[0]._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
|
||||
});
|
||||
|
||||
test('with-backdrop sets tabindex=-1 and removes it', function() {
|
||||
var overlay = fixture('basic');
|
||||
overlay.withBackdrop = true;
|
||||
assert.equal(overlay.getAttribute('tabindex'), '-1', 'tabindex is -1');
|
||||
overlay.withBackdrop = false;
|
||||
assert.isFalse(overlay.hasAttribute('tabindex'), 'tabindex removed');
|
||||
});
|
||||
|
||||
test('with-backdrop does not override tabindex if already set', function() {
|
||||
var overlay = fixture('basic');
|
||||
overlay.setAttribute('tabindex', '1');
|
||||
overlay.withBackdrop = true;
|
||||
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is 1');
|
||||
overlay.withBackdrop = false;
|
||||
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is still 1');
|
||||
});
|
||||
|
||||
test('with-backdrop traps the focus within the overlay', function(done) {
|
||||
// Add button to try to "steal" focus.
|
||||
var button = document.createElement('button');
|
||||
var focusSpy = sinon.stub();
|
||||
button.addEventListener('focus', focusSpy, true);
|
||||
document.body.appendChild(button);
|
||||
|
||||
var overlay = fixture('autofocus');
|
||||
overlay.withBackdrop = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
// Try to steal the focus
|
||||
MockInteractions.focus(button);
|
||||
assert.isFalse(focusSpy.called, 'button in body did not get the focus');
|
||||
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
||||
button.parentNode.removeChild(button);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('multiple overlays with backdrop', function() {
|
||||
var overlays;
|
||||
var overlay1, overlay2, overlay3;
|
||||
|
||||
setup(function() {
|
||||
overlays = fixture('backdrop-multiple');
|
||||
var f = fixture('multiple');
|
||||
overlay1 = f[0];
|
||||
overlay2 = f[1];
|
||||
overlay3 = f[2];
|
||||
overlay1.withBackdrop = overlay2.withBackdrop = overlay3.withBackdrop = true;
|
||||
});
|
||||
|
||||
test('multiple overlays share the same backdrop', function() {
|
||||
assert.isTrue(overlays[0].backdropElement === overlays[1].backdropElement, 'overlays[0] has the same backdrop element as overlays[1]');
|
||||
assert.isTrue(overlay1.backdropElement === overlay2.backdropElement, 'overlay1 and overlay2 have the same backdrop element');
|
||||
assert.isTrue(overlay1.backdropElement === overlay3.backdropElement, 'overlay1 and overlay3 have the same backdrop element');
|
||||
});
|
||||
|
||||
test('newest overlay appear on top', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
runAfterOpen(overlays[1], function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
|
||||
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
|
||||
assert.isTrue(style1Z > styleZ, 'overlays[1] has higher z-index than overlays[0]');
|
||||
assert.isTrue(styleZ > bgStyleZ, 'overlays[0] has higher z-index than backdrop');
|
||||
done();
|
||||
});
|
||||
});
|
||||
test('only one iron-overlay-backdrop in the DOM', function() {
|
||||
// Open them all.
|
||||
overlay1.opened = overlay2.opened = overlay3.opened = true;
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1, 'only one backdrop element in the DOM');
|
||||
});
|
||||
|
||||
test('updating with-backdrop to false closes backdrop', function(done) {
|
||||
// no waiting for animations
|
||||
overlays[0].backdropElement.style.transitionDuration = '0s';
|
||||
|
||||
runAfterOpen(overlays[0], function() {
|
||||
overlays[0].withBackdrop = false;
|
||||
|
||||
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
|
||||
overlays[0].backdropElement.style.transitionDuration = '';
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('backdrop is removed when toggling overlay opened', function(done) {
|
||||
overlays[0].open();
|
||||
assert.isObject(overlays[0].backdropElement.parentNode, 'backdrop is immediately inserted in the document');
|
||||
overlays[0].close();
|
||||
// Wait a tick (overlay will call backdropElement.close in the _openChangedAsync)
|
||||
setTimeout(function() {
|
||||
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
|
||||
test('iron-overlay-backdrop is removed from the DOM when all overlays with backdrop are closed', function(done) {
|
||||
// Open & close them all.
|
||||
overlay1.opened = overlay2.opened = overlay3.opened = true;
|
||||
overlay1.opened = overlay2.opened = overlay3.opened = false;
|
||||
Polymer.Base.async(function() {
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'backdrop element removed from the DOM');
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
test('newest overlay appear on top', function(done) {
|
||||
runAfterOpen(overlay1, function() {
|
||||
runAfterOpen(overlay2, function() {
|
||||
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
||||
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
|
||||
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
|
||||
assert.isTrue(style1Z > styleZ, 'overlay2 has higher z-index than overlay1');
|
||||
assert.isTrue(styleZ > bgStyleZ, 'overlay1 has higher z-index than backdrop');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('updating with-backdrop updates z-index', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
runAfterOpen(overlays[1], function() {
|
||||
overlays[0].withBackdrop = false;
|
||||
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
|
||||
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
|
||||
assert.isTrue(style1Z > bgStyleZ, 'overlays[1] has higher z-index than backdrop');
|
||||
assert.isTrue(styleZ < bgStyleZ, 'overlays[0] has lower z-index than backdrop');
|
||||
runAfterOpen(overlay1, function() {
|
||||
runAfterOpen(overlay2, function() {
|
||||
overlay1.withBackdrop = false;
|
||||
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
||||
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
|
||||
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
|
||||
assert.isTrue(style1Z > bgStyleZ, 'overlay2 has higher z-index than backdrop');
|
||||
assert.isTrue(styleZ < bgStyleZ, 'overlay1 has lower z-index than backdrop');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -582,44 +623,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
});
|
||||
|
||||
suite('multiple overlays with backdrop implemented in different elements', function () {
|
||||
var overlays;
|
||||
|
||||
setup(function() {
|
||||
overlays = fixture('backdrop-different-elements');
|
||||
});
|
||||
|
||||
test('multiple overlays share the same backdrop', function() {
|
||||
assert.equal(overlays[0].backdropElement, overlays[1].backdropElement);
|
||||
});
|
||||
|
||||
test('when overlays close, the backdrop is closed', function(done) {
|
||||
runAfterOpen(overlays[0], function () {
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1);
|
||||
|
||||
// After second overlay is closed, both backdrops should be hidden
|
||||
overlays[1].addEventListener('iron-overlay-closed', function() {
|
||||
Polymer.Base.async(function () {
|
||||
assert.isFalse(overlays[1].backdropElement.opened, 'second overlay backdrop is closed');
|
||||
assert.isFalse(overlays[0].backdropElement.opened, 'first overlay backdrop is closed');
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
// After second overlay is opened, immediately close it
|
||||
overlays[1].addEventListener('iron-overlay-opened', function() {
|
||||
Polymer.Base.async(function () {
|
||||
overlays[1].close();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
// Immediately close first overlay and open the other one
|
||||
overlays[0].close();
|
||||
overlays[1].open();
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
suite('a11y', function() {
|
||||
|
||||
test('overlay has aria-hidden=true when opened', function() {
|
||||
@ -632,8 +635,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-resizable-behavior",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Coordinates the flow of resizeable elements",
|
||||
"private": true,
|
||||
@ -24,15 +24,16 @@
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-resizable-behavior",
|
||||
"_release": "1.0.2",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
|
||||
"tag": "v1.0.3",
|
||||
"commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
25
dashboard-ui/bower_components/iron-resizable-behavior/.travis.yml
vendored
Normal file
25
dashboard-ui/bower_components/iron-resizable-behavior/.travis.yml
vendored
Normal 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"
|
77
dashboard-ui/bower_components/iron-resizable-behavior/CONTRIBUTING.md
vendored
Normal file
77
dashboard-ui/bower_components/iron-resizable-behavior/CONTRIBUTING.md
vendored
Normal 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 user’s 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 don’t be afraid to ask us if you need help with that!
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-resizable-behavior",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Coordinates the flow of resizeable elements",
|
||||
"private": true,
|
||||
@ -24,7 +24,8 @@
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
},
|
||||
"ignore": []
|
||||
}
|
||||
|
@ -17,11 +17,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
* size or hidden state of their children) and "resizables" (elements that need to be
|
||||
* notified when they are resized or un-hidden by their parents in order to take
|
||||
* action on their new measurements).
|
||||
*
|
||||
* Elements that perform measurement should add the `IronResizableBehavior` behavior to
|
||||
* their element definition and listen for the `iron-resize` event on themselves.
|
||||
* This event will be fired when they become showing after having been hidden,
|
||||
* when they are resized explicitly by another resizable, or when the window has been
|
||||
* resized.
|
||||
*
|
||||
* Note, the `iron-resize` event is non-bubbling.
|
||||
*
|
||||
* @polymerBehavior Polymer.IronResizableBehavior
|
||||
|
@ -82,7 +82,7 @@ Notes on Polyfill compatibility in tests:
|
||||
|
||||
suite('x-resizer-parent', function() {
|
||||
|
||||
test('notify resizables from window', function(done) {
|
||||
test('notify resizables from window', function() {
|
||||
var listeners = [
|
||||
ListenForResize(testEl.$.parent),
|
||||
ListenForResize(testEl.$.child1a),
|
||||
@ -91,22 +91,13 @@ Notes on Polyfill compatibility in tests:
|
||||
ListenForResize(testEl.$.shadow1d.$.resizable)
|
||||
];
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
|
||||
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
|
||||
RemoveListeners(listeners);
|
||||
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
}, 0);
|
||||
RemoveListeners(listeners);
|
||||
});
|
||||
|
||||
test('notify resizables from parent', function(done) {
|
||||
test('notify resizables from parent', function() {
|
||||
var listeners = [
|
||||
ListenForResize(testEl.$.parent),
|
||||
ListenForResize(testEl.$.child1a),
|
||||
@ -115,43 +106,33 @@ Notes on Polyfill compatibility in tests:
|
||||
ListenForResize(testEl.$.shadow1d.$.resizable)
|
||||
];
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
testEl.$.parent.notifyResize();
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
}, 0);
|
||||
testEl.$.parent.notifyResize();
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
});
|
||||
|
||||
test('detach resizables then notify parent', function(done) {
|
||||
var listeners = [
|
||||
ListenForResize(testEl.$.parent),
|
||||
ListenForResize(testEl.$.child1a, false),
|
||||
ListenForResize(testEl.$.child1b),
|
||||
ListenForResize(testEl.$.shadow1c.$.resizable, false),
|
||||
ListenForResize(testEl.$.shadow1d.$.resizable)
|
||||
];
|
||||
test('detach resizables then notify parent', function() {
|
||||
sinon.spy(testEl.$.child1a, 'notifyResize');
|
||||
sinon.spy(testEl.$.shadow1c.$.resizable, 'notifyResize');
|
||||
sinon.spy(testEl.$.child1b, 'notifyResize');
|
||||
sinon.spy(testEl.$.shadow1d.$.resizable, 'notifyResize');
|
||||
|
||||
var el = Polymer.dom(testEl.root).querySelector('#child1a');
|
||||
var firstElementToRemove = testEl.$.child1a;
|
||||
var firstElementParent = Polymer.dom(firstElementToRemove).parentNode;
|
||||
var secondElementToRemove = testEl.$.shadow1c.$.resizable;
|
||||
var secondElementParent = Polymer.dom(secondElementToRemove).parentNode;
|
||||
|
||||
el.parentNode.removeChild(el);
|
||||
el = Polymer.dom(testEl.root).querySelector('#shadow1c');
|
||||
el.parentNode.removeChild(el);
|
||||
Polymer.dom(firstElementParent).removeChild(firstElementToRemove);
|
||||
Polymer.dom(secondElementParent).removeChild(secondElementToRemove);
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
testEl.$.parent.notifyResize();
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
}, 0);
|
||||
Polymer.dom.flush();
|
||||
|
||||
testEl.$.parent.notifyResize();
|
||||
|
||||
expect(testEl.$.child1a.notifyResize.callCount).to.be.equal(0);
|
||||
expect(testEl.$.shadow1c.$.resizable.notifyResize.callCount).to.be.equal(0);
|
||||
expect(testEl.$.child1b.notifyResize.callCount).to.be.equal(1);
|
||||
expect(testEl.$.shadow1d.$.resizable.notifyResize.callCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('detach parent then notify window', function(done) {
|
||||
@ -183,7 +164,7 @@ Notes on Polyfill compatibility in tests:
|
||||
|
||||
suite('x-resizer-parent-filtered', function() {
|
||||
|
||||
test('notify resizables from window', function(done) {
|
||||
test('notify resizables from window', function() {
|
||||
var listeners = [
|
||||
ListenForResize(testEl.$.parentFiltered),
|
||||
ListenForResize(testEl.$.child2a),
|
||||
@ -194,19 +175,12 @@ Notes on Polyfill compatibility in tests:
|
||||
|
||||
testEl.$.parentFiltered.active = testEl.$.child2a;
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
}, 0);
|
||||
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
});
|
||||
|
||||
test('notify resizables from parent', function(done) {
|
||||
test('notify resizables from parent', function() {
|
||||
var listeners = [
|
||||
ListenForResize(testEl.$.parentFiltered),
|
||||
ListenForResize(testEl.$.child2a),
|
||||
@ -217,19 +191,12 @@ Notes on Polyfill compatibility in tests:
|
||||
|
||||
testEl.$.parentFiltered.active = testEl.$.child2a;
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
testEl.$.parentFiltered.notifyResize();
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
}, 0);
|
||||
testEl.$.parentFiltered.notifyResize();
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
});
|
||||
|
||||
test('detach resizables then notify parent', function(done) {
|
||||
test('detach resizables then notify parent', function() {
|
||||
var listeners = [
|
||||
ListenForResize(testEl.$.parentFiltered),
|
||||
ListenForResize(testEl.$.child2a, false),
|
||||
@ -245,16 +212,9 @@ Notes on Polyfill compatibility in tests:
|
||||
|
||||
testEl.$.parentFiltered.active = testEl.$.shadow2d.$.resizable;
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
testEl.$.parentFiltered.notifyResize();
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
}, 0);
|
||||
testEl.$.parentFiltered.notifyResize();
|
||||
expect(pendingNotifications).to.be.eql(0);
|
||||
RemoveListeners(listeners);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -1,5 +1,4 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
<!DOCTYPE html><!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
@ -7,10 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
--><html><head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Tests</title>
|
||||
@ -20,13 +16,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
WCT.loadSuites([
|
||||
'basic.html',
|
||||
'iron-resizable-behavior.html'
|
||||
'iron-resizable-behavior.html',
|
||||
'basic.html?dom=shadow',
|
||||
'iron-resizable-behavior.html?dom=shadow'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
@ -74,6 +74,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
suite('window\'s resize', function() {
|
||||
test('causes all iron-resize events to fire once', function() {
|
||||
window.dispatchEvent(new CustomEvent('resize'));
|
||||
Polymer.dom.flush();
|
||||
expect(resizable.ironResizeCount).to.be.equal(2);
|
||||
expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2);
|
||||
expect(resizable.$.childResizable2.ironResizeCount).to.be.equal(2);
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-selector",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.4",
|
||||
"description": "Manages a set of elements that can be selected",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
@ -30,11 +30,11 @@
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.2.1",
|
||||
"_release": "1.2.4",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.2.1",
|
||||
"commit": "1e6a7ee05e5ff350472ffc1ee780f145a7606b7b"
|
||||
"tag": "v1.2.4",
|
||||
"commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||
"_target": "^1.0.0",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iron-selector",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.4",
|
||||
"description": "Manages a set of elements that can be selected",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
|
@ -46,7 +46,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateSelected(attrForSelected, selectedValues)'
|
||||
'_updateSelected(selectedValues)'
|
||||
],
|
||||
|
||||
/**
|
||||
@ -77,6 +77,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
(this.selectedValues != null && this.selectedValues.length);
|
||||
},
|
||||
|
||||
_updateAttrForSelected: function() {
|
||||
if (!this.multi) {
|
||||
Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
|
||||
} else if (this._shouldUpdateSelection) {
|
||||
this.selectedValues = this.selectedItems.map(function(selectedItem) {
|
||||
return this._indexToValue(this.indexOf(selectedItem));
|
||||
}, this).filter(function(unfilteredValue) {
|
||||
return unfilteredValue != null;
|
||||
}, this);
|
||||
}
|
||||
},
|
||||
|
||||
_updateSelected: function() {
|
||||
if (this.multi) {
|
||||
this._selectMulti(this.selectedValues);
|
||||
@ -86,11 +98,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
},
|
||||
|
||||
_selectMulti: function(values) {
|
||||
this._selection.clear();
|
||||
if (values) {
|
||||
for (var i = 0; i < values.length; i++) {
|
||||
this._selection.setItemSelected(this._valueToItem(values[i]), true);
|
||||
var selectedItems = this._valuesToItems(values);
|
||||
// clear all but the current selected items
|
||||
this._selection.clear(selectedItems);
|
||||
// select only those not selected yet
|
||||
for (var i = 0; i < selectedItems.length; i++) {
|
||||
this._selection.setItemSelected(selectedItems[i], true);
|
||||
}
|
||||
} else {
|
||||
this._selection.clear();
|
||||
}
|
||||
},
|
||||
|
||||
@ -113,6 +130,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
this.splice('selectedValues',i,1);
|
||||
}
|
||||
this._selection.setItemSelected(this._valueToItem(value), unselected);
|
||||
},
|
||||
|
||||
_valuesToItems: function(values) {
|
||||
return (values == null) ? null : values.map(function(value) {
|
||||
return this._valueToItem(value);
|
||||
}, this);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -136,7 +136,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateSelected(attrForSelected, selected)'
|
||||
'_updateAttrForSelected(attrForSelected)',
|
||||
'_updateSelected(selected)'
|
||||
],
|
||||
|
||||
created: function() {
|
||||
@ -148,7 +149,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
this._observer = this._observeItems(this);
|
||||
this._updateItems();
|
||||
if (!this._shouldUpdateSelection) {
|
||||
this._updateSelected(this.attrForSelected,this.selected)
|
||||
this._updateSelected();
|
||||
}
|
||||
this._addListener(this.activateEvent);
|
||||
},
|
||||
@ -241,6 +242,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
this._setItems(nodes);
|
||||
},
|
||||
|
||||
_updateAttrForSelected: function() {
|
||||
if (this._shouldUpdateSelection) {
|
||||
this.selected = this._indexToValue(this.indexOf(this.selectedItem));
|
||||
}
|
||||
},
|
||||
|
||||
_updateSelected: function() {
|
||||
this._selectSelected(this.selected);
|
||||
},
|
||||
@ -310,7 +317,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
}
|
||||
|
||||
// Let other interested parties know about the change so that
|
||||
// we don't have to recreate mutation observers everywher.
|
||||
// we don't have to recreate mutation observers everywhere.
|
||||
this.fire('iron-items-changed', mutations, {
|
||||
bubbles: false,
|
||||
cancelable: false
|
||||
|
@ -69,16 +69,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
*/
|
||||
setItemSelected: function(item, isSelected) {
|
||||
if (item != null) {
|
||||
if (isSelected) {
|
||||
this.selection.push(item);
|
||||
} else {
|
||||
var i = this.selection.indexOf(item);
|
||||
if (i >= 0) {
|
||||
this.selection.splice(i, 1);
|
||||
if (isSelected !== this.isSelected(item)) {
|
||||
// proceed to update selection only if requested state differs from current
|
||||
if (isSelected) {
|
||||
this.selection.push(item);
|
||||
} else {
|
||||
var i = this.selection.indexOf(item);
|
||||
if (i >= 0) {
|
||||
this.selection.splice(i, 1);
|
||||
}
|
||||
}
|
||||
if (this.selectCallback) {
|
||||
this.selectCallback(item, isSelected);
|
||||
}
|
||||
}
|
||||
if (this.selectCallback) {
|
||||
this.selectCallback(item, isSelected);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -1,15 +1,11 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
<!DOCTYPE html><!--
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
--><html><head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Tests</title>
|
||||
@ -19,7 +15,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
WCT.loadSuites([
|
||||
'activate-event.html',
|
||||
'basic.html',
|
||||
@ -29,10 +24,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
'selected-attribute.html',
|
||||
'template-repeat.html',
|
||||
'content.html',
|
||||
'excluded-local-names.html'
|
||||
'excluded-local-names.html',
|
||||
'activate-event.html?dom=shadow',
|
||||
'basic.html?dom=shadow',
|
||||
'multi.html?dom=shadow',
|
||||
'next-previous.html?dom=shadow',
|
||||
'selected-attribute.html?dom=shadow',
|
||||
'template-repeat.html?dom=shadow',
|
||||
'content.html?dom=shadow',
|
||||
'excluded-local-names.html?dom=shadow'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
@ -93,8 +93,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
test('set multi-selection via tap', function() {
|
||||
// set selectedValues
|
||||
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
|
||||
s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
|
||||
MockInteractions.tap(s.children[0]);
|
||||
MockInteractions.tap(s.children[2]);
|
||||
// check selected class
|
||||
assert.isTrue(s.children[0].classList.contains('iron-selected'));
|
||||
assert.isTrue(s.children[2].classList.contains('iron-selected'));
|
||||
@ -104,31 +104,106 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
assert.equal(s.selectedItems[1], s.children[2]);
|
||||
});
|
||||
|
||||
test('fire iron-select/deselect events', function() {
|
||||
// setup listener for iron-select event
|
||||
var selectEventCounter = 0;
|
||||
test('fire iron-select/deselect events when selectedValues changes', function() {
|
||||
// setup listener for iron-select/deselect events
|
||||
var items = [s.children[0], s.children[1], s.children[2]],
|
||||
selectEventCounters = [0, 0, 0],
|
||||
deselectEventCounters = [0, 0, 0];
|
||||
|
||||
s.addEventListener('iron-select', function(e) {
|
||||
selectEventCounter++;
|
||||
selectEventCounters[items.indexOf(e.detail.item)]++;
|
||||
});
|
||||
// setup listener for core-deselect event
|
||||
var deselectEventCounter = 0;
|
||||
s.addEventListener('iron-deselect', function(e) {
|
||||
deselectEventCounter++;
|
||||
deselectEventCounters[items.indexOf(e.detail.item)]++;
|
||||
});
|
||||
// tap to select an item
|
||||
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
|
||||
|
||||
// programatically select values 0 and 1 (both fire select)
|
||||
s.selectedValues = [0, 1];
|
||||
|
||||
// programatically select values 1 and 2 (2 fires select, 0 fires deselect)
|
||||
s.selectedValues = [1, 2];
|
||||
|
||||
// programatically deselect all values (1 and 2 fire deselect)
|
||||
s.selectedValues = [];
|
||||
|
||||
// check events
|
||||
assert.equal(selectEventCounter, 1);
|
||||
assert.equal(deselectEventCounter, 0);
|
||||
// tap on already selected item should deselect it
|
||||
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
|
||||
// check selectedValues
|
||||
assert.equal(s.selectedValues.length, 0);
|
||||
// check class
|
||||
assert.isFalse(s.children[0].classList.contains('iron-selected'));
|
||||
assert.equal(selectEventCounters[0], 1);
|
||||
assert.equal(deselectEventCounters[0], 1);
|
||||
assert.equal(selectEventCounters[1], 1);
|
||||
assert.equal(deselectEventCounters[1], 1);
|
||||
assert.equal(selectEventCounters[2], 1);
|
||||
assert.equal(deselectEventCounters[2], 1);
|
||||
});
|
||||
|
||||
test('fire iron-select/deselect events when toggling items', function() {
|
||||
// setup listener for iron-select/deselect events
|
||||
var items = [s.children[0], s.children[1], s.children[2]],
|
||||
selectEventCounters = [0, 0, 0],
|
||||
deselectEventCounters = [0, 0, 0];
|
||||
|
||||
s.addEventListener('iron-select', function(e) {
|
||||
selectEventCounters[items.indexOf(e.detail.item)]++;
|
||||
});
|
||||
s.addEventListener('iron-deselect', function(e) {
|
||||
deselectEventCounters[items.indexOf(e.detail.item)]++;
|
||||
});
|
||||
|
||||
// tap to select items 0 and 1 (both fire select)
|
||||
MockInteractions.tap(items[0]);
|
||||
MockInteractions.tap(items[1]);
|
||||
|
||||
// programatically select values 1 and 2 (2 fires select, 0 fires deselect)
|
||||
s.selectedValues = [1, 2];
|
||||
|
||||
// tap to deselect items 1 and 2 (both fire deselect)
|
||||
MockInteractions.tap(items[1]);
|
||||
MockInteractions.tap(items[2]);
|
||||
|
||||
// check events
|
||||
assert.equal(selectEventCounter, 1);
|
||||
assert.equal(deselectEventCounter, 1);
|
||||
assert.equal(selectEventCounters[0], 1);
|
||||
assert.equal(deselectEventCounters[0], 1);
|
||||
assert.equal(selectEventCounters[1], 1);
|
||||
assert.equal(deselectEventCounters[1], 1);
|
||||
assert.equal(selectEventCounters[2], 1);
|
||||
assert.equal(deselectEventCounters[2], 1);
|
||||
});
|
||||
|
||||
test('toggle iron-selected class when toggling items selection', function() {
|
||||
// setup listener for iron-item-select/deselect events
|
||||
var item0 = s.children[0], item1 = s.children[1];
|
||||
|
||||
assert.isFalse(item0.classList.contains('iron-selected'));
|
||||
assert.isFalse(item1.classList.contains('iron-selected'));
|
||||
|
||||
// tap to select item 0 (add iron-selected class)
|
||||
MockInteractions.tap(item0);
|
||||
|
||||
assert.isTrue(item0.classList.contains('iron-selected'));
|
||||
assert.isFalse(item1.classList.contains('iron-selected'));
|
||||
|
||||
// tap to select item 1 (add iron-selected class)
|
||||
MockInteractions.tap(item1);
|
||||
|
||||
assert.isTrue(item0.classList.contains('iron-selected'));
|
||||
assert.isTrue(item1.classList.contains('iron-selected'));
|
||||
|
||||
// tap to deselect item 1 (remove iron-selected class)
|
||||
MockInteractions.tap(item1);
|
||||
|
||||
assert.isTrue(item0.classList.contains('iron-selected'));
|
||||
assert.isFalse(item1.classList.contains('iron-selected'));
|
||||
|
||||
// programatically select both values (1 add iron-selected class)
|
||||
s.selectedValues = [0, 1];
|
||||
|
||||
assert.isTrue(item0.classList.contains('iron-selected'));
|
||||
assert.isTrue(item1.classList.contains('iron-selected'));
|
||||
|
||||
// programatically deselect all values (both removes iron-selected class)
|
||||
s.selectedValues = [];
|
||||
|
||||
assert.isFalse(item0.classList.contains('iron-selected'));
|
||||
assert.isFalse(item1.classList.contains('iron-selected'));
|
||||
});
|
||||
|
||||
test('fires selected-values-changed when selection changes', function() {
|
||||
@ -180,10 +255,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
Polymer.dom(s).removeChild(lastChild);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(s.selectedItems.length).to.be.equal(1);
|
||||
done();
|
||||
});
|
||||
Polymer.dom.flush();
|
||||
|
||||
expect(s.selectedItems.length).to.be.equal(1);
|
||||
expect(s.selectedItems[0]).to.be.equal(firstChild);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -43,6 +43,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="test-attr-change">
|
||||
<template>
|
||||
<iron-selector id="selector" attr-for-selected="data-x" selected="x-1">
|
||||
<div data-x="x-1" data-y="y-1">1</div>
|
||||
<div data-x="x-2" data-y="y-2">2</div>
|
||||
<div data-x="x-3" data-y="y-3">3</div>
|
||||
</iron-selector>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="test-attr-change-multi">
|
||||
<template>
|
||||
<iron-selector multi id="selector"
|
||||
attr-for-selected="data-x"
|
||||
selected-values='["x-1","x-2"]'>
|
||||
<div data-x="x-1" data-y="y-1">1</div>
|
||||
<div data-x="x-2" data-y="y-2">2</div>
|
||||
<div data-x="x-3" data-y="y-3">3</div>
|
||||
</iron-selector>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('selected attributes', function() {
|
||||
@ -66,6 +88,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
});
|
||||
|
||||
suite('changing attrForSelected', function() {
|
||||
|
||||
var s;
|
||||
|
||||
setup(function () {
|
||||
s = fixture('test-attr-change');
|
||||
});
|
||||
|
||||
test('changing selectedAttribute', function() {
|
||||
Polymer.dom.flush();
|
||||
s.attrForSelected = 'data-y';
|
||||
assert.equal(s.selected, 'y-1');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('changing attrForSelected in multi', function() {
|
||||
|
||||
var s;
|
||||
|
||||
setup(function () {
|
||||
s = fixture('test-attr-change-multi');
|
||||
});
|
||||
|
||||
test('changing selectedAttribute', function() {
|
||||
Polymer.dom.flush();
|
||||
s.attrForSelected = 'data-y';
|
||||
assert.equal(s.selectedValues.length, 2);
|
||||
assert.equal(s.selectedValues[0],'y-1');
|
||||
assert.equal(s.selectedValues[1],'y-2');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
@ -45,7 +45,7 @@
|
||||
"tag": "v1.0.11",
|
||||
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
|
||||
"_source": "git://github.com/polymerelements/paper-behaviors.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-behaviors"
|
||||
"_originalSource": "polymerelements/paper-behaviors"
|
||||
}
|
@ -36,14 +36,14 @@
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/paper-icon-button",
|
||||
"homepage": "https://github.com/PolymerElements/paper-icon-button",
|
||||
"_release": "1.0.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.6",
|
||||
"commit": "35347d81939093cd2abe2783ac1b17fa57b7b303"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-icon-button.git",
|
||||
"_source": "git://github.com/PolymerElements/paper-icon-button.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/paper-icon-button"
|
||||
"_originalSource": "PolymerElements/paper-icon-button"
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.1.5",
|
||||
"version": "1.1.6",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
@ -33,7 +33,7 @@
|
||||
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-input": "PolymerElements/iron-input#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -47,11 +47,11 @@
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.1.5",
|
||||
"_release": "1.1.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.5",
|
||||
"commit": "0aa8318b5e026688f94c78c7673acabf5bad0f17"
|
||||
"tag": "v1.1.6",
|
||||
"commit": "d918956322b733ee7673aec6e1ce9939aadb4c63"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||
"_target": "^1.0.9",
|
||||
|
@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.1.5",
|
||||
"version": "1.1.6",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
@ -33,7 +33,7 @@
|
||||
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-input": "PolymerElements/iron-input#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -365,13 +365,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
listeners: {
|
||||
'addon-attached': '_onAddonAttached',
|
||||
'focus': '_onFocus'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_focusedControlStateChanged(focused)'
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'shift+tab:keydown': '_onShiftTabDown'
|
||||
},
|
||||
@ -440,12 +435,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
},
|
||||
|
||||
/**
|
||||
* Forward focus to inputElement
|
||||
* Forward focus to inputElement. Overriden from IronControlState.
|
||||
*/
|
||||
_onFocus: function() {
|
||||
if (!this._shiftTabPressed) {
|
||||
_focusBlurHandler: function(event) {
|
||||
if (this._shiftTabPressed)
|
||||
return;
|
||||
|
||||
Polymer.IronControlState._focusBlurHandler.call(this, event);
|
||||
|
||||
// Forward the focus to the nested input.
|
||||
if (this.focused)
|
||||
this._focusableElement.focus();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@ -497,24 +497,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
return placeholder || alwaysFloatLabel;
|
||||
},
|
||||
|
||||
_focusedControlStateChanged: function(focused) {
|
||||
// IronControlState stops the focus and blur events in order to redispatch them on the host
|
||||
// element, but paper-input-container listens to those events. Since there are more
|
||||
// pending work on focus/blur in IronControlState, I'm putting in this hack to get the
|
||||
// input focus state working for now.
|
||||
if (!this.$.container) {
|
||||
this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
|
||||
if (!this.$.container) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (focused) {
|
||||
this.$.container._onFocus();
|
||||
} else {
|
||||
this.$.container._onBlur();
|
||||
}
|
||||
},
|
||||
|
||||
_updateAriaLabelledBy: function() {
|
||||
var label = Polymer.dom(this.root).querySelector('label');
|
||||
if (!label) {
|
||||
|
@ -72,13 +72,13 @@ Custom property | Description | Default
|
||||
|
||||
state.value = state.value || '';
|
||||
|
||||
// Account for the textarea's new lines.
|
||||
var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
|
||||
var counter = state.value.length;
|
||||
|
||||
if (state.inputElement.hasAttribute('maxlength')) {
|
||||
str += '/' + state.inputElement.getAttribute('maxlength');
|
||||
counter += '/' + state.inputElement.getAttribute('maxlength');
|
||||
}
|
||||
this._charCounterStr = str;
|
||||
|
||||
this._charCounterStr = counter;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
@ -10,7 +10,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
|
||||
@ -74,8 +73,8 @@ The following custom properties and mixins are available for styling:
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
|
||||
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
|
||||
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
|
||||
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--primary-color`
|
||||
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--error-color`
|
||||
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
|
||||
`--paper-input-container` | Mixin applied to the container | `{}`
|
||||
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
|
||||
@ -125,8 +124,9 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
.focused-line {
|
||||
@apply(--layout-fit);
|
||||
|
||||
background: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
background: var(--paper-input-container-focus-color, --primary-color);
|
||||
height: 2px;
|
||||
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: scale3d(0,1,1);
|
||||
@ -145,7 +145,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
}
|
||||
|
||||
.underline.is-invalid .focused-line {
|
||||
background: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
background: var(--paper-input-container-invalid-color, --error-color);
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
@ -157,8 +157,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
.unfocused-line {
|
||||
@apply(--layout-fit);
|
||||
|
||||
height: 1px;
|
||||
background: var(--paper-input-container-color, --secondary-text-color);
|
||||
height: 1px;
|
||||
|
||||
@apply(--paper-input-container-underline);
|
||||
}
|
||||
@ -174,6 +174,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
.label-and-input-container {
|
||||
@apply(--layout-flex-auto);
|
||||
@apply(--layout-relative);
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -194,26 +195,26 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
color: var(--paper-input-container-color, --secondary-text-color);
|
||||
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
||||
transition: transform 0.25s, width 0.25s;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply(--paper-font-subhead);
|
||||
@apply(--paper-input-container-label);
|
||||
@apply(--paper-transition-easing);
|
||||
}
|
||||
|
||||
.input-content.label-is-floating ::content label,
|
||||
.input-content.label-is-floating ::content .paper-input-label {
|
||||
-webkit-transform: translateY(-75%) scale(0.75);
|
||||
transform: translateY(-75%) scale(0.75);
|
||||
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
||||
transition: transform 0.25s, width 0.25s;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
|
||||
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
|
||||
original space now available */
|
||||
width: 133%;
|
||||
|
||||
@apply(--paper-transition-easing);
|
||||
@apply(--paper-input-container-label-floating);
|
||||
}
|
||||
|
||||
@ -229,14 +230,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
|
||||
.input-content.label-is-highlighted ::content label,
|
||||
.input-content.label-is-highlighted ::content .paper-input-label {
|
||||
color: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
color: var(--paper-input-container-focus-color, --primary-color);
|
||||
|
||||
@apply(--paper-input-container-label-focus);
|
||||
}
|
||||
|
||||
.input-content.is-invalid ::content label,
|
||||
.input-content.is-invalid ::content .paper-input-label {
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
}
|
||||
|
||||
.input-content.label-is-hidden ::content label,
|
||||
@ -266,12 +267,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
|
||||
::content [prefix] {
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-input-prefix);
|
||||
@apply(--layout-flex-none);
|
||||
}
|
||||
|
||||
::content [suffix] {
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-input-suffix);
|
||||
@apply(--layout-flex-none);
|
||||
}
|
||||
@ -290,11 +293,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
||||
}
|
||||
|
||||
.add-on-content.is-invalid ::content * {
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
}
|
||||
|
||||
.add-on-content.is-highlighted ::content * {
|
||||
color: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
color: var(--paper-input-container-focus-color, --primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -9,7 +9,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="paper-input-addon-behavior.html">
|
||||
|
||||
@ -28,7 +27,7 @@ The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
|
||||
`--paper-input-container-invalid-color` | The foreground color of the error | `--error-color`
|
||||
`--paper-input-error` | Mixin applied to the error | `{}`
|
||||
-->
|
||||
|
||||
@ -39,7 +38,7 @@ Custom property | Description | Default
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
|
||||
@apply(--paper-font-caption);
|
||||
@apply(--paper-input-error);
|
||||
|
@ -97,8 +97,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
|
||||
assert.ok(counter, 'paper-input-char-counter exists');
|
||||
|
||||
// A new line counts as two characters.
|
||||
assert.equal(counter._charCounterStr, input.value.length + 1, 'character counter shows the value length');
|
||||
assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -196,23 +196,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
input = fixture('basic');
|
||||
});
|
||||
|
||||
test('focus/blur events fired on host element', function() {
|
||||
var nFocusEvents = 0;
|
||||
var nBlurEvents = 0;
|
||||
// At the moment, it is very hard to correctly fire exactly
|
||||
// one focus/blur events on a paper-input. This is because
|
||||
// when a paper-input is focused, it needs to focus
|
||||
// its underlying native input, which will also fire a `blur`
|
||||
// event.
|
||||
test('focus events fired on host element', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
nFocusEvents += 1;
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement);
|
||||
});
|
||||
input.addEventListener('blur', function() {
|
||||
nBlurEvents += 1;
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement);
|
||||
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
|
||||
assert.isTrue(nBlurEvents >= 1, 'blur event fired');
|
||||
MockInteractions.focus(input);
|
||||
});
|
||||
|
||||
test('focus events fired on host element if nested element is focused', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
assert(input.focused, 'input is focused');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement);
|
||||
});
|
||||
|
||||
test('blur events fired on host element', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input);
|
||||
});
|
||||
|
||||
test('blur events fired on host element nested element is blurred', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input.inputElement);
|
||||
});
|
||||
|
||||
test('focusing then bluring sets the focused attribute correctly', function() {
|
||||
MockInteractions.focus(input);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
MockInteractions.focus(input.inputElement);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
});
|
||||
|
||||
suite('focused styling (integration test)', function() {
|
||||
|
@ -32,12 +32,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="has-tabindex">
|
||||
<template>
|
||||
<paper-textarea tabindex="0"></paper-textarea>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="label">
|
||||
<template>
|
||||
<paper-textarea label="foo"></paper-textarea>
|
||||
@ -139,33 +133,50 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
input = fixture('basic');
|
||||
});
|
||||
|
||||
test('focus/blur events fired on host element', function() {
|
||||
var nFocusEvents = 0;
|
||||
var nBlurEvents = 0;
|
||||
// At the moment, it is very hard to correctly fire exactly
|
||||
// one focus/blur events on a paper-textarea. This is because
|
||||
// when a paper-textarea is focused, it needs to focus
|
||||
// its underlying native textarea, which will also fire a `blur`
|
||||
// event.
|
||||
test('focus events fired on host element', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
nFocusEvents += 1;
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement.textarea);
|
||||
});
|
||||
input.addEventListener('blur', function() {
|
||||
nBlurEvents += 1;
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement.textarea);
|
||||
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
|
||||
assert.isTrue(nBlurEvents >= 1, 'blur event fired')
|
||||
MockInteractions.focus(input);
|
||||
});
|
||||
|
||||
test('focus a textarea with tabindex', function(done) {
|
||||
var input = fixture('has-tabindex');
|
||||
flush(function() {
|
||||
assert.notEqual(document.activeElement, input._focusableElement);
|
||||
MockInteractions.focus(input);
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, input.shadowRoot ? input : input._focusableElement);
|
||||
done();
|
||||
}, 1);
|
||||
})
|
||||
test('focus events fired on host element if nested element is focused', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
assert(input.focused, 'input is focused');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement.textarea);
|
||||
});
|
||||
|
||||
test('blur events fired on host element', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input);
|
||||
});
|
||||
|
||||
test('blur events fired on host element nested element is blurred', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input.inputElement.textarea);
|
||||
});
|
||||
|
||||
test('focusing then bluring sets the focused attribute correctly', function() {
|
||||
MockInteractions.focus(input);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
MockInteractions.focus(input.inputElement.textarea);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement.textarea);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -32,14 +32,14 @@
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/paper-ripple",
|
||||
"homepage": "https://github.com/polymerelements/paper-ripple",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-ripple.git",
|
||||
"_source": "git://github.com/polymerelements/paper-ripple.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-ripple"
|
||||
"_originalSource": "polymerelements/paper-ripple"
|
||||
}
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "webcomponentsjs",
|
||||
"main": "webcomponents.js",
|
||||
"version": "0.7.20",
|
||||
"version": "0.7.21",
|
||||
"homepage": "http://webcomponents.org",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
@ -18,11 +18,11 @@
|
||||
"devDependencies": {
|
||||
"web-component-tester": "^4.0.1"
|
||||
},
|
||||
"_release": "0.7.20",
|
||||
"_release": "0.7.21",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.7.20",
|
||||
"commit": "ce9c8597696ec4bafc772c2126a3b1c7b0e948c0"
|
||||
"tag": "v0.7.21",
|
||||
"commit": "19ffcd921e1aef84b55f515b00eb56e8e9116126"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/webcomponentsjs.git",
|
||||
"_target": "^0.7.20",
|
||||
|
@ -7,7 +7,7 @@
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
// @version 0.7.20
|
||||
// @version 0.7.21
|
||||
if (typeof WeakMap === "undefined") {
|
||||
(function() {
|
||||
var defineProperty = Object.defineProperty;
|
||||
|
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
// @version 0.7.20
|
||||
// @version 0.7.21
|
||||
if (typeof WeakMap === "undefined") {
|
||||
(function() {
|
||||
var defineProperty = Object.defineProperty;
|
||||
@ -948,7 +948,7 @@ window.HTMLImports.addModule(function(scope) {
|
||||
if (doc && this._mayParse.indexOf(doc) < 0) {
|
||||
this._mayParse.push(doc);
|
||||
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
|
||||
for (var i = 0, l = nodes.length, p = 0, n; i < l && (n = nodes[i]); i++) {
|
||||
for (var i = 0, l = nodes.length, n; i < l && (n = nodes[i]); i++) {
|
||||
if (!this.isParsed(n)) {
|
||||
if (this.hasResource(n)) {
|
||||
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;
|
||||
|
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
// @version 0.7.20
|
||||
// @version 0.7.21
|
||||
if (typeof WeakMap === "undefined") {
|
||||
(function() {
|
||||
var defineProperty = Object.defineProperty;
|
||||
|
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
// @version 0.7.20
|
||||
// @version 0.7.21
|
||||
if (typeof WeakMap === "undefined") {
|
||||
(function() {
|
||||
var defineProperty = Object.defineProperty;
|
||||
@ -3411,10 +3411,7 @@ window.ShadowDOMPolyfill = {};
|
||||
var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement;
|
||||
if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null;
|
||||
var activeElement = wrap(unwrappedActiveElement);
|
||||
if (activeElement === this.host) {
|
||||
return null;
|
||||
}
|
||||
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
|
||||
while (!this.contains(activeElement)) {
|
||||
while (activeElement.parentNode) {
|
||||
activeElement = activeElement.parentNode;
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "webcomponentsjs",
|
||||
"main": "webcomponents.js",
|
||||
"version": "0.7.20",
|
||||
"version": "0.7.21",
|
||||
"homepage": "http://webcomponents.org",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "webcomponents.js",
|
||||
"version": "0.7.20",
|
||||
"version": "0.7.21",
|
||||
"description": "webcomponents.js",
|
||||
"main": "webcomponents.js",
|
||||
"directories": {
|
||||
|
@ -7,7 +7,7 @@
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
// @version 0.7.20
|
||||
// @version 0.7.21
|
||||
(function() {
|
||||
window.WebComponents = window.WebComponents || {
|
||||
flags: {}
|
||||
@ -912,14 +912,29 @@ if (typeof WeakMap === "undefined") {
|
||||
}
|
||||
})(self);
|
||||
|
||||
if (typeof HTMLTemplateElement === "undefined") {
|
||||
(function() {
|
||||
var TEMPLATE_TAG = "template";
|
||||
(function() {
|
||||
var needsTemplate = typeof HTMLTemplateElement === "undefined";
|
||||
var needsCloning = function() {
|
||||
if (!needsTemplate) {
|
||||
var frag = document.createDocumentFragment();
|
||||
var t = document.createElement("template");
|
||||
frag.appendChild(t);
|
||||
t.content.appendChild(document.createElement("div"));
|
||||
var clone = frag.cloneNode(true);
|
||||
return clone.firstChild.content.childNodes.length === 0;
|
||||
}
|
||||
}();
|
||||
var TEMPLATE_TAG = "template";
|
||||
var TemplateImpl = function() {};
|
||||
if (needsTemplate) {
|
||||
var contentDoc = document.implementation.createHTMLDocument("template");
|
||||
var canDecorate = true;
|
||||
HTMLTemplateElement = function() {};
|
||||
HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype);
|
||||
HTMLTemplateElement.decorate = function(template) {
|
||||
var templateStyle = document.createElement("style");
|
||||
templateStyle.textContent = TEMPLATE_TAG + "{display:none;}";
|
||||
var head = document.head;
|
||||
head.insertBefore(templateStyle, head.firstElementChild);
|
||||
TemplateImpl.prototype = Object.create(HTMLElement.prototype);
|
||||
TemplateImpl.decorate = function(template) {
|
||||
if (template.content) {
|
||||
return;
|
||||
}
|
||||
@ -940,7 +955,7 @@ if (typeof HTMLTemplateElement === "undefined") {
|
||||
},
|
||||
set: function(text) {
|
||||
contentDoc.body.innerHTML = text;
|
||||
HTMLTemplateElement.bootstrap(contentDoc);
|
||||
TemplateImpl.bootstrap(contentDoc);
|
||||
while (this.content.firstChild) {
|
||||
this.content.removeChild(this.content.firstChild);
|
||||
}
|
||||
@ -950,27 +965,30 @@ if (typeof HTMLTemplateElement === "undefined") {
|
||||
},
|
||||
configurable: true
|
||||
});
|
||||
template.cloneNode = function(deep) {
|
||||
return TemplateImpl.cloneNode(this, deep);
|
||||
};
|
||||
} catch (err) {
|
||||
canDecorate = false;
|
||||
}
|
||||
}
|
||||
HTMLTemplateElement.bootstrap(template.content);
|
||||
TemplateImpl.bootstrap(template.content);
|
||||
};
|
||||
HTMLTemplateElement.bootstrap = function(doc) {
|
||||
TemplateImpl.bootstrap = function(doc) {
|
||||
var templates = doc.querySelectorAll(TEMPLATE_TAG);
|
||||
for (var i = 0, l = templates.length, t; i < l && (t = templates[i]); i++) {
|
||||
HTMLTemplateElement.decorate(t);
|
||||
TemplateImpl.decorate(t);
|
||||
}
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
HTMLTemplateElement.bootstrap(document);
|
||||
TemplateImpl.bootstrap(document);
|
||||
});
|
||||
var createElement = document.createElement;
|
||||
document.createElement = function() {
|
||||
"use strict";
|
||||
var el = createElement.apply(document, arguments);
|
||||
if (el.localName == "template") {
|
||||
HTMLTemplateElement.decorate(el);
|
||||
TemplateImpl.decorate(el);
|
||||
}
|
||||
return el;
|
||||
};
|
||||
@ -993,8 +1011,61 @@ if (typeof HTMLTemplateElement === "undefined") {
|
||||
function escapeData(s) {
|
||||
return s.replace(escapeDataRegExp, escapeReplace);
|
||||
}
|
||||
})();
|
||||
}
|
||||
}
|
||||
if (needsTemplate || needsCloning) {
|
||||
var nativeCloneNode = Node.prototype.cloneNode;
|
||||
TemplateImpl.cloneNode = function(template, deep) {
|
||||
var clone = nativeCloneNode.call(template);
|
||||
if (this.decorate) {
|
||||
this.decorate(clone);
|
||||
}
|
||||
if (deep) {
|
||||
clone.content.appendChild(nativeCloneNode.call(template.content, true));
|
||||
this.fixClonedDom(clone.content, template.content);
|
||||
}
|
||||
return clone;
|
||||
};
|
||||
TemplateImpl.fixClonedDom = function(clone, source) {
|
||||
var s$ = source.querySelectorAll(TEMPLATE_TAG);
|
||||
var t$ = clone.querySelectorAll(TEMPLATE_TAG);
|
||||
for (var i = 0, l = t$.length, t, s; i < l; i++) {
|
||||
s = s$[i];
|
||||
t = t$[i];
|
||||
if (this.decorate) {
|
||||
this.decorate(s);
|
||||
}
|
||||
t.parentNode.replaceChild(s.cloneNode(true), t);
|
||||
}
|
||||
};
|
||||
var originalImportNode = document.importNode;
|
||||
Node.prototype.cloneNode = function(deep) {
|
||||
var dom = nativeCloneNode.call(this, deep);
|
||||
if (deep) {
|
||||
TemplateImpl.fixClonedDom(dom, this);
|
||||
}
|
||||
return dom;
|
||||
};
|
||||
document.importNode = function(element, deep) {
|
||||
if (element.localName === TEMPLATE_TAG) {
|
||||
return TemplateImpl.cloneNode(element, deep);
|
||||
} else {
|
||||
var dom = originalImportNode.call(document, element, deep);
|
||||
if (deep) {
|
||||
TemplateImpl.fixClonedDom(dom, element);
|
||||
}
|
||||
return dom;
|
||||
}
|
||||
};
|
||||
if (needsCloning) {
|
||||
HTMLTemplateElement.prototype.cloneNode = function(deep) {
|
||||
return TemplateImpl.cloneNode(this, deep);
|
||||
};
|
||||
}
|
||||
}
|
||||
if (needsTemplate) {
|
||||
HTMLTemplateElement = TemplateImpl;
|
||||
}
|
||||
})();
|
||||
|
||||
(function(scope) {
|
||||
"use strict";
|
||||
@ -1595,7 +1666,7 @@ window.HTMLImports.addModule(function(scope) {
|
||||
if (doc && this._mayParse.indexOf(doc) < 0) {
|
||||
this._mayParse.push(doc);
|
||||
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
|
||||
for (var i = 0, l = nodes.length, p = 0, n; i < l && (n = nodes[i]); i++) {
|
||||
for (var i = 0, l = nodes.length, n; i < l && (n = nodes[i]); i++) {
|
||||
if (!this.isParsed(n)) {
|
||||
if (this.hasResource(n)) {
|
||||
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;
|
||||
|
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
// @version 0.7.20
|
||||
// @version 0.7.21
|
||||
(function() {
|
||||
window.WebComponents = window.WebComponents || {
|
||||
flags: {}
|
||||
@ -3420,10 +3420,7 @@ if (WebComponents.flags.shadow) {
|
||||
var unwrappedActiveElement = unwrap(this).ownerDocument.activeElement;
|
||||
if (!unwrappedActiveElement || !unwrappedActiveElement.nodeType) return null;
|
||||
var activeElement = wrap(unwrappedActiveElement);
|
||||
if (activeElement === this.host) {
|
||||
return null;
|
||||
}
|
||||
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
|
||||
while (!this.contains(activeElement)) {
|
||||
while (activeElement.parentNode) {
|
||||
activeElement = activeElement.parentNode;
|
||||
}
|
||||
@ -6368,7 +6365,7 @@ window.HTMLImports.addModule(function(scope) {
|
||||
if (doc && this._mayParse.indexOf(doc) < 0) {
|
||||
this._mayParse.push(doc);
|
||||
var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
|
||||
for (var i = 0, l = nodes.length, p = 0, n; i < l && (n = nodes[i]); i++) {
|
||||
for (var i = 0, l = nodes.length, n; i < l && (n = nodes[i]); i++) {
|
||||
if (!this.isParsed(n)) {
|
||||
if (this.hasResource(n)) {
|
||||
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;
|
||||
|
File diff suppressed because one or more lines are too long
@ -122,7 +122,7 @@
|
||||
html += '<form class="newCollectionForm" style="margin:auto;">';
|
||||
|
||||
html += '<div class="fldSelectCollection">';
|
||||
html += '<label for="selectCollectionToAddTo">' + Globalize.translate('LabelSelectCollection') + '</label>';
|
||||
html += '<label for="selectCollectionToAddTo" class="selectLabel">' + Globalize.translate('LabelSelectCollection') + '</label>';
|
||||
html += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
|
||||
html += '</div>';
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
var systemInfo;
|
||||
function getSystemInfo() {
|
||||
|
||||
var deferred = DeferredBuilder.Deferred();
|
||||
var deferred = jQuery.Deferred();
|
||||
|
||||
if (systemInfo) {
|
||||
deferred.resolveWith(null, [systemInfo]);
|
||||
|
@ -12,6 +12,13 @@
|
||||
|
||||
function initEpisodeForm(context, item) {
|
||||
|
||||
if (!item.ExtractedName || item.ExtractedName.length < 4) {
|
||||
context.querySelector('.fldRemember').classList.add('hide');
|
||||
}
|
||||
else {
|
||||
context.querySelector('.fldRemember').classList.remove('hide');
|
||||
}
|
||||
|
||||
$('.inputFile', context).html(item.OriginalFileName);
|
||||
|
||||
$('#txtSeason', context).val(item.ExtractedSeasonNumber);
|
||||
|
@ -22,7 +22,7 @@
|
||||
<paper-input id="txtEndingEpisode" type="number" pattern="[0-9]*" min="0" label="${LabelEndingEpisodeNumber}"></paper-input>
|
||||
<div class="fieldDescription">${LabelEndingEpisodeNumberHelp}</div>
|
||||
</div>
|
||||
<div class="hide">
|
||||
<div class="fldRemember hide">
|
||||
<br />
|
||||
<paper-checkbox type="checkbox" id="chkRememberCorrection">${OptionRememberOrganizeCorrection}</paper-checkbox>
|
||||
</div>
|
||||
|
@ -1,23 +1,19 @@
|
||||
define(['paperdialoghelper', 'paper-input', 'paper-button', 'jqmcollapsible'], function (paperDialogHelper) {
|
||||
define(['paperdialoghelper', 'paper-input', 'paper-button', 'jqmcollapsible', 'paper-checkbox'], function (paperDialogHelper) {
|
||||
|
||||
function renderLibrarySharingList(context, result) {
|
||||
|
||||
var folderHtml = '';
|
||||
|
||||
folderHtml += '<div data-role="controlgroup">';
|
||||
folderHtml += '<div class="paperCheckboxList">';
|
||||
|
||||
folderHtml += result.Items.map(function (i) {
|
||||
|
||||
var currentHtml = '';
|
||||
|
||||
var id = 'chkShareFolder' + i.Id;
|
||||
|
||||
currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
|
||||
|
||||
var isChecked = true;
|
||||
var checkedHtml = isChecked ? ' checked="checked"' : '';
|
||||
|
||||
currentHtml += '<input data-mini="true" class="chkShareFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
|
||||
currentHtml += '<paper-checkbox class="chkShareFolder" data-folderid="' + i.Id + '" type="checkbox"' + checkedHtml + '>' + i.Name + '</paper-checkbox>';
|
||||
|
||||
return currentHtml;
|
||||
|
||||
@ -25,7 +21,7 @@
|
||||
|
||||
folderHtml += '</div>';
|
||||
|
||||
$('.librarySharingList', context).html(folderHtml).trigger('create');
|
||||
context.querySelector('.librarySharingList').innerHTML = folderHtml;
|
||||
}
|
||||
|
||||
function inviteUser(dlg) {
|
||||
@ -34,7 +30,11 @@
|
||||
|
||||
ApiClient.getJSON(ApiClient.getUrl("Channels", {})).then(function (channelsResult) {
|
||||
|
||||
var shareExcludes = $(".chkShareFolder:checked", dlg).get().map(function (i) {
|
||||
var shareExcludes = $(".chkShareFolder", dlg).get().filter(function (i) {
|
||||
|
||||
return i.checked;
|
||||
|
||||
}).map(function (i) {
|
||||
|
||||
return i.getAttribute('data-folderid');
|
||||
});
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user