android - Ionic アプリで「emojione」を使用する方法

Question

Ionic アプリで、チャットのスマイリーにemojioneを使用したいと考えています。残念ながら、emojioneの使用方法を示す有用なドキュメントは見つかりませんでした。

ここで、スマイリーのすべてのリストとそれに関連するグループを含むポップアップを作成したいと考えています。このような：

ダウンロードしたファイルにはスマイリーのpngスプライトとcssファイルがありますが、スマイリー一覧を表示するHTMLファイルはありません。

このリストを作成するにはどうすればよいですか?

Answer 1

2日間調査した後、インターネットで答えが見つからなかったので、自分でリスト（すべての絵文字とそのカテゴリを含む）を書き、問題を解決しました。

emojione.comのダウンロード フォルダーには、リストの作成に使用したファイルがいくつかあります。

1. emojione.sprites.cssbackground-positionとclassname

2. emojione.sprites.pngこれはすべての絵文字のスプライト画像です

3. emoji.jsonすべての絵文字名、カテゴリ、ユニコードなどを含む...

angular-filterでイオンタブと角度ng-repeatおよびgroupByフィルターを使用しました

angular-filter: AngularJS の便利なフィルターの束

重要:各絵文字にunicodeInを使用して、要素の絵文字を表示します (にもかかわらず)。emoji.jsonclassnamebackground

HTML

<div class="emoji-wrapper">

    <div class="tabs">
       <a ng-repeat="(key, value) in emojies | groupBy:'category'" class="tab-item" ng-click="changeTab($index)">
          {{key}}
       </a>
     </div>

     <div ng-repeat="(key, value) in emojies | groupBy:'category'" id="{{key}}" ng-show="tabActive[$index]">
         <ul>
            <li ng-repeat="emoji in value">
                 <span class="emojione emojione-{{emoji.unicode}}"></span>
            </li>
         </ul>
     </div>

</div>

JS

$scope.emojies = [];
$scope.tabActive = [];
$scope.tabActive[0] = true;

$http.get("emoji.json").then(function (response) {

    angular.forEach(response.data , function ($elem , $index) {
       $scope.emojies.push($elem);
    });

});

$scope.changeTab = function (index) {
    $scope.tabActive = [];
    $scope.tabActive[index] = true;
};