blogben/assets/controllers/slugger_controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
    static targets = ['title', 'slug', 'bouton', 'formulaire', 'ligneSlug']

    show() {
        this.ligneSlugTarget.classList.toggle('hidden', true)
        this.formulaireTarget.classList.toggle('hidden', false)
    }

    async open() {
        const basePath = this.slugTarget.dataset.url
            this.slugTarget.value = await this.getSlug(this.titleTarget.value, basePath);
            this.slugTarget.focus();
    }

    async getSlug(text, basePath) {
        // Envoyer le titre au serveur pour générer le slug
        const response = await fetch(basePath + '/generate-slug', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ title: text })
        })
        const data = await response.json()
        return data.slug
    }

    generateSlug(text) {
        return text.toString().toLowerCase()
            .replace(/\s+/g, '-')           // Remplace les espaces par des tirets
            .replace(/[^\w\-]+/g, '')       // Enlève les caractères non alphanumériques
            .replace(/\-\-+/g, '-')         // Remplace les tirets doubles
            .replace(/^-+/, '')             // Enlève les tirets au début
            .replace(/-+$/, '');            // Enlève les tirets à la fin
    }
}