WebCompDev / COMPONENTS

Browse Code »

Commit edda429450529fd01204adebbd4bf958a937bca2

Authored by Luigi Serra 2016-07-11 11:01:47 +0200

1 parent c3cc49af

updates

Inline Side-by-side

Showing 13 changed files with 1006 additions and 0 deletions

bower_components/paper-listbox/.bower.json 0 → 100644

View file @edda429

	1	+{
	2	+ "name": "paper-listbox",
	3	+ "version": "1.1.2",
	4	+ "description": "Implements an accessible material design listbox",
	5	+ "authors": "The Polymer Authors",
	6	+ "keywords": [
	7	+ "web-components",
	8	+ "polymer",
	9	+ "listbox"
	10	+ ],
	11	+ "main": [
	12	+ "paper-listbox.html",
	13	+ "paper-sublistbox.html"
	14	+ ],
	15	+ "private": true,
	16	+ "repository": {
	17	+ "type": "git",
	18	+ "url": "git://github.com/PolymerElements/paper-listbox"
	19	+ },
	20	+ "license": "http://polymer.github.io/LICENSE.txt",
	21	+ "homepage": "https://github.com/PolymerElements/paper-listbox",
	22	+ "ignore": [],
	23	+ "dependencies": {
	24	+ "polymer": "Polymer/polymer#^1.1.0",
	25	+ "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
	26	+ "iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
	27	+ "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
	28	+ "paper-styles": "PolymerElements/paper-styles#^1.0.0"
	29	+ },
	30	+ "devDependencies": {
	31	+ "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
	32	+ "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
	33	+ "paper-item": "PolymerElements/paper-item#^1.0.0",
	34	+ "test-fixture": "PolymerElements/test-fixture#^1.0.0",
	35	+ "web-component-tester": "Polymer/web-component-tester#^3.4.0",
	36	+ "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
	37	+ },
	38	+ "_release": "1.1.2",
	39	+ "_resolution": {
	40	+ "type": "version",
	41	+ "tag": "v1.1.2",
	42	+ "commit": "b0fde50f57db3e8e4926e9d046be9d3c159a2bff"
	43	+ },
	44	+ "_source": "git://github.com/polymerelements/paper-listbox.git",
	45	+ "_target": "~1.1.2",
	46	+ "_originalSource": "polymerelements/paper-listbox",
	47	+ "_direct": true
	48	+}
0	49	\ No newline at end of file
...	...

bower_components/paper-listbox/.gitignore 0 → 100644

View file @edda429

	1	+bower_components/
...	...

bower_components/paper-listbox/.travis.yml 0 → 100644

View file @edda429

	1	+language: node_js
	2	+sudo: false
	3	+cache:
	4	+ directories:
	5	+ - node_modules
	6	+matrix:
	7	+ include:
	8	+ - node_js: stable
	9	+ script: xvfb-run -a wct --simpleOutput -l firefox -l chrome
	10	+ addons:
	11	+ firefox: latest
	12	+ apt:
	13	+ sources:
	14	+ - google-chrome
	15	+ packages:
	16	+ - google-chrome-stable
	17	+ - node_js: node
	18	+ script:
	19	+ - \|
	20	+ if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
	21	+ wct --simpleOutput -s 'Windows 10/microsoftedge' -s 'Windows 8.1/internet explorer@11' -s 'Windows 7/internet explorer@10' -s 'OS X 10.10/safari@8' -s 'OS X 10.9/safari@7'
	22	+ fi
	23	+before_script:
	24	+- npm install bower
	25	+- npm install web-component-tester
	26	+- export PATH=$PWD/node_modules/.bin:$PATH
	27	+- bower install
	28	+env:
	29	+ global:
	30	+ - secure: uR09ZOD9Sm4HB8QLY2CAr2dWkjxzCggAQF7Tf9mjyk6ZFdzIkktv/IG5Q6ywUPrBwEgpR15a//vknAh1e96w2sdsU7x4SHdnVFV46mN0i3higjiQ0V6qSbFKH0Lom89yh3+nQtmJ8JCF/zWRYGsgpfUC/O3kRQv0ghZ0pjWeO57pvSv8mOTRMUi34cSJchBDZj9U1CzJqJYakST30XBMDHabqm6wbIqvSDve9duPiFPJi6GloRfMXxzC+Lt+WpEdjiYuZ33cmqepW3TEQf0TiZFqg9aQcBINv8723O9IcInvylXmtHRCBikCqoXE6xUNDJZWXbjxzNOwiFO4WSF9t1M7il99ByE3r4MwHlmKTCwHUb4VTvfXy1Ad+sZ0dwDJl92CmTd1/jJGXLXrqUjnUTDFucH4OxQPWtSPxOINzxBebXq+x+cpjdZPe5wp0BpcNiYN0QBNOT08C9B+vLw+/cSn5FXkYO/T+8F/Lhu6SYN1ZQ3HGpjUsNpqhEJgw+l6syQoIZfs3xN6mWqWFbs1RgtGJNrJRwn8umH1I8xy+5yZaif88RhoqTSZnTIkVWMF3/USEDZlhPv+iivFn3Oq3sAopxbR39s9KAGCMu9XdaJk/WA8crS3Jeeq+78tknrpO0VTth8DY6fHY/dV56ZJrc8wHO5souGzg2NLC+D/X20=
	31	+ - secure: k4qJ+VUFYDfWN1FEGqDSLXz6s6zb9fQu9Pwc+b4EMCvhC4Tfhdk7LbGDaw8cnBuDEA1jA9NvmbNN5PqvQ65MxTtPOWpQ/G2N08x9BVJ/u/MkWIY5/LZZoabaiHj4pQAA10sBEeBnhOhfKjNHT3H9s1lo2aWTucc+27fhiWsf2Kmkc4meYU9HKLazrCh+34neOdrkLAMA0EGIEn8OSsmDNhaY5yL71X3wil3qNvfpzXIy0ceAPvLqhM4WvEEYSeel7AohlSyTSC/9GdBvdqN6UmPKJTrk1J2wMsAMcznWDjashORcf/PaVVg4WHfYEBuDk7ECnX+G3Zb02hhw1JnVP+zK/wI9vwwkQXvYqNa+Q+713cWuGXYgVwH2TXKpsO6u69WHw50yKn6k+oOqDvX5SzRgOouFaHFO4GAllgFuX4iAltpluE+aE7I98C968FI3JrHEhCSxH8NlmmPRx794MKUsXBzPLeZ8CqrFs2llvBjVif0vJkad+X4xSxXgxs7SzK0sQS+CtKG3EFLMRNqi9OR98LRFgmkwM7OtOABnZ49lVXqrIaBk0quKAvjSg6PPXf4BUOJdvs8G91N1sf80XOfMj22iGdVUVnmwcktfhdwbm+hN5ToGgbVFTpYOM45+husfmUn7DamYmPudN2EJoawqe44zD6MfjfwqjJCv5Dk=
...	...

bower_components/paper-listbox/README.md 0 → 100644

View file @edda429

	1	+# paper-listbox
	2	+
	3	+![Build status](https://api.travis-ci.org/PolymerElements/paper-listbox.svg?branch=master)
	4	+
	5	+`<paper-listbox>` implements an accessible listbox control with Material Design styling.
...	...

bower_components/paper-listbox/bower.json 0 → 100644

View file @edda429

	1	+{
	2	+ "name": "paper-listbox",
	3	+ "version": "1.1.2",
	4	+ "description": "Implements an accessible material design listbox",
	5	+ "authors": "The Polymer Authors",
	6	+ "keywords": [
	7	+ "web-components",
	8	+ "polymer",
	9	+ "listbox"
	10	+ ],
	11	+ "main": [
	12	+ "paper-listbox.html",
	13	+ "paper-sublistbox.html"
	14	+ ],
	15	+ "private": true,
	16	+ "repository": {
	17	+ "type": "git",
	18	+ "url": "git://github.com/PolymerElements/paper-listbox"
	19	+ },
	20	+ "license": "http://polymer.github.io/LICENSE.txt",
	21	+ "homepage": "https://github.com/PolymerElements/paper-listbox",
	22	+ "ignore": [],
	23	+ "dependencies": {
	24	+ "polymer": "Polymer/polymer#^1.1.0",
	25	+ "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
	26	+ "iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
	27	+ "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
	28	+ "paper-styles": "PolymerElements/paper-styles#^1.0.0"
	29	+ },
	30	+ "devDependencies": {
	31	+ "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
	32	+ "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
	33	+ "paper-item": "PolymerElements/paper-item#^1.0.0",
	34	+ "test-fixture": "PolymerElements/test-fixture#^1.0.0",
	35	+ "web-component-tester": "Polymer/web-component-tester#^3.4.0",
	36	+ "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
	37	+ }
	38	+}
...	...

bower_components/paper-listbox/demo/index.html 0 → 100644

View file @edda429

	1	+<!doctype html>
	2	+<!--
	3	+@license
	4	+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
	5	+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	6	+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	7	+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	8	+Code distributed by Google as part of the polymer project is also
	9	+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	10	+-->
	11	+<html>
	12	+<head>
	13	+
	14	+ <meta charset="utf-8">
	15	+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	16	+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
	17	+
	18	+ <title>paper-listbox demo</title>
	19	+
	20	+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
	21	+
	22	+ <link rel="import" href="../../paper-item/paper-item.html">
	23	+ <link rel="import" href="../../iron-collapse/iron-collapse.html">
	24	+ <link rel="import" href="../paper-listbox.html">
	25	+ <link rel="import" href="../../paper-styles/demo-pages.html">
	26	+
	27	+ <style is="custom-style">
	28	+ .horizontal-section {
	29	+ padding: 0 !important;
	30	+ }
	31	+
	32	+ .avatar {
	33	+ display: inline-block;
	34	+ width: 40px;
	35	+ height: 40px;
	36	+ border-radius: 50%;
	37	+ overflow: hidden;
	38	+ background: #ccc;
	39	+ }
	40	+
	41	+ paper-item {
	42	+ --paper-item: {
	43	+ cursor: pointer;
	44	+ };
	45	+ }
	46	+
	47	+ .sublist {
	48	+ padding-left: 20px;
	49	+ padding-right: 20px;
	50	+
	51	+ }
	52	+ </style>
	53	+</head>
	54	+<body unresolved>
	55	+ <div class="horizontal-section-container">
	56	+ <div>
	57	+ <h4>Standard</h4>
	58	+ <div class="horizontal-section">
	59	+ <paper-listbox>
	60	+ <paper-item>Inbox</paper-item>
	61	+ <paper-item>Starred</paper-item>
	62	+ <paper-item>Sent mail</paper-item>
	63	+ <paper-item>Drafts</paper-item>
	64	+ </paper-listbox>
	65	+ </div>
	66	+ </div>
	67	+
	68	+ <div>
	69	+ <h4>Pre-selected</h4>
	70	+ <div class="horizontal-section">
	71	+ <paper-listbox selected="0">
	72	+ <paper-item>Inbox</paper-item>
	73	+ <paper-item disabled>Starred</paper-item>
	74	+ <paper-item>Sent mail</paper-item>
	75	+ <paper-item>Drafts</paper-item>
	76	+ </paper-listbox>
	77	+ </div>
	78	+ </div>
	79	+
	80	+ <div>
	81	+ <h4>Multi-select</h4>
	82	+ <div class="horizontal-section">
	83	+ <paper-listbox multi>
	84	+ <paper-item>Bold</paper-item>
	85	+ <paper-item>Italic</paper-item>
	86	+ <paper-item>Underline</paper-item>
	87	+ <paper-item>Strikethrough</paper-item>
	88	+ </paper-listbox>
	89	+ </div>
	90	+ </div>
	91	+ </div>
	92	+</body>
	93	+</html>
...	...

bower_components/paper-listbox/hero.svg 0 → 100644

View file @edda429

	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	4	+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	5	+ viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
	6	+<g id="background" display="none">
	7	+ <rect display="inline" fill="#B0BEC5" width="225" height="126"/>
	8	+</g>
	9	+<g id="label">
	10	+</g>
	11	+<g id="art">
	12	+ <g>
	13	+ <circle cx="86.5" cy="39" r="4"/>
	14	+ <path d="M138,44c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
	15	+ c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,37.3,100,36,98,36v-2
	16	+ c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
	17	+ c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V44z"/>
	18	+ <circle cx="86.5" cy="63" r="4"/>
	19	+ <path d="M138,68c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
	20	+ c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,61.3,100,60,98,60v-2
	21	+ c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
	22	+ c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V68z"/>
	23	+ <circle cx="86.5" cy="88" r="4"/>
	24	+ <path d="M138,93c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
	25	+ c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,86.3,100,85,98,85v-2
	26	+ c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
	27	+ c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V93z"/>
	28	+ <path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
	29	+ </g>
	30	+ <g id="ic_x5F_add_x0D_">
	31	+ </g>
	32	+</g>
	33	+<g id="Guides">
	34	+</g>
	35	+</svg>
...	...

bower_components/paper-listbox/index.html 0 → 100644

View file @edda429

	1	+<!doctype html>
	2	+<!--
	3	+@license
	4	+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
	5	+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	6	+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	7	+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	8	+Code distributed by Google as part of the polymer project is also
	9	+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	10	+-->
	11	+<html>
	12	+<head>
	13	+
	14	+ <meta charset="utf-8">
	15	+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
	16	+
	17	+ <title>paper-listbox</title>
	18	+
	19	+ <script src="../webcomponentsjs/webcomponents-lite.js"></script>
	20	+
	21	+ <link rel="import" href="../polymer/polymer.html">
	22	+ <link rel="import" href="../iron-component-page/iron-component-page.html">
	23	+
	24	+</head>
	25	+<body>
	26	+
	27	+ <iron-component-page></iron-component-page>
	28	+
	29	+</body>
	30	+</html>
...	...

bower_components/paper-listbox/paper-listbox.html 0 → 100644

View file @edda429

	1	+<!--
	2	+@license
	3	+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
	4	+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	5	+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	6	+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	7	+Code distributed by Google as part of the polymer project is also
	8	+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	9	+-->
	10	+
	11	+<link rel="import" href="../polymer/polymer.html">
	12	+<link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
	13	+<link rel="import" href="../paper-styles/default-theme.html">
	14	+
	15	+<!--
	16	+Material design: [Menus](https://www.google.com/design/spec/components/menus.html)
	17	+
	18	+`<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item
	19	+is highlighted, and the selected item has bolded text.
	20	+
	21	+ <paper-listbox>
	22	+ <paper-item>Item 1</paper-item>
	23	+ <paper-item>Item 2</paper-item>
	24	+ </paper-listbox>
	25	+
	26	+An initial selection can be specified with the `selected` attribute.
	27	+
	28	+ <paper-listbox selected="0">
	29	+ <paper-item>Item 1</paper-item>
	30	+ <paper-item>Item 2</paper-item>
	31	+ </paper-listbox>
	32	+
	33	+Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected,
	34	+and multiple item can be selected.
	35	+
	36	+ <paper-listbox multi>
	37	+ <paper-item>Item 1</paper-item>
	38	+ <paper-item>Item 2</paper-item>
	39	+ </paper-listbox>
	40	+
	41	+### Styling
	42	+
	43	+The following custom properties and mixins are available for styling:
	44	+
	45	+Custom property \| Description \| Default
	46	+----------------\|-------------\|----------
	47	+`--paper-listbox-background-color` \| Menu background color \| `--primary-background-color`
	48	+`--paper-listbox-color` \| Menu foreground color \| `--primary-text-color`
	49	+`--paper-listbox` \| Mixin applied to the listbox \| `{}`
	50	+
	51	+### Accessibility
	52	+
	53	+`<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will also have
	54	+`aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and
	55	+down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter
	56	+of a listbox item will also focus it.
	57	+
	58	+@group Paper Elements
	59	+@element paper-listbox
	60	+@hero hero.svg
	61	+@demo demo/index.html
	62	+-->
	63	+
	64	+<dom-module id="paper-listbox">
	65	+ <template>
	66	+ <style>
	67	+ :host {
	68	+ display: block;
	69	+ padding: 8px 0;
	70	+
	71	+ background: var(--paper-listbox-background-color, --primary-background-color);
	72	+ color: var(--paper-listbox-color, --primary-text-color);
	73	+
	74	+ @apply(--paper-listbox);
	75	+ }
	76	+ </style>
	77	+
	78	+ <content></content>
	79	+ </template>
	80	+
	81	+ <script>
	82	+ (function() {
	83	+ Polymer({
	84	+ is: 'paper-listbox',
	85	+
	86	+ behaviors: [
	87	+ Polymer.IronMenuBehavior
	88	+ ],
	89	+
	90	+ hostAttributes: {
	91	+ role: 'listbox'
	92	+ }
	93	+ });
	94	+ })();
	95	+ </script>
	96	+</dom-module>
...	...

bower_components/paper-listbox/test/index.html 0 → 100644

View file @edda429

	1	+<!doctype html>
	2	+<!--
	3	+@license
	4	+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
	5	+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	6	+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	7	+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	8	+Code distributed by Google as part of the polymer project is also
	9	+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	10	+-->
	11	+<html>
	12	+ <head>
	13	+
	14	+ <title>paper-listbox tests</title>
	15	+
	16	+ <meta charset="utf-8">
	17	+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	18	+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
	19	+
	20	+ <script src="../../web-component-tester/browser.js"></script>
	21	+
	22	+ </head>
	23	+ <body>
	24	+
	25	+ <script>
	26	+
	27	+ WCT.loadSuites([
	28	+ 'paper-listbox.html'
	29	+ ]);
	30	+
	31	+ </script>
	32	+
	33	+ </body>
	34	+</html>
...	...

bower_components/paper-listbox/test/paper-listbox.html 0 → 100644

View file @edda429

	1	+<!doctype html>
	2	+<!--
	3	+@license
	4	+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
	5	+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	6	+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	7	+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	8	+Code distributed by Google as part of the polymer project is also
	9	+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	10	+-->
	11	+<html>
	12	+ <head>
	13	+
	14	+ <title>paper-listbox tests</title>
	15	+
	16	+ <meta charset="utf-8">
	17	+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	18	+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
	19	+
	20	+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
	21	+ <script src="../../web-component-tester/browser.js"></script>
	22	+
	23	+ <link rel="import" href="../paper-listbox.html">
	24	+
	25	+ </head>
	26	+ <body>
	27	+
	28	+ <test-fixture id="basic">
	29	+ <template>
	30	+ <paper-listbox selected="0">
	31	+ <div role="option">item 1</div>
	32	+ <div role="option">item 2</div>
	33	+ <div role="option">item 3</div>
	34	+ </paper-listbox>
	35	+ </template>
	36	+ </test-fixture>
	37	+
	38	+ <script>
	39	+
	40	+ suite('<paper-listbox>', function() {
	41	+ var listbox;
	42	+
	43	+ setup(function() {
	44	+ listbox = fixture('basic');
	45	+ });
	46	+
	47	+ test('selected item has an appropriate className', function(done) {
	48	+ Polymer.Base.async(function() {
	49	+ assert(listbox.selectedItem.classList.contains('iron-selected'));
	50	+ done();
	51	+ }, 1);
	52	+ });
	53	+
	54	+ test('has listbox aria role', function() {
	55	+ assert(listbox.getAttribute('role') === 'listbox');
	56	+ });
	57	+
	58	+ a11ySuite('basic');
	59	+ });
	60	+
	61	+ </script>
	62	+
	63	+ </body>
	64	+</html>
...	...

controllets/select-marker-map-controllet/select-marker-map-controllet.html 0 → 100644

View file @edda429

	1	+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
	2	+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
	3	+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
	4	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
	5	+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
	6	+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
	7	+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"/>
	8	+<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html"/>
	9	+<link rel="import" href="../../bower_components/paper-item/paper-item.html"/>
	10	+
	11	+<script src="../../locales/paper_card_controllet_ln.js"></script>
	12	+
	13	+<dom-module id="select-marker-map-controllet">
	14	+
	15	+ <template>
	16	+ <style is="custom-style">
	17	+ #map_tootlbar{
	18	+ background: #ffffff;
	19	+ border: 1px solid #ccc;
	20	+ position: absolute;
	21	+ top: 2%;
	22	+ right: 1%;
	23	+ z-index: 1;
	24	+ padding: 4px;
	25	+ }
	26	+
	27	+ div.ol3-geocoder-container{
	28	+ position: absolute;
	29	+ top: 26%;
	30	+ left: .5em;
	31	+ box-sizing: border-box;
	32	+ }
	33	+ </style>
	34	+ <link href="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css" rel="stylesheet">
	35	+
	36	+
	37	+ <div id="map_tootlbar">
	38	+ <paper-dropdown-menu label="Interaction" id="interaction_box">
	39	+ <paper-listbox id="interaction_box" class="dropdown-content" selected={{selected_interaction}}>
	40	+ <paper-item>Marker</paper-item>
	41	+ <paper-item>LineString</paper-item>
	42	+ <paper-item>Polygon</paper-item>
	43	+ <paper-item disabled>Circle</paper-item>
	44	+ <paper-item>Square</paper-item>
	45	+ <paper-item>Box</paper-item>
	46	+ <paper-item>Text</paper-item>
	47	+ </paper-listbox>
	48	+ </paper-dropdown-menu>
	49	+
	50	+ <!--<paper-input id="shape_label" label="Shape label" maxlenght="30" value="{{label}}"></paper-input>-->
	51	+
	52	+ </div>
	53	+
	54	+ <div id="map" tabindex="0" style="height: 100%; width: 100%"></div>
	55	+ <div id="popup" class="ol-popup">
	56	+ <a href="#" id="popup-closer" class="ol-popup-closer"></a>
	57	+ <div id="popup_content"></div>
	58	+ </div>
	59	+ </template>
	60	+
	61	+ <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
	62	+ <script src="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
	63	+ <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
	64	+
	65	+ <script>
	66	+
	67	+ _this = null;
	68	+ Polymer({
	69	+ is: "select-marker-map-controllet",
	70	+
	71	+ listeners : {
	72	+ 'iron-select' : '_changeInteraction'
	73	+ },
	74	+
	75	+ properties: {
	76	+ lang:{
	77	+ type: String,
	78	+ value: navigator.language
	79	+ },
	80	+ map:{
	81	+ type: Object
	82	+ },
	83	+
	84	+ olview:{
	85	+ type: Object
	86	+ },
	87	+
	88	+ geocoder:{
	89	+ type: Object
	90	+ },
	91	+
	92	+ overlay:{
	93	+ type: Object
	94	+ },
	95	+
	96	+ iconStyle:{
	97	+ type : Object
	98	+ },
	99	+
	100	+ vectorSource:{
	101	+ type: Object
	102	+ },
	103	+
	104	+ coordinate: {
	105	+ type: Array,
	106	+ value: []
	107	+ },
	108	+
	109	+ interaction:{
	110	+ type: String,
	111	+ value: "marker"//marker - geojson
	112	+ },
	113	+
	114	+ selected_interaction:{
	115	+ type: Number,
	116	+ value: 0
	117	+ },
	118	+
	119	+ draw_layer:{
	120	+ type: Object
	121	+ },
	122	+
	123	+ source: {
	124	+ type: Object
	125	+ },
	126	+
	127	+ draw:{
	128	+ type: Object
	129	+ },
	130	+
	131	+ textStyle:{
	132	+ type: Object
	133	+ },
	134	+
	135	+ geoStyle:{
	136	+ type: Object
	137	+ },
	138	+
	139	+ label: {
	140	+ type: String,
	141	+ value: ""
	142	+ }
	143	+ },
	144	+
	145	+ ready : function(){
	146	+ _this = this;
	147	+ this.olview = new ol.View({
	148	+ center: [0, 0],
	149	+ projection: "EPSG:4326",
	150	+ zoom: 3,
	151	+ minZoom: 2,
	152	+ maxZoom: 20
	153	+ });
	154	+
	155	+ var baseLayer = new ol.layer.Tile({
	156	+ source: new ol.source.OSM()
	157	+ });
	158	+
	159	+ //marker layer
	160	+ this.iconStyle = new ol.style.Style({
	161	+ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
	162	+ anchor: [0.5, 46],
	163	+ anchorXUnits: 'fraction',
	164	+ anchorYUnits: 'pixels',
	165	+ opacity: 0.75,
	166	+ src: 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images/marker-icon.png'
	167	+ }))
	168	+ });
	169	+
	170	+ this.vectorSource = new ol.source.Vector({});
	171	+
	172	+ //draw layer
	173	+ this.source = new ol.source.Vector({wrapX: false});
	174	+
	175	+ this.draw_layer = new ol.layer.Vector({
	176	+ source: this.source,
	177	+ style: new ol.style.Style({
	178	+ fill: new ol.style.Fill({
	179	+ color: 'rgba(255, 255, 255, 0.6)'
	180	+ }),
	181	+ stroke: new ol.style.Stroke({
	182	+ color: '#ffff00',
	183	+ width: 4
	184	+ }),
	185	+ image: new ol.style.Circle({
	186	+ radius: 7,
	187	+ fill: new ol.style.Fill({
	188	+ color: '#ffff00'
	189	+ })
	190	+ })
	191	+ })
	192	+ });
	193	+
	194	+ this.map = new ol.Map({
	195	+ target:'map',
	196	+ view: this.olview,
	197	+ controls: ol.control.defaults({
	198	+ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
	199	+ collapsible: false
	200	+ })}),
	201	+ loadTilesWhileAnimating: true,
	202	+ loadTilesWhileInteracting: true,
	203	+ layers: [baseLayer,
	204	+ new ol.layer.Vector({
	205	+ source: this.vectorSource
	206	+ }),
	207	+ this.draw_layer
	208	+ ]
	209	+ });
	210	+
	211	+ //Instantiate with some options and add the Control
	212	+ this.geocoder = new Geocoder('nominatim', {
	213	+ provider: 'photon',
	214	+ lang: 'en',
	215	+ placeholder: 'Search for ...',
	216	+ limit: 5,
	217	+ keepOpen: true,
	218	+ preventDefault : true
	219	+ });
	220	+
	221	+ this.overlay = new ol.Overlay({
	222	+ element: document.getElementById('popup'),
	223	+ offset: [0, -40]
	224	+ });
	225	+
	226	+ this.map.addControl(this.geocoder);
	227	+
	228	+ //Listen when an address is chosen
	229	+ this.geocoder.on('addresschosen', function(evt){
	230	+ _this.olview.setCenter(evt.coordinate);
	231	+ _this.olview.setZoom(16);
	232	+ if(_this.selected_interaction == 0) {
	233	+ _this.setMarker(evt.coordinate);
	234	+ }
	235	+
	236	+ //_this.$.popup_content.innerHTML = '<p>'+ evt.address.formatted +'</p>';
	237	+ //_this.overlay.setPosition(coord);
	238	+ });
	239	+
	240	+ this.map.on('click', function(evt) {
	241	+ if(_this.selected_interaction == 0) {
	242	+ _this.setMarker(evt.coordinate);
	243	+ }
	244	+ });
	245	+
	246	+ this.async(function(){this.resize($(document).height(), $(document).width())}, 100);
	247	+ },
	248	+
	249	+ setMarker: function(coordinate){
	250	+ var iconFeature = new ol.Feature({
	251	+ geometry: new ol.geom.Point(coordinate),
	252	+ name: 'New Point'
	253	+ });
	254	+
	255	+ iconFeature.setStyle(_this.iconStyle);
	256	+
	257	+ this.vectorSource.clear(true);
	258	+ this.vectorSource.addFeature( iconFeature );
	259	+
	260	+ //this.coordinate = ol.proj.transform([coordinate[1],coordinate[0]], "EPSG:900913", "EPSG:4326");
	261	+ this.coordinate = [coordinate[1],coordinate[0]];
	262	+ },
	263	+
	264	+ addInteraction : function() {
	265	+ this.map.removeInteraction(this.draw);
	266	+ var geometryFunction, maxPoints, interaction_type;
	267	+ switch(this.selected_interaction){
	268	+ case 0:
	269	+ //this.map.addInteraction(ol.interaction.default());
	270	+ break;
	271	+ case 1:
	272	+ interaction_type = "LineString";
	273	+ break;
	274	+ case 2:
	275	+ interaction_type = "Polygon";
	276	+ break;
	277	+ case 3:
	278	+ interaction_type = "Circle";
	279	+ alert("Circle is not supported by GeoJSON");
	280	+ return;
	281	+ break;
	282	+ case 4:
	283	+ interaction_type = "Circle";
	284	+ geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
	285	+ break;
	286	+ case 5:
	287	+ interaction_type = "LineString";
	288	+ maxPoints = 2;
	289	+ geometryFunction = function(coordinates, geometry) {
	290	+ if (!geometry) {
	291	+ geometry = new ol.geom.Polygon(null);
	292	+ }
	293	+ var start = coordinates[0];
	294	+ var end = coordinates[1];
	295	+ geometry.setCoordinates([
	296	+ [start, [start[0], end[1]], end, [end[0], start[1]], start]
	297	+ ]);
	298	+ return geometry;
	299	+ };
	300	+ }
	301	+
	302	+ if(this.selected_interaction != 0) {
	303	+ this.draw = new ol.interaction.Draw({
	304	+ source: this.source,
	305	+ type: /** @type {ol.geom.GeometryType} */ (interaction_type),
	306	+ geometryFunction: geometryFunction,
	307	+ maxPoints: maxPoints,
	308	+ style : this.getTextStyle(-12)
	309	+ });
	310	+
	311	+ this.map.addInteraction(this.draw);
	312	+
	313	+ this.draw.on('drawend', function(e) {
	314	+ e.feature.setStyle(_this.getTextStyle(-12));
	315	+ });
	316	+ }
	317	+ },
	318	+
	319	+ getGeoJSON: function(){
	320	+ var allFeatures = this.draw_layer.getSource().getFeatures();
	321	+ var format = new ol.format.GeoJSON();
	322	+ return format.writeFeatures(allFeatures);
	323	+ },
	324	+
	325	+ _changeInteraction: function(e){
	326	+ this.addInteraction();
	327	+ },
	328	+
	329	+ getTextStyle: function(offsetX) {
	330	+ return new ol.style.Style({
	331	+ fill: new ol.style.Fill({
	332	+ color: 'rgba(255, 255, 255, 0.6)'
	333	+ }),
	334	+ stroke: new ol.style.Stroke({
	335	+ color: '#ffff00',
	336	+ width: 4
	337	+ }),
	338	+ text : new ol.style.Text({
	339	+ fill : new ol.style.Fill({
	340	+ color : '#000'
	341	+ }),
	342	+ stroke : new ol.style.Stroke({
	343	+ color : '#fff',
	344	+ width : 4
	345	+ }),
	346	+ text : this.label,
	347	+ font : '20px Verdana',
	348	+ offsetX : offsetX ? offsetX : 0,
	349	+ offsetY : 12
	350	+ })
	351	+ });
	352	+ },
	353	+
	354	+ resize : function(h,w){
	355	+ this.$.map.style.height = h + "px";
	356	+ this.$.map.style.width = w + "px";
	357	+ $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('height',($(document).height() + "px"));
	358	+ $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('width',($(document).width() + "px"));
	359	+ this.map.updateSize();
	360	+ }
	361	+ })
	362	+ </script>
	363	+
	364	+</dom-module>
0	365	\ No newline at end of file
...	...

controllets/select-marker-map-controllet/select-marker-map-controllet_.html 0 → 100644

View file @edda429

	1	+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
	2	+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
	3	+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
	4	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
	5	+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
	6	+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
	7	+
	8	+<script src="../../locales/paper_card_controllet_ln.js"></script>
	9	+
	10	+<dom-module id="select-marker-map-controllet">
	11	+
	12	+ <template>
	13	+ <link href="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css" rel="stylesheet">
	14	+
	15	+ <div id="map" tabindex="0" style="height: 100%; width: 100%"></div>
	16	+ <div id="popup" class="ol-popup">
	17	+ <a href="#" id="popup-closer" class="ol-popup-closer"></a>
	18	+ <div id="popup_content"></div>
	19	+ </div>
	20	+ </template>
	21	+
	22	+ <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
	23	+ <script src="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
	24	+ <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
	25	+
	26	+ <script>
	27	+
	28	+ _this = null;
	29	+ Polymer({
	30	+ is: "select-marker-map-controllet",
	31	+ properties: {
	32	+ lang:{
	33	+ type: String,
	34	+ value: navigator.language
	35	+ },
	36	+ map:{
	37	+ type: Object
	38	+ },
	39	+
	40	+ olview:{
	41	+ type: Object
	42	+ },
	43	+
	44	+ geocoder:{
	45	+ type: Object
	46	+ },
	47	+
	48	+ overlay:{
	49	+ type: Object
	50	+ },
	51	+
	52	+ iconStyle:{
	53	+ type : Object
	54	+ },
	55	+
	56	+ vectorSource:{
	57	+ type: Object
	58	+ },
	59	+
	60	+ coordinate: {
	61	+ type: Array,
	62	+ value: []
	63	+ }
	64	+
	65	+ },
	66	+
	67	+ ready : function(){
	68	+ _this = this;
	69	+
	70	+ this.olview = new ol.View({
	71	+ center: [0, 0],
	72	+ zoom: 3,
	73	+ minZoom: 2,
	74	+ maxZoom: 20
	75	+ });
	76	+
	77	+ var baseLayer = new ol.layer.Tile({
	78	+ source: new ol.source.OSM()
	79	+ });
	80	+
	81	+ this.iconStyle = new ol.style.Style({
	82	+ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
	83	+ anchor: [0.5, 46],
	84	+ anchorXUnits: 'fraction',
	85	+ anchorYUnits: 'pixels',
	86	+ opacity: 0.75,
	87	+ src: 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images/marker-icon.png'
	88	+ }))
	89	+ });
	90	+
	91	+ this.vectorSource = new ol.source.Vector({});
	92	+
	93	+ this.map = new ol.Map({
	94	+ target:'map',
	95	+ view: this.olview,
	96	+ controls: ol.control.defaults({
	97	+ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
	98	+ collapsible: false
	99	+ })}),
	100	+ loadTilesWhileAnimating: true,
	101	+ loadTilesWhileInteracting: true,
	102	+ layers: [baseLayer,
	103	+ new ol.layer.Vector({
	104	+ source: this.vectorSource
	105	+ })
	106	+ ]
	107	+ });
	108	+
	109	+ //Instantiate with some options and add the Control
	110	+ this.geocoder = new Geocoder('nominatim', {
	111	+ provider: 'photon',
	112	+ lang: 'en',
	113	+ placeholder: 'Search for ...',
	114	+ limit: 5,
	115	+ keepOpen: true,
	116	+ preventDefault : true
	117	+ });
	118	+
	119	+ this.overlay = new ol.Overlay({
	120	+ element: document.getElementById('popup'),
	121	+ offset: [0, -40]
	122	+ });
	123	+
	124	+ this.map.addControl(this.geocoder);
	125	+
	126	+ //Listen when an address is chosen
	127	+ this.geocoder.on('addresschosen', function(evt){
	128	+ _this.setMarker(evt.coordinate);
	129	+ _this.olview.setCenter(evt.coordinate);
	130	+ _this.olview.setZoom(16);
	131	+
	132	+ //_this.$.popup_content.innerHTML = '<p>'+ evt.address.formatted +'</p>';
	133	+ //_this.overlay.setPosition(coord);
	134	+ });
	135	+
	136	+ this.map.on('click', function(evt) {
	137	+ _this.setMarker(evt.coordinate);
	138	+ });
	139	+ },
	140	+
	141	+ setMarker: function(coordinate){
	142	+ var iconFeature = new ol.Feature({
	143	+ geometry: new ol.geom.Point(coordinate),
	144	+ name: 'Null Island',
	145	+ population: 4000,
	146	+ rainfall: 500
	147	+ });
	148	+
	149	+ iconFeature.setStyle(_this.iconStyle);
	150	+
	151	+ this.vectorSource.clear(true);
	152	+ this.vectorSource.addFeature( iconFeature );
	153	+
	154	+ this.coordinate = ol.proj.transform([coordinate[1],coordinate[0]], "EPSG:900913", "EPSG:4326");
	155	+ },
	156	+
	157	+ resize : function(h,w){
	158	+ this.$.map.style.height = h + "px";
	159	+ this.$.map.style.width = w + "px";
	160	+ this.map.updateSize();
	161	+ },
	162	+
	163	+
	164	+ })
	165	+ </script>
	166	+
	167	+</dom-module>
0	168	\ No newline at end of file
...	...