WebCompDev / COMPONENTS

Commit edda429450529fd01204adebbd4bf958a937bca2

Authored by Luigi Serra
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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 168 \ No newline at end of file