Commit 9d6bbc92 authored by Mike Greiling's avatar Mike Greiling

move glEmojiTag method to emoji helper

parent 27a1348f
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
/* global Flash */ /* global Flash */
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { glEmojiTag } from './behaviors/gl_emoji';
import * as Emoji from './emoji'; import * as Emoji from './emoji';
const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
...@@ -30,7 +29,7 @@ function renderCategory(name, emojiList, opts = {}) { ...@@ -30,7 +29,7 @@ function renderCategory(name, emojiList, opts = {}) {
${emojiList.map(emojiName => ` ${emojiList.map(emojiName => `
<li class="emoji-menu-list-item"> <li class="emoji-menu-list-item">
<button class="emoji-menu-btn text-center js-emoji-btn" type="button"> <button class="emoji-menu-btn text-center js-emoji-btn" type="button">
${glEmojiTag(emojiName, { ${Emoji.glEmojiTag(emojiName, {
sprite: true, sprite: true,
})} })}
</button> </button>
...@@ -369,7 +368,7 @@ export default class AwardsHandler { ...@@ -369,7 +368,7 @@ export default class AwardsHandler {
createAwardButtonForVotesBlock(votesBlock, emojiName) { createAwardButtonForVotesBlock(votesBlock, emojiName) {
const buttonHtml = ` const buttonHtml = `
<button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom"> <button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom">
${glEmojiTag(emojiName)} ${Emoji.glEmojiTag(emojiName)}
<span class="award-control-text js-counter">1</span> <span class="award-control-text js-counter">1</span>
</button> </button>
`; `;
......
import installCustomElements from 'document-register-element'; import installCustomElements from 'document-register-element';
import { emojiMap, normalizeEmojiName } from '../emoji'; import { emojiImageTag, emojiFallbackImageSrc } from '../emoji';
import isEmojiUnicodeSupported from '../emoji/support'; import isEmojiUnicodeSupported from '../emoji/support';
installCustomElements(window); installCustomElements(window);
function emojiImageTag(name, src) { export default function installGlEmojiElement() {
return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
}
function assembleFallbackImageSrc(inputName) {
let name = normalizeEmojiName(inputName);
let emojiInfo = emojiMap[name];
// Fallback to question mark for unknown emojis
if (!emojiInfo) {
name = 'grey_question';
emojiInfo = emojiMap[name];
}
const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
return fallbackImageSrc;
}
function glEmojiTag(inputName, options) {
const opts = { sprite: false, forceFallback: false, ...options };
let name = normalizeEmojiName(inputName);
let emojiInfo = emojiMap[name];
// Fallback to question mark for unknown emojis
if (!emojiInfo) {
name = 'grey_question';
emojiInfo = emojiMap[name];
}
const fallbackImageSrc = assembleFallbackImageSrc(name);
const fallbackSpriteClass = `emoji-${name}`;
const classList = [];
if (opts.forceFallback && opts.sprite) {
classList.push('emoji-icon');
classList.push(fallbackSpriteClass);
}
const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
let contents = emojiInfo.moji;
if (opts.forceFallback && !opts.sprite) {
contents = emojiImageTag(name, fallbackImageSrc);
}
return `
<gl-emoji
${classAttribute}
data-name="${name}"
data-fallback-src="${fallbackImageSrc}"
${fallbackSpriteAttribute}
data-unicode-version="${emojiInfo.unicodeVersion}"
title="${emojiInfo.description}"
>
${contents}
</gl-emoji>
`;
}
function installGlEmojiElement() {
const GlEmojiElementProto = Object.create(HTMLElement.prototype); const GlEmojiElementProto = Object.create(HTMLElement.prototype);
GlEmojiElementProto.createdCallback = function createdCallback() { GlEmojiElementProto.createdCallback = function createdCallback() {
const emojiUnicode = this.textContent.trim(); const emojiUnicode = this.textContent.trim();
...@@ -91,7 +35,7 @@ function installGlEmojiElement() { ...@@ -91,7 +35,7 @@ function installGlEmojiElement() {
} else if (hasImageFallback) { } else if (hasImageFallback) {
this.innerHTML = emojiImageTag(name, fallbackSrc); this.innerHTML = emojiImageTag(name, fallbackSrc);
} else { } else {
const src = assembleFallbackImageSrc(name); const src = emojiFallbackImageSrc(name);
this.innerHTML = emojiImageTag(name, src); this.innerHTML = emojiImageTag(name, src);
} }
} }
...@@ -101,8 +45,3 @@ function installGlEmojiElement() { ...@@ -101,8 +45,3 @@ function installGlEmojiElement() {
prototype: GlEmojiElementProto, prototype: GlEmojiElementProto,
}); });
} }
export {
installGlEmojiElement,
glEmojiTag,
};
import './autosize'; import './autosize';
import './bind_in_out'; import './bind_in_out';
import './details_behavior'; import './details_behavior';
import { installGlEmojiElement } from './gl_emoji'; import installGlEmojiElement from './gl_emoji';
import './quick_submit'; import './quick_submit';
import './requires_input'; import './requires_input';
import './toggler_behavior'; import './toggler_behavior';
......
import emojiMap from 'emojis/digests.json'; import emojiMap from 'emojis/digests.json';
import emojiAliases from 'emojis/aliases.json'; import emojiAliases from 'emojis/aliases.json';
const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)]; export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
function normalizeEmojiName(name) { export function normalizeEmojiName(name) {
return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name; return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name;
} }
function isEmojiNameValid(name) { export function isEmojiNameValid(name) {
return validEmojiNames.indexOf(name) >= 0; return validEmojiNames.indexOf(name) >= 0;
} }
function filterEmojiNames(filter) { export function filterEmojiNames(filter) {
const match = filter.toLowerCase(); const match = filter.toLowerCase();
return validEmojiNames.filter(name => name.indexOf(match) >= 0); return validEmojiNames.filter(name => name.indexOf(match) >= 0);
} }
function filterEmojiNamesByAlias(filter) { export function filterEmojiNamesByAlias(filter) {
return _.uniq(filterEmojiNames(filter).map(name => normalizeEmojiName(name))); return _.uniq(filterEmojiNames(filter).map(name => normalizeEmojiName(name)));
} }
let emojiByCategory; let emojiByCategory;
function getEmojiByCategory(category = null) { export function getEmojiByCategory(category = null) {
if (!emojiByCategory) { if (!emojiByCategory) {
emojiByCategory = { emojiByCategory = {
activity: [], activity: [],
...@@ -43,13 +43,57 @@ function getEmojiByCategory(category = null) { ...@@ -43,13 +43,57 @@ function getEmojiByCategory(category = null) {
return category ? emojiByCategory[category] : emojiByCategory; return category ? emojiByCategory[category] : emojiByCategory;
} }
export { export function getEmojiInfo(query) {
emojiMap, let name = normalizeEmojiName(query);
emojiAliases, let emojiInfo = emojiMap[name];
normalizeEmojiName,
filterEmojiNames, // Fallback to question mark for unknown emojis
filterEmojiNamesByAlias, if (!emojiInfo) {
getEmojiByCategory, name = 'grey_question';
isEmojiNameValid, emojiInfo = emojiMap[name];
validEmojiNames, }
};
return { ...emojiInfo, name };
}
export function emojiFallbackImageSrc(inputName) {
const { name, digest } = getEmojiInfo(inputName);
return `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${digest}.png`;
}
export function emojiImageTag(name, src) {
return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
}
export function glEmojiTag(inputName, options) {
const opts = { sprite: false, forceFallback: false, ...options };
const { name, ...emojiInfo } = getEmojiInfo(inputName);
const fallbackImageSrc = emojiFallbackImageSrc(name);
const fallbackSpriteClass = `emoji-${name}`;
const classList = [];
if (opts.forceFallback && opts.sprite) {
classList.push('emoji-icon');
classList.push(fallbackSpriteClass);
}
const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
let contents = emojiInfo.moji;
if (opts.forceFallback && !opts.sprite) {
contents = emojiImageTag(name, fallbackImageSrc);
}
return `
<gl-emoji
${classAttribute}
data-name="${name}"
data-fallback-src="${fallbackImageSrc}"
${fallbackSpriteAttribute}
data-unicode-version="${emojiInfo.unicodeVersion}"
title="${emojiInfo.description}"
>
${contents}
</gl-emoji>
`;
}
import { glEmojiTag } from './behaviors/gl_emoji'; import { validEmojiNames, glEmojiTag } from './emoji';
import { validEmojiNames } from './emoji';
import glRegexp from './lib/utils/regexp'; import glRegexp from './lib/utils/regexp';
import AjaxCache from './lib/utils/ajax_cache'; import AjaxCache from './lib/utils/ajax_cache';
......
import { glEmojiTag } from '~/behaviors/gl_emoji'; import { glEmojiTag } from '~/emoji';
import isEmojiUnicodeSupported, { import isEmojiUnicodeSupported, {
isFlagEmoji, isFlagEmoji,
isKeycapEmoji, isKeycapEmoji,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment