Unterstützte Versionen
WoltLab Suite 3.0
WoltLab Suite 3.1
WoltLab Suite 5.2
Einfacher Auswähler für Twemojis.
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.
Twemoji Selector
Füge folgenden JavaScript-Code in deine Template oder deine JavaScript-Datei ein:
Nun füge folgendes in dein Template hinzu:
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.:
WoltLab Suite 3.0
WoltLab Suite 3.1
WoltLab Suite 5.2
Einfacher Auswähler für Twemojis.
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:
<requiredpackage minversion="1.0.0">dev.hanashi.wsc.twemoji-selector</requiredpackage>
Twemoji Selector
Füge folgenden JavaScript-Code in deine Template oder deine JavaScript-Datei ein:
Javascript:
require(["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:
<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:
Du hast folgende Optionen zur Verfügung:
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:
require(["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. |