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/SelectorObserver/tests/tests.html ADDED
@@ -0,0 +1,161 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <title>Tests</title>
7
+ <meta name="viewport" content="width=device-width" />
8
+ <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
9
+
10
+ <body>
11
+ <div id="mocha"></div>
12
+
13
+ <script src="https://unpkg.com/chai@4.4.1/chai.js"></script>
14
+ <script src="https://unpkg.com/mocha@10.2.0/mocha.js"></script>
15
+
16
+ <script class="mocha-init">
17
+ mocha.setup('bdd');
18
+ mocha.checkLeaks();
19
+ </script>
20
+
21
+ <div class=container id=container>
22
+ <div class=item id=el1>added before</div>
23
+ </div>
24
+
25
+ <script type=module>
26
+ import {SelectorObserver} from '../SelectorObserver.js';
27
+
28
+ describe('SelectorObserver', () => {
29
+ let lastAdded = null;
30
+ let lastRemoved = null;
31
+ let o = new SelectorObserver({
32
+ on: el => lastAdded = el ,
33
+ off : el => lastRemoved = el ,
34
+ });
35
+ const options = {};
36
+ o.observe('.container .item', options);
37
+
38
+ let el2 = document.createElement('div');
39
+ el2.classList.add('item');
40
+ el2.id = 'el2';
41
+ el2.innerHTML = 'dynamicly added';
42
+
43
+ it('found existing:', () => {
44
+ chai.expect(lastAdded).to.equal(el1);
45
+ });
46
+
47
+ it('add dynamicly:', done => {
48
+ lastAdded = lastRemoved = null;
49
+ el1.after(el2)
50
+ setTimeout(()=>{
51
+ chai.expect(lastAdded).to.equal(el2);
52
+ done();
53
+ },50)
54
+ });
55
+
56
+ it('remove class:', done => {
57
+ lastAdded = lastRemoved = null;
58
+ el2.classList.remove('item');
59
+ setTimeout(()=>{
60
+ chai.expect(lastRemoved).to.equal(el2);
61
+ el2.classList.add('item');
62
+ done();
63
+ },50)
64
+ });
65
+
66
+ it('nested, remove parent class: (should not work)', done => {
67
+ lastAdded = lastRemoved = null;
68
+ container.classList.remove('container');
69
+ setTimeout(()=>{
70
+ chai.expect(lastRemoved).to.equal(null);
71
+ container.classList.add('container');
72
+ done();
73
+ },50);
74
+ });
75
+
76
+ it('nested, remove parent class: (using deep)', done => {
77
+ lastAdded = lastRemoved = null;
78
+ options.deep = true;
79
+ container.classList.remove('container');
80
+ setTimeout(()=>{
81
+ chai.expect(lastRemoved).to.equal(el2);
82
+ container.classList.add('container');
83
+ done();
84
+ },50);
85
+ });
86
+
87
+ it('add wrapper:', done => {
88
+ lastAdded = lastRemoved = null;
89
+ el1.insertAdjacentHTML('afterend', '<div id=wrapper><div class=item id=el3>wrapped</div></div>');
90
+ setTimeout(()=>{
91
+ chai.expect(lastAdded.id).to.equal('el3');
92
+ done();
93
+ },50)
94
+ });
95
+
96
+ it('remove wrapper:', done => {
97
+ lastAdded = lastRemoved = null;
98
+ wrapper.remove();
99
+ setTimeout(()=>{
100
+ chai.expect(lastRemoved.id).to.equal('el3');
101
+ done();
102
+ },50)
103
+ });
104
+
105
+ it('move node but keep it matched to the selector:', done => {
106
+ lastAdded = lastRemoved = null;
107
+ el2.remove();
108
+ container.prepend(el2);
109
+ setTimeout(()=>{
110
+ chai.expect(lastRemoved.id).to.equal('el2');
111
+ chai.expect(lastAdded.id).to.equal('el2');
112
+ done();
113
+ },100)
114
+ });
115
+
116
+ it('add after disconnect:', done => {
117
+ lastAdded = lastRemoved = null;
118
+ o.disconnect();
119
+ el1.insertAdjacentHTML('afterend', '<div class=item id=afterDisconnect>after disconnect</div>');
120
+ setTimeout(()=>{
121
+ chai.expect(lastAdded).to.equal(null);
122
+ afterDisconnect.remove();
123
+ done();
124
+ });
125
+ });
126
+
127
+ });
128
+
129
+ /*
130
+ describe('SelectorObserver check by animationend', () => {
131
+ it('nested, add parent class:', done => {
132
+ let o = new SelectorObserver({
133
+ on: el => {
134
+ chai.expect(el.id).to.equal('el1');
135
+ done();
136
+ }
137
+ })
138
+ o.observe('.test #el1', {checkAnimation: true});
139
+ container.classList.add('test');
140
+ });
141
+ it('nested, remove parent class:', done => {
142
+ let o = new SelectorObserver({
143
+ off: el => {
144
+ chai.expect(el.id).to.equal('el1');
145
+ done();
146
+ }
147
+ })
148
+ o.observe('.test #el1', {checkAnimation: true});
149
+ container.classList.remove('test');
150
+ });
151
+ });
152
+ */
153
+
154
+
155
+ </script>
156
+ <script class="mocha-exec" type=module>
157
+ mocha.run();
158
+ </script>
159
+ </body>
160
+
161
+ </html>
package/js/contextmenu/README.md ADDED
@@ -0,0 +1,93 @@
1
+ # contextmenu.js
2
+ context menus, simple and highly customisable
3
+
4
+ ## Features
5
+
6
+ - [x] Simple API
7
+ - [x] Add context menu to any element by CSS selector
8
+ - [x] Add keyboard shortcuts
9
+ - [x] Style not corrupted by the website do to the use of shadow dom
10
+ - [x] Add custom HTML to the menu
11
+ - [x] Submenus, Icons
12
+
13
+ ## Usage
14
+
15
+ ```js
16
+ import {contextMenu} from '../contextmenu.js';
17
+
18
+ contextMenu.add([
19
+ {
20
+ label: 'Button',
21
+ action: e => alert(e.target.textContent),
22
+ icon: '<svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>',
23
+ selector: 'button'
24
+ },{
25
+ label: 'More',
26
+ icon: 'add_circle',
27
+ children: [
28
+ {
29
+ label: 'Submenu 1',
30
+ icon: 'delete',
31
+ action(e) { alert(this.label + ' by ' + e.originalEvent.type) },
32
+ shortcut: 'Ctrl+1',
33
+ },
34
+ {
35
+ label: 'Submenu 2',
36
+ icon: 'edit',
37
+ action(e) { alert(this.label + ' by ' + e.originalEvent.type) },
38
+ shortcut: 'Ctrl+2',
39
+ },
40
+ ]
41
+ },
42
+ ]);
43
+ ```
44
+
45
+ ```html
46
+ <button>button 1</button>
47
+ <button>button 2</button>
48
+ ```
49
+
50
+ ## API
51
+
52
+ ### contextMenu.add(items)
53
+ Adds a context menu to the page. `items` is an array of menu items. Each item is an object with the following properties:
54
+
55
+ - `label`: The text of the menu item.
56
+ - `action`: A function to call when the menu item is clicked. The function is passed an `event`
57
+ object.
58
+ - `event.target`: The element that matched the selector.
59
+ - `event.originalEvent`: The original event that triggered the menu.
60
+ - `event.preventHide`: (boolean) If set to true, the contextmenue will not disappear after the action is called.
61
+ - `this`: The menu item object.
62
+ - `onparse`: A function to call when the menu item prepaired for the current context. The function is passed an `event` object.
63
+ - `event.target`: The element that matched the selector.
64
+ - `event.originalEvent`: The original event that triggered the menu.
65
+ - `this`: The menu item object.
66
+ - `shortcut`: A keyboard shortcut to trigger the menu item (whitout the open context menu). Example: `'Ctrl + I + O'`.
67
+ - `selector`: A CSS selector for the type of element the menu item should appear for. If no selector is provided, the menu item will appear everywhere.
68
+ - `icon`: SVG-string or name of a [material icon](https://fonts.google.com/icons?icon.style=Rounded).
69
+ - `html`: Custom HTML to display in the menu item. If this is provided, `action`, `label` and `icon` are ignored.
70
+ - `children`: An array of sub-menu items. Each sub-menu item has the same properties as a top-level menu item.
71
+
72
+
73
+ ### contextMenu.addItem(label, action, options)
74
+ Adds a single menu item to the context menu. `item` is an object with the same properties as the items in `contextMenu.add()`.
75
+
76
+ - return value: The menu item object.
77
+
78
+ ## Install
79
+
80
+ ```js
81
+ import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/js/contextmenu/contextmenu.min.js"
82
+ ```
83
+
84
+ ## Demos
85
+
86
+ [minimal.html](http://gcdn.li/u2ui/u2@main/js/contextmenu/tests/minimal.html)
87
+ [test.html](http://gcdn.li/u2ui/u2@main/js/contextmenu/tests/test.html)
88
+
89
+ ## About
90
+
91
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
92
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
93
+
package/js/contextmenu/contextmenu.js ADDED
@@ -0,0 +1,336 @@
1
+
2
+ class Menu {
3
+ constructor(menuItem) {
4
+ this.menuItem = menuItem;
5
+ this.el = document.createElement('menu');
6
+ this.el.role = 'menu';
7
+ this.el.part = 'menu';
8
+ this.children = [];
9
+ }
10
+ addItem(label, opt={}) {
11
+ const item = new MenuItem(this, label, opt);
12
+ this.el.append(item.el);
13
+ this.children.push(item);
14
+ return item;
15
+ }
16
+ addSeparator() {
17
+ const li = document.createElement('li');
18
+ li.role = 'separator';
19
+ this.el.append(li);
20
+ }
21
+ add(items) {
22
+ if (Array.isArray(items)) {
23
+ for (const opt of items) {
24
+ if (opt === '-') { this.addSeparator(); continue; }
25
+ const item = this.addItem(opt.label, opt);
26
+ if (opt.children) item.add(opt.children);
27
+ }
28
+ } else {
29
+ for (const [label, opt] of Object.entries(items)) {
30
+ if (typeof opt === 'function') {
31
+ this.addItem(label, {action:opt});
32
+ } else {
33
+ const item = this.addItem(label);
34
+ item.add(opt);
35
+ }
36
+ }
37
+ }
38
+ }
39
+ parseFor(element) { // returns number of active items for the element
40
+ this.currentActive = this.children.filter(item=>item.parseFor(element)).length;
41
+ return this.currentActive;
42
+ }
43
+ open() {
44
+ if (!this.currentActive) return;
45
+ this.menuItem?.el.setAttribute('aria-expanded', true);
46
+ this._placer().then(p =>{
47
+ p.followElement(this.el.parentElement);
48
+ });
49
+ }
50
+ close() {
51
+ this.menuItem?.el.removeAttribute('aria-expanded');
52
+ this.children.forEach(m=>m._subMenu?.close());
53
+ }
54
+ async _placer() {
55
+ if (!this.__placer) {
56
+ const Placer = (await import('../../js/Placer/Placer.js')).Placer;
57
+ this.__placer = new Placer(this.el, {x:'after', y:'prepend'});
58
+ }
59
+ return this.__placer;
60
+ }
61
+ }
62
+
63
+ class MenuItem {
64
+ constructor(parentMenu, label, options){
65
+ this.parentMenu = parentMenu;
66
+ this.options = options;
67
+ const li = this.el = document.createElement('li');
68
+ li.role = 'presentation'; // todo: buttons should be role=menuitem?
69
+ li.part = 'item';
70
+
71
+ if (options.html) {
72
+ li.innerHTML = options.html;
73
+ } else {
74
+ const btn = document.createElement('button');
75
+ btn.role = 'menuitem';
76
+ btn.classList.add('-item');
77
+ li.append(btn);
78
+ btn.innerHTML = `
79
+ <span class=-icon aria-hidden=true>${options.icon??''}</span>
80
+ <span class=-label>${label}</span>
81
+ <span class=-shortcut>${options.shortcut??''}</span>
82
+ <span class=-arrow></span>`;
83
+ btn.addEventListener('click', event=>{
84
+ if (options.action) {
85
+ const e = {target:this.currentTarget, originalEvent:event};
86
+ options.action(e);
87
+ if (e.preventHide) return;
88
+ }
89
+ rootEl.hidePopover();
90
+ });
91
+ }
92
+ li.addEventListener('mouseenter', e => this.openSub() );
93
+ li.addEventListener('focusin', e => this.openSub() );
94
+
95
+ if (options.shortcut) {
96
+ import('../../js/shortcut/shortcut.js').then(({listen})=>{
97
+ listen(options.shortcut, event=>{
98
+ const target = options.selector ? !event.target.closest(options.selector) : false;
99
+ if (target) return; // ok?
100
+ this.currentTarget = target ?? document.documentElement;
101
+ event.preventDefault();
102
+ options.action({target:this.currentTarget, originalEvent:event});
103
+ });
104
+ });
105
+ }
106
+
107
+ li.addEventListener('mousedown', stopPropagation)
108
+ li.addEventListener('touchstart', stopPropagation)
109
+ }
110
+ openSub(){
111
+ if (this.el.getAttribute('aria-expanded') === 'true') return;
112
+ this.parentMenu.children.forEach(m=>m._subMenu?.close());
113
+ this._subMenu?.open();
114
+ }
115
+
116
+ subMenu() {
117
+ if (!this._subMenu) {
118
+ this._subMenu = new Menu(this);
119
+ this.el.append(this._subMenu.el);
120
+ this.options.action = e=> {
121
+ this._subMenu.open();
122
+ e.preventHide = true;
123
+ }
124
+ }
125
+ return this._subMenu;
126
+ }
127
+ addItem(label, opt={}) {
128
+ opt.selector ??= this.options?.selector;
129
+ return this.subMenu().addItem(label, opt);
130
+ }
131
+ add(items) { this.subMenu().add(items); }
132
+ addSeparator() { this.subMenu().addSeparator(); }
133
+ parseFor(element) {
134
+ this.currentActive = this._subMenu?.parseFor(element);
135
+ this.currentTarget = this.options.selector ? element.closest(this.options.selector) : document.documentElement;
136
+
137
+ if (this.currentActive) {
138
+ this.el.querySelector(':scope > button > .-arrow').innerHTML = arrow;
139
+ }
140
+ if (this.currentActive || this.currentTarget) {
141
+ this.el.hidden = false;
142
+ this.options?.onparse?.bind(this)({target:this.currentTarget});
143
+ return true;
144
+ }
145
+ this.el.hidden = true;
146
+ }
147
+ }
148
+
149
+ const arrow = '<svg aria-hidden="true" style="display:block; height:1em" xmlns="http://www.w3.org/2000/svg" width="16" height="26" viewBox="0 0 16 26"><path d="m2 1 12 12L2 25" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:2"/></svg>';
150
+
151
+ const css = `
152
+ #u2ContextMenu {
153
+ --bg: var(--color-bg, Canvas);
154
+ --bg: color-mix(in srgb, var(--color-bg, Canvas), #fff 80%);
155
+ --text: var(--color-text, CanvasText);
156
+ --text: color-mix(in srgb, var(--color-text, CanvasText), #000 80%);
157
+ --line: color-mix(in srgb, var(--text) 30%, var(--bg));
158
+
159
+ &, & menu {
160
+ position:fixed;
161
+ top:0;
162
+ box-shadow:0 0 .8em rgba(0,0,0,.08);
163
+ list-style:none;
164
+ font-family:Arial;
165
+ font-size:14px;
166
+ margin:0;
167
+ padding:0;
168
+ min-width:10em;
169
+ cursor:default;
170
+ border: 1px solid var(--line);
171
+ background-color: var(--bg, Canvas);
172
+ color: var(--text, CanvasText);
173
+ }
174
+ & menu {
175
+ display:none;
176
+ }
177
+ & li[aria-expanded=true] > menu {
178
+ display:block;
179
+ }
180
+ & menu:focus-within { /* needed? */
181
+ display:block;
182
+ }
183
+ & li {
184
+ display:flex;
185
+ padding:0;
186
+ }
187
+ & li[hidden] {
188
+ display:none !important;
189
+ }
190
+ & li:focus-within {
191
+ background-color: color-mix(in srgb, var(--bg) 95%, var(--text));
192
+ }
193
+ & li[role=separator] {
194
+ margin:.5em 0;
195
+ border-top:1px solid var(--line);
196
+ }
197
+ & .-item {
198
+ display:flex;
199
+ align-items:center;
200
+ gap:.5em;
201
+ flex:1 1 auto;
202
+ border:0;
203
+ border-radius:0;
204
+ padding:.5em;
205
+ text-align:left;
206
+ background:transparent;
207
+ color:inherit;
208
+ }
209
+ & .-icon {
210
+ display:flex;
211
+ align-items:center;
212
+ justify-content:center;
213
+ font-size:1.715em; /* optimal: 24px */
214
+ height:1em;
215
+ min-width:1em;
216
+ flex:0 0 auto;
217
+
218
+ font-family: 'Material Symbols Rounded';
219
+ font-weight: normal;
220
+ font-style: normal;
221
+ line-height: 1;
222
+ letter-spacing: normal;
223
+ text-transform: none;
224
+ white-space: nowrap;
225
+ word-wrap: normal;
226
+ direction: ltr;
227
+ -moz-font-feature-settings: 'liga';
228
+ -moz-osx-font-smoothing: grayscale;
229
+
230
+ & svg {
231
+ max-height:100%;
232
+ fill:currentColor;
233
+ display: block;
234
+ }
235
+ }
236
+ & .-label {
237
+ flex:1 1 auto;
238
+ white-space:nowrap;
239
+ max-width:19em;
240
+ overflow:hidden;
241
+ text-overflow:ellipsis;
242
+ }
243
+ & .-shortcut {
244
+ flex:0 1 auto;
245
+ text-align:right;
246
+ font-size:.8em;
247
+ white-space:nowrap;
248
+ opacity:.5;
249
+ }
250
+ }
251
+ `;
252
+
253
+ export const contextMenu = new Menu();
254
+ const rootEl = contextMenu.el;
255
+
256
+ rootEl.id = 'u2ContextMenu';
257
+ rootEl.popover = 'auto';
258
+
259
+ // todo: key navigation
260
+ function focusNext(direction){
261
+ const root = menuContainer.shadowRoot || document;
262
+ const activeLi = root.activeElement.closest('li');
263
+ let next = activeLi;
264
+ while (next) {
265
+ if (direction==='next') next = next?.nextElementSibling;
266
+ if (direction==='prev') next = next?.previousElementSibling;
267
+ if (direction==='parent') next = next?.parentElement?.parentElement;
268
+ if (direction==='child') next = next?.querySelector('li');
269
+ if (!next) return;
270
+ if (next.hidden) continue;
271
+ const firstFocusable = next.querySelector(':scope :is(button, [tabindex], a, input, select, textarea)');
272
+ if (firstFocusable) {
273
+ firstFocusable.focus();
274
+ break;
275
+ }
276
+ }
277
+ }
278
+ const onkey = {
279
+ ArrowUp: ()=>focusNext('prev'),
280
+ ArrowDown: ()=>focusNext('next'),
281
+ ArrowLeft: ()=>focusNext('parent'),
282
+ ArrowRight: ()=>focusNext('child'),
283
+ }
284
+ rootEl.addEventListener('keydown',e=>{
285
+ if (!onkey[e.key]) return;
286
+ onkey[e.key]?.(e);
287
+ e.preventDefault();
288
+ });
289
+
290
+ rootEl.addEventListener('mouseenter', e => e.target.focus(),true);
291
+ rootEl.addEventListener('toggle', e => {
292
+ if (e.newState === 'closed') contextMenu.close(); // close all submenus
293
+ });
294
+
295
+
296
+
297
+ const menuContainer = document.createElement('div');
298
+ const shadowRoot = menuContainer.attachShadow({mode: 'open'});
299
+
300
+ menuContainer.id = 'u2ContextMenuContainer';
301
+ menuContainer.innerHTML = `<link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,0,0"/>`; // does not work in shadowdom
302
+
303
+ const cssRoot = import.meta.resolve('../../css/');
304
+ shadowRoot.innerHTML = `
305
+ <style>
306
+ @import "${cssRoot}norm/norm.css";
307
+ @import "${cssRoot}base/base.css";
308
+ ${css}
309
+ </style>`;
310
+
311
+ menuContainer.style.display = 'contents';
312
+ document.documentElement.appendChild(menuContainer);
313
+ shadowRoot.appendChild(rootEl);
314
+
315
+
316
+ document.documentElement.addEventListener('contextmenu', e=>{
317
+ if (e.shiftKey) return;
318
+ if (e.target === menuContainer) return;
319
+ const has = contextMenu.parseFor(e.target);
320
+ if (!has) return;
321
+ e.preventDefault();
322
+
323
+ rootEl.showPopover();
324
+ rootEl.querySelector('button').focus();
325
+
326
+ let top = e.clientY + 2;
327
+ let left = e.clientX + 2;
328
+ top = Math.min(innerHeight - rootEl.offsetHeight, top);
329
+ left = Math.min(innerWidth - rootEl.offsetWidth, left);
330
+ rootEl.style.top = top+'px';
331
+ rootEl.style.left = left+'px';
332
+ });
333
+
334
+
335
+ /* helpers */
336
+ function stopPropagation(e) { e.stopPropagation() }
package/js/contextmenu/tests/minimal.html ADDED
@@ -0,0 +1,44 @@
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
+ <body>
8
+
9
+ <section class="main">
10
+ <button>button 1</button>
11
+ <button>button 2</button>
12
+ </section>
13
+
14
+ <script type=module class="main">
15
+
16
+ import {contextMenu} from '../contextmenu.js';
17
+
18
+ contextMenu.add([
19
+ {
20
+ label: 'Button',
21
+ action: e => alert(e.target.textContent),
22
+ icon: '<svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>',
23
+ selector: 'button'
24
+ },{
25
+ label: 'More',
26
+ icon: 'add_circle',
27
+ children: [
28
+ {
29
+ label: 'Submenu 1',
30
+ icon: 'delete',
31
+ action(e) { alert(this.label + ' by ' + e.originalEvent.type) },
32
+ shortcut: 'Ctrl+1',
33
+ },
34
+ {
35
+ label: 'Submenu 2',
36
+ icon: 'edit',
37
+ action(e) { alert(this.label + ' by ' + e.originalEvent.type) },
38
+ shortcut: 'Ctrl+2',
39
+ },
40
+ ]
41
+ },
42
+ ]);
43
+
44
+ </script>