catask/templates/index.html

{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% set homeLink = 'active' %}
{% block additionalHeadItems %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/toastify.css') }}">
{% if cfg.antispam.type == 'recaptcha' %}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% elif cfg.antispam.type == 'turnstile' %}
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer></script>
{% elif cfg.antispam.type == 'frc' %}
<script type="module" src="https://cdn.jsdelivr.net/npm/@friendlycaptcha/sdk@0.1.9/site.min.js" async defer></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@friendlycaptcha/sdk@0.1.9/site.compat.min.js" async defer></script>
{% endif %}
{% endblock %}
{% block content %}
<div id="top-response-container"></div>
	{% if cfg.style.homepageLayout == 'catask' %}
		{% include 'snippets/layout/homepage/normal.html' %}
	{% elif cfg.style.homepageLayout == 'retrospring' %}
		{% include 'snippets/layout/homepage/retrospring.html' %}
	{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/toastify.min.js') }}"></script>
<script>
	// fix handling checkboxes
	document.querySelectorAll('.form-check-input').forEach(function(checkbox) {
		checkbox.addEventListener('change', function() {
	        checkbox.nextElementSibling.value = this.checked ? '1' : '0';
	    });
	});
</script>
<script>
	function nativeShare(title, text, url) {
		const shareData = {
			title: title,
			text: text,
			url: url,
		};

		const shareBtns = document.querySelectorAll(".nativeShareBtn");
		shareBtns.forEach((shareBtn) => {
			shareBtn.addEventListener("click", async () => {
				try {
					if (navigator.canShare(shareData)) {
						await navigator.share(shareData);
					}
				}
				catch (err) {
					console.error(err);
				}
			});
		});
	};
</script>
<script>
	const questionModal = document.getElementById('question-modal');
	questionModal.addEventListener('show.bs.modal', event => {
	    // Button that triggered the modal
		let button = event.relatedTarget;
	    // Extract info from data-bs-* attributes
		let questionId = button.getAttribute('data-q-id');
		let questionContent = document.querySelector(`.question-${questionId}`).innerText;
		let answerContent = document.getElementById(`a-${questionId}-content`).innerText;
		let submitBtn = document.getElementById('q-modal-submit');

		// Define the cfg variables
		const trimContentAfter = "{{ cfg.trimContentAfter }}";
		const instanceFullBaseUrl = "{{ cfg.instance.fullBaseUrl }}";

		let questionText = questionContent.length > trimContentAfter ? questionContent.substring(0, trimContentAfter) + '…' : questionContent;
		let answerText = answerContent.length > trimContentAfter ? answerContent.substring(0, trimContentAfter) + '…' : answerContent;
		let questionUrl = `${instanceFullBaseUrl}/q/${questionId}/`;

		let encodedContent = encodeURI(`${questionText} — ${answerText} ${questionUrl}`);
		// Set up the shareOnFediverse function
		submitBtn.addEventListener('click', function() {
			shareOnFediverse(questionId, encodedContent);
		});
	});
    document.addEventListener('DOMContentLoaded', function () {
        const collapseElements = document.querySelectorAll('.collapse.question-cw');
        const toggleButtons = document.querySelectorAll('.cw-btn');
        const cwTexts = document.querySelectorAll('.cw-text');

        collapseElements.forEach(function (collapseElement, index) {
            let toggleButton = toggleButtons[index];
            let cwText = cwTexts[index];
            let buttonText = toggleButton.querySelector('.cw-btn-text');
            let buttonCharsText = toggleButton.querySelector('.cw-btn-chars');

            collapseElement.addEventListener('show.bs.collapse', function () {
                buttonText.textContent = 'Hide content';
                buttonCharsText.classList.add('d-none');
                cwText.classList.remove('text-center');
                cwText.classList.remove('fw-bold');
            });

            collapseElement.addEventListener('hide.bs.collapse', function () {
                buttonText.textContent = 'Show content';
                buttonCharsText.classList.remove('d-none');
                cwText.classList.add('text-center');
                cwText.classList.add('fw-bold');
            });
        });
    });

	function copy(questionId) {
		navigator.clipboard.writeText("{{ cfg.instance.fullBaseUrl }}/q/" + questionId + "/");
		Toastify({
			text: "Successfully copied link to clipboard!",
			duration: 3000,
			gravity: "top",
			position: "right",
			stopOnFocus: true,
			className: `alert alert-success shadow alert-dismissible`,
			close: true
		}).showToast();
	};
	function copyFull(text) {
		navigator.clipboard.writeText(text);
		Toastify({
			text: "Successfully copied text to clipboard!",
			duration: 3000,
			gravity: "top",
			position: "right",
			stopOnFocus: true,
			className: `alert alert-success shadow alert-dismissible`,
			close: true
		}).showToast();
	};

	{% if not cfg.lockInbox %}
	const input = document.getElementById('question');
	const charCount = document.getElementById('charCount');
	function updateCharCount() {
		const maxLength = input.getAttribute('maxlength');
		const currentLength = input.value.length;
		const remaining = maxLength - currentLength;
		charCount.textContent = remaining;
		if (remaining <= 50) {
			charCount.classList.add('text-warning');
		} else {
			charCount.classList.remove('text-warning');
		}
		if (remaining <= 10) {
			charCount.classList.add('text-danger');
			charCount.classList.remove('text-warning');
		} else {
			charCount.classList.remove('text-danger');
		}
	}
	input.addEventListener('input', updateCharCount);
	document.getElementById('question-form').reset();
	{% endif %}

	function shareOnFediverse(questionId, contentToShare) {
		const instanceDomain = document.getElementById(`fediInstance`).value.trim();
		const shareUrl = `https://${instanceDomain}/share?text=${contentToShare}`;

		window.open(shareUrl, '_blank');
	}

	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

	document.addEventListener('htmx:afterRequest', function(event) {
		const jsonResponse = event.detail.xhr.response;
		if (jsonResponse) {
			const parsed = JSON.parse(jsonResponse);
			const alertType = event.detail.successful ? 'success' : 'danger';
			msgType = event.detail.successful ? parsed.message : parsed.error;
			let targetElementId = event.detail.target.id;
			if (targetElementId != "question-count") {
				// WARNING: HACK
				// we use this hack to avoid triggering the event listener twice when making a request to api.returnToInbox and api.(un)pinQuestion
				if (
					(document.getElementById(targetElementId) && event.detail.requestConfig.elt.dataset.deletetarget === "")
					||
					document.getElementById(targetElementId) && event.detail.requestConfig.elt.dataset.deletetarget === ""
					) {
					targetElementId = event.detail.requestConfig.elt.dataset.target;
					document.getElementById(targetElementId).outerHTML = '';
				}
				if (msgType) {
					Toastify({
						text: msgType,
						duration: 3000,
						gravity: "top",
						position: "right",
						stopOnFocus: true,
						className: `alert alert-${alertType} shadow alert-dismissible`,
						close: true
					}).showToast();
				}
				if (event.detail.requestConfig.elt.id == 'question-form') {
					document.getElementById('question-form').reset();
					document.getElementById('charCount').textContent = "{{ cfg.charLimit }}";
				}
			}
		}
	});
</script>
{% endblock %}