Как перегнать jQuery в Javascript?

Question

[Александр Осадчий]

Здравствуйте!

Есть небольшой jQuery сприт, есть ли какой-то онлайн сервис для перегона его в чистый Javascript?

За ранее - спасибо большое!

jQuery('.how_it_works').each(function() {
    function Line(){

        const wrap = $('.how_it_works .block_line');

        const item1 = wrap.find('.item').eq(0),
            num1 = item1.find('.num'),
            num1X = num1.offset().left + num1.width() / 2,
            num1Y = num1.offset().top + num1.height() / 2;

        const item2 = wrap.find('.item').eq(1),
            num2 = item2.find('.num'),
            num2X = num2.offset().left + num2.width() / 2,
            num2Y = num2.offset().top + num2.height() / 2;

        const item3 = wrap.find('.item').eq(2),
            num3 = item3.find('.num'),
            num3X = num3.offset().left + num3.width() / 2,
            num3Y = num3.offset().top + num3.height() / 2;

        const item4 = wrap.find('.item').eq(3),
            num4 = item4.find('.num'),
            num4X = num4.offset().left + num4.width() / 2,
            num4Y = num4.offset().top + num4.height() / 2;

        const item5 = wrap.find('.item').eq(4),
            num5 = item5.find('.num'),
            num5X = num5.offset().left + num5.width() / 2,
            num5Y = num5.offset().top + num5.height() / 2;

        const svgLine = $('#svg-line');
        svgLine.offset({top: 0, left:0});

        const line12 = svgLine.find('.line-1-2'),
            line23 = svgLine.find('.line-2-3'),
            line34 = svgLine.find('.line-3-4'),
            line45 = svgLine.find('.line-4-5');

        line12.attr({'x1': num1X, 'y1': num1Y, 'x2': num2X, 'y2': num2Y});
        line23.attr({'x1': num2X, 'y1': num2Y, 'x2': num3X, 'y2': num3Y});
        line34.attr({'x1': num3X, 'y1': num3Y, 'x2': num4X, 'y2': num4Y});
        line45.attr({'x1': num4X, 'y1': num4Y, 'x2': num5X, 'y2': num5Y});

    }
    Line();
    $(window).on('load resize', function () {
        Line();
    });
});

Comments

[Вадим]

https://github.com/jackocnr/intl-tel-input/wiki/Co...
youmightnotneedjquery.com

Про автоматические конвертеры чёт не слышал и не гуглилтся

[Kovalsky]

Вообще насколько я помню где-то в интернетах болтался селективный сборщик jquery, который давал возможность выбрать конкретные модули и методы jquery которые вам нужны, и он вам отдаст лёгкую сборку только с этими методами. Если суть в том чтоб избавиться от jquery, то можно просто объявить переменную jquery/$ и ей присвоить самописный класс упрощённо реализующий все функции jquery которые используются у вас. Это полностью избавит от надобности вручную править скрипты

Answer 1

[Александр]

You might not need jQuery

Как-то так

const wrappers = document.querySelectorAll('.how_it_works');
const svgLine = document.querySelector('#svg-line');
const line12 = svgLine.querySelector('.line-1-2');
const line23 = svgLine.querySelector('.line-2-3');
const line34 = svgLine.querySelector('.line-3-4');
const line45 = svgLine.querySelector('.line-4-5');

const setAttributes = (element, attrs) => {
	for (const attr in attrs) {
		element.setAttribute(attr, attrs[attr]);
	}
};

const line = (wrapper) => {
	const wrapperBox = wrapper.getBoundingClientRect();
	const items = wrapper.querySelectorAll('.block_line .item');
	const points = [];

	for (const item of items) {
		const element = item.querySelector('.num');
		const box = element.getBoundingClientRect();

		points.push({
			x: box.left + box.width / 2 - wrapperBox.left,
			y: box.top + box.height / 2 - wrapperBox.top
		});
	}

	svgLine.style.setProperty('top', 0);
	svgLine.style.setProperty('left', 0);

	setAttributes(line12, {
		x1: points[0].x,
		y1: points[0].y,
		x2: points[1].x,
		y2: points[1].y
	});
	setAttributes(line12, {
		x1: points[1].x,
		y1: points[1].y,
		x2: points[2].x,
		y2: points[2].y
	});
	setAttributes(line12, {
		x1: points[2].x,
		y1: points[2].y,
		x2: points[3].x,
		y2: points[3].y
	});
	setAttributes(line12, {
		x1: points[3].x,
		y1: points[3].y,
		x2: points[4].x,
		y2: points[4].y
	});
};

const start = () => {
	for (const wrapper of wrappers) {
		line(wrapper);
	}
};

start();

window.addEventListener('resize', start);

Comments

[Александр Осадчий]

Воу..круто вы это - спасибо!!

но, тут что-то поломано - не знаете, в чем может быть вопрос?

[Александр]

Александр Осадчий, Промахнулся с закрытием цикла. Поправил.

[Александр Осадчий]

Александр, я очень прошу прощения..как не пытаюсь довести до ума - не получается...ваше решение - отлично работает, но что-то не так

Суть данно скрипта - выводить линии по точкам (линия идет с центра круга и до центра след. круга) .. на jQuery - работает точно..и при ресайзе окна не слетает, а тут что-то сбиавет скрипт с толку((



Чуть ресайзнул окно..и улетает уже вверх

[Александр Осадчий]

Если это поресайзить - видно, как линии улетают((

[Александр]

Александр Осадчий, Обновил.

points.push({
-     x: box.left + box.width / 2,
+     x: box.left + box.width / 2 + scrollX,
-     y: box.top + box.height / 2
+     y: box.top + box.height / 2 + scrollY
    });

[Александр Осадчий]

Александр, У меня какая-то мистика происходит..оно все равно не стыкуется((

Если секция не вверху страницы - снова смещение

Вы уже простите, что я замучил вас..никак не получается(

[Александр]

Александр Осадчий, Тогда так:

+ const wrapperBox = wrapper.getBoundingClientRect();
const items = wrapper.querySelectorAll('.block_line .item');
const points = [];

for (const item of items) {
  const element = item.querySelector('.num');
  const box = element.getBoundingClientRect();

  points.push({
-    x: box.left + box.width / 2 + scrollX,
-    y: box.top + box.height / 2 + scrollY
+    x: box.left + box.width / 2 - wrapperBox.left,
+    y: box.top + box.height / 2 - wrapperBox.top
  });
}

[Александр Осадчий]

Александр, вооу..круто!!!

Спасибо вам огромное!!!