This commit is contained in:
Tavares André 2015-06-30 20:26:42 +02:00
commit 17e2a0c5b0
973 changed files with 140330 additions and 17144 deletions

View file

@ -4,7 +4,7 @@
<title>${TitlePlugins}</title> <title>${TitlePlugins}</title>
</head> </head>
<body> <body>
<div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Plugins" data-require="scripts/registrationservices,scripts/ratingdialog,scripts/addplugin"> <div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Plugins" data-require="scripts/registrationservices,scripts/ratingdialog,scripts/addpluginpage">
<div data-role="content"> <div data-role="content">
<div class="content-primary"> <div class="content-primary">

View file

@ -85,12 +85,11 @@
<br /> <br />
<ul data-role="listview" class="ulForm"> <ul data-role="listview" class="ulForm">
<li> <li>
<button type="submit" data-theme="b" data-icon="check"> <button type="submit" data-role="none" class="clearButton">
${ButtonSave} <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
</button>
<button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete">
${ButtonCancel}
</button> </button>
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
</li> </li>
</ul> </ul>

View file

@ -1,12 +1,12 @@
(function (globalScope) { (function (globalScope) {
globalScope.AjaxApi = { globalScope.HttpClient = {
param: function (params) { param: function (params) {
return jQuery.param(params); return jQuery.param(params);
}, },
ajax: function (request) { send: function (request) {
request.timeout = request.timeout || 30000; request.timeout = request.timeout || 30000;

View file

@ -1,12 +1,12 @@
(function (globalScope, angular) { (function (globalScope, angular) {
globalScope.AjaxApi = { globalScope.HttpClient = {
param: function(params) { param: function(params) {
return serialize(params); return serialize(params);
}, },
ajax: function(options) { send: function(options) {
var request = getAngularRequest(options), var request = getAngularRequest(options),
defer = globalScope.DeferredBuilder.Deferred(); defer = globalScope.DeferredBuilder.Deferred();
@ -91,7 +91,7 @@
for (var key in jParams) { for (var key in jParams) {
if (!paramMap[key]) { if (!paramMap[key]) {
// This parameter hasn't been implemented in the paramMap object // This parameter hasn't been implemented in the paramMap object
Logger.log('ERROR: ajax option property "' + key + '" not implemented by AjaxApi.'); Logger.log('ERROR: ajax option property "' + key + '" not implemented by HttpClient.');
continue; continue;
} }

View file

@ -115,7 +115,7 @@
name = name.split('&').join('-'); name = name.split('&').join('-');
name = name.split('?').join('-'); name = name.split('?').join('-');
var val = AjaxApi.param({ name: name }); var val = HttpClient.param({ name: name });
return val.substring(val.indexOf('=') + 1).replace("'", '%27'); return val.substring(val.indexOf('=') + 1).replace("'", '%27');
}; };
@ -175,7 +175,7 @@
if (self.enableAutomaticNetworking === false || request.type != "GET") { if (self.enableAutomaticNetworking === false || request.type != "GET") {
logger.log('Requesting url without automatic networking: ' + request.url); logger.log('Requesting url without automatic networking: ' + request.url);
return AjaxApi.ajax(request).fail(onRequestFail); return HttpClient.send(request).fail(onRequestFail);
} }
var deferred = DeferredBuilder.Deferred(); var deferred = DeferredBuilder.Deferred();
@ -218,7 +218,7 @@
var timeout = connectionMode == MediaBrowser.ConnectionMode.Local ? 5000 : 15000; var timeout = connectionMode == MediaBrowser.ConnectionMode.Local ? 5000 : 15000;
AjaxApi.ajax({ HttpClient.send({
type: "GET", type: "GET",
url: url + "/system/info/public", url: url + "/system/info/public",
@ -282,7 +282,7 @@
request.timeout = 15000; request.timeout = 15000;
AjaxApi.ajax(request).done(function (response) { HttpClient.send(request).done(function (response) {
deferred.resolve(response, 0); deferred.resolve(response, 0);
@ -356,7 +356,7 @@
url += name; url += name;
if (params) { if (params) {
url += "?" + AjaxApi.param(params); url += "?" + HttpClient.param(params);
} }
return url; return url;

View file

@ -85,7 +85,7 @@
logger.log('tryConnect url: ' + url); logger.log('tryConnect url: ' + url);
return AjaxApi.ajax({ return HttpClient.send({
type: "GET", type: "GET",
url: url, url: url,
@ -171,7 +171,6 @@
}); });
var existingServer = existingServers.length ? existingServers[0] : {}; var existingServer = existingServers.length ? existingServers[0] : {};
existingServer.DateLastAccessed = new Date().getTime(); existingServer.DateLastAccessed = new Date().getTime();
existingServer.LastConnectionMode = MediaBrowser.ConnectionMode.Manual; existingServer.LastConnectionMode = MediaBrowser.ConnectionMode.Manual;
existingServer.ManualAddress = apiClient.serverAddress(); existingServer.ManualAddress = apiClient.serverAddress();
@ -204,6 +203,18 @@
}); });
}; };
self.clearData = function () {
logger.log('connection manager clearing data');
connectUser = null;
var credentials = credentialProvider.credentials();
credentials.ConnectAccessToken = null;
credentials.ConnectUserId = null;
credentials.Servers = [];
credentialProvider.credentials(credentials);
};
function onConnectUserSignIn(user) { function onConnectUserSignIn(user) {
connectUser = user; connectUser = user;
@ -367,7 +378,7 @@
var url = "https://connect.mediabrowser.tv/service/user?id=" + userId; var url = "https://connect.mediabrowser.tv/service/user?id=" + userId;
return AjaxApi.ajax({ return HttpClient.send({
type: "GET", type: "GET",
url: url, url: url,
dataType: "json", dataType: "json",
@ -392,7 +403,7 @@
url += "/Connect/Exchange?format=json&ConnectUserId=" + credentials.ConnectUserId; url += "/Connect/Exchange?format=json&ConnectUserId=" + credentials.ConnectUserId;
return AjaxApi.ajax({ return HttpClient.send({
type: "GET", type: "GET",
url: url, url: url,
dataType: "json", dataType: "json",
@ -418,7 +429,7 @@
var url = MediaBrowser.ServerInfo.getServerAddress(server, connectionMode); var url = MediaBrowser.ServerInfo.getServerAddress(server, connectionMode);
AjaxApi.ajax({ HttpClient.send({
type: "GET", type: "GET",
url: url + "/system/info", url: url + "/system/info",
@ -433,7 +444,7 @@
if (server.UserId) { if (server.UserId) {
AjaxApi.ajax({ HttpClient.send({
type: "GET", type: "GET",
url: url + "/users/" + server.UserId, url: url + "/users/" + server.UserId,
@ -547,7 +558,7 @@
self.logout = function () { self.logout = function () {
console.log('begin connectionManager loguot'); Logger.log('begin connectionManager loguot');
var promises = []; var promises = [];
for (var i = 0, length = apiClients.length; i < length; i++) { for (var i = 0, length = apiClients.length; i < length; i++) {
@ -623,7 +634,7 @@
var url = "https://connect.mediabrowser.tv/service/servers?userId=" + credentials.ConnectUserId; var url = "https://connect.mediabrowser.tv/service/servers?userId=" + credentials.ConnectUserId;
AjaxApi.ajax({ HttpClient.send({
type: "GET", type: "GET",
url: url, url: url,
dataType: "json", dataType: "json",
@ -1072,7 +1083,7 @@
var md5 = self.getConnectPasswordHash(password); var md5 = self.getConnectPasswordHash(password);
AjaxApi.ajax({ HttpClient.send({
type: "POST", type: "POST",
url: "https://connect.mediabrowser.tv/service/user/authenticate", url: "https://connect.mediabrowser.tv/service/user/authenticate",
data: { data: {
@ -1106,6 +1117,70 @@
return deferred.promise(); return deferred.promise();
}; };
self.signupForConnect = function (email, username, password, passwordConfirm) {
var deferred = DeferredBuilder.Deferred();
if (!email) {
deferred.rejectWith(null, [{ errorCode: 'invalidinput' }]);
return deferred.promise();
}
if (!username) {
deferred.rejectWith(null, [{ errorCode: 'invalidinput' }]);
return deferred.promise();
}
if (!password) {
deferred.rejectWith(null, [{ errorCode: 'invalidinput' }]);
return deferred.promise();
}
if (!passwordConfirm) {
deferred.rejectWith(null, [{ errorCode: 'passwordmatch' }]);
return deferred.promise();
}
if (password != passwordConfirm) {
deferred.rejectWith(null, [{ errorCode: 'passwordmatch' }]);
return deferred.promise();
}
require(['connectservice'], function () {
var md5 = self.getConnectPasswordHash(password);
HttpClient.send({
type: "POST",
url: "https://connect.mediabrowser.tv/service/register",
data: {
email: email,
userName: username,
password: md5
},
dataType: "json",
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
headers: {
"X-Application": appName + "/" + appVersion,
"X-CONNECT-TOKEN": "CONNECT-REGISTER"
}
}).done(function (result) {
deferred.resolve(null, []);
}).fail(function (e) {
try {
var result = JSON.parse(e.responseText);
deferred.rejectWith(null, [{ errorCode: result.Status }]);
} catch (err) {
deferred.rejectWith(null, [{}]);
}
});
});
return deferred.promise();
};
self.getConnectPasswordHash = function (password) { self.getConnectPasswordHash = function (password) {
password = globalScope.MediaBrowser.ConnectService.cleanPassword(password); password = globalScope.MediaBrowser.ConnectService.cleanPassword(password);
@ -1143,7 +1218,7 @@
var url = "https://connect.mediabrowser.tv/service/servers?userId=" + self.connectUserId() + "&status=Waiting"; var url = "https://connect.mediabrowser.tv/service/servers?userId=" + self.connectUserId() + "&status=Waiting";
return AjaxApi.ajax({ return HttpClient.send({
type: "GET", type: "GET",
url: url, url: url,
dataType: "json", dataType: "json",
@ -1190,7 +1265,7 @@
var url = "https://connect.mediabrowser.tv/service/serverAuthorizations?serverId=" + serverId + "&userId=" + self.connectUserId(); var url = "https://connect.mediabrowser.tv/service/serverAuthorizations?serverId=" + serverId + "&userId=" + self.connectUserId();
return AjaxApi.ajax({ return HttpClient.send({
type: "DELETE", type: "DELETE",
url: url, url: url,
headers: { headers: {
@ -1225,7 +1300,7 @@
var url = "https://connect.mediabrowser.tv/service/serverAuthorizations?serverId=" + serverId + "&userId=" + self.connectUserId(); var url = "https://connect.mediabrowser.tv/service/serverAuthorizations?serverId=" + serverId + "&userId=" + self.connectUserId();
return AjaxApi.ajax({ return HttpClient.send({
type: "DELETE", type: "DELETE",
url: url, url: url,
headers: { headers: {
@ -1252,7 +1327,7 @@
var url = "https://connect.mediabrowser.tv/service/ServerAuthorizations/accept?serverId=" + serverId + "&userId=" + self.connectUserId(); var url = "https://connect.mediabrowser.tv/service/ServerAuthorizations/accept?serverId=" + serverId + "&userId=" + self.connectUserId();
return AjaxApi.ajax({ return HttpClient.send({
type: "GET", type: "GET",
url: url, url: url,
headers: { headers: {

View file

@ -4,11 +4,11 @@
globalScope.MediaBrowser = {}; globalScope.MediaBrowser = {};
} }
globalScope.MediaBrowser.CredentialProvider = function () { globalScope.MediaBrowser.CredentialProvider = function (key) {
var self = this; var self = this;
var credentials = null; var credentials = null;
var key = 'servercredentials3'; key = key || 'servercredentials3';
function ensure() { function ensure() {
@ -16,7 +16,7 @@
var json = appStorage.getItem(key) || '{}'; var json = appStorage.getItem(key) || '{}';
console.log('credentials initialized with: ' + json); Logger.log('credentials initialized with: ' + json);
credentials = JSON.parse(json); credentials = JSON.parse(json);
credentials.Servers = credentials.Servers || credentials.servers || []; credentials.Servers = credentials.Servers || credentials.servers || [];

View file

@ -0,0 +1,101 @@
(function (globalScope) {
globalScope.Events = {
on: function (obj, eventName, selector, fn) {
Logger.log('event.on ' + eventName);
jQuery(obj).on(eventName, selector, fn);
},
off: function (obj, eventName, selector, fn) {
Logger.log('event.off ' + eventName);
jQuery(obj).off(eventName, selector, fn);
},
trigger: function (obj, eventName, params) {
Logger.log('event.trigger ' + eventName);
jQuery(obj).trigger(eventName, params);
}
};
})(window);
//(function () {
// function useJqueryEvents(elems, eventName) {
// eventName = eventName.type || eventName;
// if (typeof eventName == 'string') {
// if (eventName.indexOf('page') == 0) {
// return true;
// }
// if (eventName.indexOf('loadercreate') == 0) {
// return true;
// }
// } else {
// return true;
// }
// //console.log('bean: ' + eventName);
// return false;
// }
// $.fn.jTrigger = $.fn.trigger;
// $.fn.jOn = $.fn.on;
// $.fn.jOff = $.fn.off;
// $.fn.off = function (eventName, selector, fn, ex1, ex2, ex3) {
// if (arguments.length > 3 || useJqueryEvents(this, eventName)) {
// this.jOff(eventName, selector, fn, ex1, ex2, ex3);
// return this;
// }
// for (var i = 0, length = this.length; i < length; i++) {
// bean.off(this[i], eventName, selector, fn);
// }
// return this;
// };
// $.fn.on = function (eventName, selector, fn, ex1, ex2, ex3) {
// if (arguments.length > 3 || useJqueryEvents(this, eventName)) {
// this.jOn(eventName, selector, fn, ex1, ex2, ex3);
// return this;
// }
// for (var i = 0, length = this.length; i < length; i++) {
// bean.on(this[i], eventName, selector, fn);
// }
// return this;
// };
// $.fn.trigger = function (eventName, params) {
// if (useJqueryEvents(this, eventName)) {
// this.jTrigger(eventName, params);
// return this;
// }
// var i, length;
// // Need to push an extra param to make the argument order consistent with jquery
// var newParams = [];
// newParams.push({});
// if (params && params.length) {
// for (i = 0, length = params.length; i < length; i++) {
// newParams.push(params[i]);
// }
// }
// for (i = 0, length = this.length; i < length; i++) {
// bean.fire(this[i], eventName, newParams);
// }
// return this;
// };
//})();

View file

@ -4,7 +4,7 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="appServicesPage" data-role="page" class="page type-interior appServicesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync"> <div id="appServicesPage" data-role="page" class="page type-interior appServicesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync" data-require="scripts/appservices">
<div data-role="content"> <div data-role="content">
<div class="content-primary"> <div class="content-primary">

View file

@ -4,7 +4,7 @@
<title>${TitleAutoOrganize}</title> <title>${TitleAutoOrganize}</title>
</head> </head>
<body> <body>
<div id="libraryFileOrganizerLogPage" data-role="page" class="page type-interior organizePage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="scripts/autoorganizelog,scripts/taskbutton"> <div id="libraryFileOrganizerLogPage" data-role="page" class="page type-interior organizePage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="scripts/autoorganizelog,scripts/taskbutton,paperbuttonstyle,detailtablecss">
<div data-role="content"> <div data-role="content">
<div class="content-primary"> <div class="content-primary">

View file

@ -169,12 +169,11 @@
<ul data-role="listview" class="ulForm"> <ul data-role="listview" class="ulForm">
<li> <li>
<button type="submit" data-theme="b" data-icon="check" data-mini="true"> <button type="submit" data-role="none" class="clearButton">
${ButtonSave} <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
</button>
<button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete" data-mini="true">
${ButtonCancel}
</button> </button>
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
</li> </li>
</ul> </ul>

View file

@ -0,0 +1,31 @@
{
"name": "font-roboto",
"version": "1.0.0",
"description": "An HTML import for Roboto",
"authors": [
"The Polymer Authors"
],
"keywords": [
"font",
"roboto"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/font-roboto.git"
},
"main": "roboto.html",
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/font-roboto/",
"ignore": [
"/.*"
],
"_release": "1.0.0",
"_resolution": {
"type": "version",
"tag": "1.0.0",
"commit": "b85b217e5f4b31f9c03b588e25c977b8104a40cd"
},
"_source": "git://github.com/PolymerElements/font-roboto.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/font-roboto"
}

View file

@ -0,0 +1,22 @@
{
"name": "font-roboto",
"version": "1.0.0",
"description": "An HTML import for Roboto",
"authors": [
"The Polymer Authors"
],
"keywords": [
"font",
"roboto"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/font-roboto.git"
},
"main": "roboto.html",
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/font-roboto/",
"ignore": [
"/.*"
]
}

View file

@ -0,0 +1,10 @@
<!--
@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="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">-->

View file

@ -0,0 +1,42 @@
{
"name": "iron-a11y-announcer",
"version": "1.0.1",
"description": "A singleton element that simplifies announcing text to screen readers.",
"keywords": [
"web-components",
"polymer",
"a11y",
"live"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-announcer.git"
},
"main": "iron-a11y-announcer.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"paper-button": "polymerelements/paper-button#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*"
},
"homepage": "https://github.com/polymerelements/iron-a11y-announcer",
"_release": "1.0.1",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "699697fe8935400ab11e3e33cd6a5a54d762300e"
},
"_source": "git://github.com/polymerelements/iron-a11y-announcer.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-a11y-announcer"
}

View file

@ -0,0 +1 @@
bower_components

View file

@ -0,0 +1,32 @@
{
"name": "iron-a11y-announcer",
"version": "1.0.1",
"description": "A singleton element that simplifies announcing text to screen readers.",
"keywords": [
"web-components",
"polymer",
"a11y",
"live"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-announcer.git"
},
"main": "iron-a11y-announcer.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"paper-button": "polymerelements/paper-button#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*"
}
}

View file

@ -0,0 +1,40 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<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>iron-a11y-announcer demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="x-announces.html">
</head>
<body>
<div class="horizontal center-justified layout">
<div>
<div class="vertical-section">
<span>Note: in order to hear the announcements, be sure to turn on your favorite screen reader!</span>
<x-announces>Hello, my name is Ava.</x-announces>
<x-announces>This true sentence is false.</x-announces>
<x-announces>Are you paying attention?</x-announces>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,50 @@
<!--
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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../iron-a11y-announcer.html">
<dom-module id="x-announces">
<style>
:host {
display: block;
position: relative;
padding: 1em 0;
}
paper-button {
background: #4285f4;
color: #fff;
}
</style>
<template>
<paper-button on-tap="_onTapAnnounce" raised>Announce</paper-button>
<span id="content" aria-hidden="true">
<content></content>
</span>
</template>
<script>
Polymer({
is: 'x-announces',
attached: function() {
Polymer.IronA11yAnnouncer.requestAvailability();
},
_onTapAnnounce: function() {
this.fire('iron-announce', {
text: this.$.content.textContent.trim()
}, {
bubbles: true
});
}
});
</script>
</dom-module>

View file

@ -0,0 +1,28 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-a11y-announcer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -0,0 +1,125 @@
<!--
@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">
<!--
`iron-a11y-announcer` is a singleton element that is intended to add a11y
to features that require on-demand announcement from screen readers. In
order to make use of the announcer, it is best to request its availability
in the announcing element.
Example:
Polymer({
is: 'x-chatty',
attached: function() {
// This will create the singlton element if it has not
// been created yet:
Polymer.IronA11yAnnouncer.requestAvailability();
}
});
After the `iron-a11y-announcer` has been made available, elements can
make announces by firing bubbling `iron-announce` events.
Example:
this.fire('iron-announce', {
text: 'This is an announcement!'
}, { bubbles: true });
Note: announcements are only audible if you have a screen reader enabled.
@group Iron Elements
@demo demo/index.html
-->
<dom-module id="iron-a11y-announcer">
<style>
:host {
display: inline-block;
position: fixed;
clip: rect(0px,0px,0px,0px);
}
</style>
<template>
<span aria-live$="[[mode]]">[[_text]]</span>
</template>
<script>
(function() {
'use strict';
Polymer.IronA11yAnnouncer = Polymer({
is: 'iron-a11y-announcer',
properties: {
/**
* The value of mode is used to set the `aria-live` attribute
* for the element that will be announced. Valid values are: `off`,
* `polite` and `assertive`.
*/
mode: {
type: String,
value: 'polite'
},
_text: {
type: String,
value: ''
}
},
created: function() {
if (!Polymer.IronA11yAnnouncer.instance) {
Polymer.IronA11yAnnouncer.instance = this;
}
document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
},
/**
* Cause a text string to be announced by screen readers.
*
* @param {string} text The text that should be announced.
*/
announce: function(text) {
this._text = '';
this.async(function() {
this._text = text;
}, 100);
},
_onIronAnnounce: function(event) {
if (event.detail && event.detail.text) {
this.announce(event.detail.text);
}
}
});
Polymer.IronA11yAnnouncer.instance = null;
Polymer.IronA11yAnnouncer.requestAvailability = function() {
if (!Polymer.IronA11yAnnouncer.instance) {
document.createElement('iron-a11y-announcer');
}
document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
};
})();
</script>
</dom-module>

View file

@ -0,0 +1,26 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<title>iron-a11y-announcer tests</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-a11y-announcer.html'
]);
</script>
</body>
</html>

View file

@ -0,0 +1,59 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-a11y-announcer</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-a11y-announcer.html">
</head>
<body>
<test-fixture id="Announcer">
<template>
<iron-a11y-announcer></iron-a11y-announcer>
</template>
</test-fixture>
<script>
suite('<iron-a11y-announcer>', function() {
var announcer;
setup(function() {
announcer = fixture('Announcer');
});
test('announces when there is an iron-announce event', function() {
var event = new CustomEvent('iron-announce', {
bubbles: true,
detail: {
text: 'foo'
}
});
sinon.spy(announcer, 'announce');
document.body.dispatchEvent(event);
expect(announcer.announce.callCount).to.be.equal(1);
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,42 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.0.5",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
"web-component",
"polymer",
"a11y",
"input"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "cf833eab5c55a26c5aa92e56d3fcb079120ce66a"
},
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
}

View file

@ -0,0 +1 @@
bower_components

View file

@ -0,0 +1,32 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.0.5",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
"web-component",
"polymer",
"a11y",
"input"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -0,0 +1,24 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<title>Iron A11y Keys Behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="x-key-aware.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<x-key-aware></x-key-aware>
</div>
</body>
</html>

View file

@ -0,0 +1,91 @@
<!--
@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="../../paper-styles/paper-styles.html">
<link rel="import" href="../iron-a11y-keys-behavior.html">
<dom-module id="x-key-aware">
<style>
:host {
display: block;
position: relative;
}
pre {
color: var(--google-blue-700);
}
.keys {
line-height: 25px;
}
.keys span {
cursor: default;
background-color: var(--google-grey-100);
border: 1px solid var(--google-grey-300);
padding: 1px 5px;
border-radius: 5px;
}
</style>
<template>
<h4>Press any of these keys</h4>
<p class="keys">
<template is="dom-repeat" items="[[boundKeys]]">
<span>{{item}}</span>
</template>
</p>
<pre>[[pressed]]</pre>
</template>
</dom-module>
<script>
Polymer({
is: 'x-key-aware',
behaviors: [
Polymer.IronA11yKeysBehavior
],
properties: {
pressed: {
type: String,
readOnly: true,
value: ''
},
boundKeys: {
type: Array,
value: function() {
return Object.keys(this.keyBindings).join(' ').split(' ');
}
},
keyEventTarget: {
type: Object,
value: function() {
return document.body;
}
}
},
keyBindings: {
'* pageup pagedown left right down up shift+a alt+a home end space enter': '_updatePressed'
},
_updatePressed: function(event) {
console.log(event.detail);
this._setPressed(
this.pressed + event.detail.combo + ' pressed!\n'
);
}
});
</script>

View file

@ -0,0 +1,24 @@
<!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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<title>iron-a11y-keys-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -0,0 +1,421 @@
<!--
@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">
<script>
(function() {
'use strict';
/**
* Chrome uses an older version of DOM Level 3 Keyboard Events
*
* Most keys are labeled as text, but some are Unicode codepoints.
* Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
*/
var KEY_IDENTIFIER = {
'U+0009': 'tab',
'U+001B': 'esc',
'U+0020': 'space',
'U+002A': '*',
'U+0030': '0',
'U+0031': '1',
'U+0032': '2',
'U+0033': '3',
'U+0034': '4',
'U+0035': '5',
'U+0036': '6',
'U+0037': '7',
'U+0038': '8',
'U+0039': '9',
'U+0041': 'a',
'U+0042': 'b',
'U+0043': 'c',
'U+0044': 'd',
'U+0045': 'e',
'U+0046': 'f',
'U+0047': 'g',
'U+0048': 'h',
'U+0049': 'i',
'U+004A': 'j',
'U+004B': 'k',
'U+004C': 'l',
'U+004D': 'm',
'U+004E': 'n',
'U+004F': 'o',
'U+0050': 'p',
'U+0051': 'q',
'U+0052': 'r',
'U+0053': 's',
'U+0054': 't',
'U+0055': 'u',
'U+0056': 'v',
'U+0057': 'w',
'U+0058': 'x',
'U+0059': 'y',
'U+005A': 'z',
'U+007F': 'del'
};
/**
* Special table for KeyboardEvent.keyCode.
* KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even better
* than that.
*
* Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
*/
var KEY_CODE = {
9: 'tab',
13: 'enter',
27: 'esc',
33: 'pageup',
34: 'pagedown',
35: 'end',
36: 'home',
32: 'space',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
46: 'del',
106: '*'
};
/**
* MODIFIER_KEYS maps the short name for modifier keys used in a key
* combo string to the property name that references those same keys
* in a KeyboardEvent instance.
*/
var MODIFIER_KEYS = {
'shift': 'shiftKey',
'ctrl': 'ctrlKey',
'alt': 'altKey',
'meta': 'metaKey'
};
/**
* KeyboardEvent.key is mostly represented by printable character made by
* the keyboard, with unprintable keys labeled nicely.
*
* However, on OS X, Alt+char can make a Unicode character that follows an
* Apple-specific mapping. In this case, we
* fall back to .keyCode.
*/
var KEY_CHAR = /[a-z0-9*]/;
/**
* Matches a keyIdentifier string.
*/
var IDENT_CHAR = /U\+/;
/**
* Matches arrow keys in Gecko 27.0+
*/
var ARROW_KEY = /^arrow/;
/**
* Matches space keys everywhere (notably including IE10's exceptional name
* `spacebar`).
*/
var SPACE_KEY = /^space(bar)?/;
function transformKey(key) {
var validKey = '';
if (key) {
var lKey = key.toLowerCase();
if (lKey.length == 1) {
if (KEY_CHAR.test(lKey)) {
validKey = lKey;
}
} else if (ARROW_KEY.test(lKey)) {
validKey = lKey.replace('arrow', '');
} else if (SPACE_KEY.test(lKey)) {
validKey = 'space';
} else if (lKey == 'multiply') {
// numpad '*' can map to Multiply on IE/Windows
validKey = '*';
} else {
validKey = lKey;
}
}
return validKey;
}
function transformKeyIdentifier(keyIdent) {
var validKey = '';
if (keyIdent) {
if (IDENT_CHAR.test(keyIdent)) {
validKey = KEY_IDENTIFIER[keyIdent];
} else {
validKey = keyIdent.toLowerCase();
}
}
return validKey;
}
function transformKeyCode(keyCode) {
var validKey = '';
if (Number(keyCode)) {
if (keyCode >= 65 && keyCode <= 90) {
// ascii a-z
// lowercase is 32 offset from uppercase
validKey = String.fromCharCode(32 + keyCode);
} else if (keyCode >= 112 && keyCode <= 123) {
// function keys f1-f12
validKey = 'f' + (keyCode - 112);
} else if (keyCode >= 48 && keyCode <= 57) {
// top 0-9 keys
validKey = String(48 - keyCode);
} else if (keyCode >= 96 && keyCode <= 105) {
// num pad 0-9
validKey = String(96 - keyCode);
} else {
validKey = KEY_CODE[keyCode];
}
}
return validKey;
}
function normalizedKeyForEvent(keyEvent) {
// fall back from .key, to .keyIdentifier, to .keyCode, and then to
// .detail.key to support artificial keyboard events
return transformKey(keyEvent.key) ||
transformKeyIdentifier(keyEvent.keyIdentifier) ||
transformKeyCode(keyEvent.keyCode) ||
transformKey(keyEvent.detail.key) || '';
}
function keyComboMatchesEvent(keyCombo, keyEvent) {
return normalizedKeyForEvent(keyEvent) === keyCombo.key &&
!!keyEvent.shiftKey === !!keyCombo.shiftKey &&
!!keyEvent.ctrlKey === !!keyCombo.ctrlKey &&
!!keyEvent.altKey === !!keyCombo.altKey &&
!!keyEvent.metaKey === !!keyCombo.metaKey;
}
function parseKeyComboString(keyComboString) {
return keyComboString.split('+').reduce(function(parsedKeyCombo, keyComboPart) {
var eventParts = keyComboPart.split(':');
var keyName = eventParts[0];
var event = eventParts[1];
if (keyName in MODIFIER_KEYS) {
parsedKeyCombo[MODIFIER_KEYS[keyName]] = true;
} else {
parsedKeyCombo.key = keyName;
parsedKeyCombo.event = event || 'keydown';
}
return parsedKeyCombo;
}, {
combo: keyComboString.split(':').shift()
});
}
function parseEventString(eventString) {
return eventString.split(' ').map(function(keyComboString) {
return parseKeyComboString(keyComboString);
});
}
/**
* `Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
* keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
* The element takes care of browser differences with respect to Keyboard events
* and uses an expressive syntax to filter key presses.
*
* Use the `keyBindings` prototype property to express what combination of keys
* will trigger the event to fire.
*
* Use the `key-event-target` attribute to set up event handlers on a specific
* node.
* The `keys-pressed` event will fire when one of the key combinations set with the
* `keys` property is pressed.
*
* @demo demo/index.html
* @polymerBehavior IronA11yKeysBehavior
*/
Polymer.IronA11yKeysBehavior = {
properties: {
/**
* The HTMLElement that will be firing relevant KeyboardEvents.
*/
keyEventTarget: {
type: Object,
value: function() {
return this;
}
},
_boundKeyHandlers: {
type: Array,
value: function() {
return [];
}
},
// We use this due to a limitation in IE10 where instances will have
// own properties of everything on the "prototype".
_imperativeKeyBindings: {
type: Object,
value: function() {
return {};
}
}
},
observers: [
'_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)'
],
keyBindings: {},
registered: function() {
this._prepKeyBindings();
},
attached: function() {
this._listenKeyEventListeners();
},
detached: function() {
this._unlistenKeyEventListeners();
},
/**
* Can be used to imperatively add a key binding to the implementing
* element. This is the imperative equivalent of declaring a keybinding
* in the `keyBindings` prototype property.
*/
addOwnKeyBinding: function(eventString, handlerName) {
this._imperativeKeyBindings[eventString] = handlerName;
this._prepKeyBindings();
this._resetKeyEventListeners();
},
/**
* When called, will remove all imperatively-added key bindings.
*/
removeOwnKeyBindings: function() {
this._imperativeKeyBindings = {};
this._prepKeyBindings();
this._resetKeyEventListeners();
},
keyboardEventMatchesKeys: function(event, eventString) {
var keyCombos = parseEventString(eventString);
var index;
for (index = 0; index < keyCombos.length; ++index) {
if (keyComboMatchesEvent(keyCombos[index], event)) {
return true;
}
}
return false;
},
_collectKeyBindings: function() {
var keyBindings = this.behaviors.map(function(behavior) {
return behavior.keyBindings;
});
if (keyBindings.indexOf(this.keyBindings) === -1) {
keyBindings.push(this.keyBindings);
}
return keyBindings;
},
_prepKeyBindings: function() {
this._keyBindings = {};
this._collectKeyBindings().forEach(function(keyBindings) {
for (var eventString in keyBindings) {
this._addKeyBinding(eventString, keyBindings[eventString]);
}
}, this);
for (var eventString in this._imperativeKeyBindings) {
this._addKeyBinding(eventString, this._imperativeKeyBindings[eventString]);
}
},
_addKeyBinding: function(eventString, handlerName) {
parseEventString(eventString).forEach(function(keyCombo) {
this._keyBindings[keyCombo.event] =
this._keyBindings[keyCombo.event] || [];
this._keyBindings[keyCombo.event].push([
keyCombo,
handlerName
]);
}, this);
},
_resetKeyEventListeners: function() {
this._unlistenKeyEventListeners();
if (this.isAttached) {
this._listenKeyEventListeners();
}
},
_listenKeyEventListeners: function() {
Object.keys(this._keyBindings).forEach(function(eventName) {
var keyBindings = this._keyBindings[eventName];
var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings);
this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyHandler]);
this.keyEventTarget.addEventListener(eventName, boundKeyHandler);
}, this);
},
_unlistenKeyEventListeners: function() {
var keyHandlerTuple;
var keyEventTarget;
var eventName;
var boundKeyHandler;
while (this._boundKeyHandlers.length) {
// My kingdom for block-scope binding and destructuring assignment..
keyHandlerTuple = this._boundKeyHandlers.pop();
keyEventTarget = keyHandlerTuple[0];
eventName = keyHandlerTuple[1];
boundKeyHandler = keyHandlerTuple[2];
keyEventTarget.removeEventListener(eventName, boundKeyHandler);
}
},
_onKeyBindingEvent: function(keyBindings, event) {
keyBindings.forEach(function(keyBinding) {
var keyCombo = keyBinding[0];
var handlerName = keyBinding[1];
if (!event.defaultPrevented && keyComboMatchesEvent(keyCombo, event)) {
this._triggerKeyHandler(keyCombo, handlerName, event);
}
}, this);
},
_triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) {
var detail = Object.create(keyCombo);
detail.keyboardEvent = keyboardEvent;
this[handlerName].call(this, new CustomEvent(keyCombo.event, {
detail: detail
}));
}
};
})();
</script>

View file

@ -0,0 +1,248 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-a11y-keys</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-a11y-keys-behavior.html">
</head>
<body>
<test-fixture id="BasicKeys">
<template>
<x-a11y-basic-keys></x-a11y-basic-keys>
</template>
</test-fixture>
<test-fixture id="ComboKeys">
<template>
<x-a11y-combo-keys></x-a11y-combo-keys>
</template>
</test-fixture>
<test-fixture id="AlternativeEventKeys">
<template>
<x-a11y-alternate-event-keys></x-a11y-alternate-event-keys>
</template>
</test-fixture>
<test-fixture id="BehaviorKeys">
<template>
<x-a11y-behavior-keys></x-a11y-behavior-keys>
</template>
</test-fixture>
<script>
suite('Polymer.IronA11yKeysBehavior', function() {
var keys;
suiteSetup(function() {
var KeysTestBehavior = [Polymer.IronA11yKeysBehavior, {
properties: {
keyCount: {
type: Number,
value: 0
}
},
_keyHandler: function(event) {
this.keyCount++;
this.lastEvent = event;
}
}];
Polymer({
is: 'x-a11y-basic-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'space': '_keyHandler'
}
});
Polymer({
is: 'x-a11y-combo-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'ctrl+shift+a': '_keyHandler'
}
});
Polymer({
is: 'x-a11y-alternate-event-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'space:keyup': '_keyHandler'
}
});
var XA11yBehavior = {
keyBindings: {
'enter': '_keyHandler'
}
};
Polymer({
is: 'x-a11y-behavior-keys',
behaviors: [
KeysTestBehavior,
XA11yBehavior
],
keyBindings: {
'space': '_keyHandler'
}
});
});
suite('basic keys', function() {
setup(function() {
keys = fixture('BasicKeys');
});
test('trigger the handler when the specified key is pressed', function() {
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(1);
});
test('do not trigger the handler for non-specified keys', function() {
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(0);
});
test('can have bindings added imperatively', function() {
keys.addOwnKeyBinding('enter', '_keyHandler');
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(1);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(2);
});
test('can remove imperatively added bindings', function() {
keys.addOwnKeyBinding('enter', '_keyHandler');
keys.removeOwnKeyBindings();
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(0);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(1);
});
suite('edge cases', function() {
test('knows that `spacebar` is the same as `space`', function() {
var event = new CustomEvent('keydown');
event.key = 'spacebar';
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
});
});
suite('matching keyboard events to keys', function() {
test('can be done imperatively', function() {
var event = new CustomEvent('keydown');
event.keyCode = 65;
expect(keys.keyboardEventMatchesKeys(event, 'a')).to.be.equal(true);
});
test('can be done with a provided keyboardEvent', function() {
var event;
MockInteractions.pressSpace(keys);
event = keys.lastEvent;
expect(event.detail.keyboardEvent).to.be.okay;
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
});
test('can handle variations in arrow key names', function() {
var event = new CustomEvent('keydown');
event.key = 'up';
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
event.key = 'ArrowUp';
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
});
});
});
suite('combo keys', function() {
setup(function() {
keys = fixture('ComboKeys');
});
test('trigger the handler when the combo is pressed', function() {
var event = new CustomEvent('keydown');
event.ctrlKey = true;
event.shiftKey = true;
event.keyCode = event.code = 65;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
});
});
suite('alternative event keys', function() {
setup(function() {
keys = fixture('AlternativeEventKeys');
});
test('trigger on the specified alternative keyboard event', function() {
MockInteractions.keyDownOn(keys, 32);
expect(keys.keyCount).to.be.equal(0);
MockInteractions.keyUpOn(keys, 32);
expect(keys.keyCount).to.be.equal(1);
});
});
suite('behavior keys', function() {
setup(function() {
keys = fixture('BehaviorKeys');
});
test('bindings in other behaviors are transitive', function() {
MockInteractions.pressEnter(keys);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(2);
});
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!--
@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
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
-->
<!doctype html>
<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>Tests</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
// Load and run all tests (.html, .js) as one suite:
WCT.loadSuites([
'basic-test.html',
]);
</script>
</body>
</html>

View file

@ -0,0 +1,48 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.2",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input",
"textarea"
],
"main": [
"iron-autogrow-textarea.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-autogrow-textarea.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-autogrow-textarea",
"ignore": [],
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "1697690de3010aa7b4d3557e7f3fa582e82dee6a"
},
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-autogrow-textarea"
}

View file

@ -0,0 +1 @@
bower_components

View file

@ -0,0 +1,39 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.2",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"input",
"textarea"
],
"main": [
"iron-autogrow-textarea.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-autogrow-textarea.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-autogrow-textarea",
"ignore": [],
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -0,0 +1,81 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<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>iron-autogrow-textarea demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-autogrow-textarea.html">
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
</head>
<style>
iron-autogrow-textarea {
width: 200px;
}
</style>
<body>
<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>
<code>bind-value</code>: <span>[[bindValue]]</span>
<p on-click="setValue">
set <code>bind-value</code> to: <br>
<textarea></textarea>
<button value="bindValue">set</button>
<br><br>
set <code>textarea.value</code> to: <br>
<textarea></textarea>
<button value="value">set</button>
</p>
</div>
</template>
<h4>Custom</h4>
<div class="vertical-section">
<p>Scrolls after 4 rows:</p>
<iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
<p>Initial height of 4 rows</p>
<iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
</div>
</div>
<script>
var scope = document.querySelector('template[is=dom-bind]');
scope.setValue = function(event) {
if (!(event.target instanceof HTMLButtonElement)) {
return;
}
var inputValue = event.target.previousElementSibling.value;
if (event.target.value == "bindValue") {
document.querySelector('iron-autogrow-textarea').bindValue = inputValue;
} else {
document.querySelector('iron-autogrow-textarea').textarea.value = inputValue;
}
}
</script>
</body>
</html>

View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<path d="M140,47c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
c1.3,1.9,2.5,3.6,4.5,3.6V47z"/>
<path d="M140,65c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
c1.3,1.9,2.5,3.6,4.5,3.6V65z"/>
<path d="M140,83c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
c1.3,1.9,2.5,3.6,4.5,3.6V83z"/>
<g id="ic_x5F_add_x0D_">
</g>
<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-autogrow-textarea</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -0,0 +1,266 @@
<!--
@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="../iron-behaviors/iron-control-state.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<!--
`iron-autogrow-textarea` is an element containing a textarea that grows in height as more
lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
never scroll.
Example:
<iron-autogrow-textarea id="a1">
<textarea id="t1"></textarea>
</iron-autogrow-textarea>
Because the `textarea`'s `value` property is not observable, you should use
this element's `bind-value` instead for imperative updates.
@group Iron Elements
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="iron-autogrow-textarea">
<style>
:host {
display: inline-block;
position: relative;
width: 400px;
border: 1px solid;
padding: 2px;
-moz-appearance: textarea;
-webkit-appearance: textarea;
}
.mirror-text {
visibility: hidden;
word-wrap: break-word;
}
textarea {
position: relative;
outline: none;
border: none;
resize: none;
background: inherit;
/* see comments in template */
width: 100%;
height: 100%;
font-size: inherit;
font-family: inherit;
}
::content textarea:invalid {
box-shadow: none;
}
</style>
<template>
<!-- the mirror sizes the input/textarea so it grows with typing -->
<div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
<!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
<div class="textarea-container fit">
<textarea id="textarea"
autocomplete$="[[autocomplete]]"
autofocus$="[[autofocus]]"
inputmode$="[[inputmode]]"
name$="[[name]]"
placeholder$="[[placeholder]]"
readonly$="[[readonly]]"
required$="[[required]]"
rows$="[[rows]]"
maxlength$="[[maxlength]]"></textarea>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'iron-autogrow-textarea',
behaviors: [
Polymer.IronValidatableBehavior,
Polymer.IronControlState
],
properties: {
/**
* Use this property instead of `value` for two-way data binding.
*/
bindValue: {
observer: '_bindValueChanged',
type: String
},
/**
* The initial number of rows.
*
* @attribute rows
* @type number
* @default 1
*/
rows: {
type: Number,
value: 1,
observer: '_updateCached'
},
/**
* The maximum number of rows this element can grow to until it
* scrolls. 0 means no maximum.
*
* @attribute maxRows
* @type number
* @default 0
*/
maxRows: {
type: Number,
value: 0,
observer: '_updateCached'
},
/**
* Bound to the textarea's `autocomplete` attribute.
*/
autocomplete: {
type: String,
value: 'off'
},
/**
* Bound to the textarea's `autofocus` attribute.
*/
autofocus: {
type: String,
value: 'off'
},
/**
* Bound to the textarea's `inputmode` attribute.
*/
inputmode: {
type: String
},
/**
* Bound to the textarea's `name` attribute.
*/
name: {
type: String
},
/**
* Bound to the textarea's `placeholder` attribute.
*/
placeholder: {
type: String
},
/**
* Bound to the textarea's `readonly` attribute.
*/
readonly: {
type: String
},
/**
* Set to true to mark the textarea as required.
*/
required: {
type: Boolean
},
/**
* The maximum length of the input value.
*/
maxlength: {
type: Number
}
},
listeners: {
'input': '_onInput'
},
/**
* Returns the underlying textarea.
*/
get textarea() {
return this.$.textarea;
},
_update: function() {
this.$.mirror.innerHTML = this._valueForMirror();
var textarea = this.textarea;
// If the value of the textarea was updated imperatively, then we
// need to manually update bindValue as well.
if (textarea && this.bindValue != textarea.value) {
this.bindValue = textarea.value;
}
},
_bindValueChanged: function() {
var textarea = this.textarea;
if (!textarea) {
return;
}
textarea.value = this.bindValue;
this._update();
// manually notify because we don't want to notify until after setting value
this.fire('bind-value-changed', {value: this.bindValue});
},
_onInput: function(event) {
this.bindValue = event.path ? event.path[0].value : event.target.value;
this._update();
},
_constrain: function(tokens) {
var _tokens;
tokens = tokens || [''];
// Enforce the min and max heights for a multiline input to avoid measurement
if (this.maxRows > 0 && tokens.length > this.maxRows) {
_tokens = tokens.slice(0, this.maxRows);
} else {
_tokens = tokens.slice(0);
}
while (this.rows > 0 && _tokens.length < this.rows) {
_tokens.push('');
}
return _tokens.join('<br>') + '&nbsp;';
},
_valueForMirror: function() {
var input = this.textarea;
if (!input) {
return;
}
this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
return this._constrain(this.tokens);
},
_updateCached: function() {
this.$.mirror.innerHTML = this._constrain(this.tokens);
}
})
</script>

View file

@ -0,0 +1,126 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-autogrow-textarea 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-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-autogrow-textarea.html">
</head>
<body>
<test-fixture id="basic">
<template>
<iron-autogrow-textarea></iron-autogrow-textarea>
</template>
</test-fixture>
<test-fixture id="has-bindValue">
<template>
<iron-autogrow-textarea bind-value="foobar"></iron-autogrow-textarea>
</template>
</test-fixture>
<test-fixture id="rows">
<template>
<iron-autogrow-textarea rows="3"></iron-autogrow-textarea>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('setting bindValue sets textarea value', function() {
var autogrow = fixture('basic');
var textarea = autogrow.textarea;
autogrow.bindValue = 'batman';
assert.equal(textarea.value, autogrow.bindValue, 'textarea value equals to bindValue');
});
test('can set an initial bindValue', function() {
var autogrow = fixture('has-bindValue');
assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
});
test('can set an initial number of rows', function() {
var autogrow = fixture("rows");
assert.equal(autogrow.textarea.rows, 3, 'textarea has rows=3');
});
test('adding rows grows the textarea', function() {
var autogrow = fixture('basic');
var initialHeight = autogrow.offsetHeight;
autogrow.bindValue = 'batman\nand\nrobin';
var finalHeight = autogrow.offsetHeight
assert.isTrue(finalHeight > initialHeight);
});
test('removing rows shrinks the textarea', function() {
var autogrow = fixture('basic');
autogrow.bindValue = 'batman\nand\nrobin';
var initialHeight = autogrow.offsetHeight;
autogrow.bindValue = 'batman';
var finalHeight = autogrow.offsetHeight
assert.isTrue(finalHeight < initialHeight);
});
});
suite('focus/blur events', function() {
var input;
setup(function() {
input = fixture('basic');
});
test('focus/blur events fired on host element', function(done) {
var nFocusEvents = 0;
var nBlurEvents = 0;
input.addEventListener('focus', function() {
nFocusEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nFocusEvents, 1, 'one focus event fired');
MockInteractions.blur(input.textarea);
});
});
input.addEventListener('blur', function() {
nBlurEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nBlurEvents, 1, 'one blur event fired');
done();
});
});
MockInteractions.focus(input.textarea);
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!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
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-autogrow-textarea tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
]);
</script>
</body>
</html>

View file

@ -0,0 +1,40 @@
{
"name": "iron-behaviors",
"version": "1.0.4",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-behaviors.git"
},
"main": [
"iron-button-state.html",
"iron-control-state.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"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": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "8792edd457de697a74f398c09b67df30adf7d866"
},
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-behaviors"
}

View file

@ -0,0 +1 @@
bower_components

View file

@ -0,0 +1,30 @@
{
"name": "iron-behaviors",
"version": "1.0.4",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-behaviors.git"
},
"main": [
"iron-button-state.html",
"iron-control-state.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"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": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -0,0 +1,47 @@
<!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>
<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-button</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link href="../../paper-styles/demo-pages.html" rel="import">
<link href="simple-button.html" rel="import">
<style>
.vertical-section {
text-align: center;
}
</style>
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<h3>Normal</h3>
<simple-button tabindex="0">Hello World</simple-button>
<h3>Toggles</h3>
<simple-button toggles tabindex="0">Hello World</simple-button>
<h3>Disabled</h3>
<simple-button disabled tabindex="0">Hello World</simple-button>
</div>
</body>
</html>

View file

@ -0,0 +1,70 @@
<!--
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="../iron-button-state.html">
<link rel="import" href="../iron-control-state.html">
<dom-module id="simple-button">
<style>
:host {
display: inline-block;
background-color: #4285F4;
color: #fff;
min-height: 8px;
min-width: 8px;
padding: 16px;
text-transform: uppercase;
border-radius: 3px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
:host([disabled]) {
opacity: 0.3;
pointer-events: none;
}
:host([active]),
:host([pressed]) {
background-color: #3367D6;
box-shadow: inset 0 3px 5px rgba(0,0,0,.2);
}
</style>
<template>
<content></content>
</template>
<script>
Polymer({
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
],
hostAttributes: {
role: 'button'
}
});
</script>
</dom-module>

View file

@ -0,0 +1,27 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>Iron Behaviors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="iron-button-state.html"></iron-component-page>
</body>
</html>

View file

@ -0,0 +1,186 @@
<!--
@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="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="iron-control-state.html">
<script>
/**
* @demo demo/index.html
* @polymerBehavior Polymer.IronButtonState
*/
Polymer.IronButtonStateImpl = {
properties: {
/**
* If true, the user is currently holding down the button.
*/
pressed: {
type: Boolean,
readOnly: true,
value: false,
reflectToAttribute: true,
observer: '_pressedChanged'
},
/**
* If true, the button toggles the active state with each tap or press
* of the spacebar.
*/
toggles: {
type: Boolean,
value: false,
reflectToAttribute: true
},
/**
* If true, the button is a toggle and is currently in the active state.
*/
active: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true,
observer: '_activeChanged'
},
/**
* True if the element is currently being pressed by a "pointer," which
* is loosely defined as mouse or touch input (but specifically excluding
* keyboard input).
*/
pointerDown: {
type: Boolean,
readOnly: true,
value: false
},
/**
* True if the input device that caused the element to receive focus
* was a keyboard.
*/
receivedFocusFromKeyboard: {
type: Boolean,
readOnly: true
}
},
listeners: {
down: '_downHandler',
up: '_upHandler',
tap: '_tapHandler'
},
observers: [
'_detectKeyboardFocus(focused)'
],
keyBindings: {
'enter:keydown': '_asyncClick',
'space:keydown': '_spaceKeyDownHandler',
'space:keyup': '_spaceKeyUpHandler',
},
_tapHandler: function() {
if (this.toggles) {
// a tap is needed to toggle the active state
this._userActivate(!this.active);
} else {
this.active = false;
}
},
_detectKeyboardFocus: function(focused) {
this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
},
// to emulate native checkbox, (de-)activations from a user interaction fire
// 'change' events
_userActivate: function(active) {
this.active = active;
this.fire('change');
},
_downHandler: function() {
this._setPointerDown(true);
this._setPressed(true);
this._setReceivedFocusFromKeyboard(false);
},
_upHandler: function() {
this._setPointerDown(false);
this._setPressed(false);
},
_spaceKeyDownHandler: function(event) {
var keyboardEvent = event.detail.keyboardEvent;
keyboardEvent.preventDefault();
keyboardEvent.stopImmediatePropagation();
this._setPressed(true);
},
_spaceKeyUpHandler: function() {
if (this.pressed) {
this._asyncClick();
}
this._setPressed(false);
},
// trigger click asynchronously, the asynchrony is useful to allow one
// event handler to unwind before triggering another event
_asyncClick: function() {
this.async(function() {
this.click();
}, 1);
},
// any of these changes are considered a change to button state
_pressedChanged: function(pressed) {
this._changedButtonState();
},
_activeChanged: function(active) {
if (this.toggles) {
this.setAttribute('aria-pressed', active ? 'true' : 'false');
} else {
this.removeAttribute('aria-pressed');
}
this._changedButtonState();
},
_controlStateChanged: function() {
if (this.disabled) {
this._setPressed(false);
} else {
this._changedButtonState();
}
},
// provide hook for follow-on behaviors to react to button-state
_changedButtonState: function() {
if (this._buttonStateChanged) {
this._buttonStateChanged(); // abstract
}
}
};
/** @polymerBehavior */
Polymer.IronButtonState = [
Polymer.IronA11yKeysBehavior,
Polymer.IronButtonStateImpl
];
</script>

View file

@ -0,0 +1,108 @@
<!--
@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">
<script>
/**
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronControlState = {
properties: {
/**
* If true, the element currently has focus.
*/
focused: {
type: Boolean,
value: false,
notify: true,
readOnly: true,
reflectToAttribute: true
},
/**
* If true, the user cannot interact with this element.
*/
disabled: {
type: Boolean,
value: false,
notify: true,
observer: '_disabledChanged',
reflectToAttribute: true
},
_oldTabIndex: {
type: Number
},
_boundFocusBlurHandler: {
type: Function,
value: function() {
return this._focusBlurHandler.bind(this);
}
}
},
observers: [
'_changedControlState(focused, disabled)'
],
ready: function() {
// TODO(sjmiles): ensure read-only property is valued so the compound
// observer will fire
if (this.focused === undefined) {
this._setFocused(false);
}
this.addEventListener('focus', this._boundFocusBlurHandler, true);
this.addEventListener('blur', this._boundFocusBlurHandler, true);
},
_focusBlurHandler: function(event) {
var target = event.path ? event.path[0] : event.target;
if (target === this) {
var focused = event.type === 'focus';
this._setFocused(focused);
} else if (!this.shadowRoot) {
event.stopPropagation();
this.fire(event.type, {sourceEvent: event}, {
node: this,
bubbles: event.bubbles,
cancelable: event.cancelable
});
}
},
_disabledChanged: function(disabled, old) {
this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
this.style.pointerEvents = disabled ? 'none' : '';
if (disabled) {
this._oldTabIndex = this.tabIndex;
this.focused = false;
this.tabIndex = -1;
} else if (this._oldTabIndex !== undefined) {
this.tabIndex = this._oldTabIndex;
}
},
_changedControlState: function() {
// _controlStateChanged is abstract, follow-on behaviors may implement it
if (this._controlStateChanged) {
this._controlStateChanged();
}
}
};
</script>

View file

@ -0,0 +1,154 @@
<!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>
<title>active-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialActiveState">
<template>
<test-button></test-button>
</template>
</test-fixture>
<test-fixture id="ToggleActiveState">
<template>
<test-button toggles></test-button>
</template>
</test-fixture>
<script>
suite('active-state', function() {
var activeTarget;
setup(function() {
activeTarget = fixture('TrivialActiveState');
});
suite('active state with toggles attribute', function() {
setup(function() {
activeTarget = fixture('ToggleActiveState');
});
suite('when clicked', function() {
test('is activated', function(done) {
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
done();
} catch (e) {
done(e);
}
});
});
test('is deactivated by a subsequent click', function(done) {
MockInteractions.downAndUp(activeTarget, function() {
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
done();
} catch (e) {
done(e);
}
});
});
});
});
});
suite('without toggles attribute', function() {
suite('when mouse is down', function() {
test('does not get an active attribute', function() {
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
MockInteractions.down(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
});
});
suite('when mouse is up', function() {
test('does not get an active attribute', function() {
MockInteractions.down(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
MockInteractions.up(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
});
});
});
suite('when space is pressed', function() {
test('triggers a click event', function(done) {
activeTarget.addEventListener('click', function() {
done();
});
MockInteractions.pressSpace(activeTarget);
});
test('only triggers click after the key is released', function(done) {
var keyupTriggered = false;
activeTarget.addEventListener('keyup', function() {
keyupTriggered = true;
});
activeTarget.addEventListener('click', function() {
try {
expect(keyupTriggered).to.be.eql(true);
done();
} catch (e) {
done(e);
}
});
MockInteractions.pressSpace(activeTarget);
});
});
suite('when enter is pressed', function() {
test('triggers a click event', function(done) {
activeTarget.addEventListener('click', function() {
done();
});
MockInteractions.pressEnter(activeTarget);
});
test('only triggers click before the key is released', function(done) {
var keyupTriggered = false;
activeTarget.addEventListener('keyup', function() {
keyupTriggered = true;
});
activeTarget.addEventListener('click', function() {
try {
expect(keyupTriggered).to.be.eql(false);
done();
} catch (e) {
done(e);
}
});
MockInteractions.pressEnter(activeTarget);
});
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,85 @@
<!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>
<title>disabled-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialDisabledState">
<template>
<test-control></test-control>
</template>
</test-fixture>
<test-fixture id="InitiallyDisabledState">
<template>
<test-control disabled></test-control>
</template>
</test-fixture>
<script>
suite('disabled-state', function() {
var disableTarget;
suite('a trivial disabled state', function() {
setup(function() {
disableTarget = fixture('TrivialDisabledState');
});
suite('when disabled is true', function() {
test('receives a disabled attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
});
test('receives an appropriate aria attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
});
});
suite('when disabled is false', function() {
test('loses the disabled attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
disableTarget.disabled = false;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(false);
});
});
});
suite('a state with an initially disabled target', function() {
setup(function() {
disableTarget = fixture('InitiallyDisabledState');
});
test('preserves the disabled attribute on target', function() {
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
expect(disableTarget.disabled).to.be.eql(true);
});
test('adds `aria-disabled` to the target', function() {
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
});
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,120 @@
<!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>
<title>focused-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialFocusedState">
<template>
<test-control tabindex="-1"></test-control>
</template>
</test-fixture>
<test-fixture id="NestedFocusedState">
<template>
<nested-focusable></nested-focusable>
</template>
</test-fixture>
<script>
suite('focused-state', function() {
var focusTarget;
setup(function() {
focusTarget = fixture('TrivialFocusedState');
});
suite('when is focused', function() {
test('receives a focused attribute', function() {
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
MockInteractions.focus(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
});
test('focused property is true', function() {
expect(focusTarget.focused).to.not.be.eql(true);
MockInteractions.focus(focusTarget);
expect(focusTarget.focused).to.be.eql(true);
});
});
suite('when is blurred', function() {
test('loses the focused attribute', function() {
MockInteractions.focus(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
MockInteractions.blur(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
});
test('focused property is false', function() {
MockInteractions.focus(focusTarget);
expect(focusTarget.focused).to.be.eql(true);
MockInteractions.blur(focusTarget);
expect(focusTarget.focused).to.be.eql(false);
});
});
suite('when the focused state is disabled', function() {
setup(function() {
focusTarget.disabled = true;
});
test('will not be focusable', function() {
expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
});
});
});
suite('nested focusable', function() {
var focusable;
setup(function() {
focusable = fixture('NestedFocusedState');
});
test('focus/blur events fired on host element', function(done) {
var nFocusEvents = 0;
var nBlurEvents = 0;
focusable.addEventListener('focus', function() {
nFocusEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nFocusEvents, 1, 'one focus event fired');
MockInteractions.blur(focusable.$.input);
});
});
focusable.addEventListener('blur', function() {
nBlurEvents += 1;
// setTimeout to wait for potentially more, erroneous events
setTimeout(function() {
assert.equal(nBlurEvents, 1, 'one blur event fired');
done();
});
});
MockInteractions.focus(focusable.$.input);
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!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>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'focused-state.html',
'active-state.html',
'disabled-state.html'
]);
</script>
</body>
</html>

View file

@ -0,0 +1,66 @@
<!--
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="../iron-control-state.html">
<link rel="import" href="../iron-button-state.html">
<script>
Polymer({
is: 'test-control',
behaviors: [
Polymer.IronControlState
]
});
</script>
<script>
Polymer({
is: 'test-button',
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
],
_buttonStateChanged: function() {
}
});
</script>
<dom-module id="nested-focusable">
<template>
<input id="input">
</template>
</dom-module>
<script>
Polymer({
is: 'nested-focusable',
behaviors: [
Polymer.IronControlState
]
});
</script>

View file

@ -0,0 +1,42 @@
{
"name": "iron-fit-behavior",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Fits an element inside another element",
"private": true,
"main": [
"iron-fit-behavior.html"
],
"keywords": [
"web-components",
"polymer",
"behavior"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-fit-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-fit-behavior",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "df9fd83577ea6ebd98f5cad8333daa73dd0f34ba"
},
"_source": "git://github.com/PolymerElements/iron-fit-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-fit-behavior"
}

View file

@ -0,0 +1 @@
bower_components

View file

@ -0,0 +1,32 @@
{
"name": "iron-fit-behavior",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Fits an element inside another element",
"private": true,
"main": [
"iron-fit-behavior.html"
],
"keywords": [
"web-components",
"polymer",
"behavior"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-fit-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -0,0 +1,41 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-fit-behavior demo</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-lite.js"></script>
<link href="../../paper-styles/demo-pages.html" rel="import">
<link rel="import" href="simple-fit.html">
<style>
.sized {
width: 50%;
height: 50%;
}
</style>
</head>
<body unresolved>
<simple-fit auto-fit-on-attach class="sized">
centered in window
</simple-fit>
</body>
</html>

View file

@ -0,0 +1,50 @@
<!--
@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="../iron-fit-behavior.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<dom-module id="simple-fit">
<style>
:host {
@apply(--layout);
background-color: var(--paper-light-blue-500);
color: white;
text-align: center;
align-items:center;
-webkit-align-items: center;
justify-content:center;
-webkit-justify-content:center;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'simple-fit',
behaviors: [
Polymer.IronFitBehavior
]
});
</script>

View file

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-fit-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -0,0 +1,256 @@
<!--
@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">
<script>
/**
Polymer.IronFitBehavior fits an element in another element using `max-height` and `max-width`, and
optionally centers it in the window or another element.
The element will only be sized and/or positioned if it has not already been sized and/or positioned
by CSS.
CSS properties | Action
-----------------------------|-------------------------------------------
`position` set | Element is not centered horizontally or vertically
`top` or `bottom` set | Element is not vertically centered
`left` or `right` set | Element is not horizontally centered
`max-height` or `height` set | Element respects `max-height` or `height`
`max-width` or `width` set | Element respects `max-width` or `width`
@demo demo/index.html
@polymerBehavior
*/
Polymer.IronFitBehavior = {
properties: {
/**
* The element that will receive a `max-height`/`width`. By default it is the same as `this`,
* but it can be set to a child element. This is useful, for example, for implementing a
* scrolling region inside the element.
* @type {!Element}
*/
sizingTarget: {
type: Object,
value: function() {
return this;
}
},
/**
* The element to fit `this` into.
*/
fitInto: {
type: Object,
value: window
},
/**
* Set to true to auto-fit on attach.
*/
autoFitOnAttach: {
type: Boolean,
value: false
},
/** @type {?Object} */
_fitInfo: {
type: Object
}
},
get _fitWidth() {
var fitWidth;
if (this.fitInto === window) {
fitWidth = this.fitInto.innerWidth;
} else {
fitWidth = this.fitInto.getBoundingClientRect().width;
}
return fitWidth;
},
get _fitHeight() {
var fitHeight;
if (this.fitInto === window) {
fitHeight = this.fitInto.innerHeight;
} else {
fitHeight = this.fitInto.getBoundingClientRect().height;
}
return fitHeight;
},
get _fitLeft() {
var fitLeft;
if (this.fitInto === window) {
fitLeft = 0;
} else {
fitLeft = this.fitInto.getBoundingClientRect().left;
}
return fitLeft;
},
get _fitTop() {
var fitTop;
if (this.fitInto === window) {
fitTop = 0;
} else {
fitTop = this.fitInto.getBoundingClientRect().top;
}
return fitTop;
},
attached: function() {
if (this.autoFitOnAttach) {
if (window.getComputedStyle(this).display === 'none') {
setTimeout(function() {
this.fit();
}.bind(this));
} else {
this.fit();
}
}
},
/**
* Fits and optionally centers the element into the window, or `fitInfo` if specified.
*/
fit: function() {
this._discoverInfo();
this.constrain();
this.center();
},
/**
* Memoize information needed to position and size the target element.
*/
_discoverInfo: function() {
if (this._fitInfo) {
return;
}
var target = window.getComputedStyle(this);
var sizer = window.getComputedStyle(this.sizingTarget);
this._fitInfo = {
inlineStyle: {
top: this.style.top || '',
left: this.style.left || ''
},
positionedBy: {
vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
'bottom' : null),
horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
'right' : null),
css: target.position
},
sizedBy: {
height: sizer.maxHeight !== 'none',
width: sizer.maxWidth !== 'none'
},
margin: {
top: parseInt(target.marginTop, 10) || 0,
right: parseInt(target.marginRight, 10) || 0,
bottom: parseInt(target.marginBottom, 10) || 0,
left: parseInt(target.marginLeft, 10) || 0
}
};
},
/**
* Resets the target element's position and size constraints, and clear
* the memoized data.
*/
resetFit: function() {
if (!this._fitInfo || !this._fitInfo.sizedBy.height) {
this.sizingTarget.style.maxHeight = '';
this.style.top = this._fitInfo ? this._fitInfo.inlineStyle.top : '';
}
if (!this._fitInfo || !this._fitInfo.sizedBy.width) {
this.sizingTarget.style.maxWidth = '';
this.style.left = this._fitInfo ? this._fitInfo.inlineStyle.left : '';
}
if (this._fitInfo) {
this.style.position = this._fitInfo.positionedBy.css;
}
this._fitInfo = null;
},
/**
* Equivalent to calling `resetFit()` and `fit()`. Useful to call this after the element,
* the window, or the `fitInfo` element has been resized.
*/
refit: function() {
this.resetFit();
this.fit();
},
/**
* Constrains the size of the element to the window or `fitInfo` by setting `max-height`
* and/or `max-width`.
*/
constrain: function() {
var info = this._fitInfo;
// position at (0px, 0px) if not already positioned, so we can measure the natural size.
if (!this._fitInfo.positionedBy.vertically) {
this.style.top = '0px';
}
if (!this._fitInfo.positionedBy.horizontally) {
this.style.left = '0px';
}
// need border-box for margin/padding
this.sizingTarget.style.boxSizing = 'border-box';
// constrain the width and height if not already set
var rect = this.getBoundingClientRect();
if (!info.sizedBy.height) {
this._sizeDimension(rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
}
if (!info.sizedBy.width) {
this._sizeDimension(rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
}
},
_sizeDimension: function(rect, positionedBy, start, end, extent) {
var info = this._fitInfo;
var max = extent === 'Width' ? this._fitWidth : this._fitHeight;
var flip = (positionedBy === end);
var offset = flip ? max - rect[end] : rect[start];
var margin = info.margin[flip ? start : end];
var offsetExtent = 'offset' + extent;
var sizingOffset = this[offsetExtent] - this.sizingTarget[offsetExtent];
this.sizingTarget.style['max' + extent] = (max - margin - offset - sizingOffset) + 'px';
},
/**
* Centers horizontally and vertically if not already positioned. This also sets
* `position:fixed`.
*/
center: function() {
if (!this._fitInfo.positionedBy.vertically || !this._fitInfo.positionedBy.horizontally) {
// need position:fixed to center
this.style.position = 'fixed';
}
if (!this._fitInfo.positionedBy.vertically) {
var top = (this._fitHeight - this.offsetHeight) / 2 + this._fitTop;
top -= this._fitInfo.margin.top;
this.style.top = top + 'px';
}
if (!this._fitInfo.positionedBy.horizontally) {
var left = (this._fitWidth - this.offsetWidth) / 2 + this._fitLeft;
left -= this._fitInfo.margin.left;
this.style.left = left + 'px';
}
}
};
</script>

View file

@ -0,0 +1,34 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-fit-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-fit-behavior.html'
]);
</script>
</body>
</html>

View file

@ -0,0 +1,351 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-fit-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>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-fit.html">
<style>
body {
margin: 0;
padding: 0;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.scrolling {
overflow: auto;
}
.sized-x {
width: 200px;
}
.sized-y {
height: 200px;
}
.positioned-left {
position: absolute;
left: 100px;
}
.positioned-right {
position: absolute;
right: 100px;
}
.positioned-top {
position: absolute;
top: 100px;
}
.positioned-bottom {
position: absolute;
bottom: 100px;
}
.with-max-width {
max-width: 500px;
}
.with-max-height {
max-height: 500px;
}
.with-margin {
margin: 20px;
}
</style>
</head>
<body>
<test-fixture id="absolute">
<template>
<test-fit auto-fit-on-attach class="absolute">
Absolutely positioned
</test-fit>
</template>
</test-fixture>
<test-fixture id="sized-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x sized-y">
Sized (x/y), auto center/center
</test-fit>
</template>
</test-fixture>
<test-fixture id="sized-x">
<template>
<test-fit auto-fit-on-attach class="sized-x">
Sized (x), auto center/center
</test-fit>
</template>
</test-fixture>
<test-fixture id="positioned-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x positioned-left positioned-top">
Sized (x/y), positioned/positioned
</test-fit>
</template>
</test-fixture>
<test-fixture id="inline-positioned-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;left:100px;top:100px;">
Sized (x/y), positioned/positioned
</test-fit>
</template>
</test-fixture>
<test-fixture id="sectioned">
<template>
<test-fit auto-fit-on-attach class="sized-x">
<div>
Sized (x), auto center/center with scrolling section
</div>
<div class="internal"></div>
</test-fit>
</template>
</test-fixture>
<test-fixture id="constrain-target">
<template>
<div class="constrain" style="position: fixed; top: 20px; left: 100px; width: 50vw; height: 50vh; border: 1px solid black;">
<test-fit auto-fit-on-attach class="el">
<div>
Auto center/center to parent element
</div>
</test-fit>
</div>
</template>
</test-fixture>
<template id="ipsum">
<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>
</template>
<script>
function makeScrolling(el) {
el.classList.add('scrolling');
var template = document.getElementById('ipsum');
for (var i = 0; i < 20; i++) {
el.appendChild(template.content.cloneNode(true));
}
}
suite('manual positioning', function() {
test('css positioned element is not re-positioned', function() {
var el = fixture('positioned-xy');
var rect = el.getBoundingClientRect();
assert.equal(rect.top, 100, 'top is unset');
assert.equal(rect.left, 100, 'left is unset');
});
test('inline positioned element is not re-positioned', function() {
var el = fixture('inline-positioned-xy');
var rect = el.getBoundingClientRect();
// need to measure document.body here because mocha sets a min-width on html,body, and
// the element is positioned wrt to that by css
var bodyRect = document.body.getBoundingClientRect();
assert.equal(rect.top, 100, 'top is unset');
assert.equal(rect.left, 100, 'left is unset');
el.refit();
rect = el.getBoundingClientRect();
assert.equal(rect.top, 100, 'top is unset after refit');
assert.equal(rect.left, 100, 'left is unset after refit');
});
test('position property is preserved after', function() {
var el = fixture('absolute');
assert.equal(getComputedStyle(el).position, 'absolute', 'position:absolute is preserved');
});
});
suite('fit to window', function() {
test('sized element is centered in viewport', function() {
var el = fixture('sized-xy');
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('sized element with margin is centered in viewport', function() {
var el = fixture('sized-xy');
el.classList.add('with-margin');
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('scrolling element is centered in viewport', function() {
var el = fixture('sized-x');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('scrolling element is constrained to viewport height', function() {
var el = fixture('sized-x');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
});
test('scrolling element with max-height is centered in viewport', function() {
var el = fixture('sized-x');
el.classList.add('with-max-height');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('scrolling element with max-height respects max-height', function() {
var el = fixture('sized-x');
el.classList.add('with-max-height');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= 500, 'height is less than or equal to max-height');
});
test('css positioned, scrolling element is constrained to viewport height (top,left)', function() {
var el = fixture('positioned-xy');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
});
test('css positioned, scrolling element is constrained to viewport height (bottom, right)', function() {
var el = fixture('sized-x');
el.classList.add('positioned-bottom');
el.classList.add('positioned-right');
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less than or equal to viewport height');
});
test('sized, scrolling element with margin is centered in viewport', function() {
var el = fixture('sized-x');
el.classList.add('with-margin');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'centered horizontally');
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('sized, scrolling element is constrained to viewport height', function() {
var el = fixture('sized-x');
el.classList.add('with-margin');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 20 * 2, 'height is less than or equal to viewport height');
});
test('css positioned, scrolling element with margin is constrained to viewport height (top, left)', function() {
var el = fixture('positioned-xy');
el.classList.add('with-margin');
makeScrolling(el);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
});
test('css positioned, scrolling element with margin is constrained to viewport height (bottom, right)', function() {
var el = fixture('sized-x');
el.classList.add('positioned-bottom');
el.classList.add('positioned-right');
el.classList.add('with-margin')
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'height is less than or equal to viewport height');
});
test('scrolling sizingTarget is constrained to viewport height', function() {
el = fixture('sectioned');
var internal = Polymer.dom(el).querySelector('.internal');
el.sizingTarget = internal;
makeScrolling(internal);
el.refit();
var rect = el.getBoundingClientRect();
assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
});
});
suite('fit to element', function() {
test('element fits in another element', function() {
var constrain = fixture('constrain-target');
var el = Polymer.dom(constrain).querySelector('.el')
makeScrolling(el);
el.fitInto = constrain;
el.refit();
var rect = el.getBoundingClientRect();
var crect = constrain.getBoundingClientRect();
assert.isTrue(rect.height <= crect.height, 'width is less than or equal to fitInto width');
assert.isTrue(rect.height <= crect.height, 'height is less than or equal to fitInto height');
});
test('element centers in another element', function() {
var constrain = fixture('constrain-target');
var el = Polymer.dom(constrain).querySelector('.el')
makeScrolling(el);
el.fitInto = constrain;
el.refit();
var rect = el.getBoundingClientRect();
var crect = constrain.getBoundingClientRect();
assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!--
@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="../iron-fit-behavior.html">
<dom-module id="test-fit">
<style>
:host {
display: block;
background: black;
color: white;
padding: 8px;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'test-fit',
behaviors: [
Polymer.IronFitBehavior
]
});
</script>

View file

@ -0,0 +1,36 @@
{
"name": "iron-flex-layout",
"version": "1.0.2",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
"polymer",
"layout"
],
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-flex-layout",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "50bcecf40ab23caa7c2cd90030555e00c5ba7154"
},
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-flex-layout"
}

View file

@ -0,0 +1,2 @@
bower_components

View file

@ -0,0 +1,26 @@
{
"name": "iron-flex-layout",
"version": "1.0.2",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
"polymer",
"layout"
],
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -0,0 +1,307 @@
<!--
@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="iron-shadow-flex-layout.html">
<style>
/*******************************
Flex Layout
*******************************/
.layout.horizontal,
.layout.horizontal-reverse,
.layout.vertical,
.layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
.flex,
.flex-1 {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
.flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
.flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
.flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
.flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
.flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
.flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
.flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
.layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.layout.center,
.layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
.layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.layout.center-justified,
.layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.layout.around-justified {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
.self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
.self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
.self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
.block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
[hidden] {
display: none !important;
}
.invisible {
visibility: hidden !important;
}
.relative {
position: relative;
}
.fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
.scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
/* fixed position */
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
.fixed-top {
top: 0;
left: 0;
right: 0;
}
.fixed-right {
top: 0;
right: 0;
bottom: 0;
}
.fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
.fixed-left {
top: 0;
bottom: 0;
left: 0;
}
</style>

View file

@ -0,0 +1,302 @@
<!--
@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
-->
<style>
/*******************************
Flex Layout
*******************************/
html /deep/ .layout.horizontal,
html /deep/ .layout.horizontal-reverse,
html /deep/ .layout.vertical,
html /deep/ .layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ .layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
html /deep/ .layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
html /deep/ .layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
html /deep/ .layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
html /deep/ .layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
html /deep/ .layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
html /deep/ .layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
html /deep/ .flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
html /deep/ .flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
html /deep/ .flex,
html /deep/ .flex-1 {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
html /deep/ .flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
html /deep/ .flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
html /deep/ .flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
html /deep/ .flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
html /deep/ .flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
html /deep/ .flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
html /deep/ .flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
html /deep/ .flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
html /deep/ .flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
html /deep/ .flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
html /deep/ .flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
html /deep/ .layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
html /deep/ .layout.center,
html /deep/ .layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
html /deep/ .layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
html /deep/ .layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
html /deep/ .layout.center-justified,
html /deep/ .layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
html /deep/ .layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
html /deep/ .layout.around-justified {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
html /deep/ .layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
html /deep/ .self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
html /deep/ .self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
html /deep/ .self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
html /deep/ .self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
html /deep/ .block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
html /deep/ [hidden] {
display: none !important;
}
html /deep/ .invisible {
visibility: hidden !important;
}
html /deep/ .relative {
position: relative;
}
html /deep/ .fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
html /deep/ .scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
html /deep/ .fixed-top {
top: 0;
left: 0;
right: 0;
}
html /deep/ .fixed-right {
top: 0;
right: 0;
botttom: 0;
}
html /deep/ .fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
html /deep/ .fixed-left {
top: 0;
botttom: 0;
left: 0;
}
</style>

View file

@ -0,0 +1,42 @@
<!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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<title>iron-flex-layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="x-app.html">
<style>
html, body, x-app {
height: 100%;
}
body {
margin: 0;
}
</style>
</head>
<body class="fullbleed">
<x-app></x-app>
</body>
</html>

View file

@ -0,0 +1,118 @@
<!--
@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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<link rel="import" href="../iron-flex-layout.html">
<dom-module id="x-app">
<style>
:host {
@apply(--layout-horizontal);
@apply(--paper-font-body2);
}
[nav] {
@apply(--layout-vertical);
width: 200px;
background-color: var(--paper-grey-300);
}
[item] {
@apply(--layout-horizontal);
@apply(--layout-center);
height: 60px;
padding-left: 16px;
border-bottom: 1px solid var(--paper-grey-400);
}
[main] {
@apply(--layout-flex);
@apply(--layout-vertical);
}
[header] {
@apply(--layout-horizontal);
@apply(--layout-center);
@apply(--paper-font-subhead);
height: 60px;
background-color: var(--google-blue-700);
padding: 0 16px;
color: white;
}
[tool] {
@apply(--layout-inline);
}
[content] {
@apply(--layout-flex);
overflow: auto;
padding: 0 10px;
}
[card] {
@apply(--layout-vertical);
@apply(--layout-center-center);
@apply(--shadow-elevation-2dp);
height: 300px;
max-width: 800px;
margin: 16px auto;
font-weight: bold;
background-color: var(--paper-grey-200);
}
</style>
<template>
<div nav>
<div content>
<div item>ITEM 1</div>
<div item>ITEM 2</div>
<div item>ITEM 3</div>
<div item>ITEM 4</div>
<div item>ITEM 5</div>
</div>
</div>
<div main>
<div header>
<div tool>Foo</div>
<div class="flex"></div>
<div tool>Bar</div>
</div>
<div content>
<div card>CARD 1</div>
<div card>CARD 2</div>
<div card>CARD 3</div>
<div card>CARD 4</div>
<div card>CARD 5</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-app'
});
</script>

View file

@ -0,0 +1,313 @@
<!--
@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">
<style is="custom-style">
:root {
--layout: {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
};
--layout-inline: {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
};
--layout-horizontal: {
/* @apply(--layout); */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
};
--layout-horizontal-reverse: {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
};
--layout-vertical: {
/* @apply(--layout); */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
};
--layout-vertical-reverse: {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
};
--layout-wrap: {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
};
--layout-wrap-reverse: {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
};
--layout-flex-auto: {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
};
--layout-flex-none: {
-ms-flex: none;
-webkit-flex: none;
flex: none;
};
--layout-flex: {
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
};
--layout-flex-2: {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
};
--layout-flex-3: {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
};
--layout-flex-4: {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
};
--layout-flex-5: {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
};
--layout-flex-6: {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
};
--layout-flex-7: {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
};
--layout-flex-8: {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
};
--layout-flex-9: {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
};
--layout-flex-10: {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
};
--layout-flex-11: {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
};
--layout-flex-12: {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
};
/* alignment in cross axis */
--layout-start: {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
};
--layout-center: {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
};
--layout-end: {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
};
/* alignment in main axis */
--layout-start-justified: {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
};
--layout-center-justified: {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
};
--layout-end-justified: {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
};
--layout-around-justified: {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
};
--layout-justified: {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
};
--layout-center-center: {
/* @apply(--layout-center --layout-center-justified); */
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
};
/* self alignment */
--layout-self-start: {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
};
--layout-self-center: {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
};
--layout-self-end: {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
};
--layout-self-stretch: {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
};
/*******************************
Other Layout
*******************************/
--layout-block: {
display: block;
};
--layout-invisible: {
visibility: hidden !important;
};
--layout-relative: {
position: relative;
};
--layout-fit: {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
};
--layout-scroll: {
-webkit-overflow-scrolling: touch;
overflow: auto;
};
/* fixed position */
--layout-fixed-bottom:,
--layout-fixed-left:,
--layout-fixed-right:,
--layout-fixed-top: {
position: fixed;
};
--layout-fixed-top: {
top: 0;
left: 0;
right: 0;
};
--layout-fixed-right: {
top: 0;
right: 0;
bottom: 0;
};
--layout-fixed-bottom: {
right: 0;
bottom: 0;
left: 0;
};
--layout-fixed-left: {
top: 0;
bottom: 0;
left: 0;
};
}
</style>

View file

@ -0,0 +1,37 @@
{
"name": "iron-form-element-behavior",
"version": "1.0.1",
"license": "http://polymer.github.io/LICENSE.txt",
"private": true,
"main": "iron-form-element-behavior",
"authors": "The Polymer Authors",
"description": "Enables a custom element to be included in an iron-form",
"keywords": [
"web-components",
"polymer",
"form"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-form-element-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-form-element-behavior",
"_release": "1.0.1",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "f386143e866c320025589f3d79798c12103377a4"
},
"_source": "git://github.com/PolymerElements/iron-form-element-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-form-element-behavior"
}

View file

@ -0,0 +1 @@
bower_components

View file

@ -0,0 +1,27 @@
{
"name": "iron-form-element-behavior",
"version": "1.0.1",
"license": "http://polymer.github.io/LICENSE.txt",
"private": true,
"main": "iron-form-element-behavior",
"authors": "The Polymer Authors",
"description": "Enables a custom element to be included in an iron-form",
"keywords": [
"web-components",
"polymer",
"form"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-form-element-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -0,0 +1,53 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-form-element-behavior demo</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-lite.js"></script>
<link rel="import" href="simple-form.html">
<link rel="import" href="simple-element.html">
</head>
<body>
<form is="simple-form" id="form">
Element the form is tracking: <input is="simple-element" type="text" name="one" value="one">
<br>
Element the form isn't tracking: <input type="text" name="two" value="two">
<br>
Another one the form is tracking: <input is="simple-element" type="text" name="three" value="three">
</form>
<h4>Elements tracked by the form: </h4>
<ul id="output">
</ul>
</body>
<script>
var output = document.getElementById('output');
var elements = document.getElementById('form').formElements;
for (var i = 0; i < elements.length; i++) {
var li = document.createElement('li');
var text = document.createTextNode(elements[i].value);
li.appendChild(text);
output.appendChild(li);
}
</script>
</html>

View file

@ -0,0 +1,27 @@
<!--
@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="../iron-form-element-behavior.html">
<script>
Polymer({
is: 'simple-element',
extends: 'input',
behaviors: [
Polymer.IronFormElementBehavior
]
});
</script>

View file

@ -0,0 +1,42 @@
<!--
@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">
<script>
Polymer({
is: 'simple-form',
extends: 'form',
properties: {
formElements: {
type: Object,
notify: true
}
},
listeners: {
'iron-form-element-register': '_elementRegistered'
},
ready: function() {
this.formElements = [];
},
_elementRegistered: function(e) {
this.formElements.push(e.target);
this.fire('element-registered');
}
});
</script>

View file

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-form-element-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -0,0 +1,50 @@
<!--
@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">
<!--
Enables a custom element to be included in an `iron-form`.
-->
<script>
/**
@demo demo/index.html
@polymerBehavior
*/
Polymer.IronFormElementBehavior = {
properties: {
/**
* The name of this element.
*/
name: {
type: String
},
/**
* The value for this element.
*/
value: {
notify: true,
type: String
},
},
attached: function() {
this.fire('iron-form-element-register');
}
};
</script>

View file

@ -0,0 +1,43 @@
{
"name": "iron-icon",
"private": true,
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "An element that supports displaying an icon",
"main": "iron-icon.html",
"author": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"icon"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-icon.git"
},
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-iconset": "polymerelements/iron-iconset#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-icon",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "f9246c47ecb1c682f0fb9ea48255d5f7debd1e03"
},
"_source": "git://github.com/polymerelements/iron-icon.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-icon"
}

View file

@ -0,0 +1 @@
bower_components

View file

@ -0,0 +1,33 @@
{
"name": "iron-icon",
"private": true,
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "An element that supports displaying an icon",
"main": "iron-icon.html",
"author": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"icon"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-icon.git"
},
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-iconset": "polymerelements/iron-iconset#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -0,0 +1,48 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-icon demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-icon.html">
<link rel="import" href="../../iron-iconset/iron-iconset.html">
<link href="../../paper-styles/demo-pages.html" rel="import">
<style is="custom-style">
.vertical-section h4 {
border-left: 3px solid var(--paper-grey-300);
padding-left: 10px;
}
.vertical-section h4:hover {
border-left-color: var(--google-blue-700);
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h4>This demo is for a single &lt;iron-icon&gt;. If you're looking for the
whole set of available icons, check out the &lt;iron-icons&gt; demo.</h4>
<div class="vertical-section">
<!-- iron-icon using a iron-iconset as its icon source -->
<iron-iconset name="example" icons="location" src="location.png" size="24" width="24"></iron-iconset>
<h4>&lt;iron-icon icon="example:location"&gt;</h4>
<iron-icon icon="example:location"></iron-icon>
<!-- iron-icon using an image url as its icon source -->
<h4>&lt;iron-icon src="location.png"&gt;</h4>
<iron-icon src="location.png"></iron-icon>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 324 B

View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<circle cx="112" cy="61" r="8"/>
<path d="M129,78H95V44h34V78z M97,76h30V46H97V76z"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

After

Width:  |  Height:  |  Size: 720 B

View file

@ -0,0 +1,26 @@
<!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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

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