Extract inline JS on embedded comments (#6645)

Extract inline JS on embedded comments (#6645)

  • use the meta refresh tag instead

  • extract inline JS in embedded comment

From 80398d0b8f247459aefee06767f257c5d6fc5846 Mon Sep 17 00:00:00 2001
From: Kyle Zhao <kzhao.sw@gmail.com>
Date: Thu, 22 Nov 2018 10:02:58 -0500
Subject: [PATCH] Extract inline JS on embedded comments (#6645)

* use the meta refresh tag instead

* extract inline JS in embedded comment

diff --git a/app/assets/javascripts/embed-application.js.no-module.es6 b/app/assets/javascripts/embed-application.js.no-module.es6
new file mode 100644
index 0000000..f8d9c08
--- /dev/null
+++ b/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();
+      }
+    }
+  };
+})();
diff --git a/app/views/embed/loading.html.erb b/app/views/embed/loading.html.erb
index f2ecf83..630b99c 100644
--- a/app/views/embed/loading.html.erb
+++ b/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>
diff --git a/app/views/layouts/embed.html.erb b/app/views/layouts/embed.html.erb
index 8f91159..d1cf2be 100644
--- a/app/views/layouts/embed.html.erb
+++ b/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 %>
diff --git a/config/application.rb b/config/application.rb
index f452dab..a4405ec 100644
--- a/config/application.rb
+++ b/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

GitHub

We prefer to use let/const over var. let presents less surprises because it is scoped locally to the block or statement that it is defined in.

1 Like

O just realized this was extracted from the previous code. No worries about this then.

:+1: :heart:

1 Like