zhao/hexo-filter-github-emojis
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: simplify implementation

Browse source
This commit is contained in:
crimx 2020-10-03 11:10:42 +08:00
parent 90d06a9b0b
commit 4a04a77f64
2 changed files with 203 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

92
README.md
View file

@ -9,8 +9,6 @@ A Hexo plugin that adds emoji support, using [Github Emojis API][ghemojis].
Check out the [Emoji Cheat Sheet](http://www.webpagefx.com/tools/emoji-cheat-sheet/) for all the emojis it supports.
V2 is not compatible with [V1](https://github.com/crimx/hexo-filter-github-emojis/tree/e52ceb8b18a7b06916b6cb0a887b218d49a7ab92). V1 replaces codepoints with `<img>` tags. While V2 makes the font transparent and displays emojis with `background-image`.
## Installation
``` bash
@ -30,43 +28,71 @@ githubEmojis:
customEmojis:
```
- **className** - Image class name. For example :sparkles: `:sparkles:` the filter will generate something like this:
- **enable** `boolean=true` - Enable `::` emoji parsing. If off the [tag](#tag) and [helper](#helper) still work.
- **className** `string="github-emoji"` - Emoji class name.
For example :sparkles: `:sparkles:` the filter will generate something like this:
```html
<span class="github-emoji" style="background-image:url(https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png?v8)" data-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png?v8">&#x2728;</span>
<span class="github-emoji"><span>&#x2728;</span><img src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png?v8"></span>
```
- **inject** - If true, the filter will inject proper inline styles and a script to fallback when image loading fails. If you can modify script files and style files, you may turn this off and add them yourself.
```html
<span class="github-emoji" style="color:transparent;background:no-repeat url(...) center/contain" ...>
```
- **inject** `boolean=true` - Inject emoji styles and fallback script.
If `true`, the filter will inject a `<style>` to document `<head>`.
If `false`, the filter will not inject any style. If you can modify source style files you may turn this off and add them yourself.
A script tag will be appended, the className changes according to the options:
Below is the injected `<style>`. The class name changes according to option.
```html
<script>
document.querySelectorAll('.github-emojis')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
</script>
<style>
.github-emoji {
position: relative;
display: inline-block;
width: 1.2em;
min-height: 1.2em;
overflow: hidden;
vertical-align: top;
color: transparent;
}
.github-emoji > span {
position: relative;
z-index: 10;
}
.github-emoji img,
.github-emoji .fancybox {
margin: 0 !important;
padding: 0 !important;
border: none !important;
outline: none !important;
text-decoration: none !important;
user-select: none !important;
cursor: auto !important;
}
.github-emoji img {
height: 1.2em !important;
width: 1.2em !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
user-select: none !important;
cursor: auto !important;
}
.github-emoji-fallback {
color: inherit;
}
.github-emoji-fallback img {
opacity: 0 !important;
}
</style>
```
- **styles** - inline styles. For example:
- **styles** `object={}` - inline styles. For example:
```yaml
githubEmojis:
@ -78,10 +104,10 @@ githubEmojis:
outputs:
```html
<span class="github-emoji" style="font-size:2em;font-weight:bold;background-image:url(...)" ...>
<span class="github-emoji" style="font-size:2em;font-weight:bold" ...>
```
- **customEmojis** - You can specify your own list. An object or JSON string is valid. The filter will first check the `customEmojis` then fallback to the [Github Emojis][ghemojis] list.
- **customEmojis** `object={}` - You can specify your own list. An object or JSON string is valid. The filter will first check the `customEmojis` then fallback to the [Github Emojis][ghemojis] list.
For example:
@ -129,7 +155,7 @@ no-emoji: true
You can also render a GitHub emoji from a template using the `github_emoji` helper:
```html
<h1><% github_emoji('octocat') %></h1>
<h1><%- github_emoji('octocat') %></h1>
```
[ghemojis]: https://api.github.com/emojis