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
Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können
Loggen Sie sich bitte ein oder
Registrieren Sie sich.
<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
Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können
Loggen Sie sich bitte ein oder
Registrieren Sie sich.
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
Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können
Loggen Sie sich bitte ein oder
Registrieren Sie sich.
<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
Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können
Loggen Sie sich bitte ein oder
Registrieren Sie sich.
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. |