Externalize class names

examples/src/index.js

@@ -17,7 +17,6 @@ window.addEventListener('DOMContentLoaded', function () {
     picker.togglePicker(button);
   });
 
-
   var twemojiButton = document.querySelector('#twemoji-button');
   var twemojiPicker = new EmojiButton({
     theme: 'auto',

src/categoryButtons.ts

@@ -1,7 +1,6 @@
 import { TinyEmitter as Emitter } from 'tiny-emitter';
 
-const CLASS_CATEGORY_BUTTONS = 'emoji-picker__category-buttons';
-const CLASS_CATEGORY_BUTTON = 'emoji-picker__category-button';
+import { CLASS_CATEGORY_BUTTONS, CLASS_CATEGORY_BUTTON } from './classes';
 
 import emojiData from './data/emoji';
 

src/classes.ts

@@ -0,0 +1,21 @@
+export const CLASS_CATEGORY_BUTTON = 'emoji-picker__category-button';
+export const CLASS_CATEGORY_BUTTONS = 'emoji-picker__category-buttons';
+export const CLASS_CATEGORY_NAME = 'emoji-picker__category-name';
+export const CLASS_EMOJI = 'emoji-picker__emoji';
+export const CLASS_EMOJI_AREA = 'emoji-picker__emoji-area';
+export const CLASS_EMOJI_CONTAINER = 'emoji-picker__container';
+export const CLASS_EMOJIS = 'emoji-picker__emojis';
+export const CLASS_NOT_FOUND = 'emoji-picker__search-not-found';
+export const CLASS_NOT_FOUND_ICON = 'emoji-picker__search-not-found-icon';
+export const CLASS_OVERLAY = 'emoji-picker__overlay';
+export const CLASS_PICKER = 'emoji-picker';
+export const CLASS_PICKER_CONTENT = 'emoji-picker__content';
+export const CLASS_PREVIEW = 'emoji-picker__preview';
+export const CLASS_PREVIEW_EMOJI = 'emoji-picker__preview-emoji';
+export const CLASS_PREVIEW_NAME = 'emoji-picker__preview-name';
+export const CLASS_SEARCH_CONTAINER = 'emoji-picker__search-container';
+export const CLASS_SEARCH_FIELD = 'emoji-picker__search';
+export const CLASS_SEARCH_ICON = 'emoji-picker__search-icon';
+export const CLASS_VARIANT_OVERLAY = 'emoji-picker__variant-overlay';
+export const CLASS_VARIANT_POPUP = 'emoji-picker__variant-popup';
+export const CLASS_WRAPPER = 'emoji-picker__wrapper';

src/emoji.ts

@@ -6,9 +6,9 @@ import { smile } from './icons';
 import { save } from './recent';
 import { createElement } from './util';
 
-import { EmojiButtonOptions, EmojiRecord } from './types';
+import { CLASS_EMOJI } from './classes';
 
-const CLASS_EMOJI = 'emoji-picker__emoji';
+import { EmojiButtonOptions, EmojiRecord } from './types';
 
 export class Emoji {
   private emojiButton: HTMLElement;

src/emojiArea.ts

@@ -3,6 +3,14 @@ import { TinyEmitter as Emitter } from 'tiny-emitter';
 import emojiData from './data/emoji';
 import { i18n as defaultI18n } from './i18n';
 
+import {
+  CLASS_EMOJI_CONTAINER,
+  CLASS_EMOJI,
+  CLASS_EMOJI_AREA,
+  CLASS_EMOJIS,
+  CLASS_CATEGORY_NAME
+} from './classes';
+
 import { CategoryButtons } from './categoryButtons';
 import { EmojiContainer } from './emojiContainer';
 
@@ -56,7 +64,7 @@ export class EmojiArea {
     if (this.options.showRecents) {
       emojiCategories.recents = load();
       const recentsContainer = this.emojis.querySelector(
-        '.emoji-picker__container'
+        `.${CLASS_EMOJI_CONTAINER}`
       ) as HTMLElement;
       if (recentsContainer && recentsContainer.parentNode) {
         recentsContainer.parentNode.replaceChild(
@@ -74,7 +82,7 @@ export class EmojiArea {
   }
 
   render(): HTMLElement {
-    this.container = createElement('div', 'emoji-picker__emoji-area');
+    this.container = createElement('div', CLASS_EMOJI_AREA);
 
     if (this.options.showCategoryButtons) {
       this.categoryButtons = new CategoryButtons(
@@ -85,7 +93,7 @@ export class EmojiArea {
       this.container.appendChild(this.categoryButtons.render());
     }
 
-    this.emojis = createElement('div', 'emoji-picker__emojis');
+    this.emojis = createElement('div', CLASS_EMOJIS);
 
     if (this.options.showRecents) {
       emojiCategories.recents = load();
@@ -110,7 +118,7 @@ export class EmojiArea {
     this.container.appendChild(this.emojis);
 
     const firstEmoji = this.container.querySelectorAll(
-      '.emoji-picker__emoji'
+      `.${CLASS_EMOJI}`
     )[0] as HTMLElement;
     firstEmoji.tabIndex = 0;
 
@@ -132,27 +140,26 @@ export class EmojiArea {
   }
 
   private get currentCategoryEl(): HTMLElement {
-    return this.emojis.querySelectorAll('.emoji-picker__container')[
+    return this.emojis.querySelectorAll(`.${CLASS_EMOJI_CONTAINER}`)[
       this.currentCategory
     ] as HTMLElement;
   }
 
   private get focusedEmoji(): HTMLElement {
-    return this.currentCategoryEl.querySelectorAll('.emoji-picker__emoji')[
+    return this.currentCategoryEl.querySelectorAll(`.${CLASS_EMOJI}`)[
       this.focusedIndex
     ] as HTMLElement;
   }
 
   private get currentEmojiCount(): number {
-    return this.currentCategoryEl.querySelectorAll('.emoji-picker__emoji')
-      .length;
+    return this.currentCategoryEl.querySelectorAll(`.${CLASS_EMOJI}`).length;
   }
 
   private getEmojiCount(category: number): number {
-    const container = this.emojis.querySelectorAll('.emoji-picker__container')[
+    const container = this.emojis.querySelectorAll(`.${CLASS_EMOJI_CONTAINER}`)[
       category
     ] as HTMLElement;
-    return container.querySelectorAll('.emoji-picker__emoji').length;
+    return container.querySelectorAll(`.${CLASS_EMOJI}`).length;
   }
 
   private handleKeyDown = (event: KeyboardEvent): void => {
@@ -256,7 +263,7 @@ export class EmojiArea {
     category: string,
     emojis: Array<EmojiRecord | RecentEmoji>
   ): void => {
-    const name = createElement('h2', 'emoji-picker__category-name');
+    const name = createElement('h2', CLASS_CATEGORY_NAME);
     name.innerHTML =
       this.i18n.categories[category] || defaultI18n.categories[category];
     this.emojis.appendChild(name);

src/emojiContainer.ts

@@ -3,9 +3,9 @@ import { TinyEmitter as Emitter } from 'tiny-emitter';
 import { Emoji } from './emoji';
 import { createElement } from './util';
 
-import { EmojiButtonOptions, EmojiRecord, RecentEmoji } from './types';
+import { CLASS_EMOJI_CONTAINER } from './classes';
 
-const CLASS_EMOJI_CONTAINER = 'emoji-picker__container';
+import { EmojiButtonOptions, EmojiRecord, RecentEmoji } from './types';
 
 export class EmojiContainer {
   private emojis: Array<EmojiRecord | RecentEmoji>;

src/index.ts

@@ -20,13 +20,19 @@ import { VariantPopup } from './variantPopup';
 
 import { i18n } from './i18n';
 
+import {
+  CLASS_PICKER,
+  CLASS_PICKER_CONTENT,
+  CLASS_EMOJI,
+  CLASS_SEARCH_FIELD,
+  CLASS_VARIANT_OVERLAY,
+  CLASS_WRAPPER,
+  CLASS_OVERLAY
+} from './classes';
+
 import { EmojiButtonOptions, I18NStrings, EmojiRecord } from './types';
 import { EmojiArea } from './emojiArea';
 
-const CLASS_PICKER = 'emoji-picker';
-const CLASS_PICKER_CONTENT = 'emoji-picker__content';
-
-// Options for twemoji.parse(emoji, twemojiOptions)
 const twemojiOptions = {
   ext: '.svg',
   folder: 'svg'
@@ -216,7 +222,7 @@ export class EmojiButton {
       }
     );
 
-    this.wrapper = createElement('div', 'wrapper');
+    this.wrapper = createElement('div', CLASS_WRAPPER);
     this.wrapper.appendChild(this.pickerEl);
     this.wrapper.style.display = 'none';
 
@@ -280,7 +286,7 @@ export class EmojiButton {
       });
 
       const emojiElements = this.emojiArea.emojis.querySelectorAll(
-        '.emoji-picker__emoji'
+        `.${CLASS_EMOJI}`
       );
 
       emojiElements.forEach(element => {
@@ -327,14 +333,14 @@ export class EmojiButton {
       }
 
       const searchField = this.pickerEl.querySelector(
-        '.emoji-picker__search'
+        `.${CLASS_SEARCH_FIELD}`
       ) as HTMLInputElement;
       if (searchField) {
         searchField.value = '';
       }
 
       const variantOverlay = this.pickerEl.querySelector(
-        '.emoji-picker__variant-overlay'
+        `.${CLASS_VARIANT_OVERLAY}`
       );
       if (variantOverlay) {
         this.events.emit(HIDE_VARIANT_POPUP);
@@ -370,7 +376,7 @@ export class EmojiButton {
       this.wrapper.style.left = `${newLeft}px`;
       this.wrapper.style.zIndex = '5000';
 
-      this.overlay = createElement('div', 'emoji-picker__overlay');
+      this.overlay = createElement('div', CLASS_OVERLAY);
       document.body.appendChild(this.overlay);
     } else {
       this.popper = createPopper(referenceEl, this.wrapper, {
@@ -382,8 +388,8 @@ export class EmojiButton {
 
     const initialFocusElement = this.pickerEl.querySelector(
       this.options.showSearch && this.options.autoFocusSearch
-        ? '.emoji-picker__search'
-        : '.emoji-picker__emoji[tabindex="0"]'
+        ? `.${CLASS_SEARCH_FIELD}`
+        : `.${CLASS_EMOJI}[tabindex="0"]`
     ) as HTMLElement;
     initialFocusElement.focus();
 
@@ -411,7 +417,7 @@ export class EmojiButton {
       this.pickerEl.classList.add('keyboard');
     } else if (event.key.match(/^[\w]$/)) {
       const searchField = this.pickerEl.querySelector(
-        '.emoji-picker__search'
+        `.${CLASS_SEARCH_FIELD}`
       ) as HTMLInputElement;
       searchField && searchField.focus();
     }

src/preview.ts

@@ -6,11 +6,12 @@ import { SHOW_PREVIEW, HIDE_PREVIEW } from './events';
 import { createElement } from './util';
 import { EmojiRecord, EmojiButtonOptions } from './types';
 
-const CLASS_PREVIEW = 'emoji-picker__preview';
-const CLASS_PREVIEW_EMOJI = 'emoji-picker__preview-emoji';
-const CLASS_PREVIEW_NAME = 'emoji-picker__preview-name';
+import {
+  CLASS_PREVIEW,
+  CLASS_PREVIEW_EMOJI,
+  CLASS_PREVIEW_NAME
+} from './classes';
 
-// Options for twemoji.parse(emoji, twemojiOptions)
 const twemojiOptions = {
   ext: '.svg',
   folder: 'svg'

src/search.ts

@@ -12,11 +12,14 @@ import {
 import { createElement } from './util';
 import { I18NStrings, EmojiButtonOptions, EmojiRecord } from './types';
 
-const CLASS_SEARCH_CONTAINER = 'emoji-picker__search-container';
-const CLASS_SEARCH_FIELD = 'emoji-picker__search';
-const CLASS_SEARCH_ICON = 'emoji-picker__search-icon';
-const CLASS_NOT_FOUND = 'emoji-picker__search-not-found';
-const CLASS_NOT_FOUND_ICON = 'emoji-picker__search-not-found-icon';
+import {
+  CLASS_SEARCH_CONTAINER,
+  CLASS_SEARCH_FIELD,
+  CLASS_SEARCH_ICON,
+  CLASS_NOT_FOUND,
+  CLASS_NOT_FOUND_ICON,
+  CLASS_EMOJI
+} from './classes';
 
 class NotFoundMessage {
   constructor(private message: string) {}
@@ -111,9 +114,7 @@ export class Search {
 
   setFocusedEmoji(index: number): void {
     if (this.resultsContainer) {
-      const emojis = this.resultsContainer.querySelectorAll(
-        '.emoji-picker__emoji'
-      );
+      const emojis = this.resultsContainer.querySelectorAll(`.${CLASS_EMOJI}`);
       const currentFocusedEmoji = emojis[this.focusedEmojiIndex] as HTMLElement;
       currentFocusedEmoji.tabIndex = -1;
 
@@ -126,9 +127,7 @@ export class Search {
 
   handleResultsKeydown(event: KeyboardEvent): void {
     if (this.resultsContainer) {
-      const emojis = this.resultsContainer.querySelectorAll(
-        '.emoji-picker__emoji'
-      );
+      const emojis = this.resultsContainer.querySelectorAll(`.${CLASS_EMOJI}`);
       if (event.key === 'ArrowRight') {
         this.setFocusedEmoji(
           Math.min(this.focusedEmojiIndex + 1, emojis.length - 1)
@@ -185,7 +184,7 @@ export class Search {
 
         if (this.resultsContainer) {
           (this.resultsContainer.querySelector(
-            '.emoji-picker__emoji'
+            `.${CLASS_EMOJI}`
           ) as HTMLElement).tabIndex = 0;
           this.focusedEmojiIndex = 0;
 

src/variantPopup.ts

@@ -7,8 +7,11 @@ import { HIDE_VARIANT_POPUP } from './events';
 
 import { EmojiRecord, EmojiButtonOptions } from './types';
 
-const CLASS_OVERLAY = 'emoji-picker__variant-overlay';
-const CLASS_POPUP = 'emoji-picker__variant-popup';
+import {
+  CLASS_VARIANT_OVERLAY,
+  CLASS_VARIANT_POPUP,
+  CLASS_EMOJI
+} from './classes';
 
 export class VariantPopup {
   private popup: HTMLElement;
@@ -21,7 +24,7 @@ export class VariantPopup {
   ) {}
 
   getEmoji(index: number): Element {
-    return this.popup.querySelectorAll('.emoji-picker__emoji')[index];
+    return this.popup.querySelectorAll(`.${CLASS_EMOJI}`)[index];
   }
 
   setFocusedEmoji(newIndex: number): void {
@@ -39,9 +42,9 @@ export class VariantPopup {
   }
 
   render(): HTMLElement {
-    this.popup = createElement('div', CLASS_POPUP);
+    this.popup = createElement('div', CLASS_VARIANT_POPUP);
 
-    const overlay = createElement('div', CLASS_OVERLAY);
+    const overlay = createElement('div', CLASS_VARIANT_OVERLAY);
     overlay.addEventListener('click', (event: MouseEvent) => {
       event.stopPropagation();
 
@@ -79,7 +82,7 @@ export class VariantPopup {
     );
 
     const firstEmoji = this.popup.querySelector(
-      '.emoji-picker__emoji'
+      `.${CLASS_EMOJI}`
     ) as HTMLElement;
     this.focusedEmojiIndex = 0;
     firstEmoji.tabIndex = 0;
@@ -91,7 +94,7 @@ export class VariantPopup {
         this.setFocusedEmoji(
           Math.min(
             this.focusedEmojiIndex + 1,
-            this.popup.querySelectorAll('.emoji-picker__emoji').length - 1
+            this.popup.querySelectorAll(`.${CLASS_EMOJI}`).length - 1
           )
         );
       } else if (event.key === 'ArrowLeft') {