Replace jQuery to Vanilla JS

postyou · Dec 14, 2023 · 1e92ebf · 1e92ebf
1 parent dc69e1b
commit 1e92ebf
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 60 deletions.
diff --git a/assets/js/comparison_slider.js b/assets/js/comparison_slider.js
@@ -1,63 +1,81 @@
-(function ($) {
-    var comparisonSliderWidth;
-    var comparisonSliderRatio;
-    var comparisonSliderClicked;
-
-    function initComparisonSlider() {
-        var comparisonSliderClicked = false;
-
-        if ($('.ce_comparison-slider ').length > 0) {
-            $('.ce_comparison-slider ').each(function () {
-                if ($(this).parents().hasClass('vbox-content')) {
-                    comparisonSliderWidth = $(this).parents('.vbox-content').width();
-                } else {
-                    comparisonSliderWidth = $(this).width();
-                }
-
-                comparisonSliderRatio =
-                    $(this).find('img').get(0).naturalHeight / $(this).find('img').get(0).naturalWidth;
-
-                $(this).css('height', comparisonSliderWidth * comparisonSliderRatio);
-                $(this).find('.image_container:first-child').css('width', '');
-                $(this).find('.image_container:first-child').css('max-width', comparisonSliderWidth);
-                $(this).find('.image_container:last-child').css('width', '');
-                $(this).find('.drag-button').remove();
-                $(this).find('.image_container:first-child').append('<div class="drag-button"></div>');
-
-                $(this)
-                    .find('.comparison-slider-text')
-                    .css('width', comparisonSliderWidth / 2);
-            });
-
-            $('.ce_comparison-slider  .drag-button').tapstart(function () {
-                comparisonSliderClicked = true;
-                $(this).addClass('dragged');
-            });
-
-            $('.ce_comparison-slider ').tapend(function () {
-                comparisonSliderClicked = false;
-                $(this).find('.drag-button').removeClass('dragged');
-            });
-
-            $('.ce_comparison-slider ').tapmove(function (e, touch) {
-                if (comparisonSliderClicked === false) {
-                    return;
-                }
-
-                $(this).find('.image_container:first-child').css('width', touch.offset.x);
-
-                $(this)
-                    .find('.image_container:last-child')
-                    .css('width', parseInt(comparisonSliderWidth) - touch.offset.x);
-            });
+// ts-check
+function initComparisonSliders() {
+    let comparisonSliders = document.querySelectorAll('.ce_comparison-slider');
+
+    function buildSlider(slider) {
+        let comparisonSliderWidth;
+        let comparisonSliderRatio;
+        let comparisonSliderClicked = false;
+
+        let firstImage = slider.querySelector('.image_container:first-child');
+        let secondImage = slider.querySelector('.image_container:last-child');
+        let dragButton = document.createElement('div');
+        dragButton.classList.add('drag-button');
+        slider.querySelector('.image_container:first-child').appendChild(dragButton);
+
+        let vbox = slider.closest('.vbox-content');
+
+        if (vbox) {
+            comparisonSliderWidth = vbox.getBoundingClientRect().width;
+        } else {
+            comparisonSliderWidth = slider.getBoundingClientRect().width;
+        }
+
+        comparisonSliderRatio =
+            firstImage.querySelector('img').naturalHeight / firstImage.querySelector('img').naturalWidth;
+
+        slider.style.height = comparisonSliderWidth * comparisonSliderRatio + 'px';
+        firstImage.style.width = '';
+        firstImage.style.maxWitdh = comparisonSliderWidth + 'px';
+        secondImage.style.width = '';
+
+        // $(this)
+        //     .find('.comparison-slider-text')
+        //     .style.width = comparisonSliderWidth / 2);
+
+        function enableSliding() {
+            comparisonSliderClicked = true;
+            slider.classList.add('dragged');
         }
+
+        function disableSliding() {
+            comparisonSliderClicked = false;
+            dragButton.classList.remove('dragged');
+        }
+
+        dragButton.addEventListener('mousedown', enableSliding);
+        dragButton.addEventListener('touchstart', enableSliding);
+
+        slider.addEventListener('mouseup', disableSliding);
+        slider.addEventListener('touchend', disableSliding);
+
+        slider.addEventListener('mousemove', function (e) {
+            if (comparisonSliderClicked === false) {
+                return;
+            }
+            const rect = slider.getBoundingClientRect();
+            const offsetX = e.clientX - rect.left;
+            if (offsetX <= 0 || offsetX >= comparisonSliderWidth) return;
+
+            firstImage.style.width = offsetX + 'px';
+            secondImage.style.width = parseInt(comparisonSliderWidth) - offsetX + 'px';
+        });
+
+        slider.addEventListener('touchmove', function (e) {
+            if (comparisonSliderClicked === false) {
+                return;
+            }
+            const rect = slider.getBoundingClientRect();
+            const offsetX = e.touches[0].clientX - rect.left;
+            if (offsetX <= 0 || offsetX >= comparisonSliderWidth) return;
+
+            firstImage.style.width = offsetX + 'px';
+            secondImage.style.width = parseInt(comparisonSliderWidth) - offsetX + 'px';
+        });
     }
 
-    $(window).on('load', function () {
-        initComparisonSlider();
-    });
+    comparisonSliders.forEach((slider) => buildSlider(slider));
+}
 
-    $(window).on('resize', function () {
-        initComparisonSlider();
-    });
-})(jQuery);
+window.addEventListener('DOMContentLoaded', initComparisonSliders);
+window.addEventListener('resize', initComparisonSliders);
diff --git a/elements/ContentComparisonSlider.php b/elements/ContentComparisonSlider.php
@@ -23,7 +23,6 @@ class ContentComparisonSlider extends ContentElement {
     protected $strTemplate = 'ce_comparison_slider';
 
     public function __construct($objModule, $strColumn = 'main') {
-        $GLOBALS['TL_JAVASCRIPT']['jqueryMobileEvents'] = 'system/modules/contao-comparison-slider/assets/js/jquery.mobile-events.min.js';
         $GLOBALS['TL_CSS']['comparisonSlider'] = 'system/modules/contao-comparison-slider/assets/css/comparison_slider.css';
         $GLOBALS['TL_JAVASCRIPT']['comparisonSlider'] = 'system/modules/contao-comparison-slider/assets/js/comparison_slider.js';
         parent::__construct($objModule, $strColumn);