feat: Localization feature was added nhn#45

README.md

@@ -247,12 +247,18 @@ Add dependencies & initialize ImageEditor class with given element to make an im
 ```javascript
 var ImageEditor = require('tui-image-editor');
 var blackTheme = require('./js/theme/black-theme.js');
+var locale_ru = { // override default English locale to your custom
+ 'Crop': 'Обзрезать',
+ 'Delete-all': 'Удалить всё'
+ // etc...
+};
 var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  includeUI: {
  loadImage: {
  path: 'img/sampleImage.jpg',
  name: 'SampleImage'
  },
+ locale: locale_ru,
  theme: blackTheme, // or whiteTheme
  initMenu: 'filter',
  menuBarPosition: 'bottom'

src/js/ui.js

@@ -13,6 +13,7 @@ import Mask from './ui/mask';
 import Icon from './ui/icon';
 import Draw from './ui/draw';
 import Filter from './ui/filter';
+import Locale from './ui/locale/locale';
 
 const SUB_UI_COMPONENT = {
  Shape,
@@ -45,11 +46,11 @@ const BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';
 class Ui {
  constructor(element, options, actions) {
  this.options = this._initializeOption(options);
-
  this._actions = actions;
  this.submenu = false;
  this.imageSize = {};
  this.uiSize = {};
+ this._locale = new Locale(this.options.locale);
  this.theme = new Theme(this.options.theme);
 
  this._submenuChangeTransection = false;
@@ -231,6 +232,7 @@ class Ui {
  path: '',
  name: ''
  },
+ locale: {},
  menuIconPath: '',
  menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
  initMenu: false,
@@ -271,6 +273,7 @@ class Ui {
 
  // submenu ui instance
  this[menuName] = new SubComponentClass(this._subMenuElement, {
+ locale: this._locale,
  iconStyle: this.theme.getStyle('submenu.icon'),
  menuBarPosition: this.options.menuBarPosition
  });
@@ -298,12 +301,14 @@ class Ui {
 
  selectedElement.classList.add('tui-image-editor-container');
  selectedElement.innerHTML = controls({
+ locale: this._locale,
  biImage: this.theme.getStyle('common.bi'),
  iconStyle: this.theme.getStyle('menu.icon'),
  loadButtonStyle: this.theme.getStyle('loadButton'),
  downloadButtonStyle: this.theme.getStyle('downloadButton')
  }) +
  mainContainer({
+ locale: this._locale,
  biImage: this.theme.getStyle('common.bi'),
  commonStyle: this.theme.getStyle('common'),
  headerStyle: this.theme.getStyle('header'),
@@ -340,7 +345,7 @@ class Ui {
 
  btnElement.id = `tie-btn-${menuName}`;
  btnElement.className = 'tui-image-editor-item normal';
- btnElement.title = menuName.replace(/^[a-z]/g, $0 => $0.toUpperCase());
+ btnElement.title = this._locale.localize(menuName.replace(/^[a-z]/g, $0 => $0.toUpperCase()));
  btnElement.innerHTML = menuItemHtml;
 
  this._menuElement.appendChild(btnElement);

src/js/ui/crop.js

@@ -8,8 +8,9 @@ import templateHtml from './template/submenu/crop';
  * @ignore
  */
 class Crop extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'crop',
  iconStyle,
  menuBarPosition,

src/js/ui/draw.js

@@ -12,8 +12,9 @@ const DRAW_OPACITY = 0.7;
  * @ignore
  */
 class Draw extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'draw',
  iconStyle,
  menuBarPosition,

src/js/ui/filter.js

@@ -33,8 +33,9 @@ const FILTER_OPTIONS = [
  * @ignore
  */
 class Filter extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'filter',
  iconStyle,
  menuBarPosition,

src/js/ui/flip.js

@@ -8,8 +8,9 @@ import templateHtml from './template/submenu/flip';
  * @ignore
  */
 class Flip extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'flip',
  iconStyle,
  menuBarPosition,

src/js/ui/icon.js

@@ -11,8 +11,9 @@ import {defaultIconPath} from '../consts';
  * @ignore
  */
 class Icon extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'icon',
  iconStyle,
  menuBarPosition,

src/js/ui/locale/locale.js

@@ -0,0 +1,19 @@
+/**
+ * Translate messages
+ */
+class Locale {
+ constructor(locale) {
+ this._locale = locale;
+ }
+
+ /**
+ * localize message
+ * @param {string} message - message who will be localized
+ * @returns {string}
+ */
+ localize(message) {
+ return (this._locale[message]) ? this._locale[message] : message;
+ }
+}
+
+export default Locale;

src/js/ui/mask.js

@@ -8,8 +8,9 @@ import templateHtml from './template/submenu/mask';
  * @ignore
  */
 class Mask extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'mask',
  iconStyle,
  menuBarPosition,

src/js/ui/rotate.js

@@ -13,8 +13,9 @@ const COUNTERCLOCKWISE = -30;
  * @ignore
  */
 class Rotate extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'rotate',
  iconStyle,
  menuBarPosition,

src/js/ui/shape.js

@@ -17,8 +17,9 @@ const SHAPE_DEFAULT_OPTION = {
  * @ignore
  */
 class Shape extends Submenu {
- constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+ constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
  super(subMenuElement, {
+ locale,
  name: 'shape',
  iconStyle,
  menuBarPosition,

src/js/ui/submenuBase.js

@@ -4,12 +4,21 @@
  * @ignore
  */
 class Submenu {
- constructor(subMenuElement, {name, iconStyle, menuBarPosition, templateHtml}) {
+ /**
+ * @param {HTMLElement} subMenuElement - submenu dom element
+ * @param {Locale} locale - translate text
+ * @param {string} name - name of sub menu
+ * @param {Object} iconStyle - style of icon
+ * @param {string} menuBarPosition - position of menu
+ * @param {*} templateHtml - template for SubMenuElement
+ */
+ constructor(subMenuElement, {locale, name, iconStyle, menuBarPosition, templateHtml}) {
  this.selector = str => subMenuElement.querySelector(str);
  this.menuBarPosition = menuBarPosition;
  this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';
  this.colorPickerControls = [];
  this._makeSubMenuElement(subMenuElement, {
+ locale,
  name,
  iconStyle,
  templateHtml
@@ -59,14 +68,20 @@ class Submenu {
 
  /**
  * Make submenu dom element
- * @param {HTMLElement} subMenuElement - subment dom element
+ * @param {HTMLElement} subMenuElement - submenu dom element
+ * @param {Locale} locale - translate text
+ * @param {string} name - submenu name
  * @param {Object} iconStyle - icon style
+ * @param {*} templateHtml - template for SubMenuElement
  * @private
  */
- _makeSubMenuElement(subMenuElement, {name, iconStyle, templateHtml}) {
+ _makeSubMenuElement(subMenuElement, {locale, name, iconStyle, templateHtml}) {
  const iconSubMenu = document.createElement('div');
  iconSubMenu.className = `tui-image-editor-menu-${name}`;
- iconSubMenu.innerHTML = templateHtml({iconStyle});
+ iconSubMenu.innerHTML = templateHtml({
+ locale,
+ iconStyle
+ });
 
  subMenuElement.appendChild(iconSubMenu);
  }

src/js/ui/template/controls.js

@@ -1,24 +1,24 @@
-export default ({biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle, downloadButtonStyle}) => (`
+export default ({locale, biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle, downloadButtonStyle}) => (`
  <div class="tui-image-editor-controls">
  <div class="tui-image-editor-controls-logo">
  <img src="${biImage}" />
  </div>
  <ul class="tui-image-editor-menu">
- <li id="tie-btn-undo" class="tui-image-editor-item" title="Undo">
+ <li id="tie-btn-undo" class="tui-image-editor-item" title="${locale.localize('Undo')}">
  <svg class="svg_ic-menu">
  <use xlink:href="${normal.path}#${normal.name}-ic-undo" class="enabled"/>
  <use xlink:href="${disabled.path}#${disabled.name}-ic-undo" class="normal"/>
  <use xlink:href="${hover.path}#${hover.name}-ic-undo" class="hover"/>
  </svg>
  </li>
- <li id="tie-btn-redo" class="tui-image-editor-item" title="Redo">
+ <li id="tie-btn-redo" class="tui-image-editor-item" title="${locale.localize('Redo')}">
  <svg class="svg_ic-menu">
  <use xlink:href="${normal.path}#${normal.name}-ic-redo" class="enabled"/>
  <use xlink:href="${disabled.path}#${disabled.name}-ic-redo" class="normal"/>
  <use xlink:href="${hover.path}#${hover.name}-ic-redo" class="hover"/>
  </svg>
  </li>
- <li id="tie-btn-reset" class="tui-image-editor-item" title="Reset">
+ <li id="tie-btn-reset" class="tui-image-editor-item" title="${locale.localize('Reset')}">
  <svg class="svg_ic-menu">
  <use xlink:href="${normal.path}#${normal.name}-ic-reset" class="enabled"/>
  <use xlink:href="${disabled.path}#${disabled.name}-ic-reset" class="normal"/>
@@ -28,14 +28,14 @@ export default ({biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle,
  <li class="tui-image-editor-item">
  <div class="tui-image-editor-icpartition"></div>
  </li>
- <li id="tie-btn-delete" class="tui-image-editor-item" title="Delete">
+ <li id="tie-btn-delete" class="tui-image-editor-item" title="${locale.localize('Delete')}">
  <svg class="svg_ic-menu">
  <use xlink:href="${normal.path}#${normal.name}-ic-delete" class="enabled"/>
  <use xlink:href="${disabled.path}#${disabled.name}-ic-delete" class="normal"/>
  <use xlink:href="${hover.path}#${hover.name}-ic-delete" class="hover"/>
  </svg>
  </li>
- <li id="tie-btn-delete-all" class="tui-image-editor-item" title="Delete-all">
+ <li id="tie-btn-delete-all" class="tui-image-editor-item" title="${locale.localize('Delete-all')}">
  <svg class="svg_ic-menu">
  <use xlink:href="${normal.path}#${normal.name}-ic-delete-all" class="enabled"/>
  <use xlink:href="${disabled.path}#${disabled.name}-ic-delete-all" class="normal"/>
@@ -49,11 +49,11 @@ export default ({biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle,
 
  <div class="tui-image-editor-controls-buttons">
  <button style="${loadButtonStyle}">
- Load
+ ${locale.localize('Load')}
  <input type="file" class="tui-image-editor-load-btn" />
  </button>
  <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
- Download
+ ${locale.localize('Download')}
  </button>
  </div>
  </div>

src/js/ui/template/mainContainer.js

@@ -1,16 +1,16 @@
-export default ({biImage, commonStyle, headerStyle, loadButtonStyle, downloadButtonStyle, submenuStyle}) => (`
+export default ({locale, biImage, commonStyle, headerStyle, loadButtonStyle, downloadButtonStyle, submenuStyle}) => (`
  <div class="tui-image-editor-main-container" style="${commonStyle}">
  <div class="tui-image-editor-header" style="${headerStyle}">
  <div class="tui-image-editor-header-logo">
  <img style='display:none' src="${biImage}" />
  </div>
  <div class="tui-image-editor-header-buttons">
  <button style="${loadButtonStyle}">
- Load
+ ${locale.localize('Load')}
  <input type="file" class="tui-image-editor-load-btn" />
  </button>
  <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
- Download
+ ${locale.localize('Download')}
  </button>
  </div>
  </div>