\n
\n ${makeSvgIcon(['normal', 'active'], `history-${name.toLowerCase()}`, true)}\n
\n
\n ${locale.localize(name)}\n ${detail ? `(${locale.localize(detail)})` : ''}\n \n
\n ${makeSvgIcon(['normal'], 'history-check', true)}\n
\n
\n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n \n`;\n","import Range from '@/ui/tools/range';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/text';\nimport { assignmentForDestroy } from '@/util';\nimport { defaultTextRangeValues } from '@/consts';\n\n/**\n * Crop ui class\n * @class\n * @ignore\n */\nexport default class Text extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'text',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this.effect = {\n bold: false,\n italic: false,\n underline: false,\n };\n this.align = 'left';\n this._els = {\n textEffectButton: this.selector('.tie-text-effect-button'),\n textAlignButton: this.selector('.tie-text-align-button'),\n textColorpicker: new Colorpicker(\n this.selector('.tie-text-color'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n textRange: new Range(\n {\n slider: this.selector('.tie-text-range'),\n input: this.selector('.tie-text-range-value'),\n },\n defaultTextRangeValues\n ),\n };\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.textColorpicker.destroy();\n this._els.textRange.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for text\n * @param {Object} actions - actions for text\n * @param {Function} actions.changeTextStyle - change text style\n */\n addEvent(actions) {\n const setTextEffect = this._setTextEffectHandler.bind(this);\n const setTextAlign = this._setTextAlignHandler.bind(this);\n\n this.eventHandler = {\n setTextEffect,\n setTextAlign,\n };\n\n this.actions = actions;\n this._els.textEffectButton.addEventListener('click', setTextEffect);\n this._els.textAlignButton.addEventListener('click', setTextAlign);\n this._els.textRange.on('change', this._changeTextRnageHandler.bind(this));\n this._els.textColorpicker.on('change', this._changeColorHandler.bind(this));\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n const { setTextEffect, setTextAlign } = this.eventHandler;\n\n this._els.textEffectButton.removeEventListener('click', setTextEffect);\n this._els.textAlignButton.removeEventListener('click', setTextAlign);\n this._els.textRange.off();\n this._els.textColorpicker.off();\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.actions.stopDrawingMode();\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.modeChange('text');\n }\n\n set textColor(color) {\n this._els.textColorpicker.color = color;\n }\n\n /**\n * Get text color\n * @returns {string} - text color\n */\n get textColor() {\n return this._els.textColorpicker.color;\n }\n\n /**\n * Get text size\n * @returns {string} - text size\n */\n get fontSize() {\n return this._els.textRange.value;\n }\n\n /**\n * Set text size\n * @param {Number} value - text size\n */\n set fontSize(value) {\n this._els.textRange.value = value;\n }\n\n /**\n * get font style\n * @returns {string} - font style\n */\n get fontStyle() {\n return this.effect.italic ? 'italic' : 'normal';\n }\n\n /**\n * get font weight\n * @returns {string} - font weight\n */\n get fontWeight() {\n return this.effect.bold ? 'bold' : 'normal';\n }\n\n /**\n * get text underline text underline\n * @returns {boolean} - true or false\n */\n get underline() {\n return this.effect.underline;\n }\n\n setTextStyleStateOnAction(textStyle = {}) {\n const { fill, fontSize, fontStyle, fontWeight, textDecoration, textAlign } = textStyle;\n\n this.textColor = fill;\n this.fontSize = fontSize;\n this.setEffectState('italic', fontStyle);\n this.setEffectState('bold', fontWeight);\n this.setEffectState('underline', textDecoration);\n this.setAlignState(textAlign);\n }\n\n setEffectState(effectName, value) {\n const effectValue = value === 'italic' || value === 'bold' || value === 'underline';\n const button = this._els.textEffectButton.querySelector(\n `.tui-image-editor-button.${effectName}`\n );\n\n this.effect[effectName] = effectValue;\n\n button.classList[effectValue ? 'add' : 'remove']('active');\n }\n\n setAlignState(value) {\n const button = this._els.textAlignButton;\n button.classList.remove(this.align);\n button.classList.add(value);\n this.align = value;\n }\n\n /**\n * text effect set handler\n * @param {object} event - add button event object\n * @private\n */\n _setTextEffectHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const [styleType] = button.className.match(/(bold|italic|underline)/);\n const styleObj = {\n bold: { fontWeight: 'bold' },\n italic: { fontStyle: 'italic' },\n underline: { textDecoration: 'underline' },\n }[styleType];\n\n this.effect[styleType] = !this.effect[styleType];\n button.classList.toggle('active');\n this.actions.changeTextStyle(styleObj);\n }\n }\n\n /**\n * text effect set handler\n * @param {object} event - add button event object\n * @private\n */\n _setTextAlignHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const styleType = this.getButtonType(button, ['left', 'center', 'right']);\n\n event.currentTarget.classList.remove(this.align);\n if (this.align !== styleType) {\n event.currentTarget.classList.add(styleType);\n }\n this.actions.changeTextStyle({ textAlign: styleType });\n\n this.align = styleType;\n }\n }\n\n /**\n * text align set handler\n * @param {number} value - range value\n * @param {boolean} isLast - Is last change\n * @private\n */\n _changeTextRnageHandler(value, isLast) {\n this.actions.changeTextStyle(\n {\n fontSize: value,\n },\n !isLast\n );\n }\n\n /**\n * change color handler\n * @param {string} color - change color string\n * @private\n */\n _changeColorHandler(color) {\n color = color || 'transparent';\n this.actions.changeTextStyle({\n fill: color,\n });\n }\n}\n","/**\n * @author NHN. FE Development Team