render_async 2.1.0 → 2.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: bc0f4801636b4b88873e40623ea250d27f35ee11
-  data.tar.gz: e4407a2cd9bfd7cf409dfe0d6846446bb6370db7
+SHA256:
+  metadata.gz: df5daf3d85a8c231ffb42b131e132c5ccb3ee05a7fa4d907d4c4a7d7f0ca9933
+  data.tar.gz: ad4e99c2355a33754f2f2a0136a8994ee8da70f50071b0374de834eb07b1dd3d
 SHA512:
-  metadata.gz: 5ea2036461e908f64a6d3ee180a28663052f31393f1a7c600cc8a3ec7319b2bfbd4a6c7e5534175f933accc944c154d3b2e6629e69f0feaf71b46f7b02f2b343
-  data.tar.gz: d4df153331955b0bef1111e5a9095f8ab01568bd69bbfe1bca014a5423e7d71f11859658ec27d2a356b565ce25346c8331b30ad57fb7d7b60f16ba18941e1738
+  metadata.gz: '058d8eb219d8230a096d6da70884a35b239158023b69d1d7968ead8f4cd9dcdaa465be6e3de9773c03520ca1541b71f7181b7dd830953f36ab6de6b1f2855554'
+  data.tar.gz: 3c4949c59e023411ae1e467681ffdeeab49be312c2f5909be299519d529773f32db8237b568c473c08cca2eb371633a8748077faa8bb2f956474712a9a332424

data/.all-contributorsrc

@@ -149,6 +149,16 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "ThanhKhoaIT",
+      "name": "Khoa Nguyen",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/6081795?v=4",
+      "profile": "https://github.com/ThanhKhoaIT",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "repoType": "github"

data/CHANGELOG.md

@@ -1,3 +1,14 @@
+### 2.1.1 (2019/8/17)
+* [#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).
+* [#82](https://github.com/renderedtext/render_async/pull/82): Add toggle selector and event to render - [@ThanhKhoaIT](https://github.com/ThanhKhoaIT).
+* 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
+  html_options: { nonce: '21312aas...' }
+
+### 2.1.0 (2019/5/6)
+
+* [#77](https://github.com/renderedtext/render_async/pull/77): Call render_async logic every N seconds - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#76](https://github.com/renderedtext/render_async/pull/76): Retry render_async on failure - [@nikolalsvk](https://github.com/nikolalsvk).
+
 ### 2.0.2 (2019/1/4)
 
 * [#74](https://github.com/renderedtext/render_async/pull/74): Remove bundler as a dependency - [@nikolalsvk](https://github.com/nikolalsvk).

data/README.md

@@ -1,5 +1,5 @@
 [![Build Status](https://semaphoreci.com/api/v1/renderedtext/render_async/branches/master/shields_badge.svg)](https://semaphoreci.com/renderedtext/render_async)
-[![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)
 [![Gem Version](https://badge.fury.io/rb/render_async.svg)](https://badge.fury.io/rb/render_async)
 [![Code Climate](https://codeclimate.com/github/renderedtext/render_async/badges/gpa.svg)](https://codeclimate.com/github/renderedtext/render_async)
 [![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:
   - [Passing in a placeholder](#passing-in-a-placeholder)
   - [Passing in an event name](#passing-in-an-event-name)
   - [Retry on failure](#retry-on-failure)
+  - [Toggle event](#toggle-event)
   - [Polling](#polling)
   - [Handling errors](#handling-errors)
   - [Caching](#caching)
@@ -128,13 +129,13 @@ Rendered code in the view:
 
 ### Passing in HTML options
 
-`render_async` can accept `html_options` argument.
+`render_async` can accept `html_options` as a hash.
 `html_options` is an optional hash that gets passed to a Rails'
 `javascript_tag`, to drop HTML tags into the `script` element.
 
 Example of utilizing `html_options` with a `nonce`:
 ```erb
-<%= render_async users_path, nonce: 'lWaaV6eYicpt+oyOfcShYINsz0b70iR+Q1mohZqNaag=' %>
+<%= render_async users_path, html_options: { nonce: 'lWaaV6eYicpt+oyOfcShYINsz0b70iR+Q1mohZqNaag=' } %>
 ```
 
 Rendered code in the view:
@@ -252,6 +253,34 @@ it will show an [error message](#handling-errors) which you need to specify.
 This can show useful when you know your requests often fail, and you don't want
 to refresh the whole page just to retry them.
 
+### Toggle event
+
+If you want to call `render_async` on click or another event you can specify.
+If you don't specifiy an event name, the default would be 'click' event. You
+can do this by doing the following:
+
+```erb
+<a href='#' id='detail-button'>detail</a>
+<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } %>
+```
+
+This will trigger render_async to load the `comments_path` when you click the `#details-button` element.
+
+You can also pass in a placeholder before the render_async is triggered:
+
+```erb
+<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } do %>
+  <a href='#' id='detail-button'>detail</a>
+<% end %>
+```
+
+Also, you can mix interval and toggle features like this:
+
+```erb
+<a href='#' id='detail-button'>detail</a>
+<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click }, interval: 2000 %>
+```
+
 ### Polling
 
 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.
 
 NOTE: By passing interval to `render_async`, initial container element
 will remain in HTML tree, it will not be replaced with request response.
-You can handle how that container element is rendered and its style by 
-[passing in an HTML element name](#passing-in-an-html-element-name) and 
+You can handle how that container element is rendered and its style by
+[passing in an HTML element name](#passing-in-an-html-element-name) and
 [HTML element class](#passing-in-a-container-class-name).
 
 ### Handling errors
@@ -475,7 +504,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | [<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") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<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") |
-| [<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://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") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

data/app/views/render_async/_render_async.html.erb

@@ -15,6 +15,7 @@
                             method: method,
                             data: data,
                             event_name: event_name,
+                            toggle: toggle,
                             headers: headers,
                             error_message: error_message,
                             error_event_name: error_event_name,
@@ -29,6 +30,7 @@
                             method: method,
                             data: data,
                             event_name: event_name,
+                            toggle: toggle,
                             headers: headers,
                             error_message: error_message,
                             error_event_name: error_event_name,

data/app/views/render_async/_request_jquery.js.erb

@@ -6,7 +6,7 @@ if (window.jQuery) {
     }
     <% end %>
 
-    var _listener = function(currentRetryCount) {
+    var _makeRequest = function(currentRetryCount) {
       var headers = <%= headers.to_json.html_safe %>;
       var csrfTokenElement = document.querySelector('meta[name="csrf-token"]')
       if (csrfTokenElement)
@@ -64,25 +64,41 @@ if (window.jQuery) {
         if (currentRetryCount >= <%= retry_count %>)
           return false;
 
-        _listener(currentRetryCount + 1);
+        _makeRequest(currentRetryCount + 1);
         return true;
       }
 
-      _listener(1);
+      _makeRequest(1);
       return true;
     }
     <% end %>
 
-    <% if turbolinks %>
-    $(document).one('turbolinks:load', _listener);
-    <% elsif interval %>
-    var _intervalFunction = function() {
-      _listener();
-      setInterval(_listener, <%= interval %>);
+    var _renderAsyncFunction = _makeRequest;
+
+    <% if interval %>
+    var _interval;
+    var _renderAsyncFunction = function() {
+      _makeRequest();
+      _interval = setInterval(_makeRequest, <%= interval %>);
     }
-    $(document).ready(_intervalFunction);
-    <% else %>
-    $(document).ready(_listener);
+    <% end %>
+
+    <% if toggle %>
+    $(document).on('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {
+      event.preventDefault();
+      if (_interval) {
+        clearInterval(_interval);
+        _interval = undefined;
+      } else {
+        _renderAsyncFunction();
+      }
+    });
+    <% end %>
+
+    <% if turbolinks %>
+    $(document).one('turbolinks:load', _renderAsyncFunction);
+    <% elsif !toggle %>
+    $(document).ready(_renderAsyncFunction);
     <% end %>
   }(jQuery));
 } else {

data/app/views/render_async/_request_vanilla.js.erb

@@ -4,8 +4,8 @@
     return;
   }
   <% end %>
-  
-  var _listener = function(currentRetryCount) {
+
+  var _makeRequest = function(currentRetryCount) {
     var request = new XMLHttpRequest();
     var asyncRequest = true;
     var SUCCESS = 200;
@@ -77,27 +77,47 @@
       if (currentRetryCount >= <%= retry_count %>)
         return false;
 
-      _listener(currentRetryCount + 1);
+      _makeRequest(currentRetryCount + 1);
       return true;
     }
 
-    _listener(1);
+    _makeRequest(1);
     return true;
   }
   <% end %>
 
+  var _renderAsyncFunction = _makeRequest;
+
+  <% if interval %>
+  var _interval;
+  var _renderAsyncFunction = function() {
+    _makeRequest();
+    _interval = setInterval(_makeRequest, <%= interval %>);
+  }
+  <% end %>
+
+  <% if toggle %>
+  var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
+
+  [...selectors].forEach(function(selector) {
+    selector.addEventListener('<%= toggle[:event] || 'click' %>', function(event) {
+      event.preventDefault();
+      if (_interval) {
+        clearInterval(_interval);
+        _interval = undefined;
+      } else {
+        _renderAsyncFunction();
+      }
+    })
+  });
+  <% end %>
+
   <% if turbolinks %>
   document.addEventListener("turbolinks:load", function (e) {
     e.target.removeEventListener(e.type, arguments.callee);
-    _listener.call(this);
+    _renderAsyncFunction();
   });
-  <% elsif interval %>
-  var _intervalFunction = function() {
-    _listener();
-    setInterval(_listener, <%= interval %>);
-  }
-  document.addEventListener("DOMContentLoaded", _intervalFunction);
-  <% else %>
-  document.addEventListener("DOMContentLoaded", _listener);
+  <% elsif !toggle %>
+  document.addEventListener("DOMContentLoaded", _renderAsyncFunction);
   <% end %>
 })();

data/lib/render_async/version.rb

@@ -1,3 +1,3 @@
 module RenderAsync
-  VERSION = "2.1.0".freeze
+  VERSION = "2.1.1".freeze
 end

data/lib/render_async/view_helper.rb

@@ -18,33 +18,44 @@ module RenderAsync
     end
 
     def render_async(path, options = {}, &placeholder)
-      html_element_name = options.delete(:html_element_name) || 'div'
-      container_id = options.delete(:container_id) || generate_container_id
-      container_class = options.delete(:container_class)
       event_name = options.delete(:event_name)
       placeholder = capture(&placeholder) if block_given?
-      method = options.delete(:method) || 'GET'
-      data = options.delete(:data)
-      headers = options.delete(:headers) || {}
-      error_message = options.delete(:error_message)
-      error_event_name = options.delete(:error_event_name)
       retry_count = options.delete(:retry_count) || 0
-      interval = options.delete(:interval)
+      html_options = options.delete(:html_options) || {}
 
-      render 'render_async/render_async', html_element_name: html_element_name,
-                                          container_id: container_id,
-                                          container_class: container_class,
+      render 'render_async/render_async', **container_element_options(options),
                                           path: path,
-                                          html_options: options,
+                                          html_options: html_options,
                                           event_name: event_name,
                                           placeholder: placeholder,
-                                          method: method,
-                                          data: data,
-                                          headers: headers,
-                                          error_message: error_message,
-                                          error_event_name: error_event_name,
+                                          **request_options(options),
+                                          **error_handling_options(options),
                                           retry_count: retry_count,
-                                          interval: interval
+                                          **polling_options(options)
+    end
+
+    private
+
+    def container_element_options(options)
+      { html_element_name: options[:html_element_name] || 'div',
+        container_id: options[:container_id] || generate_container_id,
+        container_class: options[:container_class] }
+    end
+
+    def request_options(options)
+      { method: options[:method] || 'GET',
+        data: options[:data],
+        headers: options[:headers] || {} }
+    end
+
+    def error_handling_options(options)
+      { error_message: options[:error_message],
+        error_event_name: options[:error_event_name] }
+    end
+
+    def polling_options(options)
+      { interval: options[:interval],
+        toggle: options[:toggle] }
     end
 
     private

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: render_async
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.1.1
 platform: ruby
 authors:
 - Kasper Grubbe
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-05-06 00:00:00.000000000 Z
+date: 2019-08-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -101,7 +101,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.14
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: Render parts of the page asynchronously with AJAX