Extract inline JS on embedded comments (#6645)

* use the meta refresh tag instead

* extract inline JS in embedded comment

app/assets/javascripts/embed-application.js.no-module.es6

@@ -0,0 +1,63 @@
+(function() {
+  const referer = document.getElementById("data-embedded").dataset.referer;
+
+  function postUp(msg) {
+    if (parent) {
+      parent.postMessage(msg, referer);
+    }
+  }
+
+  function clickPostLink(e) {
+    var postId = e.target.getAttribute("data-link-to-post");
+    if (postId) {
+      var postElement = document.getElementById("post-" + postId);
+      if (postElement) {
+        var rect = postElement.getBoundingClientRect();
+        if (rect && rect.top) {
+          postUp({ type: "discourse-scroll", top: rect.top });
+          e.preventDefault();
+          return false;
+        }
+      }
+    }
+  }
+
+  window.onload = function() {
+    // get state info from data attribute
+    var header = document.querySelector("header");
+    var state = "unknown";
+    if (header) {
+      state = header.getAttribute("data-embed-state");
+    }
+
+    // Send a post message with our loaded height and state
+    postUp({
+      type: "discourse-resize",
+      height: document["body"].offsetHeight,
+      state: state
+    });
+
+    var postLinks = document.querySelectorAll("a[data-link-to-post]"),
+      i;
+
+    for (i = 0; i < postLinks.length; i++) {
+      postLinks[i].onclick = clickPostLink;
+    }
+
+    // Make sure all links in the iframe point to _blank
+    var cookedLinks = document.querySelectorAll(".cooked a");
+    for (i = 0; i < cookedLinks.length; i++) {
+      cookedLinks[i].target = "_blank";
+    }
+
+    // Adjust all names
+    var names = document.querySelectorAll(".username a");
+    for (i = 0; i < names.length; i++) {
+      var username = names[i].innerHTML;
+      if (username) {
+        /* global BreakString */
+        names[i].innerHTML = new BreakString(username).break();
+      }
+    }
+  };
+})();

app/views/embed/loading.html.erb

@@ -1,12 +1,9 @@
+<% content_for :head do %>
+  <meta http-equiv="refresh" content="30">
+<% end %>
+
 <header class='discourse' data-embed-state='loading'>
   <h3><%= t 'embed.loading' %></h3>
   <%= link_to(image_tag(SiteSetting.site_logo_url, class: 'logo'), Discourse.base_url) %>
   <div class='clearfix'></div>
 </header>
-<script>
-  (function() {
-    setTimeout(function() {
-      document.location.reload();
-    }, 30000);
-  })();
-</script>

app/views/layouts/embed.html.erb

@@ -13,67 +13,10 @@
       <title><%= @topic_view.page_title %> - <%= SiteSetting.title %></title>
     <%- end %>
 
-    <script>
-      (function() {
+    <meta id="data-embedded" data-referer="<%= request.referer %>">
+    <%= preload_script 'embed-application' %>
 
-        function postUp(msg) {
-          if (parent) {
-            parent.postMessage(msg, '<%= request.referer %>');
-          }
-        }
-
-        function clickPostLink(e) {
-          var postId = e.target.getAttribute('data-link-to-post');
-          if (postId) {
-            var postElement = document.getElementById('post-' + postId);
-            if (postElement) {
-              var rect = postElement.getBoundingClientRect();
-              if (rect && rect.top) {
-                postUp({type: 'discourse-scroll', top: rect.top});
-                e.preventDefault();
-                return false;
-              }
-            }
-          }
-        }
-
-        window.onload = function() {
-          // get state info from data attribute
-          var header = document.querySelector('header');
-          var state = 'unknown';
-          if (header) {
-            state = header.getAttribute('data-embed-state');
-          }
-	  
-          // Send a post message with our loaded height and state
-          postUp({type: 'discourse-resize', height: document['body'].offsetHeight, state: state});
-
-          var postLinks = document.querySelectorAll("a[data-link-to-post]"),
-              i;
-
-          for (i=0; i<postLinks.length; i++) {
-            postLinks[i].onclick = clickPostLink;
-          }
-
-          // Make sure all links in the iframe point to _blank
-          var cookedLinks = document.querySelectorAll('.cooked a');
-          for (i=0; i<cookedLinks.length; i++) {
-            cookedLinks[i].target = "_blank";
-          }
-
-          // Adjust all names
-          var names = document.querySelectorAll('.username a');
-          for (i=0; i<names.length; i++) {
-            var username = names[i].innerHTML;
-            if (username) {
-              names[i].innerHTML = new BreakString(username).break();
-            }
-          }
-
-        };
-
-      })();
-    </script>
+    <%= yield :head %>
   </head>
   <body>
     <%= yield %>

config/application.rb

@@ -129,6 +129,7 @@ module Discourse
       auto-redirect.js
       wizard-start.js
       onpopstate-handler.js
+      embed-application.js
     }
 
     # Precompile all available locales