blogben/assets/controllers/slugger_controller.js

import { Controller } from '@hotwired/stimulus'

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

    async open() {
        if (this.slugTarget.hasAttribute('readonly')) {
            sessionStorage.setItem('oldSlugValue', this.slugTarget.value)
            this.slugTarget.removeAttribute('readonly');
            this.slugTarget.value = await this.getSlug(this.titleTarget.value);
            this.slugTarget.focus();
            this.boutonTarget.innerText = 'Annuler la modification';
        } else {
            this.slugTarget.value = sessionStorage.getItem('oldSlugValue')
            sessionStorage.removeItem('oldSlugValue')
            this.slugTarget.setAttribute('readonly', true);
            this.boutonTarget.innerText = 'Générer le slug';
        }
    }

    async getSlug(text) {
        // Envoyer le titre au serveur pour générer le slug
        const response = await fetch('/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
    }
}