Add support for array settings in themes

This commit is contained in:
Samuel Elliott 2018-02-20 00:01:23 +00:00
parent 522e798669
commit 7123f5f100
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
3 changed files with 138 additions and 5 deletions

View File

@ -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, '\\\'')}'`];
}
}

View File

@ -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",

View File

@ -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;
}