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.
This commit is contained in:
Leonid Nikitin 2023-12-02 01:44:21 +06:00
parent 04eacf66cd
commit 4bac5c10a0
Signed by: kor-elf
GPG Key ID: 604A019EB118CAC4
2 changed files with 64 additions and 63 deletions

View File

@ -6,7 +6,7 @@
<title>Title</title>
</head>
<body>
<div class="captcha-service-kor-elf" data-domain="http://captcha.localhost:9008" data-token=""></div>
<div class="captcha-service-kor-elf" data-domain="" data-static-path="./" data-token=""></div>
<script src="script.js" async></script>
</body>
</html>

View File

@ -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 = `
<form method="post">
<div class="window-captcha__content__body__head"><img src="${ data.image_head.base64 }" width="100%"></div>
<p>Выберите значение в том порядке, на котором на картинке выше:</p>
@ -86,41 +87,41 @@
<button type="button" class="window-captcha__content__body__button">Я не робот!</button>
</form>
`;
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 = `
<span class="pounter__number">${ pointerNumber }</span>
<input type="hidden" class="x" name="pointer[][x]" value="${ Math.round(coordinatorX) }" />
<input type="hidden" class="y" name="pointer[][y]" value="${ Math.round(coordinatorY) }" />
`;
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 = `<div class="window-captcha__content__body__error">Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!</div>`;
});
bodyBlock.querySelector('.window-captcha__content__body__button').addEventListener('click', function () {
checkingCaptcha(bodyBlock, domain, token, shadow);
});
})
.catch(error => {
bodyBlock.innerHTML = `<div class="window-captcha__content__body__error">Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!</div>`;
});
}
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] + '<br>';
.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] + '<br>';
}
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 = `<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="captcha-verified" value="${ data.captcha_key }">`;
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 = `<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="captcha-verified" value="${ data.captcha_key }">`;
shadow.appendChild(captchaVerified);
shadow.querySelector('.window-captcha').remove();
})
.catch(error => {
setError('Произошла ошибка!', button)
}).finally(function () {
loadingSpan.remove();
});
}