scnc
/
qiskit.org
mirror of https://github.com/Qiskit/qiskit.org.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Recreate the landing page 

swqa

...
This commit is contained in:
Abdón Rodríguez Davila 2018-04-13 20:31:32 +02:00
parent 987811f54a
commit 40a4db1ab1
1138 changed files with 15877 additions and 130674 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.eslintignore Normal file
View File

@ -0,0 +1,7 @@
documentation/
modelq/
# From .gitignore
bower_components/
build/
node_modules/

9
.eslintrc.json Normal file
View File

@ -0,0 +1,9 @@
{
"extends": "ibmresearch/html",
"parserOptions": {
"ecmaVersion": 6
},
"globals": {
"Polymer": true
}
}

4
.gitignore vendored
View File

@ -1,3 +1,3 @@
bower_components/*
bower_components/
build/
node_modules/
temp-collaborators.html

0
.nojekyll
View File

48
README.md
View File

@ -4,7 +4,7 @@ https://www.qiskit.org
## QISKit
Open Source Quantum Information Software Kit
The Open Source Quantum Information Software Kit (QISKit for short) is a software development kit (SDK) for working with OpenQASM and the IBM Q experience (QX) quantum processors.
The Open Source Quantum Information Software Kit (QISKit for short) is a software development kit (SDK) for working with OpenQASM and the IBM Q experience (QX) quantum processors.
Use QISKit to create quantum computing programs, compile them, and execute them on one of several backends (online Real quantum processors, and simulators).
@ -17,50 +17,50 @@ you can find the documentation and tutorials links in this web.
QISKit is a world-leading quantum software developer toolkit with a growing and broad user base. If you are one of those contributing and would like to be listed please email qiskit@qiskit.org. Thanks and keep developing!
IBM Research
[IBM Research](http://www.research.ibm.com/)
Alexandre Blais (Université de Sherbrooke)
[Alexandre Blais (Université de Sherbrooke)](https://www.physique.usherbrooke.ca/blais/index.php?sec=accueil&lan=EN)
Robin Blume Kohout (Sandia)
[Robin Blume Kohout (Sandia)](https://cfwebprod.sandia.gov/cfdocs/CompResearch/index.cfm)
Francesco Buscemi (Nagoya University)
[Francesco Buscemi (Nagoya University)](http://www.math.cm.is.nagoya-u.ac.jp/Staff/buscemi-en.html)
Jonas Bylander (Chalmers University of Technology)
[Jonas Bylander (Chalmers University of Technology)](http://www.chalmers.se/en/staff/Pages/Jonas-Bylander.aspx)
Isaac Chuang (MIT)
[Isaac Chuang (MIT)](http://web.mit.edu/physics/people/faculty/chuang_isaac.html)
Vincent Dwyer (Loughborough University)
[Vincent Dwyer (Loughborough University)](http://www.lboro.ac.uk/departments/meme/staff/vincent-m-dwyer/)
Mark Everitt (Loughborough University)
[Mark Everitt (Loughborough University)](http://www.lboro.ac.uk/departments/physics/staff/academic/mark-everitt/)
Michael Geller (University of Georgia)
[Michael Geller (University of Georgia)](https://www.physast.uga.edu/people/michael_geller)
Thomas Haener (ETH Zurich/ProjectQ)
[Thomas Haener (ETH Zurich/ProjectQ)](http://www.projectq.ch)
Andrew Houck (Princeton)
[Andrew Houck (Princeton)](http://ee.princeton.edu/people/faculty/andrew-houck)
Thomas Ihn (ETHZ)
[Thomas Ihn (ETHZ)](https://people.phys.ethz.ch/~ihn/)
Sabre Kais (Purdue)
[Sabre Kais (Purdue)](https://www.chem.purdue.edu/kais/)
Miguel Ángel Martín-Delgado (Universidad Complutense de Madrid)
[Miguel Ángel Martín-Delgado (Universidad Complutense de Madrid)](http://gicc.fis.ucm.es/people/mamd.html)
Rod Van Meter (Keio University)
[Rod Van Meter (Keio University)](http://aqua.sfc.wide.ad.jp/)
Harumichi Nishimura (Nagoya University)
[Harumichi Nishimura (Nagoya University)](http://www.math.cm.is.nagoya-u.ac.jp/~hnishimura/list.html)
Russell Rundle (Loughborough University)
Enrique Solano (University of the Basque Country and Shanghai University)
[Enrique Solano (University of the Basque Country and Shanghai University)](http://www.qutisgroup.com)
Damian Steiger (ETH Zurich /ProjectQ)
[Damian Steiger (ETH Zurich /ProjectQ)](http://www.projectq.ch)
Todd Tilma (Tokyo Institute of Technology)
[Todd Tilma (Tokyo Institute of Technology)](https://www.titech.ac.jp/english/)
Christophe Vuillot (QuTech institute at TU Delft)
[Christophe Vuillot (QuTech institute at TU Delft)](https://qutech.nl/person/christopher-vuillot/)
Martin Weides (Karlsruhe Institute of Technology)
[Martin Weides (Karlsruhe Institute of Technology)](https://www.phi.kit.edu/wissenschaftler_weides_martin.php)
James Wootton (University of Basel)
[James Wootton (University of Basel)](https://sites.google.com/site/woottonjames/home)
Shigeru Yamashita (Ritsumeikan University)
[Shigeru Yamashita (Ritsumeikan University)](http://www.ngc.is.ritsumei.ac.jp/~ger/english-2/)

47
SUPPORTING-COLLABORATORS.md
View File

@ -1,47 +0,0 @@
[IBM Research](http://www.research.ibm.com/)
[Alexandre Blais (Université de Sherbrooke)](https://www.physique.usherbrooke.ca/blais/index.php?sec=accueil&lan=EN)
[Robin Blume Kohout (Sandia)](https://cfwebprod.sandia.gov/cfdocs/CompResearch/index.cfm)
[Francesco Buscemi (Nagoya University)](http://www.math.cm.is.nagoya-u.ac.jp/Staff/buscemi-en.html)
[Jonas Bylander (Chalmers University of Technology)](http://www.chalmers.se/en/staff/Pages/Jonas-Bylander.aspx)
[Isaac Chuang (MIT)](http://web.mit.edu/physics/people/faculty/chuang_isaac.html)
[Vincent Dwyer (Loughborough University)](http://www.lboro.ac.uk/departments/meme/staff/vincent-m-dwyer/)
[Mark Everitt (Loughborough University)](http://www.lboro.ac.uk/departments/physics/staff/academic/mark-everitt/)
[Michael Geller (University of Georgia)](https://www.physast.uga.edu/people/michael_geller)
[Thomas Haener (ETH Zurich/ProjectQ)](http://www.projectq.ch)
[Andrew Houck (Princeton)](http://ee.princeton.edu/people/faculty/andrew-houck)
[Thomas Ihn (ETHZ)](https://people.phys.ethz.ch/~ihn/)
[Sabre Kais (Purdue)](https://www.chem.purdue.edu/kais/)
[Miguel Ángel Martín-Delgado (Universidad Complutense de Madrid)](http://gicc.fis.ucm.es/people/mamd.html)
[Rod Van Meter (Keio University)](http://aqua.sfc.wide.ad.jp/)
[Harumichi Nishimura (Nagoya University)](http://www.math.cm.is.nagoya-u.ac.jp/~hnishimura/list.html)
Russell Rundle (Loughborough University)
[Enrique Solano (University of the Basque Country and Shanghai University)](http://www.qutisgroup.com)
[Damian Steiger (ETH Zurich /ProjectQ)](http://www.projectq.ch)
[Todd Tilma (Tokyo Institute of Technology)](https://www.titech.ac.jp/english/)
[Christophe Vuillot (QuTech institute at TU Delft)](https://qutech.nl/person/christopher-vuillot/)
[Martin Weides (Karlsruhe Institute of Technology)](https://www.phi.kit.edu/wissenschaftler_weides_martin.php)
[James Wootton (University of Basel)](https://sites.google.com/site/woottonjames/home)
[Shigeru Yamashita (Ritsumeikan University)](http://www.ngc.is.ritsumei.ac.jp/~ger/english-2/)

87
app-icons.html
View File

@ -1,87 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="components/iron-icon/iron-icon.html">
<link rel="import" href="components/iron-iconset-svg/iron-iconset-svg.html">
<iron-iconset-svg name="app-icons" size="100">
<svg>
<defs>
<g id="codepen">
<path class="outer-ring" d="M50,0C22.385,0,0,22.385,0,50c0,27.615,22.385,50,50,50c27.614,0,50-22.385,50-50C100,22.385,77.615,0,50,0z M50,91.789
C26.958,91.789,8.212,73.042,8.212,50C8.212,26.958,26.958,8.212,50,8.212c23.042,0,41.788,18.747,41.788,41.789
C91.788,73.042,73.042,91.789,50,91.789z"></path>
<path class="inner-logo" d="M80.893,40.234c-0.006-0.039-0.016-0.076-0.022-0.115c-0.013-0.075-0.027-0.15-0.046-0.223
c-0.012-0.044-0.028-0.086-0.042-0.128c-0.021-0.065-0.042-0.13-0.068-0.193c-0.018-0.044-0.039-0.088-0.059-0.13
c-0.028-0.06-0.057-0.119-0.09-0.175c-0.024-0.042-0.051-0.083-0.076-0.124c-0.036-0.055-0.073-0.109-0.112-0.161
c-0.029-0.039-0.06-0.078-0.091-0.115c-0.042-0.049-0.086-0.098-0.132-0.143c-0.035-0.036-0.069-0.072-0.106-0.104
c-0.049-0.044-0.099-0.086-0.15-0.127c-0.04-0.031-0.079-0.062-0.12-0.091c-0.016-0.01-0.029-0.023-0.044-0.033L51.474,19.531
c-0.893-0.595-2.055-0.595-2.947,0L20.267,38.371c-0.015,0.01-0.028,0.023-0.044,0.033c-0.042,0.029-0.081,0.06-0.12,0.091
c-0.052,0.041-0.102,0.083-0.15,0.127c-0.037,0.032-0.071,0.068-0.106,0.104c-0.046,0.045-0.09,0.094-0.132,0.143
c-0.031,0.038-0.062,0.077-0.092,0.115c-0.039,0.052-0.076,0.106-0.111,0.161c-0.027,0.041-0.052,0.082-0.076,0.124
c-0.033,0.057-0.062,0.115-0.09,0.175c-0.021,0.042-0.042,0.086-0.06,0.13c-0.026,0.063-0.047,0.128-0.068,0.193
c-0.014,0.042-0.029,0.084-0.042,0.128c-0.02,0.073-0.032,0.148-0.046,0.223c-0.006,0.039-0.016,0.076-0.021,0.115
c-0.016,0.114-0.024,0.229-0.024,0.346V59.42c0,0.117,0.009,0.233,0.024,0.348c0.005,0.038,0.015,0.077,0.021,0.114
c0.014,0.075,0.027,0.149,0.046,0.223c0.012,0.043,0.028,0.086,0.042,0.128c0.021,0.065,0.042,0.13,0.068,0.195
c0.018,0.044,0.039,0.086,0.06,0.129c0.028,0.06,0.058,0.118,0.09,0.177c0.024,0.041,0.049,0.082,0.076,0.122
c0.035,0.056,0.072,0.109,0.111,0.161c0.029,0.041,0.061,0.078,0.092,0.115c0.042,0.049,0.086,0.098,0.132,0.144
c0.035,0.036,0.069,0.071,0.106,0.104c0.048,0.044,0.099,0.086,0.15,0.127c0.039,0.031,0.078,0.062,0.12,0.091
c0.016,0.01,0.029,0.023,0.044,0.032l28.259,18.84c0.446,0.297,0.96,0.447,1.474,0.447c0.513,0,1.027-0.149,1.473-0.447
l28.259-18.84c0.015-0.009,0.028-0.022,0.044-0.032c0.042-0.029,0.081-0.06,0.12-0.091c0.051-0.041,0.102-0.083,0.15-0.127
c0.037-0.033,0.071-0.068,0.106-0.104c0.046-0.046,0.09-0.095,0.132-0.144c0.031-0.037,0.062-0.075,0.091-0.115
c0.04-0.052,0.076-0.105,0.112-0.161c0.025-0.041,0.051-0.081,0.076-0.122c0.033-0.059,0.062-0.117,0.09-0.177
c0.02-0.042,0.041-0.085,0.059-0.129c0.026-0.065,0.047-0.13,0.068-0.195c0.014-0.042,0.03-0.085,0.042-0.128
c0.02-0.074,0.033-0.148,0.046-0.223c0.006-0.037,0.016-0.076,0.022-0.114c0.014-0.115,0.023-0.231,0.023-0.348V40.581
C80.916,40.464,80.907,40.348,80.893,40.234z M52.657,26.707l20.817,13.877l-9.298,6.221l-11.519-7.706V26.707z M47.343,26.707
v12.393l-11.518,7.706l-9.299-6.221L47.343,26.707z M24.398,45.554L31.046,50l-6.648,4.446V45.554z M47.343,73.294L26.525,59.417
l9.299-6.219l11.518,7.704V73.294z M50,56.286L40.603,50L50,43.715L59.397,50L50,56.286z M52.657,73.294V60.902l11.519-7.704
l9.298,6.219L52.657,73.294z M75.602,54.447L68.955,50l6.647-4.446V54.447z"></path>
</g>
<path id="twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"></path>
<g id="youtube">
<path class="youtube" d="M98.77,27.492c-1.225-5.064-5.576-8.799-10.811-9.354C75.561,16.818,63.01,15.993,50.514,16
c-12.495-0.007-25.045,0.816-37.446,2.139c-5.235,0.557-9.583,4.289-10.806,9.354C0.522,34.704,0.5,42.574,0.5,50.001
c0,7.426,0,15.296,1.741,22.509c1.224,5.061,5.572,8.799,10.807,9.352c12.399,1.32,24.949,2.145,37.446,2.14
c12.494,0.005,25.047-0.817,37.443-2.14c5.234-0.555,9.586-4.291,10.81-9.352c1.741-7.213,1.753-15.083,1.753-22.509
S100.51,34.704,98.77,27.492 M67.549,52.203L43.977,64.391c-2.344,1.213-4.262,0.119-4.262-2.428V38.036
c0-2.548,1.917-3.644,4.262-2.429l23.572,12.188C69.896,49.008,69.896,50.992,67.549,52.203"></path>
</g>
<g id="slack">
<path d="M65 6.2c-1.7-4.6-6.7-7.1-11.3-5.8C49.2 2 46.7 7 47.9 11.6l23 71c1.7 4.2 6.3 6.7 10.9 5.4 4.6-1.3 7.5-6.3 6.3-10.9C88 76.7 65 6.2 65 6.2z"/><path d="M29.1 17.9c-1.7-5-6.7-7.5-11.3-5.8 -4.6 1.3-7.1 6.7-5.8 11.3l23 71c1.7 4.2 6.3 6.7 10.9 5.4 4.6-1.3 7.5-6.3 6.3-10.9C52.1 88.4 29.1 17.9 29.1 17.9z"/><path d="M93.8 65c4.6-1.7 7.1-6.7 5.8-11.3 -1.7-4.6-6.7-7.1-11.3-5.8l-71 23c-4.2 1.7-6.7 6.3-5.4 10.9s6.3 7.5 10.9 6.3L93.8 65z"/><path d="M32.1 85.1c4.6-1.7 10.4-3.3 17.1-5.4 -1.7-4.6-3.3-10.9-5.4-17.1l-17.1 5.4L32.1 85.1z"/><path d="M68 73.4c6.3-2.1 12.5-4.2 17.1-5.4 -1.7-4.6-3.3-10.4-5.4-17.1l-17.1 5.4L68 73.4z"/><path d="M82.1 29.1c4.6-1.7 7.1-6.7 5.8-11.3 -1.7-4.6-6.7-7.1-11.3-5.8l-71 23c-4.2 1.7-6.7 6.7-5.4 10.9 1.3 4.6 6.3 7.5 10.9 6.3C11.6 52.1 82.1 29.1 82.1 29.1z"/><path d="M20.4 49.2c4.6-1.7 10.9-3.3 17.1-5.4 -2.1-6.3-4.2-12.5-5.4-17.1L14.9 32 20.4 49.2z"/><path d="M56.3 37.5c6.3-2.1 12.5-4.2 17.1-5.4 -2.1-6.3-4.2-12.5-5.4-17.1l-17.1 5.4L56.3 37.5z"/>
</g>
</defs>
</svg>
</iron-iconset-svg>
<iron-iconset-svg name="inline" size="24">
<svg>
<defs>
<g id="shape">
<rect x="12" y="0" width="12" height="24" />
<circle cx="12" cy="12" r="12" />
</g>
<g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"/></g>
</defs>
</svg>
</iron-iconset-svg>

307
app-qiskit.html
View File

File diff suppressed because one or more lines are too long

38
bower.json Executable file → Normal file
View File

@ -1,35 +1,13 @@
{
"name": "qiskit-site",
"authors": [
"IBM Research"
],
"description": "",
"main": "",
"license": "UNLICENSED",
"homepage": "index.html",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"name": "qiskit-website",
"dependencies": {
"webcomponentsjs": "^1.0.10",
"iron-behaviors": "PolymerElements/iron-behaviors#^2.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^2.0.0",
"polymer": "Polymer/polymer#^2.0.0",
"vaadin-button": "vaadin/vaadin-button#^1.0.0",
"vaadin-checkbox": "vaadin/vaadin-checkbox#^1.0.0-alpha4",
"vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^1.0.7",
"vaadin-radio-button": "vaadin/vaadin-radio-button#^1.0.0-alpha1",
"vaadin-text-field": "vaadin/vaadin-text-field#^1.1.0",
"paper-button": "PolymerElements/paper-button#^2.0.0",
"iron-icons": "^2.0.1",
"app-localize-behavior": "PolymerElements/app-localize-behavior#^2.0.0",
"app-route": "PolymerElements/app-route#^2.0.3",
"paper-icon-button": "^2.0.1"
"app-route": "PolymerElements/app-route#^2.1.0",
"code-sample": "kcmr/code-sample#^0.4.0",
"iron-icon": "PolymerElements/iron-icon#^2.1.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.2.0",
"polymer": "Polymer/polymer#^2.6.0",
"vaadin-button": "vaadin/vaadin-button#^2.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.2.0"
}
}

72
components/app-localize-behavior/.bower.json
View File

@ -1,72 +0,0 @@
{
"name": "app-localize-behavior",
"version": "2.0.0",
"description": "A behavior to help with internationalizating apps",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"i18n",
"translation",
"localization"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/polymerelements/app-localize-behavior"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/polymerelements/app-localize-behavior",
"ignore": [],
"dependencies": {
"iron-ajax": "PolymerElements/iron-ajax#1 - 2",
"intl-messageformat": "yahoo/intl-messageformat#^1.0.0",
"polymer": "Polymer/polymer#1.9 - 2"
},
"devDependencies": {
"intl": "andyearnshaw/intl.js#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#1 - 2",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
"paper-toggle-button": "PolymerElements/paper-toggle-button#1 - 2",
"paper-styles": "PolymerElements/paper-styles#1 - 2",
"test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"main": "app-localize-behavior.html",
"variants": {
"1.x": {
"dependencies": {
"iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
"polymer": "Polymer/polymer#^1.9"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "^4.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
},
"_release": "2.0.0",
"_resolution": {
"type": "version",
"tag": "v2.0.0",
"commit": "2306e2788d32ced042b24d1df5774fdada7cdf9d"
},
"_source": "https://github.com/PolymerElements/app-localize-behavior.git",
"_target": "^2.0.0",
"_originalSource": "PolymerElements/app-localize-behavior",
"_direct": true
}

33
components/app-localize-behavior/.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/app-localize-behavior/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
* Open the page in a web browser.
* Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

2
components/app-localize-behavior/.gitignore vendored
View File

@ -1,2 +0,0 @@
bower_components*
bower-1.x.json

25
components/app-localize-behavior/.travis.yml
View File

@ -1,25 +0,0 @@
language: node_js
sudo: required
dist: trusty
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
before_script:
- npm install -g polymer-cli
- polymer install --variants
script:
- xvfb-run polymer test
- >-
if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
fi
env:
global:
- secure: >-
DitCRBZSh4YLwnI3LjD1ukbftNDIx6RrUjEYwHi+RMt+OCAkKiY4N0FI9PujlGEnt7tNdaD0CTzLSu+R2vpNeMaqsrjyFKzLfWH8rFRQ1dHCvaqZ1upV92yadzqLW6dhFMMre1OzhMoU0r/4b7hUV93UYAxUZU70WYzJTSjKvv+1ul97UVLMThmulvMBDrOx8cA06SF3oRfZwdxRj7zc8knUZvRmub41exfVonEVYjXdhOstHGLvXBXxmUBOjaTdNNaIT4KvvwMMmMqyQpnoB1uZimTLAy4y4ogpnf9HttPHTSZSTdWI2avk75nlqQCFFCcBier0NWT3phgkQt0CKrKs62w2RwjAIij2/ZVhsUiGLezIuOilG3k3+UYzXHb86KtLMie573XfAsX6cC/DYozJB7NfPA79MOwa/BuzTlyDJdZfKKm8+6FCmh7xQj0OcXHdqqxzTZu40bXwjz32TLDNnkHBdJNjTQrBm//TTQsxZ8BiXiw2tg4r7vXMIr3NjiRLQSLuAiHHQ2MnryhJuvAeBf1cqgjZXxy4mG6ctdus7Fc8nl9GSkY/5VmT4BMGwxbUcdd5/EDf750jwgE/sXzYABABYXd1cwvYPwT5oPsIMOs3hUC5mls+DlTk6Y57EtezsGuvA+EWeyg0rRzuv/u3rfJtOvYV7I7kA9xe/ZU=
- secure: >-
hSCnfwhOhq23wOyRk3vBz4Gz+KBYRaCsekoW9leSQ5LRt7QYF6gESoaiqQaqQ6aL0FX4tW6DCxGStFhwvOcR8EU9J1dz04Xku21bf3haLEFGTpOyDtQwisxw2TKp6ki95FIaBsx6435UvLXn77M3c4X5YW+1N+GKfZ62A/RqP12u6q8c2Sooe70V5E4J7oQS+CW20CvdcfrlEoHgJ89hF7hyu1A5GEj0Y4TJMsNfgqBC7t3k0YMIZ8yEgXRyzxsamKVFaa69U8435Wokol4zcgyVtirXZyKyqVLGk5j5dcUlzlwx4+dpoETrtTsUcIvLyxQ/SxsqBKr3j4u8CMAmKSRkMrDI/Pf6c4Q4H9N+CVOv+VW/TAqD/CnncI9eGaTJ3Ba2HZUMmHImPgBD1a6DqHvaFLbU5J9MHWvwCRBcOwQTAVqaOppgOvmu/mpwNnq9+NJFrwR6aTDgovYzi4TMA9DdoB7O3L6fvwYjqMYRahfukBPSYX5da4DHiQV0P6wEr/Sdub/ERQSgWqXLE6e/jpl4sXBY2rII4Ao3Tc/Xg9suwHjUKvmi8axOyfm0LjE9fmGj1bkFFPKU1JIAbGOaDInbpE6fMjbgpoOeqe6hxRxdrjDn5+/odQhhhUoGNk3YIKuLSeK82lW/ZMgH0/z/NubIQjchIuKDbLqmyX7ZZ2w=

77
components/app-localize-behavior/CONTRIBUTING.md
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

91
components/app-localize-behavior/README.md
View File

@ -1,91 +0,0 @@
<!---
This README is automatically generated from the comments in these files:
app-localize-behavior.html
Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)
The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->
[![Build status](https://travis-ci.org/PolymerElements/app-localize-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/app-localize-behavior)
## Polymer.AppLocalizeBehavior
`Polymer.AppLocalizeBehavior` wraps the [format.js](http://formatjs.io/) library to
help you internationalize your application. Note that if you're on a browser that
does not natively support the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
object, you must load the polyfill yourself. An example polyfill can
be found [here](https://github.com/andyearnshaw/Intl.js/).
`Polymer.AppLocalizeBehavior` supports the same [message-syntax](http://formatjs.io/guides/message-syntax/)
of format.js, in its entirety; use the library docs as reference for the
available message formats and options.
Sample application loading resources from an external file:
```html
<dom-module id="x-app">
<template>
<div>{{localize('hello', 'name', 'Batman')}}</div>
</template>
<script>
Polymer({
is: "x-app",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'en'
},
}
attached: function() {
this.loadResources(this.resolveUrl('locales.json'));
},
});
&lt;/script>
</dom-module>
```
Alternatively, you can also inline your resources inside the app itself:
```html
<dom-module id="x-app">
<template>
<div>{{localize('hello', 'name', 'Batman')}}</div>
</template>
<script>
Polymer({
is: "x-app",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'en'
},
resources: {
value: function() {
return {
'en': { 'hello': 'My name is {name}.' },
'fr': { 'hello': 'Je m\'apelle {name}.' }
}
}
}
});
&lt;/script>
</dom-module>
```

270
components/app-localize-behavior/app-localize-behavior.html
View File

@ -1,270 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<script src="../intl-messageformat/dist/intl-messageformat.min.js"></script>
<script>
/**
* `Polymer.AppLocalizeBehavior` wraps the [format.js](http://formatjs.io/) library to
* help you internationalize your application. Note that if you're on a browser that
* does not natively support the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
* object, you must load the polyfill yourself. An example polyfill can
* be found [here](https://github.com/andyearnshaw/Intl.js/).
*
* `Polymer.AppLocalizeBehavior` supports the same [message-syntax](http://formatjs.io/guides/message-syntax/)
* of format.js, in its entirety; use the library docs as reference for the
* available message formats and options.
*
* Sample application loading resources from an external file:
*
* <dom-module id="x-app">
* <template>
* <div>{{localize('hello', 'name', 'Batman')}}</div>
* </template>
* <script>
* Polymer({
* is: "x-app",
*
* behaviors: [
* Polymer.AppLocalizeBehavior
* ],
*
* properties: {
* language: {
* value: 'en'
* },
* }
*
* attached: function() {
* this.loadResources(this.resolveUrl('locales.json'));
* },
* });
* &lt;/script>
* </dom-module>
*
* Alternatively, you can also inline your resources inside the app itself:
*
* <dom-module id="x-app">
* <template>
* <div>{{localize('hello', 'name', 'Batman')}}</div>
* </template>
* <script>
* Polymer({
* is: "x-app",
*
* behaviors: [
* Polymer.AppLocalizeBehavior
* ],
*
* properties: {
* language: {
* value: 'en'
* },
* resources: {
* value: function() {
* return {
* 'en': { 'hello': 'My name is {name}.' },
* 'fr': { 'hello': 'Je m\'apelle {name}.' }
* }
* }
* }
* });
* &lt;/script>
* </dom-module>
*
* @demo demo/index.html
* @polymerBehavior Polymer.AppLocalizeBehavior
*/
Polymer.AppLocalizeBehavior = {
/**
* Internal singleton cache. This is the private implementation of the
* behaviour; don't interact with it directly.
*/
__localizationCache: {
requests: {}, /* One iron-request per unique resources path. */
messages: {}, /* Unique localized strings. Invalidated when the language, formats or resources change. */
ajax: null /* Global iron-ajax object used to request resource files. */
},
/**
* Fired after the resources have been loaded.
*
* @event app-localize-resources-loaded
*/
/**
* Fired when the resources cannot be loaded due to an error.
*
* @event app-localize-resources-error
*/
properties: {
/**
* The language used for translation.
*/
language: {
type: String
},
/**
* The dictionary of localized messages, for each of the languages that
* are going to be used. See http://formatjs.io/guides/message-syntax/ for
* more information on the message syntax.
*
* For example, a valid dictionary would be:
* this.resources = {
* 'en': { 'greeting': 'Hello!' }, 'fr' : { 'greeting': 'Bonjour!' }
* }
*/
resources: {
type: Object
},
/**
* Optional dictionary of user defined formats, as explained here:
* http://formatjs.io/guides/message-syntax/#custom-formats
*
* For example, a valid dictionary of formats would be:
* this.formats = {
* number: { USD: { style: 'currency', currency: 'USD' } }
* }
*/
formats: {
type: Object,
value: function() { return {} }
},
/**
* If true, will use the provided key when
* the translation does not exist for that key.
*/
useKeyIfMissing: {
type: Boolean,
value: false
},
/**
* Translates a string to the current `language`. Any parameters to the
* string should be passed in order, as follows:
* `localize(stringKey, param1Name, param1Value, param2Name, param2Value)`
*/
localize: {
type: Function,
computed: '__computeLocalize(language, resources, formats)'
},
/**
* If true, will bubble up the event to the parents
*/
bubbleEvent: {
type: Boolean,
value: false
}
},
loadResources: function(path) {
var proto = this.constructor.prototype;
// Check if localCache exist just in case.
this.__checkLocalizationCache(proto);
// If the global ajax object has not been initialized, initialize and cache it.
var ajax = proto.__localizationCache.ajax;
if (!ajax) {
ajax = proto.__localizationCache.ajax = document.createElement('iron-ajax');
}
var request = proto.__localizationCache.requests[path];
if (!request) {
ajax.url = path;
var request = ajax.generateRequest();
request.completes.then(
this.__onRequestResponse.bind(this),
this.__onRequestError.bind(this));
// Cache the instance so that it can be reused if the same path is loaded.
proto.__localizationCache.requests[path] = request;
} else {
request.completes.then(
this.__onRequestResponse.bind(this),
this.__onRequestError.bind(this));
}
},
/**
* Returns a computed `localize` method, based on the current `language`.
*/
__computeLocalize: function(language, resources, formats) {
var proto = this.constructor.prototype;
// Check if localCache exist just in case.
this.__checkLocalizationCache(proto);
// Everytime any of the parameters change, invalidate the strings cache.
if (!proto.__localizationCache) {
proto['__localizationCache'] = {requests: {}, messages: {}, ajax: null};
}
proto.__localizationCache.messages = {};
return function() {
var key = arguments[0];
if (!key || !resources || !language || !resources[language])
return;
// Cache the key/value pairs for the same language, so that we don't
// do extra work if we're just reusing strings across an application.
var translatedValue = resources[language][key];
if (!translatedValue) {
return this.useKeyIfMissing ? key : '';
}
var messageKey = key + translatedValue;
var translatedMessage = proto.__localizationCache.messages[messageKey];
if (!translatedMessage) {
translatedMessage = new IntlMessageFormat(translatedValue, language, formats);
proto.__localizationCache.messages[messageKey] = translatedMessage;
}
var args = {};
for (var i = 1; i < arguments.length; i += 2) {
args[arguments[i]] = arguments[i+1];
}
return translatedMessage.format(args);
};
},
__onRequestResponse: function(event) {
this.resources = event.response;
this.fire('app-localize-resources-loaded', event, { bubbles: this.bubbleEvent});
},
__onRequestError: function(event) {
this.fire('app-localize-resources-error');
},
__checkLocalizationCache: function(proto) {
// do nothing if proto is undefined.
if(proto === undefined) return;
// In the event proto not have __localizationCache object, create it.
if(proto['__localizationCache'] === undefined) {
proto['__localizationCache'] = {requests: {}, messages: {}, ajax: null};
}
}
}
</script>

62
components/app-localize-behavior/bower.json
View File

@ -1,62 +0,0 @@
{
"name": "app-localize-behavior",
"version": "2.0.0",
"description": "A behavior to help with internationalizating apps",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"i18n",
"translation",
"localization"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/polymerelements/app-localize-behavior"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/polymerelements/app-localize-behavior",
"ignore": [],
"dependencies": {
"iron-ajax": "PolymerElements/iron-ajax#1 - 2",
"intl-messageformat": "yahoo/intl-messageformat#^1.0.0",
"polymer": "Polymer/polymer#1.9 - 2"
},
"devDependencies": {
"intl": "andyearnshaw/intl.js#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#1 - 2",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
"paper-toggle-button": "PolymerElements/paper-toggle-button#1 - 2",
"paper-styles": "PolymerElements/paper-styles#1 - 2",
"test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"main": "app-localize-behavior.html",
"variants": {
"1.x": {
"dependencies": {
"iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
"polymer": "Polymer/polymer#^1.9"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "^4.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}

50
components/app-localize-behavior/demo/common-styles.html
View File

@ -1,50 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-styles/shadow.html">
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<dom-module id="common-styles">
<template>
<style include="demo-snippet">
:host {
@apply --shadow-none;
@apply --paper-font-common-base;
display: block;
max-width: 600px;
margin: 40px auto;
}
.snippet {
@apply --shadow-elevation-2dp;
}
paper-toggle-button {
display: inline-block;
}
.lang {
text-align: center;
font-size: 20px;
}
code {
display: block;
}
.demo div {
@apply --paper-font-body1;
line-height: 1.5;
}
</style>
</template>
</dom-module>

34
components/app-localize-behavior/demo/index.html
View File

@ -1,34 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>app-localize-behavior demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="x-translate.html">
<link rel="import" href="x-local-translate.html">
<!-- Intl polyfill -->
<script src="../../intl/dist/Intl.min.js"></script>
<script src="../../intl/locale-data/jsonp/en.js"></script>
<script src="../../intl/locale-data/jsonp/fr.js"></script>
</head>
<body unresolved>
<x-translate use-key-if-missing></x-translate>
<x-local-translate></x-local-translate>
</body>
</html>

22
components/app-localize-behavior/demo/locales.json
View File

@ -1,22 +0,0 @@
{
"en": {
"header_1": "Translation and localization",
"header_2": "Plurals and genders",
"greeting": "Hello!",
"intro": "My name is {name}",
"cats": "I have {numCats, number} cats. Almost {pctBlack, number, percent} of them are black.",
"sale": "Sale begins {start, date, medium}, at {time, time, short}. Everything is {price, number, USD}.",
"fruit": "{num, plural, =0 {no apples} =1 {one apple} other {# apples}}",
"bananas": "{name} ate {num, plural, =0 {no bananas} =1 {a banana} other {# bananas}} {gender, select, male {at his house.} female {at her house.} other {at their house.}}"
},
"fr": {
"header_1": "Traduction et localisation",
"header_2": "Pluriels et les sexes",
"greeting": "Bonjour!",
"intro": "Je m'appelle {name}",
"cats": "J'ai {numCats, number} chats. Près de {pctBlack, number, percent} d'entre eux sont noirs.",
"sale": "La vente commence le {start, date, medium} à {time, time, short}. Tout est à {price, number, USD}.",
"fruit": "{num, plural, =0 {pas de pommes} =1 {une pomme} other {# pommes}}",
"bananas": "{name} {num, plural, =0 {ne} =1 {} other {}} mange {num, plural, =0 {pas de bananes} =1 {une banane} other {# bananes}} {gender, select, male {chez lui.} female {chez elle.} other {chez eux.}}"
}
}

84
components/app-localize-behavior/demo/x-local-translate.html
View File

@ -1,84 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../app-localize-behavior.html">
<link rel="import" href="common-styles.html">
<dom-module id="x-local-translate">
<template>
<style include="common-styles"></style>
<div class="lang">
<span title="english">🇬🇧 EN</span>
<paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
<span title="french">FR 🇫🇷</span>
</div>
<h4>This demo's resources are loaded statically, not from an external file.</h4>
<div class="snippet">
<div class="demo">
<div>{{localize('greeting')}}</div>
</div>
<div class="code-container">
<code>localize('greeting')</code>
</div>
</div>
</template>
<script>
Polymer({
is: "x-local-translate",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
/* Overriden from AppLocalizeBehavior */
language: {
value: 'en',
type: String
},
/* Overriden from AppLocalizeBehavior */
formats: {
type: Object,
value: function() {
return {
number: { USD: { style: 'currency', currency: 'USD' } }
};
}
},
/* Overriden from AppLocalizeBehavior */
resources: {
type: Object,
value: function() {
return {
'en': {
'greeting': 'Hello!'
},
'fr' : {
'greeting': 'Bonjour!'
}
};
}
}
},
_toggle: function() {
this.language = this.$.switch.checked ? 'fr' : 'en';
}
});
</script>
</dom-module>

97
components/app-localize-behavior/demo/x-translate.html
View File

@ -1,97 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../app-localize-behavior.html">
<link rel="import" href="common-styles.html">
<dom-module id="x-translate">
<template>
<style include="common-styles"></style>
<div class="lang">
<span title="english">🇬🇧 EN</span>
<paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
<span title="french">FR 🇫🇷</span>
</div>
<h4>{{localize('header_1')}}</h4>
<div class="snippet">
<div class="demo">
<div>{{localize('greeting')}}</div>
<div>{{localize('missing')}}</div>
<div>{{localize('intro', 'name', 'Batman')}}</div>
<div>{{localize('cats', 'numCats', 10000, 'pctBlack', 0.42)}}</div>
<div>{{localize('sale', 'start', 150, 'time', 15, 'price', 10)}}</div>
</div>
<div class="code-container">
<code>localize('greeting')</code>
<code>localize('intro', 'name', 'Batman')</code>
<code>localize('cats', 'numCats', 10000, 'pctBlack', 0.42)</code>
<!-- Dates need to be a valid JavaScript object. For an example, we
are passing a number of milliseconds from the epoch -->
<code>localize('sale', 'start', 150, 'time', 15, 'price', 10)</code>
</div>
</div>
<h4>{{localize('header_2')}}</h4>
<div class="snippet">
<div class="demo">
<div>{{localize('fruit', 'num', 0)}} / {{localize('fruit', 'num', 1)}}/ {{localize('fruit', 'num', 3)}}</div>
<div>{{localize('bananas', 'name', 'Robin', 'gender', 'male', 'num', 1)}}</div>
<div>{{localize('bananas', 'name', 'Robin', 'gender', 'female', 'num', 0)}}</div>
<div>{{localize('bananas', 'name', 'Robin', 'gender', 'other', 'num', 4)}}</div>
</div>
<div class="code-container">
<code>localize('fruit', 'num', 0) / localize('fruit', 'num', 1) / localize('fruit', 'num', 3)</code>
<code>localize('bananas', 'name', 'Robin', 'gender', 'male', 'num', 1)</code>
<code>localize('bananas', 'name', 'Robin', 'gender', 'female', 'num', 0)</code>
<code>localize('bananas', 'name', 'Robin', 'gender', 'other', 'num', 4)</code>
</div>
</div>
</template>
<script>
Polymer({
is: "x-translate",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
/* Overriden from AppLocalizeBehavior */
language: {
value: 'en',
type: String
},
/* Overriden from AppLocalizeBehavior */
formats: {
type: Object,
value: function() {
return {
number: { USD: { style: 'currency', currency: 'USD' } }
};
}
}
},
attached: function() {
this.loadResources(this.resolveUrl('locales.json'));
},
_toggle: function() {
this.language = this.$.switch.checked ? 'fr' : 'en';
}
});
</script>
</dom-module>

30
components/app-localize-behavior/index.html
View File

@ -1,30 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>app-localize-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>

375
components/app-localize-behavior/test/basic.html
View File

@ -1,375 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>app-localize-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-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<!-- Intl polyfill -->
<script src="../../intl/dist/Intl.min.js"></script>
<script src="../../intl/locale-data/jsonp/en.js"></script>
<script src="../../intl/locale-data/jsonp/fr.js"></script>
<link rel="import" href="x-translate.html">
<link rel="import" href="x-translate2.html">
<link rel="import" href="x-translate-only-imperative.html">
<link rel="import" href="x-translate-l10n.html">
</head>
<body>
<test-fixture id="basic">
<template>
<x-translate></x-translate>
</template>
</test-fixture>
<test-fixture id="missing">
<template>
<x-translate use-key-if-missing></x-translate>
</template>
</test-fixture>
<test-fixture id="basic2">
<template>
<x-translate></x-translate>
</template>
</test-fixture>
<test-fixture id="interpolated">
<template>
<x-translate2></x-translate2>
</template>
</test-fixture>
<test-fixture id="only-imperative">
<template>
<x-translate-only-imperative></x-translate-only-imperative>
</template>
</test-fixture>
<test-fixture id="l10n">
<template>
<x-translate-l10n></x-translate-l10n>
</template>
</test-fixture>
<script>
function getRequestsCache(elem) {
return elem.constructor.prototype.__localizationCache.requests;
}
function getStringsCache(elem) {
return elem.constructor.prototype.__localizationCache.messages;
}
function resetRequestsCache(elem) {
elem.constructor.prototype.__localizationCache.requests = {};
}
function resetStringsCache(elem) {
elem.constructor.prototype.__localizationCache.messages = {};
}
suite('basic', function() {
test('can translate a basic string', function() {
var app = fixture('basic');
assert.equal(app.language, 'en');
assert.equal(app.$.output.innerHTML, 'hello');
assert.equal(app.$.missing.innerHTML, '');
app.language = 'fr';
assert.equal(app.language, 'fr');
assert.equal(app.$.output.innerHTML, 'bonjour');
});
test('can handle missing keys', function() {
var app = fixture('missing');
assert.equal(app.language, 'en');
assert.equal(app.$.missing.innerHTML, 'missing');
app.language = 'fr';
assert.equal(app.language, 'fr');
assert.equal(app.$.missing.innerHTML, 'missing');
});
test('can translate a string with a parameter', function() {
var app = fixture('interpolated');
assert.equal(app.language, 'en');
assert.equal(app.$.output.innerHTML, 'my name is batman. i have 3 cats.');
app.language = 'fr';
assert.equal(app.language, 'fr');
assert.equal(app.$.output.innerHTML, 'je m\'apelle batman. j\'ai 3 chats.');
});
test('can localize a currency', function() {
var app = fixture('l10n');
app.language = 'fr';
// Note: In French, on Edge and everything else, format.js seems to
// behave differently - in not-edge, the result is "10 $US", in Edge
// it's just 10$. This isn't something we control, so check the string
// is mostly right.
// It gets better: on IE11 Win8.1, format.js returns a " " in between
// the 10,00 and the $. On every other browser, including IE11 on Win10,
// it returns an &nbsp;. Yes, this took an hour to find.
var translation = app.$.output.textContent.replace('\u00a0', ' ');
assert.equal(translation.indexOf('Tout est à 10,00 $'), 0);
app.language = 'en';
assert.equal(app.$.output.innerHTML, 'Everything is $10.00');
});
test('can translate strings imperatively', function() {
var app1 = fixture('basic');
var app2 = fixture('interpolated');
assert.equal(app1.language, 'en');
assert.equal(app2.language, 'en');
assert.equal(app1.localize('greeting'), 'hello');
assert.equal(app2.localize('intro', 'name', 'robin', 'numCats', 17), 'my name is robin. i have 17 cats.');
app1.language = 'fr';
app2.language = 'fr';
assert.equal(app1.language, 'fr');
assert.equal(app2.language, 'fr');
assert.equal(app1.localize('greeting'), 'bonjour');
assert.equal(app2.localize('intro', 'name', 'robin', 'numCats', 17), 'je m\'apelle robin. j\'ai 17 chats.');
});
test('doesnt explode if language not loaded', function() {
var app = fixture('basic');
app.language = 'fake';
assert.equal(app.localize('greeting'), undefined);
});
});
suite('external resources', function() {
var path;
test('can translate a basic string', function(done) {
var app = fixture('basic');
// Keep the tests independent by resetting the internal cache.
resetRequestsCache(app);
app.addEventListener('app-localize-resources-loaded', function() {
assert.equal(app.language, 'en');
assert.equal(app.$.output.innerHTML, 'hello');
app.language = 'fr';
assert.equal(app.language, 'fr');
assert.equal(app.$.output.innerHTML, 'bonjour');
done();
});
app.loadResources(app.resolveUrl('locales.json'));
});
test('can translate a string with a parameter', function(done) {
var app = fixture('interpolated');
// Keep the tests independent by resetting the internal cache.
resetRequestsCache(app);
app.addEventListener('app-localize-resources-loaded', function() {
assert.equal(app.language, 'en');
assert.equal(app.$.output.innerHTML, 'my name is batman. i have 3 cats.');
app.language = 'fr';
assert.equal(app.language, 'fr');
assert.equal(app.$.output.innerHTML, 'je m\'apelle batman. j\'ai 3 chats.');
done();
});
app.loadResources(app.resolveUrl('locales.json'));
});
test('can translate strings imperatively', function(done) {
var app1 = fixture('basic');
var app2 = fixture('interpolated');
// Keep the tests independent by resetting the internal cache.
resetRequestsCache(app1);
resetRequestsCache(app2);
app1.addEventListener('app-localize-resources-loaded', function() {
assert.equal(app1.language, 'en');
assert.equal(app2.language, 'en');
assert.equal(app1.localize('greeting'), 'hello');
assert.equal(app2.localize('intro', 'name', 'robin', 'numCats', 17), 'my name is robin. i have 17 cats.');
app1.language = app2.language = 'fr';
assert.equal(app1.language, 'fr');
assert.equal(app2.language, 'fr');
assert.equal(app1.localize('greeting'), 'bonjour');
assert.equal(app2.localize('intro', 'name', 'robin', 'numCats', 17), 'je m\'apelle robin. j\'ai 17 chats.');
done();
});
app1.loadResources(app1.resolveUrl('locales.json'));
app2.loadResources(app2.resolveUrl('locales.json'));
});
});
suite('json loading and caching', function() {
test('loads the same json only file once', function(done) {
// TL;DR: this test makes sure that objects of the same type, and of
// different types play together in the same, nice, way.
var app1 = fixture('basic');
var app2 = fixture('basic2'); // different type.
var app3 = fixture('interpolated');
var path = app1.resolveUrl('locales.json');
// Keep the tests independent by resetting the internal cache.
resetRequestsCache(app1);
resetRequestsCache(app2);
resetRequestsCache(app3);
// Nothing in the cache.
assert.equal(0, Object.keys(getRequestsCache(app1)).length);
assert.equal(0, Object.keys(getRequestsCache(app2)).length);
assert.equal(0, Object.keys(getRequestsCache(app3)).length);
// Once the first file has been loaded, it should be the only thing in the cache.
app1.addEventListener('app-localize-resources-loaded', function() {
assert.equal(1, Object.keys(getRequestsCache(app1)).length, 'there is 1 request cached in app1');
assert.equal(1, Object.keys(getRequestsCache(app2)).length, 'there is 1 request cached in app2');
assert.equal(1, Object.keys(getRequestsCache(app3)).length, 'there is 1 request cached in app3');
var request1 = getRequestsCache(app1)[path];
assert.notEqual(undefined, request1, 'the cached request is ok');
assert.equal(app1.resources['fr']['greeting'], 'bonjour');
// Loading the second file should not make an iron-ajax request, and re-use the one in the cache.
app2.addEventListener('app-localize-resources-loaded', function() {
assert.equal(1, Object.keys(getRequestsCache(app1)).length, 'there is 1 request cached in app1');
assert.equal(1, Object.keys(getRequestsCache(app2)).length, 'there is 1 request cached in app2');
assert.equal(1, Object.keys(getRequestsCache(app3)).length, 'there is 1 request cached in app3');
assert.equal(request1, getRequestsCache(app2)[path], 'the same request is cached');
expect(app1.resources).eql(app2.resources);
assert.equal(app2.resources['fr']['greeting'], 'bonjour');
// Loading the third file should not make an iron-ajax request, and re-use the one in the cache.
app3.addEventListener('app-localize-resources-loaded', function() {
assert.equal(1, Object.keys(getRequestsCache(app1)).length, 'there is 1 request cached in app1');
assert.equal(1, Object.keys(getRequestsCache(app2)).length, 'there is 1 request cached in app2');
assert.equal(1, Object.keys(getRequestsCache(app3)).length, 'there is 1 request cached in app3');
assert.equal(request1, getRequestsCache(app3)[path], 'the same request is cached');
expect(app1.resources).eql(app2.resources);
expect(app1.resources).eql(app3.resources);
assert.equal(app2.resources['fr']['greeting'], 'bonjour');
done();
});
app3.loadResources(path);
});
app2.loadResources(path);
});
app1.loadResources(path);
});
test('can load different json files', function(done) {
var app1 = fixture('basic');
var app2 = fixture('interpolated');
// Keep the tests independent by resetting the internal cache.
resetRequestsCache(app1);
resetRequestsCache(app2);
// Nothing in the cache.
assert.equal(0, Object.keys(getRequestsCache(app1)).length);
assert.equal(0, Object.keys(getRequestsCache(app2)).length);
var path1 = app1.resolveUrl('locales.json');
var path2 = app1.resolveUrl('locales2.json');
// Once the first file has been loaded, it should be the only thing in the cache.
app1.addEventListener('app-localize-resources-loaded', function() {
assert.equal(1, Object.keys(getRequestsCache(app1)).length, 'there is 1 request cached in app1');
assert.equal(1, Object.keys(getRequestsCache(app2)).length, 'there is 1 request cached in app2');
var request1 = getRequestsCache(app1)[path1];
assert.notEqual(undefined, request1, 'the cached request is ok');
assert.equal(app1.resources['fr']['greeting'], 'bonjour');
// Loading a different file should make a different ajax request.
app2.addEventListener('app-localize-resources-loaded', function() {
assert.equal(2, Object.keys(getRequestsCache(app1)).length, 'there are 2 requests cached in app1');
assert.equal(2, Object.keys(getRequestsCache(app2)).length, 'there are 2 requests cached in app2');
var request2 = getRequestsCache(app2)[path2];
assert.notEqual(request1, request2, 'the cached requests are different');
expect(app1.resources).to.not.eql(app2.resources, 'the apps don\'t have the same resources');
assert.equal(app2.resources['fr']['greeting'], 'bonjour!');
done();
});
app2.loadResources(app2.resolveUrl(path2));
});
app1.loadResources(app1.resolveUrl(path1));
});
});
suite('localized string caching', function() {
test('constructs the same string only once', function() {
var app = fixture('only-imperative');
// Keep the tests independent by resetting the internal cache.
resetStringsCache(app);
// Translating one string should add it to the cache.
assert.equal(app.localize('greeting'), 'hello');
assert.equal(1, Object.keys(getStringsCache(app)).length, 'there is 1 string cached');
var cachedString = getStringsCache(app)['greetinghello'];
assert.isNotNull(cachedString, 'cached string has an object');
// Translating the same string again should re-use it from the cache.
assert.equal(app.localize('greeting'), 'hello');
assert.equal(1, Object.keys(getStringsCache(app)).length, 'there is still 1 string cached');
assert.equal(cachedString, getStringsCache(app)['greetinghello'], 'cached string is the same');
// Changing the language should reset the cache.
app.language = 'fr';
assert.equal(0, Object.keys(getStringsCache(app)).length, 'the cache is empty');
// But translating a new string will re-add it to the cache.
assert.equal(app.localize('greeting'), 'bonjour');
assert.equal(1, Object.keys(getStringsCache(app)).length, 'there is 1 string cached');
var newCachedString = getStringsCache(app)['greetinghello'];
assert.notEqual(cachedString, newCachedString, 'cached string is different than before');
});
});
</script>
</body>
</html>

25
components/app-localize-behavior/test/index.html
View File

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

10
components/app-localize-behavior/test/locales.json
View File

@ -1,10 +0,0 @@
{
"en": {
"greeting": "hello",
"intro": "my name is {name}. i have {numCats, number} cats."
},
"fr": {
"greeting": "bonjour",
"intro": "je m'apelle {name}. j'ai {numCats, number} chats."
}
}

10
components/app-localize-behavior/test/locales2.json
View File

@ -1,10 +0,0 @@
{
"en": {
"greeting": "hello!",
"intro": "my name is {name}! i have {numCats, number} cats!"
},
"fr": {
"greeting": "bonjour!",
"intro": "je m'apelle {name}! j'ai {numCats, number} chats!"
}
}

56
components/app-localize-behavior/test/x-translate-l10n.html
View File

@ -1,56 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior.html">
<dom-module id="x-translate-l10n">
<template>
<div id="output">{{localize('intro', 'price', 10)}}</div>
</template>
<script>
Polymer({
is: "x-translate-l10n",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'en',
type: String
},
formats: {
type: Object,
value: function() {
return {
number: { USD: { style: 'currency', currency: 'USD' } }
};
}
},
resources: {
type: Object,
value: function() {
return {
'en': {
'intro': 'Everything is {price, number, USD}'
},
'fr' : {
'intro': 'Tout est à {price, number, USD}.'
}
};
}
}
}
});
</script>
</dom-module>

47
components/app-localize-behavior/test/x-translate-only-imperative.html
View File

@ -1,47 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior.html">
<dom-module id="x-translate-only-imperative">
<template>
</template>
<script>
Polymer({
is: "x-translate-only-imperative",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'en',
type: String
},
resources: {
type: Object,
value: function() {
return {
'en': {
'greeting': 'hello'
},
'fr' : {
'greeting': 'bonjour'
}
};
}
}
}
});
</script>
</dom-module>

49
components/app-localize-behavior/test/x-translate.html
View File

@ -1,49 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior.html">
<dom-module id="x-translate">
<template>
<div id="output">{{localize('greeting')}}</div>
<div id="missing">{{localize('missing')}}</div>
</template>
<script>
Polymer({
is: "x-translate",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'en',
type: String
},
resources: {
type: Object,
value: function() {
return {
'en': {
'greeting': 'hello'
},
'fr' : {
'greeting': 'bonjour'
}
};
}
}
}
});
</script>
</dom-module>

48
components/app-localize-behavior/test/x-translate2.html
View File

@ -1,48 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior.html">
<dom-module id="x-translate2">
<template>
<div id="output">{{localize('intro', 'name', 'batman', 'numCats', 3)}}</div>
</template>
<script>
Polymer({
is: "x-translate2",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'en',
type: String
},
resources: {
type: Object,
value: function() {
return {
'en': {
'intro': 'my name is {name}. i have {numCats, number} cats.'
},
'fr' : {
'intro': 'je m\'apelle {name}. j\'ai {numCats, number} chats.'
}
};
}
}
}
});
</script>
</dom-module>

76
components/app-route/.bower.json
View File

@ -1,76 +0,0 @@
{
"name": "app-route",
"version": "2.0.3",
"authors": [
"The Polymer Authors"
],
"description": "App routing expressed as Polymer Custom Elements.",
"main": [
"app-route.html",
"app-location.html",
"app-route-converter.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/app-route",
"private": true,
"ignore": [],
"dependencies": {
"iron-location": "PolymerElements/iron-location#1 - 2",
"polymer": "Polymer/polymer#1.9 - 2"
},
"devDependencies": {
"google-youtube": "GoogleWebComponents/google-youtube#1 - 2",
"iron-component-page": "polymerelements/iron-component-page#1 - 2",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
"iron-pages": "PolymerElements/iron-pages#1 - 2",
"iron-test-helpers": "polymerelements/iron-test-helpers#1 - 2",
"paper-card": "PolymerElements/paper-card#1 - 2",
"paper-icon-button": "polymerelements/paper-icon-button#1 - 2",
"paper-input": "polymerelements/paper-input#1 - 2",
"paper-spinner": "PolymerElements/paper-spinner#1 - 2",
"paper-styles": "PolymerElements/paper-styles#1 - 2",
"paper-toggle-button": "polymerelements/paper-toggle-button#1 - 2",
"url": "webcomponents/URL#^0.5.7",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"variants": {
"1.x": {
"dependencies": {
"iron-location": "polymerelements/iron-location#^0.8.1",
"polymer": "Polymer/polymer#^1.9"
},
"devDependencies": {
"google-youtube": "GoogleWebComponents/google-youtube#^1.2.1",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.0",
"iron-pages": "PolymerElements/iron-pages#^1.0.7",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"paper-card": "PolymerElements/paper-card#^1.1.1",
"paper-icon-button": "polymerelements/paper-icon-button#^v1.0.0",
"paper-input": "polymerelements/paper-input#^1.1.2",
"paper-spinner": "PolymerElements/paper-spinner#^1.1.1",
"paper-styles": "polymerelements/paper-styles#^1.0.13",
"paper-toggle-button": "polymerelements/paper-toggle-button#^1.0.0",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
},
"_release": "2.0.3",
"_resolution": {
"type": "version",
"tag": "v2.0.3",
"commit": "951dc29dcf73583aee5e629bae3f1065107fd281"
},
"_source": "https://github.com/PolymerElements/app-route.git",
"_target": "^2.0.3",
"_originalSource": "PolymerElements/app-route",
"_direct": true
}

33
components/app-route/.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/app-route/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/hirore/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
* Open the page in a web browser.
* Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

2
components/app-route/.gitignore vendored
View File

@ -1,2 +0,0 @@
bower_components*
bower-*.json

25
components/app-route/.travis.yml
View File

@ -1,25 +0,0 @@
language: node_js
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
before_script:
- npm install -g polymer-cli
- polymer install --variants
script:
- xvfb-run polymer test
- >-
if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
fi
env:
global:
- secure: >-
WdFRmsbFi5zjdD/yaGR0HITPFsjSWeVYj8JcLE95nUN0fkkJuNh/A0/cDHDcDpxzY4xCNdc/IwPTtE4+awCGavot71OXlpEYD8aZUdVw9VcYVTc1IG2B/hgFcdYhXHYOLbs7JlOA/H6/RSiOensRv7QESNY2cMGzRsccav9jdAbLJqHNPI5orMRBT6/H5roZvXXEn5XmIemjCMwtGlqUeRd3nHM2n0PsQKETb+8Y04fTFuqggSEVt/SgU/UdNNm2T2mVFUDWChvjAM36l4FvgUKZm8gh2CYrXc0rHOVt7BCJN5OzZSwCmxxauhUe+7QOgZO3UE5l+M+MX9CjnSdy/HJRauMJy2eCSr9RDoChPKZOC14QrZff06L9WhDnVEHkz8PN2mwP73/uDVYyJC9Szs+4MSKK+WEIIiywEnxCp2Nq9eBNoWNDySOaud+9WxLosh01bTvytVZrd3Lqkf3MUm2sJ+v17e4JagW13zwBXjxnLP1V+H+IP/imrRRV9x5gdvK+9iL3ZYsIQmcEkqNlWrqHe3eZTgpkc/HhewfZCu49ClM6pnoJiC/7/YM3CarwkfMhGJKDU5iXfJiQABIfZ3XhTKG7nltz6VRpm8eFwxInpxNAIBghkz6PGeESHgtmsoQKtGqAg7+cRfjTS9uLMVomYHWPz0brCIQloAjSKc8=
- secure: >-
k6zYpUF0NdxNqVyfCbEztJ25Z229mpcvSdHfkOF8YqFse+1CkSR1M83Dts1K34eK43Yov375YJ/Op/MXEA0wrbnyEDg/AvwqBv5XZTslIvOjA1WvZJDGBiaZ6lvqs6tEhLfB79eZvTHP8DSDlLabklDAPaio1VC+Q6zyLIlsTIr6fH1VK1gX/uHkvSGKl8C9bfeGHgFlXaWmShN+FvLwW4PiRw2MwzXeq/qQqfS0Nn3gtuGN2kNNBpKVJwcDkYDOcJ2+49ojF8RAdbt8hsZkjGq21hpY6eKhbte66guN7lRTKY5+g2aLkg1CrBp9ZHZ4kAlfbhibhiLt/W1UbXUL/nnTFkrotuJ6vdU6gLN0EhjZN3bMAtKqHC+Bl2223ClNMs17iXReSqqOSc9D3gL9b3FYqQElS4bQIa+0L76TbkMM/H6ilQjSIvVnUXLszMIeyliIVpnI0ClTUbqe5Et51urk+KjJrOE95wyxkiL2bzKxcXCLzdvSy0nxwwcu7DnBQPG0Fg6/JVRMHM17PDhjgQLSvKr8wXtO042xzAosoZuDVOHHgpA5v9iKI/xPUseu3utfBT5ZGcyjKKuxI9Dsjoi4Go0B6uQ4rY/XUp+k4aa1Ucg3Ngx8zYgzJlFGiZq7OnG+quSTpZ32hpQqDmtYKNMxf5p/YRhxWSeuBWheLeQ=
dist: trusty
sudo: required

77
components/app-route/CONTRIBUTING.md
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/hirore/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/hirore/edit?html,output](https://jsbin.com/hirore/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

217
components/app-route/README.md
View File

@ -1,217 +0,0 @@
<!---
This README is automatically generated from the comments in these files:
app-location.html app-route-converter-behavior.html app-route-converter.html app-route.html
Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)
The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->
[![Build status](https://travis-ci.org/PolymerElements/app-route.svg?branch=master)](https://travis-ci.org/PolymerElements/app-route)
## &lt;app-route&gt;
`app-route` is an element that enables declarative, self-describing routing
for a web app.
> *n.b. app-route is still in beta. We expect it will need some changes. We're counting on your feedback!*
In its typical usage, a `app-route` element consumes an object that describes
some state about the current route, via the `route` property. It then parses
that state using the `pattern` property, and produces two artifacts: some `data`
related to the `route`, and a `tail` that contains the rest of the `route` that
did not match.
Here is a basic example, when used with `app-location`:
```html
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{data}}"
tail="{{tail}}">
</app-route>
```
In the above example, the `app-location` produces a `route` value. Then, the
`route.path` property is matched by comparing it to the `pattern` property. If
the `pattern` property matches `route.path`, the `app-route` will set or update
its `data` property with an object whose properties correspond to the parameters
in `pattern`. So, in the above example, if `route.path` was `'/about'`, the value
of `data` would be `{"page": "about"}`.
The `tail` property represents the remaining part of the route state after the
`pattern` has been applied to a matching `route`.
Here is another example, where `tail` is used:
```html
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<app-route
route="{{subroute}}"
pattern="/:id"
data="{{subrouteData}}">
</app-route>
```
In the above example, there are two `app-route` elements. The first
`app-route` consumes a `route`. When the `route` is matched, the first
`app-route` also produces `routeData` from its `data`, and `subroute` from
its `tail`. The second `app-route` consumes the `subroute`, and when it
matches, it produces an object called `subrouteData` from its `data`.
So, when `route.path` is `'/about'`, the `routeData` object will look like
this: `{ page: 'about' }`
And `subrouteData` will be null. However, if `route.path` changes to
`'/article/123'`, the `routeData` object will look like this:
`{ page: 'article' }`
And the `subrouteData` will look like this: `{ id: '123' }`
`app-route` is responsive to bi-directional changes to the `data` objects
they produce. So, if `routeData.page` changed from `'article'` to `'about'`,
the `app-route` will update `route.path`. This in-turn will update the
`app-location`, and cause the global location bar to change its value.
## &lt;app-location&gt;
`app-location` is an element that provides synchronization between the
browser location bar and the state of an app. When created, `app-location`
elements will automatically watch the global location for changes. As changes
occur, `app-location` produces and updates an object called `route`. This
`route` object is suitable for passing into a `app-route`, and other similar
elements.
An example of the public API of a route object that describes the URL
`https://elements.polymer-project.org/elements/app-location`:
```css
{
prefix: '',
path: '/elements/app-location'
}
```
Example Usage:
```html
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/:page" data="{{data}}"></app-route>
```
As you can see above, the `app-location` element produces a `route` and that
property is then bound into the `app-route` element. The bindings are two-
directional, so when changes to the `route` object occur within `app-route`,
they automatically reflect back to the global location.
### Hashes vs Paths
By default `app-location` routes using the pathname portion of the URL. This has
broad browser support but it does require cooperation of the backend server. An
`app-location` can be configured to use the hash part of a URL instead using
the `use-hash-as-path` attribute, like so:
```html
<app-location route="{{route}}" use-hash-as-path></app-location>
```
### Integrating with other routing code
There is no standard event that is fired when window.location is modified.
`app-location` fires a `location-changed` event on `window` when it updates the
location. It also listens for that same event, and re-reads the URL when it's
fired. This makes it very easy to interop with other routing code.
So for example if you want to navigate to `/new_path` imperatively you could
call `window.location.pushState` or `window.location.replaceState` followed by
firing a `location-changed` event on `window`. i.e.
```javascript
window.history.pushState({}, null, '/new_path');
window.dispatchEvent(new CustomEvent('location-changed'));
```
## &lt;app-route-converter&gt;
`app-route-converter` provides a means to convert a path and query
parameters into a route object and vice versa. This produced route object
is to be fed into route-consuming elements such as `app-route`.
> n.b. This element is intended to be a primitive of the routing system and for
creating bespoke routing solutions from scratch. To simply include routing in
an app, please refer to [app-location](https://github.com/PolymerElements/app-route/blob/master/app-location.html)
and [app-route](https://github.com/PolymerElements/app-route/blob/master/app-route.html).
An example of a route object that describes
`https://elements.polymer-project.org/elements/app-route-converter?foo=bar&baz=qux`
and should be passed to other `app-route` elements:
```css
{
prefix: '',
path: '/elements/app-route-converter',
__queryParams: {
foo: 'bar',
baz: 'qux'
}
}
```
`__queryParams` is private to discourage directly data-binding to it. This is so
that routing elements like `app-route` can intermediate changes to the query
params and choose whether to propagate them upstream or not. `app-route` for
example will not propagate changes to its `queryParams` property if it is not
currently active. A public queryParams object will also be produced in which you
should perform data-binding operations.
Example Usage:
```html
<iron-location path="{{path}}" query="{{query}}"></iron-location>
<iron-query-params
params-string="{{query}}"
params-object="{{queryParams}}">
</iron-query-params>
<app-route-converter
path="{{path}}"
query-params="{{queryParams}}"
route="{{route}}">
</app-route-converter>
<app-route route='{{route}}' pattern='/:page' data='{{data}}'>
</app-route>
```
This is a simplified implementation of the `app-location` element. Here the
`iron-location` produces a path and a query, the `iron-query-params` consumes
the query and produces a queryParams object, and the `app-route-converter`
consumes the path and the query params and converts it into a route which is in
turn is consumed by the `app-route`.
## Polymer.AppRouteConverterBehavior
Provides bidirectional mapping between `path` and `queryParams` and a
app-route compatible `route` object.
For more information, see the docs for `app-route-converter`.

205
components/app-route/app-location.html
View File

@ -1,205 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-location/iron-location.html">
<link rel="import" href="../iron-location/iron-query-params.html">
<link rel="import" href="app-route-converter-behavior.html">
<!--
`app-location` is an element that provides synchronization between the
browser location bar and the state of an app. When created, `app-location`
elements will automatically watch the global location for changes. As changes
occur, `app-location` produces and updates an object called `route`. This
`route` object is suitable for passing into a `app-route`, and other similar
elements.
An example of the public API of a route object that describes the URL
`https://elements.polymer-project.org/elements/app-location`:
{
prefix: '',
path: '/elements/app-location'
}
Example Usage:
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/:page" data="{{data}}"></app-route>
As you can see above, the `app-location` element produces a `route` and that
property is then bound into the `app-route` element. The bindings are two-
directional, so when changes to the `route` object occur within `app-route`,
they automatically reflect back to the global location.
### Hashes vs Paths
By default `app-location` routes using the pathname portion of the URL. This has
broad browser support but it does require cooperation of the backend server. An
`app-location` can be configured to use the hash part of a URL instead using
the `use-hash-as-path` attribute, like so:
<app-location route="{{route}}" use-hash-as-path></app-location>
### Integrating with other routing code
There is no standard event that is fired when window.location is modified.
`app-location` fires a `location-changed` event on `window` when it updates the
location. It also listens for that same event, and re-reads the URL when it's
fired. This makes it very easy to interop with other routing code.
So for example if you want to navigate to `/new_path` imperatively you could
call `window.location.pushState` or `window.location.replaceState` followed by
firing a `location-changed` event on `window`. i.e.
window.history.pushState({}, null, '/new_path');
window.dispatchEvent(new CustomEvent('location-changed'));
@element app-location
@demo demo/index.html
-->
<dom-module id="app-location">
<template>
<iron-query-params
params-string="{{__query}}"
params-object="{{queryParams}}">
</iron-query-params>
<iron-location
path="{{__path}}"
query="{{__query}}"
hash="{{__hash}}"
url-space-regex={{urlSpaceRegex}}>
</iron-location>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'app-location',
properties: {
/**
* A model representing the deserialized path through the route tree, as
* well as the current queryParams.
*/
route: {
type: Object,
notify: true
},
/**
* In many scenarios, it is convenient to treat the `hash` as a stand-in
* alternative to the `path`. For example, if deploying an app to a static
* web server (e.g., Github Pages) - where one does not have control over
* server-side routing - it is usually a better experience to use the hash
* to represent paths through one's app.
*
* When this property is set to true, the `hash` will be used in place of
* the `path` for generating a `route`.
*/
useHashAsPath: {
type: Boolean,
value: false
},
/**
* A regexp that defines the set of URLs that should be considered part
* of this web app.
*
* Clicking on a link that matches this regex won't result in a full page
* navigation, but will instead just update the URL state in place.
*
* This regexp is given everything after the origin in an absolute
* URL. So to match just URLs that start with /search/ do:
* url-space-regex="^/search/"
*
* @type {string|RegExp}
*/
urlSpaceRegex: {
type: String,
notify: true
},
/**
* A set of key/value pairs that are universally accessible to branches
* of the route tree.
*/
__queryParams: {
type: Object
},
/**
* The pathname component of the current URL.
*/
__path: {
type: String
},
/**
* The query string portion of the current URL.
*/
__query: {
type: String
},
/**
* The hash portion of the current URL.
*/
__hash: {
type: String
},
/**
* The route path, which will be either the hash or the path, depending
* on useHashAsPath.
*/
path: {
type: String,
observer: '__onPathChanged'
},
/**
* Whether or not the ready function has been called.
*/
_isReady: {
type: Boolean
}
},
behaviors: [Polymer.AppRouteConverterBehavior],
observers: [
'__computeRoutePath(useHashAsPath, __hash, __path)'
],
ready: function() {
this._isReady = true;
},
__computeRoutePath: function() {
this.path = this.useHashAsPath ? this.__hash : this.__path;
},
__onPathChanged: function() {
if (!this._isReady) {
return;
}
if (this.useHashAsPath) {
this.__hash = this.path;
} else {
this.__path = this.path;
}
}
});
})();
</script>
</dom-module>

112
components/app-route/app-route-converter-behavior.html
View File

@ -1,112 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script>
(function() {
'use strict';
/**
* Provides bidirectional mapping between `path` and `queryParams` and a
* app-route compatible `route` object.
*
* For more information, see the docs for `app-route-converter`.
*
* @polymerBehavior
*/
Polymer.AppRouteConverterBehavior = {
properties: {
/**
* A model representing the deserialized path through the route tree, as
* well as the current queryParams.
*
* A route object is the kernel of the routing system. It is intended to
* be fed into consuming elements such as `app-route`.
*
* @type {?Object}
*/
route: {
type: Object,
notify: true
},
/**
* A set of key/value pairs that are universally accessible to branches of
* the route tree.
*
* @type {?Object}
*/
queryParams: {
type: Object,
notify: true
},
/**
* The serialized path through the route tree. This corresponds to the
* `window.location.pathname` value, and will update to reflect changes
* to that value.
*/
path: {
type: String,
notify: true,
}
},
observers: [
'_locationChanged(path, queryParams)',
'_routeChanged(route.prefix, route.path)',
'_routeQueryParamsChanged(route.__queryParams)'
],
created: function() {
this.linkPaths('route.__queryParams', 'queryParams');
this.linkPaths('queryParams', 'route.__queryParams');
},
/**
* Handler called when the path or queryParams change.
*/
_locationChanged: function() {
if (this.route &&
this.route.path === this.path &&
this.queryParams === this.route.__queryParams) {
return;
}
this.route = {
prefix: '',
path: this.path,
__queryParams: this.queryParams
};
},
/**
* Handler called when the route prefix and route path change.
*/
_routeChanged: function() {
if (!this.route) {
return;
}
this.path = this.route.prefix + this.route.path;
},
/**
* Handler called when the route queryParams change.
*
* @param {Object} queryParams A set of key/value pairs that are
* universally accessible to branches of the route tree.
*/
_routeQueryParamsChanged: function(queryParams) {
if (!this.route) {
return;
}
this.queryParams = queryParams;
}
};
})();
</script>

79
components/app-route/app-route-converter.html
View File

@ -1,79 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="./app-route-converter-behavior.html">
<!--
`app-route-converter` provides a means to convert a path and query
parameters into a route object and vice versa. This produced route object
is to be fed into route-consuming elements such as `app-route`.
> n.b. This element is intended to be a primitive of the routing system and for
creating bespoke routing solutions from scratch. To simply include routing in
an app, please refer to [app-location](https://github.com/PolymerElements/app-route/blob/master/app-location.html)
and [app-route](https://github.com/PolymerElements/app-route/blob/master/app-route.html).
An example of a route object that describes
`https://elements.polymer-project.org/elements/app-route-converter?foo=bar&baz=qux`
and should be passed to other `app-route` elements:
{
prefix: '',
path: '/elements/app-route-converter',
__queryParams: {
foo: 'bar',
baz: 'qux'
}
}
`__queryParams` is private to discourage directly data-binding to it. This is so
that routing elements like `app-route` can intermediate changes to the query
params and choose whether to propagate them upstream or not. `app-route` for
example will not propagate changes to its `queryParams` property if it is not
currently active. A public queryParams object will also be produced in which you
should perform data-binding operations.
Example Usage:
<iron-location path="{{path}}" query="{{query}}"></iron-location>
<iron-query-params
params-string="{{query}}"
params-object="{{queryParams}}">
</iron-query-params>
<app-route-converter
path="{{path}}"
query-params="{{queryParams}}"
route="{{route}}">
</app-route-converter>
<app-route route='{{route}}' pattern='/:page' data='{{data}}'>
</app-route>
This is a simplified implementation of the `app-location` element. Here the
`iron-location` produces a path and a query, the `iron-query-params` consumes
the query and produces a queryParams object, and the `app-route-converter`
consumes the path and the query params and converts it into a route which is in
turn is consumed by the `app-route`.
@element app-route-converter
@demo demo/index.html
-->
<script>
(function() {
'use strict';
Polymer({
is: 'app-route-converter',
behaviors: [Polymer.AppRouteConverterBehavior]
});
})();
</script>

411
components/app-route/app-route.html
View File

@ -1,411 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<!--
`app-route` is an element that enables declarative, self-describing routing
for a web app.
> *n.b. app-route is still in beta. We expect it will need some changes. We're counting on your feedback!*
In its typical usage, a `app-route` element consumes an object that describes
some state about the current route, via the `route` property. It then parses
that state using the `pattern` property, and produces two artifacts: some `data`
related to the `route`, and a `tail` that contains the rest of the `route` that
did not match.
Here is a basic example, when used with `app-location`:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{data}}"
tail="{{tail}}">
</app-route>
In the above example, the `app-location` produces a `route` value. Then, the
`route.path` property is matched by comparing it to the `pattern` property. If
the `pattern` property matches `route.path`, the `app-route` will set or update
its `data` property with an object whose properties correspond to the parameters
in `pattern`. So, in the above example, if `route.path` was `'/about'`, the value
of `data` would be `{"page": "about"}`.
The `tail` property represents the remaining part of the route state after the
`pattern` has been applied to a matching `route`.
Here is another example, where `tail` is used:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<app-route
route="{{subroute}}"
pattern="/:id"
data="{{subrouteData}}">
</app-route>
In the above example, there are two `app-route` elements. The first
`app-route` consumes a `route`. When the `route` is matched, the first
`app-route` also produces `routeData` from its `data`, and `subroute` from
its `tail`. The second `app-route` consumes the `subroute`, and when it
matches, it produces an object called `subrouteData` from its `data`.
So, when `route.path` is `'/about'`, the `routeData` object will look like
this: `{ page: 'about' }`
And `subrouteData` will be null. However, if `route.path` changes to
`'/article/123'`, the `routeData` object will look like this:
`{ page: 'article' }`
And the `subrouteData` will look like this: `{ id: '123' }`
`app-route` is responsive to bi-directional changes to the `data` objects
they produce. So, if `routeData.page` changed from `'article'` to `'about'`,
the `app-route` will update `route.path`. This in-turn will update the
`app-location`, and cause the global location bar to change its value.
@element app-route
@demo demo/index.html
@demo demo/data-loading-demo.html
@demo demo/simple-demo.html
-->
<script>
(function() {
'use strict';
Polymer({
is: 'app-route',
properties: {
/**
* The URL component managed by this element.
*/
route: {
type: Object,
notify: true
},
/**
* The pattern of slash-separated segments to match `route.path` against.
*
* For example the pattern "/foo" will match "/foo" or "/foo/bar"
* but not "/foobar".
*
* Path segments like `/:named` are mapped to properties on the `data` object.
*/
pattern: {
type: String
},
/**
* The parameterized values that are extracted from the route as
* described by `pattern`.
*/
data: {
type: Object,
value: function() {return {};},
notify: true
},
/**
* @type {?Object}
*/
queryParams: {
type: Object,
value: function() {
return {};
},
notify: true
},
/**
* The part of `route.path` NOT consumed by `pattern`.
*/
tail: {
type: Object,
value: function() {return {path: null, prefix: null, __queryParams: null};},
notify: true
},
/**
* Whether the current route is active. True if `route.path` matches the
* `pattern`, false otherwise.
*/
active: {
type: Boolean,
notify: true,
readOnly: true
},
_queryParamsUpdating: {
type: Boolean,
value: false
},
/**
* @type {?string}
*/
_matched: {
type: String,
value: ''
}
},
observers: [
'__tryToMatch(route.path, pattern)',
'__updatePathOnDataChange(data.*)',
'__tailPathChanged(tail.path)',
'__routeQueryParamsChanged(route.__queryParams)',
'__tailQueryParamsChanged(tail.__queryParams)',
'__queryParamsChanged(queryParams.*)'
],
created: function() {
this.linkPaths('route.__queryParams', 'tail.__queryParams');
this.linkPaths('tail.__queryParams', 'route.__queryParams');
},
/**
* Deal with the query params object being assigned to wholesale.
*/
__routeQueryParamsChanged: function(queryParams) {
if (queryParams && this.tail) {
if (this.tail.__queryParams !== queryParams) {
this.set('tail.__queryParams', queryParams);
}
if (!this.active || this._queryParamsUpdating) {
return;
}
// Copy queryParams and track whether there are any differences compared
// to the existing query params.
var copyOfQueryParams = {};
var anythingChanged = false;
for (var key in queryParams) {
copyOfQueryParams[key] = queryParams[key];
if (anythingChanged ||
!this.queryParams ||
queryParams[key] !== this.queryParams[key]) {
anythingChanged = true;
}
}
// Need to check whether any keys were deleted
for (var key in this.queryParams) {
if (anythingChanged || !(key in queryParams)) {
anythingChanged = true;
break;
}
}
if (!anythingChanged) {
return;
}
this._queryParamsUpdating = true;
this.set('queryParams', copyOfQueryParams);
this._queryParamsUpdating = false;
}
},
__tailQueryParamsChanged: function(queryParams) {
if (queryParams && this.route && this.route.__queryParams != queryParams) {
this.set('route.__queryParams', queryParams);
}
},
__queryParamsChanged: function(changes) {
if (!this.active || this._queryParamsUpdating) {
return;
}
this.set('route.__' + changes.path, changes.value);
},
__resetProperties: function() {
this._setActive(false);
this._matched = null;
},
__tryToMatch: function() {
if (!this.route) {
return;
}
var path = this.route.path;
var pattern = this.pattern;
if (!pattern) {
return;
}
if (!path) {
this.__resetProperties();
return;
}
var remainingPieces = path.split('/');
var patternPieces = pattern.split('/');
var matched = [];
var namedMatches = {};
for (var i=0; i < patternPieces.length; i++) {
var patternPiece = patternPieces[i];
if (!patternPiece && patternPiece !== '') {
break;
}
var pathPiece = remainingPieces.shift();
// We don't match this path.
if (!pathPiece && pathPiece !== '') {
this.__resetProperties();
return;
}
matched.push(pathPiece);
if (patternPiece.charAt(0) == ':') {
namedMatches[patternPiece.slice(1)] = pathPiece;
} else if (patternPiece !== pathPiece) {
this.__resetProperties();
return;
}
}
this._matched = matched.join('/');
// Properties that must be updated atomically.
var propertyUpdates = {};
//this.active
if (!this.active) {
propertyUpdates.active = true;
}
// this.tail
var tailPrefix = this.route.prefix + this._matched;
var tailPath = remainingPieces.join('/');
if (remainingPieces.length > 0) {
tailPath = '/' + tailPath;
}
if (!this.tail ||
this.tail.prefix !== tailPrefix ||
this.tail.path !== tailPath) {
propertyUpdates.tail = {
prefix: tailPrefix,
path: tailPath,
__queryParams: this.route.__queryParams
};
}
// this.data
propertyUpdates.data = namedMatches;
this._dataInUrl = {};
for (var key in namedMatches) {
this._dataInUrl[key] = namedMatches[key];
}
if (this.setProperties) {
// atomic update
this.setProperties(propertyUpdates, true);
} else {
this.__setMulti(propertyUpdates);
}
},
__tailPathChanged: function(path) {
if (!this.active) {
return;
}
var tailPath = path;
var newPath = this._matched;
if (tailPath) {
if (tailPath.charAt(0) !== '/') {
tailPath = '/' + tailPath;
}
newPath += tailPath;
}
this.set('route.path', newPath);
},
__updatePathOnDataChange: function() {
if (!this.route || !this.active) {
return;
}
var newPath = this.__getLink({});
var oldPath = this.__getLink(this._dataInUrl);
if (newPath === oldPath) {
return;
}
this.set('route.path', newPath);
},
__getLink: function(overrideValues) {
var values = {tail: null};
for (var key in this.data) {
values[key] = this.data[key];
}
for (var key in overrideValues) {
values[key] = overrideValues[key];
}
var patternPieces = this.pattern.split('/');
var interp = patternPieces.map(function(value) {
if (value[0] == ':') {
value = values[value.slice(1)];
}
return value;
}, this);
if (values.tail && values.tail.path) {
if (interp.length > 0 && values.tail.path.charAt(0) === '/') {
interp.push(values.tail.path.slice(1));
} else {
interp.push(values.tail.path);
}
}
return interp.join('/');
},
__setMulti: function(setObj) {
// HACK(rictic): skirting around 1.0's lack of a setMulti by poking at
// internal data structures. I would not advise that you copy this
// example.
//
// In the future this will be a feature of Polymer itself.
// See: https://github.com/Polymer/polymer/issues/3640
//
// Hacking around with private methods like this is juggling footguns,
// and is likely to have unexpected and unsupported rough edges.
//
// Be ye so warned.
for (var property in setObj) {
this._propertySetter(property, setObj[property]);
}
//notify in a specific order
if (setObj.data !== undefined) {
this._pathEffector('data', this.data);
this._notifyChange('data');
}
if (setObj.active !== undefined) {
this._pathEffector('active', this.active);
this._notifyChange('active');
}
if (setObj.tail !== undefined) {
this._pathEffector('tail', this.tail);
this._notifyChange('tail');
}
}
});
})();
</script>

66
components/app-route/bower.json
View File

@ -1,66 +0,0 @@
{
"name": "app-route",
"version": "2.0.3",
"authors": [
"The Polymer Authors"
],
"description": "App routing expressed as Polymer Custom Elements.",
"main": [
"app-route.html",
"app-location.html",
"app-route-converter.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/app-route",
"private": true,
"ignore": [],
"dependencies": {
"iron-location": "PolymerElements/iron-location#1 - 2",
"polymer": "Polymer/polymer#1.9 - 2"
},
"devDependencies": {
"google-youtube": "GoogleWebComponents/google-youtube#1 - 2",
"iron-component-page": "polymerelements/iron-component-page#1 - 2",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
"iron-pages": "PolymerElements/iron-pages#1 - 2",
"iron-test-helpers": "polymerelements/iron-test-helpers#1 - 2",
"paper-card": "PolymerElements/paper-card#1 - 2",
"paper-icon-button": "polymerelements/paper-icon-button#1 - 2",
"paper-input": "polymerelements/paper-input#1 - 2",
"paper-spinner": "PolymerElements/paper-spinner#1 - 2",
"paper-styles": "PolymerElements/paper-styles#1 - 2",
"paper-toggle-button": "polymerelements/paper-toggle-button#1 - 2",
"url": "webcomponents/URL#^0.5.7",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"variants": {
"1.x": {
"dependencies": {
"iron-location": "polymerelements/iron-location#^0.8.1",
"polymer": "Polymer/polymer#^1.9"
},
"devDependencies": {
"google-youtube": "GoogleWebComponents/google-youtube#^1.2.1",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.0",
"iron-pages": "PolymerElements/iron-pages#^1.0.7",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"paper-card": "PolymerElements/paper-card#^1.1.1",
"paper-icon-button": "polymerelements/paper-icon-button#^v1.0.0",
"paper-input": "polymerelements/paper-input#^1.1.2",
"paper-spinner": "PolymerElements/paper-spinner#^1.1.1",
"paper-styles": "polymerelements/paper-styles#^1.0.13",
"paper-toggle-button": "polymerelements/paper-toggle-button#^1.0.0",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}

35
components/app-route/demo/data-loading-demo.html
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<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>carbon-route data loading example</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/url-bar.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="./data-loading-demo/flickr-search-demo.html">
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</head>
<body>
<url-bar></url-bar>
<flickr-search-demo></flickr-search-demo>
</body></html>

110
components/app-route/demo/data-loading-demo/flickr-image-page.html
View File

@ -1,110 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-ajax/iron-ajax.html">
<link rel="import" href="../../../paper-spinner/paper-spinner.html">
<link rel="import" href="../../app-route.html">
<dom-module id="flickr-image-page">
<template>
<style>
paper-spinner {
display: block;
}
.tags span {
display: inline-block;
padding-right: 10px;
font-size: 110%;
}
.tags span::after {
content: ', ';
}
.tags span:last-of-type::after {
content: '';
}
</style>
<app-route route="{{route}}" pattern="/:farm/:server/:id/:secret" data="{{data}}">
</app-route>
<img src="{{_computeSrc(data)}}">
<iron-ajax auto url="https://www.flickr.com/services/rest/"
handle-as="json"
params="{{params}}"
last-response="{{metadata}}"
last-error="{{error}}"
loading="{{loading}}">
</iron-ajax>
<paper-spinner active="{{loading}}"></paper-spinner>
<div>
<h1>{{metadata.photo.title._content}}</h1>
<div class="tags">
<template is="dom-repeat" items="{{metadata.photo.tags.tag}}">
<span>{{item.raw}}</span>
</template>
</div>
<div>
<ul>
<template is="dom-repeat" items="{{metadata.photo.urls.url}}">
<li>
<a target="_blank" href="{{item._content}}">
{{item._content}}
</a>
</li>
</template>
</ul>
</div>
</div>
</template>
<script>
Polymer({
is: 'flickr-image-page',
properties: {
apiKey: {
type: String,
},
params: {
type: Object,
computed: '_computeParams(apiKey, data.id, data.secret)'
},
route: {
type: Object
}
},
observers: [
'_clearOldMetadata(route.path)'
],
_clearOldMetadata: function() {
this.metadata = null;
},
_computeParams: function(apiKey, id, secret) {
return {
method: 'flickr.photos.getInfo',
api_key: apiKey,
photo_id: id,
secret: secret,
format: 'json',
nojsoncallback: 1
};
},
_computeSrc: function(photo) {
if (!photo || !photo.farm) {
return '';
}
return 'https://farm' + photo.farm + '.staticflickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret + '.jpg';
}
});
</script>
</dom-module>

66
components/app-route/demo/data-loading-demo/flickr-search-demo.html
View File

@ -1,66 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-pages/iron-pages.html">
<link rel="import" href="../../app-location.html">
<link rel="import" href="../../app-route.html">
<link rel="import" href="./flickr-search-page.html">
<link rel="import" href="./flickr-image-page.html">
<dom-module id="flickr-search-demo">
<template>
<style>
a {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
}
</style>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route route="{{route}}" pattern="/:page" data="{{data}}">
</app-route>
<app-route route="{{route}}" pattern="/search" tail="{{searchRoute}}">
</app-route>
<app-route route="{{route}}" pattern="/image" tail="{{imageRoute}}">
</app-route>
<h1><a href="#/search/">Public Domain Image Search</a></h1>
<iron-pages attr-for-selected="id" selected="{{data.page}}"
selected-attribute="selected">
<flickr-search-page id="search" api-key="{{apiKey}}"
route="{{searchRoute}}">
</flickr-search-page>
<flickr-image-page id="image" api-key="{{apiKey}}" route="{{imageRoute}}">
</flickr-image-page>
</iron-pages>
</template>
<script>
Polymer({
is: 'flickr-search-demo',
properties: {
apiKey: {
type: String,
value: '5358d9830b6865a13d251e5e1acb4c30'
}
},
attached: function() {
if (this.route.path === '') {
this.set('route.path', '/search/');
}
}
});
</script>
</dom-module>

111
components/app-route/demo/data-loading-demo/flickr-search-page.html
View File

@ -1,111 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-spinner/paper-spinner.html">
<link rel="import" href="../../../paper-input/paper-input.html">
<link rel="import" href="../../app-route.html">
<dom-module id="flickr-search-page">
<template>
<style>
paper-spinner {
display: block;
}
img {
max-width: 200px;
max-height: 200px;
}
</style>
<app-route pattern="/" route="{{route}}" query-params="{{queryParams}}"
active="{{active}}">
</app-route>
<paper-input autofocus label="Search the public domain on Flickr"
value="{{queryParams.search}}">
</paper-input>
<iron-ajax auto url="https://www.flickr.com/services/rest/"
handle-as="json"
debounce-duration="300"
params="{{params}}"
last-response="{{response}}"
last-error="{{error}}"
loading="{{loading}}">
</iron-ajax>
<paper-spinner active="{{loading}}"></paper-spinner>
<template is="dom-repeat" items="{{response.photos.photo}}" as="photo">
<a href="{{_computeLink(photo)}}">
<img src="{{_computeSrc(photo)}}">
</a>
</template>
<template is="dom-if" if="{{error}}">
<span>{{error.statusCode}}</span> Error:
<pre>{{error.response}}</pre>
</template>
</template>
<script>
Polymer({
is: 'flickr-search-page',
properties: {
apiKey: {
type: String,
},
params: {
type: Object,
computed: '_computeParams(apiKey, queryParams.search)'
},
route: {
type: Object
}
},
observers: [
'_clearOldSearchResults(queryParams.search)',
'_setDefaultSearch(active)'
],
_clearOldSearchResults: function() {
this.response = null;
},
_computeParams: function(apiKey, search) {
return {
method: 'flickr.photos.search',
api_key: apiKey,
text: search,
license: '7,8',
format: 'json',
nojsoncallback: 1
};
},
_computeSrc: function(photo) {
if (!photo || !photo.farm) {
return '';
}
return 'https://farm' + photo.farm + '.staticflickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret + '.jpg';
},
_computeLink: function(photo) {
return window.location.pathname + '#/image/' + photo.farm + '/' +
photo.server + '/' + photo.id + '/' + photo.secret;
},
_setDefaultSearch: function(active) {
if (active && !this.queryParams.search) {
this.set('queryParams.search', 'spaceship')
}
}
})
</script>
</dom-module>

210
components/app-route/demo/index.html
View File

@ -1,210 +0,0 @@
<!DOCTYPE html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at
http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at
http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<title>app-route Demo</title>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-demo-helpers/url-bar.html">
<link rel="import" href="../../iron-pages/iron-pages.html">
<link rel="import" href="../app-location.html">
<link rel="import" href="../app-route.html">
<link rel="import" href="youtube-demo/youtube-search.html">
<link rel="import" href="youtube-demo/youtube-toolbar.html">
<link rel="import" href="youtube-demo/video-viewer.html">
<link rel="import" href="youtube-demo/search-results.html">
<style>
body {
margin: 0;
padding: 0;
}
url-bar {
background-color: white;
}
</style>
</head>
<body>
<url-bar></url-bar>
<app-router-demo></app-router-demo>
<dom-module id="app-router-demo">
<template>
<style>
:host {
display: block;
position: relative;
height: 100vh;
@apply --paper-font-common-base;
}
:host([video-page-active]) {
overflow: hidden;
}
:host([video-page-active]) iron-pages {
transform: translateY(-170px);
}
iron-pages {
transition: transform 0.3s;
}
</style>
<!-- app-location binds with the URL and produces a route for
app-route elements to consume. Since this demo needs to run without
server cooperation (e.g. with polyserve, in the elements catalog, etc) we'll
use the hash portion of the URL for our route paths. -->
<app-location route="{{route}}" use-hash-as-path></app-location>
<!-- app-routes parse route paths based on the their `pattern`.
Parameters are extracted into the `data` object. The rest of the path that
comes after the `pattern` is put into the `tail` object, which can be
passed to the `route` property of downstream app-routes. -->
<app-route route="{{route}}" pattern="/:page" data="{{data}}"></app-route>
<app-route route="{{route}}" pattern="/search" tail="{{searchTail}}"></app-route>
<app-route route="{{route}}" pattern="/video" tail="{{videoTail}}" active="{{videoPageActive}}"></app-route>
<youtube-toolbar collapsed$="{{videoPageActive}}">
<!-- The youtube-search has a app-route that consumes the tail of
another route (`searchTail`) -->
<youtube-search
route="{{searchTail}}"
video-data="{{videoData}}">
</youtube-search>
</youtube-toolbar>
<iron-pages attr-for-selected="id" selected="{{data.page}}">
<search-results id="search" items="{{videos}}"></search-results>
<!-- The video-viewer has a app-route that consumes the tail of
another route -->
<video-viewer id="video" route="{{videoTail}}"></video-viewer>
</iron-pages>
</template>
<script>
window.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'app-router-demo',
properties: {
route: {
type: Object
},
videoData: {
type: Object,
observer: '_videoDataChanged'
},
videoPageActive: {
type: Boolean,
reflectToAttribute: true,
observer: '_videoPageActiveChanged'
},
searchTail: {
type: Object,
notify: true
},
videoTail: {
type: Object,
notify: true
},
newCategory: {
type: String
},
videos: {
type: Array,
value: function() {
return [];
}
},
data: {
type: Object,
value: function() {
return {
page: '/search/'
};
}
}
},
attached: function() {
// If we do not have an initial URL, we redirect to /search
if (!this.route || !this.route.path) {
this.set('route.path', '/search/');
}
},
_videoDataChanged: function(data) {
var allVideos = [];
var that = this;
data.items.forEach(function (videoItem) {
var youtubeVideo = {
id: videoItem.id.videoId,
title: videoItem.snippet.title,
thumbnail: videoItem.snippet.thumbnails.high.url
};
allVideos.push(youtubeVideo);
});
this.set('videos', allVideos);
},
_videoPageActiveChanged: function(videoPageActive, previousValue) {
// change color of page on page change
var newColor;
if (videoPageActive) {
// black
newColor = 0;
} else {
// white
newColor = 255;
}
document.body.style.backgroundColor = 'rgb(' + newColor + ',' + newColor
+ ',' + newColor + ')';
// on first load, set the color then allow color transition animations
if (previousValue === undefined) {
document.body.style.transition = 'background-color .2s linear';
return;
}
}
});
});
</script>
</dom-module>
</body>
</html>

119
components/app-route/demo/simple-demo.html
View File

@ -1,119 +0,0 @@
<!DOCTYPE html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<title>app-route Demo</title>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-demo-helpers/url-bar.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-pages/iron-pages.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../app-location.html">
<link rel="import" href="../app-route.html">
</head>
<body>
<dom-module id="route-display">
<template>
<div>
<div>route<template is="dom-if" if="{{tail}}"> / tail</template>: {</div>
<div>&nbsp;&nbsp;prefix: {{route.prefix}}</div>
<div>&nbsp;&nbsp;path: {{route.path}}</div>
<div>}</div>
</div>
</template>
<script>
Polymer({
is: 'route-display',
properties: {
route: Object,
tail: Boolean
}
});
</script>
</dom-module>
<dom-bind>
<template is="dom-bind">
<url-bar></url-bar>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:demoType"
data="{{demoSelectionData}}"
tail="{{demoSelectionTail}}">
</app-route>
<app-route
route="{{route}}"
pattern="/pathDemo/:firstPath/:secondPath"
data="{{pathData}}"
tail="{{pathDataTail}}">
</app-route>
<app-route
route="{{route}}"
pattern="/queryParamsDemo"
query-params="{{queryParams}}"
tail="{{qpDemoTail}}">
</app-route>
<div>App location route object
<route-display route="{{route}}"></route-display>
</div>
<paper-button raised>
<a href="#/pathDemo/firstPath/secondPath/thirdPath">Changes in Path</a>
</paper-button>
<paper-button raised>
<a href="?hello=world&foo=bar#/queryParamsDemo">Changes in Query Params</a>
</paper-button>
<iron-pages selected={{demoSelectionData.demoType}} attr-for-selected="demo">
<div demo="pathDemo">
Change location of first part of the path:
<paper-input value="{{pathData.firstPath}}"></paper-input>
Change location of second part of the path:
<paper-input value="{{pathData.secondPath}}"></paper-input>
<app-route
route="{{pathDataTail}}"
pattern="/:thirdPath"
data="{{tailExampleData}}">
</app-route>
You can pass the tail of an app-route to be the route another app-route. Here is
the tail object of the first app-route which is the route object of this new app-route:
<route-display route="{{pathDataTail}}" tail></route-display>
You can also bind to this new route. Change the location of the third part of
the path:
<paper-input value="{{tailExampleData.thirdPath}}"></paper-input>
</div>
<div demo="queryParamsDemo">
Change the value of the hello query param
<paper-input value="{{queryParams.hello}}"></paper-input>
Change the value of the foo param
<paper-input value="{{queryParams.foo}}"></paper-input>
</div>
</iron-pages>
</template>
</dom-bind>
</body>
</html>

48
components/app-route/demo/youtube-demo/route-info.html
View File

@ -1,48 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<dom-module id="route-info">
<template>
<style>
:host {
font-style: italic;
font-size: 0.85em;
font-weight: 200;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
</style>
<span>Route prefix: {{route.prefix}} &middot; Route path: {{route.path}} &middot; Query params: {{_stringifyQueryParams(route.__queryParams.*)}}</span>
</template>
<script>
Polymer({
is: 'route-info',
properties: {
route: {
type: Object
}
},
_stringifyQueryParams: function() {
var params = [];
if (this.route && this.route.__queryParams) {
for (var key in this.route.__queryParams) {
params.push(key + ' = ' + this.route.__queryParams[key]);
}
}
return params.join(', ');
}
})
</script>
</dom-module>

63
components/app-route/demo/youtube-demo/search-results.html
View File

@ -1,63 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-card/paper-card.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<dom-module id="search-results">
<template>
<style>
:host {
@apply --layout-horizontal;
@apply --layout-center-center;
@apply --layout-wrap;
}
a {
color: black;
text-decoration: none;
}
paper-card {
width: 300px;
margin: 1em 0.5em 0em;
font-size: 14px;
}
.card-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<template is="dom-repeat" items="{{items}}" as="video">
<!-- The '#' is included because the use-hash-as-path property is
set to true in the app-location -->
<a href="./#/video/{{video.id}}">
<paper-card image="{{video.thumbnail}}">
<div class="card-content">
{{video.title}}
</div>
</paper-card>
</a>
</template>
</template>
<script>
Polymer({
is: 'search-results',
properties: {
items: {
type: Array
}
}
})
</script>
</dom-module>

133
components/app-route/demo/youtube-demo/video-viewer.html
View File

@ -1,133 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../../../paper-input/paper-input.html">
<link rel="import" href="../../../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../app-route.html">
<link rel="import" href="youtube-lite.html">
<link rel="import" href="route-info.html">
<dom-module id="video-viewer">
<template>
<style>
:host {
display: block;
position: relative;
height: calc(100vh - 60px);
--primary-color: var(--paper-red-500);
--primary-text-color: #fff;
--paper-toggle-button-unchecked-bar-color: #888;
}
paper-input {
width: 100px;
}
#controls {
color: #fff;
@apply --layout-vertical;
@apply --layout-center-center;
height: 30%;
}
#controls > div {
@apply --layout-horizontal;
padding-bottom: 1em;
}
#state {
margin-left: 16px;
}
#player {
height: 70%;
}
</style>
<!-- This app-route consumes the route which was provided by the tail of
a app-route in the host of this element. This means that the parent that
provides this route decides where this element lives in the URL space. In
this case, the parent, which uses hashes, matches #/video and hence this
element lives in <App serving point>?querParams#/video/:vid -->
<app-route route="{{route}}" pattern="/:vid" data="{{data}}" query-params="{{queryParams}}">
</app-route>
<!-- You can bind any element's state into the URL by binding their
properties into the queryParams object. youtube-lite doesn't have any code
that's even aware of routing or the URL. -->
<youtube-lite
id="player"
video-id="{{data.vid}}"
state="{{queryParams.state}}"
current-time="{{queryParams.time}}"
start-time="{{queryParams.time}}">
</youtube-lite>
<div id="controls">
<div>
<paper-input
id="time"
type="number"
on-focus="pause"
label="Time"
value="{{queryParams.time}}">
</paper-input>
<paper-toggle-button id="state" active="{{playing}}">[[queryParams.state]]</paper-toggle-button>
</div>
<route-info route="[[route]]"></route-info>
</div>
</template>
<script>
Polymer({
is: 'video-viewer',
properties: {
route: {
type: Object,
notify: true
},
data: {
type: Object
},
playing: {
type: Boolean
},
queryParams: {
type: Object
}
},
observers: [
'_playingChanged(playing)',
'_stateChanged(queryParams.state)'
],
pause: function() {
this.set('queryParams.state', 'paused');
},
_playingChanged: function(playing) {
this.set('queryParams.state', playing ? 'playing' : 'paused');
},
_stateChanged: function(state) {
this.playing = state === 'playing';
}
});
</script>
</dom-module>

204
components/app-route/demo/youtube-demo/youtube-lite.html
View File

@ -1,204 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../google-youtube/google-youtube.html">
<!--
youtube-lite provides a simple subset of the google-youtube element's API. By
simplifying the API we're also able to make it more amenable to two-way data
binding.
Note that this element is totally agnostic to routing!
-->
<dom-module id="youtube-lite">
<template>
<style>
:host {
display: block;
position: relative;
width: 100%;
}
google-youtube {
height: 100%;
}
</style>
<google-youtube
id="player"
video-id="{{videoId}}"
state="{{__state}}"
currenttime="{{__currentTime}}"
width="100%"
height="100%">
</google-youtube>
</template>
<script>
Polymer({
is: 'youtube-lite',
properties: {
videoId: {
type: String,
notify: true
},
state: {
type: String,
notify: true,
observer: '_stateChanged'
},
currentTime: {
type: Number,
notify: true,
observer: '_currentTimeChanged'
},
startTime: {
type: Number
},
__state: {
type: String,
observer: '__ytApiStateChange'
},
__currentTime: {
type: String,
observer: '_ytCurrentTimeChanged'
},
__pauseOnFirstSeek: {
type: Boolean
}
},
listeners: {
'google-youtube-ready': '_onYoutubeReady'
},
_seekTo: function(newTime) {
var player = this.$.player;
if (player.duration == 1 || newTime < player.duration) {
player.seekTo(newTime);
}
},
_onYoutubeReady: function() {
this.__pauseOnFirstSeek = this.state == 'paused';
if (!this.__pauseOnFirstSeek || this.startTime) {
this._seekTo(this.startTime);
}
},
_currentTimeChanged: function(newTime, oldTime) {
var apiState = this.__readableStateToApiState(this.state);
if (apiState != 2 || this.__state != 2) {
return;
}
this._seekTo(newTime);
},
_ytCurrentTimeChanged: function(ytCurrentTime) {
if (this.__state === this.__apiStates.PAUSED) {
return;
}
this.currentTime = ytCurrentTime;
},
_stateChanged: function(newState, oldState) {
var newApiState = this.__readableStateToApiState(newState);
if (newApiState == this.__state ||
this.__state == this.__apiStates.UNSTARTED) {
return;
}
this.currentTime = this.__currentTime;
var player = this.$.player;
switch (newApiState) {
case this.__apiStates.PLAYING:
player.play();
break;
case this.__apiStates.PAUSED:
player.pause();
break;
default:
return;
}
},
__ytApiStateChange: function(newState, oldState) {
var readableState;
switch (newState) {
case this.__apiStates.ENDED:
readableState = this.__states.PAUSED;
break;
case this.__apiStates.PLAYING:
readableState = this.__states.PLAYING;
break;
case this.__apiStates.PAUSED:
readableState = this.__states.PAUSED;
break;
default:
return;
}
if (this.state == readableState) {
return;
}
if (this.__pauseOnFirstSeek && readableState == this.__states.PLAYING) {
this.__pauseOnFirstSeek = false;
this.$.player.pause();
return;
}
this.state = readableState;
this.currentTime = this.__currentTime;
},
__readableStateToApiState: function(readableState) {
var newApiState = -2;
if (readableState == this.__states.PLAYING) {
newApiState = this.__apiStates.PLAYING;
} else if (readableState = this.__states.PAUSED) {
newApiState = this.__apiStates.PAUSED;
}
return newApiState;
},
__states: {
PLAYING: 'playing',
PAUSED: 'paused'
},
__apiStates: {
UNSTARTED: -1,
ENDED: 0,
PLAYING: 1,
PAUSED: 2,
BUFFERING: 3,
QUEUED: 5
}
});
</script>
</dom-module>

102
components/app-route/demo/youtube-demo/youtube-search.html
View File

@ -1,102 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-input/paper-input.html">
<link rel="import" href="../../../iron-ajax/iron-ajax.html">
<link rel="import" href="../../app-route.html">
<link rel="import" href="route-info.html">
<dom-module id="youtube-search">
<template>
<style>
:host {
--primary-color: #fff;
--paper-input-container-color: #fff;
display: block;
position: relative;
padding: 1em;
}
route-info {
color: #fff;
}
</style>
<!-- This app-route consumes the route which was provided by the tail of
a app-route in the host of this element -->
<app-route route="{{route}}" pattern="/:searchQuery" data="{{data}}">
</app-route>
<paper-input label="Search Youtube" value="{{data.searchQuery}}"></paper-input>
<route-info route="[[route]]"></route-info>
<iron-ajax auto
id="youtubeSearch"
url="https://www.googleapis.com/youtube/v3/search"
params="{{params}}"
last-response="{{videoData}}">
</iron-ajax>
</template>
<script>
Polymer({
is: 'youtube-search',
properties: {
route: {
type: Object,
notify: true
},
data: {
type: Object
},
category: {
type: String,
notify: true
},
params: {
type: String,
computed: '_setParams(data.searchQuery)'
},
videoData: {
type: Object,
notify: true
}
},
observers: ['_pathChanged(route.path)'],
_pathChanged: function() {
this.async(function() {
if (!this.route.path) {
this.set('route.path', '/');
}
});
},
_setParams: function(category) {
return {
part: 'snippet',
q: this.data.searchQuery,
key: 'AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI',
type: 'video'
}
},
});
</script>
</dom-module>

181
components/app-route/demo/youtube-demo/youtube-toolbar.html
View File

@ -1,181 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../iron-icons/iron-icons.html">
<dom-module id="youtube-toolbar">
<template>
<style>
:host {
display: block;
position: relative;
--paper-icon-button-ink-color: #fff;
--iron-icon-fill-color: #fff;
}
:host([collapsed]) #background {
transform: scaleY(calc(60/230));
}
:host([collapsed]) #youtube-logo {
transform: scale(calc(60/230)) translateY(-195px);
}
:host([collapsed]) #back {
transform: translateX(0);
}
:host([collapsed]) #content {
opacity: 0;
transition-delay: 0s;
transform: translateY(-10px);
}
#background {
height: 230px;
background-image: linear-gradient(#E7291A, #C21616);
@apply --shadow-elevation-2dp;
transform-origin: 0 0;
transition: transform 0.3s;
transform: scaleY(1);
}
#youtube-logo {
display: block;
position: absolute;
margin: auto;
top: 30px;
left: calc(50% - 75px);
width: 150px;
height: calc(150px / 1.45);
background-image: radial-gradient(transparent 50%, #fff 50%);
border-radius: 9% / 13%;
transition: transform 0.3s;
}
#youtube-logo:before,
#youtube-logo:after {
content: '';
display: block;
position: absolute;
background-color: #fff;
width: 90%;
height: 14%;
left: 5%;
border-radius: 100% / 90%;
}
#youtube-logo:before {
top: -3.7%;
}
#youtube-logo:after {
bottom: -3.7%;
}
#youtube-logo > .lr-edge {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#youtube-logo > .lr-edge:before,
#youtube-logo > .lr-edge:after {
content: '';
display: block;
position: absolute;
background-color: #fff;
width: 10%;
height: 90%;
top: 5%;
border-radius: 100% / 90%;
}
#youtube-logo > .lr-edge:before {
left: -2.5%;
}
#youtube-logo > .lr-edge:after {
right: -2.5%;
}
#youtube-logo > .play-icon {
display: block;
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
overflow: hidden;
background-image:
linear-gradient(90deg, #fff 38%, transparent 38%),
linear-gradient(35deg, transparent 57%, rgba(0, 0, 0, 0.3) 57%);
}
#youtube-logo > .play-icon:before,
#youtube-logo > .play-icon:after {
content: '';
display: block;
position: absolute;
width: 200%;
height: 65%;
background-color: #fff;
}
#youtube-logo > .play-icon:before {
transform-origin: top left;
top: -80%;
transform: rotate(29deg);
}
#youtube-logo > .play-icon:after {
transform-origin: bottom left;
bottom: -80%;
transform: rotate(-29deg);
}
#content {
display: block;
position: absolute;
bottom: 0;
width: 100%;
transition: transform 0.15s, opacity 0.15s;
transition-delay: 0.2s;
}
#back {
position: absolute;
top: 10px;
transform: translateX(-64px);
transition: transform 0.3s;
}
</style>
<div id="background"></div>
<div id="youtube-logo">
<div class="lr-edge"></div>
<div class="play-icon"></div>
</div>
<div id="content">
<slot></slot>
</div>
<a id="back" href="../#/search/"><paper-icon-button icon="icons:arrow-back"></paper-icon-button></a>
</template>
<script>
Polymer({
is: 'youtube-toolbar'
});
</script>
</dom-module>

27
components/app-route/index.html
View File

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

45
components/app-route/test/app-example-1.html
View File

@ -1,45 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel='import' href='../app-route.html'>
<link rel='import' href='../app-location.html'>
<dom-module id='app-example-1'>
<template>
<app-location route='{{route}}'>
</app-location>
<app-route id="page" route='{{route}}' pattern='/:page' data='{{data}}'>
</app-route>
<app-route id="user" route='{{route}}' pattern='/user' tail='{{userRoute}}'>
</app-route>
<app-route id="tail" route='{{userRoute}}' pattern='/:page' data='{{userData}}' query-params="{{userQueryParams}}">
</app-route>
</template>
<script>
Polymer({
is: 'app-example-1',
observers: [
'pageChanged(data.page)',
'userPathChanged(userRoute.path)',
],
pageChanged: function(page) {
if (page === 'redirectToUser') {
this.set('data.page', 'user');
}
},
userPathChanged: function(path) {
// Redirect from /user/ and /user to /user/view
if (path === '/' || path === '') {
this.set('userRoute.path', '/view');
}
}
})
</script>
</dom-module>

169
components/app-route/test/app-location.html
View File

@ -1,169 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>app-location</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../url/url.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-test-helpers/mock-interactions.html">
<link rel="import" href="../app-location.html">
</head>
<body>
<test-fixture id="BasicLocation">
<template>
<app-location></app-location>
</template>
</test-fixture>
<test-fixture id="LocationViaHash">
<template>
<app-location use-hash-as-path></app-location>
</template>
</test-fixture>
<test-fixture id="ClickableLink">
<template>
<a></a>
</template>
</test-fixture>
<script>
'use strict';
function setLocation(url) {
window.history.pushState({}, '', url);
Polymer.Base.fire('location-changed', {}, { node: window });
}
function assign(a, b) {
if (Object.assign) {
return Object.assign.apply(Object, arguments);
}
for (var property in b) {
a[property] = b[property];
}
return a;
}
suite('<app-location>', function () {
var initialUrl;
setup(function() {
initialUrl = window.location.href;
});
teardown(function() {
window.history.replaceState({}, '', initialUrl);
});
suite('in the default configuration', function() {
var appLocation;
setup(function() {
appLocation = fixture('BasicLocation');
});
test('it automatically exposes the current route', function() {
expect(appLocation.route).to.be.ok;
expect(appLocation.route.path).to.be.equal(window.location.pathname);
});
suite('manipulating the route', function() {
var originalPath;
var originalQueryParams;
setup(function() {
originalPath = appLocation.route.path;
originalQueryParams = assign({}, appLocation.route.__queryParams);
});
teardown(function() {
appLocation.set('route.prefix', '');
appLocation.set('route.path', originalPath);
appLocation.set('route.__queryParams', originalQueryParams);
});
test('it reflects path to location.pathname', function() {
appLocation.set('route.path', '/foo/bar');
expect(window.location.pathname).to.be.equal('/foo/bar');
});
test('it reflects queryParams values to location.search', function() {
appLocation.set('route.__queryParams.foo', 1);
expect(window.location.search).to.match(/foo=1/);
});
test('it reflects completely replaced queryParams', function() {
appLocation.set('route.__queryParams', { bar: 1 });
expect(window.location.search).to.be.equal('?bar=1');
});
test('it reflects the prefix to location.pathname', function() {
appLocation.set('route.prefix', '/fiz');
expect(window.location.pathname).to.be.equal('/fiz' + originalPath);
});
});
/**
* NOTE: For a more thorough spec describing this behavior, please refer
* to the `iron-location` component.
*/
suite('manipulating the history state', function() {
var originalLocation;
setup(function() {
originalLocation = window.location.toString();
});
teardown(function() {
setLocation(originalLocation);
});
test('it reflects location.pathname to route.path', function() {
setLocation('/fiz/buz');
expect(appLocation.route.path).to.be.equal('/fiz/buz');
});
test('it reflects location.search to route.__queryParams', function() {
setLocation('?fiz=buz');
expect(appLocation.route.__queryParams).to.be.eql({
fiz: 'buz'
});
});
});
});
suite('using the hash as the route path', function() {
var appLocation;
setup(function() {
appLocation = fixture('LocationViaHash');
});
test('it reflects location.hash to route.path', function() {
setLocation('#/fiz/buz');
expect(appLocation.route.path).to.be.equal('/fiz/buz');
});
test('it reflects route.path to location.hash', function() {
appLocation.set('route.path', '/foo/bar');
expect(window.location.hash).to.be.equal('#/foo/bar');
});
});
});
</script>
</body>

58
components/app-route/test/app-route-converter.html
View File

@ -1,58 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>app-route-converter</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-route-converter.html">
</head>
<body>
<test-fixture id="BasicRouteConversion">
<template>
<app-route-converter>
</app-route-converter>
</template>
</test-fixture>
<script>
'use strict';
suite('<app-route-converter>', function() {
test('it bidirectionally maps path and queryParams to route', function() {
var converter = fixture('BasicRouteConversion');
var queryParams = {x: '10'};
converter.path = '/a/b/c';
converter.queryParams = queryParams;
expect(converter.route).to.be.deep.equal({
prefix: '',
path: '/a/b/c',
__queryParams: queryParams
});
converter.set('route.path', '/d/e/f');
expect(converter.path).to.be.equal('/d/e/f');
queryParams = {y: '11'};
converter.set('route.__queryParams', queryParams);
expect(converter.queryParams).to.be.deep.equal(queryParams);
queryParams['z'] = '12';
expect(converter.queryParams).to.be.deep.equal(queryParams);
});
});
</script>
</body>

548
components/app-route/test/app-route.html
View File

@ -1,548 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>app-route</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../url/url.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-route.html">
<link rel="import" href="./redirection.html">
</head>
<body>
<div id='safari-cooldown' hidden>
<div>Danger: URL overheating.</div>
<div>
Safari requires a cooldown period before we call
pushState/replaceState any more.
</div>
<div>Testing will resume after 30 seconds.</div>
<div>
<a href="https://forums.developer.apple.com/thread/36650">More info</a>
</div>
</div>
<test-fixture id="BasicRoute">
<template>
<app-route pattern='/user/:username'>
</app-route>
</template>
</test-fixture>
<dom-module id="chained-routes">
<template>
<app-route
id="foo"
pattern="/foo/:foo"
route="{{numberOneTopRoute}}"
data="{{fooData}}"
tail="{{fooRoute}}">
</app-route>
<app-route
id="bar"
pattern="/bar/:bar"
route="{{fooRoute}}"
data="{{barData}}">
</app-route>
<app-route
id="baz"
pattern="/baz/:baz"
route="{{fooRoute}}"
data="{{bazData}}">
</app-route>
</template>
<script>
window.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'chained-routes'
});
});
</script>
</dom-module>
<test-fixture id="ChainedRoutes">
<template>
<chained-routes></chained-routes>
</template>
</test-fixture>
<test-fixture id="Redirection">
<template>
<redirect-app-route></redirect-app-route>
</template>
</test-fixture>
<script>
'use strict';
var cooldownFunction = function() {};
if (/^Apple/.test(navigator.vendor)) {
cooldownFunction = function(done) {
var cooldownPeriod = 30 * 1000;
this.timeout(cooldownPeriod + 5000);
var cooldownMessage = document.querySelector('#safari-cooldown');
cooldownMessage.removeAttribute('hidden');
setTimeout(function() {
done();
cooldownMessage.setAttribute('hidden', 'hidden');
}, cooldownPeriod);
};
}
function fixtureChainedRoutes(route) {
var chainedRoutes = fixture('ChainedRoutes');
chainedRoutes.$.foo.route = {
path: route.path || '',
prefix: route.prefix || '',
__queryParams: route.__queryParams || {}
};
return {
foo: chainedRoutes.$.foo,
bar: chainedRoutes.$.bar,
baz: chainedRoutes.$.baz
};
}
suite('<app-route>', function () {
var route;
setup(function() {
route = fixture('BasicRoute');
// This works around a bug in `dom-template` that is somehow
// exaserbated by the `app-route` implementation. A reduced test case
// is hard to come by. Track polymerelements/test-fixture#31 and remove
// this when that has been resolved:
var tmpl = document.querySelector('#ChainedRoutes').fixtureTemplates[0];
tmpl._parentProps = {};
});
test('it parses a path', function() {
route.route = {
prefix: '',
path: '/user/papyrus/details',
__queryParams: {}
}
expect(route.tail.prefix).to.be.equal('/user/papyrus');
expect(route.tail.path).to.be.equal('/details');
expect(route.data.username).to.be.equal('papyrus');
});
test('it bidirectionally maps changes between tail and route', function() {
route.route = {
prefix: '',
path: '/user/papyrus/details',
__queryParams: {}
};
route.set('tail.path', '/messages');
expect(route.route.path).to.be.deep.equal('/user/papyrus/messages');
route.set('route.path', '/user/toriel');
expect(route.tail).to.be.deep.equal({
prefix: '/user/toriel',
path: '',
__queryParams: {}
});
});
test('it creates data as described by pattern', function() {
route.route = {
prefix: '',
path: '/user/sans'
};
expect(route.data).to.be.deep.equal({username: 'sans'});
expect(route.active).to.be.equal(true);
route.pattern = '/user/:username/likes/:count';
// At the moment, we don't reset data when we no longer match.
expect(route.data).to.be.deep.equal({username: 'sans'});
expect(route.active).to.be.equal(false);
route.set('route.path', "/does/not/match");
expect(route.data).to.be.deep.equal({username: 'sans'});
expect(route.active).to.be.equal(false);
route.set('route.path', '/user/undyne/likes/20');
expect(route.data).to.be.deep.equal({username: 'undyne', count: '20'});
expect(route.active).to.be.equal(true);
});
test('changing data changes the path', function() {
route.route = {
prefix: '',
path: '/user/asgore'
};
expect(route.data).to.be.deep.equal({username: 'asgore'});
route.data = {username: 'toriel'};
expect(route.route.path).to.be.equal('/user/toriel');
});
suite('propagating data', function() {
test('data is defined when active is true', function(done) {
var chainedRoutes = fixture('ChainedRoutes');
chainedRoutes.$.foo.addEventListener('active-changed', function(e) {
if (e.detail.value = true) {
expect(chainedRoutes.$.foo.data.foo).to.be.equal('bar');
done();
}
});
chainedRoutes.$.foo.route = {
prefix: '',
path: '/foo/bar',
__queryParams: {}
};
});
test('data is empty if no routes in the tree have matched', function() {
var routes = fixtureChainedRoutes({ path: '' });
expect(routes.foo.data).to.be.eql({});
expect(routes.bar.data).to.be.eql({});
expect(routes.baz.data).to.be.eql({});
});
test('limits propagation to last matched route', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123' });
expect(routes.foo.data).to.be.eql({ foo: '123' });
expect(routes.bar.data).to.be.eql({});
expect(routes.baz.data).to.be.eql({});
});
test('propagates data to matching chained routes', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc' });
expect(routes.foo.data).to.be.eql({ foo: '123' });
expect(routes.bar.data).to.be.eql({ bar: 'abc' });
expect(routes.baz.data).to.be.eql({});
});
test('chained route state is untouched when deactivated', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc' });
routes.foo.set('route.path', '/foo/321/baz/zyx');
expect(routes.foo.data).to.be.eql({ foo: '321' });
expect(routes.bar.data).to.be.eql({ bar: 'abc' });
expect(routes.baz.data).to.be.eql({ baz: 'zyx' });
});
suite('updating the global path', function() {
test('happens when data changes if the route is active', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc' });
expect(routes.bar.active).to.be.eql(true);
routes.bar.set('data.bar', 'cba');
expect(routes.foo.route.path).to.be.eql('/foo/123/bar/cba');
});
test('ignores changes when the route is inactive', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc' });
expect(routes.baz.active).to.be.eql(false);
routes.baz.set('data.baz', 'cba');
expect(routes.foo.route.path).to.be.eql('/foo/123/bar/abc');
});
test('ignores changes after a route deactives', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc' });
routes.foo.set('route.path', '/foo/123/baz/zyx');
expect(routes.bar.active).to.be.eql(false);
expect(routes.baz.active).to.be.eql(true);
routes.bar.set('data.bar', 'cba');
expect(routes.foo.route.path).to.be.eql('/foo/123/baz/zyx');
});
});
});
suite('propagating query params', function() {
test('query params are empty if no routes match', function() {
var routes = fixtureChainedRoutes({ path: '', __queryParams: {
qux: 'zot'
}});
expect(routes.foo.queryParams).to.be.eql({});
expect(routes.bar.queryParams).to.be.eql({});
expect(routes.baz.queryParams).to.be.eql({});
});
test('updates query params for all matched routes', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc', __queryParams: {
qux: 'zot'
}});
expect(routes.foo.queryParams).to.be.eql({ qux: 'zot' });
expect(routes.bar.queryParams).to.be.eql({ qux: 'zot' });
expect(routes.baz.queryParams).to.be.eql({});
});
test('retains query params after routes deactivate', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc', __queryParams: {
qux: 'zot'
}});
routes.foo.set('route.path', '/foo/123/baz/xyz')
routes.foo.set('queryParams', {
qux: 'quux'
});
expect(routes.foo.queryParams).to.be.eql({ qux: 'quux' });
expect(routes.bar.queryParams).to.be.eql({ qux: 'zot' });
expect(routes.baz.queryParams).to.be.eql({ qux: 'quux' });
});
suite('updating global query params', function() {
test('happens when query params change on active routes', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc', __queryParams: {
qux: 'zot'
}});
routes.bar.set('queryParams', { qux: 'quux' });
expect(routes.foo.queryParams).to.be.eql({ qux: 'quux' });
expect(routes.bar.queryParams).to.be.eql({ qux: 'quux' });
expect(routes.baz.queryParams).to.be.eql({});
});
test('updates are ignored for routes that are inactive', function() {
var routes = fixtureChainedRoutes({ path: '/foo/123/bar/abc', __queryParams: {
qux: 'zot'
}});
routes.baz.set('queryParams', { qux: 'quux' });
expect(routes.foo.queryParams).to.be.eql({ qux: 'zot' });
expect(routes.bar.queryParams).to.be.eql({ qux: 'zot' });
expect(routes.baz.queryParams).to.be.eql({ qux: 'quux' });
});
test('doesn\'t generate excess query-params-changed events', function() {
var routes = fixtureChainedRoutes({});
var appRoutes = [routes.foo, routes.bar, routes.baz];
var numChanges = 0;
for (var i = 0; i < appRoutes.length; i++) {
appRoutes[i].addEventListener('query-params-changed', function() {
numChanges++;
});
}
// Messing with paths but not query params shouldn't generate any
// change events.
expect(numChanges).to.be.equal(0);
routes.foo.set('route.path', '/foo/123/bar/456');
expect(numChanges).to.be.equal(0);
routes.foo.set('route.path', '/foo/456/baz/789');
expect(numChanges).to.be.equal(0);
// Changing queryParams here should update foo and baz
routes.foo.set('route.__queryParams', {key: 'value'});
expect(numChanges).to.be.equal(2);
// Then this should update bar
routes.foo.set('route.path', '/foo/123/bar/456');
expect(numChanges).to.be.equal(3);
// Changing back to baz shouldn't generate a change event.
routes.foo.set('route.path', '/foo/456/baz/789');
expect(numChanges).to.be.equal(3);
routes.foo.set('route.__queryParams', {});
expect(numChanges).to.be.equal(5);
routes.foo.set('route.path', '/foo/123/bar/456');
expect(numChanges).to.be.equal(6);
});
});
});
suite('handles reentrent changes to its properties', function() {
var initialUrl;
suiteTeardown(cooldownFunction);
setup(function() {
initialUrl = window.location.href;
});
teardown(function() {
window.history.replaceState({}, '', initialUrl);
});
test('changing path in response to path changing', function() {
var r = fixture('Redirection');
r.addEventListener('route-changed', function() {
r.set('route.path', '/bar/baz');
});
r.set('route.path', '/foo');
expect(window.location.pathname).to.be.equal('/bar/baz');
expect(r.data).to.be.deep.equal({page: 'bar'});
expect(r.route.path).to.be.equal('/bar/baz');
expect(r.tail.path).to.be.equal('/baz');
});
test('changing data wholesale in response to path changing', function() {
var r = fixture('Redirection');
r.set('data.page', 'bar');
r.addEventListener('route-changed', function(e) {
if (e.detail.path === 'route.path' && r.route.path === '/foo/baz') {
r.data = {page: 'bar'};
}
});
r.set('route.path', '/foo/baz');
expect(window.location.pathname).to.be.equal('/bar');
expect(r.data).to.be.deep.equal({page: 'bar'});
expect(r.route.path).to.be.equal('/bar');
expect(r.tail.path).to.be.equal('');
});
test('changing a data piece in response to path changing', function() {
var r = fixture('Redirection');
r.set('data.page', 'bar');
r.addEventListener('route-changed', function(e) {
r.set('data.page', 'bar');
});
r.set('route.path', '/foo/baz');
expect(window.location.pathname).to.be.equal('/bar');
expect(r.data).to.be.deep.equal({page: 'bar'});
expect(r.route.path).to.be.equal('/bar');
expect(r.tail.path).to.be.equal('');
});
test('changing the tail in response to path changing', function() {
var r = fixture('Redirection');
r.addEventListener('route-changed', function() {
r.set('tail.path', '/bar');
});
r.set('route.path', '/foo');
expect(window.location.pathname).to.be.equal('/foo/bar');
expect(r.data).to.be.deep.equal({page: 'foo'});
expect(r.route.path).to.be.equal('/foo/bar');
expect(r.tail.path).to.be.equal('/bar');
r.set('route.path', '/foo/baz');
expect(window.location.pathname).to.be.equal('/foo/bar');
expect(r.data).to.be.deep.equal({page: 'foo'});
expect(r.route.path).to.be.equal('/foo/bar');
expect(r.tail.path).to.be.equal('/bar');
});
test('changing the path in response to data changing', function() {
var r = fixture('Redirection');
r.addEventListener('data-changed', function() {
r.set('route.path', '/bar');
});
r.set('data', {page: 'foo'});
expect(window.location.pathname).to.be.equal('/bar');
expect(r.data).to.be.deep.equal({page: 'bar'});
expect(r.route.path).to.be.equal('/bar');
expect(r.tail.path).to.be.equal('');
});
test('changing data in response to data changing', function() {
var r = fixture('Redirection');
r.addEventListener('data-changed', function() {
r.set('data.page', 'bar');
});
r.set('data', {page: 'foo'});
expect(window.location.pathname).to.be.equal('/bar');
expect(r.data).to.be.deep.equal({page: 'bar'});
expect(r.route.path).to.be.equal('/bar');
expect(r.tail.path).to.be.equal('');
});
test('changing the data object wholesale in response to data changing', function() {
var r = fixture('Redirection');
r.addEventListener('data-changed', function() {
if (r.data.page == 'foo') {
r.set('data', {page: 'bar'});
}
});
r.set('data', {page: 'foo'});
expect(window.location.pathname).to.be.equal('/bar');
expect(r.data).to.be.deep.equal({page: 'bar'});
expect(r.route.path).to.be.equal('/bar');
expect(r.tail.path).to.be.equal('');
});
test('changing the tail in response to data changing', function() {
var r = fixture('Redirection');
r.addEventListener('data-changed', function() {
r.set('tail.path', '/bar');
});
r.set('data.page', 'foo');
expect(window.location.pathname).to.be.equal('/foo/bar');
expect(r.data).to.be.deep.equal({page: 'foo'});
expect(r.route.path).to.be.equal('/foo/bar');
expect(r.tail.path).to.be.equal('/bar');
});
test('changing the path in response to tail changing', function() {
var r = fixture('Redirection');
r.set('route.path', '/foo/');
r.addEventListener('tail-changed', function() {
r.set('route.path', '/baz' + r.tail.path);
});
r.set('tail.path', '/bar');
expect(window.location.pathname).to.be.equal('/baz/bar');
expect(r.data).to.be.deep.equal({page: 'baz'});
expect(r.route.path).to.be.equal('/baz/bar');
expect(r.tail.path).to.be.equal('/bar');
});
test('changing the data in response to tail changing', function() {
var r = fixture('Redirection');
r.set('route.path', '/foo/');
r.addEventListener('tail-changed', function() {
r.set('data.page', 'baz');
});
r.set('tail.path', '/bar');
expect(window.location.pathname).to.be.equal('/baz');
expect(r.data).to.be.deep.equal({page: 'baz'});
expect(r.route.path).to.be.equal('/baz');
expect(r.tail.path).to.be.equal('');
});
test('changing the data object wholesale in response to tail changing', function() {
var r = fixture('Redirection');
r.set('route.path', '/foo/');
r.addEventListener('tail-changed', function() {
r.set('data', {page: 'baz'});
});
r.set('tail.path', '/bar');
expect(window.location.pathname).to.be.equal('/baz');
expect(r.data).to.be.deep.equal({page: 'baz'});
expect(r.route.path).to.be.equal('/baz');
expect(r.tail.path).to.be.equal('');
});
test('changing the tail in response to tail changing', function() {
var r = fixture('Redirection');
r.set('route.path', '/foo/');
r.addEventListener('tail-changed', function() {
r.set('tail.path', '/baz');
});
r.set('tail.path', '/bar');
expect(window.location.pathname).to.be.equal('/foo/baz');
expect(r.data).to.be.deep.equal({page: 'foo'});
expect(r.route.path).to.be.equal('/foo/baz');
expect(r.tail.path).to.be.equal('/baz');
});
});
});
</script>
</body>

33
components/app-route/test/index.html
View File

@ -1,33 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'app-route-converter.html?dom=shadow',
'app-route.html?dom=shadow',
'app-location.html?dom=shadow',
'test-observer-app.html?dom=shadow',
'test-app-example-1.html?dom=shadow',
'app-route-converter.html?wc-ce=true&wc-shadydom=true',
'app-route.html?wc-ce=true&wc-shadydom=true',
'app-location.html?wc-ce=true&wc-shadydom=true',
'test-observer-app.html?wc-ce=true&wc-shadydom=true',
'test-app-example-1.html?wc-ce=true&wc-shadydom=true'
]);
</script>
</body>
</html>

47
components/app-route/test/observer-tester.html
View File

@ -1,47 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel='import' href='../app-route.html'>
<link rel='import' href='../app-location.html'>
<dom-module id="observer-tester">
<template>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/report/:id"
data="{{data}}"
active="{{active}}"></app-route>
</template>
<script>
Polymer({
is: 'observer-tester',
properties: {
route: {
type: Object,
notify:true
},
data: {
type: Object,
notify: true
},
active: {
type: Boolean,
value: false,
observer: 'checkActive'
}
},
checkActive: function(active) {
var x = 1;
}
});
</script>
</dom-module>

44
components/app-route/test/redirection.html
View File

@ -1,44 +0,0 @@
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-location.html">
<link rel="import" href="../app-route.html">
<!--
There are three relevant factors to route.path, and when any one of them
changes we want to support synchronously updating any of the others.
-->
<dom-module id='redirect-app-route'>
<template>
<app-location route='{{route}}'>
</app-location>
<app-route route='{{route}}' pattern="/:page" data="{{data}}" tail="{{tail}}">
</app-route>
</template>
<script>
Polymer({
is: 'redirect-app-route',
properties: {
route: {
notify: true
},
data: {
type: Object,
notify: true
},
tail: {
notify: true
}
}
});
</script>
</dom-module>

138
components/app-route/test/test-app-example-1.html
View File

@ -1,138 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>app-route</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../url/url.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="./app-example-1.html">
</head>
<body>
<test-fixture id="ExampleApp">
<template>
<app-example-1></app-example-1>
</template>
</test-fixture>
<script>
'use strict';
function setLocation(url) {
window.history.pushState({}, '', url);
Polymer.Base.fire('location-changed', {}, { node: window });
}
suite('<test-app-example-1>', function () {
var originalLocation;
var exampleApp;
setup(function() {
originalLocation = window.location.href;
exampleApp = fixture('ExampleApp');
});
teardown(function() {
window.history.replaceState({}, '', originalLocation);
});
test('runs through basic usage', function() {
// Navigate to /lol
setLocation('/lol');
expect(exampleApp.data).to.be.deep.eq({
page: 'lol'
});
expect(exampleApp.userData).to.be.deep.eq({
});
expect(exampleApp.route).to.be.deep.eq({
prefix: '',
path: '/lol',
__queryParams: {}
});
expect(exampleApp.userRoute).to.be.deep.eq({
prefix: null,
path: null,
__queryParams: {}
});
expect(window.location.pathname).to.be.equal('/lol');
// Navigate to /user
setLocation('/user');
expect(exampleApp.data).to.be.deep.eq({
page: 'user'
});
// We should have redirected to /user/view because of a redirect in
// the example app code.
expect(exampleApp.route).to.be.deep.eq({
prefix: '',
path: '/user/view',
__queryParams: {}
});
expect(exampleApp.userRoute).to.be.deep.eq({
prefix: '/user',
path: '/view',
__queryParams: {}
});
expect(window.location.pathname).to.be.equal('/user/view');
// Navigate to /user/details
setLocation('/user/details');
expect(exampleApp.data).to.be.deep.eq({
page: 'user'
});
expect(exampleApp.userData).to.be.deep.eq({
page: 'details'
});
expect(exampleApp.route).to.be.deep.eq({
prefix: '',
path: '/user/details',
__queryParams: {}
});
expect(exampleApp.userRoute).to.be.deep.eq({
prefix: '/user',
path: '/details',
__queryParams: {}
});
expect(window.location.pathname).to.be.equal('/user/details');
exampleApp.set('data.page', 'redirectToUser');
expect(window.location.pathname).to.be.equal('/user/view');
// This triggers two redirects in a row!
setLocation('/redirectToUser');
expect(window.location.pathname).to.be.equal('/user/view');
// Data binding changes to a different user subpage.
exampleApp.set('userData.page', 'profile');
expect(window.location.pathname).to.be.eq('/user/profile');
// Data binding changes to the aunt of the current page.
exampleApp.set('data.page', 'feed');
expect(window.location.pathname).to.be.eq('/feed');
setLocation('/user/etc');
exampleApp.set('userData.page', 'details');
expect(window.location.pathname).to.be.eq('/user/details')
expect(window.location.search).to.be.eq('');
exampleApp.set('userQueryParams.foo', 'bar');
expect(window.location.search).to.be.eq('?foo=bar');
exampleApp.userQueryParams = {bar: 'baz'};
expect(window.location.search).to.be.eq('?bar=baz');
});
});
</script>
</body>

67
components/app-route/test/test-observer-app.html
View File

@ -1,67 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>app-route 0bserver Test</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="./observer-tester.html">
</head>
<body>
<test-fixture id="observer_app">
<template>
<observer-tester id="testel"></observer-tester>
</template>
</test-fixture>
<script>
'use strict';
function setLocation(url) {
window.history.pushState({}, '', url);
Polymer.Base.fire('location-changed', {}, { node: window });
}
suite('observe app-route active changes', function(){
var originalLocation;
var sandbox, el;
setup(function(){
originalLocation = window.location.href;
sandbox = sinon.sandbox.create();
el = fixture('observer_app');
});
teardown(function(){
sandbox.restore();
window.history.replaceState({}, '', originalLocation);
});
test('observer should fire when route selected', function(){
sandbox.spy(el,'checkActive');
setLocation('/report/1000');
expect(el.checkActive).to.have.been.called.once;
expect(el.checkActive).to.have.been.calledWith(true);
});
test('observer should fire when route deselected',function(){
setLocation('/report/1000');
sandbox.spy(el,'checkActive');
setLocation('/menu');
expect(el.checkActive).to.have.been.called.once;
expect(el.checkActive).to.have.been.calledWith(false);
});
});
</script>
</body>

31
components/font-roboto/.bower.json
View File

@ -1,31 +0,0 @@
{
"name": "font-roboto",
"version": "1.0.3",
"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.3",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "6b16584ff654fea05d6bf3e812fb8b225202663f"
},
"_source": "https://github.com/PolymerElements/font-roboto.git",
"_target": "^1.0.1",
"_originalSource": "PolymerElements/font-roboto"
}

77
components/font-roboto/CONTRIBUTING.md
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

1
components/font-roboto/README.md
View File

@ -1 +0,0 @@
# font-roboto

22
components/font-roboto/bower.json
View File

@ -1,22 +0,0 @@
{
"name": "font-roboto",
"version": "1.0.3",
"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": [
"/.*"
]
}

19
components/font-roboto/package.json
View File

@ -1,19 +0,0 @@
{
"name": "@polymerelements/font-roboto",
"version": "1.0.1",
"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/"
}

10
components/font-roboto/roboto.html
View File

@ -1,10 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">

103
components/ibm-q-components/components/accordion/demo/index.html
View File

@ -1,103 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-accordion demo</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../font-ibm-plex-local/ibm-plex.html">
<link rel="import" href="../../styles/typography.html">
<link rel="import" href="../ibm-q-accordion.html">
<link rel="import" href="../ibm-q-accordion-item.html">
<custom-style>
<style include="demo-pages-shared-styles">
body {
font-family: var(--ibm-q-font-family-base);
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Accordion</h3>
<demo-snippet>
<template>
<ibm-q-accordion>
<ibm-q-accordion-item>
<div slot="title">Item title</div>
<div slot="content">
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.
</div>
</ibm-q-accordion-item>
<ibm-q-accordion-item>
<div slot="title">Item title</div>
<div slot="content">
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.
</div>
</ibm-q-accordion-item>
</ibm-q-accordion>
</template>
</demo-snippet>
<h3>Custom accordion</h3>
<demo-snippet>
<template>
<custom-style>
<style is="custom-style">
ibm-q-accordion.custom ibm-q-accordion-item {
--ibm-q-accordion-border-color: var(--light-accent-color);
--ibm-q-accordion-arrow-color: var(--light-accent-color);
--ibm-q-accordion-arrow-active-color: var(--accent-color);
}
</style>
</custom-style>
<ibm-q-accordion class="custom">
<ibm-q-accordion-item>
<div slot="title">Item title</div>
<div slot="content">
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.
</div>
</ibm-q-accordion-item>
<ibm-q-accordion-item>
<div slot="title">Item title</div>
<div slot="content">
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.
</div>
</ibm-q-accordion-item>
</ibm-q-accordion>
</template>
</demo-snippet>
</div>
</body>
</html>

217
components/ibm-q-components/components/accordion/ibm-q-accordion-item.html
View File

@ -1,217 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../styles/default-theme.html">
<dom-module id="ibm-q-accordion-item">
<template>
<style>
:host {
--ibm-q-accordion-border-color: #dfe3e6;
--ibm-q-accordion-arrow-color: var(--disabled-text-color);
--ibm-q-accordion-arrow-active-color: var(--primary-color);
}
:host {
transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
border-top: 1px solid var(--ibm-q-accordion-border-color);
overflow: hidden;
display: block;
}
:host(:last-child) {
border-bottom: 1px solid var(--ibm-q-accordion-border-color);
}
#header:focus {
outline: none;
}
#header:focus .arrow {
outline: 1px solid var(--ibm-q-accordion-arrow-active-color);
overflow: visible;
outline-offset: -.5px;
}
:host([active]) {
overflow: visible;
}
:host([active]) #content {
padding-top: 1rem;
padding-bottom: 1.5rem;
height: auto;
visibility: visible;
opacity: 1;
}
:host([active]) #header .arrow {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
fill: var(--ibm-q-accordion-arrow-active-color);
}
#header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
cursor: pointer;
padding: .5rem 0;
}
#header .arrow {
transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
height: 1.25rem;
width: 1.25rem;
padding: .25rem .125rem .25rem .25rem;
margin: 0 0 0 0.25rem;
fill: var(--ibm-q-accordion-arrow-color);
box-sizing: border-box;
}
#header ::slotted([slot=title]) {
margin: 0 0 0 1rem;
}
#content {
transition: all 250ms cubic-bezier(0.5, 0, 0.1, 1);
padding: 0 1rem 0 1.75rem;
height: 0;
visibility: hidden;
opacity: 0;
font-size: 0.875rem;
}
</style>
<div id="header" tabindex="0">
<!--<iron-icon icon="ibm-menu-drawer-icons:expand"></iron-icon>-->
<svg class="arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
<path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
</svg>
<slot name="title"></slot>
</div>
<div id="content">
<slot name="content"></slot>
</div>
</template>
<script>
(function() {
/* eslint max-len: ["error", { "ignoreComments": true }] */
/**
* `<ibm-q-accordion-item>` is a Web Component providing an item for the
* ibm-q-accordion component that follows the IBM Q design language.
*
* ```html
* <ibm-q-accordion-item>
* <div slot="title">Item title</div>
* <div slot="content">Content item</div>
* </ibm-q-accordion-item>
* ```
*
* ### Styling
*
* The following custom properties are exposed for styling:
*
* | Custom property | Description | Default |
* | :-------------- | :---------- | :------ |
* | `--ibm-q-accordion-border-color` | The color of the border | #dfe3e6 |
* | `--ibm-q-accordion-arrow-color` | The color of the arrow title | `var(--disabled-text-color)` |
* | `--ibm-q-accordion-arrow-active-color` | The color of the arrow title when is active | `var(--primary-color)` |
*
* @memberof IBMQ
*/
class AccordionItemElement extends Polymer.Element {
static get is() {
return 'ibm-q-accordion-item';
}
static get properties() {
return {
/**
* If item is active is displayed.
*/
active: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
}
};
}
constructor() {
super();
this._boundClickListener = this._handleClick.bind(this);
this._boundKeypressListener = this._handleKeypress.bind(this);
}
connectedCallback() {
super.connectedCallback();
this.$.header.addEventListener('click', this._boundClickListener);
this.$.header.addEventListener('keydown', this._boundKeypressListener);
}
disconnectedCallback() {
this.$.header.removeEventListener('click', this._boundClickListener);
this.$.header.removeEventListener('keydown', this._boundKeypressListener);
super.disconnectedCallback();
}
/**
* Handles click events.
* @param {Event} event The event.
* @private
*/
_handleClick(event) {
const item = event.target;
if (item) {
this.active = !this.active;
this.$.header.focus();
}
}
/**
* Handles keypress events.
* @param {Event} event The event.
* @private
*/
_handleKeypress(event) {
const item = event.target;
if (item && (event.keyCode === 13 || event.keyCode === 32)) {
this.active = !this.active;
}
}
}
customElements.define(AccordionItemElement.is, AccordionItemElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.AccordionItemElement = AccordionItemElement;
})();
</script>
</dom-module>

60
components/ibm-q-components/components/accordion/ibm-q-accordion.html
View File

@ -1,60 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../styles/typography.html">
<link rel="import" href="ibm-q-accordion-item.html">
<dom-module id="ibm-q-accordion">
<template>
<style>
:host {
font-family: var(--ibm-q-font-family-base);
width: 100%;
}
</style>
<slot></slot>
</template>
<script>
(function() {
/* eslint max-len: ["error", { "ignoreComments": true }] */
/**
* `<ibm-q-accordion>` is a Web Component providing a accordion that follows
* the IBM Q design language.
*
* ```html
* <ibm-q-accordion>
* <ibm-q-accordion-item>
* <div slot="title">Item title</div>
* <div slot="content">Content item</div>
* </ibm-q-accordion-item>
* </ibm-q-accordion>
* ```
*
* @memberof IBMQ
* @demo components/accordion/demo/index.html
*/
class AccordionElement extends Polymer.Element {
static get is() {
return 'ibm-q-accordion';
}
}
customElements.define(AccordionElement.is, AccordionElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.AccordionElement = AccordionElement;
})();
</script>
</dom-module>

10
components/ibm-q-components/components/accordion/test/.eslintrc.json
View File

@ -1,10 +0,0 @@
{
"env": {
"mocha": true
},
"globals": {
"assert": false,
"fixture": false,
"WCT": false
}
}

115
components/ibm-q-components/components/accordion/test/ibm-q-accordion_test.html
View File

@ -1,115 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-accordion test</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../../../iron-test-helpers/mock-interactions.html">
<link rel="import" href="../ibm-q-accordion.html">
<link rel="import" href="../ibm-q-accordion-item.html">
</head>
<body>
<test-fixture id="BasicTestFixture">
<template>
<ibm-q-accordion>
<ibm-q-accordion-item id="test">
<div slot="title">Item title</div>
<div slot="content">
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.
</div>
</ibm-q-accordion-item>
<ibm-q-accordion-item active id="active">
<div slot="title">Item title</div>
<div slot="content">
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.
</div>
</ibm-q-accordion-item>
</ibm-q-accordion>
</template>
</test-fixture>
<script>
function isHidden(element, height = 0) {
const rect = element.getBoundingClientRect();
return rect.height <= height;
}
suite('Simple tooltip', function() {
let accordion;
let accordionItemHeader;
let accordionItemContent;
setup(() => {
accordion = fixture('BasicTestFixture');
});
test('`ibm-q-accordion` item should be displayed when header is clicked', () => {
const shadowRoot = accordion.querySelector('#test').shadowRoot;
accordionItemHeader = shadowRoot.querySelector('#header');
accordionItemContent = shadowRoot.querySelector('#content');
assert.isTrue(isHidden(accordionItemContent));
MockInteractions.tap(accordionItemHeader);
assert.isFalse(isHidden(accordionItemContent));
});
test('`ibm-q-accordion` item should be displayed when press enter', () => {
const shadowRoot = accordion.querySelector('#test').shadowRoot;
accordionItemHeader = shadowRoot.querySelector('#header');
accordionItemContent = shadowRoot.querySelector('#content');
assert.isTrue(isHidden(accordionItemContent));
MockInteractions.pressEnter(accordionItemHeader);
assert.isFalse(isHidden(accordionItemContent));
});
test('`ibm-q-accordion` item should be showed by default with active attribute', () => {
const shadowRoot = accordion.querySelector('#active').shadowRoot;
accordionItemHeader = shadowRoot.querySelector('#header');
accordionItemContent = shadowRoot.querySelector('#content');
assert.isFalse(isHidden(accordionItemContent));
});
test('`ibm-q-accordion` item should be hidden when clicked', () => {
const shadowRoot = accordion.querySelector('#active').shadowRoot;
accordionItemHeader = shadowRoot.querySelector('#header');
accordionItemContent = shadowRoot.querySelector('#content');
const itemHeight = accordionItemContent.getBoundingClientRect().height;
MockInteractions.tap(accordionItemHeader);
assert.isTrue(isHidden(accordionItemContent, itemHeight));
});
});
</script>
</body>
</html>

27
components/ibm-q-components/components/accordion/test/index.html
View File

@ -1,27 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Tests</title>
<script src="../../../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'ibm-q-accordion_test.html',
'ibm-q-accordion_test.html?wc-shadydom=true&wc-ce=true'
]);
</script>
</body>
</html>

126
components/ibm-q-components/components/breadcrumbs/demo/index.html
View File

@ -1,126 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-breadcrumbs demo</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../font-ibm-plex-local/ibm-plex.html">
<link rel="import" href="../../styles/typography.html">
<link rel="import" href="../ibm-q-breadcrumbs.html">
<link rel="import" href="../ibm-q-breadcrumb.html">
<custom-style>
<style include="demo-pages-shared-styles">
body {
font-family: var(--ibm-q-font-family-base);
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Breadcrumbs</h3>
<demo-snippet>
<template>
<ibm-q-breadcrumbs>
<ibm-q-breadcrumb>Breadcrumb 1</ibm-q-breadcrumb>
<ibm-q-breadcrumb>Breadcrumb 2</ibm-q-breadcrumb>
<ibm-q-breadcrumb>Breadcrumb 3</ibm-q-breadcrumb>
</ibm-q-breadcrumbs>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Breadcrumbs with link</h3>
<demo-snippet>
<template>
<ibm-q-breadcrumbs>
<ibm-q-breadcrumb>
<a href="https://www.ibm.com">IBM</a>
</ibm-q-breadcrumb>
<ibm-q-breadcrumb>
<a href="https://www.research.ibm.com">IBM Research</a>
</ibm-q-breadcrumb>
<ibm-q-breadcrumb>
<a href="https://www.research.ibm.com/ibm-q/">IBM Q</a>
</ibm-q-breadcrumb>
</ibm-q-breadcrumbs>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Custom breadcrumbs</h3>
<demo-snippet>
<template>
<custom-style>
<style>
.crumbs ibm-q-breadcrumb {
--ibm-q-breadcrumb-color: #db2663;
--ibm-q-breadcrumb-slash-color: #234066;
}
</style>
</custom-style>
<ibm-q-breadcrumbs class="crumbs">
<ibm-q-breadcrumb>
<a href="https://www.ibm.com">IBM</a>
</ibm-q-breadcrumb>
<ibm-q-breadcrumb>
<a href="https://www.research.ibm.com">IBM Research</a>
</ibm-q-breadcrumb>
<ibm-q-breadcrumb>
<a href="https://www.research.ibm.com/ibm-q/">IBM Q</a>
</ibm-q-breadcrumb>
</ibm-q-breadcrumbs>
</template>
</demo-snippet>
<div class="vertical-section-container centered">
<h3>Breadcrumbs programmatically</h3>
<demo-snippet>
<template>
<ibm-q-breadcrumbs id="programmatically"></ibm-q-breadcrumbs>
<script type="application/javascript">
document.getElementById('programmatically').crumbs = ['Breadcrumb 1', 'Breadcrumb 2', 'Breadcrumb 3'];
</script>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Breadcrumbs programmatically with link</h3>
<demo-snippet>
<template>
<ibm-q-breadcrumbs id="programmatically2"></ibm-q-breadcrumbs>
<script type="application/javascript">
document.getElementById('programmatically2').crumbs = [
{ name: 'IBM', url: 'http://www.ibm.com' },
{ name: 'IBM Research', url: 'http://www.research.ibm.com' },
{ name: 'IBM Q', url: 'https://www.research.ibm.com/ibm-q/' }
];
</script>
</template>
</demo-snippet>
</div>
</div>
</body>
</html>

116
components/ibm-q-components/components/breadcrumbs/ibm-q-breadcrumb.html
View File

@ -1,116 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../styles/default-theme.html">
<link rel="import" href="../styles/typography.html">
<dom-module id="ibm-q-breadcrumb">
<template>
<style>
:host {
margin-right: 1.29125rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
:host::after {
content: '/';
margin-left: 1rem;
color: var(--ibm-q-breadcrumb-slash-color, #5a6872);
}
:host(:last-child) {
margin-right: 0;
}
:host(:last-child)::after {
margin-right: 0;
}
::slotted(a) {
font-family: var(--ibm-q-font-family-base);
font-size: 0.875rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
color: var(--ibm-q-breadcrumb-color, var(--primary-color));
text-decoration: underline;
transition: 250ms;
white-space: nowrap;
font-weight: 400;
text-decoration: none;
border-bottom: 1px solid transparent;
}
::slotted(a:hover),
::slotted(a:focus) {
outline: none;
color: var(--ibm-q-breadcrumb-color, var(--primary-color));
border-bottom: 1px solid var(--ibm-q-breadcrumb-color, var(--primary-color));
}
@-moz-document url-prefix() {
::slotted(a) {
border-bottom: none;
}
}
</style>
<slot></slot>
</template>
<script>
(function() {
/* eslint max-len: ["error", { "ignoreComments": true }] */
/**
* `<ibm-q-breadcrumb>` is a Web Component providing breadcrumb that
* follows the IBM Q design language.
*
* ```html
* <ibm-q-breadcrumbs>
* <ibm-q-breadcrumb>IBM</ibm-q-breadcrumb>
* <ibm-q-breadcrumb>IBM Research</ibm-q-breadcrumb>
* <ibm-q-breadcrumb>IBM Q</ibm-q-breadcrumb>
* </ibm-q-breadcrumbs>
* ```
*
* ### Styling
*
* The following custom properties are exposed for styling:
*
* | Custom property | Description | Default |
* | :-------------- | :---------- | :------ |
* | `--ibm-q-breadcrumb-color` | The breadcrumb color | `var(--primary-color)` |
* | `--ibm-q-breadcrumb-slash-color` | The breadcrumb slash color | `#5a6872` |
*
* @memberof IBMQ
* @demo components/breadcrumbs/demo/index.html
*/
class BreadcrumbElement extends Polymer.Element {
static get is() {
return 'ibm-q-breadcrumb';
}
}
customElements.define(BreadcrumbElement.is, BreadcrumbElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.BreadcrumbElement = BreadcrumbElement;
})();
</script>
</dom-module>

117
components/ibm-q-components/components/breadcrumbs/ibm-q-breadcrumbs.html
View File

@ -1,117 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../styles/default-theme.html">
<link rel="import" href="../styles/typography.html">
<link rel="import" href="ibm-q-breadcrumb.html">
<dom-module id="ibm-q-breadcrumbs">
<template>
<style>
:host {
font-size: 0.875rem;
font-family: var(--ibm-q-font-family-base);
display: none;
}
@media screen and (min-width: 500px) {
:host {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
</style>
<slot></slot>
</template>
</template>
<script>
(function() {
/**
* `<ibm-q-breadcrumbs>` is a Web Component providing breadcrumbs that
* follows the IBM Q design language.
*
* ```html
* <ibm-q-breadcrumbs>
* <ibm-q-breadcrumb>IBM</ibm-q-breadcrumb>
* <ibm-q-breadcrumb>IBM Research</ibm-q-breadcrumb>
* <ibm-q-breadcrumb>IBM Q</ibm-q-breadcrumb>
* </ibm-q-breadcrumbs>
* ```
*
* @memberof IBMQ
* @demo components/breadcrumbs/demo/index.html
*/
class BreadcrumbsElement extends Polymer.Element {
static get is() {
return 'ibm-q-breadcrumbs';
}
static get properties() {
return {
/**
* List of breadcrums to render.
*/
crumbs: {
type: Array,
observer: '_crumbsChanged',
value: function() {
return [];
}
}
};
}
ready() {
super.ready();
this.setAttribute('role', 'navigation');
}
_crumbsChanged(newVal) {
if (!newVal || newVal.length === 0) {
return;
}
const crumbs = [];
for (const crumb of this.crumbs) {
const tag = document.createElement('ibm-q-breadcrumb');
if (crumb.url) {
const link = document.createElement('a');
link.href = crumb.url;
link.textContent = crumb.name;
tag.appendChild(link);
} else {
tag.textContent = crumb;
}
crumbs.push(tag);
}
this.shadowRoot.querySelectorAll('ibm-q-breadcrumb').forEach(crumb => {
this.shadowRoot.removeChild(crumb);
});
crumbs.forEach(crumb => {
this.shadowRoot.appendChild(crumb);
});
}
}
customElements.define(BreadcrumbsElement.is, BreadcrumbsElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.BreadcrumbsElement = BreadcrumbsElement;
})();
</script>
</dom-module>

10
components/ibm-q-components/components/breadcrumbs/test/.eslintrc.json
View File

@ -1,10 +0,0 @@
{
"env": {
"mocha": true
},
"globals": {
"assert": false,
"fixture": false,
"WCT": false
}
}

47
components/ibm-q-components/components/breadcrumbs/test/ibm-q-breadcrumbs_test.html
View File

@ -1,47 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-breadcrumbs test</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<link rel="import" href="../ibm-q-breadcrumbs.html">
</head>
<body>
<test-fixture id="BasicTestFixture">
<template>
<ibm-q-breadcrumbs>
<ibm-q-breadcrumb>Breadcrumb 1</ibm-q-breadcrumb>
<ibm-q-breadcrumb>Breadcrumb 2</ibm-q-breadcrumb>
<ibm-q-breadcrumb>Breadcrumb 3</ibm-q-breadcrumb>
</ibm-q-breadcrumbs>
</template>
</test-fixture>
<script>
suite('ibm-q-breadcrumbs', function() {
let element;
setup(() => {
element = fixture('BasicTestFixture');
});
test('host should have the `navigation` role', () => {
assert.equal(element.getAttribute('role'), 'navigation');
});
});
</script>
</body>
</html>

27
components/ibm-q-components/components/breadcrumbs/test/index.html
View File

@ -1,27 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Tests</title>
<script src="../../../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'ibm-q-breadcrumbs_test.html',
'ibm-q-breadcrumbs_test.html?wc-shadydom=true&wc-ce=true'
]);
</script>
</body>
</html>

101
components/ibm-q-components/components/button/demo/index.html
View File

@ -1,101 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-button demo</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../font-ibm-plex-local/ibm-plex.html">
<link rel="import" href="../../styles/typography.html">
<link rel="import" href="../ibm-q-button.html">
<custom-style>
<style include="demo-pages-shared-styles">
body {
font-family: var(--ibm-q-font-family-base);
}
ibm-q-button {
margin-bottom: 8px;
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Primary button</h3>
<demo-snippet>
<template>
<ibm-q-button primary>Primary</ibm-q-button>
<ibm-q-button primary disabled>Primary disabled</ibm-q-button>
<ibm-q-button primary small>Primary small</ibm-q-button>
</template>
</demo-snippet>
<h3>Secondary button</h3>
<demo-snippet>
<template>
<ibm-q-button secondary>Secondary</ibm-q-button>
<ibm-q-button secondary disabled>Secondary disabled</ibm-q-button>
<ibm-q-button secondary small>Secondary small</ibm-q-button>
</template>
</demo-snippet>
<h3>Ghost button</h3>
<demo-snippet>
<template>
<ibm-q-button ghost>Ghost</ibm-q-button>
<ibm-q-button ghost disabled>Ghost disabled</ibm-q-button>
<ibm-q-button ghost small>Ghost small</ibm-q-button>
</template>
</demo-snippet>
<h3>Danger button</h3>
<demo-snippet>
<template>
<ibm-q-button danger>Danger</ibm-q-button>
<ibm-q-button danger disabled>Danger disabled</ibm-q-button>
<ibm-q-button danger small>Danger small</ibm-q-button>
</template>
</demo-snippet>
<h3>Custom buttons</h3>
<demo-snippet>
<template>
<ibm-q-button primary class="green">Primary</ibm-q-button>
<ibm-q-button secondary class="purple">Secondary</ibm-q-button>
<ibm-q-button ghost class="gold">Ghost</ibm-q-button>
<custom-style>
<style>
.green {
--ibm-q-button-primary-background-color: #00884b;
--ibm-q-button-primary-focus-background-color: #34bc6e;
--ibm-q-button-primary-active-background-color: #12512e;
}
.purple {
--ibm-q-button-secondary-color: #c22dd5;
}
.gold {
--ibm-q-button-ghost-color: #9c6d1e;
}
</style>
</custom-style>
</template>
</demo-snippet>
</div>
</body>
</html>

282
components/ibm-q-components/components/button/ibm-q-button.html
View File

@ -1,282 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../../../vaadin-button/vaadin-button.html">
<link rel="import" href="../styles/default-theme.html">
<link rel="import" href="../styles/typography.html">
<!-- Reset vaadin default theme -->
<dom-module id="vaadin-button-default-theme" theme-for="vaadin-button"></dom-module>
<dom-module id="ibm-q-button-default-theme">
<template>
<style>
:host {
display: inline-block;
--ibm-q-button-focus-border-color: #f5f7fa;
--ibm-q-button-focus-color: #ffffff;
}
[part~="button"] {
display: inline-block;
}
[part~="button"]::-moz-focus-inner {
padding: 0;
border: 0;
}
[part~="button"] {
font-family: var(--ibm-q-font-family-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: .5px;
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 0.875rem;
font-weight: 700;
height: 2.5rem;
padding: 0 1rem;
border-radius: 0;
text-align: center;
text-decoration: none;
transition-duration: 250ms;
transition-timing-function: ease-in;
white-space: nowrap;
line-height: 16px;
}
:host([disabled]) [part~="button"] {
cursor: not-allowed;
opacity: .5;
}
/*
* Selector for applying primary button styles.
*/
:host([primary]) [part~="button"] {
background-color: var(--ibm-q-button-primary-background-color, var(--primary-color));
border-width: 2px;
border-style: solid;
border-color: transparent;
color: var(--ibm-q-button-primary-color, var(--ibm-q-button-focus-color));
}
:host([primary][focused]) [part~="button"],
:host([primary]) [part~="button"]:hover {
background-color: var(--ibm-q-button-primary-focus-background-color, var(--light-primary-color));
}
:host([primary][focused]) [part~="button"] {
border: 2px solid var(--ibm-q-button-primary-focus-border-color, var(--ibm-q-button-focus-border-color));
outline: 2px solid var(--ibm-q-button-primary-focus-background-color, var(--light-primary-color));
}
:host([primary][disabled][focused]) [part~="button"],
:host([primary][disabled]) [part~="button"]:hover {
background-color: var(--ibm-q-button-primary-background-color, var(--primary-color));
}
:host([primary][active]) [part~="button"] {
background-color: var(--ibm-q-button-primary-active-background-color, var(--dark-primary-color));
}
/*
* Selector for applying secondary button styles.
*/
:host([secondary]) [part~="button"] {
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: var(--ibm-q-button-secondary-color, var(--primary-color));
color: var(--ibm-q-button-secondary-color, var(--primary-color));
}
:host([secondary][focused]) [part~="button"],
:host([secondary]) [part~="button"]:hover {
background-color: var(--ibm-q-button-secondary-color, var(--primary-color));
color: var(--ibm-q-button-secondary-focus-color, var(--ibm-q-button-focus-color));
}
:host([secondary][focused]) [part~="button"] {
border: 2px solid var(--ibm-q-button-secondary-focus-border-color, var(--ibm-q-button-focus-border-color));
outline: 2px solid var(--ibm-q-button-secondary-color, var(--primary-color));
}
:host([secondary][disabled][focused]) [part~="button"],
:host([secondary][disabled]) [part~="button"]:hover {
background-color: transparent;
color: var(--ibm-q-button-secondary-color, var(--primary-color));
}
:host([secondary][active]) [part~="button"] {
background-color: transparent;
color: var(--ibm-q-button-secondary-color, var(--primary-color));
}
/*
* Selector for applying ghost button styles.
*/
:host([ghost]) [part~="button"] {
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: transparent;
color: var(--ibm-q-button-ghost-color, var(--primary-color));
}
:host([ghost][focused]) [part~="button"],
:host([ghost]) [part~="button"]:hover {
background-color: var(--ibm-q-button-ghost-color, var(--primary-color));
color: var(--ibm-q-button-ghost-focus-color, var(--ibm-q-button-focus-color));
}
:host([ghost][focused]) [part~="button"] {
border: 2px solid var(--ibm-q-button-ghost-focus-border-color, var(--ibm-q-button-focus-border-color));
outline: 2px solid var(--ibm-q-button-ghost-color, var(--primary-color));
}
:host([ghost][disabled][focused]) [part~="button"],
:host([ghost][disabled]) [part~="button"]:hover {
background-color: transparent;
color: var(--ibm-q-button-ghost-color, var(--primary-color));
}
:host([ghost][active]) [part~="button"] {
background-color: transparent;
}
/*
* Selector for applying danger button styles.
*/
:host([danger]) [part~="button"] {
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: currentColor;
color: var(--ibm-q-button-danger-color, var(--disabled-text-color));
}
:host([danger][focused]) [part~="button"],
:host([danger]) [part~="button"]:hover {
background-color: var(--error-color);
color: var(--ibm-q-button-danger-focus-color, var(--ibm-q-button-focus-color));
}
:host([danger][focused]) [part~="button"] {
border: 2px solid var(--ibm-q-button-danger-focus-border-color, var(--ibm-q-button-focus-border-color));
outline: 2px solid var(--error-color);
}
:host([danger]) [part~="button"]:hover {
border: 2px solid transparent;
}
:host([danger][disabled][focused]) [part~="button"],
:host([danger][disabled]) [part~="button"]:hover {
background-color: transparent;
color: var(--ibm-q-button-danger-color, var(--disabled-text-color));
border: 2px solid currentColor;
}
:host([danger][active]) [part~="button"] {
background-color: transparent;
}
/*
* Selector for applying small button styles.
*/
:host([small]) [part~="button"] {
height: 2rem;
padding: 0 0.5rem;
letter-spacing: 0;
}
</style>
</template>
</dom-module>
<dom-module id="ibm-q-button">
<script>
(function() {
/* eslint max-len: ["error", { "ignoreComments": true }] */
/**
* `<ibm-q-button>` is a Web Component providing a button that follows the
* IBM Q design language.
*
* ```html
* <ibm-q-button>Button</ibm-q-button>
* ```
*
* ### Styling
*
* The following custom properties are exposed for styling:
*
* | Custom property | Description | Default |
* | :-------------- | :---------- | :------ |
* | `--ibm-q-button-primary-background-color` | Primary button background color | `var(--primary-color)` |
* | `--ibm-q-button-primary-color` | Primary button text color | `var(--ibm-q-button-focus-color)` |
* | `--ibm-q-button-primary-focus-background-color` | Primary button background color on focus | `var(--light-primary-color)` |
* | `--ibm-q-button-primary-focus-border-color` | Primary button border color on focus | `var(--ibm-q-button-focus-border-color)` |
* | `--ibm-q-button-primary-active-background-color` | Primary button background color while active | `var(--dark-primary-color)` |
* | `--ibm-q-button-secondary-color` | Secondary Button color | `var(--primary-color)` |
* | `--ibm-q-button-secondary-focus-color` | Secondary Button color on focus | `var(--ibm-q-button-focus-color)` |
* | `--ibm-q-button-secondary-focus-border-color` | Secondary Button border color on focus | `var(--ibm-q-button-focus-border-color)` |
* | `--ibm-q-button-ghost-color` | Ghost button color | `var(--primary-color)` |
* | `--ibm-q-button-ghost-focus-color` | Ghost button color on focus | `var(--ibm-q-button-focus-color)` |
* | `--ibm-q-button-ghost-focus-border-color` | Ghost button border color on focus | `var(--ibm-q-button-focus-border-color)` |
* | `--ibm-q-button-danger-color` | Danger button color | `var(--disabled-text-color)` |
* | `--ibm-q-button-danger-focus-color` | Danger button color on focus | `var(--ibm-q-button-focus-color)` |
* | `--ibm-q-button-danger-focus-border-color` | Danger button border color on focus | `var(--ibm-q-button-focus-border-color)` |
*
* The following attributes are exposed for styling:
*
* | Attribute | Description |
* | :-------- | :---------- |
* | `active` | Set when the button is pressed down, either with mouse, touch or the keyboard. |
* | `disabled` | Set when the button is disabled. |
* | `focus-ring` | Set when the button is focused using the keyboard. |
* | `focused` | Set when the button is focused. |
*
* @memberof IBMQ
* @extends Vaadin.ButtonElement
* @demo components/button/demo/index.html
*/
class ButtonElement extends Vaadin.ButtonElement {
static get is() {
return 'ibm-q-button';
}
}
customElements.define(ButtonElement.is, ButtonElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.ButtonElement = ButtonElement;
})();
</script>
</dom-module>

10
components/ibm-q-components/components/button/test/.eslintrc.json
View File

@ -1,10 +0,0 @@
{
"env": {
"mocha": true
},
"globals": {
"assert": false,
"fixture": false,
"WCT": false
}
}

34
components/ibm-q-components/components/button/test/ibm-q-button_test.html
View File

@ -1,34 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-button test</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<link rel="import" href="../ibm-q-button.html">
</head>
<body>
<test-fixture id="BasicTestFixture">
<template>
<ibm-q-button>Button</ibm-q-button>
</template>
</test-fixture>
<script>
suite('ibm-q-button', function() {
});
</script>
</body>
</html>

27
components/ibm-q-components/components/button/test/index.html
View File

@ -1,27 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Tests</title>
<script src="../../../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'ibm-q-button_test.html',
'ibm-q-button_test.html?wc-shadydom=true&wc-ce=true'
]);
</script>
</body>
</html>

74
components/ibm-q-components/components/checkbox/demo/index.html
View File

@ -1,74 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-checkbox demo</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../font-ibm-plex-local/ibm-plex.html">
<link rel="import" href="../../styles/default-theme.html">
<link rel="import" href="../../styles/typography.html">
<link rel="import" href="../ibm-q-checkbox.html">
<custom-style>
<style include="demo-pages-shared-styles">
body {
font-family: var(--ibm-q-font-family-base);
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Checkbox</h3>
<demo-snippet>
<template>
<ibm-q-checkbox name="red" value="red" checked>Red</ibm-q-checkbox>
<ibm-q-checkbox name="blue" value="blue">Blue</ibm-q-checkbox>
<ibm-q-checkbox name="yellow" value="yellow" disabled>Yellow</ibm-q-checkbox>
</template>
</demo-snippet>
<h3>Custom checkbox</h3>
<demo-snippet>
<template>
<custom-style>
<style>
.custom ibm-q-checkbox[name=red] {
--ibm-q-checkbox-color: var(--accent-color);
--ibm-q-checkbox-border-color: var(--light-accent-color);
--ibm-q-checkbox-focus-outline-color: var(--dark-accent-color)
}
.custom ibm-q-checkbox[name=blue] {
--ibm-q-checkbox-color: var(--dark-primary-color);
--ibm-q-checkbox-border-color: var(--dark-primary-color);
--ibm-q-checkbox-checkmark-color: var(--light-primary-color);
--ibm-q-checkbox-focus-outline-color: var(--light-primary-color)
}
</style>
</custom-style>
<div class="custom">
<ibm-q-checkbox name="red" value="red" checked>Red</ibm-q-checkbox>
<ibm-q-checkbox name="blue" value="blue">Blue</ibm-q-checkbox>
</div>
</template>
</demo-snippet>
</div>
</body>
</html>

202
components/ibm-q-components/components/checkbox/ibm-q-checkbox.html
View File

@ -1,202 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../../../vaadin-checkbox/vaadin-checkbox.html">
<link rel="import" href="../styles/default-theme.html">
<link rel="import" href="../styles/typography.html">
<!-- Reset vaadin default theme -->
<dom-module id="vaadin-checkbox-default-theme" theme-for="vaadin-checkbox"></dom-module>
<dom-module id="ibm-q-checkbox-default-theme">
<template>
<style>
:host {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
margin-bottom: 1rem;
}
:host(:first-of-type) {
margin-top: 0.375rem;
}
:host(:last-of-type) {
margin-bottom: 0;
}
[part~="wrapper"] {
font-family: var(--ibm-q-font-family-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 0.875rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
outline: none;
}
[part~="native-checkbox"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
visibility: visible;
white-space: nowrap;
}
[part~="checkbox"] {
display: inline-block;
height: 1.125rem;
width: 1.125rem;
margin-right: .5rem;
background-color: var(--ibm-q-checkbox-checkmark-color, #ffffff);
border: 2px solid var(--ibm-q-checkbox-border-color, var(--light-theme-disabled-color));
box-sizing: border-box;
}
:host([checked]) [part~="checkbox"] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
background-color: var(--ibm-q-checkbox-color, var(--primary-color));
border-color: var(--ibm-q-checkbox-color, var(--primary-color));
}
:host([disabled]) [part~="wrapper"] {
opacity: .5;
cursor: not-allowed;
}
:host([focused]) [part~="checkbox"] {
box-shadow: 0 0 0 3px var(--ibm-q-checkbox-focus-outline-color, #7cc7ff);
outline: 1px solid transparent;
}
[part~="checkmark"] {
display: none;
fill: var(--ibm-q-checkbox-checkmark-color, #ffffff);
width: 100%;
height: 100%;
}
:host([checked]) [part~="checkmark"] {
display: block;
}
@-moz-document url-prefix() {
[part~="checkmark"] {
stroke: var(--ibm-q-checkbox-color, var(--primary-color));
}
}
</style>
</template>
</dom-module>
<dom-module id="ibm-q-checkbox">
<template>
<label part="wrapper" id="label" for="nativeCheckbox" on-click="_handleClick">
<input
id="nativeCheckbox"
type="checkbox"
part="native-checkbox"
checked="{{checked::change}}"
disabled$="[[disabled]]"
indeterminate="{{indeterminate::change}}"
role="presentation"
tabindex="-1">
<span part="checkbox">
<svg part="checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
<span part="label">
<slot></slot>
</span>
</label>
</template>
<script>
(function() {
/* eslint max-len: ["error", { "ignoreComments": true }] */
/**
* `<ibm-q-checkbox>` is a Web Component providing a checkbox that follows
* the IBM Q design language.
*
* ```html
* <ibm-q-checkbox>Send me notifications</ibm-q-checkbox>
* ```
*
* ### Styling
*
* The following custom properties are exposed for styling:
*
* | Custom property | Description | Default |
* | :-------------- | :---------- | :------ |
* | `--ibm-q-checkbox-color` | The checkbox color | `var(--primary-color)` |
* | `--ibm-q-checkbox-border-color` | The checkbox border color | `var(--light-theme-disabled-color)` |
* | `--ibm-q-checkbox-checkmark-color` | The checkmark color | `#ffffff` |
* | `--ibm-q-checkbox-focus-outline-color` | The checbox outline color on focus | `#7cc7ff` |
*
* The following attributes are exposed for styling:
*
* | Attribute | Description |
* | :-------- | :---------- |
* | `active` | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. |
* | `disabled` | Set when the checkbox is disabled. |
* | `focus-ring` | Set when the checkbox is focused using the keyboard. |
* | `focused` | Set when the checkbox is focused. |
*
* @memberof IBMQ
* @extends Vaadin.CheckboxElement
* @demo components/checkbox/demo/index.html
*/
class CheckboxElement extends Vaadin.CheckboxElement {
static get is() {
return 'ibm-q-checkbox';
}
_checkedChanged(checked) {
super._checkedChanged(checked);
if (checked && !this.value) {
this.value = 'on';
} else if (!checked && this.value == 'on') {
this.value = undefined;
}
}
}
customElements.define(CheckboxElement.is, CheckboxElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.CheckboxElement = CheckboxElement;
})();
</script>
</dom-module>

11
components/ibm-q-components/components/checkbox/test/.eslintrc.json
View File

@ -1,11 +0,0 @@
{
"env": {
"mocha": true
},
"globals": {
"expect": false,
"assert": false,
"fixture": false,
"WCT": false
}
}

118
components/ibm-q-components/components/checkbox/test/ibm-q-checkbox_test.html
View File

@ -1,118 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-checkbox test</title>
<script src="../../../../iron-test-helpers/mock-interactions.js"></script>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<link rel="import" href="../ibm-q-checkbox.html">
</head>
<body>
<test-fixture id="BasicTestFixture">
<template>
<ibm-q-checkbox>Checkbox test</ibm-q-checkbox>
</template>
</test-fixture>
<test-fixture id="ValueTestFixture">
<template>
<ibm-q-checkbox value="test">Checkbox test</ibm-q-checkbox>
</template>
</test-fixture>
<script>
suite('Checkbox', function() {
let checkbox;
setup(() => {
checkbox = fixture('BasicTestFixture');
});
test('host should have the `checkbox` role', () => {
assert.equal(checkbox.getAttribute('role'), 'checkbox');
});
test('can be disabled imperatively', () => {
const nativeCheckbox = checkbox.shadowRoot.querySelector('input');
checkbox.disabled = true;
assert.isTrue(nativeCheckbox.hasAttribute('disabled'));
});
test('checkbox should have aria-disabled when is disabled', () => {
checkbox.disabled = true;
assert.isTrue(checkbox.hasAttribute('aria-disabled'));
});
test('checkbox should have aria-checked when is checked', () => {
checkbox.checked = true;
assert.isTrue(checkbox.hasAttribute('aria-checked'));
});
test('checkbox should have value \'on\' when is checked and value wasn\'t defined', () => {
checkbox.checked = true;
assert.equal(checkbox.value, 'on');
});
test('checkbox shouldn\'t have value if it isn\'t checked', () => {
checkbox.checked = false;
expect(checkbox.value).to.be.undefined;
});
test('checkbox should have value indicated on it when is checked', () => {
checkbox = fixture('ValueTestFixture');
checkbox.checked = true;
assert.equal(checkbox.value, 'test');
});
});
suite('Checkbox events', function() {
let checkbox;
setup(() => {
checkbox = fixture('BasicTestFixture');
});
test('checkbox event \'down\' active it', function() {
MockInteractions.down(checkbox);
assert.isTrue(checkbox.hasAttribute('active'));
});
['keydown', 'keyup'].forEach((event) => {
test('checkbox event \'' + event + ' \' on space key, active it', function() {
MockInteractions.keyDownOn(checkbox, 32);
assert.isTrue(checkbox.hasAttribute('active'));
});
test('checkbox event \'' + event + ' \' on enter key, doesn\'t active it', function() {
MockInteractions.keyDownOn(checkbox, 13);
assert.isFalse(checkbox.hasAttribute('active'));
});
});
});
</script>
</body>
</html>

27
components/ibm-q-components/components/checkbox/test/index.html
View File

@ -1,27 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Tests</title>
<script src="../../../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'ibm-q-checkbox_test.html',
'ibm-q-checkbox_test.html?wc-shadydom=true&wc-ce=true'
]);
</script>
</body>
</html>

60
components/ibm-q-components/components/content-switcher/demo/index.html
View File

@ -1,60 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-content-switcher demo</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../font-ibm-plex-local/ibm-plex.html">
<link rel="import" href="../../styles/typography.html">
<link rel="import" href="../ibm-q-content-switcher.html">
<link rel="import" href="../ibm-q-content-switcher-option.html">
<custom-style>
<style include="demo-pages-shared-styles">
body {
font-family: var(--ibm-q-font-family-base);
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic</h3>
<demo-snippet>
<template>
<ibm-q-content-switcher selected="0">
<ibm-q-content-switcher-option>Content 1</ibm-q-content-switcher-option>
<ibm-q-content-switcher-option>Content 2</ibm-q-content-switcher-option>
<ibm-q-content-switcher-option>Content 3</ibm-q-content-switcher-option>
</ibm-q-content-switcher>
</template>
</demo-snippet>
<h3>Customize attribute for selected</h3>
<demo-snippet>
<template>
<ibm-q-content-switcher attr-for-selected="content-item" selected="two">
<ibm-q-content-switcher-option content-item="one">Content 1</ibm-q-content-switcher-option>
<ibm-q-content-switcher-option content-item="two">Content 2</ibm-q-content-switcher-option>
<ibm-q-content-switcher-option content-item="three">Content 3</ibm-q-content-switcher-option>
</ibm-q-content-switcher>
</template>
</demo-snippet>
</div>
</body>
</html>

148
components/ibm-q-components/components/content-switcher/ibm-q-content-switcher-option.html
View File

@ -1,148 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../../../iron-behaviors/iron-button-state.html">
<link rel="import" href="../styles/default-theme.html">
<link rel="import" href="../styles/typography.html">
<dom-module id="ibm-q-content-switcher-option">
<template>
<style>
:host {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 0.875rem;
background-color: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 2rem;
margin: 0;
text-decoration: none;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
:host(:focus) {
outline: 1px solid transparent;
box-shadow: 0 2px 0 0 #7cc7ff, 0 -2px 0 0 #7cc7ff;
background-color: var(--light-primary-color);
z-index: 2;
border-color: var(--light-primary-color);
text-decoration: underline;
color: var(--inverse-01);
}
:host(:hover) {
cursor: pointer;
}
:host(:hover),
:host(:active) {
background-color: var(--primary-color);
border-color: var(--light-primary-color);
color: var(--inverse-01);
}
:host(:not(:last-of-type)) {
border-right: none;
}
:host(:not(:first-of-type)) {
border-left: 1px solid var(--primary-color);
}
:host(:first-of-type) {
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
}
:host(:first-of-type:hover) {
border-color: var(--light-primary-color);
}
:host(:first-of-type:focus) {
box-shadow: -2px 0 0 0 #7cc7ff, 0 2px 0 0 #7cc7ff, 0 -2px 0 0 #7cc7ff;
z-index: 0;
}
:host(:last-of-type) {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
:host(:last-of-type:hover) {
border-color: var(--light-primary-color);
}
:host(:last-of-type:focus) {
box-shadow: 2px 0 0 0 #7cc7ff, 0 2px 0 0 #7cc7ff, 0 -2px 0 0 #7cc7ff;
z-index: 0;
}
:host(.selected) {
background-color: var(--primary-color);
color: var(--inverse-01);
font-weight: 400;
outline: 1px solid transparent;
}
:host(.selected:hover) {
border-color: var(--primary-color);
}
</style>
<slot></slot>
</template>
<script>
(function() {
/**
* `<ibm-q-content-switcher-option>` is a Web Component providing each option
* of a content-switcher
*
* ```html
* <ibm-q-content-switcher selected="0">
* <ibm-q-content-switcher-option>Content 1</ibm-q-content-switcher-option>
* <ibm-q-content-switcher-option>Content 2</ibm-q-content-switcher-option>
* <ibm-q-content-switcher-option>Content 3</ibm-q-content-switcher-option>
* </ibm-q-content-switcher>
* ```
*
* @memberof IBMQ
* @extends Polymer.Element
*/
class ContentSwitcherOptionElement extends Polymer.mixinBehaviors(
[Polymer.IronButtonState],
Polymer.Element
) {
static get is() {
return 'ibm-q-content-switcher-option';
}
ready() {
super.ready();
this.setAttribute('role', 'option');
}
}
customElements.define(ContentSwitcherOptionElement.is, ContentSwitcherOptionElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.ContentSwitcherOptionElement = ContentSwitcherOptionElement;
})();
</script>
</dom-module>

82
components/ibm-q-components/components/content-switcher/ibm-q-content-switcher.html
View File

@ -1,82 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<link rel="import" href="../../../polymer/polymer-element.html">
<link rel="import" href="../../../iron-menu-behavior/iron-menubar-behavior.html">
<link rel="import" href="../styles/typography.html">
<link rel="import" href="ibm-q-content-switcher-option.html">
<dom-module id="ibm-q-content-switcher">
<template>
<style>
:host {
font-family: var(--ibm-q-font-family-base);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 2.5rem;
outline: none;
}
</style>
<slot id="content"></slot>
</template>
<script>
(function() {
/**
* `<ibm-q-content-switcher>` is a Web Component providing a content-switcher
*
* ```html
* <ibm-q-content-switcher selected="0">
* <ibm-q-content-switcher-option>Content 1</ibm-q-content-switcher-option>
* <ibm-q-content-switcher-option>Content 2</ibm-q-content-switcher-option>
* <ibm-q-content-switcher-option>Content 3</ibm-q-content-switcher-option>
* </ibm-q-content-switcher>
* ```
*
* @memberof IBMQ
* @extends Polymer.Element
* @demo components/content-switcher/demo/index.html
*/
class ContentSwitcherElement extends Polymer.mixinBehaviors(
[Polymer.IronMenubarBehavior],
Polymer.Element
) {
static get is() {
return 'ibm-q-content-switcher';
}
ready() {
super.ready();
this.selectable = 'ibm-q-content-switcher-option';
this.selectedClass = 'selected';
this.setAttribute('role', 'navigation');
}
// TODO: Waiting for PolymerElements/iron-menu-behavior/issues/81
_updateItems() {
var nodes = Polymer.dom(this).querySelectorAll(this.selectable || '*');
nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
this._setItems(nodes);
}
}
customElements.define(ContentSwitcherElement.is, ContentSwitcherElement);
/**
* @namespace IBMQ
*/
window.IBMQ = window.IBMQ || {};
IBMQ.ContentSwitcherElement = ContentSwitcherElement;
})();
</script>
</dom-module>

11
components/ibm-q-components/components/content-switcher/test/.eslintrc.json
View File

@ -1,11 +0,0 @@
{
"env": {
"mocha": true
},
"globals": {
"assert": false,
"expect": false,
"fixture": false,
"WCT": false
}
}

43
components/ibm-q-components/components/content-switcher/test/ibm-q-content-switcher-option_test.html
View File

@ -1,43 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-content-switcher-option test</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<link rel="import" href="../ibm-q-content-switcher-option.html">
</head>
<body>
<test-fixture id="BasicTestFixture">
<template>
<ibm-q-content-switcher-option>Item</ibm-q-content-switcher-option>
</template>
</test-fixture>
<script>
suite('ibm-q-content-switcher-option', function() {
let tab;
setup(() => {
tab = fixture('BasicTestFixture');
});
test('host should have the `content-switcher-option` role', () => {
expect(tab.getAttribute('role')).to.be.eql('option');
});
});
</script>
</body>
</html>

101
components/ibm-q-components/components/content-switcher/test/ibm-q-content-switcher_test.html
View File

@ -1,101 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ibm-q-content-switcher test</title>
<script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<link rel="import" href="../ibm-q-content-switcher.html">
<link rel="import" href="../ibm-q-content-switcher-option.html">
</head>
<body>
<test-fixture id="BasicTestFixture">
<template>
<ibm-q-content-switcher selected="0">
<ibm-q-content-switcher-option>Content 1</ibm-q-content-switcher-option>
<ibm-q-content-switcher-option>Content 2</ibm-q-content-switcher-option>
<ibm-q-content-switcher-option>Content 3</ibm-q-content-switcher-option>
</ibm-q-content-switcher>
</template>
</test-fixture>
<script>
function waitForIronItemsChanged(selector, callback) {
selector.addEventListener('iron-items-changed', function onIronItemsChanged() {
selector.removeEventListener('iron-items-changed', onIronItemsChanged);
callback();
});
}
suite('defaults', function() {
let switcher;
setup(() => {
switcher = fixture('BasicTestFixture');
});
test('host should have the `navigation` role', () => {
expect(switcher.getAttribute('role')).to.be.eql('navigation');
});
});
suite('set the selected attribute', function() {
let switcher;
let selectedIndex = 0;
setup((done) => {
switcher = fixture('BasicTestFixture');
waitForIronItemsChanged(switcher, function() {
switcher.selected = selectedIndex;
done();
});
});
test('selected value', function() {
assert.equal(switcher.selected, selectedIndex);
});
test('selected content has `selected` class', function() {
const option = switcher.querySelectorAll('ibm-q-content-switcher-option')[selectedIndex];
assert.isTrue(option.classList.contains('selected'));
});
});
suite('select content via click', function() {
let switcher;
let selectedIndex = 1;
let option;
setup((done) => {
switcher = fixture('BasicTestFixture');
waitForIronItemsChanged(switcher, function() {
option = switcher.querySelectorAll('ibm-q-content-switcher-option')[selectedIndex];
option.click();
done();
});
});
test('selected value', function() {
assert.equal(switcher.selected, selectedIndex);
});
test('selected content has `selected` class', function() {
const tab = switcher.querySelectorAll('ibm-q-content-switcher-option')[selectedIndex];
assert.isTrue(tab.classList.contains('selected'));
});
});
</script>
</body>
</html>

29
components/ibm-q-components/components/content-switcher/test/index.html
View File

@ -1,29 +0,0 @@
<!--
@license
Copyright (c) 2017 The IBM Research authors. All rights reserved.
This code may only be used under the MIT style license found at https://ibmresearch.github.io/LICENSE.txt
The complete set of authors may be found at https://ibmresearch.github.io/AUTHORS.txt
The complete set of contributors may be found at https://ibmresearch.github.io/CONTRIBUTORS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Tests</title>
<script src="../../../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'ibm-q-content-switcher_test.html',
'ibm-q-content-switcher_test.html?wc-shadydom=true&wc-ce=true',
'ibm-q-content-switcher-option_test.html',
'ibm-q-content-switcher-option_test.html?wc-shadydom=true&wc-ce=true'
]);
</script>
</body>
</html>

8
components/ibm-q-components/components/font-ibm-plex-local/README.md
View File

@ -1,8 +0,0 @@
# font-ibm-plex-local
A version of [font-ibm-plex](../font-ibm-plex/) using locally available font
files.
<!-- TODO: Add the license -->
The font files are subject to the X License found here: Y

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