headmin 0.2.7 → 0.3.3

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

@@ -0,0 +1,244 @@
+import {Controller} from "@hotwired/stimulus"
+
+// References:
+// https://developer.mozilla.org/en-US/docs/Web/API/FileReader
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+
+export default class extends Controller {
+    static get targets() {
+        return ["thumbnails", "template", "input", "placeholder", "thumbnail", "thumbnailDestroy"]
+    }
+
+    connect() {
+        this.thumbnailWidth = this.firstThumbnailWidth()
+        this.thumbnailHeight = this.firstThumbnailHeight()
+    }
+
+    preview() {
+        this.removeThumbnails()
+        this.addThumbnails()
+        this.togglePlaceholder()
+    }
+
+    togglePlaceholder() {
+        if (this.hasFilesSelected()) {
+            this.hidePlaceholder()
+        } else {
+            this.showPlaceholder()
+        }
+    }
+    
+    hasFilesSelected() {
+        return this.hasInputFiles() || this.hasVisibleAttachments()
+    }
+
+    hasVisibleAttachments() {
+        return this.visibleAttachments().length > 0
+    }
+
+    hasAttachments() {
+        return this.attachments().length > 0
+    }
+    
+    hasInputFiles() {
+        return this.inputFiles().length > 0
+    }
+
+    attachments() {
+        return this.thumbnailTargets.filter((thumbnail) => {
+            return this.isAttachment(thumbnail)
+        })
+    }
+
+    visibleAttachments() {
+        return this.attachments().filter((thumbnail) => {
+            return !thumbnail.classList.contains('d-none')
+        })
+    }
+
+    inputFiles() {
+        return Array.from(this.inputTarget.files)
+    }
+
+    writeInputFiles(files) {
+        const dataTransfer = new DataTransfer();
+        files.forEach((file) => {
+            dataTransfer.items.add(file);
+        })
+        this.inputTarget.files = dataTransfer.files;
+    }
+
+    remove(event) {
+        const thumbnail = event.target.closest('[data-file-preview-target="thumbnail"]')
+        this.removeThumbnail(thumbnail, event.params.name)
+        this.togglePlaceholder()
+    }
+
+    isAttachment(thumbnail) {
+        return thumbnail.querySelector('[data-file-preview-target="thumbnailDestroy"]')
+    }
+
+    removeInputFile(thumbnail, fileName) {
+        let files = this.inputFiles()
+        files = files.filter((file) => {
+            return file.name !== fileName
+        })
+        thumbnail.remove()
+        this.writeInputFiles(files)
+    }
+
+    removeAttachment(thumbnail) {
+        const destroyInput = thumbnail.querySelector('[data-file-preview-target="thumbnailDestroy"]')
+        destroyInput.value = '1';
+        thumbnail.classList.add('d-none')
+    }
+
+    showPlaceholder() {
+        this.placeholderTarget.classList.remove('d-none')
+    }
+
+    hidePlaceholder() {
+        this.placeholderTarget.classList.add('d-none')
+    }
+
+    removeThumbnails() {
+        this.thumbnailTargets.forEach((thumbnail) => {
+            this.removeThumbnail(thumbnail)
+        })
+    }
+
+    removeThumbnail(thumbnail, filename) {
+        if (this.isAttachment(thumbnail)) {
+            this.removeAttachment(thumbnail)
+        } else {
+            this.removeInputFile(thumbnail, filename)
+        }
+    }
+
+    addThumbnails() {
+        const files = this.inputFiles()
+        files.forEach((file) => {
+            let thumbnail = this.generateDummyThumbnail()
+            this.appendThumbnail(thumbnail)
+            this.updateThumbnail(this.lastThumbnail(), file)
+        })
+    }
+
+    generateDummyThumbnail() {
+        return this.templateTarget.content.cloneNode(true)
+    }
+
+    appendThumbnail(thumbnail) {
+        return this.thumbnailsTarget.appendChild(thumbnail)
+    }
+
+    updateThumbnail(thumbnail, file) {
+        this.updateThumbnailRemoveButton(thumbnail, file.name)
+
+        const title = this.titleForFile(file)
+        this.updateThumbnailTitle(thumbnail, title)
+
+        const icon = this.iconForMimeType(file.type)
+        this.updateThumbnailIcon(thumbnail, icon)
+
+        if (this.isImage(file)) {
+            this.updateThumbnailImage(thumbnail, file)
+        }
+
+    }
+
+    updateThumbnailImage(thumbnail, file) {
+        this.fileToBase64(file).then(base64 => {
+            this.updateThumbnailBackground(thumbnail, base64)
+            this.removeThumbnailIcon(thumbnail)
+        })
+    }
+
+    titleForFile(file) {
+        const byteSizeString = this.bytesToString(file.size)
+        return `${file.name} (${byteSizeString})`
+    }
+
+    bytesToString(bytes) {
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+    }
+
+    updateThumbnailRemoveButton(thumbnail, fileName) {
+        const removeButton = thumbnail.querySelector('.h-form-file-thumbnail-remove')
+        if(removeButton) {
+            removeButton.dataset.filePreviewNameParam = fileName
+        }
+    }
+
+    updateThumbnailTitle(thumbnail, title) {
+        thumbnail.title = title
+    }
+
+    updateThumbnailBackground(thumbnail, url) {
+        let thumbnailBackground = thumbnail.querySelector('.h-thumbnail-bg')
+        thumbnailBackground.style.backgroundImage = `url('${url}')`
+    }
+
+    removeThumbnailIcon(thumbnail) {
+        thumbnail.querySelector('.h-thumbnail-bg').innerHTML = ''
+    }
+
+    updateThumbnailIcon(thumbnail, icon) {
+        thumbnail.querySelector('.h-thumbnail-bg').innerHTML = icon
+    }
+
+    iconForMimeType(mimeType) {
+        const typeMap = {
+            image: ['image/bmp', 'image/gif', 'image/vnd.microsoft.icon', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/tiff', 'image/webp'],
+            play: ['video/mp4', 'video/mpeg', 'video/ogg', 'video/mp2t', 'video/webm', 'video/3gpp', 'video/3gpp2'],
+            music: ['audio/aac', 'audio/midi', 'audio/x-midi', 'audio/mpeg', 'audio/ogg', 'audio/opus', 'audio/wav', 'audio/webm', 'audio/3gpp', 'audio/3gpp2'],
+            word: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+            ppt: ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
+            excel: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+            slides: ['application/vnd.oasis.opendocument.presentation'],
+            spreadsheet: ['application/vnd.oasis.opendocument.spreadsheet'],
+            richtext: ['application/vnd.oasis.opendocument.text'],
+            zip: ['application/zip application/x-7z-compressed', 'application/x-bzip application/x-bzip2 application/gzip application/vnd.rar'],
+            pdf: ['application/pdf']
+        }
+
+        const icon_name = Object.keys(typeMap).find(key => typeMap[key].includes(mimeType));
+        const full_icon_name = ['bi', 'file', 'earmark', icon_name].filter(e => typeof e === 'string' && e !== '').join('-')
+
+        return `<i class="bi ${full_icon_name} h-thumbnail-icon"></i>`
+    }
+
+    isImage(file) {
+        return file.type.match(/^image/) !== null;
+    }
+
+    fileToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        });
+    }
+
+    thumbnails() {
+        return this.thumbnailsTarget.querySelectorAll('.img-thumbnail')
+    }
+
+    firstThumbnail() {
+        return this.thumbnailsTarget.firstElementChild
+    }
+
+    lastThumbnail() {
+        return this.thumbnailsTarget.lastElementChild
+    }
+
+    firstThumbnailWidth() {
+        return this.firstThumbnail().style.width;
+    }
+
+    firstThumbnailHeight() {
+        return this.firstThumbnail().style.height;
+    }
+}

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/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')
@@ -99,9 +69,9 @@ export default class extends Controller {
         const option = this.selectedOption()
         const confirm = option.dataset.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')
         }
         this.enableButton()
     }

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

@@ -1,37 +1,55 @@
 import {Controller} from "@hotwired/stimulus"
 import Sortable from "sortablejs";
-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() {
         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)
+        })
+    }
+
+    positions() {
+        const handles = [...this.tableTarget.querySelectorAll(".table-drag-sort-handle")]
+        return handles.map((handle) => {
+            return handle.dataset.id
         })
-        return data
+    }
+
+    idsFormData() {
+        let formData = new FormData()
+        console.log(this.positions())
+        this.positions().forEach(id => {
+            formData.append('ids[]', id)
+        })
+        return formData
     }
 
     toggleIds(event) {
@@ -52,13 +70,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,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)
+    }
+}