PHP Classes

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

Recommend this page to a friend!
  Classes of Mark de Leon   PHP Document Scanner using SANE or eSCL AirPrint   toastui/src/js/ui/theme/theme.js   Download  
File: toastui/src/js/ui/theme/theme.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: 5,391 bytes
 

Contents

Class file image Download
import {extend, forEach} from 'tui-code-snippet'; import {styleLoad} from '../../util'; import style from '../template/style'; import standardTheme from './standard'; /** * Theme manager * @class * @param {Object} customTheme - custom theme * @ignore */ class Theme { constructor(customTheme) { this.styles = this._changeToObject(extend(standardTheme, customTheme)); styleLoad(this._styleMaker()); } /** * Get a Style cssText or StyleObject * @param {string} type - style type * @returns {string|object} - cssText or StyleObject */ getStyle(type) { // eslint-disable-line let result = null; const firstProperty = type.replace(/\..+$/, ''); const option = this.styles[type]; switch (type) { case 'common.bi': result = this.styles[type].image; break; case 'menu.icon': case 'submenu.icon': result = { active: this.styles[`${firstProperty}.activeIcon`], normal: this.styles[`${firstProperty}.normalIcon`], hover: this.styles[`${firstProperty}.hoverIcon`], disabled: this.styles[`${firstProperty}.disabledIcon`] }; break; case 'submenu.label': result = { active: this._makeCssText(this.styles[`${firstProperty}.activeLabel`]), normal: this._makeCssText(this.styles[`${firstProperty}.normalLabel`]) }; break; case 'submenu.partition': result = { vertical: this._makeCssText(extend({}, option, {borderLeft: `1px solid ${option.color}`})), horizontal: this._makeCssText(extend({}, option, {borderBottom: `1px solid ${option.color}`})) }; break; case 'range.disabledPointer': case 'range.disabledBar': case 'range.disabledSubbar': case 'range.pointer': case 'range.bar': case 'range.subbar': option.backgroundColor = option.color; result = this._makeCssText(option); break; default: result = this._makeCssText(option); break; } return result; } /** * Make css resource * @returns {string} - serialized css text * @private */ _styleMaker() { const submenuLabelStyle = this.getStyle('submenu.label'); const submenuPartitionStyle = this.getStyle('submenu.partition'); return style({ subMenuLabelActive: submenuLabelStyle.active, subMenuLabelNormal: submenuLabelStyle.normal, submenuPartitionVertical: submenuPartitionStyle.vertical, submenuPartitionHorizontal: submenuPartitionStyle.horizontal, biSize: this.getStyle('common.bisize'), subMenuRangeTitle: this.getStyle('range.title'), submenuRangePointer: this.getStyle('range.pointer'), submenuRangeBar: this.getStyle('range.bar'), submenuRangeSubbar: this.getStyle('range.subbar'), submenuDisabledRangePointer: this.getStyle('range.disabledPointer'), submenuDisabledRangeBar: this.getStyle('range.disabledBar'), submenuDisabledRangeSubbar: this.getStyle('range.disabledSubbar'), submenuRangeValue: this.getStyle('range.value'), submenuColorpickerTitle: this.getStyle('colorpicker.title'), submenuColorpickerButton: this.getStyle('colorpicker.button'), submenuCheckbox: this.getStyle('checkbox'), menuIconSize: this.getStyle('menu.iconSize'), submenuIconSize: this.getStyle('submenu.iconSize') }); } /** * Change to low dimensional object. * @param {object} styleOptions - style object of user interface * @returns {object} low level object for style apply * @private */ _changeToObject(styleOptions) { const styleObject = {}; forEach(styleOptions, (value, key) => { const keyExplode = key.match(/^(.+)\.([a-z]+)$/i); const [, property, subProperty] = keyExplode; if (!styleObject[property]) { styleObject[property] = {}; } styleObject[property][subProperty] = value; }); return styleObject; } /** * Style object to Csstext serialize * @param {object} styleObject - style object * @returns {string} - css text string * @private */ _makeCssText(styleObject) { const converterStack = []; forEach(styleObject, (value, key) => { if (['backgroundImage'].indexOf(key) > -1 && value !== 'none') { value = `url(${value})`; } converterStack.push(`${this._toUnderScore(key)}: ${value}`); }); return converterStack.join(';'); } /** * Camel key string to Underscore string * @param {string} targetString - change target * @returns {string} * @private */ _toUnderScore(targetString) { return targetString.replace(/([A-Z])/g, ($0, $1) => `-${$1.toLowerCase()}`); } } export default Theme;