jschan/gulp/res/js/captcha.js

class CaptchaController {

	constructor() {
		this.captchaFields = [];
		this.refreshing = false;
	}

	init() {
		this.captchaFields = document.getElementsByClassName('captchafield');
		this.refreshing = false;
		for (let captcha of this.captchaFields) {
			this.setupCaptchaField(captcha);
		}
	}

	setupCaptchaField(captcha) {
		if (captcha.form.dataset.captchaPreload == 'true') {
			this.loadCaptcha(captcha);
		} else {
			captcha.placeholder = 'focus to load captcha';
			captcha.addEventListener('focus', () => this.loadCaptcha(captcha), { once: true });
		}
	}

	refreshCaptchas() {
		if (this.refreshing) {
			return null;
		}
		this.refreshing = true;
		document.cookie = 'captchaid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
		const xhr = new XMLHttpRequest();
		xhr.onload = () => {
			for (let captcha of this.captchaFields) {
				const existingImage = captcha.previousSibling.children[0];
				if (existingImage) {
					captcha.previousSibling.children[0].src = xhr.responseURL;
				}
			}
			this.refreshing = false;
		}
		xhr.onerror = () => {
			this.refreshing = false;
		}
		xhr.open('GET', '/captcha', true);
		xhr.send(null);
	}

	addMissingCaptcha() {
		const postSubmitButton = document.getElementById('submitpost');
		const captchaFormSectionHtml = captchaformsection();
		postSubmitButton.insertAdjacentHTML('beforebegin', captchaFormSectionHtml);
		const captchaFormSection = postSubmitButton.previousSibling;
		const captchaField = captchaFormSection.querySelector('.captchafield');
		this.loadCaptcha(captchaField);
	}

	loadCaptcha(field) {
console.log(field)
		const captchaDiv = field.previousSibling;
		const captchaImg = document.createElement('img');
		const refreshDiv = document.createElement('div');
		refreshDiv.classList.add('captcharefresh', 'noselect');
		refreshDiv.addEventListener('click', () => this.refreshCaptchas(), true);
		refreshDiv.textContent = '↻';
		field.placeholder = 'loading';
		captchaImg.src = '/captcha';
		captchaImg.onload = function() {
				field.placeholder = '';
				captchaDiv.appendChild(captchaImg);
				captchaDiv.appendChild(refreshDiv);
				captchaDiv.style.display = '';
		}
	}

}

const captchaController = new CaptchaController();

window.addEventListener('DOMContentLoaded', () => {

	captchaController.init();

});