Curseur de comparaison d'images

Composant de thème
1

|||
|-|-|-|
| :information_source: | Résumé | Ajouter un bouton à l’éditeur pour créer un curseur de comparaison d’images interactif et déplaçable.
| :hammer_and_wrench:|Dépôt| GitHub - josephclaytonhansen/discourse-image-comparison-slider |
| :question:|Guide d’installation|Comment installer un thème ou un composant de thème|
| :open_book:|Nouveau sur les thèmes Discourse ?| Guide pour débutants sur l’utilisation des thèmes Discourse

<!- Remplissez « repoName » et « repoURL » pour le bouton d’installation automatique →

Installer ce composant de thème

<!- Décrivez ce thème/composant en une ou deux phrases →

Ce composant ajoute un bouton à l’éditeur pour créer des curseurs de comparaison d’images déplaçables. Les paramètres du curseur, tels que la direction ou l’icône du bouton, peuvent être personnalisés dans les paramètres d’administration.

<!- Ajoutez des captures d’écran (si applicable) →

IMG_2908
IMG_2908526×616 123 KB

<!- Ajoutez plus de détails et expliquez les paramètres (si applicable) →

C’est ma première incursion dans le développement de Discourse, je m’excuse donc si j’ai commis des erreurs.

27 « J'aime »
2

Qu’est-ce que le WIP ? (Y a-t-il 20 caractères maintenant ?)

2 « J'aime »
3
4 « J'aime »
4

WIP est en cours de développement.

3 « J'aime »
5

C’est génial ! Merci pour cette contribution :+1:

Quel genre de mises à jour avez-vous en tête ?

4 « J'aime »
6

Principalement, je dois nettoyer le code et le rendre plus conforme à Discourse. Il est un peu bâclé pour le moment, car j’apprenais activement à créer un composant de thème ici :slight_smile:

Je prévois également d’ajouter un moyen de changer la direction du curseur depuis le compositeur - pour l’instant, la direction est celle définie dans les paramètres d’administration, j’aimerais rendre cela contrôlable par l’utilisateur. (EDIT : ceci a été ajouté !)

J’aimerais également ajouter plus de contrôle sur les styles de la poignée/du diviseur du curseur, mais malheureusement, ce n’est pas vraiment possible. Le JavaScript qui gère le curseur construit le curseur avant tout changement CSS et ne reconstruit pas le curseur lorsque le CSS change.

9 « J'aime »
7

Super ! :heart:
Merci pour votre contribution :raised_hands:

4 « J'aime »
8

J’ai ajouté la possibilité pour l’utilisateur de choisir un curseur vertical ou horizontal, en utilisant un attribut data-direction-horizontal ou data-direction-vertical. Le réglage par défaut choisi dans les paramètres d’administration sera utilisé si l’utilisateur ne spécifie pas de direction.


Cette mise à jour est maintenant disponible sur GitHub ou depuis le panneau d’administration de Discourse, si vous avez installé le composant de thème.

5 « J'aime »
9

Très cool, merci Joseph ! Ça fonctionne bien, mais je vois cette erreur sur mon site :

image
image1582×146 61.6 KB

Elle disparaît si je rafraîchis la page, et voici tout ce que je vois dans la console :

image
image1866×132 59.6 KB

2 « J'aime »
10

C’est super. Beau travail. :+1:

2 « J'aime »
11

Il est difficile de dire ce qui cause cela, je ne peux pas le reproduire de mon côté :confused: De ces erreurs, seule la première pourrait provenir de ce composant, car je n’utilise pas de tooltipContainer ni de boucle ResizeObserver, mais encore une fois, je ne suis pas vraiment sûr. Avez-vous mis à jour vers la version la plus récente ? J’ai apporté quelques modifications hier qui pourraient résoudre ce problème.

1 « J'aime »
12

Merci Joseph, je suis sur la dernière version. C’est bizarre, je n’arrive plus à afficher ce message et je ne vois aucun problème, donc c’était peut-être un coup de chance ?

Autre chose, l’icône ne veut pas changer. J’ai bien sûr ajouté l’icône au sous-ensemble d’icônes svg. J’ai également essayé différentes icônes qui fonctionnent déjà sur mon site et elle ne change pas du boulon. J’essaie de la changer en arrows-alt-h.

2 « J'aime »
13

C’est ma faute, je viens de valider un changement qui corrigera cela. Merci de l’avoir signalé !

3 « J'aime »
15

Très cool, j’ai quelques problèmes :

Localisation

Dans mon forum, nous sommes passés à la locale en_GB, donc lorsque je survole, j’obtiens :

image
image311×119 2.23 KB

au lieu du texte alternatif/d’ambiance des paramètres du composant :
image
image606×262 5.85 KB

Impossible de sélectionner du texte

Le plugin semble voler tous les événements de souris au clic et m’empêche de sélectionner n’importe quel texte sur la page pour copier/coller/citer, etc. Ce n’est pas un problème sur meta.discourse… il a disparu… J’adore la technologie.

3.1.0.beta4

(f0bdb2ee9a)

Ne fonctionne pas du tout dans Firefox (et certains utilisateurs de Chrome mobile)

image
image574×471 64.9 KB

J’ai créé un post d’instruction pour utiliser la fonctionnalité, et certaines personnes ont dit qu’elles ne voyaient rien. (pas de commentaires très utiles car je n’ai aucun rapport de bug réel de la part des gens).

2 « J'aime »
16

Hmm… c’est étrange, je l’ai testé sur Firefox sans aucun problème. Je vais voir si je peux reproduire ça. J’adore les bugs aléatoires :melting_face: la bibliothèque que j’utilise n’a aucun problème sur le dépôt GitHub pour Firefox, ouvert ou fermé, ce qui rend la correction de bugs encore plus difficile.

Locales – Je ne suis pas sûr du processus pour fournir des fichiers de locale, je peux ajouter un en.GB puisque je parle cette langue, mais c’est à peu près tout ce que je sais faire. D’autres auteurs de composants de thème savent-ils comment fonctionnent les traductions de fichiers de locale ? Dois-je simplement passer le texte par Google Traduction ? :sweat_smile:

1 « J'aime »
17

La seule différence que je vois entre le vôtre et un composant qui fonctionne (giphy) est l’indentation…

Peut-être que toute la bonté du yml est au même niveau d’indentation, quelque chose, quelque chose, analyseur, quelque chose.

En gros… je suis un hack et je n’ai aucune idée de ce que je fais.

3 « J'aime »
18

Je sais ce que tu ressens :slight_smile: Je vais regarder ça, j’utilise l’analyseur YML de VS Studio mais il n’est peut-être pas conforme à 100 %. Je vais essayer une bonne vieille indentation manuelle dans Notepad.

1 « J'aime »
19

@Frully J’ai corrigé le problème de Firefox - cela devrait maintenant fonctionner sur tous les navigateurs (j’ai testé Chrome, Firefox, Safari et les versions mobiles sans problème). Si vous mettez cela à jour, cela fonctionnera pour vos utilisateurs Firefox.

2 « J'aime »
20

Bonjour

Ce composant de thème est très cool, merci et je viens de l’installer :slight_smile:

Un problème avec le texte du bouton et le texte du placeholder

J’ai aussi le composant de thème

Après installation, j’ai :

  • le texte du bouton « Image comparison slider » aussi sur le bouton « Masonry Image Gallery »
  • le texte placeholder de « Image comparison slider » à la place du texte placeholder de « Masonry Image Gallery »

image
image932×647 31.9 KB

Étrange, non ?

Stéphane

1 « J'aime »
21

Je n’avais pas pensé à ce problème. Merci de l’avoir signalé @Stephane_Roy !

Le problème est que les deux composants de thème utilisent les mêmes variables de traduction. D’autres TC pourraient avoir le même problème… La solution consiste à mettre à jour/changer le nom de button_text et add_images_prompt aux endroits ci-dessous. Je mettrai également à jour Masonry Image Gallery.

translations.button_text = settings.button_text;
translations.composer.add_images_prompt =
settings.add_images_prompt;

api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,“<0xC2><0xA0>\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});

1 « J'aime »