polymer-paper-elements-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/README.md +51 -0
- data/Rakefile +1 -0
- data/app/assets/components/iron-a11y-announcer/iron-a11y-announcer.html +125 -0
- data/app/assets/components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html +418 -0
- data/app/assets/components/iron-autogrow-textarea/hero.svg +33 -0
- data/app/assets/components/iron-autogrow-textarea/iron-autogrow-textarea.html +263 -0
- data/app/assets/components/iron-behaviors/iron-button-state.html +195 -0
- data/app/assets/components/iron-behaviors/iron-control-state.html +102 -0
- data/app/assets/components/iron-fit-behavior/iron-fit-behavior.html +230 -0
- data/app/assets/components/iron-flex-layout/classes/iron-flex-layout.html +307 -0
- data/app/assets/components/iron-flex-layout/classes/iron-shadow-flex-layout.html +302 -0
- data/app/assets/components/iron-flex-layout/iron-flex-layout.html +313 -0
- data/app/assets/components/iron-form-element-behavior/iron-form-element-behavior.html +50 -0
- data/app/assets/components/iron-icon/hero.svg +19 -0
- data/app/assets/components/iron-icon/iron-icon.html +187 -0
- data/app/assets/components/iron-icons/av-icons.html +73 -0
- data/app/assets/components/iron-icons/communication-icons.html +59 -0
- data/app/assets/components/iron-icons/device-icons.html +94 -0
- data/app/assets/components/iron-icons/editor-icons.html +70 -0
- data/app/assets/components/iron-icons/hardware-icons.html +61 -0
- data/app/assets/components/iron-icons/hero.svg +35 -0
- data/app/assets/components/iron-icons/image-icons.html +164 -0
- data/app/assets/components/iron-icons/iron-icons.html +303 -0
- data/app/assets/components/iron-icons/maps-icons.html +71 -0
- data/app/assets/components/iron-icons/notification-icons.html +62 -0
- data/app/assets/components/iron-icons/social-icons.html +40 -0
- data/app/assets/components/iron-iconset-svg/iron-iconset-svg.html +191 -0
- data/app/assets/components/iron-input/hero.svg +19 -0
- data/app/assets/components/iron-input/iron-input.html +235 -0
- data/app/assets/components/iron-media-query/hero.svg +29 -0
- data/app/assets/components/iron-media-query/iron-media-query.html +84 -0
- data/app/assets/components/iron-menu-behavior/iron-menu-behavior.html +214 -0
- data/app/assets/components/iron-menu-behavior/iron-menubar-behavior.html +65 -0
- data/app/assets/components/iron-meta/hero.svg +33 -0
- data/app/assets/components/iron-meta/iron-meta.html +352 -0
- data/app/assets/components/iron-overlay-behavior/iron-overlay-backdrop.html +132 -0
- data/app/assets/components/iron-overlay-behavior/iron-overlay-behavior.html +432 -0
- data/app/assets/components/iron-overlay-behavior/iron-overlay-manager.html +107 -0
- data/app/assets/components/iron-range-behavior/iron-range-behavior.html +101 -0
- data/app/assets/components/iron-resizable-behavior/iron-resizable-behavior.html +139 -0
- data/app/assets/components/iron-selector/iron-multi-selectable.html +120 -0
- data/app/assets/components/iron-selector/iron-selectable.html +307 -0
- data/app/assets/components/iron-selector/iron-selection.html +115 -0
- data/app/assets/components/iron-selector/iron-selector.html +71 -0
- data/app/assets/components/iron-validatable-behavior/iron-validatable-behavior.html +100 -0
- data/app/assets/components/neon-animation/animations/cascaded-animation.html +84 -0
- data/app/assets/components/neon-animation/animations/fade-in-animation.html +49 -0
- data/app/assets/components/neon-animation/animations/fade-out-animation.html +49 -0
- data/app/assets/components/neon-animation/animations/hero-animation.html +83 -0
- data/app/assets/components/neon-animation/animations/opaque-animation.html +46 -0
- data/app/assets/components/neon-animation/animations/ripple-animation.html +92 -0
- data/app/assets/components/neon-animation/animations/scale-down-animation.html +65 -0
- data/app/assets/components/neon-animation/animations/scale-up-animation.html +58 -0
- data/app/assets/components/neon-animation/animations/slide-down-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/slide-from-left-animation.html +60 -0
- data/app/assets/components/neon-animation/animations/slide-from-right-animation.html +60 -0
- data/app/assets/components/neon-animation/animations/slide-left-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/slide-right-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/slide-up-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/transform-animation.html +61 -0
- data/app/assets/components/neon-animation/guides/neon-animation.md +313 -0
- data/app/assets/components/neon-animation/neon-animatable-behavior.html +156 -0
- data/app/assets/components/neon-animation/neon-animatable.html +54 -0
- data/app/assets/components/neon-animation/neon-animated-pages.html +208 -0
- data/app/assets/components/neon-animation/neon-animation-behavior.html +88 -0
- data/app/assets/components/neon-animation/neon-animation-runner-behavior.html +110 -0
- data/app/assets/components/neon-animation/neon-animation.html +17 -0
- data/app/assets/components/neon-animation/neon-animations.html +25 -0
- data/app/assets/components/neon-animation/neon-shared-element-animatable-behavior.html +37 -0
- data/app/assets/components/neon-animation/neon-shared-element-animation-behavior.html +66 -0
- data/app/assets/components/neon-animation/web-animations.html +11 -0
- data/app/assets/components/paper-behaviors/paper-button-behavior.html +55 -0
- data/app/assets/components/paper-behaviors/paper-inky-focus-behavior.html +44 -0
- data/app/assets/components/paper-button/paper-button.html +177 -0
- data/app/assets/components/paper-checkbox/metadata.html +17 -0
- data/app/assets/components/paper-checkbox/paper-checkbox.css +149 -0
- data/app/assets/components/paper-checkbox/paper-checkbox.html +163 -0
- data/app/assets/components/paper-dialog-behavior/hero.svg +51 -0
- data/app/assets/components/paper-dialog-behavior/paper-dialog-behavior.html +236 -0
- data/app/assets/components/paper-dialog-behavior/paper-dialog-common.css +58 -0
- data/app/assets/components/paper-dialog-scrollable/hero.svg +69 -0
- data/app/assets/components/paper-dialog-scrollable/paper-dialog-scrollable.html +150 -0
- data/app/assets/components/paper-dialog/hero.svg +58 -0
- data/app/assets/components/paper-dialog/paper-dialog.html +122 -0
- data/app/assets/components/paper-drawer-panel/hero.svg +21 -0
- data/app/assets/components/paper-drawer-panel/paper-drawer-panel.css +142 -0
- data/app/assets/components/paper-drawer-panel/paper-drawer-panel.html +585 -0
- data/app/assets/components/paper-fab/paper-fab.html +159 -0
- data/app/assets/components/paper-header-panel/hero.svg +38 -0
- data/app/assets/components/paper-header-panel/paper-header-panel.html +496 -0
- data/app/assets/components/paper-icon-button/paper-icon-button.html +141 -0
- data/app/assets/components/paper-input/all-imports.html +12 -0
- data/app/assets/components/paper-input/hero.svg +19 -0
- data/app/assets/components/paper-input/paper-input-addon-behavior.html +43 -0
- data/app/assets/components/paper-input/paper-input-behavior.html +293 -0
- data/app/assets/components/paper-input/paper-input-char-counter.html +95 -0
- data/app/assets/components/paper-input/paper-input-container.html +495 -0
- data/app/assets/components/paper-input/paper-input-error.html +99 -0
- data/app/assets/components/paper-input/paper-input.html +126 -0
- data/app/assets/components/paper-input/paper-textarea.html +100 -0
- data/app/assets/components/paper-item/all-imports.html +13 -0
- data/app/assets/components/paper-item/paper-icon-item.html +86 -0
- data/app/assets/components/paper-item/paper-item-body.html +93 -0
- data/app/assets/components/paper-item/paper-item-shared.css +19 -0
- data/app/assets/components/paper-item/paper-item.html +95 -0
- data/app/assets/components/paper-material/paper-material.html +98 -0
- data/app/assets/components/paper-menu/hero.svg +35 -0
- data/app/assets/components/paper-menu/paper-menu.html +133 -0
- data/app/assets/components/paper-progress/hero.svg +21 -0
- data/app/assets/components/paper-progress/paper-progress.html +199 -0
- data/app/assets/components/paper-radio-button/hero.svg +22 -0
- data/app/assets/components/paper-radio-button/paper-radio-button.css +109 -0
- data/app/assets/components/paper-radio-button/paper-radio-button.html +148 -0
- data/app/assets/components/paper-radio-group/hero.svg +25 -0
- data/app/assets/components/paper-radio-group/paper-radio-group.html +186 -0
- data/app/assets/components/paper-ripple/hero.svg +30 -0
- data/app/assets/components/paper-ripple/paper-ripple.html +714 -0
- data/app/assets/components/paper-scroll-header-panel/hero.svg +41 -0
- data/app/assets/components/paper-scroll-header-panel/paper-scroll-header-panel.html +455 -0
- data/app/assets/components/paper-slider/hero.svg +20 -0
- data/app/assets/components/paper-slider/paper-slider.css +252 -0
- data/app/assets/components/paper-slider/paper-slider.html +449 -0
- data/app/assets/components/paper-spinner/hero.svg +27 -0
- data/app/assets/components/paper-spinner/paper-spinner.css +325 -0
- data/app/assets/components/paper-spinner/paper-spinner.html +222 -0
- data/app/assets/components/paper-styles/classes/global.html +96 -0
- data/app/assets/components/paper-styles/classes/shadow-layout.html +302 -0
- data/app/assets/components/paper-styles/classes/shadow.html +39 -0
- data/app/assets/components/paper-styles/classes/typography.html +171 -0
- data/app/assets/components/paper-styles/color.html +333 -0
- data/app/assets/components/paper-styles/default-theme.html +39 -0
- data/app/assets/components/paper-styles/paper-styles-classes.html +14 -0
- data/app/assets/components/paper-styles/paper-styles.html +17 -0
- data/app/assets/components/paper-styles/shadow.html +61 -0
- data/app/assets/components/paper-styles/typography.html +240 -0
- data/app/assets/components/paper-tabs/hero.svg +23 -0
- data/app/assets/components/paper-tabs/paper-tab.html +158 -0
- data/app/assets/components/paper-tabs/paper-tabs-icons.html +18 -0
- data/app/assets/components/paper-tabs/paper-tabs.html +483 -0
- data/app/assets/components/paper-toast/hero.svg +20 -0
- data/app/assets/components/paper-toast/paper-toast.html +164 -0
- data/app/assets/components/paper-toggle-button/hero.svg +22 -0
- data/app/assets/components/paper-toggle-button/paper-toggle-button.css +108 -0
- data/app/assets/components/paper-toggle-button/paper-toggle-button.html +183 -0
- data/app/assets/components/paper-toolbar/paper-toolbar.html +375 -0
- data/app/assets/components/polymer-gestures/Gruntfile.js +60 -0
- data/app/assets/components/polymer-gestures/banner.txt +9 -0
- data/app/assets/components/polymer-gestures/build.json +17 -0
- data/app/assets/components/polymer-gestures/conf/karma.conf.js +39 -0
- data/app/assets/components/polymer-gestures/package.json +20 -0
- data/app/assets/components/polymer-gestures/polymer-gestures.html +21 -0
- data/app/assets/components/polymer-gestures/polymer-gestures.js +46 -0
- data/app/assets/components/polymer-gestures/src/dispatcher.js +474 -0
- data/app/assets/components/polymer-gestures/src/eventFactory.js +127 -0
- data/app/assets/components/polymer-gestures/src/hold.js +129 -0
- data/app/assets/components/polymer-gestures/src/mouse.js +135 -0
- data/app/assets/components/polymer-gestures/src/ms.js +80 -0
- data/app/assets/components/polymer-gestures/src/pinch.js +186 -0
- data/app/assets/components/polymer-gestures/src/platform-events.js +39 -0
- data/app/assets/components/polymer-gestures/src/pointer.js +68 -0
- data/app/assets/components/polymer-gestures/src/pointermap.js +67 -0
- data/app/assets/components/polymer-gestures/src/scope.js +10 -0
- data/app/assets/components/polymer-gestures/src/tap.js +103 -0
- data/app/assets/components/polymer-gestures/src/targetfind.js +244 -0
- data/app/assets/components/polymer-gestures/src/touch-action.js +60 -0
- data/app/assets/components/polymer-gestures/src/touch.js +341 -0
- data/app/assets/components/polymer-gestures/src/track.js +230 -0
- data/app/assets/components/web-animations-js/web-animations-next-lite.min.js +17 -0
- data/app/assets/components/web-animations-js/web-animations-next.min.js +17 -0
- data/app/assets/components/web-animations-js/web-animations.min.js +17 -0
- data/app/assets/components/webcomponentsjs/CustomElements.js +956 -0
- data/app/assets/components/webcomponentsjs/CustomElements.min.js +11 -0
- data/app/assets/components/webcomponentsjs/HTMLImports.js +1078 -0
- data/app/assets/components/webcomponentsjs/HTMLImports.min.js +11 -0
- data/app/assets/components/webcomponentsjs/MutationObserver.js +344 -0
- data/app/assets/components/webcomponentsjs/MutationObserver.min.js +11 -0
- data/app/assets/components/webcomponentsjs/ShadowDOM.js +4414 -0
- data/app/assets/components/webcomponentsjs/ShadowDOM.min.js +15 -0
- data/app/assets/components/webcomponentsjs/package.json +31 -0
- data/app/assets/components/webcomponentsjs/webcomponents-lite.js +2300 -0
- data/app/assets/components/webcomponentsjs/webcomponents-lite.min.js +13 -0
- data/app/assets/components/webcomponentsjs/webcomponents.js +7112 -0
- data/app/assets/components/webcomponentsjs/webcomponents.min.js +15 -0
- data/lib/polymer-paper-elements-rails.rb +2 -0
- data/lib/polymer-paper-elements-rails/engine.rb +4 -0
- data/lib/polymer-paper-elements-rails/version.rb +3 -0
- metadata +272 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 08eab91f322bf31af699ff40ff332fd11a71b357
|
|
4
|
+
data.tar.gz: 2811ed6767decb0944417cefa7a0f35f4364b090
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: c6ec0887baf53c82c1c945f6dd1c18da2f6de1bf51dff4ea7c2af5db3a2dfa2906dcba082222750b0ae03fed9b341200850b0df9cb213e547974eda5fbdae01a
|
|
7
|
+
data.tar.gz: 7a00ca162e8fc78a02adb758cf2b4caa3adb467fd141380d55c86443149f2e7fd1798c16793c3bafa3d0046c649e53fd781eb00b7e00374699bdd96c19640ce5
|
data/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# Polymer::Paper::Rails
|
|
2
|
+
|
|
3
|
+
The Paper elements are a set of UI elements that implement the [material design system](http://www.google.com/design/spec/material-design/introduction.html).
|
|
4
|
+
|
|
5
|
+
Polymer-paper-rails gem brings polymer paper web components into your Rails project.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Add this line to your application's Gemfile:
|
|
10
|
+
|
|
11
|
+
```ruby
|
|
12
|
+
gem 'polymer-paper-elements-rails'
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
And then execute:
|
|
16
|
+
|
|
17
|
+
$ bundle
|
|
18
|
+
|
|
19
|
+
Or install it yourself as:
|
|
20
|
+
|
|
21
|
+
$ gem install polymer-paper-elements-rails
|
|
22
|
+
|
|
23
|
+
## Getting started
|
|
24
|
+
|
|
25
|
+
In order to use Polymer paper elements you need to have
|
|
26
|
+
`polymer` installed in your project. Use [polymer-rails](https://github.com/alchapone/polymer-rails) gem for adding `polymer` to your Rails application.
|
|
27
|
+
|
|
28
|
+
```ruby
|
|
29
|
+
gem 'polymer-rails'
|
|
30
|
+
gem 'polymer-paper-elements-rails'
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
After running `bundle install` require needed paper elements into your `application.html` manifest file.
|
|
34
|
+
|
|
35
|
+
//= require polymer/polymer
|
|
36
|
+
//= require paper-button/paper-button
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
Each component should be required only once. Thus if you've already required component that has dependencies, you don't need
|
|
40
|
+
to explicitly require any of dependencies, otherwise it will raise exception.
|
|
41
|
+
|
|
42
|
+
## Available elements
|
|
43
|
+
* [all paper-elements in version 1.0.1](https://elements.polymer-project.org/browse?package=paper-elements)
|
|
44
|
+
|
|
45
|
+
## Contributing
|
|
46
|
+
|
|
47
|
+
1. Fork it
|
|
48
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
|
49
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
|
50
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
|
51
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
require "bundler/gem_tasks"
|
|
@@ -0,0 +1,125 @@
|
|
|
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
|
+
|
|
13
|
+
<!--
|
|
14
|
+
`iron-a11y-announcer` is a singleton element that is intended to add a11y
|
|
15
|
+
to features that require on-demand announcement from screen readers. In
|
|
16
|
+
order to make use of the announcer, it is best to request its availability
|
|
17
|
+
in the announcing element.
|
|
18
|
+
|
|
19
|
+
Example:
|
|
20
|
+
|
|
21
|
+
Polymer({
|
|
22
|
+
|
|
23
|
+
is: 'x-chatty',
|
|
24
|
+
|
|
25
|
+
attached: function() {
|
|
26
|
+
// This will create the singlton element if it has not
|
|
27
|
+
// been created yet:
|
|
28
|
+
Polymer.IronA11yAnnouncer.requestAvailability();
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
After the `iron-a11y-announcer` has been made available, elements can
|
|
33
|
+
make announces by firing bubbling `iron-announce` events.
|
|
34
|
+
|
|
35
|
+
Example:
|
|
36
|
+
|
|
37
|
+
this.fire('iron-announce', {
|
|
38
|
+
text: 'This is an announcement!'
|
|
39
|
+
}, { bubbles: true });
|
|
40
|
+
|
|
41
|
+
Note: announcements are only audible if you have a screen reader enabled.
|
|
42
|
+
|
|
43
|
+
@group Iron Elements
|
|
44
|
+
@demo demo/index.html
|
|
45
|
+
-->
|
|
46
|
+
|
|
47
|
+
<dom-module id="iron-a11y-announcer">
|
|
48
|
+
<style>
|
|
49
|
+
:host {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
position: fixed;
|
|
52
|
+
clip: rect(0px,0px,0px,0px);
|
|
53
|
+
}
|
|
54
|
+
</style>
|
|
55
|
+
|
|
56
|
+
<template>
|
|
57
|
+
<span aria-live$="[[mode]]">[[_text]]</span>
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<script>
|
|
61
|
+
|
|
62
|
+
(function() {
|
|
63
|
+
'use strict';
|
|
64
|
+
|
|
65
|
+
Polymer.IronA11yAnnouncer = Polymer({
|
|
66
|
+
is: 'iron-a11y-announcer',
|
|
67
|
+
|
|
68
|
+
properties: {
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* The value of mode is used to set the `aria-live` attribute
|
|
72
|
+
* for the element that will be announced. Valid values are: `off`,
|
|
73
|
+
* `polite` and `assertive`.
|
|
74
|
+
*/
|
|
75
|
+
mode: {
|
|
76
|
+
type: String,
|
|
77
|
+
value: 'polite'
|
|
78
|
+
},
|
|
79
|
+
|
|
80
|
+
_text: {
|
|
81
|
+
type: String,
|
|
82
|
+
value: ''
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
|
|
86
|
+
created: function() {
|
|
87
|
+
if (!Polymer.IronA11yAnnouncer.instance) {
|
|
88
|
+
Polymer.IronA11yAnnouncer.instance = this;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Cause a text string to be announced by screen readers.
|
|
96
|
+
*
|
|
97
|
+
* @param {string} text The text that should be announced.
|
|
98
|
+
*/
|
|
99
|
+
announce: function(text) {
|
|
100
|
+
this._text = '';
|
|
101
|
+
this.async(function() {
|
|
102
|
+
this._text = text;
|
|
103
|
+
}, 100);
|
|
104
|
+
},
|
|
105
|
+
|
|
106
|
+
_onIronAnnounce: function(event) {
|
|
107
|
+
if (event.detail && event.detail.text) {
|
|
108
|
+
this.announce(event.detail.text);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
Polymer.IronA11yAnnouncer.instance = null;
|
|
114
|
+
|
|
115
|
+
Polymer.IronA11yAnnouncer.requestAvailability = function() {
|
|
116
|
+
if (!Polymer.IronA11yAnnouncer.instance) {
|
|
117
|
+
document.createElement('iron-a11y-announcer');
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
|
|
121
|
+
};
|
|
122
|
+
})();
|
|
123
|
+
|
|
124
|
+
</script>
|
|
125
|
+
</dom-module>
|
|
@@ -0,0 +1,418 @@
|
|
|
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
|
+
|
|
13
|
+
<script>
|
|
14
|
+
(function() {
|
|
15
|
+
'use strict';
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Chrome uses an older version of DOM Level 3 Keyboard Events
|
|
19
|
+
*
|
|
20
|
+
* Most keys are labeled as text, but some are Unicode codepoints.
|
|
21
|
+
* Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
|
|
22
|
+
*/
|
|
23
|
+
var KEY_IDENTIFIER = {
|
|
24
|
+
'U+0009': 'tab',
|
|
25
|
+
'U+001B': 'esc',
|
|
26
|
+
'U+0020': 'space',
|
|
27
|
+
'U+002A': '*',
|
|
28
|
+
'U+0030': '0',
|
|
29
|
+
'U+0031': '1',
|
|
30
|
+
'U+0032': '2',
|
|
31
|
+
'U+0033': '3',
|
|
32
|
+
'U+0034': '4',
|
|
33
|
+
'U+0035': '5',
|
|
34
|
+
'U+0036': '6',
|
|
35
|
+
'U+0037': '7',
|
|
36
|
+
'U+0038': '8',
|
|
37
|
+
'U+0039': '9',
|
|
38
|
+
'U+0041': 'a',
|
|
39
|
+
'U+0042': 'b',
|
|
40
|
+
'U+0043': 'c',
|
|
41
|
+
'U+0044': 'd',
|
|
42
|
+
'U+0045': 'e',
|
|
43
|
+
'U+0046': 'f',
|
|
44
|
+
'U+0047': 'g',
|
|
45
|
+
'U+0048': 'h',
|
|
46
|
+
'U+0049': 'i',
|
|
47
|
+
'U+004A': 'j',
|
|
48
|
+
'U+004B': 'k',
|
|
49
|
+
'U+004C': 'l',
|
|
50
|
+
'U+004D': 'm',
|
|
51
|
+
'U+004E': 'n',
|
|
52
|
+
'U+004F': 'o',
|
|
53
|
+
'U+0050': 'p',
|
|
54
|
+
'U+0051': 'q',
|
|
55
|
+
'U+0052': 'r',
|
|
56
|
+
'U+0053': 's',
|
|
57
|
+
'U+0054': 't',
|
|
58
|
+
'U+0055': 'u',
|
|
59
|
+
'U+0056': 'v',
|
|
60
|
+
'U+0057': 'w',
|
|
61
|
+
'U+0058': 'x',
|
|
62
|
+
'U+0059': 'y',
|
|
63
|
+
'U+005A': 'z',
|
|
64
|
+
'U+007F': 'del'
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Special table for KeyboardEvent.keyCode.
|
|
69
|
+
* KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even better
|
|
70
|
+
* than that.
|
|
71
|
+
*
|
|
72
|
+
* Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
|
|
73
|
+
*/
|
|
74
|
+
var KEY_CODE = {
|
|
75
|
+
9: 'tab',
|
|
76
|
+
13: 'enter',
|
|
77
|
+
27: 'esc',
|
|
78
|
+
33: 'pageup',
|
|
79
|
+
34: 'pagedown',
|
|
80
|
+
35: 'end',
|
|
81
|
+
36: 'home',
|
|
82
|
+
32: 'space',
|
|
83
|
+
37: 'left',
|
|
84
|
+
38: 'up',
|
|
85
|
+
39: 'right',
|
|
86
|
+
40: 'down',
|
|
87
|
+
46: 'del',
|
|
88
|
+
106: '*'
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* MODIFIER_KEYS maps the short name for modifier keys used in a key
|
|
93
|
+
* combo string to the property name that references those same keys
|
|
94
|
+
* in a KeyboardEvent instance.
|
|
95
|
+
*/
|
|
96
|
+
var MODIFIER_KEYS = {
|
|
97
|
+
shift: 'shiftKey',
|
|
98
|
+
ctrl: 'ctrlKey',
|
|
99
|
+
alt: 'altKey',
|
|
100
|
+
meta: 'metaKey'
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* KeyboardEvent.key is mostly represented by printable character made by
|
|
105
|
+
* the keyboard, with unprintable keys labeled nicely.
|
|
106
|
+
*
|
|
107
|
+
* However, on OS X, Alt+char can make a Unicode character that follows an
|
|
108
|
+
* Apple-specific mapping. In this case, we
|
|
109
|
+
* fall back to .keyCode.
|
|
110
|
+
*/
|
|
111
|
+
var KEY_CHAR = /[a-z0-9*]/;
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Matches a keyIdentifier string.
|
|
115
|
+
*/
|
|
116
|
+
var IDENT_CHAR = /U\+/;
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Matches arrow keys in Gecko 27.0+
|
|
120
|
+
*/
|
|
121
|
+
var ARROW_KEY = /^arrow/;
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Matches space keys everywhere (notably including IE10's exceptional name
|
|
125
|
+
* `spacebar`).
|
|
126
|
+
*/
|
|
127
|
+
var SPACE_KEY = /^space(bar)?/;
|
|
128
|
+
|
|
129
|
+
function transformKey(key) {
|
|
130
|
+
var validKey = '';
|
|
131
|
+
if (key) {
|
|
132
|
+
var lKey = key.toLowerCase();
|
|
133
|
+
if (lKey.length == 1) {
|
|
134
|
+
if (KEY_CHAR.test(lKey)) {
|
|
135
|
+
validKey = lKey;
|
|
136
|
+
}
|
|
137
|
+
} else if (ARROW_KEY.test(lKey)) {
|
|
138
|
+
validKey = lKey.replace('arrow', '');
|
|
139
|
+
} else if (SPACE_KEY.test(lKey)) {
|
|
140
|
+
validKey = 'space';
|
|
141
|
+
} else if (lKey == 'multiply') {
|
|
142
|
+
// numpad '*' can map to Multiply on IE/Windows
|
|
143
|
+
validKey = '*';
|
|
144
|
+
} else {
|
|
145
|
+
validKey = lKey;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
return validKey;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
function transformKeyIdentifier(keyIdent) {
|
|
152
|
+
var validKey = '';
|
|
153
|
+
if (keyIdent) {
|
|
154
|
+
if (IDENT_CHAR.test(keyIdent)) {
|
|
155
|
+
validKey = KEY_IDENTIFIER[keyIdent];
|
|
156
|
+
} else {
|
|
157
|
+
validKey = keyIdent.toLowerCase();
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
return validKey;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
function transformKeyCode(keyCode) {
|
|
164
|
+
var validKey = '';
|
|
165
|
+
if (Number(keyCode)) {
|
|
166
|
+
if (keyCode >= 65 && keyCode <= 90) {
|
|
167
|
+
// ascii a-z
|
|
168
|
+
// lowercase is 32 offset from uppercase
|
|
169
|
+
validKey = String.fromCharCode(32 + keyCode);
|
|
170
|
+
} else if (keyCode >= 112 && keyCode <= 123) {
|
|
171
|
+
// function keys f1-f12
|
|
172
|
+
validKey = 'f' + (keyCode - 112);
|
|
173
|
+
} else if (keyCode >= 48 && keyCode <= 57) {
|
|
174
|
+
// top 0-9 keys
|
|
175
|
+
validKey = String(48 - keyCode);
|
|
176
|
+
} else if (keyCode >= 96 && keyCode <= 105) {
|
|
177
|
+
// num pad 0-9
|
|
178
|
+
validKey = String(96 - keyCode);
|
|
179
|
+
} else {
|
|
180
|
+
validKey = KEY_CODE[keyCode];
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
return validKey;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
function normalizedKeyForEvent(keyEvent) {
|
|
187
|
+
// fall back from .key, to .keyIdentifier, to .keyCode, and then to
|
|
188
|
+
// .detail.key to support artificial keyboard events
|
|
189
|
+
return transformKey(keyEvent.key) ||
|
|
190
|
+
transformKeyIdentifier(keyEvent.keyIdentifier) ||
|
|
191
|
+
transformKeyCode(keyEvent.keyCode) ||
|
|
192
|
+
transformKey(keyEvent.detail.key) || '';
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
function keyComboMatchesEvent(keyCombo, keyEvent) {
|
|
196
|
+
return normalizedKeyForEvent(keyEvent) === keyCombo.key &&
|
|
197
|
+
!!keyEvent.shiftKey === !!keyCombo.shiftKey &&
|
|
198
|
+
!!keyEvent.ctrlKey === !!keyCombo.ctrlKey &&
|
|
199
|
+
!!keyEvent.altKey === !!keyCombo.altKey &&
|
|
200
|
+
!!keyEvent.metaKey === !!keyCombo.metaKey;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
function parseKeyComboString(keyComboString) {
|
|
204
|
+
return keyComboString.split('+').reduce(function(parsedKeyCombo, keyComboPart) {
|
|
205
|
+
var eventParts = keyComboPart.split(':');
|
|
206
|
+
var keyName = eventParts[0];
|
|
207
|
+
var event = eventParts[1];
|
|
208
|
+
|
|
209
|
+
if (keyName in MODIFIER_KEYS) {
|
|
210
|
+
parsedKeyCombo[MODIFIER_KEYS[keyName]] = true;
|
|
211
|
+
} else {
|
|
212
|
+
parsedKeyCombo.key = keyName;
|
|
213
|
+
parsedKeyCombo.event = event || 'keydown';
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
return parsedKeyCombo;
|
|
217
|
+
}, {
|
|
218
|
+
combo: keyComboString.split(':').shift()
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
function parseEventString(eventString) {
|
|
223
|
+
return eventString.split(' ').map(function(keyComboString) {
|
|
224
|
+
return parseKeyComboString(keyComboString);
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
/**
|
|
230
|
+
* `Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
|
|
231
|
+
* keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
|
|
232
|
+
* The element takes care of browser differences with respect to Keyboard events
|
|
233
|
+
* and uses an expressive syntax to filter key presses.
|
|
234
|
+
*
|
|
235
|
+
* Use the `keyBindings` prototype property to express what combination of keys
|
|
236
|
+
* will trigger the event to fire.
|
|
237
|
+
*
|
|
238
|
+
* Use the `key-event-target` attribute to set up event handlers on a specific
|
|
239
|
+
* node.
|
|
240
|
+
* The `keys-pressed` event will fire when one of the key combinations set with the
|
|
241
|
+
* `keys` property is pressed.
|
|
242
|
+
*
|
|
243
|
+
* @polymerBehavior IronA11yKeysBehavior
|
|
244
|
+
*/
|
|
245
|
+
Polymer.IronA11yKeysBehavior = {
|
|
246
|
+
properties: {
|
|
247
|
+
/**
|
|
248
|
+
* The HTMLElement that will be firing relevant KeyboardEvents.
|
|
249
|
+
*/
|
|
250
|
+
keyEventTarget: {
|
|
251
|
+
type: Object,
|
|
252
|
+
value: function() {
|
|
253
|
+
return this;
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
|
|
257
|
+
_boundKeyHandlers: {
|
|
258
|
+
value: function() {
|
|
259
|
+
return [];
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
|
|
263
|
+
// We use this due to a limitation in IE10 where instances will have
|
|
264
|
+
// own properties of everything on the "prototype".
|
|
265
|
+
_imperativeKeyBindings: {
|
|
266
|
+
value: function() {
|
|
267
|
+
return {};
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
|
|
272
|
+
observers: [
|
|
273
|
+
'_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)'
|
|
274
|
+
],
|
|
275
|
+
|
|
276
|
+
keyBindings: {},
|
|
277
|
+
|
|
278
|
+
registered: function() {
|
|
279
|
+
this._prepKeyBindings();
|
|
280
|
+
},
|
|
281
|
+
|
|
282
|
+
attached: function() {
|
|
283
|
+
this._listenKeyEventListeners();
|
|
284
|
+
},
|
|
285
|
+
|
|
286
|
+
detached: function() {
|
|
287
|
+
this._unlistenKeyEventListeners();
|
|
288
|
+
},
|
|
289
|
+
|
|
290
|
+
/**
|
|
291
|
+
* Can be used to imperatively add a key binding to the implementing
|
|
292
|
+
* element. This is the imperative equivalent of declaring a keybinding
|
|
293
|
+
* in the `keyBindings` prototype property.
|
|
294
|
+
*/
|
|
295
|
+
addOwnKeyBinding: function(eventString, handlerName) {
|
|
296
|
+
this._imperativeKeyBindings[eventString] = handlerName;
|
|
297
|
+
this._prepKeyBindings();
|
|
298
|
+
this._resetKeyEventListeners();
|
|
299
|
+
},
|
|
300
|
+
|
|
301
|
+
/**
|
|
302
|
+
* When called, will remove all imperatively-added key bindings.
|
|
303
|
+
*/
|
|
304
|
+
removeOwnKeyBindings: function() {
|
|
305
|
+
this._imperativeKeyBindings = {};
|
|
306
|
+
this._prepKeyBindings();
|
|
307
|
+
this._resetKeyEventListeners();
|
|
308
|
+
},
|
|
309
|
+
|
|
310
|
+
keyboardEventMatchesKeys: function(event, eventString) {
|
|
311
|
+
var keyCombos = parseEventString(eventString);
|
|
312
|
+
var index;
|
|
313
|
+
|
|
314
|
+
for (index = 0; index < keyCombos.length; ++index) {
|
|
315
|
+
if (keyComboMatchesEvent(keyCombos[index], event)) {
|
|
316
|
+
return true;
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
return false;
|
|
321
|
+
},
|
|
322
|
+
|
|
323
|
+
_collectKeyBindings: function() {
|
|
324
|
+
var keyBindings = this.behaviors.map(function(behavior) {
|
|
325
|
+
return behavior.keyBindings;
|
|
326
|
+
});
|
|
327
|
+
|
|
328
|
+
if (keyBindings.indexOf(this.keyBindings) === -1) {
|
|
329
|
+
keyBindings.push(this.keyBindings);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
return keyBindings;
|
|
333
|
+
},
|
|
334
|
+
|
|
335
|
+
_prepKeyBindings: function() {
|
|
336
|
+
this._keyBindings = {};
|
|
337
|
+
|
|
338
|
+
this._collectKeyBindings().forEach(function(keyBindings) {
|
|
339
|
+
for (var eventString in keyBindings) {
|
|
340
|
+
this._addKeyBinding(eventString, keyBindings[eventString]);
|
|
341
|
+
}
|
|
342
|
+
}, this);
|
|
343
|
+
|
|
344
|
+
for (var eventString in this._imperativeKeyBindings) {
|
|
345
|
+
this._addKeyBinding(eventString, this._imperativeKeyBindings[eventString]);
|
|
346
|
+
}
|
|
347
|
+
},
|
|
348
|
+
|
|
349
|
+
_addKeyBinding: function(eventString, handlerName) {
|
|
350
|
+
parseEventString(eventString).forEach(function(keyCombo) {
|
|
351
|
+
this._keyBindings[keyCombo.event] =
|
|
352
|
+
this._keyBindings[keyCombo.event] || [];
|
|
353
|
+
|
|
354
|
+
this._keyBindings[keyCombo.event].push([
|
|
355
|
+
keyCombo,
|
|
356
|
+
handlerName
|
|
357
|
+
]);
|
|
358
|
+
}, this);
|
|
359
|
+
},
|
|
360
|
+
|
|
361
|
+
_resetKeyEventListeners: function() {
|
|
362
|
+
this._unlistenKeyEventListeners();
|
|
363
|
+
|
|
364
|
+
if (this.isAttached) {
|
|
365
|
+
this._listenKeyEventListeners();
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
|
|
369
|
+
_listenKeyEventListeners: function() {
|
|
370
|
+
Object.keys(this._keyBindings).forEach(function(eventName) {
|
|
371
|
+
var keyBindings = this._keyBindings[eventName];
|
|
372
|
+
var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings);
|
|
373
|
+
|
|
374
|
+
this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyHandler]);
|
|
375
|
+
|
|
376
|
+
this.keyEventTarget.addEventListener(eventName, boundKeyHandler);
|
|
377
|
+
}, this);
|
|
378
|
+
},
|
|
379
|
+
|
|
380
|
+
_unlistenKeyEventListeners: function() {
|
|
381
|
+
var keyHandlerTuple;
|
|
382
|
+
var keyEventTarget;
|
|
383
|
+
var eventName;
|
|
384
|
+
var boundKeyHandler;
|
|
385
|
+
|
|
386
|
+
while (this._boundKeyHandlers.length) {
|
|
387
|
+
// My kingdom for block-scope binding and destructuring assignment..
|
|
388
|
+
keyHandlerTuple = this._boundKeyHandlers.pop();
|
|
389
|
+
keyEventTarget = keyHandlerTuple[0];
|
|
390
|
+
eventName = keyHandlerTuple[1];
|
|
391
|
+
boundKeyHandler = keyHandlerTuple[2];
|
|
392
|
+
|
|
393
|
+
keyEventTarget.removeEventListener(eventName, boundKeyHandler);
|
|
394
|
+
}
|
|
395
|
+
},
|
|
396
|
+
|
|
397
|
+
_onKeyBindingEvent: function(keyBindings, event) {
|
|
398
|
+
keyBindings.forEach(function(keyBinding) {
|
|
399
|
+
var keyCombo = keyBinding[0];
|
|
400
|
+
var handlerName = keyBinding[1];
|
|
401
|
+
|
|
402
|
+
if (!event.defaultPrevented && keyComboMatchesEvent(keyCombo, event)) {
|
|
403
|
+
this._triggerKeyHandler(keyCombo, handlerName, event);
|
|
404
|
+
}
|
|
405
|
+
}, this);
|
|
406
|
+
},
|
|
407
|
+
|
|
408
|
+
_triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) {
|
|
409
|
+
var detail = Object.create(keyCombo);
|
|
410
|
+
detail.keyboardEvent = keyboardEvent;
|
|
411
|
+
|
|
412
|
+
this[handlerName].call(this, new CustomEvent(keyCombo.event, {
|
|
413
|
+
detail: detail
|
|
414
|
+
}));
|
|
415
|
+
}
|
|
416
|
+
};
|
|
417
|
+
})();
|
|
418
|
+
</script>
|