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:
parent
04eacf66cd
commit
4bac5c10a0
GPG Key ID:
604A019EB118CAC4
@ -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>
|
||||
@ -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();
|
||||
});
|
||||
}
|
||||
@ -199,4 +200,4 @@
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
})(document);
|
||||
})(document);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user