NPM version? about angular-emoji-filter-hd

[dbaq]

hey @varmint09,

it's been a while I haven't updated this project, but everything is possible :) Please open another issue for the angular as a devDependency. I will take a look very soon.

[dbaq]

@varmint09

I pushed a version to NPM, let me know if it works.
https://www.npmjs.com/package/angular-emoji-filter-hd

[bnbon]

Hi,

A few things;

In the package.json please change your main to this;

"main": "./dist/emoji.min.js",

The gruntfile.js isnt the "main" of this project, so that breaks when someone would want to use this.

Also, I had to edit the path in the CSS file, and also copy the image across to my own images folder, might I suggest;

You include an emoji.less file in the lib/dist folders and have a @filepath prefix that a user can set to specify where their images reside, and adding a bit of documentation to copy the images into their own assets/images folder, and to include the emoji.less into their LESS file.

You could even create a SASS version in addition to this, so that it could work with either compiler.

How do those sound? I was tempted to fork this, but its your work not mine, and its almost working great.

• Also, say I had an emoji in a button, how would I make it translate that, or if I had a panel of emoji.

Something like

<div>:dog:</div>

<button>:dog</button>

It would be great if this could swap those for images too!

• Lastly, it would be much more performant if rather than a single spritesheet, if these were separate images, as otherwise there is a 4mb download, even if someone sends one smiley face!

Thoughts?

[bnbon]

Bump :)

[dbaq]

hey @varmint09, apologies for the late answer.

I have fixed the package.json to use the correct main property.

• I need to do some tests about the filepath but I am not sure to understand, how are you including the js and the css files in your code?
• about having an emoji button or panel, what do you want to do? when the user clicks on the button/link, it executes some code?

why not doing something like that?
<button class="emoji emoji_button emoji_dog"></button> and you define emoji_button

• about the last point, when I was using this filter, I preloaded the image, so it was working great. Can't you do that?

[bnbon]

Hi,

The CSS file I import into a stylesheet, using LESS. Not sure if you use LESS but it might be useful as then you could set an imagePath in the less to the image folder location.

Regarding the images; they are 800kb and 2.5mb each, so preloading for them seems quite wasteful surely? You are putting a requirement to download the entire set of all icons, when it might just be to render one or two.

I like how emojify the plugin offers a CSS Sprite Mode, an Image Sprite Mode, or Image modes, I just think your actual implementation is better and the other project is dead.

It seems like a good chance to make a really awesome Angular plugin, thoughts?

• Good point about just adding the classes, that was stupid of me to miss!

[dbaq]

I am more a SASS guy :) but if I do a LESS configuration file, I need to do also a SASS one and keep a version with the default CSS version (for people not using any CSS preprocessors). But I thought that when you are using NPM, you were supposed to include the files like that (I might be wrong):
<link type="text/css" rel="stylesheet" href="node_modules/package/css/style.css"/>
is it because you need to build a production version? but anyway I think it is doable.

Regarding to the images, I need to see what I can do, that requires a lot of work because I haven't "designed" the plugin like that. In my case, I needed to display a large set of emojis (in a chat panel).

[bnbon]

I do not link directly to any node packages in my dev, or my production code as I concat it all into a single JS file, the same applies to my CSS. I doubt that would be regarded as good practice. None of the node_modules end up on the prod server.

Sass + Less would be great.

so it would be;

$filepath: '../images/';

.cat {
background-image: url($filepath + '/cat.png';
}

.dog {
background-image: url($filepath + '/dog.png';
}

instead of the css being a position in a sprite sheet, it will be a path to the image, so that wont break or remove any functionality, yes its more network requests, and yes perhaps for a panel its not ideal, but for the actual display it should be kinder to connections, most of the time the few MB wont be needed.

[bnbon]

• bump, or is this repo dead? :)

[dbaq]

No, I have a job + a life and not a lot of time to code right now on my spare time.

It is on my to do list but feel free to open a PR if you can't wait.

[dbaq]

I've pushed this commit: c0f926e

2 new files in the dist/ folder:

• https://github.com/dbaq/angular-emoji-filter-hd/blob/master/dist/emoji.less you have to define after importing the file: @emoji-images-path, see http://lesscss.org/features/#variables-feature-default-variables for more information
• https://github.com/dbaq/angular-emoji-filter-hd/blob/master/dist/emoji.scss you have to define before importing the file: $emoji-images-path

let me know if it fits your needs

[dbaq]

I am closing this issue. Feel free to reopen it if it does not work for you.