144 lines
3.3 KiB
JavaScript
144 lines
3.3 KiB
JavaScript
import { empty, equal, notEmpty } from "@ember/object/computed";
|
|
import Component from "@ember/component";
|
|
import DiscourseURL from "discourse/lib/url";
|
|
import I18n from "I18n";
|
|
import { computed } from "@ember/object";
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
|
|
|
export default Component.extend({
|
|
tagName: "button",
|
|
// subclasses need this
|
|
layoutName: "components/d-button",
|
|
form: null,
|
|
type: "button",
|
|
title: null,
|
|
translatedTitle: null,
|
|
label: null,
|
|
translatedLabel: null,
|
|
ariaLabel: null,
|
|
ariaExpanded: null,
|
|
ariaControls: null,
|
|
translatedAriaLabel: null,
|
|
forwardEvent: false,
|
|
preventFocus: false,
|
|
|
|
isLoading: computed({
|
|
set(key, value) {
|
|
this.set("forceDisabled", value);
|
|
return value;
|
|
},
|
|
}),
|
|
|
|
classNameBindings: [
|
|
"isLoading:is-loading",
|
|
"btnLink::btn",
|
|
"btnLink",
|
|
"noText",
|
|
"btnType",
|
|
],
|
|
attributeBindings: [
|
|
"form",
|
|
"isDisabled:disabled",
|
|
"computedTitle:title",
|
|
"computedAriaLabel:aria-label",
|
|
"computedAriaExpanded:aria-expanded",
|
|
"ariaControls:aria-controls",
|
|
"tabindex",
|
|
"type",
|
|
],
|
|
|
|
isDisabled: computed("disabled", "forceDisabled", function () {
|
|
return this.forceDisabled || this.disabled;
|
|
}),
|
|
|
|
forceDisabled: false,
|
|
|
|
btnIcon: notEmpty("icon"),
|
|
|
|
btnLink: equal("display", "link"),
|
|
|
|
@discourseComputed("icon", "computedLabel")
|
|
btnType(icon, translatedLabel) {
|
|
if (icon) {
|
|
return translatedLabel ? "btn-icon-text" : "btn-icon";
|
|
} else if (translatedLabel) {
|
|
return "btn-text";
|
|
}
|
|
},
|
|
|
|
noText: empty("computedLabel"),
|
|
|
|
@discourseComputed("title", "translatedTitle")
|
|
computedTitle(title, translatedTitle) {
|
|
if (this.title) {
|
|
return I18n.t(title);
|
|
}
|
|
return translatedTitle;
|
|
},
|
|
|
|
@discourseComputed("label", "translatedLabel")
|
|
computedLabel(label, translatedLabel) {
|
|
if (this.label) {
|
|
return I18n.t(label);
|
|
}
|
|
return translatedLabel;
|
|
},
|
|
|
|
@discourseComputed("ariaLabel", "translatedAriaLabel", "computedLabel")
|
|
computedAriaLabel(ariaLabel, translatedAriaLabel, computedLabel) {
|
|
if (ariaLabel) {
|
|
return I18n.t(ariaLabel);
|
|
}
|
|
if (translatedAriaLabel) {
|
|
return translatedAriaLabel;
|
|
}
|
|
return computedLabel;
|
|
},
|
|
|
|
@discourseComputed("ariaExpanded")
|
|
computedAriaExpanded(ariaExpanded) {
|
|
if (ariaExpanded === true) {
|
|
return "true";
|
|
}
|
|
if (ariaExpanded === false) {
|
|
return "false";
|
|
}
|
|
},
|
|
|
|
click(event) {
|
|
let { action } = this;
|
|
|
|
if (action) {
|
|
if (typeof action === "string") {
|
|
// Note: This is deprecated in new Embers and needs to be removed in the future.
|
|
// There is already a warning in the console.
|
|
this.sendAction("action", this.actionParam);
|
|
} else if (typeof action === "object" && action.value) {
|
|
if (this.forwardEvent) {
|
|
action.value(this.actionParam, event);
|
|
} else {
|
|
action.value(this.actionParam);
|
|
}
|
|
} else if (typeof this.action === "function") {
|
|
if (this.forwardEvent) {
|
|
action(this.actionParam, event);
|
|
} else {
|
|
action(this.actionParam);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.href && this.href.length) {
|
|
DiscourseURL.routeTo(this.href);
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
mouseDown(event) {
|
|
if (this.preventFocus) {
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
});
|