[Option] Add toggle selector and event for load

tristang · Jul 5, 2019 · c8ffb58 · c8ffb58
1 parent 41c6821
commit c8ffb58
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/app/views/render_async/_render_async.html.erb b/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,

diff --git a/app/views/render_async/_request_jquery.js.erb b/app/views/render_async/_request_jquery.js.erb
@@ -81,6 +81,11 @@ if (window.jQuery) {
       setInterval(_listener, <%= interval %>);
     }
     $(document).ready(_intervalFunction);
+    <% elsif toggle %>
+    $(document).on('<%= toggle[:event] %>', '<%= toggle[:selector]%>', function(event) {
+      event.preventDefault();
+      _listener();
+    });
     <% else %>
     $(document).ready(_listener);
     <% end %>

diff --git a/app/views/render_async/_request_vanilla.js.erb b/app/views/render_async/_request_vanilla.js.erb
@@ -4,7 +4,7 @@
     return;
   }
   <% end %>
-  
+
   var _listener = function(currentRetryCount) {
     var request = new XMLHttpRequest();
     var asyncRequest = true;
@@ -97,6 +97,12 @@
     setInterval(_listener, <%= interval %>);
   }
   document.addEventListener("DOMContentLoaded", _intervalFunction);
+  <% elsif toggle %>
+  var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
+  selectors.forEach(selector => selector.addEventListener('<%= toggle[:event] %>', function(event) {
+    event.preventDefault();
+    _listener();
+  }));
   <% else %>
   document.addEventListener("DOMContentLoaded", _listener);
   <% end %>

diff --git a/lib/render_async/view_helper.rb b/lib/render_async/view_helper.rb
@@ -22,6 +22,7 @@ def render_async(path, options = {}, &placeholder)
       container_id = options.delete(:container_id) || generate_container_id
       container_class = options.delete(:container_class)
       event_name = options.delete(:event_name)
+      toggle = options.delete(:toggle)
       placeholder = capture(&placeholder) if block_given?
       method = options.delete(:method) || 'GET'
       data = options.delete(:data)
@@ -37,6 +38,7 @@ def render_async(path, options = {}, &placeholder)
                                           path: path,
                                           html_options: options,
                                           event_name: event_name,
+                                          toggle: toggle,
                                           placeholder: placeholder,
                                           method: method,
                                           data: data,