Add support for array settings in themes
This commit is contained in:
parent
522e798669
commit
7123f5f100
|
@ -69,30 +69,71 @@ export default class ThemeManager extends ContentManager {
|
|||
|
||||
for (let category of config) {
|
||||
for (let setting of category.settings) {
|
||||
variables.push(this.parseSetting(setting));
|
||||
const setting_scss = this.parseSetting(setting);
|
||||
if (setting_scss) variables.push(`$${setting_scss[0]}: ${setting_scss[1]};`);
|
||||
}
|
||||
}
|
||||
|
||||
return variables.join('\n');
|
||||
}
|
||||
|
||||
static getConfigAsSCSSMap(config) {
|
||||
const variables = [];
|
||||
|
||||
for (let category of config) {
|
||||
for (let setting of category.settings) {
|
||||
const setting_scss = this.parseSetting(setting);
|
||||
if (setting_scss) variables.push(`${setting_scss[0]}: (${setting_scss[1]})`);
|
||||
}
|
||||
}
|
||||
|
||||
return '(' + variables.join(', ') + ')';
|
||||
}
|
||||
|
||||
static parseSetting(setting) {
|
||||
const { type, id, value } = setting;
|
||||
const name = id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-');
|
||||
|
||||
if (type === 'array') {
|
||||
const items = JSON.parse(JSON.stringify(value)) || [];
|
||||
const settings_json = JSON.stringify(setting.settings);
|
||||
|
||||
for (let item of items) {
|
||||
const settings = JSON.parse(settings_json);
|
||||
|
||||
for (let category of settings) {
|
||||
const newCategory = item.settings.find(c => c.category === category.category);
|
||||
for (let setting of category.settings) {
|
||||
const newSetting = newCategory.settings.find(s => s.id === setting.id);
|
||||
setting.value = setting.old_value = newSetting.value;
|
||||
setting.changed = false;
|
||||
}
|
||||
}
|
||||
|
||||
item.settings = settings;
|
||||
}
|
||||
|
||||
console.log('items', items);
|
||||
|
||||
// Final comma ensures the variable is a list
|
||||
const maps = items.map(i => this.getConfigAsSCSSMap(i.settings));
|
||||
return [name, maps.length ? maps.join(', ') + ',' : '()'];
|
||||
}
|
||||
|
||||
if (type === 'slider') {
|
||||
return `$${name}: ${value * setting.multi || 1};`;
|
||||
return [name, value * setting.multi || 1];
|
||||
}
|
||||
|
||||
if (type === 'dropdown' || type === 'radio') {
|
||||
return `$${name}: ${setting.options.find(opt => opt.id === value).value};`;
|
||||
return [name, setting.options.find(opt => opt.id === value).value];
|
||||
}
|
||||
|
||||
if (typeof value === 'boolean' || typeof value === 'number') {
|
||||
return `$${name}: ${value};`;
|
||||
return [name, value];
|
||||
}
|
||||
|
||||
if (typeof value === 'string') {
|
||||
return `$${name}: '${setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}';`;
|
||||
return [name, `'${setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'`];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -25,6 +25,86 @@
|
|||
"text": "Additional colours",
|
||||
"inline": true,
|
||||
"allow_external": false,
|
||||
"value": [
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"category": "default",
|
||||
"settings": [
|
||||
{
|
||||
"id": "colour",
|
||||
"value": "#ff0000"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"category": "default",
|
||||
"settings": [
|
||||
{
|
||||
"id": "colour",
|
||||
"value": "#ffff00"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"category": "default",
|
||||
"settings": [
|
||||
{
|
||||
"id": "colour",
|
||||
"value": "#ffffff"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"category": "default",
|
||||
"settings": [
|
||||
{
|
||||
"id": "colour",
|
||||
"value": "#00ffff"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"category": "default",
|
||||
"settings": [
|
||||
{
|
||||
"id": "colour",
|
||||
"value": "#0000ff"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"category": "default",
|
||||
"settings": [
|
||||
{
|
||||
"id": "colour",
|
||||
"value": "#000000"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"settings": [
|
||||
{
|
||||
"category": "default",
|
||||
|
|
|
@ -14,3 +14,15 @@ span {
|
|||
background-image: url($avatar) !important;
|
||||
border-radius: $avatarRadius !important;
|
||||
}
|
||||
|
||||
// Can't use a for loop as then we don't get the index
|
||||
$index: 0;
|
||||
@while $index < length($additional-colours) {
|
||||
$additional-colour: nth($additional-colours, $index + 1);
|
||||
|
||||
div:nth-child(#{length($additional-colours)}n + #{$index}) {
|
||||
color: unquote(map-get($additional-colour, colour)) !important;
|
||||
}
|
||||
|
||||
$index: $index + 1;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue