@jsenv/dom 0.6.1 → 0.7.0

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 (109) hide show
  1. package/dist/jsenv_dom.js +259 -314
  2. package/package.json +2 -4
  3. package/index.js +0 -124
  4. package/src/attr/add_attribute_effect.js +0 -93
  5. package/src/attr/attributes.js +0 -32
  6. package/src/color/color_constrast.js +0 -69
  7. package/src/color/color_parsing.js +0 -319
  8. package/src/color/color_scheme.js +0 -28
  9. package/src/color/pick_light_or_dark.js +0 -34
  10. package/src/color/resolve_css_color.js +0 -60
  11. package/src/demos/3_columns_resize_demo.html +0 -84
  12. package/src/demos/3_rows_resize_demo.html +0 -89
  13. package/src/demos/aside_and_main_demo.html +0 -93
  14. package/src/demos/coordinates_demo.html +0 -450
  15. package/src/demos/document_autoscroll_demo.html +0 -517
  16. package/src/demos/drag_gesture_constraints_demo.html +0 -701
  17. package/src/demos/drag_gesture_demo.html +0 -1047
  18. package/src/demos/drag_gesture_element_to_impact_demo.html +0 -445
  19. package/src/demos/drag_reference_element_demo.html +0 -480
  20. package/src/demos/flex_details_set_demo.html +0 -302
  21. package/src/demos/flex_details_set_demo_2.html +0 -315
  22. package/src/demos/visible_rect_demo.html +0 -525
  23. package/src/element_signature.js +0 -100
  24. package/src/interaction/drag/constraint_feedback_line.js +0 -92
  25. package/src/interaction/drag/drag_constraint.js +0 -659
  26. package/src/interaction/drag/drag_debug_markers.js +0 -635
  27. package/src/interaction/drag/drag_element_positioner.js +0 -382
  28. package/src/interaction/drag/drag_gesture.js +0 -566
  29. package/src/interaction/drag/drag_resize_demo.html +0 -571
  30. package/src/interaction/drag/drag_to_move.js +0 -301
  31. package/src/interaction/drag/drag_to_resize_gesture.js +0 -68
  32. package/src/interaction/drag/drop_target_detection.js +0 -148
  33. package/src/interaction/drag/sticky_frontiers.js +0 -160
  34. package/src/interaction/event_marker.js +0 -14
  35. package/src/interaction/focus/active_element.js +0 -33
  36. package/src/interaction/focus/arrow_navigation.js +0 -599
  37. package/src/interaction/focus/element_is_focusable.js +0 -57
  38. package/src/interaction/focus/element_visibility.js +0 -111
  39. package/src/interaction/focus/find_focusable.js +0 -21
  40. package/src/interaction/focus/focus_group.js +0 -91
  41. package/src/interaction/focus/focus_group_registry.js +0 -12
  42. package/src/interaction/focus/focus_nav.js +0 -12
  43. package/src/interaction/focus/focus_nav_event_marker.js +0 -14
  44. package/src/interaction/focus/focus_trap.js +0 -105
  45. package/src/interaction/focus/tab_navigation.js +0 -128
  46. package/src/interaction/focus/tests/focus_group_skip_tab_test.html +0 -206
  47. package/src/interaction/focus/tests/tree_focus_test.html +0 -304
  48. package/src/interaction/focus/tests/tree_focus_test.jsx +0 -261
  49. package/src/interaction/focus/tests/tree_focus_test_preact.html +0 -13
  50. package/src/interaction/isolate_interactions.js +0 -161
  51. package/src/interaction/keyboard.js +0 -26
  52. package/src/interaction/scroll/capture_scroll.js +0 -47
  53. package/src/interaction/scroll/is_scrollable.js +0 -159
  54. package/src/interaction/scroll/scroll_container.js +0 -110
  55. package/src/interaction/scroll/scroll_trap.js +0 -44
  56. package/src/interaction/scroll/scrollbar_size.js +0 -20
  57. package/src/interaction/scroll/wheel_through.js +0 -138
  58. package/src/iterable_weak_set.js +0 -66
  59. package/src/position/dom_coords.js +0 -340
  60. package/src/position/offset_parent.js +0 -15
  61. package/src/position/position_fixed.js +0 -15
  62. package/src/position/position_sticky.js +0 -213
  63. package/src/position/sticky_rect.js +0 -79
  64. package/src/position/visible_rect.js +0 -486
  65. package/src/pub_sub.js +0 -31
  66. package/src/size/can_take_size.js +0 -11
  67. package/src/size/details_content_full_height.js +0 -63
  68. package/src/size/flex_details_set.js +0 -974
  69. package/src/size/get_available_height.js +0 -22
  70. package/src/size/get_available_width.js +0 -22
  71. package/src/size/get_border_sizes.js +0 -14
  72. package/src/size/get_height.js +0 -4
  73. package/src/size/get_inner_height.js +0 -15
  74. package/src/size/get_inner_width.js +0 -15
  75. package/src/size/get_margin_sizes.js +0 -10
  76. package/src/size/get_max_height.js +0 -57
  77. package/src/size/get_max_width.js +0 -47
  78. package/src/size/get_min_height.js +0 -14
  79. package/src/size/get_min_width.js +0 -14
  80. package/src/size/get_padding_sizes.js +0 -10
  81. package/src/size/get_width.js +0 -4
  82. package/src/size/hooks/use_available_height.js +0 -27
  83. package/src/size/hooks/use_available_width.js +0 -27
  84. package/src/size/hooks/use_max_height.js +0 -10
  85. package/src/size/hooks/use_max_width.js +0 -10
  86. package/src/size/hooks/use_resize_status.js +0 -62
  87. package/src/size/resize.js +0 -695
  88. package/src/size/resolve_css_size.js +0 -32
  89. package/src/style/dom_styles.js +0 -97
  90. package/src/style/style_composition.js +0 -121
  91. package/src/style/style_controller.js +0 -345
  92. package/src/style/style_default.js +0 -153
  93. package/src/style/style_default_demo.html +0 -128
  94. package/src/style/style_parsing.js +0 -375
  95. package/src/transition/demos/animation_resumption_test.xhtml +0 -500
  96. package/src/transition/demos/height_toggle_test.xhtml +0 -515
  97. package/src/transition/dom_transition.js +0 -254
  98. package/src/transition/easing.js +0 -48
  99. package/src/transition/group_transition.js +0 -261
  100. package/src/transition/transform_style_parser.js +0 -32
  101. package/src/transition/transition_playback.js +0 -366
  102. package/src/transition/transition_timeline.js +0 -79
  103. package/src/traversal.js +0 -247
  104. package/src/ui_transition/demos/content_states_transition_demo.html +0 -628
  105. package/src/ui_transition/demos/smooth_height_transition_demo.html +0 -149
  106. package/src/ui_transition/demos/transition_testing.html +0 -354
  107. package/src/ui_transition/ui_transition.js +0 -1470
  108. package/src/utils.js +0 -69
  109. package/src/value_effect.js +0 -35
package/src/color/pick_light_or_dark.js DELETED
@@ -1,34 +0,0 @@
1
- /**
2
- * Chooses between light and dark colors based on which provides better contrast against a background
3
- * @param {Element} element - DOM element to resolve CSS variables against
4
- * @param {string} backgroundColor - CSS color value (hex, rgb, hsl, CSS variable, etc.)
5
- * @param {string} lightColor - Light color option (typically for dark backgrounds)
6
- * @param {string} darkColor - Dark color option (typically for light backgrounds)
7
- * @returns {string} The color that provides better contrast (lightColor or darkColor)
8
- */
9
- import { getContrastRatio } from "./color_constrast.js";
10
- import { resolveCSSColor } from "./resolve_css_color.js";
11
-
12
- export const pickLightOrDark = (
13
- element,
14
- backgroundColor,
15
- lightColor = "white",
16
- darkColor = "black",
17
- ) => {
18
- const resolvedBgColor = resolveCSSColor(backgroundColor, element);
19
- const resolvedLightColor = resolveCSSColor(lightColor, element);
20
- const resolvedDarkColor = resolveCSSColor(darkColor, element);
21
-
22
- if (!resolvedBgColor || !resolvedLightColor || !resolvedDarkColor) {
23
- // Fallback to light color if parsing fails
24
- return lightColor;
25
- }
26
-
27
- const contrastWithLight = getContrastRatio(
28
- resolvedBgColor,
29
- resolvedLightColor,
30
- );
31
- const contrastWithDark = getContrastRatio(resolvedBgColor, resolvedDarkColor);
32
-
33
- return contrastWithLight > contrastWithDark ? lightColor : darkColor;
34
- };
package/src/color/resolve_css_color.js DELETED
@@ -1,60 +0,0 @@
1
- import { parseCSSColor, stringifyCSSColor } from "./color_parsing.js";
2
- import { prefersDarkColors } from "./color_scheme.js";
3
-
4
- /**
5
- * Resolves a color value, handling CSS custom properties and light-dark() function
6
- * @param {string} color - CSS color value (may include CSS variables, light-dark())
7
- * @param {Element} element - DOM element to resolve CSS variables and light-dark() against
8
- * @param {string} context - Return format: "js" for RGBA array, "css" for CSS string
9
- * @returns {Array<number>|string|null} [r, g, b, a] values, CSS string, or null if parsing fails
10
- */
11
- export const resolveCSSColor = (color, element, context = "js") => {
12
- if (!color || typeof color !== "string") {
13
- return null;
14
- }
15
-
16
- let resolvedColor = color;
17
-
18
- // Handle light-dark() function
19
- const lightDarkMatch = color.match(/light-dark\(([^,]+),([^)]+)\)/);
20
- if (lightDarkMatch) {
21
- const lightColor = lightDarkMatch[1].trim();
22
- const darkColor = lightDarkMatch[2].trim();
23
-
24
- // Select the appropriate color and recursively resolve it
25
- const prefersDark = prefersDarkColors(element);
26
- resolvedColor = prefersDark ? darkColor : lightColor;
27
- return resolveCSSColor(resolvedColor, element, context);
28
- }
29
-
30
- // If it's a CSS custom property, resolve it using getComputedStyle
31
- if (resolvedColor.includes("var(")) {
32
- const computedStyle = getComputedStyle(element);
33
-
34
- // Handle var() syntax
35
- const varMatch = color.match(/var\(([^,)]+)(?:,([^)]+))?\)/);
36
- if (varMatch) {
37
- const propertyName = varMatch[1].trim();
38
- const fallback = varMatch[2]?.trim();
39
-
40
- const resolvedValue = computedStyle.getPropertyValue(propertyName).trim();
41
- if (resolvedValue) {
42
- // Recursively resolve in case the CSS variable contains light-dark() or other variables
43
- return resolveCSSColor(resolvedValue, element, context);
44
- }
45
- if (fallback) {
46
- // Recursively resolve fallback (in case it's also a CSS variable)
47
- return resolveCSSColor(fallback, element, context);
48
- }
49
- }
50
- }
51
-
52
- // Parse the resolved color and return in the requested format
53
- const rgba = parseCSSColor(resolvedColor);
54
-
55
- if (context === "css") {
56
- return rgba ? stringifyCSSColor(rgba) : null;
57
- }
58
-
59
- return rgba;
60
- };
package/src/demos/3_columns_resize_demo.html DELETED
@@ -1,84 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>3 columns resize x demo</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <meta charset="utf-8" />
7
- <link rel="icon" href="data:," />
8
- </head>
9
- <body>
10
- <style>
11
- body {
12
- margin: 0;
13
- }
14
-
15
- * {
16
- box-sizing: border-box;
17
- }
18
-
19
- #app {
20
- display: flex;
21
- flex-direction: row;
22
- width: 600px;
23
- border: 1px solid black;
24
- box-sizing: content-box;
25
- }
26
-
27
- [data-resize-handle] {
28
- flex-grow: 1;
29
- min-width: 50px;
30
- }
31
- </style>
32
-
33
- <div id="app">
34
- <div
35
- id="a"
36
- data-resize="horizontal"
37
- data-resize-handle
38
- style="background: blue; height: 100px"
39
- ></div>
40
- <div
41
- id="b"
42
- data-resize="horizontal"
43
- data-resize-handle
44
- style="background: red; height: 200px"
45
- ></div>
46
- <div
47
- id="c"
48
- data-resize="horizontal"
49
- data-resize-handle
50
- style="background: green; height: 100px"
51
- ></div>
52
- </div>
53
-
54
- <label>
55
- width:
56
- <input type="number" id="container_width" />
57
- </label>
58
-
59
- <script type="module">
60
- import "@jsenv/dom/resize";
61
-
62
- const resizeCollection = document.querySelectorAll("[data-resize]");
63
- for (const resize of resizeCollection) {
64
- const sizeInLocalStorage = localStorage.getItem(`${resize.id}_width`);
65
- if (sizeInLocalStorage) {
66
- resize.style.width = `${sizeInLocalStorage}px`;
67
- }
68
- resize.addEventListener("resize", (event) => {
69
- console.log("resize event", event.target.id, resize.id);
70
- localStorage.setItem(`${resize.id}_width`, event.detail.width);
71
- });
72
- }
73
-
74
- const input = document.querySelector("input");
75
- input.oninput = () => {
76
- const width = input.value;
77
- document.querySelector("#app").style.width = `${width}px`;
78
- };
79
- input.value = document
80
- .querySelector("#app")
81
- .getBoundingClientRect().width;
82
- </script>
83
- </body>
84
- </html>
package/src/demos/3_rows_resize_demo.html DELETED
@@ -1,89 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>3 rows resize x demo</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <meta charset="utf-8" />
7
- <link rel="icon" href="data:," />
8
- </head>
9
- <body>
10
- <style>
11
- body {
12
- margin: 0;
13
- }
14
-
15
- * {
16
- box-sizing: border-box;
17
- }
18
-
19
- #app {
20
- display: flex;
21
- flex-direction: column;
22
- height: 600px;
23
- border: 1px solid black;
24
- box-sizing: content-box;
25
- width: 300px;
26
- margin-left: 200px;
27
- margin-top: 50px;
28
- }
29
-
30
- [data-resize-handle] {
31
- flex-grow: 1;
32
- min-height: 50px;
33
- }
34
- </style>
35
-
36
- <div id="app">
37
- <div
38
- id="a"
39
- data-resize="vertical"
40
- data-resize-handle
41
- data-resize-absolute
42
- style="background: blue; width: 100px"
43
- ></div>
44
- <div
45
- id="b"
46
- data-resize="vertical"
47
- data-resize-handle
48
- data-resize-absolute
49
- style="background: red; width: 200px"
50
- ></div>
51
- <div
52
- id="c"
53
- data-resize="vertical"
54
- data-resize-handle
55
- data-resize-absolute
56
- style="background: green; width: 100px"
57
- ></div>
58
- </div>
59
-
60
- <label>
61
- height:
62
- <input type="number" id="container_size" />
63
- </label>
64
-
65
- <script type="module">
66
- import "@jsenv/dom/resize";
67
-
68
- const resizeCollection = document.querySelectorAll("[data-resize]");
69
- for (const resize of resizeCollection) {
70
- const sizeInLocalStorage = localStorage.getItem(`${resize.id}_height`);
71
- if (sizeInLocalStorage) {
72
- resize.style.height = `${sizeInLocalStorage}px`;
73
- }
74
- resize.addEventListener("resize", (event) => {
75
- localStorage.setItem(`${resize.id}_height`, event.detail.height);
76
- });
77
- }
78
-
79
- const input = document.querySelector("input");
80
- input.oninput = () => {
81
- const size = input.value;
82
- document.querySelector("#app").style.height = `${size}px`;
83
- };
84
- input.value = document
85
- .querySelector("#app")
86
- .getBoundingClientRect().height;
87
- </script>
88
- </body>
89
- </html>
package/src/demos/aside_and_main_demo.html DELETED
@@ -1,93 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>Aside and main demo</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <meta charset="utf-8" />
7
- <link rel="icon" href="data:," />
8
- </head>
9
- <body>
10
- <style>
11
- body {
12
- margin: 0;
13
- }
14
-
15
- * {
16
- box-sizing: border-box;
17
- }
18
-
19
- #app {
20
- display: flex;
21
- flex-direction: row;
22
- }
23
-
24
- aside {
25
- background: #f0f0f0;
26
- border-right: 1px solid #ccc;
27
- height: 100vh;
28
- position: sticky;
29
- top: 0;
30
- width: 200px;
31
- min-width: 100px;
32
- }
33
-
34
- main {
35
- min-width: 200px;
36
- padding-bottom: 0;
37
- min-width: 200px; /* Prevents content area from becoming too narrow */
38
- box-sizing: border-box;
39
- min-height: 100vh; /* Ensures content area is at least viewport height */
40
- overflow-x: auto; /* Horizontal scrollbar appears when content is wider than available space */
41
- scrollbar-gutter: stable; /* Reserves space for scrollbar to prevent layout shifts */
42
- flex: 1;
43
- }
44
-
45
- .main_body {
46
- width: fit-content;
47
- padding: 20px; /* Consistent padding around main content */
48
- }
49
-
50
- aside > [data-resize-handle] {
51
- position: absolute;
52
- z-index: 1; /* Ensures resize handle appears above sidebar content */
53
- width: 5px;
54
- right: -2.5px; /* Centers the handle on the border */
55
- top: 0;
56
- bottom: 0;
57
- cursor: ew-resize; /* Indicates horizontal resize capability */
58
- }
59
- aside > [data-resize-handle]:hover,
60
- aside[data-resizing] > [data-resize-handle] {
61
- background-color: blue;
62
- opacity: 0.5;
63
- }
64
- </style>
65
-
66
- <div id="app">
67
- <aside data-resize="horizontal" data-resize-absolute>
68
- <div data-resize-handle></div>
69
- </aside>
70
- <main>
71
- <div class="main_body">
72
- <h1 title="Explore and manager your database">Database Manager</h1>
73
-
74
- <div style="background: blue; width: 600px; height: 600px"></div>
75
- </div>
76
- </main>
77
- </div>
78
-
79
- <script type="module">
80
- import "@jsenv/dom/resize";
81
-
82
- const aside = document.querySelector("aside");
83
- const widthInLocalStorage = localStorage.getItem("sidebar_width");
84
- if (widthInLocalStorage) {
85
- aside.style.width = `${widthInLocalStorage}px`;
86
- }
87
-
88
- aside.addEventListener("resizeend", (event) => {
89
- localStorage.setItem("sidebar_width", event.detail.width);
90
- });
91
- </script>
92
- </body>
93
- </html>