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
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: d8ab38fab2c83f97291656051c8c092f1e05f209
|
4
|
+
data.tar.gz: a10b18a7c53033229d875972202804cd7ef739ec
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 42fc7297fb1ec577553f93de7ae5717df59217f625eefea3223e19238f809940fbfd4439b476b1a202ac985e13c40a248daf686dee8a67d1777bcfd4efbc6070
|
7
|
+
data.tar.gz: d6074a1dbfc640e1aa072c2ef79dafeec1767480f1da1aa14f33cf850db7d5b6686ed1ef9472f48a536e861e213e9d80aa77401b3c40a1c2dd478d956aa87399
|
data/README.md
ADDED
@@ -0,0 +1,82 @@
|
|
1
|
+
# PolymerCoreRails
|
2
|
+
|
3
|
+
Polymer Core elements are a set of utility elements including general-purpose UI elements (such as icons, layout elements,
|
4
|
+
and toolbars), as well as non-UI elements providing features like AJAX, signaling and storage.
|
5
|
+
|
6
|
+
Polymer-core-rails gem brings polymer core web components into your Rails project.
|
7
|
+
|
8
|
+
## Installation
|
9
|
+
|
10
|
+
Add this line to your application's Gemfile:
|
11
|
+
|
12
|
+
```ruby
|
13
|
+
gem 'polymer-core-rails'
|
14
|
+
```
|
15
|
+
|
16
|
+
And then execute:
|
17
|
+
|
18
|
+
$ bundle
|
19
|
+
|
20
|
+
Or install it yourself as:
|
21
|
+
|
22
|
+
$ gem install polymer-core-rails
|
23
|
+
|
24
|
+
## Getting started
|
25
|
+
|
26
|
+
In order to use Polymer core elements you need to have
|
27
|
+
`polymer` installed in your project. Use [polymer-rails](https://github.com/alchapone/polymer-core-rails) gem for adding `polymer` to your Rails application.
|
28
|
+
|
29
|
+
```ruby
|
30
|
+
gem 'polymer-rails'
|
31
|
+
gem 'polymer-core-rails'
|
32
|
+
```
|
33
|
+
|
34
|
+
After runnign `bundle install` require needed core elements into your `application.html` manifest file.
|
35
|
+
|
36
|
+
//= require polymer/polymer
|
37
|
+
//= require core-ajax/core-ajax
|
38
|
+
//= require core-input/core-intut
|
39
|
+
.....
|
40
|
+
//= require core-tooltip/core-tooltip
|
41
|
+
|
42
|
+
Each component should be required only once. Thus if you've already required component that has dependencies, you don't need
|
43
|
+
to explicitly require any of dependencies, otherwise it will raise exception.
|
44
|
+
|
45
|
+
## Available elements
|
46
|
+
|
47
|
+
* [core-ajax](http://www.polymer-project.org/docs/elements/core-elements.html#core-ajax)
|
48
|
+
* [core-animated-pages](http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages)
|
49
|
+
* [core-animation](http://www.polymer-project.org/docs/elements/core-elements.html#core-animation)
|
50
|
+
* [core-collapse](http://www.polymer-project.org/docs/elements/core-elements.html#core-collapse)
|
51
|
+
* [core-drag-drop](http://www.polymer-project.org/docs/elements/core-elements.html#core-drag-drop)
|
52
|
+
* [core-drawer-panel](http://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel)
|
53
|
+
* [core-field](http://www.polymer-project.org/docs/elements/core-elements.html#core-field)
|
54
|
+
* [core-header-panel](http://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel)
|
55
|
+
* [core-icon](http://www.polymer-project.org/docs/elements/core-elements.html#core-icon)
|
56
|
+
* [core-icon-button](http://www.polymer-project.org/docs/elements/core-elements.html#core-icon-button)
|
57
|
+
* [core-input](http://www.polymer-project.org/docs/elements/core-elements.html#core-input)
|
58
|
+
* [core-list](http://www.polymer-project.org/docs/elements/core-elements.html#core-list)
|
59
|
+
* [core-localstorage](http://www.polymer-project.org/docs/elements/core-elements.html#core-localstorage)
|
60
|
+
* [core-media-query](http://www.polymer-project.org/docs/elements/core-elements.html#core-media-query)
|
61
|
+
* [core-meta](http://www.polymer-project.org/docs/elements/core-elements.html#core-meta)
|
62
|
+
* [core-overlay](http://www.polymer-project.org/docs/elements/core-elements.html#core-overlay)
|
63
|
+
* [core-pages](http://www.polymer-project.org/docs/elements/core-elements.html#core-pages)
|
64
|
+
* [core-range](http://www.polymer-project.org/docs/elements/core-elements.html#core-range)
|
65
|
+
* [core-scroll-header-panel](http://www.polymer-project.org/docs/elements/core-elements.html#core-scroll-header-panel)
|
66
|
+
* [core-selection](http://www.polymer-project.org/docs/elements/core-elements.html#core-selection)
|
67
|
+
* [core-selector](http://www.polymer-project.org/docs/elements/core-elements.html#core-selector)
|
68
|
+
* [core-shared-lib](http://www.polymer-project.org/docs/elements/core-elements.html#core-shared-lib)
|
69
|
+
* [core-signals](http://www.polymer-project.org/docs/elements/core-elements.html#core-signals)
|
70
|
+
* [core-splitter](http://www.polymer-project.org/docs/elements/core-elements.html#core-splitter)
|
71
|
+
* [core-style](http://www.polymer-project.org/docs/elements/core-elements.html#core-style)
|
72
|
+
* [core-toolbar](http://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar)
|
73
|
+
* [core-tooltip](http://www.polymer-project.org/docs/elements/core-elements.html#core-tooltip)
|
74
|
+
|
75
|
+
|
76
|
+
## Contributing
|
77
|
+
|
78
|
+
1. Fork it ( https://github.com/[my-github-username]/polymer_core_rails/fork )
|
79
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
80
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
81
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
82
|
+
5. Create a new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1,320 @@
|
|
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
|
+
@group Polymer Core Elements
|
12
|
+
|
13
|
+
The `core-ajax` element exposes `XMLHttpRequest` functionality.
|
14
|
+
|
15
|
+
<core-ajax
|
16
|
+
auto
|
17
|
+
url="http://gdata.youtube.com/feeds/api/videos/"
|
18
|
+
params='{"alt":"json", "q":"chrome"}'
|
19
|
+
handleAs="json"
|
20
|
+
on-core-response="{{handleResponse}}"></core-ajax>
|
21
|
+
|
22
|
+
With `auto` set to `true`, the element performs a request whenever
|
23
|
+
its `url` or `params` properties are changed.
|
24
|
+
|
25
|
+
Note: The `params` attribute must be double quoted JSON.
|
26
|
+
|
27
|
+
You can trigger a request explicitly by calling `go` on the
|
28
|
+
element.
|
29
|
+
|
30
|
+
@element core-ajax
|
31
|
+
@status beta
|
32
|
+
@homepage github.io
|
33
|
+
-->
|
34
|
+
<%= html_import_tag "core-ajax/core-xhr" %>
|
35
|
+
<polymer-element name="core-ajax" attributes="url handleAs auto params response method headers body contentType withCredentials">
|
36
|
+
<script>
|
37
|
+
|
38
|
+
Polymer('core-ajax', {
|
39
|
+
/**
|
40
|
+
* Fired when a response is received.
|
41
|
+
*
|
42
|
+
* @event core-response
|
43
|
+
*/
|
44
|
+
|
45
|
+
/**
|
46
|
+
* Fired when an error is received.
|
47
|
+
*
|
48
|
+
* @event core-error
|
49
|
+
*/
|
50
|
+
|
51
|
+
/**
|
52
|
+
* Fired whenever a response or an error is received.
|
53
|
+
*
|
54
|
+
* @event core-complete
|
55
|
+
*/
|
56
|
+
|
57
|
+
/**
|
58
|
+
* The URL target of the request.
|
59
|
+
*
|
60
|
+
* @attribute url
|
61
|
+
* @type string
|
62
|
+
* @default ''
|
63
|
+
*/
|
64
|
+
url: '',
|
65
|
+
|
66
|
+
/**
|
67
|
+
* Specifies what data to store in the `response` property, and
|
68
|
+
* to deliver as `event.response` in `response` events.
|
69
|
+
*
|
70
|
+
* One of:
|
71
|
+
*
|
72
|
+
* `text`: uses `XHR.responseText`.
|
73
|
+
*
|
74
|
+
* `xml`: uses `XHR.responseXML`.
|
75
|
+
*
|
76
|
+
* `json`: uses `XHR.responseText` parsed as JSON.
|
77
|
+
*
|
78
|
+
* `arraybuffer`: uses `XHR.response`.
|
79
|
+
*
|
80
|
+
* `blob`: uses `XHR.response`.
|
81
|
+
*
|
82
|
+
* `document`: uses `XHR.response`.
|
83
|
+
*
|
84
|
+
* @attribute handleAs
|
85
|
+
* @type string
|
86
|
+
* @default 'text'
|
87
|
+
*/
|
88
|
+
handleAs: '',
|
89
|
+
|
90
|
+
/**
|
91
|
+
* If true, automatically performs an Ajax request when either `url` or `params` changes.
|
92
|
+
*
|
93
|
+
* @attribute auto
|
94
|
+
* @type boolean
|
95
|
+
* @default false
|
96
|
+
*/
|
97
|
+
auto: false,
|
98
|
+
|
99
|
+
/**
|
100
|
+
* Parameters to send to the specified URL, as JSON.
|
101
|
+
*
|
102
|
+
* @attribute params
|
103
|
+
* @type string (JSON)
|
104
|
+
* @default ''
|
105
|
+
*/
|
106
|
+
params: '',
|
107
|
+
|
108
|
+
/**
|
109
|
+
* Returns the response object.
|
110
|
+
*
|
111
|
+
* @attribute response
|
112
|
+
* @type Object
|
113
|
+
* @default null
|
114
|
+
*/
|
115
|
+
response: null,
|
116
|
+
|
117
|
+
/**
|
118
|
+
* The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'.
|
119
|
+
* Default is 'GET'.
|
120
|
+
*
|
121
|
+
* @attribute method
|
122
|
+
* @type string
|
123
|
+
* @default ''
|
124
|
+
*/
|
125
|
+
method: '',
|
126
|
+
|
127
|
+
/**
|
128
|
+
* HTTP request headers to send.
|
129
|
+
*
|
130
|
+
* Example:
|
131
|
+
*
|
132
|
+
* <core-ajax
|
133
|
+
* auto
|
134
|
+
* url="http://somesite.com"
|
135
|
+
* headers='{"X-Requested-With": "XMLHttpRequest"}'
|
136
|
+
* handleAs="json"
|
137
|
+
* on-core-response="{{handleResponse}}"></core-ajax>
|
138
|
+
*
|
139
|
+
* @attribute headers
|
140
|
+
* @type Object
|
141
|
+
* @default null
|
142
|
+
*/
|
143
|
+
headers: null,
|
144
|
+
|
145
|
+
/**
|
146
|
+
* Optional raw body content to send when method === "POST".
|
147
|
+
*
|
148
|
+
* Example:
|
149
|
+
*
|
150
|
+
* <core-ajax method="POST" auto url="http://somesite.com"
|
151
|
+
* body='{"foo":1, "bar":2}'>
|
152
|
+
* </core-ajax>
|
153
|
+
*
|
154
|
+
* @attribute body
|
155
|
+
* @type Object
|
156
|
+
* @default null
|
157
|
+
*/
|
158
|
+
body: null,
|
159
|
+
|
160
|
+
/**
|
161
|
+
* Content type to use when sending data.
|
162
|
+
*
|
163
|
+
* @attribute contentType
|
164
|
+
* @type string
|
165
|
+
* @default 'application/x-www-form-urlencoded'
|
166
|
+
*/
|
167
|
+
contentType: 'application/x-www-form-urlencoded',
|
168
|
+
|
169
|
+
/**
|
170
|
+
* Set the withCredentials flag on the request.
|
171
|
+
*
|
172
|
+
* @attribute withCredentials
|
173
|
+
* @type boolean
|
174
|
+
* @default false
|
175
|
+
*/
|
176
|
+
withCredentials: false,
|
177
|
+
|
178
|
+
/**
|
179
|
+
* Additional properties to send to core-xhr.
|
180
|
+
*
|
181
|
+
* Can be set to an object containing default properties
|
182
|
+
* to send as arguments to the `core-xhr.request()` method
|
183
|
+
* which implements the low-level communication.
|
184
|
+
*
|
185
|
+
* @property xhrArgs
|
186
|
+
* @type Object
|
187
|
+
* @default null
|
188
|
+
*/
|
189
|
+
xhrArgs: null,
|
190
|
+
|
191
|
+
ready: function() {
|
192
|
+
this.xhr = document.createElement('core-xhr');
|
193
|
+
},
|
194
|
+
|
195
|
+
receive: function(response, xhr) {
|
196
|
+
if (this.isSuccess(xhr)) {
|
197
|
+
this.processResponse(xhr);
|
198
|
+
} else {
|
199
|
+
this.error(xhr);
|
200
|
+
}
|
201
|
+
this.complete(xhr);
|
202
|
+
},
|
203
|
+
|
204
|
+
isSuccess: function(xhr) {
|
205
|
+
var status = xhr.status || 0;
|
206
|
+
return !status || (status >= 200 && status < 300);
|
207
|
+
},
|
208
|
+
|
209
|
+
processResponse: function(xhr) {
|
210
|
+
var response = this.evalResponse(xhr);
|
211
|
+
this.response = response;
|
212
|
+
this.fire('core-response', {response: response, xhr: xhr});
|
213
|
+
},
|
214
|
+
|
215
|
+
error: function(xhr) {
|
216
|
+
var response = xhr.status + ': ' + xhr.responseText;
|
217
|
+
this.fire('core-error', {response: response, xhr: xhr});
|
218
|
+
},
|
219
|
+
|
220
|
+
complete: function(xhr) {
|
221
|
+
this.fire('core-complete', {response: xhr.status, xhr: xhr});
|
222
|
+
},
|
223
|
+
|
224
|
+
evalResponse: function(xhr) {
|
225
|
+
return this[(this.handleAs || 'text') + 'Handler'](xhr);
|
226
|
+
},
|
227
|
+
|
228
|
+
xmlHandler: function(xhr) {
|
229
|
+
return xhr.responseXML;
|
230
|
+
},
|
231
|
+
|
232
|
+
textHandler: function(xhr) {
|
233
|
+
return xhr.responseText;
|
234
|
+
},
|
235
|
+
|
236
|
+
jsonHandler: function(xhr) {
|
237
|
+
var r = xhr.responseText;
|
238
|
+
try {
|
239
|
+
return JSON.parse(r);
|
240
|
+
} catch (x) {
|
241
|
+
return r;
|
242
|
+
}
|
243
|
+
},
|
244
|
+
|
245
|
+
documentHandler: function(xhr) {
|
246
|
+
return xhr.response;
|
247
|
+
},
|
248
|
+
|
249
|
+
blobHandler: function(xhr) {
|
250
|
+
return xhr.response;
|
251
|
+
},
|
252
|
+
|
253
|
+
arraybufferHandler: function(xhr) {
|
254
|
+
return xhr.response;
|
255
|
+
},
|
256
|
+
|
257
|
+
urlChanged: function() {
|
258
|
+
if (!this.handleAs) {
|
259
|
+
var ext = String(this.url).split('.').pop();
|
260
|
+
switch (ext) {
|
261
|
+
case 'json':
|
262
|
+
this.handleAs = 'json';
|
263
|
+
break;
|
264
|
+
}
|
265
|
+
}
|
266
|
+
this.autoGo();
|
267
|
+
},
|
268
|
+
|
269
|
+
paramsChanged: function() {
|
270
|
+
this.autoGo();
|
271
|
+
},
|
272
|
+
|
273
|
+
autoChanged: function() {
|
274
|
+
this.autoGo();
|
275
|
+
},
|
276
|
+
|
277
|
+
// TODO(sorvell): multiple side-effects could call autoGo
|
278
|
+
// during one micro-task, use a job to have only one action
|
279
|
+
// occur
|
280
|
+
autoGo: function() {
|
281
|
+
if (this.auto) {
|
282
|
+
this.goJob = this.job(this.goJob, this.go, 0);
|
283
|
+
}
|
284
|
+
},
|
285
|
+
|
286
|
+
/**
|
287
|
+
* Performs an Ajax request to the specified URL.
|
288
|
+
*
|
289
|
+
* @method go
|
290
|
+
*/
|
291
|
+
go: function() {
|
292
|
+
var args = this.xhrArgs || {};
|
293
|
+
// TODO(sjmiles): we may want XHR to default to POST if body is set
|
294
|
+
args.body = this.body || args.body;
|
295
|
+
args.params = this.params || args.params;
|
296
|
+
if (args.params && typeof(args.params) == 'string') {
|
297
|
+
args.params = JSON.parse(args.params);
|
298
|
+
}
|
299
|
+
args.headers = this.headers || args.headers || {};
|
300
|
+
if (args.headers && typeof(args.headers) == 'string') {
|
301
|
+
args.headers = JSON.parse(args.headers);
|
302
|
+
}
|
303
|
+
if (this.contentType) {
|
304
|
+
args.headers['content-type'] = this.contentType;
|
305
|
+
}
|
306
|
+
if (this.handleAs === 'arraybuffer' || this.handleAs === 'blob' ||
|
307
|
+
this.handleAs === 'document') {
|
308
|
+
args.responseType = this.handleAs;
|
309
|
+
}
|
310
|
+
args.withCredentials = this.withCredentials;
|
311
|
+
args.callback = this.receive.bind(this);
|
312
|
+
args.url = this.url;
|
313
|
+
args.method = this.method;
|
314
|
+
return args.url && this.xhr.request(args);
|
315
|
+
}
|
316
|
+
|
317
|
+
});
|
318
|
+
|
319
|
+
</script>
|
320
|
+
</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
|
+
/**
|
11
|
+
* @group Polymer Core Elements
|
12
|
+
*
|
13
|
+
* core-xhr can be used to perform XMLHttpRequests.
|
14
|
+
*
|
15
|
+
* <core-xhr id="xhr"></core-xhr>
|
16
|
+
* ...
|
17
|
+
* this.$.xhr.request({url: url, params: params, callback: callback});
|
18
|
+
*
|
19
|
+
* @element core-xhr
|
20
|
+
*/
|
21
|
+
-->
|
22
|
+
<polymer-element name="core-xhr" hidden>
|
23
|
+
|
24
|
+
<script>
|
25
|
+
|
26
|
+
Polymer('core-xhr', {
|
27
|
+
|
28
|
+
/**
|
29
|
+
* Sends a HTTP request to the server and returns the XHR object.
|
30
|
+
*
|
31
|
+
* @method request
|
32
|
+
* @param {Object} inOptions
|
33
|
+
* @param {String} inOptions.url The url to which the request is sent.
|
34
|
+
* @param {String} inOptions.method The HTTP method to use, default is GET.
|
35
|
+
* @param {boolean} inOptions.sync By default, all requests are sent asynchronously. To send synchronous requests, set to true.
|
36
|
+
* @param {Object} inOptions.params Data to be sent to the server.
|
37
|
+
* @param {Object} inOptions.body The content for the request body for POST method.
|
38
|
+
* @param {Object} inOptions.headers HTTP request headers.
|
39
|
+
* @param {String} inOptions.responseType The response type. Default is 'text'.
|
40
|
+
* @param {boolean} inOptions.withCredentials Whether or not to send credentials on the request. Default is false.
|
41
|
+
* @param {Object} inOptions.callback Called when request is completed.
|
42
|
+
* @returns {Object} XHR object.
|
43
|
+
*/
|
44
|
+
request: function(options) {
|
45
|
+
var xhr = new XMLHttpRequest();
|
46
|
+
var url = options.url;
|
47
|
+
var method = options.method || 'GET';
|
48
|
+
var async = !options.sync;
|
49
|
+
//
|
50
|
+
var params = this.toQueryString(options.params);
|
51
|
+
if (params && method == 'GET') {
|
52
|
+
url += (url.indexOf('?') > 0 ? '&' : '?') + params;
|
53
|
+
}
|
54
|
+
var xhrParams = this.isBodyMethod(method) ? (options.body || params) : null;
|
55
|
+
//
|
56
|
+
xhr.open(method, url, async);
|
57
|
+
if (options.responseType) {
|
58
|
+
xhr.responseType = options.responseType;
|
59
|
+
}
|
60
|
+
if (options.withCredentials) {
|
61
|
+
xhr.withCredentials = true;
|
62
|
+
}
|
63
|
+
this.makeReadyStateHandler(xhr, options.callback);
|
64
|
+
this.setRequestHeaders(xhr, options.headers);
|
65
|
+
xhr.send(xhrParams);
|
66
|
+
if (!async) {
|
67
|
+
xhr.onreadystatechange(xhr);
|
68
|
+
}
|
69
|
+
return xhr;
|
70
|
+
},
|
71
|
+
|
72
|
+
toQueryString: function(params) {
|
73
|
+
var r = [];
|
74
|
+
for (var n in params) {
|
75
|
+
var v = params[n];
|
76
|
+
n = encodeURIComponent(n);
|
77
|
+
r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
|
78
|
+
}
|
79
|
+
return r.join('&');
|
80
|
+
},
|
81
|
+
|
82
|
+
isBodyMethod: function(method) {
|
83
|
+
return this.bodyMethods[(method || '').toUpperCase()];
|
84
|
+
},
|
85
|
+
|
86
|
+
bodyMethods: {
|
87
|
+
POST: 1,
|
88
|
+
PUT: 1,
|
89
|
+
DELETE: 1
|
90
|
+
},
|
91
|
+
|
92
|
+
makeReadyStateHandler: function(xhr, callback) {
|
93
|
+
xhr.onreadystatechange = function() {
|
94
|
+
if (xhr.readyState == 4) {
|
95
|
+
callback && callback.call(null, xhr.response, xhr);
|
96
|
+
}
|
97
|
+
};
|
98
|
+
},
|
99
|
+
|
100
|
+
setRequestHeaders: function(xhr, headers) {
|
101
|
+
if (headers) {
|
102
|
+
for (var name in headers) {
|
103
|
+
xhr.setRequestHeader(name, headers[name]);
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
});
|
109
|
+
|
110
|
+
</script>
|
111
|
+
|
112
|
+
</polymer-element>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
:host {
|
2
|
+
display: block;
|
3
|
+
position: relative;
|
4
|
+
}
|
5
|
+
|
6
|
+
polyfill-next-selector { content: ':host > *'; }
|
7
|
+
::content > * {
|
8
|
+
position: absolute;
|
9
|
+
top: 0;
|
10
|
+
right: 0;
|
11
|
+
bottom: 0;
|
12
|
+
left: 0;
|
13
|
+
}
|
14
|
+
|
15
|
+
polyfill-next-selector { content: ':host > *:not(.core-selected):not([animate])'; }
|
16
|
+
::content > *:not(.core-selected):not([animate]) {
|
17
|
+
display: none !important;
|
18
|
+
}
|