add stop polling event

nikolalsvk · Jul 5, 2020 · 5e4f27f · 5e4f27f
1 parent ca86ebb
commit 5e4f27f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -320,7 +320,6 @@ request has been completed. You can achieve this behaviour with something like t
   <a href='#' id='comments-button'>Load comments</a>
 <% end %>
 ```
-
 Also, you can mix interval and toggle features. This way, you can turn polling
 on, and off by clicking the "Load comments" button. In order to do this, you need to
 pass `toggle` and `interval` arguments to `render_async` call like this:
@@ -343,6 +342,9 @@ You are telling `render_async` to fetch comments_path every 5 seconds.
 
 This can be handy if you want to enable polling for a specific URL.
 
+Polling may be stopped by sending the `async-stop` event to the container element. 
+Polling may be started by sending the `async-start` event to the container element.
+
 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

diff --git a/app/views/render_async/_request_jquery.js.erb b/app/views/render_async/_request_jquery.js.erb
@@ -98,19 +98,32 @@ if (window.jQuery) {
 
     var _interval;
     <% if interval %>
-    var _renderAsyncFunction = function() {
-      _makeRequest();
-      _interval = setInterval(_makeRequest, <%= interval %>);
-    }
-
-    <% if turbolinks %>
-    $(document).one('turbolinks:visit', function() {
-      if (typeof(_interval) === 'number') {
-        clearInterval(_interval)
-        _interval = undefined;
+      var _renderAsyncFunction = function() {
+        _makeRequest();
+        _interval = setInterval(_makeRequest, <%= interval %>);
       }
-    });
-    <% end %>
+
+      // Register a stop polling event on the container
+      var container = $("#<%= container_id %>");
+      $(container).on('async-stop', function(event){
+        if (typeof(_interval) === 'number'){
+          clearInterval(_interval)
+          _interval = undefined;
+        }
+      });
+      // Register a start polling event on the container
+      $(container).on('async-start', function(event){
+        _renderAsyncFunction();
+      });
+
+      <% if turbolinks %>
+      $(document).one('turbolinks:visit', function() {
+        if (typeof(_interval) === 'number') {
+          clearInterval(_interval)
+          _interval = undefined;
+        }
+      });
+      <% end %>
     <% end %>
 
     <% if toggle %>
@@ -125,8 +138,7 @@ if (window.jQuery) {
       });
     }
 
-    // DVB _runAfterDocumentLoaded(_setUpToggle);
-    _setUpToggle();
+    _runAfterDocumentLoaded(_setUpToggle);
     <% elsif !toggle %>
     _runAfterDocumentLoaded(_renderAsyncFunction)
     <% end %>

diff --git a/app/views/render_async/_request_vanilla.js.erb b/app/views/render_async/_request_vanilla.js.erb
@@ -108,19 +108,32 @@
 
   var _interval;
   <% if interval %>
-  var _renderAsyncFunction = function() {
-    _makeRequest();
-    _interval = setInterval(_makeRequest, <%= interval %>);
-  }
-
-  <% if turbolinks %>
-  document.addEventListener("turbolinks:visit", function(e) {
-    if (typeof(_interval) === 'number') {
-      clearInterval(_interval);
-      _interval = undefined;
+    var _renderAsyncFunction = function() {
+      _makeRequest();
+      _interval = setInterval(_makeRequest, <%= interval %>);
     }
-  });
-  <% end %>
+
+    // Register a polling stop event on the container
+    var container = document.getElementById('<%= container_id %>');
+    container.addEventListener("async-stop", function(event){
+      if (typeof(_interval) === 'number'){
+        clearInterval(_interval)
+        _interval = undefined;
+      }
+    });
+    // Register a start polling event on the container
+    container.addEventListener("async-start", function(event){
+      _renderAsyncFunction();
+    });
+
+    <% if turbolinks %>
+    document.addEventListener("turbolinks:visit", function(e) {
+      if (typeof(_interval) === 'number') {
+        clearInterval(_interval);
+        _interval = undefined;
+      }
+    });
+    <% end %>
   <% end %>
 
   <% if toggle %>
@@ -143,8 +156,7 @@
     }
   }
 
-  // DVB _runAfterDocumentLoaded(_setUpToggle);
-  _setUpToggle();
+  _runAfterDocumentLoaded(_setUpToggle);
   <% elsif !toggle %>
   _runAfterDocumentLoaded(_renderAsyncFunction);
   <% end %>