From 140e73bc826a4c36c6f9370bc38d5d7adf9699e5 Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Fri, 9 Jun 2017 22:06:38 +0900
Subject: [PATCH] Check ready state of document in public pages (#3652)

* Check ready state of document in public pages

* add check interactive
---
 app/javascript/packs/public.js | 40 +++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 0e66108bf..4c0a3d693 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -10,7 +10,7 @@ require.context('../images/', true);
 const { localeData } = getLocale();
 localeData.forEach(IntlRelativeFormat.__addLocaleData);
 
-function main() {
+function loaded() {
   const locale = document.documentElement.lang;
   const dateTimeFormat = new Intl.DateTimeFormat(locale, {
     year: 'numeric',
@@ -21,24 +21,30 @@ function main() {
   });
   const relativeFormat = new IntlRelativeFormat(locale);
 
-  document.addEventListener('DOMContentLoaded', () => {
-    [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
-      content.innerHTML = emojify(content.innerHTML);
-    });
-
-    [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
-      const datetime = new Date(content.getAttribute('datetime'));
-      const formattedDate = dateTimeFormat.format(datetime);
-      content.title = formattedDate;
-      content.textContent = formattedDate;
-    });
-
-    [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
-      const datetime = new Date(content.getAttribute('datetime'));
-      content.textContent = relativeFormat.format(datetime);;
-    });
+  [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
+    content.innerHTML = emojify(content.innerHTML);
   });
 
+  [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
+    const datetime = new Date(content.getAttribute('datetime'));
+    const formattedDate = dateTimeFormat.format(datetime);
+    content.title = formattedDate;
+    content.textContent = formattedDate;
+  });
+
+  [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
+    const datetime = new Date(content.getAttribute('datetime'));
+    content.textContent = relativeFormat.format(datetime);;
+  });
+}
+
+function main() {
+  if (['interactive', 'complete'].includes(document.readyState)) {
+    loaded();
+  } else {
+    document.addEventListener('DOMContentLoaded', loaded);
+  }
+
   delegate(document, '.video-player video', 'click', ({ target }) => {
     if (target.paused) {
       target.play();