Skip to content

✨ A JavaScript plugin that embeds emojis, media, maps, tweets, gists, code, services and markdown. ✨

Notifications You must be signed in to change notification settings

ufo-github/embed.js

 
 

Repository files navigation

Build Status npm Bower Twitter Producthunt

A JavaScript plugin that analyses the string and automatically embeds the supported emojis, media, maps, tweets, code and services.

screen

Important links

Installation

To install the stable version:

npm install --save embed-js

CDN

Simple Usage

Let's assume that the HTML structure is as written below

<div id="element">
   <!--===== your string here =======-->
</div>

Creating an instance of embed.js

var x = new EmbedJS({
  input: document.getElementById('element'),
  googleAuthKey : 'xxxx'
})

Next step is replacing the original text with the processed text.

//Render the result
x.render();

There may be cases where you just want the processed string to use it according to your need. You can get it by the following method.

//Get the resulting string
x.text(function(data){
  console.log(data); //The resultant string
})

If you wan't to destroy the instance. It will also replace the processed string with the original string.

//Destroy the instance
x.destroy()

Adding custom emojis

  1. Add the image to assets/images/emojis. Make sure the name of the file is same as emoji name.
  2. Pass the emoji name as the value to customEmoji. See the example here
  3. Run grunt build-emoji && grunt build

Development

  1. Fork the repo
  2. create a branch
  3. Create a PR

grunt tasks

grunt : starts development server and watches files for changes. Run this for development purpose. grunt dist : create dist directory with all the different build files grunt build-emoji : create spritesheet from all the emojis. Only run if you have made some changes related to emojis

License

MIT © Ritesh Kumar

About

✨ A JavaScript plugin that embeds emojis, media, maps, tweets, gists, code, services and markdown. ✨

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 57.0%
  • JavaScript 32.9%
  • HTML 10.1%