feat: complate default icon code

src/css/icon.styl

@@ -30,5 +30,11 @@
  .active svg > use.normal,
  .enabled svg > use.normal
  display: none;
+ .help svg > use.disabled,
+ .help.enabled svg > use.normal
+ display: block;
+ .help.enabled svg > use.disabled
+ display: none;
+
  .{prefix}-controls:hover
  z-index: 3;

src/js/ui.js

@@ -2,7 +2,7 @@ import snippet from 'tui-code-snippet';
 import {HELP_MENUS} from './consts';
 import util from './util';
 import mainContainer from './ui/template/mainContainer';
-import {controls, partition} from './ui/template/controls';
+import controls from './ui/template/controls';
 
 import Theme from './ui/theme/theme';
 import Shape from './ui/shape';
@@ -161,7 +161,6 @@ class Ui {
  * @ignore
  */
  changeHelpButtonEnabled(buttonType, enableStatus) {
- console.log(buttonType, this._buttonElements[buttonType]);
  const buttonClassList = this._buttonElements[buttonType].classList;
 
  buttonClassList[enableStatus ? 'add' : 'remove']('enabled');
@@ -226,7 +225,6 @@ class Ui {
  // submenu ui instance
  this[menuName] = new SubComponentClass(this._subMenuElement, {
  locale: this._locale,
- iconStyle: this.theme.getStyle('submenu.icon'),
  svgIconMaker: this.theme.makeMenSvgIconSet.bind(this.theme),
  menuBarPosition: this.options.menuBarPosition,
  usageStatistics: this.options.usageStatistics
@@ -281,14 +279,23 @@ class Ui {
  'load': this._selectedElement.querySelectorAll('.tui-image-editor-load-btn')
  };
 
- this._makeHelpMenu();
+ this._addHelpMenus();
  }
 
- _makeHelpMenu() {
- // const helpMenuWithPartition = [...HELP_MENUS.slice(0, 3), '', ...HELP_MENUS.slice(4), ''];
+ /**
+ * Add help menu
+ * @private
+ */
+ _addHelpMenus() {
+ const helpMenuWithPartition = [...HELP_MENUS.slice(0, 3), '', ...HELP_MENUS.slice(3), ''];
+
+ snippet.forEach(helpMenuWithPartition, menuName => {
+ if (!menuName) {
+ this._makeMenuPartitionElement();
+
+ return;
+ }
 
- snippet.forEach(HELP_MENUS, menuName => {
- // console.log('MENUNAME', menuName);
  this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');
  if (menuName) {
  this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
@@ -297,18 +304,27 @@ class Ui {
  }
 
  /**
- * Make menu ui dom element
- * @param {string} menuName - menu name
+ * Make menu partition element
  * @private
  */
- _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {
- if (!menuName) {
- console.log('ss');
- this._menuElement.appendChild(partition());
+ _makeMenuPartitionElement() {
+ const partitionElement = document.createElement('li');
+ const partitionInnerElement = document.createElement('div');
+ partitionElement.className = 'tui-image-editor-item';
+ partitionInnerElement.className = 'tui-image-editor-icpartition';
+ partitionElement.appendChild(partitionInnerElement);
 
-  return;
-  }
+ this._menuElement.appendChild(partitionElement);
+ }
 
+ /**
+ * Make menu button element
+ * @param {string} menuName - menu name
+ * @param {Array} useIconTypes - Possible values are \['normal', 'active', 'hover', 'disabled'\]
+ * @param {string} menuType - 'normal' or 'help'
+ * @private
+ */
+ _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {
  const btnElement = document.createElement('li');
  const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);
 

src/js/ui/crop.js

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

src/js/ui/draw.js

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

src/js/ui/filter.js

@@ -69,11 +69,10 @@ const COLORPICKER_INSTANCE_NAMES = [
  * @ignore
  */
 class Filter extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'filter',
- iconStyle,
  menuBarPosition,
  templateHtml,
  usageStatistics

src/js/ui/flip.js

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

src/js/ui/icon.js

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

src/js/ui/mask.js

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

src/js/ui/rotate.js

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

src/js/ui/shape.js

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

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, iconStyle, svgIconMaker, menuBarPosition, templateHtml, usageStatistics}) {
+ constructor(subMenuElement, {locale, name, svgIconMaker, menuBarPosition, templateHtml, usageStatistics}) {
  this.subMenuElement = subMenuElement;
  this.menuBarPosition = menuBarPosition;
  this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';
@@ -23,7 +23,6 @@ class Submenu {
  this._makeSubMenuElement({
  locale,
  name,
- iconStyle,
  svgIconMaker,
  templateHtml
  });

src/js/ui/template/controls.js

@@ -1,4 +1,4 @@
-export const controls = ({locale, biImage, loadButtonStyle, downloadButtonStyle}) => (`
+export default ({locale, biImage, loadButtonStyle, downloadButtonStyle}) => (`
  <div class="tui-image-editor-controls">
  <div class="tui-image-editor-controls-logo">
  <img src="${biImage}" />
@@ -16,9 +16,3 @@ export const controls = ({locale, biImage, loadButtonStyle, downloadButtonStyle}
  </div>
  </div>
 `);
-
-export const partition = () => (`
- <li class="tui-image-editor-item">
- <div class="tui-image-editor-icpartition"></div>
- </li>
-`);

src/js/ui/template/style.js

@@ -107,13 +107,6 @@ export default ({
  .tui-image-editor-container .tui-image-editor-header-logo > img {
  ${biSize}
  }
- .tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,
- .tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal {
- display: block;
- }
- .tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled {
- display: none;
- }
  .tui-image-editor-menu use.normal.use-default {
  fill-rule: evenodd;
  fill: ${menuIconStyle.normal.color};

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

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

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

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

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

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

src/js/ui/template/submenu/icon.js

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

src/js/ui/template/submenu/mask.js

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

src/js/ui/template/submenu/rotate.js

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

src/js/ui/template/submenu/shape.js

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

src/js/ui/template/submenu/text.js

@@ -1,7 +1,7 @@
 /**
- * @param {Locale} locale - Translate text
- * @param {Object} normal - iconStyle
- * @param {Object} active - iconStyle
+ * @param {Object} submenuInfo - submenu info for make template
+ *  @param {Locale} locale - Translate text
+ *  @param {Function} svgIconMaker - svg icon generator
  * @returns {string}
  */
 export default ({locale, svgIconMaker}) => (`

src/js/ui/text.js

@@ -11,11 +11,10 @@ import {defaultTextRangeValus} from '../consts';
  * @ignore
  */
 class Text extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'text',
- iconStyle,
  svgIconMaker,
  menuBarPosition,
  templateHtml,