Difference between revisions of "AppSuite:Emoji"

(Config paths)
Line 27: Line 27:
 
</pre>
 
</pre>
  
== Affected paths on file system ==
+
== How to add a new icon set ==
 +
 
 +
It is possible to add new icon sets by [[Appsuite:Writing_a_simple_application|writing a core plugin]]. It is recommended, to install the files to
 +
 
 +
<pre>
 +
apps/3rd.party/emoji/<iconSetName>/
 +
</pre>
 +
 
 +
Put all your CSS code and images into this directory and create a register.js adding the CSS/LESS files as dependencies.
 +
 
 +
Once this is done, you need to add the CSS also to the tinyMCE editor, because an iframe is used to edit the text and in order to have full emoji support, you need to load the CSS code there as well. Doing so is really easy. There is an extension point you can use to add the paths to your CSS files.
 +
 
 +
<pre class="language-javascript">
 +
define('3rd.party/emoji/greatestIconSet/register',
 +
  [
 +
    'io.ox/core/extensions',
 +
    'css!3rd.party/emoji/greatestIconSet/emoji.css',
 +
    'css!3rd.party/emoji/greatestIconSet/emoji_categories.css'
 +
], function (ext) {
 +
    "use strict";
 +
 
 +
    ext.point('3rd.party/emoji/editor_css').extend({
 +
        id: 'greatestIconSet/categories',
 +
        css: '3rd.party/emoji/greatestIconSet/emoji_categories.css'
 +
    });
 +
    ext.point('3rd.party/emoji/editor_css').extend({
 +
        id: 'greatestIconSet/icons',
 +
        css: '3rd.party/emoji/greatestIconSet/emoji.css'
 +
    });
  
== How to add a new icon set ==
+
});
 +
</pre>

Revision as of 11:09, 2 July 2013

API status: In Development

Emoji Configuration

Abstract. In this article, the support for emoji is described in detail. Learn about how different icon sets can be included and configured.

Config paths

Configuration will be served via jslob service at the following path.

io.ox/mail//emoji

The object can contain these keys (default values in brackets):

io.ox/mail//emoji/defaultCollection ('unified')
io.ox/mail//emoji/availableCollections ('unified')
io.ox/mail//emoji/forceEmojiIcons (false)
io.ox/mail//emoji/collectionControl ('none') // possible: 'none', 'tabs', 'dropdown'
io.ox/mail//emoji/autoClose (false)

io.ox/mail//emoji/recently ({})
io.ox/mail//emoji/userCollection (emoji/defaultCollection)

How to add a new icon set

It is possible to add new icon sets by writing a core plugin. It is recommended, to install the files to

apps/3rd.party/emoji/<iconSetName>/

Put all your CSS code and images into this directory and create a register.js adding the CSS/LESS files as dependencies.

Once this is done, you need to add the CSS also to the tinyMCE editor, because an iframe is used to edit the text and in order to have full emoji support, you need to load the CSS code there as well. Doing so is really easy. There is an extension point you can use to add the paths to your CSS files.

define('3rd.party/emoji/greatestIconSet/register',
   [
    'io.ox/core/extensions',
    'css!3rd.party/emoji/greatestIconSet/emoji.css',
    'css!3rd.party/emoji/greatestIconSet/emoji_categories.css'
], function (ext) {
    "use strict";

    ext.point('3rd.party/emoji/editor_css').extend({
        id: 'greatestIconSet/categories',
        css: '3rd.party/emoji/greatestIconSet/emoji_categories.css'
    });
    ext.point('3rd.party/emoji/editor_css').extend({
        id: 'greatestIconSet/icons',
        css: '3rd.party/emoji/greatestIconSet/emoji.css'
    });

});