Merge branch 'master' into chore/documentForSvgIconSetting

src/js/ui.js

@@ -225,7 +225,7 @@ class Ui {
  // submenu ui instance
  this[menuName] = new SubComponentClass(this._subMenuElement, {
  locale: this._locale,
- svgIconMaker: this.theme.makeMenSvgIconSet.bind(this.theme),
+ makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),
  menuBarPosition: this.options.menuBarPosition,
  usageStatistics: this.options.usageStatistics
  });
@@ -282,23 +282,34 @@ class Ui {
  this._addHelpMenus();
  }
 
+ /**
+ * make array for help menu output, including partitions.
+ * @returns {Array}
+ * @private
+ */
+ _makeHelpMenuWithPartition() {
+ const helpMenuWithPartition = [...HELP_MENUS, ''];
+ helpMenuWithPartition.splice(3, 0, '');
+
+ return helpMenuWithPartition;
+ }
+
  /**
  * Add help menu
  * @private
  */
  _addHelpMenus() {
- const helpMenuWithPartition = [...HELP_MENUS.slice(0, 3), '', ...HELP_MENUS.slice(3), ''];
+ const helpMenuWithPartition = this._makeHelpMenuWithPartition();
 
  snippet.forEach(helpMenuWithPartition, menuName => {
  if (!menuName) {
  this._makeMenuPartitionElement();
+ } else {
+ this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');
 
- return;
- }
-
- this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');
- if (menuName) {
- this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
+ if (menuName) {
+ this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
+ }
  }
  });
  }
@@ -310,8 +321,8 @@ class Ui {
  _makeMenuPartitionElement() {
  const partitionElement = document.createElement('li');
  const partitionInnerElement = document.createElement('div');
- partitionElement.className = 'tui-image-editor-item';
- partitionInnerElement.className = 'tui-image-editor-icpartition';
+ partitionElement.className = util.cls('item');
+ partitionInnerElement.className = util.cls('icpartition');
  partitionElement.appendChild(partitionInnerElement);
 
  this._menuElement.appendChild(partitionElement);
@@ -329,7 +340,7 @@ class Ui {
  const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);
 
  this._addTooltipAttribute(btnElement, menuName);
- btnElement.className = `tie-btn-${menuName} tui-image-editor-item ${menuType}`;
+ btnElement.className = `tie-btn-${menuName} ${util.cls('item')} ${menuType}`;
  btnElement.innerHTML = menuItemHtml;
 
  this._menuElement.appendChild(btnElement);

src/js/ui/crop.js

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

src/js/ui/draw.js

@@ -12,11 +12,11 @@ const DRAW_OPACITY = 0.7;
  * @ignore
  */
 class Draw extends Submenu {
- constructor(subMenuElement, {locale, svgIconMaker, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'draw',
- svgIconMaker,
+ makeSvgIcon,
  menuBarPosition,
  templateHtml,
  usageStatistics

src/js/ui/flip.js

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

src/js/ui/icon.js

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

src/js/ui/mask.js

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

src/js/ui/rotate.js

@@ -13,11 +13,11 @@ const COUNTERCLOCKWISE = -30;
  * @ignore
  */
 class Rotate extends Submenu {
- constructor(subMenuElement, {locale, svgIconMaker, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'rotate',
- svgIconMaker,
+ makeSvgIcon,
  menuBarPosition,
  templateHtml,
  usageStatistics

src/js/ui/shape.js

@@ -17,11 +17,11 @@ const SHAPE_DEFAULT_OPTION = {
  * @ignore
  */
 class Shape extends Submenu {
- constructor(subMenuElement, {locale, svgIconMaker, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'shape',
- svgIconMaker,
+ makeSvgIcon,
  menuBarPosition,
  templateHtml,
  usageStatistics

src/js/ui/submenuBase.js

@@ -13,7 +13,7 @@ class Submenu {
  * @param {*} templateHtml - template for SubMenuElement
  * @param {boolean} [usageStatistics=false] - template for SubMenuElement
  */
- constructor(subMenuElement, {locale, name, svgIconMaker, menuBarPosition, templateHtml, usageStatistics}) {
+ constructor(subMenuElement, {locale, name, makeSvgIcon, menuBarPosition, templateHtml, usageStatistics}) {
  this.subMenuElement = subMenuElement;
  this.menuBarPosition = menuBarPosition;
  this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';
@@ -23,7 +23,7 @@ class Submenu {
  this._makeSubMenuElement({
  locale,
  name,
- svgIconMaker,
+ makeSvgIcon,
  templateHtml
  });
  }
@@ -90,13 +90,13 @@ class Submenu {
  * @param {*} templateHtml - template for SubMenuElement
  * @private
  */
- _makeSubMenuElement({locale, name, iconStyle, svgIconMaker, templateHtml}) {
+ _makeSubMenuElement({locale, name, iconStyle, makeSvgIcon, templateHtml}) {
  const iconSubMenu = document.createElement('div');
  iconSubMenu.className = `tui-image-editor-menu-${name}`;
  iconSubMenu.innerHTML = templateHtml({
  locale,
  iconStyle,
- svgIconMaker
+ makeSvgIcon
  });
 
  this.subMenuElement.appendChild(iconSubMenu);

src/js/ui/template/submenu/crop.js

@@ -1,51 +1,51 @@
 /**
  * @param {Object} submenuInfo - submenu info for make template
  * @param {Locale} locale - Translate text
- * @param {Function} svgIconMaker - svg icon generator
+ * @param {Function} makeSvgIcon - svg icon generator
  * @returns {string}
  */
-export default ({locale, svgIconMaker}) => (`
+export default ({locale, makeSvgIcon}) => (`
  <ul class="tui-image-editor-submenu-item">
  <li class="tie-crop-preset-button">
  <div class="tui-image-editor-button preset preset-none active">
  <div>
- ${svgIconMaker(['normal', 'active'], 'shape-rectangle', true)}
+ ${makeSvgIcon(['normal', 'active'], 'shape-rectangle', true)}
  </div>
  <label> ${locale.localize('Custom')} </label>
  </div>
  <div class="tui-image-editor-button preset preset-square">
  <div>
- ${svgIconMaker(['normal', 'active'], 'crop', true)}
+ ${makeSvgIcon(['normal', 'active'], 'crop', true)}
  </div>
  <label> ${locale.localize('Square')} </label>
  </div>
  <div class="tui-image-editor-button preset preset-3-2">
  <div>
- ${svgIconMaker(['normal', 'active'], 'crop', true)}
+ ${makeSvgIcon(['normal', 'active'], 'crop', true)}
  </div>
  <label> ${locale.localize('3:2')} </label>
  </div>
  <div class="tui-image-editor-button preset preset-4-3">
  <div>
- ${svgIconMaker(['normal', 'active'], 'crop', true)}
+ ${makeSvgIcon(['normal', 'active'], 'crop', true)}
  </div>
  <label> ${locale.localize('4:3')} </label>
  </div>
  <div class="tui-image-editor-button preset preset-5-4">
  <div>
- ${svgIconMaker(['normal', 'active'], 'crop', true)}
+ ${makeSvgIcon(['normal', 'active'], 'crop', true)}
  </div>
  <label> ${locale.localize('5:4')} </label>
  </div>
  <div class="tui-image-editor-button preset preset-7-5">
  <div>
- ${svgIconMaker(['normal', 'active'], 'crop', true)}
+ ${makeSvgIcon(['normal', 'active'], 'crop', true)}
  </div>
  <label> ${locale.localize('7:5')} </label>
  </div>
  <div class="tui-image-editor-button preset preset-16-9">
  <div>
- ${svgIconMaker(['normal', 'active'], 'crop', true)}
+ ${makeSvgIcon(['normal', 'active'], 'crop', true)}
  </div>
  <label> ${locale.localize('16:9')} </label>
  </div>
@@ -57,13 +57,13 @@ export default ({locale, svgIconMaker}) => (`
  </li>
  <li class="tie-crop-button action">
  <div class="tui-image-editor-button apply">
- ${svgIconMaker(['normal', 'active'], 'apply')}
+ ${makeSvgIcon(['normal', 'active'], 'apply')}
  <label>
  ${locale.localize('Apply')}
  </label>
  </div>
  <div class="tui-image-editor-button cancel">
- ${svgIconMaker(['normal', 'active'], 'cancel')}
+ ${makeSvgIcon(['normal', 'active'], 'cancel')}
  <label>
  ${locale.localize('Cancel')}
  </label>

src/js/ui/template/submenu/draw.js

@@ -1,23 +1,23 @@
 /**
  * @param {Object} submenuInfo - submenu info for make template
  * @param {Locale} locale - Translate text
- * @param {Function} svgIconMaker - svg icon generator
+ * @param {Function} makeSvgIcon - svg icon generator
  * @returns {string}
  */
-export default ({locale, svgIconMaker}) => (`
+export default ({locale, makeSvgIcon}) => (`
  <ul class="tui-image-editor-submenu-item">
  <li class="tie-draw-line-select-button">
  <div class="tui-image-editor-button free">
  <div>
- ${svgIconMaker(['normal', 'active'], 'draw-free', true)}
+ ${makeSvgIcon(['normal', 'active'], 'draw-free', true)}
  </div>
  <label>
  ${locale.localize('Free')}
  </label>
  </div>
  <div class="tui-image-editor-button line">
  <div>
- ${svgIconMaker(['normal', 'active'], 'draw-line', true)}
+ ${makeSvgIcon(['normal', 'active'], 'draw-line', true)}
  </div>
  <label>
  ${locale.localize('Straight')}

src/js/ui/template/submenu/flip.js

@@ -1,23 +1,23 @@
 /**
  * @param {Object} submenuInfo - submenu info for make template
  * @param {Locale} locale - Translate text
- * @param {Function} svgIconMaker - svg icon generator
+ * @param {Function} makeSvgIcon - svg icon generator
  * @returns {string}
  */
-export default ({locale, svgIconMaker}) => (`
+export default ({locale, makeSvgIcon}) => (`
  <ul class="tie-flip-button tui-image-editor-submenu-item">
  <li>
  <div class="tui-image-editor-button flipX">
  <div>
- ${svgIconMaker(['normal', 'active'], 'flip-x', true)}
+ ${makeSvgIcon(['normal', 'active'], 'flip-x', true)}
  </div>
  <label>
  ${locale.localize('Flip X')}
  </label>
  </div>
  <div class="tui-image-editor-button flipY">
  <div>
- ${svgIconMaker(['normal', 'active'], 'flip-y', true)}
+ ${makeSvgIcon(['normal', 'active'], 'flip-y', true)}
  </div>
  <label>
  ${locale.localize('Flip Y')}
@@ -30,7 +30,7 @@ export default ({locale, svgIconMaker}) => (`
  <li>
  <div class="tui-image-editor-button resetFlip">
  <div>
- ${svgIconMaker(['normal', 'active'], 'flip-reset', true)}
+ ${makeSvgIcon(['normal', 'active'], 'flip-reset', true)}
  </div>
  <label>
  ${locale.localize('Reset')}