148 lines
3.4 KiB
JavaScript
148 lines
3.4 KiB
JavaScript
import { and, gt } from "@ember/object/computed";
|
|
import discourseComputed, { observes } from "discourse-common/utils/decorators";
|
|
import Component from "@ember/component";
|
|
import { escape } from "pretty-text/sanitizer";
|
|
import { iconHTML } from "discourse-common/lib/icon-library";
|
|
import { isTesting } from "discourse-common/config/environment";
|
|
import { schedule } from "@ember/runloop";
|
|
|
|
const MAX_COMPONENTS = 4;
|
|
|
|
export default Component.extend({
|
|
childrenExpanded: false,
|
|
classNames: ["themes-list-item"],
|
|
classNameBindings: ["theme.selected:selected"],
|
|
hasComponents: gt("children.length", 0),
|
|
displayComponents: and("hasComponents", "theme.isActive"),
|
|
displayHasMore: gt("theme.childThemes.length", MAX_COMPONENTS),
|
|
|
|
click(e) {
|
|
if (!$(e.target).hasClass("others-count")) {
|
|
this.navigateToTheme();
|
|
}
|
|
},
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
this.scheduleAnimation();
|
|
},
|
|
|
|
@observes("theme.selected")
|
|
triggerAnimation() {
|
|
this.animate();
|
|
},
|
|
|
|
scheduleAnimation() {
|
|
schedule("afterRender", () => {
|
|
this.animate(true);
|
|
});
|
|
},
|
|
|
|
animate(isInitial) {
|
|
const $container = $(this.element);
|
|
const $list = $(this.element.querySelector(".components-list"));
|
|
if ($list.length === 0 || isTesting()) {
|
|
return;
|
|
}
|
|
const duration = 300;
|
|
if (this.get("theme.selected")) {
|
|
this.collapseComponentsList($container, $list, duration);
|
|
} else if (!isInitial) {
|
|
this.expandComponentsList($container, $list, duration);
|
|
}
|
|
},
|
|
|
|
@discourseComputed(
|
|
"theme.component",
|
|
"theme.childThemes.@each.name",
|
|
"theme.childThemes.length",
|
|
"childrenExpanded"
|
|
)
|
|
children() {
|
|
const theme = this.theme;
|
|
let children = theme.get("childThemes");
|
|
if (theme.get("component") || !children) {
|
|
return [];
|
|
}
|
|
children = this.childrenExpanded
|
|
? children
|
|
: children.slice(0, MAX_COMPONENTS);
|
|
return children.map((t) => {
|
|
const name = escape(t.name);
|
|
return t.enabled ? name : `${iconHTML("ban")} ${name}`;
|
|
});
|
|
},
|
|
|
|
@discourseComputed("children")
|
|
childrenString(children) {
|
|
return children.join(", ");
|
|
},
|
|
|
|
@discourseComputed(
|
|
"theme.childThemes.length",
|
|
"theme.component",
|
|
"childrenExpanded",
|
|
"children.length"
|
|
)
|
|
moreCount(childrenCount, component, expanded) {
|
|
if (component || !childrenCount || expanded) {
|
|
return 0;
|
|
}
|
|
return childrenCount - MAX_COMPONENTS;
|
|
},
|
|
|
|
expandComponentsList($container, $list, duration) {
|
|
$container.css("height", `${$container.height()}px`);
|
|
$list.css("display", "");
|
|
$container.animate(
|
|
{
|
|
height: `${$container.height() + $list.outerHeight(true)}px`,
|
|
},
|
|
{
|
|
duration,
|
|
done: () => {
|
|
$list.css("display", "");
|
|
$container.css("height", "");
|
|
},
|
|
}
|
|
);
|
|
$list.animate(
|
|
{
|
|
opacity: 1,
|
|
},
|
|
{
|
|
duration,
|
|
}
|
|
);
|
|
},
|
|
|
|
collapseComponentsList($container, $list, duration) {
|
|
$container.animate(
|
|
{
|
|
height: `${$container.height() - $list.outerHeight(true)}px`,
|
|
},
|
|
{
|
|
duration,
|
|
done: () => {
|
|
$list.css("display", "none");
|
|
$container.css("height", "");
|
|
},
|
|
}
|
|
);
|
|
$list.animate(
|
|
{
|
|
opacity: 0,
|
|
},
|
|
{
|
|
duration,
|
|
}
|
|
);
|
|
},
|
|
|
|
actions: {
|
|
toggleChildrenExpanded() {
|
|
this.toggleProperty("childrenExpanded");
|
|
},
|
|
},
|
|
});
|