mirror of
https://github.com/discourse/discourse.git
synced 2025-01-19 02:12:46 +08:00
DEV: Convert d-tooltip to gjs (#22760)
* Fix the usage of component args (this.args and this.attrs in an ember component? :P) * Don't use an internal Ember API * Glimmer! And GJS!
This commit is contained in:
parent
6725a1d7bd
commit
320f271d35
|
@ -0,0 +1,41 @@
|
||||||
|
import Component from "@glimmer/component";
|
||||||
|
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||||
|
import { inject as service } from "@ember/service";
|
||||||
|
import { action } from "@ember/object";
|
||||||
|
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||||
|
import tippy from "tippy.js";
|
||||||
|
|
||||||
|
export default class DiscourseTooltip extends Component {
|
||||||
|
<template>
|
||||||
|
{{! template-lint-disable modifier-name-case }}
|
||||||
|
<div {{didInsert this.initTippy}}>{{yield}}</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
@service capabilities;
|
||||||
|
|
||||||
|
#tippyInstance;
|
||||||
|
|
||||||
|
willDestroy() {
|
||||||
|
super.willDestroy(...arguments);
|
||||||
|
this.#tippyInstance.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
stopPropagation(instance, event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
initTippy(element) {
|
||||||
|
this.#tippyInstance = tippy(element.parentElement, {
|
||||||
|
content: element,
|
||||||
|
interactive: this.args.interactive ?? false,
|
||||||
|
trigger: this.capabilities.touch ? "click" : "mouseenter",
|
||||||
|
theme: this.args.theme || "d-tooltip",
|
||||||
|
arrow: this.args.arrow ? iconHTML("tippy-rounded-arrow") : false,
|
||||||
|
placement: this.args.placement || "bottom-start",
|
||||||
|
onTrigger: this.stopPropagation,
|
||||||
|
onUntrigger: this.stopPropagation,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,3 +0,0 @@
|
||||||
<div>
|
|
||||||
{{yield}}
|
|
||||||
</div>
|
|
|
@ -1,48 +0,0 @@
|
||||||
import Component from "@ember/component";
|
|
||||||
import { schedule } from "@ember/runloop";
|
|
||||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
|
||||||
import tippy from "tippy.js";
|
|
||||||
import Ember from "ember";
|
|
||||||
|
|
||||||
export default class DiscourseTooltip extends Component {
|
|
||||||
tagName = "";
|
|
||||||
interactive = false;
|
|
||||||
placement = this.args?.placement || "bottom-start";
|
|
||||||
|
|
||||||
didInsertElement() {
|
|
||||||
this._super(...arguments);
|
|
||||||
this._initTippy();
|
|
||||||
}
|
|
||||||
|
|
||||||
willDestroyElement() {
|
|
||||||
this._super(...arguments);
|
|
||||||
this._tippyInstance.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
stopPropagation(instance, event) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
_initTippy() {
|
|
||||||
schedule("afterRender", () => {
|
|
||||||
// Ember.ViewUtils.getViewBounds is a private API,
|
|
||||||
// but it's not going to be dropped without a public deprecation warning,
|
|
||||||
// see: https://stackoverflow.com/a/50125938/3206146
|
|
||||||
const viewBounds = Ember.ViewUtils.getViewBounds(this);
|
|
||||||
const element = viewBounds.firstNode;
|
|
||||||
const parent = viewBounds.parentElement;
|
|
||||||
const interactive = this.interactive;
|
|
||||||
this._tippyInstance = tippy(parent, {
|
|
||||||
interactive,
|
|
||||||
content: element,
|
|
||||||
trigger: this.capabilities.touch ? "click" : "mouseenter",
|
|
||||||
theme: this.attrs.theme || "d-tooltip",
|
|
||||||
arrow: this.attrs.arrow ? iconHTML("tippy-rounded-arrow") : false,
|
|
||||||
placement: this.placement,
|
|
||||||
onTrigger: this.stopPropagation,
|
|
||||||
onUntrigger: this.stopPropagation,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user