PHP Classes

File: toastui/src/js/ui/icon.js

Recommend this page to a friend!
  Classes of Mark de Leon   PHP Document Scanner using SANE or eSCL AirPrint   toastui/src/js/ui/icon.js   Download  
File: toastui/src/js/ui/icon.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Document Scanner using SANE or eSCL AirPrint
Web interface to scan printed documents
Author: By
Last change:
Date: 4 years ago
Size: 3,810 bytes
 

Contents

Class file image Download
import snippet from 'tui-code-snippet'; import Colorpicker from './tools/colorpicker'; import Submenu from './submenuBase'; import templateHtml from './template/submenu/icon'; import {isSupportFileApi} from '../util'; import {defaultIconPath} from '../consts'; /** * Icon ui class * @class * @ignore */ class Icon extends Submenu { constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) { super(subMenuElement, { locale, name: 'icon', iconStyle, menuBarPosition, templateHtml }); this.iconType = null; this._iconMap = {}; this._els = { registIconButton: this.selector('#tie-icon-image-file'), addIconButton: this.selector('#tie-icon-add-button'), iconColorpicker: new Colorpicker(this.selector('#tie-icon-color'), '#ffbb3b', this.toggleDirection) }; } /** * Add event for icon * @param {Object} actions - actions for icon * @param {Function} actions.registCustomIcon - register icon * @param {Function} actions.addIcon - add icon * @param {Function} actions.changeColor - change icon color */ addEvent(actions) { this.actions = actions; this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this)); this._els.registIconButton.addEventListener('change', this._registeIconHandler.bind(this)); this._els.addIconButton.addEventListener('click', this._addIconHandler.bind(this)); } /** * Clear icon type */ clearIconType() { this._els.addIconButton.classList.remove(this.iconType); this.iconType = null; } /** * Register default icon */ registDefaultIcon() { snippet.forEach(defaultIconPath, (path, type) => { this.actions.registDefalutIcons(type, path); }); } /** * Set icon picker color * @param {string} iconColor - rgb color string */ setIconPickerColor(iconColor) { this._els.iconColorpicker.color = iconColor; } /** * Returns the menu to its default state. */ changeStandbyMode() { this.clearIconType(); this.actions.cancelAddIcon(); } /** * Change icon color * @param {string} color - color for change * @private */ _changeColorHandler(color) { color = color || 'transparent'; this.actions.changeColor(color); } /** * Change icon color * @param {object} event - add button event object * @private */ _addIconHandler(event) { const button = event.target.closest('.tui-image-editor-button'); if (button) { const iconType = button.getAttribute('data-icontype'); const iconColor = this._els.iconColorpicker.color; this.actions.discardSelection(); this.actions.changeSelectableAll(false); this._els.addIconButton.classList.remove(this.iconType); this._els.addIconButton.classList.add(iconType); if (this.iconType === iconType) { this.changeStandbyMode(); } else { this.actions.addIcon(iconType, iconColor); this.iconType = iconType; } } } /** * register icon * @param {object} event - file change event object * @private */ _registeIconHandler(event) { let imgUrl; if (!isSupportFileApi) { alert('This browser does not support file-api'); } const [file] = event.target.files; if (file) { imgUrl = URL.createObjectURL(file); this.actions.registCustomIcon(imgUrl, file); } } } export default Icon;