ding-image-editor 3.15.3

package/src/js/ui/submenuBase.js

@@ -0,0 +1,122 @@
+import CustomEvents from 'tui-code-snippet/customEvents/customEvents';
+import { eventNames } from '@/consts';
+
+/**
+ * Submenu Base Class
+ * @class
+ * @ignore
+ */
+class Submenu {
+  /**
+   * @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
+   * @param {boolean} [usageStatistics=false] - template for SubMenuElement
+   */
+  constructor(
+    subMenuElement,
+    { locale, name, makeSvgIcon, menuBarPosition, templateHtml, usageStatistics }
+  ) {
+    this.subMenuElement = subMenuElement;
+    this.menuBarPosition = menuBarPosition;
+    this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';
+    this.colorPickerControls = [];
+    this.usageStatistics = usageStatistics;
+    this.eventHandler = {};
+    this._makeSubMenuElement({
+      locale,
+      name,
+      makeSvgIcon,
+      templateHtml,
+    });
+  }
+
+  /**
+   * editor dom ui query selector
+   * @param {string} selectName - query selector string name
+   * @returns {HTMLElement}
+   */
+  selector(selectName) {
+    return this.subMenuElement.querySelector(selectName);
+  }
+
+  /**
+   * change show state change for colorpicker instance
+   * @param {Colorpicker} occurredControl - target Colorpicker Instance
+   */
+  colorPickerChangeShow(occurredControl) {
+    this.colorPickerControls.forEach((pickerControl) => {
+      if (occurredControl !== pickerControl) {
+        pickerControl.hide();
+      }
+    });
+  }
+
+  /**
+   * Get button type
+   * @param {HTMLElement} button - event target element
+   * @param {array} buttonNames - Array of button names
+   * @returns {string} - button type
+   */
+  getButtonType(button, buttonNames) {
+    return button.className.match(RegExp(`(${buttonNames.join('|')})`))[0];
+  }
+
+  /**
+   * Get button type
+   * @param {HTMLElement} target - event target element
+   * @param {string} removeClass - remove class name
+   * @param {string} addClass - add class name
+   */
+  changeClass(target, removeClass, addClass) {
+    target.classList.remove(removeClass);
+    target.classList.add(addClass);
+  }
+
+  /**
+   * Interface method whose implementation is optional.
+   * Returns the menu to its default state.
+   */
+  changeStandbyMode() {}
+
+  /**
+   * Interface method whose implementation is optional.
+   * Executed when the menu starts.
+   */
+  changeStartMode() {}
+
+  /**
+   * Make 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({ locale, name, iconStyle, makeSvgIcon, templateHtml }) {
+    const iconSubMenu = document.createElement('div');
+    iconSubMenu.className = `tui-image-editor-menu-${name}`;
+    iconSubMenu.innerHTML = templateHtml({
+      locale,
+      iconStyle,
+      makeSvgIcon,
+    });
+
+    this.subMenuElement.appendChild(iconSubMenu);
+  }
+
+  _onStartEditingInputBox() {
+    this.fire(eventNames.INPUT_BOX_EDITING_STARTED);
+  }
+
+  _onStopEditingInputBox() {
+    this.fire(eventNames.INPUT_BOX_EDITING_STOPPED);
+  }
+}
+
+CustomEvents.mixin(Submenu);
+
+export default Submenu;

package/src/js/ui/template/controls.js

@@ -0,0 +1,21 @@
+import { getHelpMenuBarPosition } from '@/util';
+
+export default ({ locale, biImage, loadButtonStyle, downloadButtonStyle, menuBarPosition }) => `
+    <ul class="tui-image-editor-help-menu ${getHelpMenuBarPosition(menuBarPosition)}"></ul>
+    <div class="tui-image-editor-controls">
+        <div class="tui-image-editor-controls-logo">
+            <img src="${biImage}" />
+        </div>
+        <ul class="tui-image-editor-menu"></ul>
+
+        <div class="tui-image-editor-controls-buttons">
+            <div style="${loadButtonStyle}">
+                ${locale.localize('Load')}
+                <input type="file" class="tui-image-editor-load-btn" />
+            </div>
+            <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
+                ${locale.localize('Download')}
+            </button>
+        </div>
+    </div>
+`;

package/src/js/ui/template/mainContainer.js

@@ -0,0 +1,38 @@
+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 src="${biImage}" />
+            </div>
+            <div class="tui-image-editor-header-buttons">
+                <div style="${loadButtonStyle}">
+                    ${locale.localize('Load')}
+                    <input type="file" class="tui-image-editor-load-btn" />
+                </div>
+                <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
+                    ${locale.localize('Download')}
+                </button>
+            </div>
+        </div>
+        <div class="tui-image-editor-main">
+            <div class="tui-image-editor-submenu">
+                <div class="tui-image-editor-submenu-style" style="${submenuStyle}"></div>
+            </div>
+            <div class="tui-image-editor-wrap">
+                <div class="tui-image-editor-size-wrap">
+                    <div class="tui-image-editor-align-wrap">
+                        <div class="tui-image-editor"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+`;

package/src/js/ui/template/style.js

@@ -0,0 +1,146 @@
+export default ({
+  subMenuLabelActive,
+  subMenuLabelNormal,
+  subMenuRangeTitle,
+  submenuPartitionVertical,
+  submenuPartitionHorizontal,
+  submenuCheckbox,
+  submenuRangePointer,
+  submenuRangeValue,
+  submenuColorpickerTitle,
+  submenuColorpickerButton,
+  submenuRangeBar,
+  submenuRangeSubbar,
+  submenuDisabledRangePointer,
+  submenuDisabledRangeBar,
+  submenuDisabledRangeSubbar,
+  submenuIconSize,
+  menuIconSize,
+  biSize,
+  menuIconStyle,
+  submenuIconStyle,
+}) => `
+    .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label,
+    .tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] label,
+    .tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] label,
+    .tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] label,
+    .tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] label,
+    .tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] label,
+    .tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] label,
+    .tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label,
+    .tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] label,
+    .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label,
+    .tie-draw-line-select-button.line .tui-image-editor-button.line label,
+    .tie-draw-line-select-button.free .tui-image-editor-button.free label,
+    .tie-flip-button.flipX .tui-image-editor-button.flipX label,
+    .tie-flip-button.flipY .tui-image-editor-button.flipY label,
+    .tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,
+    .tie-crop-button .tui-image-editor-button.apply.active label,
+    .tie-crop-preset-button .tui-image-editor-button.preset.active label,
+    .tie-resize-button .tui-image-editor-button.apply.active label,
+    .tie-resize-preset-button .tui-image-editor-button.preset.active label,
+    .tie-shape-button.rect .tui-image-editor-button.rect label,
+    .tie-shape-button.circle .tui-image-editor-button.circle label,
+    .tie-shape-button.triangle .tui-image-editor-button.triangle label,
+    .tie-text-effect-button .tui-image-editor-button.active label,
+    .tie-text-align-button.tie-text-align-left .tui-image-editor-button.left label,
+    .tie-text-align-button.tie-text-align-center .tui-image-editor-button.center label,
+    .tie-text-align-button.tie-text-align-right .tui-image-editor-button.right label,
+    .tie-mask-apply.apply.active .tui-image-editor-button.apply label,
+    .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,
+    .tui-image-editor-container .tui-image-editor-checkbox label > span {
+        ${subMenuLabelActive}
+    }
+    .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,
+    .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label,
+    .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label > span {
+        ${subMenuLabelNormal}
+    }
+    .tui-image-editor-container .tui-image-editor-range-wrap label > span {
+        ${subMenuRangeTitle}
+    }
+    .tui-image-editor-container .tui-image-editor-partition > div {
+        ${submenuPartitionVertical}
+    }
+    .tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,
+    .tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {
+        ${submenuPartitionHorizontal}
+    }
+    .tui-image-editor-container .tui-image-editor-checkbox label > span:before {
+        ${submenuCheckbox}
+    }
+    .tui-image-editor-container .tui-image-editor-checkbox label > input:checked + span:before {
+        border: 0;
+    }
+    .tui-image-editor-container .tui-image-editor-virtual-range-pointer {
+        ${submenuRangePointer}
+    }
+    .tui-image-editor-container .tui-image-editor-virtual-range-bar {
+        ${submenuRangeBar}
+    }
+    .tui-image-editor-container .tui-image-editor-virtual-range-subbar {
+        ${submenuRangeSubbar}
+    }
+    .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {
+        ${submenuDisabledRangePointer}
+    }
+    .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {
+        ${submenuDisabledRangeSubbar}
+    }
+    .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {
+        ${submenuDisabledRangeBar}
+    }
+    .tui-image-editor-container .tui-image-editor-range-value {
+        ${submenuRangeValue}
+    }
+    .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {
+        ${submenuColorpickerTitle}
+    }
+    .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {
+        ${submenuColorpickerButton}
+    }
+    .tui-image-editor-container .svg_ic-menu {
+        ${menuIconSize}
+    }
+    .tui-image-editor-container .svg_ic-submenu {
+        ${submenuIconSize}
+    }
+    .tui-image-editor-container .tui-image-editor-controls-logo > img,
+    .tui-image-editor-container .tui-image-editor-header-logo > img {
+        ${biSize}
+    }
+    .tui-image-editor-menu use.normal.use-default,
+    .tui-image-editor-help-menu use.normal.use-default {
+        fill-rule: evenodd;
+        fill: ${menuIconStyle.normal.color};
+        stroke: ${menuIconStyle.normal.color};
+    }
+    .tui-image-editor-menu use.active.use-default,
+    .tui-image-editor-help-menu use.active.use-default {
+        fill-rule: evenodd;
+        fill: ${menuIconStyle.active.color};
+        stroke: ${menuIconStyle.active.color};
+    }
+    .tui-image-editor-menu use.hover.use-default,
+    .tui-image-editor-help-menu use.hover.use-default {
+        fill-rule: evenodd;
+        fill: ${menuIconStyle.hover.color};
+        stroke: ${menuIconStyle.hover.color};
+    }
+    .tui-image-editor-menu use.disabled.use-default,
+    .tui-image-editor-help-menu use.disabled.use-default {
+        fill-rule: evenodd;
+        fill: ${menuIconStyle.disabled.color};
+        stroke: ${menuIconStyle.disabled.color};
+    }
+    .tui-image-editor-submenu use.normal.use-default {
+        fill-rule: evenodd;
+        fill: ${submenuIconStyle.normal.color};
+        stroke: ${submenuIconStyle.normal.color};
+    }
+    .tui-image-editor-submenu use.active.use-default {
+        fill-rule: evenodd;
+        fill: ${submenuIconStyle.active.color};
+        stroke: ${submenuIconStyle.active.color};
+    }
+`;

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

@@ -0,0 +1,73 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+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>
+                    ${makeSvgIcon(['normal', 'active'], 'shape-rectangle', true)}
+                </div>
+                <label> ${locale.localize('Custom')} </label>
+            </div>
+            <div class="tui-image-editor-button preset preset-square">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'crop', true)}
+                </div>
+                <label> ${locale.localize('Square')} </label>
+            </div>
+            <div class="tui-image-editor-button preset preset-3-2">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'crop', true)}
+                </div>
+                <label> ${locale.localize('3:2')} </label>
+            </div>
+            <div class="tui-image-editor-button preset preset-4-3">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'crop', true)}
+                </div>
+                <label> ${locale.localize('4:3')} </label>
+            </div>
+            <div class="tui-image-editor-button preset preset-5-4">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'crop', true)}
+                </div>
+                <label> ${locale.localize('5:4')} </label>
+            </div>
+            <div class="tui-image-editor-button preset preset-7-5">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'crop', true)}
+                </div>
+                <label> ${locale.localize('7:5')} </label>
+            </div>
+            <div class="tui-image-editor-button preset preset-16-9">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'crop', true)}
+                </div>
+                <label> ${locale.localize('16:9')} </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition tui-image-editor-newline">
+        </li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tie-crop-button action">
+            <div class="tui-image-editor-button apply">
+                ${makeSvgIcon(['normal', 'active'], 'apply')}
+                <label>
+                    ${locale.localize('Apply')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button cancel">
+                ${makeSvgIcon(['normal', 'active'], 'cancel')}
+                <label>
+                    ${locale.localize('Cancel')}
+                </label>
+            </div>
+        </li>
+    </ul>
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+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>
+                    ${makeSvgIcon(['normal', 'active'], 'draw-free', true)}
+                </div>
+                <label>
+                    ${locale.localize('Free')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button line">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'draw-line', true)}
+                </div>
+                <label>
+                    ${locale.localize('Straight')}
+                </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li>
+            <div class="tie-draw-color" title="${locale.localize('Color')}"></div>
+        </li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-newline tui-image-editor-range-wrap">
+            <label class="range">${locale.localize('Range')}</label>
+            <div class="tie-draw-range"></div>
+            <input class="tie-draw-range-value tui-image-editor-range-value" value="0" />
+        </li>
+    </ul>
+`;

package/src/js/ui/template/submenu/filter.js

@@ -0,0 +1,157 @@
+/**
+ * @param {Locale} locale - Translate text
+ * @returns {string}
+ */
+export default ({ locale }) => `
+    <ul class="tui-image-editor-submenu-item">
+        <li class="tui-image-editor-submenu-align">
+            <div class="tui-image-editor-checkbox-wrap fixed-width">
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-grayscale">
+                        <span>${locale.localize('Grayscale')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-invert">
+                        <span>${locale.localize('Invert')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-sepia">
+                        <span>${locale.localize('Sepia')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-vintage">
+                        <span>${locale.localize('Sepia2')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-blur">
+                        <span>${locale.localize('Blur')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-sharpen">
+                        <span>${locale.localize('Sharpen')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-emboss">
+                        <span>${locale.localize('Emboss')}</span>
+                    </label>
+                </div>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-submenu-align">
+            <div class="tui-image-editor-checkbox-group tui-image-editor-disabled" style="margin-bottom: 7px;">
+                <div class="tui-image-editor-checkbox-wrap">
+                    <div class="tui-image-editor-checkbox">
+                        <label>
+                            <input type="checkbox" class="tie-remove-white">
+                            <span>${locale.localize('Remove White')}</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
+                    <label>${locale.localize('Distance')}</label>
+                    <div class="tie-removewhite-distance-range"></div>
+                </div>
+            </div>
+            <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-brightness">
+                        <span>${locale.localize('Brightness')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-range-wrap short">
+                    <div class="tie-brightness-range"></div>
+                </div>
+            </div>
+            <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-noise">
+                        <span>${locale.localize('Noise')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-range-wrap short">
+                    <div class="tie-noise-range"></div>
+                </div>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-submenu-align">
+            <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-pixelate">
+                        <span>${locale.localize('Pixelate')}</span>
+                    </label>
+                </div>
+                <div class="tui-image-editor-range-wrap short">
+                    <div class="tie-pixelate-range"></div>
+                </div>
+            </div>
+            <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">
+                <div class="tui-image-editor-newline tui-image-editor-checkbox-wrap">
+                    <div class="tui-image-editor-checkbox">
+                        <label>
+                            <input type="checkbox" class="tie-color-filter">
+                            <span>${locale.localize('Color Filter')}</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
+                    <label>${locale.localize('Threshold')}</label>
+                    <div class="tie-colorfilter-threshold-range"></div>
+                </div>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li>
+            <div class="filter-color-item">
+                <div class="tie-filter-tint-color" title="${locale.localize('Tint')}"></div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-tint">
+                        <span></span>
+                    </label>
+                </div>
+            </div>
+            <div class="filter-color-item">
+                <div class="tie-filter-multiply-color" title="${locale.localize('Multiply')}"></div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-multiply">
+                        <span></span>
+                    </label>
+                </div>
+            </div>
+            <div class="filter-color-item">
+                <div class="tie-filter-blend-color" title="${locale.localize('Blend')}"></div>
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-blend">
+                        <span></span>
+                    </label>
+                </div>
+            </div>
+        </li>
+    </ul>
+`;

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

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

package/src/js/ui/template/submenu/history.js

@@ -0,0 +1,22 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ *   @param {string} name - history name
+ *   @param {string} detail - history detail information
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon, name, detail }) => `
+    <div class="tui-image-editor-history-item history">
+        <div class="history-item-icon">
+            ${makeSvgIcon(['normal', 'active'], `history-${name.toLowerCase()}`, true)}
+        </div>
+        <span>
+            ${locale.localize(name)}
+            ${detail ? `(${locale.localize(detail)})` : ''}
+        </span>
+        <div class="history-item-checkbox">
+            ${makeSvgIcon(['normal'], 'history-check', true)}
+        </div>
+    </div>
+`;