headmin 0.2.6 → 0.3.2

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

@@ -0,0 +1,39 @@
+import {Controller} from "@hotwired/stimulus"
+import flatpickr from "flatpickr";
+import {Dutch} from "flatpickr/dist/esm/l10n/nl.js"
+import I18n from "../config/i18n";
+
+export default class extends Controller {
+    static get targets() {
+        return ["input"]
+    }
+
+    connect() {
+        const options = {...this.defaultOptions(), ...this.options()}
+        flatpickr(this.inputTarget, options);
+    }
+
+    options() {
+        return JSON.parse(this.inputTarget.getAttribute('data-flatpickr-options'))
+    }
+
+    defaultOptions() {
+        return {
+            allowInput: true,
+            dateFormat: 'd/m/Y',
+            locale: this.getLocale(I18n.locale)
+        }
+    }
+
+    getLocale(locale) {
+        const locales = this.locales()
+        return locales[locale]
+    }
+
+    locales() {
+        return {
+            en: null,
+            nl: Dutch
+        }
+    }
+}

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/{src/js → app/assets/javascripts}/headmin/controllers/repeater_controller.js

@@ -99,7 +99,6 @@ export default class extends Controller {
     }
 
     replaceIdsWithTimestamps(template) {
-        console.log(template)
         const regex = new RegExp(template.dataset.templateIdRegex, "g")
         return template.innerHTML.replace(regex, new Date().getTime())
     }

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

@@ -1,21 +1,15 @@
 import {Controller} from "@hotwired/stimulus"
 
 export default class extends Controller {
-    static get values() {
-        return {
-            count: {type: Number, default: 0}
-        }
-    }
-
     static get targets() {
         return ["wrapper", "form", "select", "method", "button", "idInputTemplate", "id", "counter"]
     }
 
     connect() {
         this.wrapperTarget.addEventListener('idSelectionChanged', (event) => {
-            const ids = event.detail.ids
-            this.updateIdFields(ids)
-            this.updateCountValueWithIds(ids)
+            this.updateIdFields(event.detail.ids)
+            this.updateCounter(event.detail.count)
+            this.toggleCounter(event.detail.count)
         })
 
     }
@@ -30,56 +24,32 @@ export default class extends Controller {
     updateIdFields(ids) {
         this.removeIds()
         if (ids instanceof Array) {
-            this.countValue = ids.length
             ids.forEach((id) => {
                 this.addId(id)
             })
         } else {
-            this.countValue = Infinity
             this.addId('')
         }
     }
 
-    updateCounter() {
+    updateCounter(count) {
         let htmlString = ''
-        switch (this.countValue) {
+        switch (count) {
             case 0:
                 htmlString = this.counterTarget.getAttribute('data-items-zero')
                 break;
             case 1:
                 htmlString = this.counterTarget.getAttribute('data-items-one')
                 break;
-            case Infinity:
-                htmlString = this.counterTarget.getAttribute('data-items-other')
-                htmlString = htmlString.replace(/<b>[\s\S]*?<\/b>/, '<b>' + this.totalCount() + '<\/b>');
-                break;
             default:
                 htmlString = this.counterTarget.getAttribute('data-items-other')
-                let count = this.countValue === Infinity ? this.totalCount() : this.countValue
                 htmlString = htmlString.replace(/<b>[\s\S]*?<\/b>/, `<b>${count}<\/b>`);
         }
         this.counterTarget.innerHTML = htmlString;
     }
 
-    totalCount() {
-        return this.counterTarget.getAttribute('data-total-count')
-    }
-
-    updateCountValueWithIds(ids) {
-        if (ids instanceof Array) {
-            this.countValue = ids.length
-        } else {
-            this.countValue = Infinity
-        }
-    }
-
-    countValueChanged() {
-        this.updateCounter()
-        this.toggle()
-    }
-
-    toggle() {
-        if (this.countValue > 0) {
+    toggleCounter(count) {
+        if (count > 0) {
             this.wrapperTarget.classList.remove('d-none')
         } else {
             this.wrapperTarget.classList.add('d-none')

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

@@ -4,11 +4,14 @@ import Rails from "@rails/ujs";
 
 export default class extends Controller {
     static get values() {
-        return {url: String}
+        return {
+            url: String,
+            count: Number
+        }
     }
 
     static get targets() {
-        return ["table", "body", "actions", "idCheckbox", "idsCheckbox"]
+        return ["table", "body", "actions", "idCheckbox", "idsCheckbox", "row"]
     }
 
     connect() {
@@ -52,13 +55,30 @@ export default class extends Controller {
                 'idSelectionChanged',
                 {
                     detail: {
-                        ids: this.ids()
+                        ids: this.ids(),
+                        count: this.selectedIdsCount()
                     }
                 }
             )
         )
     }
 
+    selectedIdsCount() {
+        if (this.ids() instanceof Array) {
+            return this.ids().length
+        } else {
+            return this.totalCount()
+        }
+    }
+
+    totalCount() {
+        if (this.countValue === 0) {
+            return this.rowTargets.length
+        } else {
+            return this.countValue
+        }
+    }
+
     ids() {
         if (this.idsCheckboxTarget.checked) {
             return null

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

@@ -0,0 +1,41 @@
+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"
+import Rails from "@rails/ujs";
+
+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)
+
+        // Init Rails UJS
+        Rails.start()
+    }
+}