From 63961419a183f69475ef397dde007d63acb2344e Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 27 Nov 2021 13:51:19 +0100 Subject: [PATCH] Add camelCase option --- src/style_manager/model/Layer.js | 12 +++++-- src/style_manager/model/PropertyStack.js | 13 ++++++-- src/utils/mixins.js | 42 +++++++----------------- 3 files changed, 31 insertions(+), 36 deletions(-) diff --git a/src/style_manager/model/Layer.js b/src/style_manager/model/Layer.js index f07f94f5b..5c6b206a9 100644 --- a/src/style_manager/model/Layer.js +++ b/src/style_manager/model/Layer.js @@ -1,5 +1,6 @@ import Backbone from 'backbone'; import Properties from './Properties'; +import { camelCase } from 'utils/mixins'; export default Backbone.Model.extend({ defaults: { @@ -33,8 +34,15 @@ export default Backbone.Model.extend({ } }, - getValues() { - return this.get('values'); + getValues(opts = {}) { + const values = this.get('values'); + + return opts.camelCase + ? Object.keys(values).reduce((res, key) => { + res[camelCase(key)] = values[key]; + return res; + }, {}) + : values; }, upValues(props = {}) { diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index e7fe0ed74..a3f1b05db 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -1,6 +1,7 @@ import { keys, isUndefined } from 'underscore'; import Property from './PropertyComposite'; import Layers from './Layers'; +import { camelCase } from 'utils/mixins'; const VALUES_REG = /,(?![^\(]*\))/; const PARTS_REG = /\s(?![^(]*\))/; @@ -125,7 +126,7 @@ export default Property.extend({ * Get style object from layer values * @param {[Layer]} layer */ - getStyleFromLayer(layer) { + getStyleFromLayer(layer, opts = {}) { const sep = this.get('separator'); const values = layer.getValues(); const result = this.getProperties().map(prop => { @@ -134,8 +135,7 @@ export default Property.extend({ const value = isUndefined(val) ? prop.getDefaultValue() : val; return { name, value }; }); - - return this.get('detached') + const style = this.get('detached') ? result.reduce((acc, item) => { acc[item.name] = item.value; return acc; @@ -143,6 +143,13 @@ export default Property.extend({ : { [this.getName()]: result.map(r => r.value).join(sep), }; + + return opts.camelCase + ? Object.keys(style).reduce((res, key) => { + res[camelCase(key)] = style[key]; + return res; + }, {}) + : style; }, __getFullValue() { diff --git a/src/utils/mixins.js b/src/utils/mixins.js index 56da04885..ee9ebb120 100644 --- a/src/utils/mixins.js +++ b/src/utils/mixins.js @@ -5,20 +5,12 @@ export const isDef = value => typeof value !== 'undefined'; export const hasWin = () => typeof window !== 'undefined'; export const getGlobal = () => - typeof globalThis !== 'undefined' - ? globalThis - : typeof window !== 'undefined' - ? window - : global; + typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : global; export const toLowerCase = str => (str || '').toLowerCase(); const elProt = hasWin() ? window.Element.prototype : {}; -const matches = - elProt.matches || - elProt.webkitMatchesSelector || - elProt.mozMatchesSelector || - elProt.msMatchesSelector; +const matches = elProt.matches || elProt.webkitMatchesSelector || elProt.mozMatchesSelector || elProt.msMatchesSelector; export const getUiClass = (em, defCls) => { const { stylePrefix, customUI } = em.getConfig(); @@ -35,10 +27,7 @@ const appendStyles = (styles, opts = {}) => { if (stls.length) { const href = stls.shift(); - if ( - href && - (!opts.unique || !document.querySelector(`link[href="${href}"]`)) - ) { + if (href && (!opts.unique || !document.querySelector(`link[href="${href}"]`))) { const { head } = document; const link = document.createElement('link'); link.href = href; @@ -121,8 +110,7 @@ const getUnitFromValue = value => { const upFirst = value => value[0].toUpperCase() + value.toLowerCase().slice(1); const camelCase = value => { - const values = value.split('-').filter(String); - return values[0].toLowerCase() + values.slice(1).map(upFirst); + return value.replace(/-./g, x => x[1].toUpperCase()); }; const normalizeFloat = (value, step = 1, valueDef = 0) => { @@ -139,10 +127,7 @@ const normalizeFloat = (value, step = 1, valueDef = 0) => { }; const hasDnd = em => { - return ( - 'draggable' in document.createElement('i') && - (em ? em.get('Config').nativeDnD : 1) - ); + return 'draggable' in document.createElement('i') && (em ? em.get('Config').nativeDnD : 1); }; /** @@ -211,7 +196,7 @@ const getElRect = el => { top: 0, left: 0, width: 0, - height: 0 + height: 0, }; if (!el) return def; let rectText; @@ -223,9 +208,7 @@ const getElRect = el => { range.detach(); } - return ( - rectText || (el.getBoundingClientRect ? el.getBoundingClientRect() : def) - ); + return rectText || (el.getBoundingClientRect ? el.getBoundingClientRect() : def); }; /** @@ -233,8 +216,7 @@ const getElRect = el => { * @param {Event} ev * @return {Event} */ -const getPointerEvent = ev => - ev.touches && ev.touches[0] ? ev.touches[0] : ev; +const getPointerEvent = ev => (ev.touches && ev.touches[0] ? ev.touches[0] : ev); /** * Get cross-browser keycode @@ -245,8 +227,7 @@ const getKeyCode = ev => ev.which || ev.keyCode; const getKeyChar = ev => String.fromCharCode(getKeyCode(ev)); const isEscKey = ev => getKeyCode(ev) === 27; const isEnterKey = ev => getKeyCode(ev) === 13; -const isObject = val => - val !== null && !Array.isArray(val) && typeof val === 'object'; +const isObject = val => val !== null && !Array.isArray(val) && typeof val === 'object'; const isEmptyObj = val => Object.keys(val).length <= 0; const capitalize = str => str && str.charAt(0).toUpperCase() + str.substring(1); @@ -260,8 +241,7 @@ const setViewEl = (el, view) => { const createId = (length = 16) => { let result = ''; - const chars = - 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const len = chars.length; for (let i = 0; i < length; i++) { result += chars.charAt(Math.floor(Math.random() * len)); @@ -296,5 +276,5 @@ export { isEmptyObj, isComponent, createId, - isRule + isRule, };