Comment créer un bouton personnalisé pour le langage simple?

Dans cet article, tu découvriras comment intégrer directement le langage simple à ta page

Utiliser son propre bouton

En plus du bouton prédéfini, tu as également la possibilité de créer ton propre bouton pour la fonction «Langage simple».

Tu peux ainsi adapter entièrement le design, la position et l'affichage à ton site web et personnaliser le bouton exactement comme tu le souhaites.

En principe, il existe deux possibilités de personnalisation: une personnalisation partielle ou une personnalisation complète du bouton.

Personnalisation partielle du bouton

Avec la personnalisation partielle, ton propre bouton remplace le bouton par défaut. La fonction «Langage simple» continue de s'activer automatiquement lorsque les utilisateurs cliquent sur ton bouton.

Tu as le choix entre deux options.

1. Bouton personnalisé sans info-bulle ni icône

Avec cette option, tu n'utilises aucun élément prédéfini. Tu crées toi-même ton bouton de A à Z, qui remplace entièrement le bouton existant.

Aucune info-bulle ni aucune icône du système n'est reprise.

Voici comment cela fonctionne :

• Tu intègres le fichier JavaScript fourni

• Tu ne crées pas de balise <easy-speech>

• À la place, tu crées ton propre bouton personnalisé

• Attribue l'ID « easy-speech-custom » à ton bouton

Ensuite, seul ton bouton personnalisé s'affichera.

Lorsque les utilisateurs cliquent sur le bouton, la traduction en langage simple s'active. En cliquant à nouveau, la page normale s'affiche à nouveau.

2. Bouton personnalisé avec info-bulle et icône

Avec cette option également, tu peux entièrement personnaliser le design de ton bouton.

La différence réside dans le fait que les infobulles et les icônes sont reprises du système.

Celles-ci indiquent, par exemple, si une traduction a été effectuée avec succès. De plus, une info-bulle s'affiche lorsque l'on passe la souris sur le bouton, fournissant des informations supplémentaires sur la traduction.

Voici comment cela fonctionne :

• Tu intègres le fichier JavaScript fourni

• Tu ne crées pas de balise <easy-speech>

• À la place, tu crées ton propre bouton personnalisé

• Tu attribues l'ID « easy-speech-custom-including-tooltip » à ton bouton

Ton badge personnalisé s'affichera ensuite.

En cliquant sur ce bouton, vous activez le mode «Langage simple». En cliquant à nouveau, vous revenez à la page normale.

Pendant l'utilisation, des indicateurs d'état supplémentaires s'affichent :

• Lors du lancement de la traduction, une icône de chargement s'affiche sur le bouton

• Une fois la traduction effectuée (qu'elle ait abouti ou échoué), une icône de statut correspondante s'affiche sur le bouton

• Lorsque vous passez la souris sur le bouton, une info-bulle contenant des informations sur la traduction s'affiche

• Si la traduction prend plus de temps ou échoue, une info-bulle s'affiche également

Personnalisation complète du bouton

Avec la personnalisation complète, tu n'utilises aucun élément prédéfini.

Tu crées ton bouton entièrement toi-même et tu contrôles l'activation du langage simple à l'aide de fonctions.

Dans cette version, les infobulles et les icônes ne s'affichent pas automatiquement.

Voici comment cela fonctionne :

• Tu intègres le fichier JavaScript fourni

• Tu ne crées pas de balise <easy-speech>

• À la place, tu crées ton propre élément HTML personnalisé

• Tu ajoutes à ton code les fonctions permettant d'activer le langage simple

Les fonctions suivantes sont disponibles pour la commande :

• attendre EA.activateEasy()
  Active la traduction en langage simple.

• attendre EA.deactivateEasy()
  Désactive la version simplifiée et affiche à nouveau la page d'origine.

D'autres fonctions sont disponibles pour consulter les informations d'état relatives à la langage simple ou pour gérer son activation.

Autres fonctionnalités disponibles

De plus, plusieurs fonctions sont disponibles pour te permettre de vérifier l'état de la langage simple ou d'en contrôler l'utilisation.

Cela comprend notamment :

• EA.statusEasy() – renvoie l'état actuel de la langage simple

• EA.isEasyActive() – vérifie si le langage simple est actuellement activé

• EA.keepEasyActivated() – garantit que le langage simple reste actif même après un changement de page

• EA.scriptIsLoaded() – vérifie si le script a été chargé correctement

Ces fonctionnalités te permettent d 'intégrer facilement le langage simple à ton site web et de l' adapter à ta propre interface.