Use bootstrap-icons; refactor some JS

assets/app.js

@@ -6,19 +6,6 @@ import './bootstrap.js';
  * which should already be in your base.html.twig.
  */
 import './styles/app.css';
-import UI from './ui.js';
-import BIM from './bim.js';
+import API_CONFIG from "./config.js";
 
-document.addEventListener('DOMContentLoaded', () => {
-    const container = document.querySelector('#scene');
-    UI.setScene(container);
-    const model = UI.ifcLoader(container);
-    container.ondblclick = () => BIM.activateClipper();
-    container.onkeydown = event => {
-        if (event.code === 'Delete' || event.code === 'Backspace') {
-            BIM.deleteClipper();
-        }
-    }
-});
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
+window.API_CONFIG = API_CONFIG;

assets/controllers/form_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus"
-import API_CONFIG from "../config.js";
 
 /**
  * @todo Handle errors
@@ -12,7 +11,7 @@ export default class extends Controller {
         'buildingForm'
     ];
 
-    API_BASE = API_CONFIG.dev;
+    API_BASE = window.API_CONFIG.dev;
 
     async submit(event) {
         event.preventDefault();

assets/controllers/hello_controller.js

@@ -1,16 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
- * This is an example Stimulus controller!
- *
- * Any element with a data-controller="hello" attribute will cause
- * this controller to be executed. The name "hello" comes from the filename:
- * hello_controller.js -> "hello"
- *
- * Delete this file or adapt it for your use!
- */
-export default class extends Controller {
-    connect() {
-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
-    }
-}

assets/controllers/scene_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus';
+import UI from '../ui.js';
+import BIM from '../bim.js';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    static targets = ['scene'];
+
+    connect() {
+    }
+
+    /**
+     * 
+     * @param {Element} container 
+     */
+    sceneTargetConnected(container) {
+        UI.setScene(container);
+        const model = UI.ifcLoader(container);
+        container.ondblclick = () => BIM.activateClipper();
+        container.onkeydown = event => {
+            console.log(event);
+            if (event.code === 'Delete' || event.code === 'Backspace') {
+                BIM.deleteClipper();
+            }
+        }
+    }
+
+    /**
+     * 
+     * @param {Event} event 
+     */
+    keyboard(event) {
+        console.log(event);
+    }
+}

assets/main.js

@@ -1,26 +0,0 @@
-'use strict';
-
-import UI from './ui.js';
-import BIM from './bim.js';
-import { Application } from '@hotwired/stimulus';
-import FormController from './controllers/form_controller.js';
-
-document.addEventListener('DOMContentLoaded', () => {
-    // Register Stimulus controllers
-    initStimulus();
-
-    const container = document.querySelector('#scene');
-    UI.setScene(container);
-    const model = UI.ifcLoader(container);
-    container.ondblclick = () => BIM.activateClipper();
-    container.onkeydown = event => {
-        if (event.code === 'Delete' || event.code === 'Backspace') {
-            BIM.deleteClipper();
-        }
-    }
-});
-
-function initStimulus() {
-    window.Stimulus = Application.start();
-    Stimulus.register('form', FormController);
-}

assets/styles/app.css

@@ -1,4 +1,4 @@
-@import url('../vendor/fontawesome-free/css/all.min.css');
+@import url('../vendor/bootstrap-icons/font/bootstrap-icons.min.css');
 @import url('../vendor/bulma/css/bulma.min.css');
 
 #scene {