VanillaJS UI

19 November 2024, 22:14

Of the whole jQuery UI library, we currently seem to use only dialog in txp core. This is an attempt to replace it with a minimal vanilla JS.

Draggable Dialog is based on HTML Drag and Drop API on supporting devices. A polyfill should mimic it on touch screens.

Movable Dialog (closed on load) is implemented as HTMLDialogElement extension and does (will?) not work in Safari.

Movable dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper vitae sem sit amet auctor. Cras vel tempus velit. Mauris vel consectetur orci. Donec ullamcorper gravida lacus ut vehicula. Duis porttitor libero laoreet libero lobortis, vel fringilla sem mattis. Sed congue libero dui, at ultrices libero vehicula ac. Phasellus blandit felis at suscipit vestibulum. Pellentesque tempor tempor vestibulum. Nulla pharetra eget augue non placerat.

Curabitur vitae leo tempus dolor blandit blandit. Etiam eget urna id dolor blandit ornare. Aliquam rutrum posuere faucibus. In at sagittis velit, sit amet elementum quam. Nullam ac libero nisl. Nunc ut dapibus est, non fringilla velit. Ut tincidunt mi eu rutrum hendrerit. Nam ornare nibh a sagittis molestie. Nam tristique at justo in semper. Maecenas pellentesque risus scelerisque euismod sollicitudin. Integer interdum urna ac ligula ultricies porttitor. Cras ac posuere arcu. Vivamus vestibulum laoreet orci at venenatis. Cras et posuere quam, sit amet ullamcorper quam. Vestibulum finibus blandit odio. Pellentesque eget blandit tellus.

Draggable dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper vitae sem sit amet auctor. Cras vel tempus velit. Mauris vel consectetur orci. Donec ullamcorper gravida lacus ut vehicula. Duis porttitor libero laoreet libero lobortis, vel fringilla sem mattis. Sed congue libero dui, at ultrices libero vehicula ac. Phasellus blandit felis at suscipit vestibulum. Pellentesque tempor tempor vestibulum. Nulla pharetra eget augue non placerat.

Curabitur vitae leo tempus dolor blandit blandit. Etiam eget urna id dolor blandit ornare. Aliquam rutrum posuere faucibus. In at sagittis velit, sit amet elementum quam. Nullam ac libero nisl. Nunc ut dapibus est, non fringilla velit. Ut tincidunt mi eu rutrum hendrerit. Nam ornare nibh a sagittis molestie. Nam tristique at justo in semper. Maecenas pellentesque risus scelerisque euismod sollicitudin. Integer interdum urna ac ligula ultricies porttitor. Cras ac posuere arcu. Vivamus vestibulum laoreet orci at venenatis. Cras et posuere quam, sit amet ullamcorper quam. Vestibulum finibus blandit odio. Pellentesque eget blandit tellus.

Aliquam iaculis nulla sapien, ac laoreet justo suscipit sit amet. Aenean purus purus, lacinia sed purus vitae, fringilla hendrerit justo. Proin faucibus nunc felis, bibendum congue justo suscipit non. Suspendisse congue odio tortor, nec mollis odio mattis et. In hac habitasse platea dictumst. Nulla lacinia mauris mi, ut maximus nunc tempus ac. Cras a justo nec leo lobortis placerat in vitae magna.

Curabitur lectus nunc, convallis vitae volutpat nec, fermentum sit amet orci. Duis a dolor tincidunt, elementum dolor eu, dapibus leo. Sed sit amet nibh dignissim, vehicula massa a, malesuada turpis. Suspendisse potenti. Nullam mi est, pharetra sed ullamcorper sed, mattis eget eros. Nam lectus elit, dictum ut metus id, porta dictum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel tellus sagittis, rhoncus tellus at, ornare risus. Nulla ultricies neque quis volutpat aliquam. Donec ac libero laoreet, tincidunt elit id, dictum metus. Pellentesque a commodo enim, eget lobortis libero.

Nunc sed faucibus dui. Aenean nec venenatis dolor, vel rutrum nunc. Maecenas porttitor felis non odio posuere faucibus. Aliquam nec magna quis dui posuere elementum. Sed vulputate dictum feugiat. Suspendisse vitae ligula nisl. Nam in turpis at lectus tempor porta. Praesent id blandit lacus, in consequat purus. Proin dignissim nisi quis suscipit pretium. In hac habitasse platea dictumst. Integer sit amet erat metus.