CODEWITHSUNDEEP
androidangularjsionic-frameworkemojiemojione
Morteza QorbanAlizade
Morteza QorbanAlizade

Reputation: 1550

How to use "emojione" in Ionic App

In my Ionic App, I want to use emojione for smiley in chat. Unfortunately, I didn't find useful documentation to show how to use emojione.

Now I want to create a popup that contain all list of smiley and it's related group. like this:

enter image description here

In downloaded files, There are png sprite of smiley and it's css file, But there isn't any HTML file that show the smiley list.

How can I create this list?

Upvotes: 0

Views: 2479

Answers (1)

Morteza QorbanAlizade
Morteza QorbanAlizade

Reputation: 1550

After research two days, I didn't find any answer on internet, So, I wrote the list (that contain all of the emoji with it's category) myself and solve the problem.

In downloaded folder at emojione.com, there is some file that I used to create list:

1. emojione.sprites.css That contain background-position and classname

2. emojione.sprites.png This is a sprite image of all emoji

3. emoji.json Than contain all emoji name,category, unicode and ...

I used ionic tab and angular ng-repeat and groupBy filter in angular-filter

angular-filter: Bunch of useful filters for AngularJS

Important: Use unicode In emoji.json for each emoji classname to show emoji in background of an element(spite).

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;
};

Upvotes: 1

Related Questions