如何将 `ember-emojione` 与 `emojione-png-sprites` 一起使用？

Question

我正在使用 ember-emojione 来显示和插入表情符号。

在 EmojiOne 提供的四种渲染选项中：

PNG 精灵
PNG 单张图片
SVG 精灵
SVG 单张图片

...只有 PNG 精灵适合我。单个图像需要太多时间来加载和顺序显示表情符号。 SVG 精灵很棒，但重新渲染预览区域会导致 SVG 精灵表情符号闪烁。只有PNG sprite emoji从不闪烁并同时显示。

遗憾的是，EmojiOne 仅提供三种尺寸的 spritesheet：64、128 和 512 像素。我们需要以 20 像素大小显示表情符号。

调整通过 PNG 精灵显示的表情符号的大小有问题。

ember-emojione 自述文件建议使用此 hack 来调整 PNG 精灵表情符号的大小：

.emojione {
  transform: scale(0.3125);
  margin: -22px;
}

有效，但有一些缺点：

在某些情况下，表情符号显得模糊不清。
文本选择爆炸：

解决方案是使用适合所需大小的表情符号 spritesheet。 Deveo/emojione-png-sprites 存储库提供了这样的精灵表。

但是当我包含这些 spritesheet 而不是默认的 spritesheet 时，ember-emojione 表情符号选择器组件显示不正确。

问题：如何正确使用 ember-emojione 和 emojione-png-sprites？

Answer 1

emojione-png-sprites 依赖于 Sass mixin，所以你需要 ember-cli-sass。如果您不想安装 ember-cli-sass，您也可以手动预编译 mixin 调用并将生成的 CSS 插入到您的应用程序中。

决定要包含来自 emojione-png-sprites 的 spritesheet。

我们将使用 20px 表情符号。对于视网膜，我们还需要双倍和三倍大小的 spritesheet。由于 40px 和 60px 不可用，我们将使用下一个可用的：48px 和 64px.

将 spritesheet 和 Sass 文件包含到您的存储库中。运行在您的 Ember 应用根目录中的这些命令：

bower i -S emojione-png-sprite-20=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-20.png
bower i -S emojione-png-sprite-48=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-48.png
bower i -S emojione-png-sprite-64=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-64.png
bower i -S emojione-png-sprite-style=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss

使用文件的特定发行版本非常重要，这样您的依赖项就会被锁定。否则，如果 repo 有一个破坏性的变化，一个无辜的 bower install 会破坏你的项目。

告诉 ember-emojione 不要包含默认的 EmojiOne CSS 和精灵表。在您应用的 ember-cli-build.js:

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {    
        "ember-emojione": {
            shouldImportCss:        false,
            shouldIncludePngSprite: false,
            shouldIncludeSvgSprite: false,
            shouldIncludePngImages: false,
            shouldIncludeSvgImages: false
        }
    });
// ...

将 PNG 精灵导入您的应用程序。

安装broccoli-funnel:

npm install -D broccoli-funnel

在您应用的 ember-cli-build.js 中：

var Funnel = require("broccoli-funnel");

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {
            // ...
        }
    });

    const funnels = [

        // PNG sprites
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-20.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-48.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-64.png";
            }
        }),
    ];

    if (app.env === "development" || app.env === "test") {
        app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
    }

    return app.toTree(funnels);
};

在您应用的 Sass 中，包含混合并调用它：

@import "bower_components/emojione-png-sprite-style/index.scss";

@include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 48, 3: 64));

这会破坏 ember-emojione 组件的外观。该插件包含一个可以恢复外观的 mixin：

@import 'node_modules/ember-emojione/app/styles/ember-emojione';

@include ember-emojione-cancel-scale;

如何将 `ember-emojione` 与 `emojione-png-sprites` 一起使用？

How do I use `ember-emojione` with `emojione-png-sprites`?

ember.js

ember-emojione