Merge pull request #232 from H2-invent/feature/tailwind-redesign

Merge feature/tailwind redesign into development

assets/app.js

@@ -0,0 +1,32 @@
+import './bootstrap.js';
+import "trix";
+import './scripts/tailmater.js';
+import './scripts/datatables.js';
+
+import 'trix/dist/trix.css';
+import './styles/materialDesignIcons.css';
+import './styles/tailmater.css';
+import './styles/colors.css';
+import './styles/dataTablesTailwind.css';
+import './styles/dataTablesApp.css';
+import './styles/app.css';
+
+import $ from 'jquery';
+global.$ = global.jQuery = $;
+import {initFreeFields} from "./scripts/freeField";
+
+document.getElementById('snackbar-trigger')?.click();
+
+(function() {
+    addEventListener("trix-initialize", function(e) {
+        const file_tools = document.querySelector(".trix-button-group--file-tools");
+        file_tools?.remove();
+    })
+    addEventListener("trix-file-accept", function(e) {
+        e.preventDefault();
+    })
+})();
+
+$(document).ready(function() {
+    initFreeFields();
+});

assets/bootstrap.js

@@ -0,0 +1,10 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.[jt]sx?$/
+));
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/appUi_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    connect() {
+        this.initTabs();
+        this.initClickListeners();
+    }
+
+    initClickListeners() {
+        const selectorConfirm = '.text-danger, .btn-danger, .btw-warning, [data-click-confirm]';
+        Array.prototype.forEach.call(document.querySelectorAll(selectorConfirm), function (element) {
+            element.addEventListener('click', function(event) {
+                if (confirm(window.translations.confirmAction)) {
+                    return true;
+                }
+                event.preventDefault();
+                return false;
+            });
+        });
+    }
+
+    initTabs() {
+        self = this;
+        Array.prototype.forEach.call(document.querySelectorAll('[data-type="tabs"]'), function (element) {
+            element.addEventListener('click', function(event) {
+                event.preventDefault();
+                //window.location.hash = self.getAttributeFromElementOrParents(event.target, 'data-target');
+                history.replaceState(null, null, self.getAttributeFromElementOrParents(event.target, 'data-target'));
+            });
+        });
+        if (document.location.toString().match('#')) {
+            document.querySelector('[data-target="#' + document.location.toString().split('#')[1] + '"]')?.click();
+        }
+    }
+
+    loadContentModal(event) {
+        event.preventDefault();
+        const url = event.target.getAttribute('href');
+        const modal = document.getElementById('modal-remote-content');
+        const contentContainer = modal.querySelector('.modal-inner');
+        contentContainer.innerHTML = '<p class="p-10 italic">Loading ...</p>'
+
+        fetch(url)
+            .then(response => response.text())
+            .then(data => { contentContainer.innerHTML = data; })
+            .catch(error => console.error(error));
+    }
+
+    getAttributeFromElementOrParents(element, attribute, i = 1) {
+        if (5 == i) { // max 5 recursive calls
+            return null;
+        }
+
+        if (element.getAttribute(attribute)) {
+            return element.getAttribute(attribute);
+        } else if (element.parentNode) {
+            return this.getAttributeFromElementOrParents(element.parentNode, attribute, ++i);
+        }
+
+        return null;
+    }
+
+    toggle(event) {
+        event.preventDefault();
+        const containerShow = document.getElementById(this.getAttributeFromElementOrParents(event.target, 'data-show'));
+        const containerHide = document.getElementById(this.getAttributeFromElementOrParents(event.target, 'data-hide'));
+        const containerToggle = document.getElementById(this.getAttributeFromElementOrParents(event.target, 'data-toggle'));
+        containerShow?.classList.remove('hidden');
+        containerHide?.classList.add('hidden');
+        containerToggle?.classList.toggle('hidden');
+    }
+}

assets/controllers/questionnaire_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    answer() {
+        const self = this;
+        let disabledButton = true;
+
+        Array.prototype.forEach.call(document.querySelectorAll('input[type=checkbox], input[type=radio]'), function (element) {
+            console.log(element.checked);
+            if (element.checked) {
+                disabledButton = false;
+            }
+        });
+
+        if (disabledButton) {
+            document.getElementById('dynamic_question_continue').setAttribute('disabled', 'disabled');
+        } else {
+            document.getElementById('dynamic_question_continue').removeAttribute('disabled');
+        }
+    }
+}