--- a/src/widgets/Tooltip.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Tooltip.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,94 +1,113 @@
/* this widget displays a small tooltip */
-IriSP.Widgets.Tooltip = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
-};
+import tooltipStyles from "./Tooltip.module.css";
+
+const Tooltip = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ }
+
+ static defaults = {};
+
+ static template =
+ '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>' +
+ '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>' +
+ '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>' +
+ '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>' +
+ '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>' +
+ '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">' +
+ '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';
-IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget();
-
-IriSP.Widgets.Tooltip.prototype.defaults = {
-
-};
+ draw() {
+ const _this = this;
+ this.renderTemplate();
+ this.$.parent().css({
+ position: "relative",
+ });
+ this.$tooltip = this.$.find(".Ldt-Tooltip");
+ this.$tip = this.$.find(".Ldt-Tooltip-Tip");
+ this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");
+ this.$se = this.$.find(".Ldt-Tooltip-Border-SE");
+ this.__halfWidth = Math.floor(
+ (this.$.find(".Ldt-Tooltip-Main").width() || 192) / 2
+ );
+ this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();
+ this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width() / 2);
+ this.__maxShift = this.__tipDelta - this.__borderWidth;
+ this.$.mouseover(function () {
+ _this.$tooltip.hide();
+ });
+ this.hide();
+ }
-IriSP.Widgets.Tooltip.prototype.template =
- '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>'
- + '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>'
- + '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>'
- + '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>'
- + '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>'
- + '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">'
- + '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';
+ show(x, y, text, color) {
+ if (typeof color !== "undefined") {
+ // one color or array of colors
+ if (typeof color === "string") {
+ this.$.find(".Ldt-Tooltip-Color").html("");
+ this.$.find(".Ldt-Tooltip-Color")
+ .show()
+ .css("background-color", color);
+ this.$.find(".Ldt-Tooltip-Color").show().css("height", "");
+ } else {
+ var d = this.$.find(".Ldt-Tooltip-Color");
+ d.html("");
+ d.show();
+ for (var i = 0; i < color.length; i++) {
+ d.append(
+ '<div style="float: left; height: 10px; width: 10px; background-color: ' +
+ color[i] +
+ '">'
+ );
+ }
+ this.$.find(".Ldt-Tooltip-Color").css(
+ "height",
+ color.length * 10 + "px"
+ );
+ }
+ } else {
+ this.$.find(".Ldt-Tooltip-Color").hide();
+ }
+
+ this.$.find(".Ldt-Tooltip-Text").html(text);
+
+ this.$tooltip.show();
-IriSP.Widgets.Tooltip.prototype.draw = function() {
- _this = this;
- this.renderTemplate();
- this.$.parent().css({
- "position" : "relative"
- });
- this.$tooltip = this.$.find(".Ldt-Tooltip");
- this.$tip = this.$.find(".Ldt-Tooltip-Tip");
- this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");
- this.$se = this.$.find(".Ldt-Tooltip-Border-SE");
- this.__halfWidth = Math.floor(( this.$.find(".Ldt-Tooltip-Main").width() || 192)/2);
- this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();
- this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width()/2);
- this.__maxShift = this.__tipDelta - this.__borderWidth;
- this.$.mouseover(function() {
- _this.$tooltip.hide();
- });
- this.hide();
+ var shift = 0;
+
+ if (
+ typeof this.min_x !== "undefined" &&
+ x - this.__halfWidth < this.min_x
+ ) {
+ shift = Math.max(x - this.__halfWidth - this.min_x, -this.__maxShift);
+ }
+
+ if (
+ typeof this.max_x !== "undefined" &&
+ +x + this.__halfWidth > this.max_x
+ ) {
+ shift = Math.min(+x + this.__halfWidth - this.max_x, this.__maxShift);
+ }
+
+ this.$tooltip.css({
+ left: x - shift + "px",
+ top: y + "px",
+ });
+ this.$tip.css({
+ left: this.__tipDelta + shift + "px",
+ });
+ this.$sw.css({
+ width: this.__tipDelta + shift - this.__borderWidth + "px",
+ });
+ this.$se.css({
+ width: this.__tipDelta - shift - this.__borderWidth + "px",
+ });
+ }
+
+ hide() {
+ this.$tooltip.hide();
+ }
+ };
};
-IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) {
-
- if (typeof color !== "undefined") {
- // one color or array of colors
- if (typeof color === "string") {
- this.$.find(".Ldt-Tooltip-Color").html("");
- this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);
- this.$.find(".Ldt-Tooltip-Color").show().css("height", "");
- }
- else{
- var d = this.$.find(".Ldt-Tooltip-Color");
- d.html("");
- d.show();
- for(var i=0; i<color.length; i++){
- d.append('<div style="float: left; height: 10px; width: 10px; background-color: ' + color[i] + '">')
- }
- this.$.find(".Ldt-Tooltip-Color").css("height", (color.length * 10) + "px");
- }
- } else {
- this.$.find(".Ldt-Tooltip-Color").hide();
- }
-
- this.$.find(".Ldt-Tooltip-Text").html(text);
-
- this.$tooltip.show();
-
- var shift = 0;
-
- if (typeof this.min_x !== "undefined" && (x - this.__halfWidth < this.min_x)) {
- shift = Math.max(x - this.__halfWidth - this.min_x, - this.__maxShift);
- }
-
- if (typeof this.max_x !== "undefined" && (+x + this.__halfWidth > this.max_x)) {
- shift = Math.min(+ x + this.__halfWidth - this.max_x, this.__maxShift);
- }
-
- this.$tooltip.css({
- "left" : (x - shift) + "px",
- "top" : y + "px"
- });
- this.$tip.css({
- "left": (this.__tipDelta + shift) + "px"
- });
- this.$sw.css({
- "width": (this.__tipDelta + shift - this.__borderWidth) + "px"
- });
- this.$se.css({
- "width": (this.__tipDelta - shift - this.__borderWidth) + "px"
- });
-};
-
-IriSP.Widgets.Tooltip.prototype.hide = function() {
- this.$tooltip.hide();
-};
+export { Tooltip, tooltipStyles };