From 4bac5c10a0e0fc21258a2748a6721c8a5f898d68 Mon Sep 17 00:00:00 2001 From: Leonid Nikitin Date: Sat, 2 Dec 2023 01:44:21 +0600 Subject: [PATCH] Adjust style.css path. Adjusted the path to style.css to be dynamically set using 'data-static-path' attribute. This change allows stylesheets to be fetched from the correct path based on the consumed API. --- exmplate/index.html | 2 +- exmplate/script.js | 125 ++++++++++++++++++++++---------------------- 2 files changed, 64 insertions(+), 63 deletions(-) diff --git a/exmplate/index.html b/exmplate/index.html index b1ca1fa..0ebbb77 100644 --- a/exmplate/index.html +++ b/exmplate/index.html @@ -6,7 +6,7 @@ Title -
+
\ No newline at end of file diff --git a/exmplate/script.js b/exmplate/script.js index 8881d22..2052e71 100644 --- a/exmplate/script.js +++ b/exmplate/script.js @@ -6,12 +6,13 @@ const style = document.createElement('link'); const domain = element.getAttribute('data-domain'); const token = element.getAttribute('data-token'); + const staticPath = element.getAttribute('data-static-path'); let windowCaptcha = null; style.rel = 'stylesheet'; style.type = 'text/css'; - style.href = 'style.css'; + style.href = staticPath + '/style.css'; shadow.appendChild(style); button.textContent = 'Я не робот!'; @@ -44,7 +45,7 @@ }); windowCaptcha.querySelector('button.window-captcha__close').addEventListener('click', function () { - actionClose(windowCaptcha); + actionClose(windowCaptcha); }); windowCaptcha.querySelector('button.window-captcha__reload').addEventListener('click', function () { @@ -73,11 +74,11 @@ 'public-token': token } }) - .then(response => response.json()) - .then(function (data) { - let originalWidth = data.image_body.width; - let originalHeight = data.image_body.height; - bodyBlock.innerHTML = ` + .then(response => response.json()) + .then(function (data) { + let originalWidth = data.image_body.width; + let originalHeight = data.image_body.height; + bodyBlock.innerHTML = `

Выберите значение в том порядке, на котором на картинке выше:

@@ -86,41 +87,41 @@
`; - let blockCoordinator = bodyBlock.querySelector('div.window-captcha__content__body__coordinator'); - let blockCoordinatorImg = blockCoordinator.querySelector('img'); - blockCoordinatorImg.addEventListener('click', function (event) { - let pointer = document.createElement('div'); - pointer.style.left = ( event.offsetX / blockCoordinatorImg.width * 100 ) + '%'; - pointer.style.top = ( event.offsetY / blockCoordinatorImg.height * 100 ) + '%'; - pointer.classList.add('pointer'); + let blockCoordinator = bodyBlock.querySelector('div.window-captcha__content__body__coordinator'); + let blockCoordinatorImg = blockCoordinator.querySelector('img'); + blockCoordinatorImg.addEventListener('click', function (event) { + let pointer = document.createElement('div'); + pointer.style.left = ( event.offsetX / blockCoordinatorImg.width * 100 ) + '%'; + pointer.style.top = ( event.offsetY / blockCoordinatorImg.height * 100 ) + '%'; + pointer.classList.add('pointer'); - let coordinatorX = event.offsetX * (originalWidth / blockCoordinatorImg.width) - let coordinatorY = event.offsetY * (originalHeight / blockCoordinatorImg.height) + let coordinatorX = event.offsetX * (originalWidth / blockCoordinatorImg.width) + let coordinatorY = event.offsetY * (originalHeight / blockCoordinatorImg.height) - let pointerNumber = blockCoordinator.querySelectorAll('.pointer').length + 1 - pointer.innerHTML = ` + let pointerNumber = blockCoordinator.querySelectorAll('.pointer').length + 1 + pointer.innerHTML = ` ${ pointerNumber } `; - pointer.addEventListener('click', function () { - pointer.remove(); - blockCoordinator.querySelectorAll('.pointer').forEach(function (elementPointer, pointIndex) { - elementPointer.querySelector('span.pounter__number').textContent = pointIndex + 1; + pointer.addEventListener('click', function () { + pointer.remove(); + blockCoordinator.querySelectorAll('.pointer').forEach(function (elementPointer, pointIndex) { + elementPointer.querySelector('span.pounter__number').textContent = pointIndex + 1; + }); }); + + blockCoordinator.appendChild(pointer); }); - blockCoordinator.appendChild(pointer); + bodyBlock.querySelector('.window-captcha__content__body__button').addEventListener('click', function () { + checkingCaptcha(bodyBlock, domain, token, shadow); + }); + }) + .catch(error => { + bodyBlock.innerHTML = `
Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!
`; }); - - bodyBlock.querySelector('.window-captcha__content__body__button').addEventListener('click', function () { - checkingCaptcha(bodyBlock, domain, token, shadow); - }); - }) - .catch(error => { - bodyBlock.innerHTML = `
Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!
`; - }); } function checkingCaptcha (bodyBlock, domain, token, shadow) { @@ -152,38 +153,38 @@ }, body: JSON.stringify(data) }) - .then(response => { - if (response.status === 429) { - setError('Вы превысили количество попыток. Обновите каптчу.', button); - return - } - return response.json(); - }) - .then(function (data) { - if (typeof data.errors !== 'undefined') { - let errorMessage = ''; - for (let key in data.errors) { - errorMessage += data.errors[key] + '
'; + .then(response => { + if (response.status === 429) { + setError('Вы превысили количество попыток. Обновите каптчу.', button); + return } - if (errorMessage === '') { - errorMessage = data.message; + return response.json(); + }) + .then(function (data) { + if (typeof data.errors !== 'undefined') { + let errorMessage = ''; + for (let key in data.errors) { + errorMessage += data.errors[key] + '
'; + } + if (errorMessage === '') { + errorMessage = data.message; + } + setError(errorMessage, button); + return } - setError(errorMessage, button); - return - } - if (typeof data.captcha_key === 'undefined') { - setError('Произошла ошибка!', button); - return - } - shadow.querySelector('button.button-open-window-captcha').remove(); - let captchaVerified = document.createElement('div'); - captchaVerified.innerHTML = `Ура!!! Проверку прошли!`; - shadow.appendChild(captchaVerified); - shadow.querySelector('.window-captcha').remove(); - }) - .catch(error => { - setError('Произошла ошибка!', button) - }).finally(function () { + if (typeof data.captcha_key === 'undefined') { + setError('Произошла ошибка!', button); + return + } + shadow.querySelector('button.button-open-window-captcha').remove(); + let captchaVerified = document.createElement('div'); + captchaVerified.innerHTML = `Ура!!! Проверку прошли!`; + shadow.appendChild(captchaVerified); + shadow.querySelector('.window-captcha').remove(); + }) + .catch(error => { + setError('Произошла ошибка!', button) + }).finally(function () { loadingSpan.remove(); }); } @@ -199,4 +200,4 @@ }, 3000); } -})(document); \ No newline at end of file +})(document);