Refactor messagerie helpers

app/javascript/new_design/messagerie.js

@@ -1,27 +1,17 @@
-import $ from 'jquery';
+import { scrollTo, scrollToBottom } from '@utils';
 
 export function scrollMessagerie() {
-  const $ul = $('.messagerie ul').first();
+  const ul = document.querySelector('.messagerie ul');
 
-  if ($ul.length) {
-    const $elementToScroll = $('.date.highlighted').first();
+  if (ul) {
+    const elementToScroll = document.querySelector('.date.highlighted');
 
-    if ($elementToScroll.length != 0) {
-      scrollTo($ul, $elementToScroll);
+    if (elementToScroll) {
+      scrollTo(ul, elementToScroll);
     } else {
-      scrollToBottom($ul);
+      scrollToBottom(ul);
     }
   }
 }
 
-function scrollTo($container, $scrollTo) {
-  $container.scrollTop(
-    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
-  );
-}
-
-function scrollToBottom($container) {
-  $container.scrollTop($container.prop('scrollHeight'));
-}
-
 addEventListener('turbolinks:load', scrollMessagerie);

app/javascript/shared/utils.js

@@ -37,15 +37,12 @@ export function getJSON(url, data, method = 'get') {
 }
 
 export function scrollTo(container, scrollTo) {
-  $(container).scrollTop(
-    $(scrollTo).offset().top -
-      $(container).offset().top +
-      $(container).scrollTop()
-  );
+  container.scrollTop =
+    offset(scrollTo).top - offset(container).top + container.scrollTop;
 }
 
 export function scrollToBottom(container) {
-  $(container).scrollTop(container.scrollHeight);
+  container.scrollTop = container.scrollHeight;
 }
 
 export function on(selector, eventName, fn) {
@@ -53,3 +50,11 @@ export function on(selector, eventName, fn) {
     element.addEventListener(eventName, event => fn(event, event.detail))
   );
 }
+
+function offset(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    top: rect.top + document.body.scrollTop,
+    left: rect.left + document.body.scrollLeft
+  };
+}