add polyfills and load header via content-loader

2 files changed, 36 insertions, 0 deletions

diff --git a/app/javascript/controllers/content_loader_controller.js b/app/javascript/controllers/content_loader_controller.js
new file mode 100644
index 0000000..37e51df
--- /dev/null
+++ b/app/javascript/controllers/content_loader_controller.js
@@ -0,0 +1,35 @@
+import ApplicationController from './application_controller';
+
+export default class extends ApplicationController {
+  connect() {
+    this.load()
+
+    if (this.data.has("refreshInterval")) {
+      this.startRefreshing()
+    }
+  }
+
+  disconnect() {
+    this.stopRefreshing()
+  }
+
+  load() {
+    fetch(this.data.get("url"))
+      .then(response => response.text())
+      .then(html => {
+        this.element.innerHTML = html
+      })
+  }
+
+  startRefreshing() {
+    this.refreshTimer = setInterval(() => {
+      this.load()
+    }, this.data.get("refreshInterval"))
+  }
+
+  stopRefreshing() {
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer)
+    }
+  }
+}
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 17941bd..29d1d2e 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -7,6 +7,7 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
+import "@stimulus/polyfills"
 import { Application } from 'stimulus';
 import { definitionsFromContext } from 'stimulus/webpack-helpers';
 import LocalTime from 'local-time';