* @param {string} title * @param {string} className * @param {"tall" | "wide"} orientation * @param {JQuery } $el * @returns {JQuery & I$Component}
(title, className, orientation, $el)
| 86 | * @returns {JQuery<HTMLDivElement> & I$Component} |
| 87 | */ |
| 88 | function $Component(title, className, orientation, $el) { |
| 89 | // A draggable widget that can be undocked into a window |
| 90 | const $c = /** @type {JQuery<HTMLDivElement> & I$Component} */ ($(E("div")).addClass("component")); |
| 91 | $c.addClass(className); |
| 92 | $c.addClass(orientation); |
| 93 | $c.append($el); |
| 94 | $c.css("touch-action", "none"); |
| 95 | |
| 96 | const $w = $ToolWindow($c); |
| 97 | $w.title(title); |
| 98 | $w.hide(); |
| 99 | $w.$content.addClass({ |
| 100 | tall: "vertical", |
| 101 | wide: "horizontal", |
| 102 | }[orientation]); |
| 103 | |
| 104 | // Nudge the Colors component over a tiny bit |
| 105 | if (className === "colors-component" && orientation === "wide") { |
| 106 | $c.css("position", "relative"); |
| 107 | $c.css(`margin-${get_direction() === "rtl" ? "right" : "left"}`, "3px"); |
| 108 | } |
| 109 | |
| 110 | const apply_scale = () => { |
| 111 | const enabled = $("body").hasClass("enlarge-ui"); |
| 112 | |
| 113 | // Temporarily disable the transform to measure the unscaled size |
| 114 | // (Previously used scrollWidth/scrollHeight, which is naturally unaffected by the scale, |
| 115 | // but that is affected by the advent calendar style tool button flaps in the Winter theme.) |
| 116 | $c.css("transform", "none"); |
| 117 | |
| 118 | // Measure the untransformed size |
| 119 | const containerBounds = $c[0].getBoundingClientRect(); |
| 120 | const containerWidth = containerBounds.width; |
| 121 | const containerHeight = containerBounds.height; |
| 122 | |
| 123 | // Define CSS properties for scaling |
| 124 | let scale = 3; |
| 125 | const docked = $c.parent().is(".component-area"); |
| 126 | if (docked) { |
| 127 | scale = Math.min(scale, |
| 128 | orientation === "tall" ? |
| 129 | $c.parent().height() / containerHeight : |
| 130 | $c.parent().width() / containerWidth |
| 131 | ); |
| 132 | } |
| 133 | const props = { |
| 134 | // The `transform` breaks the overflow of the Winter theme's tool button flaps, but what are you going to do? |
| 135 | // Well, `zIndex: 2` or higher seems to fix it, probably competing with the .main-canvas's z-index of 2, |
| 136 | // but causes other problems, like depth ordering with the floating undo button, |
| 137 | // and there's probably a reason for the .main-canvas having that z-index, and I don't really want to play z-index wack-a-mole. |
| 138 | // zIndex: 2, // @#: z-index |
| 139 | transform: `scale(${scale})`, |
| 140 | transformOrigin: "0 0", |
| 141 | marginRight: containerWidth * (scale - 1), |
| 142 | marginBottom: containerHeight * (scale - 1), |
| 143 | }; |
| 144 | |
| 145 | // Apply or remove the scaling |
no test coverage detected