Bildvergleichsschieber

[Joseph_Hansen]

|||
|-|-|-|
| | Zusammenfassung | Füge einen Button zum Composer hinzu, um einen interaktiven Bildvergleichsschieberegler zu erstellen, der gezogen werden kann.
| |Repository| GitHub - josephclaytonhansen/discourse-image-comparison-slider |
| |Installationsanleitung|So installierst du ein Theme oder eine Theme-Komponente|
| |Neu bei Discourse Themes?| Anfängerleitfaden zur Verwendung von Discourse Themes|

Installiere diese Theme-Komponente

Diese Komponente fügt dem Composer einen Button hinzu, um ziehbare Bildvergleichsschieberegler zu erstellen. Schieberegler-Einstellungen wie Richtung oder Button-Icon können in den Admin-Einstellungen angepasst werden.

Dies ist mein erster Ausflug in die Discourse-Entwicklung, daher entschuldige ich mich, falls ich Fehler gemacht habe.

[Jagster (Jakke Lehtonen)]

Was ist WIP? (Sind es jetzt 20 Zeichen?)

[Moin]

WIP

[ColdSun]

WIP ist in Arbeit.

[Canapin (Coin-coin le Canapin)]

Das ist großartig! Danke für diesen Beitrag

@Joseph_Hansen

Dies ist ein WIP mit geplanten Updates.

Welche Art von Updates hast du im Sinn?

[Joseph_Hansen]

Hauptsächlich muss ich den Code aufräumen und ihn besser an Discourse anpassen. Er ist im Moment etwas schlampig, da ich hier aktiv gelernt habe, wie man eine Theme-Komponente erstellt

Ich plane auch, eine Möglichkeit hinzuzufügen, die Schiebereglerrichtung vom Composer aus zu ändern – im Moment ist die Richtung das, was in den Admin-Einstellungen festgelegt wurde. Ich möchte das benutzergesteuert machen. (EDIT: Das wurde hinzugefügt!)

Ich möchte auch mehr Kontrolle über die Stile des Schiebereglergriffs/Trennzeichens hinzufügen, aber leider ist das nicht wirklich möglich. Das JavaScript, das den Schieberegler handhabt, erstellt den Schieberegler, bevor irgendwelche CSS-Änderungen vorgenommen werden, und baut den Schieberegler nicht neu, wenn sich CSS-Änderungen ergeben.

[chapoi]

Tolle Sachen!
Danke für deinen Beitrag

[Joseph_Hansen]

Ich habe die Möglichkeit hinzugefügt, dass der Benutzer einen vertikalen oder horizontalen Schieberegler auswählen kann, indem ein data-direction-horizontal- oder data-direction-vertical-Attribut verwendet wird. Die im Admin-Panel gewählte Standardeinstellung wird verwendet, wenn der Benutzer keine Richtung angibt.

Dieses Update ist jetzt auf GitHub oder über das Discourse-Admin-Panel verfügbar, wenn Sie die Theme-Komponente installiert haben.

[davidkingham]

Sehr cool, danke Joseph! Es funktioniert gut, aber ich sehe diesen Fehler auf meiner Website:

Er verschwindet, wenn ich die Seite neu lade, und das ist alles, was ich in der Konsole sehe:

[Lilly (Lillian Louis)]

Das ist cool. Gute Arbeit.

[Joseph_Hansen]

Es ist schwer zu sagen, was das verursacht, ich kann es bei mir nicht reproduzieren Von diesen Fehlern könnte nur der erste von dieser Komponente stammen, da ich keinen TooltipContainer oder eine ResizeObserver-Schleife verwende, aber auch hier bin ich mir nicht sicher. Haben Sie auf die neueste Version aktualisiert? Ich habe gestern einige Änderungen vorgenommen, die das beheben könnten.

[davidkingham]

Danke Joseph, ich bin auf der neuesten Version. Es ist seltsam, ich kann diese Meldung nicht erneut anzeigen lassen und sehe keine Probleme, also war es vielleicht ein Zufall?

Eine andere Sache: das Symbol will sich nicht ändern. Ich habe es natürlich zur SVG-Icon-Untermenge hinzugefügt. Ich habe auch verschiedene Symbole ausprobiert, die auf meiner Website bereits funktionieren, und es ändert sich einfach nicht vom Blitz. Ich versuche, es in arrows-alt-h zu ändern.

[Joseph_Hansen]

@davidkingham

Eine weitere Sache: das Icon möchte sich nicht ändern. Ich habe es natürlich zur SVG-Icon-Teilmenge hinzugefügt. Ich habe auch verschiedene Icons ausprobiert, die auf meiner Website bereits funktionieren, und es ändert sich einfach nicht vom Blitz. Ich versuche, es in arrows-alt-h zu ändern.

Das ist mein Fehler, ich habe gerade eine Änderung vorgenommen, die das beheben wird. Danke, dass Sie das bemerkt haben!

[Frully]

Sehr cool, ich habe ein paar Probleme:

Lokalisierung

In unserem Forum haben wir auf das Gebietsschema en_GB umgestellt. Wenn ich mit der Maus darüber fahre, sehe ich:

anstelle des Alternativ-/Fließtextes aus den Komponenteneinstellungen:

Kann keinen Text auswählen

Das Plugin scheint alle Maus-Down-Ereignisse zu stehlen und verhindert, dass ich Text auf der Seite zum Kopieren/Einfügen/Zitieren usw. auswählen kann. Das ist kein Problem auf meta.discourse… Es ist verschwunden… Ich liebe Technologie.

3.1.0.beta4

(f0bdb2ee9a)

Funktioniert überhaupt nicht in Firefox (und einige mobile Chrome-Benutzer)

Ich habe einen Anleitungsbeitrag erstellt, um die Funktion zu nutzen, und einige Leute sagten, sie würden nichts sehen. (Kein sehr hilfreiches Feedback, da ich keine echten Fehlerberichte von Leuten habe).

[Joseph_Hansen]

Hmm… das ist seltsam, ich habe es unter Firefox ohne Probleme getestet. Ich werde sehen, ob ich das reproduzieren kann. Ich liebe zufällige Fehler die Bibliothek, die ich benutze, hat keine Probleme im GitHub-Repository für Firefox, weder offen noch geschlossen, was die Fehlerbehebung noch schwieriger macht.

Lokalisierungen – Ich bin mir nicht sicher, wie der Prozess für die Bereitstellung von Lokalisierungsdateien aussieht. Ich kann ein en.GB hinzufügen, da ich diese Sprache spreche, aber das ist das Ausmaß meiner Expertise. Wissen andere Autoren von Themenkomponenten, wie Lokalisierungsdateien funktionieren? Soll ich den Text einfach durch Google Translate laufen lassen?

[Frully]

Der einzige Unterschied, den ich zwischen Ihrem und einer bekannten funktionierenden Komponente (giphy) sehen kann, ist die Einrückung…

locales/en.yml

Vielleicht liegt es daran, dass die gesamte YML-Güte auf derselben Einrückungsebene liegt, etwas mit dem Parser oder so.

locales/en.yml

Im Grunde… ich bin ein Hack und habe keine Ahnung, was ich tue.

[Joseph_Hansen]

Ich weiß, wie du dich fühlst Ich werde es mir ansehen, ich benutze den YML-Parser von VS Studio, aber er ist vielleicht nicht ganz auf dem neuesten Stand. Ich werde es mit klassischem manuellen Einrücken in Notepad versuchen.

[Joseph_Hansen]

@Frully Ich habe das Firefox-Problem behoben – das sollte jetzt in jedem Browser funktionieren (ich habe Chrome, Firefox, Safari und mobile Versionen ohne Probleme getestet). Wenn Sie dies aktualisieren, funktioniert es für Ihre Firefox-Benutzer.

[Stephane_Roy]

Hallo

Dieses Theme-Komponente ist sehr cool, danke und ich habe es gerade installiert

Ein Problem mit dem Button-Text und mit dem Platzhaltertext

---

Ich habe auch die Theme-Komponente

Masonry Image Gallery

This feature is now built-in to Discourse core, see the announcement regarding image grids in Discourse. This theme component adds a responsive masonry-style image gallery with customizable ordering. Desktop view: [desktop_view] Mobile view: [mobile_view] When clicking on an image it will open with the default lightbox viewer. You add the gallery by clicking on the grid icon and then adding your images. It also works by first selecting the uploaded images and then clickin…

Nach der Installation habe ich:

• den Text des Buttons “Image comparison slider” auch auf dem Button “Masonry Image Gallery”
• den Platzhaltertext von “Image comparison slider” anstelle des Platzhaltertextes von “Masonry Image Gallery”

Seltsam, oder?

Stéphane

Forums FFJdR

[Heddson]

Darüber habe ich nicht nachgedacht. Danke, dass du mich darauf aufmerksam gemacht hast, @Stephane_Roy!

Das Problem ist, dass beide Theme-Komponenten dieselben Übersetzungsvariablen verwenden. Andere TCs haben möglicherweise dasselbe Problem. Die Lösung besteht darin, den Namen von button_text und add_images_prompt an den unten genannten Stellen zu aktualisieren/zu ändern. Ich werde auch die Masonry Image Gallery aktualisieren.

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,“
\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});