|
|
|
@ -1,119 +1,21 @@ |
|
|
|
import { pipe } from "components/common/core" |
|
|
|
import { filter, map, reduce, toPairs } from "lodash/fp" |
|
|
|
|
|
|
|
const self = n => n |
|
|
|
const join_with = delimiter => a => a.join(delimiter) |
|
|
|
const empty_string_to_unset = s => (s.length ? s : "0") |
|
|
|
const add_suffix_if_number = suffix => s => { |
|
|
|
try { |
|
|
|
if (isNaN(s) || isNaN(parseFloat(s))) return s |
|
|
|
} catch (_) { |
|
|
|
return s |
|
|
|
} |
|
|
|
return s + suffix |
|
|
|
} |
|
|
|
|
|
|
|
export const make_margin = values => |
|
|
|
pipe(values, [ |
|
|
|
map(empty_string_to_unset), |
|
|
|
map(add_suffix_if_number("px")), |
|
|
|
join_with(" "), |
|
|
|
]) |
|
|
|
|
|
|
|
const css_map = { |
|
|
|
templaterows: { |
|
|
|
name: "grid-template-rows", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
templatecolumns: { |
|
|
|
name: "grid-template-columns", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
align: { |
|
|
|
name: "align-items", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
justify: { |
|
|
|
name: "justify-content", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
direction: { |
|
|
|
name: "flex-direction", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
gridarea: { |
|
|
|
name: "grid-area", |
|
|
|
generate: make_margin, |
|
|
|
}, |
|
|
|
gap: { |
|
|
|
name: "grid-gap", |
|
|
|
generate: n => `${n}px`, |
|
|
|
}, |
|
|
|
columnstart: { |
|
|
|
name: "grid-column-start", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
columnend: { |
|
|
|
name: "grid-column-end", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
rowstart: { |
|
|
|
name: "grid-row-start", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
rowend: { |
|
|
|
name: "grid-row-end", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
padding: { |
|
|
|
name: "padding", |
|
|
|
generate: make_margin, |
|
|
|
}, |
|
|
|
margin: { |
|
|
|
name: "margin", |
|
|
|
generate: make_margin, |
|
|
|
}, |
|
|
|
zindex: { |
|
|
|
name: "z-index", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
height: { |
|
|
|
name: "height", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
width: { |
|
|
|
name: "width", |
|
|
|
generate: self, |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
//Only used here
|
|
|
|
export const generate_rule = ([name, values]) => |
|
|
|
`${css_map[name].name}: ${css_map[name].generate(values)};` |
|
|
|
|
|
|
|
const handle_grid = (acc, [name, value]) => { |
|
|
|
let tmp = [] |
|
|
|
|
|
|
|
if (name === "row" || name === "column") { |
|
|
|
if (value[0]) tmp.push([`${name}start`, value[0]]) |
|
|
|
if (value[1]) tmp.push([`${name}end`, value[1]]) |
|
|
|
return acc.concat(tmp) |
|
|
|
export const generate_screen_css = component_arr => { |
|
|
|
let styles = "" |
|
|
|
for (const { _styles, _id, _children, _component } of component_arr) { |
|
|
|
let [componentName] = _component.match(/[a-z]*$/) |
|
|
|
Object.keys(_styles).forEach(selector => { |
|
|
|
const cssString = generate_css(_styles[selector]) |
|
|
|
if (cssString) { |
|
|
|
styles += apply_class(_id, componentName, cssString, selector) |
|
|
|
} |
|
|
|
}) |
|
|
|
if (_children && _children.length) { |
|
|
|
styles += generate_screen_css(_children) + "\n" |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return acc.concat([[name, value]]) |
|
|
|
return styles.trim() |
|
|
|
} |
|
|
|
|
|
|
|
const object_to_css_string = [ |
|
|
|
toPairs, |
|
|
|
reduce(handle_grid, []), |
|
|
|
filter(v => (Array.isArray(v[1]) ? v[1].some(s => s.length) : v[1].length)), |
|
|
|
map(generate_rule), |
|
|
|
join_with("\n"), |
|
|
|
] |
|
|
|
|
|
|
|
//USED BY generate_screen_css
|
|
|
|
export const generate_css = style => { |
|
|
|
// let cssString = pipe(style, object_to_css_string)
|
|
|
|
let cssString = Object.entries(style).reduce((str, [key, value]) => { |
|
|
|
//TODO Handle arrays and objects here also
|
|
|
|
if (typeof value === "string") { |
|
|
|
@ -130,23 +32,12 @@ export const generate_css = style => { |
|
|
|
return (cssString || "").trim() |
|
|
|
} |
|
|
|
|
|
|
|
const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}` |
|
|
|
|
|
|
|
//USED IN MULTIPLE PLACES IN THE BUILDER STORE
|
|
|
|
export const generate_screen_css = component_array => { |
|
|
|
let styles = "" |
|
|
|
let emptyStyles = { normal: {}, hover: {}, active: {}, selected: {} } |
|
|
|
for (let i = 0; i < component_array.length; i += 1) { |
|
|
|
const { _styles, _id, _children, _component } = component_array[i] |
|
|
|
// let [componentName] = _component.match(/[a-z]*$/)
|
|
|
|
debugger |
|
|
|
const cssString = generate_css(_styles || emptyStyles) || "" |
|
|
|
if (cssString) { |
|
|
|
styles += apply_class(_id, "element", cssString) |
|
|
|
} |
|
|
|
if (_children && _children.length) { |
|
|
|
styles += generate_screen_css(_children) + "\n" |
|
|
|
} |
|
|
|
const apply_class = (id, name = "element", styles, selector) => { |
|
|
|
if (selector === "normal") { |
|
|
|
return `.${name}-${id} {\n${styles}\n}` |
|
|
|
} else { |
|
|
|
let sel = selector === "selected" ? "::selection" : `:${selector}` |
|
|
|
return `.${name}-${id}${sel} {\n${styles}\n}` |
|
|
|
} |
|
|
|
return styles.trim() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
Conor_Mack
6 years ago