Twemoji Wähler

Zitat von Woltlab Plugin News

Twemoji selector für WoltLab Suite Core (3.0+) ist eine Erweiterung für Entwickler. Entwickler können dieses Plugin einfach hinzufügen und den Selector antriggern.

Inhalt

Dieses Paket enthält einen Twemoji Auswähler und einen simplen Twemoji parser. Der Parser konvertiert native Emojis zu Twemojis.

Implementation

Es ist sehr einfach das zu deinem Plugin hinzuzufügen. Zu erst füge folgende requiredpackage-Zeile zu deiner package.xml hinzu.

Code

Code

<requiredpackage minversion="1.0.0">dev.hanashi.wsc.twemoji-selector</requiredpackage>

Twemoji Selector

[Blockierte Grafik: https://www.woltlab.com/attachment/154138-selector-light-png/?thumbnail=1][Blockierte Grafik: https://www.woltlab.com/attachment/154137-selector-dark-png/?thumbnail=1]

Füge folgenden JavaScript-Code in deine Template oder deine JavaScript-Datei ein:

JavaScript

Code

require(["js/Hanashi/Twemoji/Selector"], function(TwemojiSelector) {

var options = {

callback: function(emoji) {

console.log(emoji);

}

};

new TwemojiSelector(options);

});

Nun füge folgendes in dein Template hinzu:

Code

Code

<twemoji-selector></twemoji-selector>

Das ist der Standard Selector, wo der Twemoji Selector hinzugefügt werden soll. Du kannst dies mit der Option selector überschreiben.

Folgende Optionen stehen zur Auswahl.:

Option name	Type	Require	Default	Description
callback	function	true	null	Spezifiziert die Callback-Funktion, welche getriggert wird, wenn eine Benutzer ein Emoji anklickt. Du erhältst ein Emoji-Objekt als Parameter zurück.
select	string	false	twemoji-selector	Das ist der CSS-Selector, welcher angibt, wo der Selector generiert werden soll.
dataPath	string	false	WCF_PATH + 'js/Hanashi/Twemoji/twemoji.json'	Das ist der Datenpfad zu der Twemoji JSON Data-Datei.
theme	string	false	auto	Du kannst ein Theme für den Selector wählen. auto: der Selector wird dunkel oder hell angezeigt, abhängig von den Systemeinstellungen des Benutzer. light: ein simples helles Theme dark: ein simples dunkles Theme

Twemoji Parser

Der Twemoji Parser sucht in einem Element nach nativen Emojis und ersetzt diese mit Twemojis.

Füge folgenden JavaScript-Code in dein Template oder dein JavaScript ein:

JavaScript

Code

require(["js/Hanashi/Twemoji/Parser"], function(TwemojiParser) {

var options = {

selector: '#myDiv'

};

new TwemojiParser(options);

});

Du hast folgende Optionen zur Verfügung:

Option Name	Type	Required	Default	Description
selector	string	true	null	Diese Option gibt den Selector an. Benutzer keine Elemente, welche JavaScript-Events nutzen. Diese werden danach nicht mehr funktionieren.
dataPath	string	false	WCF_PATH + 'js/Hanashi/Twemoji/twemoji.json'	Das ist der Datenpfad zu der Twemoji JSON Data-Datei.
size	integer	false	24	Dies gibt die Größe der Twemojis an. Erlaubte Größen: 18, 22, 24, 34 und 66.

Alles anzeigen

Quelle: https://pluginstore.woltlab.com/file/3239-twemoji-w%C3%A4hler/