headmin 0.2.8 → 0.3.4

data/{src/js → app/assets/javascripts}/headmin/controllers/filter_controller.js

@@ -7,12 +7,22 @@ export default class extends Controller {
 
     // Attaches controller logic to the element itself
     // This allows calling controller methods from the element in other controllers
-    connect () {
+    connect() {
         this.element['controller'] = this
+
+        // Clicked outside popup
+        document.addEventListener('click', (event) => {
+            this.handleOutsideClick(event)
+        })
+    }
+
+    handleOutsideClick(event) {
+        if (!this.isClickedInside(event)) {
+            this.close()
+        }
     }
 
     toggle(event) {
-        event.preventDefault()
         const expanded = this.buttonTarget.getAttribute('aria-expanded') === 'true'
         if (expanded) {
             this.close(null)
@@ -27,10 +37,6 @@ export default class extends Controller {
     }
 
     close(event) {
-        if (this.isClickedInside(event)) {
-            event.preventDefault()
-            return
-        }
         this.buttonTarget.setAttribute('aria-expanded', 'false')
         this.popupTarget.classList.add('closed')
     }

data/{src/js → app/assets/javascripts}/headmin/controllers/flatpickr_controller.js

@@ -1,6 +1,7 @@
 import {Controller} from "@hotwired/stimulus"
 import flatpickr from "flatpickr";
-import {Dutch} from "flatpickr/dist/l10n/nl.js"
+import {Dutch} from "flatpickr/dist/esm/l10n/nl.js"
+import I18n from "../config/i18n";
 
 export default class extends Controller {
     static get targets() {

data/app/assets/javascripts/headmin/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello world"
+  }
+}

data/app/assets/javascripts/headmin/controllers/notification_controller.js

@@ -0,0 +1,8 @@
+import {Controller} from "@hotwired/stimulus"
+import {Toast} from "bootstrap";
+
+export default class extends Controller {
+    connect() {
+        new Toast(this.element, {})
+    }
+}

data/{src/js → app/assets/javascripts}/headmin/controllers/popup_controller.js

@@ -1,5 +1,4 @@
 import {Controller} from "@hotwired/stimulus"
-import Sortable from "sortablejs";
 import {createPopper} from '@popperjs/core';
 
 export default class extends Controller {

data/app/assets/javascripts/headmin/controllers/redactorx_controller.js

@@ -0,0 +1,13 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+    connect() {
+        if (typeof RedactorX == 'undefined') {
+            console.error("RedactorX is a paid module and is not included in Headmin. Please purchase it and import it as a JS module")
+            return false;
+        }
+
+        const options = JSON.parse(this.element.getAttribute('data-redactor-options'))
+        RedactorX(this.element, options);
+    }
+}

data/app/assets/javascripts/headmin/controllers/select_controller.js

@@ -0,0 +1,48 @@
+import {Controller} from "@hotwired/stimulus"
+import TomSelect from "tom-select";
+import I18n from "../config/i18n";
+
+export default class extends Controller {
+    connect() {
+        if (this.element.hasAttribute('multiple')) {
+            this.initTomSelect()
+        }
+    }
+
+    defaultOptions(locale) {
+        const defaultOptions = {
+            en: {
+                render: {
+                    option_create: function (data, escape) {
+                        return '<div class="create">Add <strong>' + escape(data.input) + '</strong>&hellip;</div>'
+                    },
+                    no_results: function (data, escape) {
+                        return '<div class="no-results">No results found</div>'
+                    }
+                }
+            },
+            nl: {
+                render: {
+                    option_create: function (data, escape) {
+                        return '<div class="create">Voeg <strong>' + escape(data.input) + '</strong> toe &hellip;</div>'
+                    },
+                    no_results: function (data, escape) {
+                        return '<div class="no-results">Geen resultaten gevonden</div>'
+                    }
+                }
+            }
+        }
+        return defaultOptions[locale]
+    }
+
+    hasTags() {
+        return this.element.dataset['tags'] === "true"
+    }
+
+    initTomSelect() {
+        const defaultOptions = this.defaultOptions(I18n.locale)
+        const options = {create: this.hasTags()}
+
+        new TomSelect(this.element, {...defaultOptions, ...options})
+    }
+}

data/{src/js → app/assets/javascripts}/headmin/controllers/table_actions_controller.js

@@ -18,7 +18,8 @@ export default class extends Controller {
         event.preventDefault()
         this.updateFormAction()
         this.updateFormMethod()
-        this.updateButton()
+        this.updateFormDataAttributes()
+        this.enableButton()
     }
 
     updateIdFields(ids) {
@@ -65,15 +66,26 @@ export default class extends Controller {
         this.methodTarget.value = option.dataset.method
     }
 
-    updateButton() {
+    updateFormDataAttributes() {
         const option = this.selectedOption()
-        const confirm = option.dataset.confirm
+        this.updateFormDataConfirm(option.dataset.turboConfirm)
+        this.updateFormDataTurbo(option.dataset.turbo)
+    }
+
+    updateFormDataConfirm(confirm) {
         if (confirm) {
-            this.buttonTarget.dataset.confirm = confirm
+            this.formTarget.dataset.turboConfirm = confirm
         } else {
-            this.buttonTarget.removeAttribute('data-confirm')
+            this.formTarget.removeAttribute('data-turbo-confirm')
+        }
+    }
+
+    updateFormDataTurbo(turbo) {
+        if (turbo) {
+            this.formTarget.dataset.turbo = turbo
+        } else {
+            this.formTarget.removeAttribute('data-turbo')
         }
-        this.enableButton()
     }
 
     selectedOption() {

data/{src/js → app/assets/javascripts}/headmin/controllers/table_controller.js

@@ -1,6 +1,5 @@
 import {Controller} from "@hotwired/stimulus"
 import Sortable from "sortablejs";
-import Rails from "@rails/ujs";
 
 export default class extends Controller {
     static get values() {
@@ -18,23 +17,38 @@ export default class extends Controller {
         new Sortable(this.bodyTarget, {
             handle: '.table-drag-sort-handle',
             onEnd: (event) => {
-                Rails.ajax({
-                    url: this.urlValue,
-                    type: "PATCH",
-                    data: this.getIdsDataString(),
-                });
+                this.submitPositions()
             }
         })
     }
 
-    getIdsDataString() {
-        const table = this.tableTarget
-        let data = ""
-        const handles = [...table.querySelectorAll(".table-drag-sort-handle")]
-        handles.map(handle => {
-            data += `ids[]=${handle.dataset.id}&`
+    submitPositions() {
+        fetch(this.urlValue, {
+            method: 'PATCH',
+            body: this.idsFormData(),
+            headers: {
+                'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+            },
+        }).then((response) => {
+            return response.text()
+        }).catch((err) => {
+            console.warn('Fetch went wrong', err)
         })
-        return data
+    }
+
+    positions() {
+        const handles = [...this.tableTarget.querySelectorAll(".table-drag-sort-handle")]
+        return handles.map((handle) => {
+            return handle.dataset.id
+        })
+    }
+
+    idsFormData() {
+        let formData = new FormData()
+        this.positions().forEach(id => {
+            formData.append('ids[]', id)
+        })
+        return formData
     }
 
     toggleIds(event) {
@@ -72,7 +86,7 @@ export default class extends Controller {
     }
 
     totalCount() {
-        if(this.countValue === 0) {
+        if (this.countValue === 0) {
             return this.rowTargets.length
         } else {
             return this.countValue

data/app/assets/javascripts/headmin/index.js

@@ -0,0 +1,37 @@
+import {Application} from "@hotwired/stimulus"
+import BlocksController from "./controllers/blocks_controller"
+import DateRangeController from "./controllers/date_range_controller"
+import DropzoneController from "./controllers/dropzone_controller"
+import FilePreviewController from "./controllers/file_preview_controller"
+import FilterController from "./controllers/filter_controller"
+import FiltersController from "./controllers/filters_controller"
+import FlatpickrController from "./controllers/flatpickr_controller"
+import HelloController from "./controllers/hello_controller"
+import NotificationController from "./controllers/notification_controller"
+import PopupController from "./controllers/popup_controller"
+import RedactorxController from "./controllers/redactorx_controller"
+import RepeaterController from "./controllers/repeater_controller"
+import SelectController from "./controllers/select_controller"
+import TableActionsController from "./controllers/table_actions_controller"
+import TableController from "./controllers/table_controller"
+
+export class Headmin {
+    static start() {
+        window.Stimulus = window.Stimulus || Application.start()
+        Stimulus.register("blocks", BlocksController)
+        Stimulus.register("date_range", DateRangeController)
+        Stimulus.register("dropzone", DropzoneController)
+        Stimulus.register("file-preview", FilePreviewController)
+        Stimulus.register("filter", FilterController)
+        Stimulus.register("filters", FiltersController)
+        Stimulus.register("flatpickr", FlatpickrController)
+        Stimulus.register("hello", HelloController)
+        Stimulus.register("notification", NotificationController)
+        Stimulus.register("popup", PopupController)
+        Stimulus.register("redactorx", RedactorxController)
+        Stimulus.register("repeater", RepeaterController)
+        Stimulus.register("select", SelectController)
+        Stimulus.register("table", TableController)
+        Stimulus.register("table-actions", TableActionsController)
+    }
+}