render_async 2.1.4 → 2.1.9

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

@@ -5,38 +5,32 @@
   <%= placeholder %>
 </<%= html_element_name %>>
 
-<% content_for :render_async do %>
+<% content_for content_for_name do %>
   <%= javascript_tag html_options do %>
+    <% locals = { container_id: container_id,
+                  replace_container: replace_container,
+                  path: path,
+                  method: method,
+                  data: data,
+                  event_name: event_name,
+                  toggle: toggle,
+                  headers: headers,
+                  error_message: error_message,
+                  error_event_name: error_event_name,
+                  retry_count: retry_count,
+                  retry_delay: retry_delay,
+                  interval: interval,
+                  turbolinks: RenderAsync.configuration.turbolinks,
+                  turbo: RenderAsync.configuration.turbo} %>
+
     <% if RenderAsync.configuration.jquery %>
       <%= render partial: 'render_async/request_jquery',
                  formats: [:js],
-                 locals:  { container_id: container_id,
-                            path: path,
-                            method: method,
-                            data: data,
-                            event_name: event_name,
-                            toggle: toggle,
-                            headers: headers,
-                            error_message: error_message,
-                            error_event_name: error_event_name,
-                            retry_count: retry_count,
-                            interval: interval,
-                            turbolinks: RenderAsync.configuration.turbolinks } %>
+                 locals:  locals %>
     <% else %>
       <%= render partial: 'render_async/request_vanilla',
                  formats: [:js],
-                 locals:  { container_id: container_id,
-                            path: path,
-                            method: method,
-                            data: data,
-                            event_name: event_name,
-                            toggle: toggle,
-                            headers: headers,
-                            error_message: error_message,
-                            error_event_name: error_event_name,
-                            retry_count: retry_count,
-                            interval: interval,
-                            turbolinks: RenderAsync.configuration.turbolinks } %>
+                 locals:  locals %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -5,8 +5,39 @@ if (window.jQuery) {
       return;
     }
     <% end %>
+    <% if turbo %>
+    if (document.documentElement.hasAttribute("data-turbo-preview")) {
+      return;
+    }
+    <% end %>
+    function createEvent(name, container) {
+      var event = undefined;
+      if (typeof(Event) === 'function') {
+        event = new Event(name);
+      } else {
+        event = document.createEvent('Event');
+        event.initEvent(name, true, true);
+      }
+      event.container = container
+      return event;
+    }
+
+    function _runAfterDocumentLoaded(callback) {
+      if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        // Handle a case where nested partials get loaded after the document loads
+        callback();
+      } else {
+        <% if turbolinks %>
+        $(document).one('turbolinks:load', callback);
+        <% elsif turbo %>
+        $(document).one('turbo:load', callback);
+        <% else %>
+        $(document).ready(callback);
+        <% end %>
+      }
+    }
 
-    var _makeRequest = function(currentRetryCount) {
+    function _makeRequest(currentRetryCount) {
       var headers = <%= headers.to_json.html_safe %>;
       var csrfTokenElement = document.querySelector('meta[name="csrf-token"]')
       if (csrfTokenElement)
@@ -18,21 +49,19 @@ if (window.jQuery) {
         data: "<%= escape_javascript(data.to_s.html_safe) %>",
         headers: headers
       }).done(function(response) {
-        <% if interval %>
-          $("#<%= container_id %>").empty();
-          $("#<%= container_id %>").append(response);
+        var container = $("#<%= container_id %>");
+        <% if !interval && replace_container %>
+          container.replaceWith(response);
         <% else %>
-          $("#<%= container_id %>").replaceWith(response);
+          container.empty();
+          container.append(response);
         <% end %>
 
+        var loadEvent = createEvent('render_async_load', container);
+        document.dispatchEvent(loadEvent);
+
         <% if event_name.present? %>
-          var event = undefined;
-          if (typeof(Event) === 'function') {
-            event = new Event("<%= event_name %>");
-          } else {
-            event = document.createEvent('Event');
-            event.initEvent('<%= event_name %>', true, true);
-          }
+          var event = createEvent("<%= event_name %>", container)
           document.dispatchEvent(event);
         <% end %>
       }).fail(function(response) {
@@ -43,64 +72,114 @@ if (window.jQuery) {
 
         if (skipErrorMessage) return;
 
-        $("#<%= container_id %>").replaceWith("<%= error_message.try(:html_safe) %>");
+        var container = $("#<%= container_id %>");
+        container.replaceWith("<%= error_message.try(:html_safe) %>");
 
-        <% if error_event_name.present? %>
-          var event = undefined;
-          if (typeof(Event) === 'function') {
-            event = new Event("<%= error_event_name %>");
-          } else {
-            event = document.createEvent('Event');
-            event.initEvent('<%= error_event_name %>', true, true);
-          }
-          document.dispatchEvent(event);
-        <% end %>
+        var errorEvent = createEvent(
+          "<%= error_event_name || 'render_async_error' %>",
+          container
+        )
+        errorEvent.retryCount = currentRetryCount
+
+        document.dispatchEvent(errorEvent);
       });
     };
 
     <% if retry_count > 0 %>
-    var retry = function(currentRetryCount) {
+    var _retryMakeRequest = _makeRequest
+
+    <% if retry_delay %>
+    _retryMakeRequest = function(currentRetryCount) {
+      setTimeout(function() {
+        _makeRequest(currentRetryCount)
+      }, <%= retry_delay %>)
+    }
+    <% end %>
+
+    function retry(currentRetryCount) {
       if (typeof(currentRetryCount) === 'number') {
         if (currentRetryCount >= <%= retry_count %>)
           return false;
 
-        _makeRequest(currentRetryCount + 1);
+        _retryMakeRequest(currentRetryCount + 1);
         return true;
       }
 
-      _makeRequest(1);
+      _retryMakeRequest(1);
       return true;
     }
     <% end %>
 
     var _renderAsyncFunction = _makeRequest;
 
-    <% if interval %>
     var _interval;
+    <% if interval %>
     var _renderAsyncFunction = function() {
+      // If interval is already set, return
+      if (typeof(_interval) === 'number') return
+
       _makeRequest();
       _interval = setInterval(_makeRequest, <%= interval %>);
     }
-    <% end %>
 
-    <% if toggle %>
-    $(document).<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {
-      event.preventDefault();
-      if (typeof(_interval) === 'number') {
-        clearInterval(_interval);
+    var _clearRenderAsyncInterval = function() {
+      if (typeof(_interval) === 'number'){
+        clearInterval(_interval)
         _interval = undefined;
-      } else {
-        _renderAsyncFunction();
       }
-    });
+    }
+
+    function _setUpControlEvents() {
+      var container = $("#<%= container_id %>");
+
+      // Register a stop polling event on the container
+      $(container).on('async-stop', _clearRenderAsyncInterval)
+
+      // Register a start polling event on the container
+      $(container).on('async-start', _renderAsyncFunction)
+    }
+
+    _runAfterDocumentLoaded(_setUpControlEvents)
+
+    <% if turbolinks %>
+    $(document).one('turbolinks:visit', _clearRenderAsyncInterval);
+    <% end %>
+    <% if turbo %>
+    $(document).one('turbo:visit', _clearRenderAsyncInterval);
     <% end %>
+    <% end %>
+
+    <% if !replace_container %>
+    function _setUpRefreshEvent() {
+      var container = $("#<%= container_id %>");
+
+      $(container).on('refresh', _renderAsyncFunction)
+    }
+
+    _runAfterDocumentLoaded(_setUpRefreshEvent)
+    <% end %>
+
+    <% if toggle %>
+    function _setUpToggle() {
+      $(document).<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {
+        if (typeof(_interval) === 'number') {
+          clearInterval(_interval);
+          _interval = undefined;
+        } else {
+          _renderAsyncFunction();
+        }
+      });
+
+      <% if toggle[:start] %>
+      _renderAsyncFunction()
+      <% end %>
+    }
 
-    <% if turbolinks && !toggle %>
-    $(document).one('turbolinks:load', _renderAsyncFunction);
+    _runAfterDocumentLoaded(_setUpToggle);
     <% elsif !toggle %>
-    $(document).ready(_renderAsyncFunction);
+    _runAfterDocumentLoaded(_renderAsyncFunction)
     <% end %>
   }(jQuery));
 } else {
-  console.warn("Looks like you've enabled jQuery for render_async, but jQuery is not defined");
+  console.warn("Looks like you've enabled jQuery for render_async, but jQuery is not defined on the window object");
 };

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

@@ -4,8 +4,40 @@
     return;
   }
   <% end %>
+  <% if turbo %>
+  if (document.documentElement.hasAttribute("data-turbo-preview")) {
+    return;
+  }
+  <% end %>
+  function createEvent(name, container) {
+    var event = undefined;
+    if (typeof(Event) === 'function') {
+      event = new Event(name);
+    } else {
+      event = document.createEvent('Event');
+      event.initEvent(name, true, true);
+    }
+    event.container = container
+    return event;
+  }
+
+  function _runAfterDocumentLoaded(callback) {
+    <% if turbolinks %>
+    document.addEventListener("turbolinks:load", function(e) {
+      e.target.removeEventListener(e.type, arguments.callee);
+      callback();
+    });
+    <% elsif turbo %>
+    document.addEventListener("turbo:load", function(e) {
+      e.target.removeEventListener(e.type, arguments.callee);
+      callback();
+    });
+    <% else %>
+    document.addEventListener("DOMContentLoaded", callback);
+    <% end %>
+  }
 
-  var _makeRequest = function(currentRetryCount) {
+  function _makeRequest(currentRetryCount) {
     var request = new XMLHttpRequest();
     var asyncRequest = true;
     var SUCCESS = 200;
@@ -22,24 +54,23 @@
       request.setRequestHeader(key, headers[key]);
     });
 
+    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+
     request.onreadystatechange = function() {
       if (request.readyState === 4) {
         if (request.status >= SUCCESS && request.status < ERROR) {
           var container = document.getElementById('<%= container_id %>');
-          <% if interval %>
-          container.innerHTML = request.response;
-          <% else %>
+          <% if !interval && replace_container %>
           container.outerHTML = request.response;
+          <% else %>
+          container.innerHTML = request.response;
           <% end %>
 
+          var loadEvent = createEvent('render_async_load', container);
+          document.dispatchEvent(loadEvent);
+
           <% if event_name.present? %>
-            var event = undefined;
-            if (typeof(Event) === 'function') {
-              event = new Event("<%= event_name %>");
-            } else {
-              event = document.createEvent('Event');
-              event.initEvent('<%= event_name %>', true, true);
-            }
+            var event = createEvent('<%= event_name %>', container);
             document.dispatchEvent(event);
           <% end %>
         } else {
@@ -51,18 +82,15 @@
           if (skipErrorMessage) return;
 
           var container = document.getElementById('<%= container_id %>');
-          container.outerHTML = "<%= error_message.try(:html_safe) %>";
-
-          <% if error_event_name.present? %>
-            var event = undefined;
-            if (typeof(Event) === 'function') {
-              event = new Event("<%= error_event_name %>");
-            } else {
-              event = document.createEvent('Event');
-              event.initEvent('<%= error_event_name %>', true, true);
-            }
-            document.dispatchEvent(event);
-          <% end %>
+          container.outerHTML = '<%= error_message.try(:html_safe) %>';
+
+          var errorEvent = createEvent(
+            "<%= error_event_name || 'render_async_error' %>",
+            container
+          );
+          errorEvent.retryCount = currentRetryCount
+
+          document.dispatchEvent(errorEvent);
         }
       }
     };
@@ -72,56 +100,104 @@
   };
 
   <% if retry_count > 0 %>
-  var retry = function(currentRetryCount) {
+
+  <% if retry_delay %>
+  _retryMakeRequest = function(currentRetryCount) {
+    setTimeout(function() {
+      _makeRequest(currentRetryCount)
+    }, <%= retry_delay %>)
+  }
+  <% end %>
+
+  function retry(currentRetryCount) {
     if (typeof(currentRetryCount) === 'number') {
       if (currentRetryCount >= <%= retry_count %>)
         return false;
 
-      _makeRequest(currentRetryCount + 1);
+      _retryMakeRequest(currentRetryCount + 1);
       return true;
     }
 
-    _makeRequest(1);
+    _retryMakeRequest(1);
     return true;
   }
   <% end %>
 
   var _renderAsyncFunction = _makeRequest;
 
-  <% if interval %>
   var _interval;
+  <% if interval %>
   var _renderAsyncFunction = function() {
+    // If interval is already set, return
+    if (typeof(_interval) === 'number') return
+
     _makeRequest();
     _interval = setInterval(_makeRequest, <%= interval %>);
   }
-  <% end %>
 
-  <% if toggle %>
-  var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
-  var handler = function(event) {
-    event.preventDefault();
-    if (typeof(_interval) === 'number') {
-      clearInterval(_interval);
+  var _clearRenderAsyncInterval = function() {
+    if (typeof(_interval) === 'number'){
+      clearInterval(_interval)
       _interval = undefined;
-    } else {
-      _renderAsyncFunction();
     }
-    <% if toggle[:once] %>
-    this.removeEventListener(event.type, handler);
-    <% end %>
-  };
+  }
+
+  function _setUpControlEvents() {
+    var container = document.getElementById('<%= container_id %>');
+
+    // Register a polling stop event on the container
+    container.addEventListener("async-stop", _clearRenderAsyncInterval)
+
+    // Register a start polling event on the container
+    container.addEventListener("async-start", _renderAsyncFunction)
+  }
+
+  _runAfterDocumentLoaded(_setUpControlEvents)
+
+  <% if turbolinks %>
+  document.addEventListener("turbolinks:visit", _clearRenderAsyncInterval)
+  <% end %>
+  <% if turbo %>
+  document.addEventListener("turbo:visit", _clearRenderAsyncInterval)
+  <% end %>
+  <% end %>
 
-  [...selectors].forEach(function(selector) {
-    selector.addEventListener('<%= toggle[:event] || 'click' %>', handler)
-  });
+  <% if !replace_container %>
+  function _setUpRefreshEvent() {
+    var container = document.getElementById('<%= container_id %>');
+
+    container.addEventListener('refresh', _renderAsyncFunction)
+  }
+
+  _runAfterDocumentLoaded(_setUpRefreshEvent)
   <% end %>
 
-  <% if turbolinks && !toggle %>
-  document.addEventListener("turbolinks:load", function (e) {
-    e.target.removeEventListener(e.type, arguments.callee);
-    _renderAsyncFunction();
-  });
+  <% if toggle %>
+  function _setUpToggle() {
+    var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
+    var handler = function(event) {
+      if (typeof(_interval) === 'number') {
+        clearInterval(_interval);
+        _interval = undefined;
+      } else {
+        _renderAsyncFunction();
+      }
+      <% if toggle[:once] %>
+      this.removeEventListener(event.type, handler);
+      <% end %>
+    };
+
+    <% if toggle[:start] %>
+    _renderAsyncFunction()
+    <% end %>
+
+    for (var i = 0; i < selectors.length; ++i) {
+      selectors[i].addEventListener('<%= toggle[:event] || 'click' %>', handler)
+    }
+  }
+
+  _runAfterDocumentLoaded(_setUpToggle);
   <% elsif !toggle %>
-  document.addEventListener("DOMContentLoaded", _renderAsyncFunction);
+  _runAfterDocumentLoaded(_renderAsyncFunction);
   <% end %>
 })();