u2ui 1.0.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 (440) hide show
  1. package/.htaccess +7 -0
  2. package/LICENSE +21 -0
  3. package/README.md +36 -0
  4. package/attr/behavior/README.md +25 -0
  5. package/attr/behavior/behavior.js +261 -0
  6. package/attr/behavior/manifest.json +43 -0
  7. package/attr/behavior/tests/minimal.html +19 -0
  8. package/attr/behavior/tests/test.html +98 -0
  9. package/attr/confirm/README.md +36 -0
  10. package/attr/confirm/confirm.js +90 -0
  11. package/attr/confirm/manifest.json +43 -0
  12. package/attr/confirm/tests/minimal.html +23 -0
  13. package/attr/confirm/tests/test.html +79 -0
  14. package/attr/draghandle/README.md +41 -0
  15. package/attr/draghandle/draghandle.js +42 -0
  16. package/attr/draghandle/tests/minimal.html +44 -0
  17. package/attr/focusgroup/README.md +49 -0
  18. package/attr/focusgroup/focusgroup.js +100 -0
  19. package/attr/focusgroup/manifest.json +38 -0
  20. package/attr/focusgroup/tests/minimal.html +27 -0
  21. package/attr/focusgroup/tests/test.html +154 -0
  22. package/attr/href/README.md +38 -0
  23. package/attr/href/href.js +42 -0
  24. package/attr/href/manifest.json +43 -0
  25. package/attr/href/tests/minimal.html +17 -0
  26. package/attr/href/tests/test.html +70 -0
  27. package/attr/intersect/README.md +42 -0
  28. package/attr/intersect/intersect.js +99 -0
  29. package/attr/intersect/manifest.json +57 -0
  30. package/attr/intersect/tests/minimal.html +30 -0
  31. package/attr/intersect/tests/test.html +64 -0
  32. package/attr/navigable/README.md +31 -0
  33. package/attr/navigable/TargetObserver.js +91 -0
  34. package/attr/navigable/U2TargetObserver.js +75 -0
  35. package/attr/navigable/manifest.json +42 -0
  36. package/attr/navigable/navigable.js +87 -0
  37. package/attr/navigable/tests/U1TargetObserver.html +56 -0
  38. package/attr/navigable/tests/minimal.html +17 -0
  39. package/attr/navigable/tests/targetObserver.html +106 -0
  40. package/attr/navigable/tests/test.html +84 -0
  41. package/attr/parallax/README.md +48 -0
  42. package/attr/parallax/parallax.js +119 -0
  43. package/attr/parallax/tests/minimal.html +25 -0
  44. package/attr/parallax/tests/performance.html +102 -0
  45. package/attr/parallax/tests/test.html +108 -0
  46. package/attr/skin/README.md +59 -0
  47. package/attr/skin/skin.css +51 -0
  48. package/attr/skin/tests/minimal.html +34 -0
  49. package/attr/skin/tests/test.html +96 -0
  50. package/class/badge/README.md +25 -0
  51. package/class/badge/badge.css +35 -0
  52. package/class/badge/tests/minimal.html +17 -0
  53. package/class/badge/tests/test.html +112 -0
  54. package/class/card1/README.md +45 -0
  55. package/class/card1/card1.css +30 -0
  56. package/class/card1/tests/minimal.html +33 -0
  57. package/class/card1/tests/test.html +78 -0
  58. package/class/flex/README.md +62 -0
  59. package/class/flex/flex.css +25 -0
  60. package/class/flex/tests/minimal.html +31 -0
  61. package/class/flex/tests/test.html +58 -0
  62. package/class/grid/README.md +52 -0
  63. package/class/grid/grid.css +40 -0
  64. package/class/grid/tests/minimal.html +34 -0
  65. package/class/grid/tests/test.html +78 -0
  66. package/class/input/README.md +49 -0
  67. package/class/input/input.css +33 -0
  68. package/class/input/tests/minimal.html +39 -0
  69. package/class/input/tests/test.html +29 -0
  70. package/class/reset/README.md +47 -0
  71. package/class/reset/reset.css +8 -0
  72. package/class/reset/tests/minimal.html +23 -0
  73. package/class/table/README.md +57 -0
  74. package/class/table/table.css +126 -0
  75. package/class/table/tests/minimal.html +40 -0
  76. package/class/table/tests/test.html +226 -0
  77. package/class/unstyle/README.md +32 -0
  78. package/class/unstyle/tests/minimal.html +22 -0
  79. package/class/unstyle/tests/test.html +32 -0
  80. package/class/unstyle/unstyle.css +12 -0
  81. package/class/width/README.md +48 -0
  82. package/class/width/tests/minimal.html +27 -0
  83. package/class/width/tests/test.html +101 -0
  84. package/class/width/width.css +22 -0
  85. package/css/base/README.md +25 -0
  86. package/css/base/base.css +127 -0
  87. package/css/base/beta.css +50 -0
  88. package/css/base/full.css +5 -0
  89. package/css/base/nomotion.css +9 -0
  90. package/css/base/print.css +36 -0
  91. package/css/base/tests/nomotion.html +89 -0
  92. package/css/base/tests/test.html +539 -0
  93. package/css/classes/README.md +17 -0
  94. package/css/classes/classes.css +78 -0
  95. package/css/classes/tests/test.html +63 -0
  96. package/css/classless/README.md +26 -0
  97. package/css/classless/aria.css +64 -0
  98. package/css/classless/classless.css +124 -0
  99. package/css/classless/full.css +11 -0
  100. package/css/classless/more.css +340 -0
  101. package/css/classless/simple.css +103 -0
  102. package/css/classless/snippeds/a/icons.css +12 -0
  103. package/css/classless/snippeds/experiments/conventions.css +41 -0
  104. package/css/classless/snippeds/hr/gradient.css +3 -0
  105. package/css/classless/snippeds/hr/section_sign.css +16 -0
  106. package/css/classless/snippeds/hr/tests.html +50 -0
  107. package/css/classless/tests/aria.html +101 -0
  108. package/css/classless/tests/foreign/classless-almond.css.html +445 -0
  109. package/css/classless/tests/foreign/classless-classless.css.html +831 -0
  110. package/css/classless/tests/foreign/classless-mvp.html +415 -0
  111. package/css/classless/tests/foreign/classless.sakura.html +224 -0
  112. package/css/classless/tests/foreign/stylestage.dev.html +304 -0
  113. package/css/classless/tests/foreign/test-homogenizer.html +433 -0
  114. package/css/classless/tests/foreign/test-html5-elements-tester.html +956 -0
  115. package/css/classless/tests/foreign/test-opinionated_css.html +148 -0
  116. package/css/classless/tests/list-bullet.html +110 -0
  117. package/css/classless/tests/more.html +246 -0
  118. package/css/classless/tests/oklch.experiments.html +280 -0
  119. package/css/classless/tests/test.html +106 -0
  120. package/css/classless/tests/variables.html +109 -0
  121. package/css/classless/variables.css +99 -0
  122. package/css/norm/README.md +37 -0
  123. package/css/norm/beta.css +40 -0
  124. package/css/norm/norm.css +98 -0
  125. package/css/norm/oldies.css +60 -0
  126. package/css/norm/tests/test.html +434 -0
  127. package/css/norm/tests/test.js +103 -0
  128. package/el/accordion/README.md +59 -0
  129. package/el/accordion/accordion.css +7 -0
  130. package/el/accordion/accordion.js +258 -0
  131. package/el/accordion/manifest.json +57 -0
  132. package/el/accordion/tests/minimal.html +44 -0
  133. package/el/accordion/tests/test.html +168 -0
  134. package/el/alert/README.md +67 -0
  135. package/el/alert/alert copy.js +224 -0
  136. package/el/alert/alert.css +73 -0
  137. package/el/alert/alert.js +187 -0
  138. package/el/alert/manifest.json +77 -0
  139. package/el/alert/tests/minimal.html +36 -0
  140. package/el/alert/tests/test.html +105 -0
  141. package/el/buttongroup/README.md +36 -0
  142. package/el/buttongroup/buttongroup.css +30 -0
  143. package/el/buttongroup/buttongroup.js +56 -0
  144. package/el/buttongroup/tests/minimal.html +31 -0
  145. package/el/buttongroup/tests/test.html +83 -0
  146. package/el/bytes/README.md +41 -0
  147. package/el/bytes/bytes.css +6 -0
  148. package/el/bytes/bytes.js +97 -0
  149. package/el/bytes/manifest.json +95 -0
  150. package/el/bytes/tests/minimal.html +19 -0
  151. package/el/bytes/tests/test.html +117 -0
  152. package/el/carousel/README.md +52 -0
  153. package/el/carousel/carousel.css +46 -0
  154. package/el/carousel/carousel.js +371 -0
  155. package/el/carousel/manifest.json +58 -0
  156. package/el/carousel/tests/experiments.html +77 -0
  157. package/el/carousel/tests/minimal.html +31 -0
  158. package/el/carousel/tests/nested.html +54 -0
  159. package/el/carousel/tests/test.html +136 -0
  160. package/el/carousel-nav/README.md +40 -0
  161. package/el/carousel-nav/carousel-nav.js +74 -0
  162. package/el/carousel-nav/tests/minimal.html +32 -0
  163. package/el/carousel-nav/tests/test.html +59 -0
  164. package/el/code/README.md +68 -0
  165. package/el/code/code.css +46 -0
  166. package/el/code/code.js +289 -0
  167. package/el/code/manifest.json +66 -0
  168. package/el/code/tests/minimal.html +35 -0
  169. package/el/code/tests/test.html +162 -0
  170. package/el/copy/README.md +35 -0
  171. package/el/copy/copy.css +3 -0
  172. package/el/copy/copy.js +118 -0
  173. package/el/copy/manifest.json +49 -0
  174. package/el/copy/tests/minimal.html +21 -0
  175. package/el/copy/tests/test.html +75 -0
  176. package/el/counter/README.md +47 -0
  177. package/el/counter/counter.css +8 -0
  178. package/el/counter/counter.js +95 -0
  179. package/el/counter/manifest.json +59 -0
  180. package/el/counter/tests/minimal.html +27 -0
  181. package/el/counter/tests/test.html +106 -0
  182. package/el/ico/README.md +162 -0
  183. package/el/ico/font/Font Awesome.css +22 -0
  184. package/el/ico/font/LigatureSymbols.css +7 -0
  185. package/el/ico/font/Material Icons.css +6 -0
  186. package/el/ico/font/RemixFilled.css +8 -0
  187. package/el/ico/font/RemixOutlined.css +8 -0
  188. package/el/ico/font/old/anicons.css +31 -0
  189. package/el/ico/font/old/devicons.css +210 -0
  190. package/el/ico/font/old/material.all.css +36 -0
  191. package/el/ico/font/old/remix.css +15 -0
  192. package/el/ico/font/old/utf8.css +54 -0
  193. package/el/ico/ico.css +111 -0
  194. package/el/ico/ico.js +189 -0
  195. package/el/ico/manifest.json +86 -0
  196. package/el/ico/tests/combinations.html +86 -0
  197. package/el/ico/tests/emojis.html +213 -0
  198. package/el/ico/tests/fonts.html +110 -0
  199. package/el/ico/tests/ico-directory.html +254 -0
  200. package/el/ico/tests/minimal.html +46 -0
  201. package/el/ico/tests/test.html +210 -0
  202. package/el/ico/tests/util-multi.svg +6 -0
  203. package/el/ico/tests/util.css +2 -0
  204. package/el/ico/tests/util.js +110 -0
  205. package/el/input/README.md +39 -0
  206. package/el/input/input.css +35 -0
  207. package/el/input/input.js +331 -0
  208. package/el/input/tests/formParticipation.html +113 -0
  209. package/el/input/tests/minimal.html +33 -0
  210. package/el/input/tests/test.html +258 -0
  211. package/el/masonry/README.md +51 -0
  212. package/el/masonry/manifest.json +60 -0
  213. package/el/masonry/masonry.css +27 -0
  214. package/el/masonry/masonry.js +92 -0
  215. package/el/masonry/tests/minimal.html +39 -0
  216. package/el/masonry/tests/test.html +42 -0
  217. package/el/number/README.md +47 -0
  218. package/el/number/manifest.json +121 -0
  219. package/el/number/number.css +6 -0
  220. package/el/number/number.js +67 -0
  221. package/el/number/tests/minimal.html +25 -0
  222. package/el/number/tests/test.html +138 -0
  223. package/el/out/README.md +32 -0
  224. package/el/out/manifest.json +38 -0
  225. package/el/out/out.css +2 -0
  226. package/el/out/out.js +59 -0
  227. package/el/out/tests/minimal.html +25 -0
  228. package/el/out/tests/test.html +37 -0
  229. package/el/parallax-bg/README.md +36 -0
  230. package/el/parallax-bg/parallax-bg.css +13 -0
  231. package/el/parallax-bg/parallax-bg.js +186 -0
  232. package/el/parallax-bg/tests/bg.jpg +0 -0
  233. package/el/parallax-bg/tests/bg1.jpg +0 -0
  234. package/el/parallax-bg/tests/bg2.jpg +0 -0
  235. package/el/parallax-bg/tests/demo.html +88 -0
  236. package/el/parallax-bg/tests/minimal.html +30 -0
  237. package/el/parallax-bg/tests/test.html +64 -0
  238. package/el/parallax-bg/tests/visible.html +90 -0
  239. package/el/qrcode/README.md +38 -0
  240. package/el/qrcode/manifest.json +43 -0
  241. package/el/qrcode/package.json +22 -0
  242. package/el/qrcode/qrcode.css +13 -0
  243. package/el/qrcode/qrcode.js +46 -0
  244. package/el/qrcode/tests/minimal.html +26 -0
  245. package/el/qrcode/tests/test.html +31 -0
  246. package/el/rating/README.md +45 -0
  247. package/el/rating/manifest.json +65 -0
  248. package/el/rating/rating.css +11 -0
  249. package/el/rating/rating.js +139 -0
  250. package/el/rating/tests/minimal.html +26 -0
  251. package/el/rating/tests/tests.html +77 -0
  252. package/el/rte/README.md +37 -0
  253. package/el/rte/rte.css +9 -0
  254. package/el/rte/rte.js +56 -0
  255. package/el/rte/tests/minimal.html +25 -0
  256. package/el/rte/tests/test.html +37 -0
  257. package/el/skeleton/README.md +30 -0
  258. package/el/skeleton/manifest.json +51 -0
  259. package/el/skeleton/skeleton.css +61 -0
  260. package/el/skeleton/skeleton.js +72 -0
  261. package/el/skeleton/tests/minimal.html +22 -0
  262. package/el/skeleton/tests/test.html +22 -0
  263. package/el/splitbutton/README.md +39 -0
  264. package/el/splitbutton/splitbutton.css +48 -0
  265. package/el/splitbutton/splitbutton.js +26 -0
  266. package/el/splitbutton/tests/minimal.html +30 -0
  267. package/el/splitbutton/tests/test.html +68 -0
  268. package/el/splitpanel/README.md +39 -0
  269. package/el/splitpanel/manifest.json +49 -0
  270. package/el/splitpanel/splitpanel.css +17 -0
  271. package/el/splitpanel/splitpanel.js +116 -0
  272. package/el/splitpanel/tests/minimal.html +31 -0
  273. package/el/splitpanel/tests/tests.html +121 -0
  274. package/el/table/README.md +68 -0
  275. package/el/table/manifest.json +43 -0
  276. package/el/table/table.css +59 -0
  277. package/el/table/table.js +194 -0
  278. package/el/table/tests/minimal.html +38 -0
  279. package/el/table/tests/test.html +108 -0
  280. package/el/tabs/README.md +50 -0
  281. package/el/tabs/manifest.json +59 -0
  282. package/el/tabs/tabs.css +23 -0
  283. package/el/tabs/tabs.js +210 -0
  284. package/el/tabs/tests/minimal.html +35 -0
  285. package/el/tabs/tests/test.html +180 -0
  286. package/el/textfit/README.md +34 -0
  287. package/el/textfit/manifest.json +45 -0
  288. package/el/textfit/tests/minimal.html +25 -0
  289. package/el/textfit/tests/test.html +26 -0
  290. package/el/textfit/textfit.css +6 -0
  291. package/el/textfit/textfit.js +80 -0
  292. package/el/time/README.md +72 -0
  293. package/el/time/manifest.json +118 -0
  294. package/el/time/tests/minimal.html +19 -0
  295. package/el/time/tests/test.html +160 -0
  296. package/el/time/time copy.js +141 -0
  297. package/el/time/time.js +168 -0
  298. package/el/time/time.old.uhtml.js +129 -0
  299. package/el/tooltip/README.md +48 -0
  300. package/el/tooltip/manifest.json +69 -0
  301. package/el/tooltip/tests/minimal.html +25 -0
  302. package/el/tooltip/tests/test.html +178 -0
  303. package/el/tooltip/tooltip.css +97 -0
  304. package/el/tooltip/tooltip.js +82 -0
  305. package/el/tree1/README.md +111 -0
  306. package/el/tree1/manifest.json +78 -0
  307. package/el/tree1/tests/animated.html +134 -0
  308. package/el/tree1/tests/custom.html +51 -0
  309. package/el/tree1/tests/minimal.html +44 -0
  310. package/el/tree1/tests/test.html +260 -0
  311. package/el/tree1/tree1.css +26 -0
  312. package/el/tree1/tree1.js +265 -0
  313. package/el/typewriter/README.md +62 -0
  314. package/el/typewriter/manifest.json +66 -0
  315. package/el/typewriter/tests/minimal.html +25 -0
  316. package/el/typewriter/tests/test.html +78 -0
  317. package/el/typewriter/typewriter.css +6 -0
  318. package/el/typewriter/typewriter.js +166 -0
  319. package/el/typewriter/typewriter.mp3 +0 -0
  320. package/js/Placer/Placer.js +156 -0
  321. package/js/Placer/README.md +62 -0
  322. package/js/Placer/tests/minimal.html +34 -0
  323. package/js/Placer/tests/test.html +49 -0
  324. package/js/PointerObserver/PointerObserver.js +130 -0
  325. package/js/PointerObserver/README.md +34 -0
  326. package/js/PointerObserver/tests/minimal.html +29 -0
  327. package/js/PointerObserver/tests/test.html +35 -0
  328. package/js/SelectorObserver/README.md +47 -0
  329. package/js/SelectorObserver/SelectorObserver.js +201 -0
  330. package/js/SelectorObserver/tests/minimal.html +21 -0
  331. package/js/SelectorObserver/tests/test.html +57 -0
  332. package/js/SelectorObserver/tests/tests.html +161 -0
  333. package/js/contextmenu/README.md +93 -0
  334. package/js/contextmenu/contextmenu.js +336 -0
  335. package/js/contextmenu/tests/minimal.html +44 -0
  336. package/js/contextmenu/tests/test.html +131 -0
  337. package/js/dialog/README.md +49 -0
  338. package/js/dialog/dialog.js +261 -0
  339. package/js/dialog/notification.mp3 +0 -0
  340. package/js/dialog/tests/minimal.html +29 -0
  341. package/js/dialog/tests/notification.mp3 +0 -0
  342. package/js/dialog/tests/test.html +135 -0
  343. package/js/rte/README.md +44 -0
  344. package/js/rte/old/NodeCleaner.js +315 -0
  345. package/js/rte/old/Rte/Rte.mjs +316 -0
  346. package/js/rte/old/Rte/Rte.ui.items.mjs +543 -0
  347. package/js/rte/old/Rte/Rte.ui.mjs +154 -0
  348. package/js/rte/old/Rte/crossbrowser.mjs +323 -0
  349. package/js/rte/old/Rte/font/tinymce.svg +98 -0
  350. package/js/rte/old/Rte/font/tinymce.woff +0 -0
  351. package/js/rte/old/Rte/helpers.mjs +159 -0
  352. package/js/rte/old/Rte/htmlparser.mjs +178 -0
  353. package/js/rte/old/Rte/index.mjs +5 -0
  354. package/js/rte/old/Rte/main.css +189 -0
  355. package/js/rte/old/old.rte.js +132 -0
  356. package/js/rte/old/range-selection.old.js +394 -0
  357. package/js/rte/rte.js +7 -0
  358. package/js/rte/src/behavior.js +228 -0
  359. package/js/rte/src/events.js +73 -0
  360. package/js/rte/src/fixes.js +251 -0
  361. package/js/rte/src/range.js +472 -0
  362. package/js/rte/src/rte.js +72 -0
  363. package/js/rte/src/ui/items/ai.js +167 -0
  364. package/js/rte/src/ui/items/code.js +93 -0
  365. package/js/rte/src/ui/items/undo.js +183 -0
  366. package/js/rte/src/ui.items.js +571 -0
  367. package/js/rte/src/ui.js +269 -0
  368. package/js/rte/src/util/htmlparser.js +178 -0
  369. package/js/rte/src/util/indentHtml.js +48 -0
  370. package/js/rte/tests/ai.html +81 -0
  371. package/js/rte/tests/behavior.html +88 -0
  372. package/js/rte/tests/events.html +69 -0
  373. package/js/rte/tests/fixes.html +95 -0
  374. package/js/rte/tests/minimal.html +34 -0
  375. package/js/rte/tests/notes.md +6 -0
  376. package/js/rte/tests/range.html +167 -0
  377. package/js/rte/tests/selection-explorer.html +222 -0
  378. package/js/rte/tests/test.html +92 -0
  379. package/js/shortcut/README.md +33 -0
  380. package/js/shortcut/shortcut.js +89 -0
  381. package/js/shortcut/tests/minimal.html +23 -0
  382. package/js/shortcut/tests/test.html +68 -0
  383. package/package.json +12 -0
  384. package/u2/README.md +4 -0
  385. package/u2/auto.js +161 -0
  386. package/u2/auto.ui.js +85 -0
  387. package/u2/experiments/Waiter/test.html +132 -0
  388. package/u2/experiments/getElementByIdPromise/test.html +76 -0
  389. package/u2/experiments/patchInputValue.html +124 -0
  390. package/u2/experiments/radiobutton/test.html +75 -0
  391. package/u2/experiments/tests/test.html +223 -0
  392. package/u2/experiments/u1-responsive/responsive.js +62 -0
  393. package/u2/experiments/u1-responsive/test.html +65 -0
  394. package/u2/experiments/u2Element.js +139 -0
  395. package/u2/experiments/u2Element.test.html +47 -0
  396. package/u2/old-stuff/IterableWeakMap/mod.js +70 -0
  397. package/u2/old-stuff/css/onStyleSheet/mod.js +114 -0
  398. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +28 -0
  399. package/u2/old-stuff/css/onStyleSheet/test/include.css +19 -0
  400. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +6 -0
  401. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +3 -0
  402. package/u2/old-stuff/css/onStyleSheet/test/test.html +48 -0
  403. package/u2/old-stuff/css/parser/mod.js +182 -0
  404. package/u2/old-stuff/css/parser/parser_old/mod.js +128 -0
  405. package/u2/old-stuff/css/parser/parser_old/test.html +43 -0
  406. package/u2/old-stuff/css/parser/parser_old/util.js +22 -0
  407. package/u2/old-stuff/css/parser/style.html +52 -0
  408. package/u2/old-stuff/css/parser/test.html +38 -0
  409. package/u2/old-stuff/el/ai-texter/README.md +23 -0
  410. package/u2/old-stuff/el/ai-texter/ai-texter.css +12 -0
  411. package/u2/old-stuff/el/ai-texter/ai-texter.js +153 -0
  412. package/u2/old-stuff/el/ai-texter/tests/minimal.html +47 -0
  413. package/u2/old-stuff/el/ai-texter/tests/test.html +71 -0
  414. package/u2/old-stuff/init.js +38 -0
  415. package/u2/old-stuff/markHashLinks.js +51 -0
  416. package/u2/old-stuff/onElement/mod.js +73 -0
  417. package/u2/old-stuff/test-helpers/mod.js +36 -0
  418. package/u2/old-stuff/test-helpers/test.html +4 -0
  419. package/u2/old-stuff/tests/init.js.html +51 -0
  420. package/u2/old-stuff/viewport.js +64 -0
  421. package/u2/projects.json +468 -0
  422. package/u2/tests/boilerplate.html +46 -0
  423. package/u2/tests/kacheln.html +245 -0
  424. package/u2/tests/showcase.html +270 -0
  425. package/u2/tests/showcase2.html +157 -0
  426. package/u2/tests/test-init.js +35 -0
  427. package/u2/tests/test.html +355 -0
  428. package/u2/tools/baseElement.js +95 -0
  429. package/u2/tools/baseElement.test.html +119 -0
  430. package/u2/tools/ce-inspector.js +308 -0
  431. package/u2/tools/ce-inspector.test.html +66 -0
  432. package/u2/tools/ce-manfest-from-element.js +207 -0
  433. package/u2/tools/dev-iframe.js +213 -0
  434. package/u2/tools/dev-iframe.test.html +75 -0
  435. package/u2/tools/eventsExplorer.js +101 -0
  436. package/u2/tools/logo/u1.svg +9 -0
  437. package/u2/tools/logo/u1ui.svg +6 -0
  438. package/u2/tools/update.repos.json.js +234 -0
  439. package/u2/u2.js +14 -0
  440. package/u2/utils.js +59 -0
package/js/shortcut/README.md ADDED
@@ -0,0 +1,33 @@
1
+ # shortcut.js
2
+ Easy keyboard shortcuts
3
+
4
+ ## Usage
5
+
6
+ ```js
7
+ import {listen} from '../shortcut.js';
8
+
9
+ listen('a+b+c', () => {
10
+ alert('a+b+c pressed');
11
+ }, {target: testEl});
12
+ ```
13
+
14
+ ```html
15
+ <textarea id=testEl>write "abc" while holding the keys</textarea>
16
+ ```
17
+
18
+ ## Install
19
+
20
+ ```js
21
+ import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/js/shortcut/shortcut.min.js"
22
+ ```
23
+
24
+ ## Demos
25
+
26
+ [minimal.html](http://gcdn.li/u2ui/u2@main/js/shortcut/tests/minimal.html)
27
+ [test.html](http://gcdn.li/u2ui/u2@main/js/shortcut/tests/test.html)
28
+
29
+ ## About
30
+
31
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
32
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
33
+
package/js/shortcut/shortcut.js ADDED
@@ -0,0 +1,89 @@
1
+
2
+ const keyAliases = Object.entries({
3
+ 'arrowup': ['↑', 'up'],
4
+ 'arrowdown': ['↓', 'down'],
5
+ 'arrowleft': ['←', 'left'],
6
+ 'arrowright': ['→', 'right'],
7
+ 'control': ['ctrl'],
8
+ 'shift': ['shift', '⇧'],
9
+ 'alt': ['alt', '⌥'],
10
+ 'meta': ['cmd', '⌘'], // Cmd für macOS
11
+ 'escape': ['esc'],
12
+ 'enter': ['return'],
13
+ 'delete': ['del'],
14
+ 'insert': ['ins'],
15
+ 'backspace': ['back'],
16
+ }).reduce((acc, [key, aliases]) => {
17
+ aliases.forEach(alias => {
18
+ acc[alias] = key;
19
+ });
20
+ return acc;
21
+ }, {});
22
+
23
+ function normalizeKey(key) {
24
+ key = key.trim().toLowerCase();
25
+ return keyAliases[key] || key;
26
+ }
27
+
28
+
29
+ export function listen(combination, callback, options = {}) {
30
+ const target = options.target || document;
31
+ const keys = combination.split('+').map(k => normalizeKey(k));
32
+ let activeIndex = -1;
33
+
34
+ target.addEventListener('keydown', function (event) {
35
+ if (event.repeat) return;
36
+ const key = normalizeKey(event.key);
37
+ const expectedKey = keys[activeIndex + 1];
38
+
39
+ if (expectedKey === key) {
40
+ ++activeIndex;
41
+ if (activeIndex === keys.length - 1) {
42
+ // callback bind to target and pass event as argument
43
+ callback.call(target, event);
44
+ }
45
+ } else {
46
+ activeIndex = -1;
47
+ }
48
+ });
49
+
50
+ target.addEventListener('keyup', function (event) {
51
+ const key = normalizeKey(event.key);
52
+ const expectedKey = keys[activeIndex];
53
+ if (expectedKey === key) { // wenn der letzte losgelassen wird, position einen schritt zurück
54
+ activeIndex--;
55
+ } else { // wenn sonst einer losgelassen wird, reset
56
+ activeIndex = -1;
57
+ }
58
+ });
59
+ }
60
+
61
+
62
+
63
+ /*
64
+ maybe later: the order should probably not matter
65
+ function listen(combination, callback, options = {}) {
66
+ const requiredKeys = new Set(combination.toLowerCase().split('+').map(k => normalizeKey(k)));
67
+ let activeKeys = new Set();
68
+
69
+ document.addEventListener('keydown', function(event) {
70
+ activeKeys.add(normalizeKey(event.key.toLowerCase()));
71
+ if (isCombinationPressed(requiredKeys, activeKeys)) {
72
+ callback();
73
+ }
74
+ });
75
+
76
+ document.addEventListener('keyup', function(event) {
77
+ activeKeys.delete(normalizeKey(event.key.toLowerCase()));
78
+ });
79
+ }
80
+
81
+ function isCombinationPressed(requiredKeys, activeKeys) {
82
+ for (let key of requiredKeys) {
83
+ if (!activeKeys.has(key)) {
84
+ return false;
85
+ }
86
+ }
87
+ return true;
88
+ }
89
+ */
package/js/shortcut/tests/minimal.html ADDED
@@ -0,0 +1,23 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+ <body>
9
+
10
+ <section class="main">
11
+ <textarea id=testEl>write "abc" while holding the keys</textarea>
12
+ </section>
13
+
14
+ <script type=module class="main">
15
+
16
+ import {listen} from '../shortcut.js';
17
+
18
+ listen('a+b+c', () => {
19
+ alert('a+b+c pressed');
20
+ }, {target: testEl});
21
+
22
+ </script>
23
+
package/js/shortcut/tests/test.html ADDED
@@ -0,0 +1,68 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/aria.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+ <body>
13
+
14
+ <section>
15
+
16
+
17
+ <script type=module style="display:block">
18
+ import {listen} from "../shortcut.js";
19
+
20
+ listen('a+s', () => trigger('test-as-textarea'), {target:testEl});
21
+
22
+ listen('a+s', () => trigger('test-as'));
23
+
24
+ listen('a+s+d+f', () => trigger('test-asdf'));
25
+
26
+ listen('a+s+f', () => trigger('test-asf'));
27
+
28
+ listen('ctrl+up', () => trigger('test-ctrl-up'));
29
+
30
+ listen('ctrl+shift+up', () => trigger('test-ctrl-shift-up'));
31
+ </script>
32
+
33
+ <textarea id=testEl>write "as" while holding the keys</textarea>
34
+
35
+ <ul>
36
+ <li id="test-as-textarea">a+s in textarea</li>
37
+ <li id="test-as">a+s</li>
38
+ <li id="test-asdf">a+s+d+f</li>
39
+ <li id="test-asf">a+s+f</li>
40
+ <li id="test-ctrl-up">ctrl+up</li>
41
+ <li id="test-ctrl-shift-up">ctrl+shift+up</li>
42
+ </ul>
43
+
44
+ </section>
45
+
46
+
47
+
48
+ <style>
49
+ .triggered {
50
+ animation: trigger 1s;
51
+ }
52
+ @keyframes trigger {
53
+ 0% {
54
+ background: var(--color)
55
+ }
56
+ 100% {
57
+ background: #fff;
58
+ }
59
+ }
60
+ </style>
61
+ <script>
62
+
63
+ function trigger(id) {
64
+ document.getElementById(id).classList.add('triggered');
65
+ setTimeout(() => document.getElementById(id).classList.remove('triggered'), 1000);
66
+ }
67
+
68
+ </script>
package/package.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "u2ui",
3
+ "version": "1.0.0",
4
+ "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "test": "echo \"Error: no test specified\" && exit 1"
8
+ },
9
+ "keywords": [],
10
+ "author": "",
11
+ "license": "ISC"
12
+ }
package/u2/README.md ADDED
@@ -0,0 +1,4 @@
1
+ # u2
2
+ Tools for the usage of u2 design system
3
+
4
+
package/u2/auto.js ADDED
@@ -0,0 +1,161 @@
1
+ const myUrl = new URL(import.meta.url);
2
+ let debug = myUrl.searchParams.get('debug') != null;
3
+ const root = new URL(myUrl.origin + myUrl.pathname + '/../../'); //console.log('%cuncomment localhost!','color:red;font-size:1.2em');
4
+ let rootUrl = root.toString();
5
+
6
+ if (root.host === 'localhost') debug = true;
7
+
8
+ let min = '.min';
9
+ if (debug) min = '';
10
+
11
+ // get faster cdn updates? https://purge.jsdelivr.net/gh/nuxodin/cleanup.js@latest/
12
+
13
+ if (debug) { // top level await safari >= 15.1
14
+ min = '';
15
+ await Promise.all([
16
+ import('https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/mod.min.js'),
17
+ import('https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/htmlfills.min.js'),
18
+ //import('https://cdn.jsdelivr.net/gh/nuxodin/cleanup.js/mod.min.js'),
19
+ ]);
20
+ }
21
+
22
+ import {importCss} from './utils.js';
23
+ import {repos} from './u2.js';
24
+
25
+ const projects = await repos();
26
+
27
+ let prio = 1;
28
+ setTimeout(()=>prio = 2);
29
+ setTimeout(()=>prio = 3, 2000);
30
+ const needed = { js:{}, css:{} };
31
+ function impJs(url){
32
+ if (!url || url in needed.js) return;
33
+ needed.js[url] = prio;
34
+ return import(url);
35
+ }
36
+ function impCss(url, options={}){
37
+ if (!url || url in needed.css) return;
38
+ importCss(url, options).then(res=>{
39
+ if (res.available) needed.css[url]=0; // already loaded
40
+ }).catch(() => needed.css[url]=0 ); // failed
41
+ needed.css[url] = prio
42
+ }
43
+
44
+ window.u2 = Object.create(null);
45
+ window.u2.needed = needed;
46
+
47
+ ////////////////////////////////////////////////////////////////
48
+ //
49
+ // Import defaults
50
+ //
51
+ ////////////////////////////////////////////////////////////////
52
+
53
+ impCss(rootUrl+'css/norm/norm'+min+'.css');
54
+ impCss(rootUrl+'css/base/base'+min+'.css');
55
+ setTimeout(()=>{
56
+ impCss(rootUrl+'css/base/print.css', {media:'print'});
57
+ impCss(rootUrl+'css/base/nomotion.css', {media:'prefers-reduced-motion'});
58
+ })
59
+ impCss(rootUrl+'css/classless/variables'+min+'.css');
60
+ impCss(rootUrl+'css/classless/classless'+min+'.css');
61
+ impCss(rootUrl+'css/classless/more'+min+'.css');
62
+
63
+
64
+ ////////////////////////////////////////////////////////////////
65
+ //
66
+ // Autoimport
67
+ //
68
+ ////////////////////////////////////////////////////////////////
69
+
70
+
71
+ function newNode(node){
72
+ if (node.tagName.startsWith('U2-')) {
73
+ let name = node.tagName.substring(3).toLowerCase();
74
+ if (customElements.get('u2-'+name)) return; // skip if registred
75
+ loadProject('el', name);
76
+ }
77
+ let classList = node.classList;
78
+ for (let i=0, l=classList.length; i<l; i++) {
79
+ let klass = classList[i]
80
+ if (!klass.startsWith('u2-')) continue;
81
+ let name = klass.substring(3);
82
+ loadProject('class', name);
83
+ }
84
+ const attris = node.attributes;
85
+ for (let i=0, l=attris.length; i<l; i++) {
86
+ let attr = attris[i]
87
+ if (!attr.name.startsWith('u2-')) continue;
88
+ let name = attr.name.substring(3).replace(/-.*/,''); // example: u2-href-target => href
89
+ loadProject('attr', name);
90
+ }
91
+ }
92
+
93
+ function loadProject(category, name){
94
+ const id = category + '/' + name;
95
+ const meta = projects[id];
96
+ if (!meta) { console.warn('u2: project not found:', category+'/'+name); return; }
97
+ const hasJs = meta.js ?? (category==='el' || category==='attr');
98
+ const hasCss = meta.css ?? (category==='el' || category==='class');
99
+ hasCss && impCss(rootUrl + id + '/' + name + min + '.css');
100
+ hasJs && impJs(rootUrl + id + '/' + name + min + '.js');
101
+ }
102
+
103
+ function newNodeRoot(node){
104
+ if (!node.tagName) return;
105
+ newNode(node);
106
+ node.querySelectorAll('*').forEach(newNode);
107
+ }
108
+ var mo = new MutationObserver((entries)=>{
109
+ for (let i=0, l=entries.length; i<l; i++) {
110
+ let nodes = entries[i].addedNodes;
111
+ for (let j=0, l2=nodes.length; j<l2; j++) {
112
+ newNodeRoot(nodes[j]);
113
+ }
114
+ }
115
+ });
116
+
117
+ export function addShadowRoot(rootNode){
118
+ mo.observe(rootNode,{childList:true, subtree:true, characterData:false});
119
+ newNodeRoot(rootNode);
120
+ }
121
+ addShadowRoot(document.documentElement)
122
+
123
+ ////////////////////////////////////////////////////////////////
124
+ //
125
+ // UI
126
+ //
127
+ ////////////////////////////////////////////////////////////////
128
+
129
+ addEventListener('keydown',e=>{
130
+ if (e.ctrlKey && e.key ==='F12') {
131
+ import('./auto.ui.js').then(ui=>ui.open())
132
+ }
133
+ });
134
+
135
+ ////////////////////////////////////////////////////////////////
136
+ //
137
+ // save used files
138
+ //
139
+ ////////////////////////////////////////////////////////////////
140
+
141
+ /* save all */
142
+ function mergeNewlyNeeded(){
143
+ let allNeeded = localStorage.getItem('u2-needed');
144
+ allNeeded = JSON.parse(allNeeded) || {};
145
+ allNeeded.js = Object.assign(allNeeded.js||{}, needed.js);
146
+ allNeeded.css = Object.assign(allNeeded.css||{}, needed.css);
147
+ //Object.assign(allNeeded, needed);
148
+ localStorage.setItem('u2-needed', JSON.stringify(allNeeded));
149
+ }
150
+
151
+ document.addEventListener('DOMContentLoaded',mergeNewlyNeeded);
152
+ addEventListener('pagehide',mergeNewlyNeeded);
153
+
154
+
155
+ ////////////////////////////////////////////////////////////////
156
+ //
157
+ // ready
158
+ //
159
+ ////////////////////////////////////////////////////////////////
160
+
161
+ console.log('%c%s','color:#2c8898;xfont-size:1.3em', '💡 press ctrl+F12 to configure the U2-design-system!');
package/u2/auto.ui.js ADDED
@@ -0,0 +1,85 @@
1
+ import {render, html} from 'https://unpkg.com/uhtml@3.1.0/esm/index.js?module';
2
+ import {repos} from './u2.js';
3
+
4
+ let win = null;
5
+ export function open(){
6
+ if (window['u2-config'] && !window['u2-config'].closed) window['u2-config'].close();
7
+
8
+ win = window.open('about:blank', 'u2-config', 'popup,width=800,height=640');
9
+ win.focus()
10
+ const doc = win.document;
11
+
12
+ // Problem: depencencies in this script are also tracked...
13
+ doc.write (
14
+ `<!DOCTYPE html>
15
+ <html lang=en>
16
+ <head>
17
+ <meta charset=utf-8>
18
+ <script>import('${import.meta.url+'/../auto.js'}')<\/script>
19
+ <link rel="stylesheet" href="../../../el/ico/font/Material Icons.css">
20
+ <style>
21
+ html {
22
+ font-size:14px;
23
+ padding:2rem;
24
+ }
25
+ body {
26
+ font-size:inherit;
27
+ }
28
+ pre {
29
+ font-size:12px;
30
+ xmax-height:70vh;
31
+ }
32
+ </style>
33
+ <body>`
34
+ );
35
+
36
+ setTimeout(()=>{
37
+ renderUi(doc.body);
38
+ }, 10);
39
+
40
+ }
41
+
42
+ async function renderUi(el){
43
+ const code = await exportCode();
44
+ render(el,
45
+ html`
46
+ <details>
47
+ <summary>needed HTML</summary>
48
+ <button onclick="${()=>win.navigator.clipboard.writeText(code)}">copy to clipboard</button>
49
+ <button onclick="${()=>win.localStorage.removeItem('u2-needed')}">reset</button>
50
+ <pre>${code}</pre>
51
+ </details>
52
+ `
53
+ );
54
+ }
55
+
56
+
57
+
58
+
59
+ const needed = window.u2.needed;
60
+
61
+ const exportCode = async function(){
62
+ await repos();
63
+
64
+ let needed = localStorage.getItem('u2-needed');
65
+ needed = JSON.parse(needed) || {};
66
+
67
+
68
+
69
+ let strCss = Object.entries(needed.css).filter(([,prio])=>prio===1).map(([url,prio])=>'<link href="'+url+'" rel="stylesheet" crossorigin>').join('\n');
70
+
71
+ // todo: combined string (just in the console for now)
72
+ let strCssPromizes = Object.entries(needed.css).filter(([,prio])=>prio===1).map(([url,prio])=>{
73
+ return fetch(url).then(res=>res.text());
74
+ });
75
+ const cssContents = await Promise.all(strCssPromizes);
76
+ const cssText = cssContents.join('').replace(/\/\*[\s\S]*?\*\//g, '');
77
+ console.log(cssText);
78
+
79
+
80
+ let strJs = Object.entries(needed.js).map(([url,prio])=>'<script src="'+url+'" type=module crossorigin async></script>').join('\n');
81
+ let strCssNonCritical = Object.entries(needed.css).filter(([,prio])=>prio>1).map(([url,prio])=>'<link rel="stylesheet" href="'+url+'" crossorigin>').join('\n');
82
+ return strCss +'\n' + strJs + '\n' + '\n<!-- non critical at the end -->\n' + strCssNonCritical;
83
+ }
84
+
85
+
package/u2/experiments/Waiter/test.html ADDED
@@ -0,0 +1,132 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>test</title>
7
+ <!-- <script src="../../../u2/tests/test-init.js" type=module async></script> -->
8
+ <script src="../../auto.js" type=module async></script>
9
+ <link href="../../../css/classless/full.css" rel=stylesheet>
10
+ <link href="../../../css/classless/simple.css" rel=stylesheet>
11
+
12
+ <style>
13
+ body {
14
+ --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
15
+ }
16
+ label {
17
+ display:block;
18
+ margin-block:1rem;
19
+ }
20
+ </style>
21
+
22
+
23
+ <body>
24
+
25
+ <section style="background:var(--color-light, #eee)">
26
+
27
+ <button id="start">Start</button>
28
+ <button id="pause">Pause</button>
29
+ <button id="resume">Resume</button>
30
+ <button id="stopEl">Stop</button>
31
+
32
+ <div>
33
+ Status: <span id="statusEl">-</span>
34
+ <br>
35
+ Progress: <progress id="progressEl" max="100" value="0"></progress>
36
+ </div>
37
+
38
+ <script type="module">
39
+ const waiter = new Waiter(() => {
40
+ statusEl.textContent += ' Fertig';
41
+ }, 10000);
42
+
43
+ waiter.onProgress = ({ left, passed, progress }) => {
44
+ console.log({ left, passed, progress });
45
+ progressEl.value = progress * 100;
46
+ };
47
+
48
+ start.onclick = () => {
49
+ waiter.start();
50
+ console.log(status)
51
+ statusEl.textContent = 'Gestartet';
52
+ };
53
+ pause.onclick = () => {
54
+ waiter.pause();
55
+ statusEl.textContent = 'Pausiert';
56
+ };
57
+ resume.onclick = () => {
58
+ waiter.resume();
59
+ statusEl.textContent = 'Fortgesetzt';
60
+ };
61
+ stopEl.onclick = () => {
62
+ statusEl.textContent = 'Gestoppt';
63
+ waiter.stop();
64
+ };
65
+ </script>
66
+
67
+ </section>
68
+
69
+
70
+
71
+ <script>
72
+ class Waiter {
73
+ constructor(callback, duration) {
74
+ this.callback = callback;
75
+ this.duration = duration;
76
+ this.startTime = null;
77
+ this.timerId = null;
78
+ this.emitInterval = null;
79
+ this.onProgress = null;
80
+ this.pauseTime = null;
81
+ this.remaining = duration;
82
+ }
83
+ start() {
84
+ this._clear();
85
+ this._startTimer();
86
+ return new Promise((resolve) => {
87
+ this.resolve = resolve;
88
+ });
89
+ }
90
+ pause() {
91
+ if (this.pauseTime) return;
92
+ this.pauseTime = Date.now();
93
+ clearTimeout(this.timerId);
94
+ clearInterval(this.emitInterval);
95
+ this.remaining -= this.pauseTime - this.startTime;
96
+ }
97
+ resume() {
98
+ if (!this.pauseTime) return;
99
+ this.pauseTime = null;
100
+ this._startTimer();
101
+ }
102
+ stop() {
103
+ this.resolve?.();
104
+ this.callback?.();
105
+ this._clear();
106
+ }
107
+ progress(){
108
+ const left = this.remaining - (Date.now() - this.startTime);
109
+ const passed = this.duration - left;
110
+ const progress = Math.min(passed / this.duration, 1);
111
+ return { left, passed, progress };
112
+ }
113
+ _startTimer() {
114
+ this.startTime = Date.now();
115
+ this.timerId = setTimeout(() => this.stop(), this.remaining);
116
+ if (this.onProgress) this._emitProgress();
117
+ }
118
+ _emitProgress() {
119
+ const interval = 20;
120
+ this.emitInterval = setInterval(() => {
121
+ this.onProgress(this.progress());
122
+ }, interval);
123
+ }
124
+ _clear() {
125
+ clearTimeout(this.timerId);
126
+ clearInterval(this.emitInterval);
127
+ this.remaining = this.duration;
128
+ this.pauseTime = null;
129
+ this.startTime = null;
130
+ }
131
+ }
132
+ </script>
package/u2/experiments/getElementByIdPromise/test.html ADDED
@@ -0,0 +1,76 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Test</title>
5
+
6
+ <body>
7
+ <script type=module>
8
+
9
+
10
+
11
+ const registry = new FinalizationRegistry(value => {
12
+ console.log('collected');
13
+ });
14
+ (function() {
15
+ let promise = new Promise((resolve, reject) => { console.log("Promise created"); });
16
+ registry.register(promise);
17
+ })();
18
+
19
+
20
+
21
+
22
+
23
+ // function getElementByIdPromise(id) {
24
+ // let { promise, resolve, reject } = Promise.withResolvers();
25
+ // promise.resolve = resolve;
26
+ // promise.reject = reject;
27
+ // const weakRef = new WeakRef(promise);
28
+ // const check = () => {
29
+ // const deref = weakRef.deref();
30
+ // if (!deref) return;
31
+ // console.log('wait for element');
32
+ // const element = document.getElementById(id);
33
+ // element ? deref.resolve(element) : requestAnimationFrame(check);
34
+ // };
35
+ // check();
36
+ // return promise;
37
+ // }
38
+
39
+ function getElementByIdPromise(id) {
40
+ let { promise, resolve } = Promise.withResolvers();
41
+ const weakRef = new WeakRef(resolve);
42
+ const check = () => {
43
+ const resolve = weakRef.deref();
44
+ if (!resolve) return;
45
+ console.log('wait for element');
46
+ const element = document.getElementById(id);
47
+ element ? resolve(element) : requestAnimationFrame(check);
48
+ };
49
+ check();
50
+ return promise;
51
+ }
52
+
53
+ (function(){
54
+ // Beispiel für die Nutzung
55
+ let elPromise = getElementByIdPromise('meineElementId');
56
+
57
+ elPromise
58
+ .then(element => {
59
+ console.log('Element gefunden:', element);
60
+ })
61
+ .catch(error => {
62
+ if (error.message === 'Operation aborted due to garbage collection') {
63
+ console.log('Das Warten wurde aufgrund der Garbage Collection abgebrochen.');
64
+ } else {
65
+ console.error('Fehler:', error);
66
+ }
67
+ });
68
+
69
+ elPromise = null;
70
+
71
+ })();
72
+
73
+
74
+
75
+
76
+ </script>