discourse/app/assets/javascripts/admin/models/theme.js.es6

350 lines
8.9 KiB
Plaintext
Raw Normal View History

2019-11-01 04:28:10 +08:00
import { get } from "@ember/object";
import { isEmpty } from "@ember/utils";
import { or, gt } from "@ember/object/computed";
2018-06-15 23:03:24 +08:00
import RestModel from "discourse/models/rest";
import { default as discourseComputed } from "discourse-common/utils/decorators";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { ajax } from "discourse/lib/ajax";
import { escapeExpression } from "discourse/lib/utilities";
import highlightSyntax from "discourse/lib/highlight-syntax";
const THEME_UPLOAD_VAR = 2;
const FIELDS_IDS = [0, 1, 5];
2018-08-31 03:23:15 +08:00
export const THEMES = "themes";
export const COMPONENTS = "components";
const SETTINGS_TYPE_ID = 5;
2018-08-31 03:23:15 +08:00
const Theme = RestModel.extend({
isActive: or("default", "user_selectable"),
isPendingUpdates: gt("remote_theme.commits_behind", 0),
hasEditedFields: gt("editedFields.length", 0),
2018-03-29 05:02:34 +08:00
@discourseComputed("theme_fields.[]")
targets() {
return [
{ id: 0, name: "common" },
{ id: 1, name: "desktop", icon: "desktop" },
{ id: 2, name: "mobile", icon: "mobile-alt" },
{ id: 3, name: "settings", icon: "cog", advanced: true },
{
id: 4,
name: "translations",
icon: "globe",
advanced: true,
customNames: true
},
{
id: 5,
name: "extra_scss",
icon: "paint-brush",
advanced: true,
customNames: true
}
].map(target => {
target["edited"] = this.hasEdited(target.name);
target["error"] = this.hasError(target.name);
return target;
});
},
@discourseComputed("theme_fields.[]")
fieldNames() {
const common = [
"scss",
"head_tag",
"header",
"after_header",
"body_tag",
"footer"
];
const scss_fields = (this.theme_fields || [])
.filter(f => f.target === "extra_scss" && f.name !== "")
.map(f => f.name);
if (scss_fields.length < 1) {
scss_fields.push("importable_scss");
}
return {
common: [...common, "embedded_scss"],
desktop: common,
mobile: common,
settings: ["yaml"],
translations: [
"en",
...(this.theme_fields || [])
.filter(f => f.target === "translations" && f.name !== "en")
.map(f => f.name)
],
extra_scss: scss_fields
};
},
@discourseComputed(
"fieldNames",
"theme_fields.[]",
"theme_fields.@each.error"
)
fields(fieldNames) {
const hash = {};
Object.keys(fieldNames).forEach(target => {
hash[target] = fieldNames[target].map(fieldName => {
const field = {
name: fieldName,
edited: this.hasEdited(target, fieldName),
error: this.hasError(target, fieldName)
};
if (target === "translations" || target === "extra_scss") {
field.translatedName = fieldName;
} else {
field.translatedName = I18n.t(
`admin.customize.theme.${fieldName}.text`
);
field.title = I18n.t(`admin.customize.theme.${fieldName}.title`);
}
if (fieldName.indexOf("_tag") > 0) {
field.icon = "far-file-alt";
}
return field;
});
});
return hash;
},
@discourseComputed("theme_fields")
themeFields(fields) {
if (!fields) {
2018-06-15 23:03:24 +08:00
this.set("theme_fields", []);
return {};
}
let hash = {};
fields.forEach(field => {
if (!field.type_id || FIELDS_IDS.includes(field.type_id)) {
hash[this.getKey(field)] = field;
}
});
return hash;
},
@discourseComputed("theme_fields", "theme_fields.[]")
uploads(fields) {
if (!fields) {
return [];
}
2018-06-15 23:03:24 +08:00
return fields.filter(
f => f.target === "common" && f.type_id === THEME_UPLOAD_VAR
);
},
@discourseComputed("theme_fields", "theme_fields.@each.error")
2018-08-31 03:23:15 +08:00
isBroken(fields) {
return fields && fields.any(field => field.error && field.error.length > 0);
2018-08-31 03:23:15 +08:00
},
@discourseComputed("theme_fields.[]")
editedFields(fields) {
return fields.filter(
2019-01-12 00:54:23 +08:00
field => !Ember.isBlank(field.value) && field.type_id !== SETTINGS_TYPE_ID
);
2018-08-31 03:23:15 +08:00
},
@discourseComputed("remote_theme.last_error_text")
remoteError(errorText) {
if (errorText && errorText.length > 0) {
return errorText;
}
},
2018-06-15 23:03:24 +08:00
getKey(field) {
return `${field.target} ${field.name}`;
},
2018-06-15 23:03:24 +08:00
hasEdited(target, name) {
if (name) {
return !isEmpty(this.getField(target, name));
} else {
let fields = this.theme_fields || [];
2018-06-15 23:03:24 +08:00
return fields.any(
field => field.target === target && !isEmpty(field.value)
2018-06-15 23:03:24 +08:00
);
}
},
hasError(target, name) {
return this.theme_fields
.filter(f => f.target === target && (!name || name === f.name))
.any(f => f.error);
},
getError(target, name) {
let themeFields = this.themeFields;
2018-06-15 23:03:24 +08:00
let key = this.getKey({ target, name });
let field = themeFields[key];
return field ? field.error : "";
},
getField(target, name) {
let themeFields = this.themeFields;
2018-06-15 23:03:24 +08:00
let key = this.getKey({ target, name });
let field = themeFields[key];
return field ? field.value : "";
},
removeField(field) {
this.set("changed", true);
field.upload_id = null;
field.value = null;
return this.saveChanges("theme_fields");
},
setField(target, name, value, upload_id, type_id) {
this.set("changed", true);
let themeFields = this.themeFields;
2018-06-15 23:03:24 +08:00
let field = { name, target, value, upload_id, type_id };
// slow path for uploads and so on
if (type_id && type_id > 1) {
let fields = this.theme_fields;
2018-06-15 23:03:24 +08:00
let existing = fields.find(
f => f.target === target && f.name === name && f.type_id === type_id
);
if (existing) {
existing.value = value;
existing.upload_id = upload_id;
} else {
fields.pushObject(field);
}
return;
}
// fast path
2018-06-15 23:03:24 +08:00
let key = this.getKey({ target, name });
let existingField = themeFields[key];
if (!existingField) {
this.theme_fields.pushObject(field);
themeFields[key] = field;
} else {
const changed =
(isEmpty(existingField.value) && !isEmpty(value)) ||
(isEmpty(value) && !isEmpty(existingField.value));
existingField.value = value;
if (changed) {
// Observing theme_fields.@each.value is too slow, so manually notify
// if the value goes to/from blank
this.notifyPropertyChange("theme_fields.[]");
}
}
},
@discourseComputed("childThemes.[]")
child_theme_ids(childThemes) {
if (childThemes) {
2019-11-01 04:28:10 +08:00
return childThemes.map(theme => get(theme, "id"));
}
},
removeChildTheme(theme) {
const childThemes = this.childThemes;
childThemes.removeObject(theme);
return this.saveChanges("child_theme_ids");
},
2018-06-15 23:03:24 +08:00
addChildTheme(theme) {
let childThemes = this.childThemes;
if (!childThemes) {
childThemes = [];
2018-06-15 23:03:24 +08:00
this.set("childThemes", childThemes);
}
childThemes.removeObject(theme);
childThemes.pushObject(theme);
return this.saveChanges("child_theme_ids");
},
addParentTheme(theme) {
let parentThemes = this.parentThemes;
if (!parentThemes) {
parentThemes = [];
this.set("parentThemes", parentThemes);
}
parentThemes.addObject(theme);
},
@discourseComputed("name", "default")
description: function(name, isDefault) {
if (isDefault) {
2018-06-15 23:03:24 +08:00
return I18n.t("admin.customize.theme.default_name", { name: name });
} else {
return name;
}
},
checkForUpdates() {
2018-06-15 23:03:24 +08:00
return this.save({ remote_check: true }).then(() =>
this.set("changed", false)
);
},
updateToLatest() {
return ajax(`/admin/themes/${this.id}/diff_local_changes`).then(json => {
if (json && json.error) {
bootbox.alert(
I18n.t("generic_error_with_reason", {
error: json.error
})
);
} else if (json && json.diff) {
bootbox.confirm(
I18n.t("admin.customize.theme.update_confirm") +
`<pre><code class="diff">${escapeExpression(
json.diff
)}</code></pre>`,
I18n.t("cancel"),
I18n.t("admin.customize.theme.update_confirm_yes"),
result => {
if (result) {
return this.save({ remote_update: true }).then(() =>
this.set("changed", false)
);
}
}
);
highlightSyntax();
} else {
return this.save({ remote_update: true }).then(() =>
this.set("changed", false)
);
}
});
},
changed: false,
saveChanges() {
const hash = this.getProperties.apply(this, arguments);
return this.save(hash)
.finally(() => this.set("changed", false))
.catch(popupAjaxError);
},
saveSettings(name, value) {
const settings = {};
settings[name] = value;
return this.save({ settings });
},
saveTranslation(name, value) {
return this.save({ translations: { [name]: value } });
}
});
export default Theme;