polymer-core-rails 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +82 -0
- data/Rakefile +2 -0
- data/app/assets/components/core-ajax/core-ajax.html.erb +320 -0
- data/app/assets/components/core-ajax/core-xhr.html.erb +112 -0
- data/app/assets/components/core-animated-pages/core-animated-pages.css +18 -0
- data/app/assets/components/core-animated-pages/core-animated-pages.html.erb +413 -0
- data/app/assets/components/core-animated-pages/transitions/cascade-transition.html +138 -0
- data/app/assets/components/core-animated-pages/transitions/core-transition-pages.html.erb +173 -0
- data/app/assets/components/core-animated-pages/transitions/cross-fade.html.erb +173 -0
- data/app/assets/components/core-animated-pages/transitions/hero-transition.css +12 -0
- data/app/assets/components/core-animated-pages/transitions/hero-transition.html.erb +267 -0
- data/app/assets/components/core-animated-pages/transitions/list-cascade.html +58 -0
- data/app/assets/components/core-animated-pages/transitions/scale-up.html +37 -0
- data/app/assets/components/core-animated-pages/transitions/slide-down.html +55 -0
- data/app/assets/components/core-animated-pages/transitions/slide-from-bottom.html +31 -0
- data/app/assets/components/core-animated-pages/transitions/slide-from-right.html +35 -0
- data/app/assets/components/core-animated-pages/transitions/slide-up.html +82 -0
- data/app/assets/components/core-animated-pages/transitions/tile-cascade.html +101 -0
- data/app/assets/components/core-animation/core-animation-group.html.erb +168 -0
- data/app/assets/components/core-animation/core-animation.html.erb +523 -0
- data/app/assets/components/core-animation/web-animations.html.erb +1 -0
- data/app/assets/components/core-collapse/core-collapse.css +16 -0
- data/app/assets/components/core-collapse/core-collapse.html.erb +247 -0
- data/app/assets/components/core-drag-drop/core-drag-drop.html +109 -0
- data/app/assets/components/core-drawer-panel/core-drawer-panel.css +162 -0
- data/app/assets/components/core-drawer-panel/core-drawer-panel.html.erb +150 -0
- data/app/assets/components/core-field/core-field.css +38 -0
- data/app/assets/components/core-field/core-field.html.erb +32 -0
- data/app/assets/components/core-header-panel/core-header-panel.css +75 -0
- data/app/assets/components/core-header-panel/core-header-panel.html.erb +196 -0
- data/app/assets/components/core-icon/core-icon.css +25 -0
- data/app/assets/components/core-icon/core-icon.html.erb +126 -0
- data/app/assets/components/core-icon-button/core-icon-button.css +70 -0
- data/app/assets/components/core-icon-button/core-icon-button.html.erb +83 -0
- data/app/assets/components/core-icons/core-icons.html +14 -0
- data/app/assets/components/core-iconset/core-iconset.html.erb +236 -0
- data/app/assets/components/core-iconset-svg/core-iconset-svg.html +170 -0
- data/app/assets/components/core-input/core-input.css +35 -0
- data/app/assets/components/core-input/core-input.html.erb +311 -0
- data/app/assets/components/core-item/core-item.css +31 -0
- data/app/assets/components/core-item/core-item.html.erb +80 -0
- data/app/assets/components/core-list/core-list.css +20 -0
- data/app/assets/components/core-list/core-list.html.erb +403 -0
- data/app/assets/components/core-localstorage/core-localstorage.html +126 -0
- data/app/assets/components/core-media-query/core-media-query.html +86 -0
- data/app/assets/components/core-menu/core-menu.css +18 -0
- data/app/assets/components/core-menu/core-menu.html.erb +62 -0
- data/app/assets/components/core-menu/core-submenu.css +29 -0
- data/app/assets/components/core-menu/core-submenu.html.erb +106 -0
- data/app/assets/components/core-menu-button/core-menu-button.css +10 -0
- data/app/assets/components/core-menu-button/core-menu-button.html.erb +139 -0
- data/app/assets/components/core-meta/core-meta.html +143 -0
- data/app/assets/components/core-overlay/core-key-helper.html +17 -0
- data/app/assets/components/core-overlay/core-overlay-layer.html +112 -0
- data/app/assets/components/core-overlay/core-overlay.html.erb +661 -0
- data/app/assets/components/core-pages/core-pages.css +30 -0
- data/app/assets/components/core-pages/core-pages.html.erb +43 -0
- data/app/assets/components/core-range/core-range.html +107 -0
- data/app/assets/components/core-scaffold/core-scaffold.html.erb +147 -0
- data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.css +57 -0
- data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.html.erb +257 -0
- data/app/assets/components/core-selection/core-selection.html +148 -0
- data/app/assets/components/core-selector/core-selector.html.erb +423 -0
- data/app/assets/components/core-shared-lib/core-shared-lib.html +150 -0
- data/app/assets/components/core-signals/core-signals.html +83 -0
- data/app/assets/components/core-splitter/core-splitter.css.erb +27 -0
- data/app/assets/components/core-splitter/core-splitter.html.erb +159 -0
- data/app/assets/components/core-splitter/handle-h.svg +4 -0
- data/app/assets/components/core-splitter/handle.svg +4 -0
- data/app/assets/components/core-style/core-style.html +385 -0
- data/app/assets/components/core-toolbar/core-toolbar.css +126 -0
- data/app/assets/components/core-toolbar/core-toolbar.html.erb +73 -0
- data/app/assets/components/core-tooltip/core-tooltip.css +103 -0
- data/app/assets/components/core-tooltip/core-tooltip.html.erb +144 -0
- data/app/assets/components/core-transition/core-transition-css.html.erb +76 -0
- data/app/assets/components/core-transition/core-transition-overlay.css +46 -0
- data/app/assets/components/core-transition/core-transition.html.erb +44 -0
- data/app/assets/components/web-animations-js/web-animations.js +5666 -0
- data/lib/polymer-core-rails/engine.rb +4 -0
- data/lib/polymer-core-rails/version.rb +3 -0
- data/lib/polymer-core-rails.rb +2 -0
- metadata +167 -0
@@ -0,0 +1,29 @@
|
|
1
|
+
/*
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
8
|
+
*/
|
9
|
+
|
10
|
+
:host {
|
11
|
+
display: block;
|
12
|
+
height: auto;
|
13
|
+
}
|
14
|
+
|
15
|
+
:host(.core-selected, [active]) {
|
16
|
+
font-weight: initial;
|
17
|
+
}
|
18
|
+
|
19
|
+
core-item {
|
20
|
+
cursor: default;
|
21
|
+
}
|
22
|
+
|
23
|
+
::content > core-item {
|
24
|
+
cursor: default;
|
25
|
+
}
|
26
|
+
|
27
|
+
#submenu {
|
28
|
+
margin: 0 0 0 44px;
|
29
|
+
}
|
@@ -0,0 +1,106 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
8
|
+
-->
|
9
|
+
|
10
|
+
<!--
|
11
|
+
Use to create nested menus inside of `core-menu` elements.
|
12
|
+
|
13
|
+
<core-menu selected="0">
|
14
|
+
|
15
|
+
<core-submenu icon="settings" label="Topics">
|
16
|
+
<core-item label="Topic 1"></core-item>
|
17
|
+
<core-item label="Topic 2"></core-item>
|
18
|
+
</core-submenu>
|
19
|
+
|
20
|
+
<core-submenu icon="settings" label="Favorites">
|
21
|
+
<core-item label="Favorite 1"></core-item>
|
22
|
+
<core-item label="Favorite 2"></core-item>
|
23
|
+
<core-item label="Favorite 3"></core-item>
|
24
|
+
</core-submenu>
|
25
|
+
|
26
|
+
</core-menu>
|
27
|
+
|
28
|
+
There is a margin set on the submenu to indent the items.
|
29
|
+
You can override the margin by doing:
|
30
|
+
|
31
|
+
core-submenu::shadow #submenu {
|
32
|
+
margin-left: 20px;
|
33
|
+
}
|
34
|
+
|
35
|
+
@group Polymer Core Elements
|
36
|
+
@element core-submenu
|
37
|
+
@extends core-item
|
38
|
+
-->
|
39
|
+
|
40
|
+
<%= html_import_tag "core-item/core-item" %>
|
41
|
+
<%= html_import_tag "core-menu/core-menu" %>
|
42
|
+
<%= html_import_tag "core-collapse/core-collapse" %>
|
43
|
+
|
44
|
+
<polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr">
|
45
|
+
<template>
|
46
|
+
|
47
|
+
<%= stylesheet_link_tag "core-menu/core-submenu"%>
|
48
|
+
|
49
|
+
<core-item src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}">
|
50
|
+
<content select=".item-content"></content>
|
51
|
+
</core-item>
|
52
|
+
|
53
|
+
<core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" valueattr="{{valueattr}}">
|
54
|
+
<content></content>
|
55
|
+
</core-menu>
|
56
|
+
|
57
|
+
<core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse>
|
58
|
+
|
59
|
+
</template>
|
60
|
+
<script>
|
61
|
+
|
62
|
+
Polymer('core-submenu', {
|
63
|
+
|
64
|
+
publish: {
|
65
|
+
active: {value: false, reflect: true}
|
66
|
+
},
|
67
|
+
|
68
|
+
opened: false,
|
69
|
+
|
70
|
+
get items() {
|
71
|
+
return this.$.submenu.items;
|
72
|
+
},
|
73
|
+
|
74
|
+
hasItems: function() {
|
75
|
+
return !!this.items.length;
|
76
|
+
},
|
77
|
+
|
78
|
+
unselectAllItems: function() {
|
79
|
+
this.$.submenu.selected = null;
|
80
|
+
this.$.submenu.clearSelection();
|
81
|
+
},
|
82
|
+
|
83
|
+
activeChanged: function() {
|
84
|
+
if (this.hasItems()) {
|
85
|
+
this.opened = this.active;
|
86
|
+
}
|
87
|
+
if (!this.active) {
|
88
|
+
this.unselectAllItems();
|
89
|
+
}
|
90
|
+
},
|
91
|
+
|
92
|
+
toggle: function() {
|
93
|
+
this.opened = !this.opened;
|
94
|
+
},
|
95
|
+
|
96
|
+
activate: function() {
|
97
|
+
if (this.hasItems() && this.active) {
|
98
|
+
this.toggle();
|
99
|
+
this.unselectAllItems();
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
});
|
104
|
+
|
105
|
+
</script>
|
106
|
+
</polymer-element>
|
@@ -0,0 +1,139 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
<!--
|
10
|
+
/**
|
11
|
+
* @module Polymer Core Elements
|
12
|
+
*/
|
13
|
+
/**
|
14
|
+
* core-menu-button is a core-icon-button with a drop down menu
|
15
|
+
* that allows the user to select an option. The drop down menu is styled with
|
16
|
+
* an arrow pointing to the button, and can be positioned to the top or the
|
17
|
+
* bottom of the button with the valign property. The valign property aligns
|
18
|
+
* the menu to the left or right edge of the button.
|
19
|
+
*
|
20
|
+
* Example:
|
21
|
+
*
|
22
|
+
* <core-menu-button selected="0">
|
23
|
+
* <core-item icon="settings" label="Settings"></core-item>
|
24
|
+
* <core-item icon="dialog" label="Dialog"></core-item>
|
25
|
+
* <core-item icon="search" label="Search"></core-item>
|
26
|
+
* </core-menu-button>
|
27
|
+
*
|
28
|
+
* @class core-menu-button
|
29
|
+
*/
|
30
|
+
-->
|
31
|
+
|
32
|
+
<%= html_import_tag "core-icon-button/core-icon-button" %>
|
33
|
+
<%= html_import_tag "core-menu/core-menu" %>
|
34
|
+
<%= html_import_tag "core-overlay/core-overlay" %>
|
35
|
+
|
36
|
+
<polymer-element name="core-menu-button" attributes="icon label src selected opened halign valign valueattr multi inlineMenu">
|
37
|
+
<template>
|
38
|
+
|
39
|
+
<%= stylesheet_link_tag "core-menu-button/core-menu-button"%>
|
40
|
+
|
41
|
+
<core-overlay target="{{$.overlay}}" opened="{{opened}}" layered?="{{!inlineMenu}}"></core-overlay>
|
42
|
+
<core-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon}}" active="{{opened}}"><span>{{label}}</span></core-icon-button>
|
43
|
+
<div id="overlay" halign="{{halign}}" valign="{{valign}}">
|
44
|
+
<style>
|
45
|
+
#overlay {
|
46
|
+
position: absolute;
|
47
|
+
left: 0px;
|
48
|
+
top: 40px;
|
49
|
+
padding: 8px;
|
50
|
+
background: #fff;
|
51
|
+
border: 1px solid #ccc;
|
52
|
+
border-radius: 3px;
|
53
|
+
/* overlay styling must be complete */
|
54
|
+
font-size: 1rem;
|
55
|
+
}
|
56
|
+
|
57
|
+
core-menu {
|
58
|
+
margin: 0;
|
59
|
+
}
|
60
|
+
|
61
|
+
#overlay[halign=right] {
|
62
|
+
left: auto;
|
63
|
+
right: 0px;
|
64
|
+
}
|
65
|
+
|
66
|
+
#overlay[valign=top] {
|
67
|
+
top: auto;
|
68
|
+
bottom: 40px;
|
69
|
+
}
|
70
|
+
</style>
|
71
|
+
<core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" multi="{{multi}}" on-core-select="{{closeAction}}">
|
72
|
+
<content select="*"></content>
|
73
|
+
</core-menu>
|
74
|
+
</div>
|
75
|
+
</template>
|
76
|
+
<script>
|
77
|
+
Polymer('core-menu-button', {
|
78
|
+
/**
|
79
|
+
* The icon to display.
|
80
|
+
* @attribute icon
|
81
|
+
* @type string
|
82
|
+
*/
|
83
|
+
icon: 'dots',
|
84
|
+
src: '',
|
85
|
+
/**
|
86
|
+
* The index of the selected menu item.
|
87
|
+
* @attribute selected
|
88
|
+
* @type number
|
89
|
+
*/
|
90
|
+
selected: '',
|
91
|
+
/**
|
92
|
+
* Set to true to open the menu.
|
93
|
+
* @attribute opened
|
94
|
+
* @type boolean
|
95
|
+
*/
|
96
|
+
opened: false,
|
97
|
+
/**
|
98
|
+
* Set to true to cause the menu popup to be displayed inline rather
|
99
|
+
* than in its own layer.
|
100
|
+
* @attribute inlineMenu
|
101
|
+
* @type boolean
|
102
|
+
*/
|
103
|
+
inlineMenu: false,
|
104
|
+
/**
|
105
|
+
* Horizontally align the overlay with the button. Accepted values are
|
106
|
+
* ["left", "center", "right"].
|
107
|
+
* @attribute halign
|
108
|
+
* @type string
|
109
|
+
*/
|
110
|
+
halign: 'center',
|
111
|
+
/**
|
112
|
+
* Display the overlay on top or below the button. Accepted values are
|
113
|
+
* ["top", "bottom"].
|
114
|
+
* @attribute valign
|
115
|
+
* @type string
|
116
|
+
*/
|
117
|
+
valign: 'bottom',
|
118
|
+
multi: false,
|
119
|
+
closeAction: function() {
|
120
|
+
this.opened = false;
|
121
|
+
},
|
122
|
+
/**
|
123
|
+
* Toggle the opened state of the dropdown.
|
124
|
+
* @method toggle
|
125
|
+
*/
|
126
|
+
toggle: function() {
|
127
|
+
this.opened = !this.opened;
|
128
|
+
},
|
129
|
+
/**
|
130
|
+
* The selected menu item.
|
131
|
+
* @property selection
|
132
|
+
* @type Node
|
133
|
+
*/
|
134
|
+
get selection() {
|
135
|
+
return this.$.menu.selection;
|
136
|
+
}
|
137
|
+
});
|
138
|
+
</script>
|
139
|
+
</polymer-element>
|
@@ -0,0 +1,143 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<!--
|
11
|
+
`core-meta` provides a method of constructing a self-organizing database.
|
12
|
+
It is useful to collate element meta-data for things like catalogs and for
|
13
|
+
designer.
|
14
|
+
|
15
|
+
Example, an element folder has a `metadata.html` file in it, that contains a
|
16
|
+
`core-meta`, something like this:
|
17
|
+
|
18
|
+
<core-meta id="my-element" label="My Element">
|
19
|
+
<property name="color" value="blue"></property>
|
20
|
+
</core-meta>
|
21
|
+
|
22
|
+
An application can import as many of these files as it wants, and then use
|
23
|
+
`core-meta` again to access the collected data.
|
24
|
+
|
25
|
+
<script>
|
26
|
+
var meta = document.createElement('core-meta');
|
27
|
+
console.log(meta.list); // dump a list of all meta-data elements that have been created
|
28
|
+
</script>
|
29
|
+
|
30
|
+
Use `byId(id)` to retrive a specific core-meta.
|
31
|
+
|
32
|
+
<script>
|
33
|
+
var meta = document.createElement('core-meta');
|
34
|
+
console.log(meta.byId('my-element'));
|
35
|
+
</script>
|
36
|
+
|
37
|
+
By default all meta-data are stored in a single databse. If your meta-data
|
38
|
+
have different types and want them to be stored separately, use `type` to
|
39
|
+
differentiate them.
|
40
|
+
|
41
|
+
Example:
|
42
|
+
|
43
|
+
<core-meta id="x-foo" type="xElt"></core-meta>
|
44
|
+
<core-meta id="x-bar" type="xElt"></core-meta>
|
45
|
+
<core-meta id="y-bar" type="yElt"></core-meta>
|
46
|
+
|
47
|
+
<script>
|
48
|
+
var meta = document.createElement('core-meta');
|
49
|
+
meta.type = 'xElt';
|
50
|
+
console.log(meta.list);
|
51
|
+
</script>
|
52
|
+
|
53
|
+
@group Polymer Core Elements
|
54
|
+
@element core-meta
|
55
|
+
@homepage github.io
|
56
|
+
-->
|
57
|
+
|
58
|
+
<polymer-element name="core-meta" attributes="list label type" hidden>
|
59
|
+
<script>
|
60
|
+
|
61
|
+
(function() {
|
62
|
+
|
63
|
+
var SKIP_ID = 'meta';
|
64
|
+
var metaData = {}, metaArray = {};
|
65
|
+
|
66
|
+
Polymer('core-meta', {
|
67
|
+
|
68
|
+
/**
|
69
|
+
* The type of meta-data. All meta-data with the same type with be
|
70
|
+
* stored together.
|
71
|
+
*
|
72
|
+
* @attribute type
|
73
|
+
* @type string
|
74
|
+
* @default 'default'
|
75
|
+
*/
|
76
|
+
type: 'default',
|
77
|
+
|
78
|
+
alwaysPrepare: true,
|
79
|
+
|
80
|
+
ready: function() {
|
81
|
+
this.register(this.id);
|
82
|
+
},
|
83
|
+
|
84
|
+
get metaArray() {
|
85
|
+
var t = this.type;
|
86
|
+
if (!metaArray[t]) {
|
87
|
+
metaArray[t] = [];
|
88
|
+
}
|
89
|
+
return metaArray[t];
|
90
|
+
},
|
91
|
+
|
92
|
+
get metaData() {
|
93
|
+
var t = this.type;
|
94
|
+
if (!metaData[t]) {
|
95
|
+
metaData[t] = {};
|
96
|
+
}
|
97
|
+
return metaData[t];
|
98
|
+
},
|
99
|
+
|
100
|
+
register: function(id, old) {
|
101
|
+
if (id && id !== SKIP_ID) {
|
102
|
+
this.unregister(this, old);
|
103
|
+
this.metaData[id] = this;
|
104
|
+
this.metaArray.push(this);
|
105
|
+
}
|
106
|
+
},
|
107
|
+
|
108
|
+
unregister: function(meta, id) {
|
109
|
+
delete this.metaData[id || meta.id];
|
110
|
+
var i = this.metaArray.indexOf(meta);
|
111
|
+
if (i >= 0) {
|
112
|
+
this.metaArray.splice(i, 1);
|
113
|
+
}
|
114
|
+
},
|
115
|
+
|
116
|
+
/**
|
117
|
+
* Returns a list of all meta-data elements with the same type.
|
118
|
+
*
|
119
|
+
* @attribute list
|
120
|
+
* @type array
|
121
|
+
* @default []
|
122
|
+
*/
|
123
|
+
get list() {
|
124
|
+
return this.metaArray;
|
125
|
+
},
|
126
|
+
|
127
|
+
/**
|
128
|
+
* Retrieves meta-data by ID.
|
129
|
+
*
|
130
|
+
* @method byId
|
131
|
+
* @param {String} id The ID of the meta-data to be returned.
|
132
|
+
* @returns Returns meta-data.
|
133
|
+
*/
|
134
|
+
byId: function(id) {
|
135
|
+
return this.metaData[id];
|
136
|
+
}
|
137
|
+
|
138
|
+
});
|
139
|
+
|
140
|
+
})();
|
141
|
+
|
142
|
+
</script>
|
143
|
+
</polymer-element>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<polymer-element name="core-key-helper">
|
11
|
+
<script>
|
12
|
+
Polymer('core-key-helper', {
|
13
|
+
ENTER_KEY: 13,
|
14
|
+
ESCAPE_KEY: 27
|
15
|
+
});
|
16
|
+
</script>
|
17
|
+
</polymer-element>
|
@@ -0,0 +1,112 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<polymer-element name="core-overlay-layer">
|
11
|
+
<template>
|
12
|
+
<style>
|
13
|
+
:host {
|
14
|
+
position: fixed;
|
15
|
+
top: 0;
|
16
|
+
left: 0;
|
17
|
+
z-index: 1000;
|
18
|
+
display: none;
|
19
|
+
}
|
20
|
+
|
21
|
+
:host(.core-opened) {
|
22
|
+
display: block;
|
23
|
+
}
|
24
|
+
</style>
|
25
|
+
<content></content>
|
26
|
+
</template>
|
27
|
+
<script>
|
28
|
+
(function() {
|
29
|
+
|
30
|
+
Polymer('core-overlay-layer', {
|
31
|
+
publish: {
|
32
|
+
opened: false
|
33
|
+
},
|
34
|
+
openedChanged: function() {
|
35
|
+
this.classList.toggle('core-opened', this.opened);
|
36
|
+
},
|
37
|
+
/**
|
38
|
+
* Adds an element to the overlay layer
|
39
|
+
*/
|
40
|
+
addElement: function(element) {
|
41
|
+
if (!this.parentNode) {
|
42
|
+
document.querySelector('body').appendChild(this);
|
43
|
+
}
|
44
|
+
if (element.parentNode !== this) {
|
45
|
+
element.__contents = [];
|
46
|
+
var ip$ = element.querySelectorAll('content');
|
47
|
+
for (var i=0, l=ip$.length, n; (i<l) && (n = ip$[i]); i++) {
|
48
|
+
this.moveInsertedElements(n);
|
49
|
+
this.cacheDomLocation(n);
|
50
|
+
n.parentNode.removeChild(n);
|
51
|
+
element.__contents.push(n);
|
52
|
+
}
|
53
|
+
this.cacheDomLocation(element);
|
54
|
+
this.updateEventController(element);
|
55
|
+
var h = this.makeHost();
|
56
|
+
h.shadowRoot.appendChild(element);
|
57
|
+
element.__host = h;
|
58
|
+
}
|
59
|
+
},
|
60
|
+
makeHost: function() {
|
61
|
+
var h = document.createElement('overlay-host');
|
62
|
+
h.createShadowRoot();
|
63
|
+
this.appendChild(h);
|
64
|
+
return h;
|
65
|
+
},
|
66
|
+
moveInsertedElements: function(insertionPoint) {
|
67
|
+
var n$ = insertionPoint.getDistributedNodes();
|
68
|
+
var parent = insertionPoint.parentNode;
|
69
|
+
insertionPoint.__contents = [];
|
70
|
+
for (var i=0, l=n$.length, n; (i<l) && (n=n$[i]); i++) {
|
71
|
+
this.cacheDomLocation(n);
|
72
|
+
this.updateEventController(n);
|
73
|
+
insertionPoint.__contents.push(n);
|
74
|
+
parent.appendChild(n);
|
75
|
+
}
|
76
|
+
},
|
77
|
+
updateEventController: function(element) {
|
78
|
+
element.eventController = this.element.findController(element);
|
79
|
+
},
|
80
|
+
/**
|
81
|
+
* Removes an element from the overlay layer
|
82
|
+
*/
|
83
|
+
removeElement: function(element) {
|
84
|
+
element.eventController = null;
|
85
|
+
this.replaceElement(element);
|
86
|
+
var h = element.__host;
|
87
|
+
if (h) {
|
88
|
+
h.parentNode.removeChild(h);
|
89
|
+
}
|
90
|
+
},
|
91
|
+
replaceElement: function(element) {
|
92
|
+
if (element.__contents) {
|
93
|
+
for (var i=0, c$=element.__contents, c; (c=c$[i]); i++) {
|
94
|
+
this.replaceElement(c);
|
95
|
+
}
|
96
|
+
element.__contents = null;
|
97
|
+
}
|
98
|
+
if (element.__parentNode) {
|
99
|
+
var n = element.__nextElementSibling && element.__nextElementSibling
|
100
|
+
=== element.__parentNode ? element.__nextElementSibling : null;
|
101
|
+
element.__parentNode.insertBefore(element, n);
|
102
|
+
}
|
103
|
+
},
|
104
|
+
cacheDomLocation: function(element) {
|
105
|
+
element.__nextElementSibling = element.nextElementSibling;
|
106
|
+
element.__parentNode = element.parentNode;
|
107
|
+
}
|
108
|
+
});
|
109
|
+
|
110
|
+
})();
|
111
|
+
</script>
|
112
|
+
</polymer-element>
|