Twemoji Wähler

1. offizieller Beitrag
    • Offizieller Beitrag

    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 nameTypeRequireDefaultDescriptioncallbackfunctiontruenullSpezifiziert die Callback-Funktion, welche getriggert wird, wenn eine Benutzer ein Emoji anklickt. Du erhältst ein Emoji-Objekt als Parameter zurück.selectstringfalsetwemoji-selectorDas ist der CSS-Selector, welcher angibt, wo der Selector generiert werden soll.dataPathstringfalseWCF_PATH + 'js/Hanashi/Twemoji/twemoji.json'Das ist der Datenpfad zu der Twemoji JSON Data-Datei.themestringfalseautoDu 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 NameTypeRequiredDefaultDescriptionselectorstringtruenullDiese Option gibt den Selector an. Benutzer keine Elemente, welche JavaScript-Events nutzen. Diese werden danach nicht mehr funktionieren.dataPathstringfalseWCF_PATH + 'js/Hanashi/Twemoji/twemoji.json'Das ist der Datenpfad zu der Twemoji JSON Data-Datei.sizeintegerfalse24Dies gibt die Größe der Twemojis an. Erlaubte Größen: 18, 22, 24, 34 und 66.


    Zur Original Nachricht: Twemoji Wähler - WoltLab®