fdc0fc6586e1a4c1598a0482ae8ee91a.json 20 KB
{"ast":null,"code":"import { assignmentForDestroy } from '../util';\nimport Range from './tools/range';\nimport Colorpicker from './tools/colorpicker';\nimport Submenu from './submenuBase';\nimport templateHtml from './template/submenu/text';\nimport { defaultTextRangeValus } from '../consts';\n/**\r\n * Crop ui class\r\n * @class\r\n * @ignore\r\n */\n\nexport default class Text extends Submenu {\n  constructor(subMenuElement, {\n    locale,\n    makeSvgIcon,\n    menuBarPosition,\n    usageStatistics\n  }) {\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(this.selector('.tie-text-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics),\n      textRange: new Range({\n        slider: this.selector('.tie-text-range'),\n        input: this.selector('.tie-text-range-value')\n      }, defaultTextRangeValus)\n    };\n  }\n  /**\r\n   * Destroys the instance.\r\n   */\n\n\n  destroy() {\n    this._removeEvent();\n\n    this._els.textColorpicker.destroy();\n\n    this._els.textRange.destroy();\n\n    assignmentForDestroy(this);\n  }\n  /**\r\n   * Add event for text\r\n   * @param {Object} actions - actions for text\r\n   *   @param {Function} actions.changeTextStyle - change text style\r\n   */\n\n\n  addEvent(actions) {\n    const setTextEffect = this._setTextEffectHandler.bind(this);\n\n    const setTextAlign = this._setTextAlignHandler.bind(this);\n\n    this.eventHandler = {\n      setTextEffect,\n      setTextAlign\n    };\n    this.actions = actions;\n\n    this._els.textEffectButton.addEventListener('click', setTextEffect);\n\n    this._els.textAlignButton.addEventListener('click', setTextAlign);\n\n    this._els.textRange.on('change', this._changeTextRnageHandler.bind(this));\n\n    this._els.textColorpicker.on('change', this._changeColorHandler.bind(this));\n  }\n  /**\r\n   * Remove event\r\n   * @private\r\n   */\n\n\n  _removeEvent() {\n    const {\n      setTextEffect,\n      setTextAlign\n    } = this.eventHandler;\n\n    this._els.textEffectButton.removeEventListener('click', setTextEffect);\n\n    this._els.textAlignButton.removeEventListener('click', setTextAlign);\n\n    this._els.textRange.off();\n\n    this._els.textColorpicker.off();\n  }\n  /**\r\n   * Returns the menu to its default state.\r\n   */\n\n\n  changeStandbyMode() {\n    this.actions.stopDrawingMode();\n  }\n  /**\r\n   * Executed when the menu starts.\r\n   */\n\n\n  changeStartMode() {\n    this.actions.modeChange('text');\n  }\n\n  set textColor(color) {\n    this._els.textColorpicker.color = color;\n  }\n  /**\r\n   * Get text color\r\n   * @returns {string} - text color\r\n   */\n\n\n  get textColor() {\n    return this._els.textColorpicker.color;\n  }\n  /**\r\n   * Get text size\r\n   * @returns {string} - text size\r\n   */\n\n\n  get fontSize() {\n    return this._els.textRange.value;\n  }\n  /**\r\n   * Set text size\r\n   * @param {Number} value - text size\r\n   */\n\n\n  set fontSize(value) {\n    this._els.textRange.value = value;\n  }\n  /**\r\n   * get font style\r\n   * @returns {string} - font style\r\n   */\n\n\n  get fontStyle() {\n    return this.effect.italic ? 'italic' : 'normal';\n  }\n  /**\r\n   * get font weight\r\n   * @returns {string} - font weight\r\n   */\n\n\n  get fontWeight() {\n    return this.effect.bold ? 'bold' : 'normal';\n  }\n  /**\r\n   * get text underline text underline\r\n   * @returns {boolean} - true or false\r\n   */\n\n\n  get underline() {\n    return this.effect.underline;\n  }\n\n  setTextStyleStateOnAction(textStyle = {}) {\n    const {\n      fill,\n      fontSize,\n      fontStyle,\n      fontWeight,\n      textDecoration,\n      textAlign\n    } = textStyle;\n    this.textColor = fill;\n    this.fontSize = fontSize;\n    this.setEffactState('italic', fontStyle);\n    this.setEffactState('bold', fontWeight);\n    this.setEffactState('underline', textDecoration);\n    this.setAlignState(textAlign);\n  }\n\n  setEffactState(effactName, value) {\n    const effactValue = value === 'italic' || value === 'bold' || value === 'underline';\n\n    const button = this._els.textEffectButton.querySelector(`.tui-image-editor-button.${effactName}`);\n\n    this.effect[effactName] = effactValue;\n    button.classList[effactValue ? '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  /**\r\n   * text effect set handler\r\n   * @param {object} event - add button event object\r\n   * @private\r\n   */\n\n\n  _setTextEffectHandler(event) {\n    const button = event.target.closest('.tui-image-editor-button');\n    const [styleType] = button.className.match(/(bold|italic|underline)/);\n    const styleObj = {\n      bold: {\n        fontWeight: 'bold'\n      },\n      italic: {\n        fontStyle: 'italic'\n      },\n      underline: {\n        textDecoration: 'underline'\n      }\n    }[styleType];\n    this.effect[styleType] = !this.effect[styleType];\n    button.classList.toggle('active');\n    this.actions.changeTextStyle(styleObj);\n  }\n  /**\r\n   * text effect set handler\r\n   * @param {object} event - add button event object\r\n   * @private\r\n   */\n\n\n  _setTextAlignHandler(event) {\n    const button = event.target.closest('.tui-image-editor-button');\n\n    if (button) {\n      const styleType = this.getButtonType(button, ['left', 'center', 'right']);\n      event.currentTarget.classList.remove(this.align);\n\n      if (this.align !== styleType) {\n        event.currentTarget.classList.add(styleType);\n      }\n\n      this.actions.changeTextStyle({\n        textAlign: styleType\n      });\n      this.align = styleType;\n    }\n  }\n  /**\r\n   * text align set handler\r\n   * @param {number} value - range value\r\n   * @param {boolean} isLast - Is last change\r\n   * @private\r\n   */\n\n\n  _changeTextRnageHandler(value, isLast) {\n    this.actions.changeTextStyle({\n      fontSize: value\n    }, !isLast);\n  }\n  /**\r\n   * change color handler\r\n   * @param {string} color - change color string\r\n   * @private\r\n   */\n\n\n  _changeColorHandler(color) {\n    color = color || 'transparent';\n    this.actions.changeTextStyle({\n      fill: color\n    });\n  }\n\n}","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/ui/text.js"],"names":["assignmentForDestroy","Range","Colorpicker","Submenu","templateHtml","defaultTextRangeValus","Text","constructor","subMenuElement","locale","makeSvgIcon","menuBarPosition","usageStatistics","name","effect","bold","italic","underline","align","_els","textEffectButton","selector","textAlignButton","textColorpicker","toggleDirection","textRange","slider","input","destroy","_removeEvent","addEvent","actions","setTextEffect","_setTextEffectHandler","bind","setTextAlign","_setTextAlignHandler","eventHandler","addEventListener","on","_changeTextRnageHandler","_changeColorHandler","removeEventListener","off","changeStandbyMode","stopDrawingMode","changeStartMode","modeChange","textColor","color","fontSize","value","fontStyle","fontWeight","setTextStyleStateOnAction","textStyle","fill","textDecoration","textAlign","setEffactState","setAlignState","effactName","effactValue","button","querySelector","classList","remove","add","event","target","closest","styleType","className","match","styleObj","toggle","changeTextStyle","getButtonType","currentTarget","isLast"],"mappings":"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","sourcesContent":["import { assignmentForDestroy } from '../util';\r\nimport Range from './tools/range';\r\nimport Colorpicker from './tools/colorpicker';\r\nimport Submenu from './submenuBase';\r\nimport templateHtml from './template/submenu/text';\r\nimport { defaultTextRangeValus } from '../consts';\r\n\r\n/**\r\n * Crop ui class\r\n * @class\r\n * @ignore\r\n */\r\nexport default class Text extends Submenu {\r\n  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\r\n    super(subMenuElement, {\r\n      locale,\r\n      name: 'text',\r\n      makeSvgIcon,\r\n      menuBarPosition,\r\n      templateHtml,\r\n      usageStatistics,\r\n    });\r\n    this.effect = {\r\n      bold: false,\r\n      italic: false,\r\n      underline: false,\r\n    };\r\n    this.align = 'left';\r\n    this._els = {\r\n      textEffectButton: this.selector('.tie-text-effect-button'),\r\n      textAlignButton: this.selector('.tie-text-align-button'),\r\n      textColorpicker: new Colorpicker(\r\n        this.selector('.tie-text-color'),\r\n        '#ffbb3b',\r\n        this.toggleDirection,\r\n        this.usageStatistics\r\n      ),\r\n      textRange: new Range(\r\n        {\r\n          slider: this.selector('.tie-text-range'),\r\n          input: this.selector('.tie-text-range-value'),\r\n        },\r\n        defaultTextRangeValus\r\n      ),\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Destroys the instance.\r\n   */\r\n  destroy() {\r\n    this._removeEvent();\r\n    this._els.textColorpicker.destroy();\r\n    this._els.textRange.destroy();\r\n\r\n    assignmentForDestroy(this);\r\n  }\r\n\r\n  /**\r\n   * Add event for text\r\n   * @param {Object} actions - actions for text\r\n   *   @param {Function} actions.changeTextStyle - change text style\r\n   */\r\n  addEvent(actions) {\r\n    const setTextEffect = this._setTextEffectHandler.bind(this);\r\n    const setTextAlign = this._setTextAlignHandler.bind(this);\r\n\r\n    this.eventHandler = {\r\n      setTextEffect,\r\n      setTextAlign,\r\n    };\r\n\r\n    this.actions = actions;\r\n    this._els.textEffectButton.addEventListener('click', setTextEffect);\r\n    this._els.textAlignButton.addEventListener('click', setTextAlign);\r\n    this._els.textRange.on('change', this._changeTextRnageHandler.bind(this));\r\n    this._els.textColorpicker.on('change', this._changeColorHandler.bind(this));\r\n  }\r\n\r\n  /**\r\n   * Remove event\r\n   * @private\r\n   */\r\n  _removeEvent() {\r\n    const { setTextEffect, setTextAlign } = this.eventHandler;\r\n\r\n    this._els.textEffectButton.removeEventListener('click', setTextEffect);\r\n    this._els.textAlignButton.removeEventListener('click', setTextAlign);\r\n    this._els.textRange.off();\r\n    this._els.textColorpicker.off();\r\n  }\r\n\r\n  /**\r\n   * Returns the menu to its default state.\r\n   */\r\n  changeStandbyMode() {\r\n    this.actions.stopDrawingMode();\r\n  }\r\n\r\n  /**\r\n   * Executed when the menu starts.\r\n   */\r\n  changeStartMode() {\r\n    this.actions.modeChange('text');\r\n  }\r\n\r\n  set textColor(color) {\r\n    this._els.textColorpicker.color = color;\r\n  }\r\n\r\n  /**\r\n   * Get text color\r\n   * @returns {string} - text color\r\n   */\r\n  get textColor() {\r\n    return this._els.textColorpicker.color;\r\n  }\r\n\r\n  /**\r\n   * Get text size\r\n   * @returns {string} - text size\r\n   */\r\n  get fontSize() {\r\n    return this._els.textRange.value;\r\n  }\r\n\r\n  /**\r\n   * Set text size\r\n   * @param {Number} value - text size\r\n   */\r\n  set fontSize(value) {\r\n    this._els.textRange.value = value;\r\n  }\r\n\r\n  /**\r\n   * get font style\r\n   * @returns {string} - font style\r\n   */\r\n  get fontStyle() {\r\n    return this.effect.italic ? 'italic' : 'normal';\r\n  }\r\n\r\n  /**\r\n   * get font weight\r\n   * @returns {string} - font weight\r\n   */\r\n  get fontWeight() {\r\n    return this.effect.bold ? 'bold' : 'normal';\r\n  }\r\n\r\n  /**\r\n   * get text underline text underline\r\n   * @returns {boolean} - true or false\r\n   */\r\n  get underline() {\r\n    return this.effect.underline;\r\n  }\r\n\r\n  setTextStyleStateOnAction(textStyle = {}) {\r\n    const { fill, fontSize, fontStyle, fontWeight, textDecoration, textAlign } = textStyle;\r\n\r\n    this.textColor = fill;\r\n    this.fontSize = fontSize;\r\n    this.setEffactState('italic', fontStyle);\r\n    this.setEffactState('bold', fontWeight);\r\n    this.setEffactState('underline', textDecoration);\r\n    this.setAlignState(textAlign);\r\n  }\r\n\r\n  setEffactState(effactName, value) {\r\n    const effactValue = value === 'italic' || value === 'bold' || value === 'underline';\r\n    const button = this._els.textEffectButton.querySelector(\r\n      `.tui-image-editor-button.${effactName}`\r\n    );\r\n\r\n    this.effect[effactName] = effactValue;\r\n\r\n    button.classList[effactValue ? 'add' : 'remove']('active');\r\n  }\r\n\r\n  setAlignState(value) {\r\n    const button = this._els.textAlignButton;\r\n    button.classList.remove(this.align);\r\n    button.classList.add(value);\r\n    this.align = value;\r\n  }\r\n\r\n  /**\r\n   * text effect set handler\r\n   * @param {object} event - add button event object\r\n   * @private\r\n   */\r\n  _setTextEffectHandler(event) {\r\n    const button = event.target.closest('.tui-image-editor-button');\r\n    const [styleType] = button.className.match(/(bold|italic|underline)/);\r\n    const styleObj = {\r\n      bold: { fontWeight: 'bold' },\r\n      italic: { fontStyle: 'italic' },\r\n      underline: { textDecoration: 'underline' },\r\n    }[styleType];\r\n\r\n    this.effect[styleType] = !this.effect[styleType];\r\n    button.classList.toggle('active');\r\n    this.actions.changeTextStyle(styleObj);\r\n  }\r\n\r\n  /**\r\n   * text effect set handler\r\n   * @param {object} event - add button event object\r\n   * @private\r\n   */\r\n  _setTextAlignHandler(event) {\r\n    const button = event.target.closest('.tui-image-editor-button');\r\n    if (button) {\r\n      const styleType = this.getButtonType(button, ['left', 'center', 'right']);\r\n\r\n      event.currentTarget.classList.remove(this.align);\r\n      if (this.align !== styleType) {\r\n        event.currentTarget.classList.add(styleType);\r\n      }\r\n      this.actions.changeTextStyle({ textAlign: styleType });\r\n\r\n      this.align = styleType;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * text align set handler\r\n   * @param {number} value - range value\r\n   * @param {boolean} isLast - Is last change\r\n   * @private\r\n   */\r\n  _changeTextRnageHandler(value, isLast) {\r\n    this.actions.changeTextStyle(\r\n      {\r\n        fontSize: value,\r\n      },\r\n      !isLast\r\n    );\r\n  }\r\n\r\n  /**\r\n   * change color handler\r\n   * @param {string} color - change color string\r\n   * @private\r\n   */\r\n  _changeColorHandler(color) {\r\n    color = color || 'transparent';\r\n    this.actions.changeTextStyle({\r\n      fill: color,\r\n    });\r\n  }\r\n}\r\n"]},"metadata":{},"sourceType":"module"}