mirror of
https://github.com/discourse/discourse.git
synced 2024-12-01 12:35:12 +08:00
882b0aac19
Themes can now declare custom colors that get compiled in core's color definitions stylesheet, thus allowing themes to better support dark/light color schemes.
For example, if you need your theme to use tertiary for an element in a light color scheme and quaternary in a dark scheme, you can add the following SCSS to your theme's `color_definitions.scss` file:
```
:root {
--mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};
}
```
And then use the `--mytheme-tertiary-or-quaternary` variable as the color property of that element. You can also use this file to add color variables that use SCSS color transformation functions (lighten, darken, saturate, etc.) without compromising your theme's compatibility with different color schemes.
135 lines
3.5 KiB
JavaScript
135 lines
3.5 KiB
JavaScript
import Component from "@ember/component";
|
|
import loadScript from "discourse/lib/load-script";
|
|
import getURL from "discourse-common/lib/get-url";
|
|
import { observes } from "discourse-common/utils/decorators";
|
|
import { on } from "@ember/object/evented";
|
|
|
|
export default Component.extend({
|
|
mode: "css",
|
|
classNames: ["ace-wrapper"],
|
|
_editor: null,
|
|
_skipContentChangeEvent: null,
|
|
disabled: false,
|
|
|
|
@observes("editorId")
|
|
editorIdChanged() {
|
|
if (this.autofocus) {
|
|
this.send("focus");
|
|
}
|
|
},
|
|
|
|
@observes("content")
|
|
contentChanged() {
|
|
const content = this.content || "";
|
|
if (this._editor && !this._skipContentChangeEvent) {
|
|
this._editor.getSession().setValue(content);
|
|
}
|
|
},
|
|
|
|
@observes("mode")
|
|
modeChanged() {
|
|
if (this._editor && !this._skipContentChangeEvent) {
|
|
this._editor.getSession().setMode("ace/mode/" + this.mode);
|
|
}
|
|
},
|
|
|
|
@observes("placeholder")
|
|
placeholderChanged() {
|
|
if (this._editor) {
|
|
this._editor.setOptions({
|
|
placeholder: this.placeholder
|
|
});
|
|
}
|
|
},
|
|
|
|
@observes("disabled")
|
|
disabledStateChanged() {
|
|
this.changeDisabledState();
|
|
},
|
|
|
|
changeDisabledState() {
|
|
const editor = this._editor;
|
|
if (editor) {
|
|
const disabled = this.disabled;
|
|
editor.setOptions({
|
|
readOnly: disabled,
|
|
highlightActiveLine: !disabled,
|
|
highlightGutterLine: !disabled
|
|
});
|
|
editor.container.parentNode.setAttribute("data-disabled", disabled);
|
|
}
|
|
},
|
|
|
|
_destroyEditor: on("willDestroyElement", function() {
|
|
if (this._editor) {
|
|
this._editor.destroy();
|
|
this._editor = null;
|
|
}
|
|
if (this.appEvents) {
|
|
// xxx: don't run during qunit tests
|
|
this.appEvents.off("ace:resize", this, "resize");
|
|
}
|
|
|
|
$(window).off("ace:resize");
|
|
}),
|
|
|
|
resize() {
|
|
if (this._editor) {
|
|
this._editor.resize();
|
|
}
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
loadScript("/javascripts/ace/ace.js").then(() => {
|
|
window.ace.require(["ace/ace"], loadedAce => {
|
|
loadedAce.config.set("loadWorkerFromBlob", false);
|
|
loadedAce.config.set("workerPath", getURL("/javascripts/ace")); // Do not use CDN for workers
|
|
|
|
if (!this.element || this.isDestroying || this.isDestroyed) {
|
|
return;
|
|
}
|
|
const editor = loadedAce.edit(this.element.querySelector(".ace"));
|
|
|
|
editor.setTheme("ace/theme/chrome");
|
|
editor.setShowPrintMargin(false);
|
|
editor.setOptions({ fontSize: "14px", placeholder: this.placeholder });
|
|
editor.getSession().setMode("ace/mode/" + this.mode);
|
|
editor.on("change", () => {
|
|
this._skipContentChangeEvent = true;
|
|
this.set("content", editor.getSession().getValue());
|
|
this._skipContentChangeEvent = false;
|
|
});
|
|
editor.$blockScrolling = Infinity;
|
|
editor.renderer.setScrollMargin(10, 10);
|
|
|
|
this.element.setAttribute("data-editor", editor);
|
|
this._editor = editor;
|
|
this.changeDisabledState();
|
|
|
|
$(window)
|
|
.off("ace:resize")
|
|
.on("ace:resize", () => this.appEvents.trigger("ace:resize"));
|
|
|
|
if (this.appEvents) {
|
|
// xxx: don't run during qunit tests
|
|
this.appEvents.on("ace:resize", this, "resize");
|
|
}
|
|
|
|
if (this.autofocus) {
|
|
this.send("focus");
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
actions: {
|
|
focus() {
|
|
if (this._editor) {
|
|
this._editor.focus();
|
|
this._editor.navigateFileEnd();
|
|
}
|
|
}
|
|
}
|
|
});
|