some more stuff, generating CSS selectors from rules
This commit is contained in:
parent
521d308a6c
commit
0729b529d7
@ -1,5 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'Button',
|
name: 'Button',
|
||||||
|
selector: '.btn',
|
||||||
states: {
|
states: {
|
||||||
hover: ':hover',
|
hover: ':hover',
|
||||||
disabled: ':disabled',
|
disabled: ':disabled',
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'Icon'
|
name: 'Icon',
|
||||||
|
selector: '.icon'
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'Panel',
|
name: 'Panel',
|
||||||
|
selector: '.panel',
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Text',
|
'Text',
|
||||||
'Icon',
|
'Icon',
|
||||||
|
@ -1,9 +1,7 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'Text',
|
name: 'Text',
|
||||||
|
selector: '',
|
||||||
states: {
|
states: {
|
||||||
faint: '.faint'
|
faint: '.faint'
|
||||||
},
|
|
||||||
variants: {
|
|
||||||
green: '/.greentext'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'Panel',
|
name: 'Underlay',
|
||||||
|
selector: '.underlay',
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Panel'
|
'Panel'
|
||||||
]
|
]
|
||||||
|
26
src/services/theme_data/pleromafe.t3.js
Normal file
26
src/services/theme_data/pleromafe.t3.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
export const sampleRules = [
|
||||||
|
{
|
||||||
|
component: 'Underlay',
|
||||||
|
// variant: 'normal',
|
||||||
|
// state: 'normal'
|
||||||
|
directives: {
|
||||||
|
background: '#000',
|
||||||
|
opacity: 0.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Panel',
|
||||||
|
directives: {
|
||||||
|
background: '#FFFFFF',
|
||||||
|
opacity: 0.9
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Button',
|
||||||
|
directives: {
|
||||||
|
background: '#808080',
|
||||||
|
text: '#FFFFFF',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
@ -14,7 +14,7 @@ const components = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
|
// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
|
||||||
const getAllPossibleCombinations = (array) => {
|
export const getAllPossibleCombinations = (array) => {
|
||||||
const combos = [array.map(x => [x])]
|
const combos = [array.map(x => [x])]
|
||||||
for (let comboSize = 2; comboSize <= array.length; comboSize++) {
|
for (let comboSize = 2; comboSize <= array.length; comboSize++) {
|
||||||
const previous = combos[combos.length - 1]
|
const previous = combos[combos.length - 1]
|
||||||
@ -30,15 +30,52 @@ const getAllPossibleCombinations = (array) => {
|
|||||||
return combos.reduce((acc, x) => [...acc, ...x], [])
|
return combos.reduce((acc, x) => [...acc, ...x], [])
|
||||||
}
|
}
|
||||||
|
|
||||||
export const init = () => {
|
export const ruleToSelector = (rule) => {
|
||||||
|
const component = components[rule.component]
|
||||||
|
const { states, variants, selector } = component
|
||||||
|
|
||||||
|
const applicableStates = (rule.state.filter(x => x !== 'normal') || []).map(state => states[state])
|
||||||
|
|
||||||
|
const applicableVariantName = (rule.variant || 'normal')
|
||||||
|
let applicableVariant = ''
|
||||||
|
if (applicableVariantName !== 'normal') {
|
||||||
|
applicableVariant = variants[applicableVariantName]
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectors = [selector, applicableVariant, ...applicableStates]
|
||||||
|
.toSorted((a, b) => {
|
||||||
|
if (a.startsWith(':')) return 1
|
||||||
|
else return -1
|
||||||
|
})
|
||||||
|
.join('')
|
||||||
|
|
||||||
|
if (rule.parent) {
|
||||||
|
return ruleToSelector(rule.parent) + ' ' + selectors
|
||||||
|
}
|
||||||
|
return selectors
|
||||||
|
}
|
||||||
|
|
||||||
|
export const init = (ruleset) => {
|
||||||
const rootName = root.name
|
const rootName = root.name
|
||||||
const rules = []
|
const rules = []
|
||||||
|
const rulesByComponent = {}
|
||||||
|
|
||||||
|
const addRule = (rule) => {
|
||||||
|
rules.push(rule)
|
||||||
|
rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
|
||||||
|
rulesByComponent.push(rule)
|
||||||
|
}
|
||||||
|
|
||||||
|
ruleset.forEach(rule => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
const processInnerComponent = (component, parent) => {
|
const processInnerComponent = (component, parent) => {
|
||||||
const {
|
const {
|
||||||
validInnerComponents,
|
validInnerComponents = [],
|
||||||
states: originalStates = {},
|
states: originalStates = {},
|
||||||
variants: originalVariants = {}
|
variants: originalVariants = {},
|
||||||
|
name
|
||||||
} = component
|
} = component
|
||||||
|
|
||||||
const states = { normal: '', ...originalStates }
|
const states = { normal: '', ...originalStates }
|
||||||
@ -51,16 +88,17 @@ export const init = () => {
|
|||||||
}).reduce((acc, x) => [...acc, ...x], [])
|
}).reduce((acc, x) => [...acc, ...x], [])
|
||||||
|
|
||||||
stateVariantCombination.forEach(combination => {
|
stateVariantCombination.forEach(combination => {
|
||||||
rules.push(({
|
// addRule(({
|
||||||
parent,
|
// parent,
|
||||||
component: component.name,
|
// component: component.name,
|
||||||
state: combination.state,
|
// state: combination.state,
|
||||||
variant: combination.variant
|
// variant: combination.variant
|
||||||
}))
|
// }))
|
||||||
|
|
||||||
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, combination))
|
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
processInnerComponent(components[rootName])
|
processInnerComponent(components[rootName])
|
||||||
|
return rules
|
||||||
}
|
}
|
||||||
|
26
test/unit/specs/services/theme_data/theme_data3.spec.js
Normal file
26
test/unit/specs/services/theme_data/theme_data3.spec.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
|
||||||
|
import {
|
||||||
|
getAllPossibleCombinations,
|
||||||
|
init,
|
||||||
|
ruleToSelector
|
||||||
|
} from 'src/services/theme_data/theme_data_3.service.js'
|
||||||
|
import {
|
||||||
|
sampleRules
|
||||||
|
} from 'src/services/theme_data/pleromafe.t3.js'
|
||||||
|
|
||||||
|
describe.only('Theme Data 3', () => {
|
||||||
|
describe('getAllPossibleCombinations', () => {
|
||||||
|
it('test simple case', () => {
|
||||||
|
const out = getAllPossibleCombinations([1, 2, 3]).map(x => x.sort((a, b) => a - b))
|
||||||
|
expect(out).to.eql([[1], [2], [3], [1, 2], [1, 3], [2, 3], [1, 2, 3]])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('init', () => {
|
||||||
|
it('test simple case', () => {
|
||||||
|
const out = init(sampleRules)
|
||||||
|
console.log(JSON.stringify(out, null, 2))
|
||||||
|
out.forEach(r => console.log(ruleToSelector(r)))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user