@hypericon/mico 0.7.1 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/components/menu/Menu.js +15 -8
  2. package/dist/esm/components/menu/Menu.js +15 -8
  3. package/package.json +1 -1
package/dist/cjs/components/menu/Menu.js CHANGED
@@ -20,14 +20,22 @@ exports.Menu = {
20
20
  },
21
21
  view({ attrs, children }) {
22
22
  var _a, _b, _c, _d, _e, _f, _g, _h;
23
- const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
24
- const maxHeightPx = window.innerHeight / 2;
23
+ // Use the document's client dimensions rather than window.innerWidth/innerHeight,
24
+ // since the menu's containing block (absolute/fixed) is bounded by the former;
25
+ // window.innerWidth/innerHeight include the scrollbar and would leave a gap after flipping.
26
+ const clientWidthPx = document.documentElement.clientWidth;
27
+ const clientHeightPx = document.documentElement.clientHeight;
28
+ const maxWidthPx = Math.min(clientWidthPx, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
29
+ const maxHeightPx = clientHeightPx / 2;
25
30
  const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
26
31
  const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
27
- let flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
32
+ // Flip based on maxWidthPx (the upper bound enforced by the max-width style below),
33
+ // not MIN_WIDTH_PX, since the menu's real rendered width can be anywhere up to maxWidthPx
34
+ // and isn't known until after layout.
35
+ let flipH = ((xPx + maxWidthPx) > clientWidthPx);
28
36
  let flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
29
- ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
30
- : ((yPx + maxHeightPx) > window.innerHeight);
37
+ ? ((yPx + maxHeightPx - window.scrollY) > clientHeightPx)
38
+ : ((yPx + maxHeightPx) > clientHeightPx);
31
39
  if (((_c = attrs.options) === null || _c === void 0 ? void 0 : _c.noFlipH) === true)
32
40
  flipH = false;
33
41
  if (((_d = attrs.options) === null || _d === void 0 ? void 0 : _d.noFlipV) === true)
@@ -48,9 +56,8 @@ exports.Menu = {
48
56
  // "window.innerHeight": window.innerHeight,
49
57
  // "flipV": flipV,
50
58
  // });
51
- // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
52
- const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
53
- const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
59
+ const posH = flipH ? `right: ${clientWidthPx - xPx}px;` : `left: ${xPx}px;`;
60
+ const posV = flipV ? `bottom: ${clientHeightPx - yPx}px;` : `top: ${yPx}px;`;
54
61
  const position = ((_h = attrs.options) === null || _h === void 0 ? void 0 : _h.isWithinDialog)
55
62
  ? `fixed`
56
63
  : `absolute`;
package/dist/esm/components/menu/Menu.js CHANGED
@@ -20,14 +20,22 @@ exports.Menu = {
20
20
  },
21
21
  view({ attrs, children }) {
22
22
  var _a, _b, _c, _d, _e, _f, _g, _h;
23
- const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
24
- const maxHeightPx = window.innerHeight / 2;
23
+ // Use the document's client dimensions rather than window.innerWidth/innerHeight,
24
+ // since the menu's containing block (absolute/fixed) is bounded by the former;
25
+ // window.innerWidth/innerHeight include the scrollbar and would leave a gap after flipping.
26
+ const clientWidthPx = document.documentElement.clientWidth;
27
+ const clientHeightPx = document.documentElement.clientHeight;
28
+ const maxWidthPx = Math.min(clientWidthPx, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
29
+ const maxHeightPx = clientHeightPx / 2;
25
30
  const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
26
31
  const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
27
- let flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
32
+ // Flip based on maxWidthPx (the upper bound enforced by the max-width style below),
33
+ // not MIN_WIDTH_PX, since the menu's real rendered width can be anywhere up to maxWidthPx
34
+ // and isn't known until after layout.
35
+ let flipH = ((xPx + maxWidthPx) > clientWidthPx);
28
36
  let flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
29
- ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
30
- : ((yPx + maxHeightPx) > window.innerHeight);
37
+ ? ((yPx + maxHeightPx - window.scrollY) > clientHeightPx)
38
+ : ((yPx + maxHeightPx) > clientHeightPx);
31
39
  if (((_c = attrs.options) === null || _c === void 0 ? void 0 : _c.noFlipH) === true)
32
40
  flipH = false;
33
41
  if (((_d = attrs.options) === null || _d === void 0 ? void 0 : _d.noFlipV) === true)
@@ -48,9 +56,8 @@ exports.Menu = {
48
56
  // "window.innerHeight": window.innerHeight,
49
57
  // "flipV": flipV,
50
58
  // });
51
- // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
52
- const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
53
- const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
59
+ const posH = flipH ? `right: ${clientWidthPx - xPx}px;` : `left: ${xPx}px;`;
60
+ const posV = flipV ? `bottom: ${clientHeightPx - yPx}px;` : `top: ${yPx}px;`;
54
61
  const position = ((_h = attrs.options) === null || _h === void 0 ? void 0 : _h.isWithinDialog)
55
62
  ? `fixed`
56
63
  : `absolute`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hypericon/mico",
3
- "version": "0.7.1",
3
+ "version": "0.7.2",
4
4
  "description": "UI components and utilities with Mithril",
5
5
  "author": "Ed Johnson, Hypericon Ltd",
6
6
  "license": "MIT",