Weblate-Frontend

Das Frontend wird derzeit mit Bootstrap, jQuery und einigen Bibliotheken von Drittanbietern erstellt.

Unterstützte Browser

Weblate unterstützt die neuesten, stabilen Versionen aller gängigen Browser und Plattformen.

Alternative Browser, welche die neueste Version von WebKit, Blink oder Gecko verwenden, ob direkt oder über die Web View API der Plattform, werden nicht explizit unterstützt. Weblate sollte jedoch (in den meisten Fällen) auch in diesen Browsern korrekt angezeigt werden und funktionieren.

Ältere Browser könnten funktionieren, aber einige Funktionen sind möglicherweise eingeschränkt.

Verwaltung von Abhängigkeiten

Der Yarn-Paketmanager wird verwendet, um Bibliotheken von Drittanbietern zu aktualisieren. Die Konfiguration befindet sich in scripts/yarn und es gibt ein Wrapper-Skript scripts/yarn-update, um die Bibliotheken zu aktualisieren, sie zu bauen und an die richtigen Stellen in weblate/static/vendor zu kopieren, wo sich der gesamte Frontend-Code von Drittanbietern befindet. Der Weblate-spezifische Code sollte direkt in weblate/static oder in funktionsspezifische Unterverzeichnisse (zum Beispiel weblate/static/editor) kopiert werden.

Das Hinzufügen einer neuen Bibliothek eines Drittanbieters besteht in der Regel aus:

# Add a yarn package
yarn --cwd scripts/yarn add PACKAGE
# Edit the script to copy package to the static folder
edit scripts/yarn-update
# Run the update script
./scripts/yarn-update
# Add files to git
git add .

Programmierstil

Weblate verwendet Prettier für die Code-Formatierung von JavaScript- und CSS-Dateien.

Außerdem verwenden wir ESLint, um den JavaScript-Code zu überprüfen.

Lokalisierung

Sollten Sie einen für den Benutzer sichtbaren Text im Frontend-Code benötigen, sollte dieser lokalisierbar sein. In den meisten Fällen genügt es, den Text in die Funktion gettext einzuschließen, aber es sind auch komplexere Funktionen verfügbar:

document.write(gettext('this is to be translated'));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext('literal for the singular case',
        'literal for the plural case', object_count);

fmts = ngettext('There is %s object. Remaining: %s',
        'There are %s objects. Remaining: %s', 11);
s = interpolate(fmts, [11, 20]);
// s is 'There are 11 objects. Remaining: 20'

Symbole

Weblate verwendet derzeit Material Design Symbole. Falls Sie auf der Suche nach neuen Symbolen sind, schauen Sie unter Material Design Icons oder Material Design Resources.

Zusätzlich gibt es scripts/optimize-svg, um die Größe der SVG zu reduzieren, da die meisten Symbole in das HTML eingebettet sind, um die Gestaltung der Pfade zu ermöglichen.