https://mesatask.github.io/static/js/index.js

1window.HELP_IMPROVE_VIDEOJS = false;
2
3class BeforeAfter {
4	constructor(enteryObject) {
5
6			const beforeAfterContainer = document.querySelector(enteryObject.id);
7			const before = beforeAfterContainer.querySelector('.bal-before');
8			const handle = beforeAfterContainer.querySelector('.bal-handle');
9			var widthChange = 0;
10
11			beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
12			window.onresize = function () {
13					beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
14			}
15			before.setAttribute('style', "width: 50%;");
16			handle.setAttribute('style', "left: 50%;");
17
18			//mouse move event listener
19			beforeAfterContainer.addEventListener('mousemove', (e) => {
20					let containerWidth = beforeAfterContainer.offsetWidth;
21					widthChange = e.offsetX;
22					let newWidth = widthChange * 100 / containerWidth;
23
24					if (e.offsetX > 20 && e.offsetX < beforeAfterContainer.offsetWidth - 20) {
25							before.setAttribute('style', "width:" + newWidth + "%;");
26							handle.setAttribute('style', "left:" + newWidth + "%;");
27					}
28			})
29	}
30}
31
32$(document).ready(function() {
33    // Check for click events on the navbar burger icon
34    var options = {
35			slidesToScroll: 1,
36			slidesToShow: 1,
37			loop: true,
38			infinite: false,
39			autoplay: false,
40			autoplaySpeed: 100000,
41    }
42		// Initialize all div with carousel class
43    var carousels = bulmaCarousel.attach('.carousel', options);
44    bulmaSlider.attach();
45})