Inherit all stimulus controllers from base_controller

app/javascript/controllers/base_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    selfHosted: Boolean
+  }
+
+  // Every controller that extends BaseController and uses initialize()
+  // should call super.initialize()
+  // Example:
+  // export default class extends BaseController {
+  //   initialize() {
+  //     super.initialize()
+  //   }
+  // }
+  initialize() {
+    // Get the self-hosted value from the HTML root element
+    if (!this.hasSelfHostedValue) {
+      const selfHosted = document.documentElement.dataset.selfHosted === 'true'
+      this.selfHostedValue = selfHosted
+    }
+  }
+}

app/javascript/controllers/checkbox_select_all_controller.js

@@ -1,7 +1,7 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseController from "./base_controller"
 
 // Connects to data-controller="checkbox-select-all"
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["parent", "child"]
 
   connect() {

app/javascript/controllers/datetime_controller.js

@@ -2,9 +2,9 @@
 // - trips/new
 // - trips/edit
 
-import { Controller } from "@hotwired/stimulus"
+import BaseController from "./base_controller"
 
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["startedAt", "endedAt", "apiKey"]
   static values = { tripsId: String }
 

app/javascript/controllers/imports_controller.js

@@ -1,7 +1,7 @@
-import { Controller } from "@hotwired/stimulus";
+import BaseController from "./base_controller";
 import consumer from "../channels/consumer";
 
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["index"];
 
   connect() {

app/javascript/controllers/map_preview_controller.js

@@ -1,8 +1,8 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseController from "./base_controller"
 import L from "leaflet"
 import { showFlashMessage } from "../maps/helpers"
 
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["urlInput", "mapContainer", "saveButton"]
 
   DEFAULT_TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'

app/javascript/controllers/maps_controller.js

@@ -13,7 +13,7 @@ import {
 
 import { fetchAndDrawAreas, handleAreaCreated } from "../maps/areas";
 
-import { showFlashMessage, fetchAndDisplayPhotos, debounce } from "../maps/helpers";
+import { showFlashMessage, fetchAndDisplayPhotos } from "../maps/helpers";
 
 import {
   osmMapLayer,
@@ -31,8 +31,9 @@ import { countryCodesMap } from "../maps/country_codes";
 import "leaflet-draw";
 import { initializeFogCanvas, drawFogCanvas, createFogOverlay } from "../maps/fog_of_war";
 import { TileMonitor } from "../maps/tile_monitor";
+import BaseController from "./base_controller";
 
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["container"];
 
   settingsButtonAdded = false;
@@ -41,6 +42,7 @@ export default class extends Controller {
   trackedMonthsCache = null;
 
   connect() {
+    super.connect();
     console.log("Map controller connected");
 
     this.apiKey = this.element.dataset.api_key;

app/javascript/controllers/notifications_controller.js

@@ -1,11 +1,12 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseController from "./base_controller"
 import consumer from "../channels/consumer"
 
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["badge", "list"]
   static values = { userId: Number }
 
   initialize() {
+    super.initialize()
     this.subscription = null
   }
 

app/javascript/controllers/removals_controller.js

@@ -1,6 +1,6 @@
-import { Controller } from "@hotwired/stimulus"
+import BaseController from "./base_controller"
 
-export default class extends Controller {
+export default class extends BaseController {
   static values = {
     timeout: Number
   }

app/javascript/controllers/trip_map_controller.js

@@ -1,10 +1,10 @@
 // This controller is being used on:
 // - trips/index
 
-import { Controller } from "@hotwired/stimulus"
+import BaseController from "./base_controller"
 import L from "leaflet"
 
-export default class extends Controller {
+export default class extends BaseController {
   static values = {
     tripId: Number,
     path: String,

app/javascript/controllers/trips_controller.js

@@ -3,7 +3,7 @@
 // - trips/edit
 // - trips/new
 
-import { Controller } from "@hotwired/stimulus"
+import BaseController from "./base_controller"
 import L from "leaflet"
 import {
   osmMapLayer,
@@ -22,7 +22,7 @@ import {
   showFlashMessage
 } from '../maps/helpers';
 
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["container", "startedAt", "endedAt"]
   static values = { }
 

app/javascript/controllers/visit_modal_map_controller.js

@@ -1,12 +1,12 @@
-import { Controller } from "@hotwired/stimulus"
-import L, { latLng } from "leaflet";
-import { osmMapLayer } from "../maps/layers";
+import BaseController from "./base_controller"
+import L from "leaflet"
+import { osmMapLayer } from "../maps/layers"
 
 // This controller is used to display a map of all coordinates for a visit
 // on the "Map" modal of a visit on the Visits page
 
-export default class extends Controller {
-  static targets = ["container"];
+export default class extends BaseController {
+  static targets = ["container"]
 
   connect() {
     this.coordinates = JSON.parse(this.element.dataset.coordinates);

app/javascript/controllers/visit_modal_places_controller.js

@@ -1,10 +1,13 @@
-import { Controller } from "@hotwired/stimulus";
+import BaseController from "./base_controller"
 
-export default class extends Controller {
+export default class extends BaseController {
+  static targets = ["name", "input"]
 
   connect() {
-    this.visitId = this.element.dataset.id;
     this.apiKey = this.element.dataset.api_key;
+    this.visitId = this.element.dataset.id;
+
+    this.element.addEventListener("visit-name:updated", this.updateAll.bind(this));
   }
 
   // Action to handle selection change

app/javascript/controllers/visit_name_controller.js

@@ -1,7 +1,7 @@
-import { Controller } from "@hotwired/stimulus";
+import BaseController from "./base_controller"
 
 // This controller is used to handle the updating of visit names on the Visits page
-export default class extends Controller {
+export default class extends BaseController {
   static targets = ["name", "input"];
 
   connect() {