render_async 2.1.0 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: bc0f4801636b4b88873e40623ea250d27f35ee11
4
- data.tar.gz: e4407a2cd9bfd7cf409dfe0d6846446bb6370db7
2
+ SHA256:
3
+ metadata.gz: df5daf3d85a8c231ffb42b131e132c5ccb3ee05a7fa4d907d4c4a7d7f0ca9933
4
+ data.tar.gz: ad4e99c2355a33754f2f2a0136a8994ee8da70f50071b0374de834eb07b1dd3d
5
5
  SHA512:
6
- metadata.gz: 5ea2036461e908f64a6d3ee180a28663052f31393f1a7c600cc8a3ec7319b2bfbd4a6c7e5534175f933accc944c154d3b2e6629e69f0feaf71b46f7b02f2b343
7
- data.tar.gz: d4df153331955b0bef1111e5a9095f8ab01568bd69bbfe1bca014a5423e7d71f11859658ec27d2a356b565ce25346c8331b30ad57fb7d7b60f16ba18941e1738
6
+ metadata.gz: '058d8eb219d8230a096d6da70884a35b239158023b69d1d7968ead8f4cd9dcdaa465be6e3de9773c03520ca1541b71f7181b7dd830953f36ab6de6b1f2855554'
7
+ data.tar.gz: 3c4949c59e023411ae1e467681ffdeeab49be312c2f5909be299519d529773f32db8237b568c473c08cca2eb371633a8748077faa8bb2f956474712a9a332424
data/.all-contributorsrc CHANGED
@@ -149,6 +149,16 @@
149
149
  "contributions": [
150
150
  "doc"
151
151
  ]
152
+ },
153
+ {
154
+ "login": "ThanhKhoaIT",
155
+ "name": "Khoa Nguyen",
156
+ "avatar_url": "https://avatars0.githubusercontent.com/u/6081795?v=4",
157
+ "profile": "https://github.com/ThanhKhoaIT",
158
+ "contributions": [
159
+ "code",
160
+ "doc"
161
+ ]
152
162
  }
153
163
  ],
154
164
  "repoType": "github"
data/CHANGELOG.md CHANGED
@@ -1,3 +1,14 @@
1
+ ### 2.1.1 (2019/8/17)
2
+ * [#85](https://github.com/renderedtext/render_async/pull/85): Rename main JS function and support toggle feature with other features - [@nikolalsvk](https://github.com/nikolalsvk).
3
+ * [#82](https://github.com/renderedtext/render_async/pull/82): Add toggle selector and event to render - [@ThanhKhoaIT](https://github.com/ThanhKhoaIT).
4
+ * DEPRECATION WARNING - html_options is now a hash that you pass to render_async instead of an argument. If you passed for example a nonce: '21312aas...', you will need to pass
5
+ html_options: { nonce: '21312aas...' }
6
+
7
+ ### 2.1.0 (2019/5/6)
8
+
9
+ * [#77](https://github.com/renderedtext/render_async/pull/77): Call render_async logic every N seconds - [@nikolalsvk](https://github.com/nikolalsvk).
10
+ * [#76](https://github.com/renderedtext/render_async/pull/76): Retry render_async on failure - [@nikolalsvk](https://github.com/nikolalsvk).
11
+
1
12
  ### 2.0.2 (2019/1/4)
2
13
 
3
14
  * [#74](https://github.com/renderedtext/render_async/pull/74): Remove bundler as a dependency - [@nikolalsvk](https://github.com/nikolalsvk).
data/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  [![Build Status](https://semaphoreci.com/api/v1/renderedtext/render_async/branches/master/shields_badge.svg)](https://semaphoreci.com/renderedtext/render_async)
2
- [![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors)
2
+ [![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)
3
3
  [![Gem Version](https://badge.fury.io/rb/render_async.svg)](https://badge.fury.io/rb/render_async)
4
4
  [![Code Climate](https://codeclimate.com/github/renderedtext/render_async/badges/gpa.svg)](https://codeclimate.com/github/renderedtext/render_async)
5
5
  [![Test Coverage](https://codeclimate.com/github/renderedtext/render_async/badges/coverage.svg)](https://codeclimate.com/github/renderedtext/render_async/coverage)
@@ -80,6 +80,7 @@ Advanced usage includes information on different options, such as:
80
80
  - [Passing in a placeholder](#passing-in-a-placeholder)
81
81
  - [Passing in an event name](#passing-in-an-event-name)
82
82
  - [Retry on failure](#retry-on-failure)
83
+ - [Toggle event](#toggle-event)
83
84
  - [Polling](#polling)
84
85
  - [Handling errors](#handling-errors)
85
86
  - [Caching](#caching)
@@ -128,13 +129,13 @@ Rendered code in the view:
128
129
 
129
130
  ### Passing in HTML options
130
131
 
131
- `render_async` can accept `html_options` argument.
132
+ `render_async` can accept `html_options` as a hash.
132
133
  `html_options` is an optional hash that gets passed to a Rails'
133
134
  `javascript_tag`, to drop HTML tags into the `script` element.
134
135
 
135
136
  Example of utilizing `html_options` with a `nonce`:
136
137
  ```erb
137
- <%= render_async users_path, nonce: 'lWaaV6eYicpt+oyOfcShYINsz0b70iR+Q1mohZqNaag=' %>
138
+ <%= render_async users_path, html_options: { nonce: 'lWaaV6eYicpt+oyOfcShYINsz0b70iR+Q1mohZqNaag=' } %>
138
139
  ```
139
140
 
140
141
  Rendered code in the view:
@@ -252,6 +253,34 @@ it will show an [error message](#handling-errors) which you need to specify.
252
253
  This can show useful when you know your requests often fail, and you don't want
253
254
  to refresh the whole page just to retry them.
254
255
 
256
+ ### Toggle event
257
+
258
+ If you want to call `render_async` on click or another event you can specify.
259
+ If you don't specifiy an event name, the default would be 'click' event. You
260
+ can do this by doing the following:
261
+
262
+ ```erb
263
+ <a href='#' id='detail-button'>detail</a>
264
+ <%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } %>
265
+ ```
266
+
267
+ This will trigger render_async to load the `comments_path` when you click the `#details-button` element.
268
+
269
+ You can also pass in a placeholder before the render_async is triggered:
270
+
271
+ ```erb
272
+ <%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } do %>
273
+ <a href='#' id='detail-button'>detail</a>
274
+ <% end %>
275
+ ```
276
+
277
+ Also, you can mix interval and toggle features like this:
278
+
279
+ ```erb
280
+ <a href='#' id='detail-button'>detail</a>
281
+ <%= render_async comments_path, toggle: { selector: '#detail-button', event: :click }, interval: 2000 %>
282
+ ```
283
+
255
284
  ### Polling
256
285
 
257
286
  You can call `render_async` with interval argument. This will make render_async
@@ -267,8 +296,8 @@ This can be handy if you want to enable polling for a specific URL.
267
296
 
268
297
  NOTE: By passing interval to `render_async`, initial container element
269
298
  will remain in HTML tree, it will not be replaced with request response.
270
- You can handle how that container element is rendered and its style by
271
- [passing in an HTML element name](#passing-in-an-html-element-name) and
299
+ You can handle how that container element is rendered and its style by
300
+ [passing in an HTML element name](#passing-in-an-html-element-name) and
272
301
  [HTML element class](#passing-in-a-container-class-name).
273
302
 
274
303
  ### Handling errors
@@ -475,7 +504,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
475
504
  | [<img src="https://avatars2.githubusercontent.com/u/3028124?v=4" width="100px;"/><br /><sub><b>Nikola Đuza</b></sub>](http://nikoladjuza.me/)<br />[💬](#question-nikolalsvk "Answering Questions") [💻](https://github.com/renderedtext/render_async/commits?author=nikolalsvk "Code") [📖](https://github.com/renderedtext/render_async/commits?author=nikolalsvk "Documentation") [👀](#review-nikolalsvk "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/3866868?v=4" width="100px;"/><br /><sub><b>Colin</b></sub>](http://www.colinxfleming.com)<br />[💻](https://github.com/renderedtext/render_async/commits?author=colinxfleming "Code") [📖](https://github.com/renderedtext/render_async/commits?author=colinxfleming "Documentation") [💡](#example-colinxfleming "Examples") | [<img src="https://avatars2.githubusercontent.com/u/334273?v=4" width="100px;"/><br /><sub><b>Kasper Grubbe</b></sub>](http://kaspergrubbe.com)<br />[💻](https://github.com/renderedtext/render_async/commits?author=kaspergrubbe "Code") | [<img src="https://avatars2.githubusercontent.com/u/163584?v=4" width="100px;"/><br /><sub><b>Sai Ram Kunala</b></sub>](https://sairam.xyz/)<br />[📖](https://github.com/renderedtext/render_async/commits?author=sairam "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3065882?v=4" width="100px;"/><br /><sub><b>Josh Arnold</b></sub>](https://github.com/nightsurge)<br />[💻](https://github.com/renderedtext/render_async/commits?author=nightsurge "Code") [📖](https://github.com/renderedtext/render_async/commits?author=nightsurge "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/107798?v=4" width="100px;"/><br /><sub><b>Elad Shahar</b></sub>](https://eladshahar.com)<br />[💻](https://github.com/renderedtext/render_async/commits?author=SaladFork "Code") [💡](#example-SaladFork "Examples") | [<img src="https://avatars3.githubusercontent.com/u/232392?v=4" width="100px;"/><br /><sub><b>Sasha</b></sub>](http://www.revzin.co.il)<br />[💻](https://github.com/renderedtext/render_async/commits?author=sasharevzin "Code") [📖](https://github.com/renderedtext/render_async/commits?author=sasharevzin "Documentation") |
476
505
  | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
477
506
  | [<img src="https://avatars3.githubusercontent.com/u/50223?v=4" width="100px;"/><br /><sub><b>Ernest Surudo</b></sub>](http://elsurudo.com)<br />[💻](https://github.com/renderedtext/render_async/commits?author=elsurudo "Code") | [<img src="https://avatars1.githubusercontent.com/u/334809?v=4" width="100px;"/><br /><sub><b>Kurtis Rainbolt-Greene</b></sub>](https://kurtis.rainbolt-greene.online)<br />[💻](https://github.com/renderedtext/render_async/commits?author=krainboltgreene "Code") | [<img src="https://avatars2.githubusercontent.com/u/59744?v=4" width="100px;"/><br /><sub><b>Richard Schneeman</b></sub>](https://www.schneems.com)<br />[📖](https://github.com/renderedtext/render_async/commits?author=schneems "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/75705?v=4" width="100px;"/><br /><sub><b>Richard Venneman</b></sub>](https://www.cityspotters.com)<br />[📖](https://github.com/renderedtext/render_async/commits?author=richardvenneman "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/381395?v=4" width="100px;"/><br /><sub><b>Filipe W. Lima</b></sub>](https://github.com/filipewl)<br />[📖](https://github.com/renderedtext/render_async/commits?author=filipewl "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/3135638?v=4" width="100px;"/><br /><sub><b>Jesús Eduardo Clemens Chong</b></sub>](https://github.com/eclemens)<br />[💻](https://github.com/renderedtext/render_async/commits?author=eclemens "Code") | [<img src="https://avatars3.githubusercontent.com/u/1935686?v=4" width="100px;"/><br /><sub><b>René Klačan</b></sub>](https://github.com/reneklacan)<br />[💻](https://github.com/renderedtext/render_async/commits?author=reneklacan "Code") |
478
- | [<img src="https://avatars1.githubusercontent.com/u/1313442?v=4" width="100px;"/><br /><sub><b>Gil Gomes</b></sub>](http://gilgomes.com.br)<br />[📖](https://github.com/renderedtext/render_async/commits?author=gil27 "Documentation") |
507
+ | [<img src="https://avatars1.githubusercontent.com/u/1313442?v=4" width="100px;"/><br /><sub><b>Gil Gomes</b></sub>](http://gilgomes.com.br)<br />[📖](https://github.com/renderedtext/render_async/commits?author=gil27 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/6081795?v=4" width="100px;"/><br /><sub><b>Khoa Nguyen</b></sub>](https://github.com/ThanhKhoaIT)<br />[💻](https://github.com/renderedtext/render_async/commits?author=ThanhKhoaIT "Code") [📖](https://github.com/renderedtext/render_async/commits?author=ThanhKhoaIT "Documentation") |
479
508
  <!-- ALL-CONTRIBUTORS-LIST:END -->
480
509
 
481
510
  This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
@@ -15,6 +15,7 @@
15
15
  method: method,
16
16
  data: data,
17
17
  event_name: event_name,
18
+ toggle: toggle,
18
19
  headers: headers,
19
20
  error_message: error_message,
20
21
  error_event_name: error_event_name,
@@ -29,6 +30,7 @@
29
30
  method: method,
30
31
  data: data,
31
32
  event_name: event_name,
33
+ toggle: toggle,
32
34
  headers: headers,
33
35
  error_message: error_message,
34
36
  error_event_name: error_event_name,
@@ -6,7 +6,7 @@ if (window.jQuery) {
6
6
  }
7
7
  <% end %>
8
8
 
9
- var _listener = function(currentRetryCount) {
9
+ var _makeRequest = function(currentRetryCount) {
10
10
  var headers = <%= headers.to_json.html_safe %>;
11
11
  var csrfTokenElement = document.querySelector('meta[name="csrf-token"]')
12
12
  if (csrfTokenElement)
@@ -64,25 +64,41 @@ if (window.jQuery) {
64
64
  if (currentRetryCount >= <%= retry_count %>)
65
65
  return false;
66
66
 
67
- _listener(currentRetryCount + 1);
67
+ _makeRequest(currentRetryCount + 1);
68
68
  return true;
69
69
  }
70
70
 
71
- _listener(1);
71
+ _makeRequest(1);
72
72
  return true;
73
73
  }
74
74
  <% end %>
75
75
 
76
- <% if turbolinks %>
77
- $(document).one('turbolinks:load', _listener);
78
- <% elsif interval %>
79
- var _intervalFunction = function() {
80
- _listener();
81
- setInterval(_listener, <%= interval %>);
76
+ var _renderAsyncFunction = _makeRequest;
77
+
78
+ <% if interval %>
79
+ var _interval;
80
+ var _renderAsyncFunction = function() {
81
+ _makeRequest();
82
+ _interval = setInterval(_makeRequest, <%= interval %>);
82
83
  }
83
- $(document).ready(_intervalFunction);
84
- <% else %>
85
- $(document).ready(_listener);
84
+ <% end %>
85
+
86
+ <% if toggle %>
87
+ $(document).on('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {
88
+ event.preventDefault();
89
+ if (_interval) {
90
+ clearInterval(_interval);
91
+ _interval = undefined;
92
+ } else {
93
+ _renderAsyncFunction();
94
+ }
95
+ });
96
+ <% end %>
97
+
98
+ <% if turbolinks %>
99
+ $(document).one('turbolinks:load', _renderAsyncFunction);
100
+ <% elsif !toggle %>
101
+ $(document).ready(_renderAsyncFunction);
86
102
  <% end %>
87
103
  }(jQuery));
88
104
  } else {
@@ -4,8 +4,8 @@
4
4
  return;
5
5
  }
6
6
  <% end %>
7
-
8
- var _listener = function(currentRetryCount) {
7
+
8
+ var _makeRequest = function(currentRetryCount) {
9
9
  var request = new XMLHttpRequest();
10
10
  var asyncRequest = true;
11
11
  var SUCCESS = 200;
@@ -77,27 +77,47 @@
77
77
  if (currentRetryCount >= <%= retry_count %>)
78
78
  return false;
79
79
 
80
- _listener(currentRetryCount + 1);
80
+ _makeRequest(currentRetryCount + 1);
81
81
  return true;
82
82
  }
83
83
 
84
- _listener(1);
84
+ _makeRequest(1);
85
85
  return true;
86
86
  }
87
87
  <% end %>
88
88
 
89
+ var _renderAsyncFunction = _makeRequest;
90
+
91
+ <% if interval %>
92
+ var _interval;
93
+ var _renderAsyncFunction = function() {
94
+ _makeRequest();
95
+ _interval = setInterval(_makeRequest, <%= interval %>);
96
+ }
97
+ <% end %>
98
+
99
+ <% if toggle %>
100
+ var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
101
+
102
+ [...selectors].forEach(function(selector) {
103
+ selector.addEventListener('<%= toggle[:event] || 'click' %>', function(event) {
104
+ event.preventDefault();
105
+ if (_interval) {
106
+ clearInterval(_interval);
107
+ _interval = undefined;
108
+ } else {
109
+ _renderAsyncFunction();
110
+ }
111
+ })
112
+ });
113
+ <% end %>
114
+
89
115
  <% if turbolinks %>
90
116
  document.addEventListener("turbolinks:load", function (e) {
91
117
  e.target.removeEventListener(e.type, arguments.callee);
92
- _listener.call(this);
118
+ _renderAsyncFunction();
93
119
  });
94
- <% elsif interval %>
95
- var _intervalFunction = function() {
96
- _listener();
97
- setInterval(_listener, <%= interval %>);
98
- }
99
- document.addEventListener("DOMContentLoaded", _intervalFunction);
100
- <% else %>
101
- document.addEventListener("DOMContentLoaded", _listener);
120
+ <% elsif !toggle %>
121
+ document.addEventListener("DOMContentLoaded", _renderAsyncFunction);
102
122
  <% end %>
103
123
  })();
@@ -1,3 +1,3 @@
1
1
  module RenderAsync
2
- VERSION = "2.1.0".freeze
2
+ VERSION = "2.1.1".freeze
3
3
  end
@@ -18,33 +18,44 @@ module RenderAsync
18
18
  end
19
19
 
20
20
  def render_async(path, options = {}, &placeholder)
21
- html_element_name = options.delete(:html_element_name) || 'div'
22
- container_id = options.delete(:container_id) || generate_container_id
23
- container_class = options.delete(:container_class)
24
21
  event_name = options.delete(:event_name)
25
22
  placeholder = capture(&placeholder) if block_given?
26
- method = options.delete(:method) || 'GET'
27
- data = options.delete(:data)
28
- headers = options.delete(:headers) || {}
29
- error_message = options.delete(:error_message)
30
- error_event_name = options.delete(:error_event_name)
31
23
  retry_count = options.delete(:retry_count) || 0
32
- interval = options.delete(:interval)
24
+ html_options = options.delete(:html_options) || {}
33
25
 
34
- render 'render_async/render_async', html_element_name: html_element_name,
35
- container_id: container_id,
36
- container_class: container_class,
26
+ render 'render_async/render_async', **container_element_options(options),
37
27
  path: path,
38
- html_options: options,
28
+ html_options: html_options,
39
29
  event_name: event_name,
40
30
  placeholder: placeholder,
41
- method: method,
42
- data: data,
43
- headers: headers,
44
- error_message: error_message,
45
- error_event_name: error_event_name,
31
+ **request_options(options),
32
+ **error_handling_options(options),
46
33
  retry_count: retry_count,
47
- interval: interval
34
+ **polling_options(options)
35
+ end
36
+
37
+ private
38
+
39
+ def container_element_options(options)
40
+ { html_element_name: options[:html_element_name] || 'div',
41
+ container_id: options[:container_id] || generate_container_id,
42
+ container_class: options[:container_class] }
43
+ end
44
+
45
+ def request_options(options)
46
+ { method: options[:method] || 'GET',
47
+ data: options[:data],
48
+ headers: options[:headers] || {} }
49
+ end
50
+
51
+ def error_handling_options(options)
52
+ { error_message: options[:error_message],
53
+ error_event_name: options[:error_event_name] }
54
+ end
55
+
56
+ def polling_options(options)
57
+ { interval: options[:interval],
58
+ toggle: options[:toggle] }
48
59
  end
49
60
 
50
61
  private
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: render_async
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.0
4
+ version: 2.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kasper Grubbe
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: exe
11
11
  cert_chain: []
12
- date: 2019-05-06 00:00:00.000000000 Z
12
+ date: 2019-08-16 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rake
@@ -101,7 +101,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
101
101
  version: '0'
102
102
  requirements: []
103
103
  rubyforge_project:
104
- rubygems_version: 2.6.14
104
+ rubygems_version: 2.7.6
105
105
  signing_key:
106
106
  specification_version: 4
107
107
  summary: Render parts of the page asynchronously with AJAX