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') }}">
{% endblock %}
{% block content %}
<div class="row">
	<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 %}
</div>
{% 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 {
					await navigator.share(shareData);
				}
				catch (err) {
					console.error(err);
				}
			});
		});
	};
</script>
<script>
    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();
	}

	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);
	function shareOnFediverse(questionId, contentToShare) {
		const instanceDomain = document.getElementById(`fediInstance-${questionId}`).value.trim();
		const shareUrl = `https://${instanceDomain}/share?text=${contentToShare}`;

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

</script>
<script>
	document.getElementById('question-form').reset();

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

	document.addEventListener('htmx:beforeRequest', function(event) {
		if (event.detail.target.id != "question-count") {
			document.getElementById('ask-btn').setAttribute('disabled', true);
		}
	});

	document.addEventListener('htmx:afterRequest', function(event) {
		if (event.detail.target.id != "question-count") {
			document.getElementById('ask-btn').removeAttribute('disabled');
		}
		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 %}