jschan/gulp/res/js/quote.js

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

	//change url hash and scroll to the element without affecting css :target selectors
	const scrollWithoutTargeting = (e) => {
		e.preventDefault();
		history.replaceState({}, '', e.target.href);
		document.querySelector(e.target.hash).scrollIntoView();
	}

	const scrollButtons = document.querySelectorAll('.stickynav .nav-item'); // '.stickynav .nav-item,.post-links a'
	for (let i = 0; i < scrollButtons.length; i++) {
		scrollButtons[i].addEventListener('click', scrollWithoutTargeting, false);
	}

	const postForm = document.querySelector('#postform');
	const newPostButton = document.querySelector('a[href="#postform"]');
	const openPostForm = (e) => {
		if (e) {
			e.preventDefault();
		}
		history.replaceState({}, '', '#postform');
		postForm.style.display = 'flex';
		newPostButton.style.visibility = 'hidden';
	};
	const closePostForm = (e) => {
		e.preventDefault();
		history.replaceState({}, '', location.pathname);
		postForm.style.display = 'none';
		newPostButton.style.visibility = 'visible';
	};
	if (postForm) {
		const closeButton = postForm ? postForm.querySelector('.close') : null;
		newPostButton.addEventListener('click', openPostForm, false);
		closeButton.addEventListener('click', closePostForm, false);
	}

	const messageBox = document.getElementById('message');

	const addQuote = function(number) {
		openPostForm();
		messageBox.value += `>>${number}\n`;
		messageBox.scrollTop = messageBox.scrollHeight;
		messageBox.focus();
		messageBox.setSelectionRange(messageBox.value.length, messageBox.value.length);
		messageBox.dispatchEvent(new Event('input'));
	}

	const quote = function(e) {
		e.preventDefault();
		const quoteNum = this.textContent.replace('[Reply]', '').split(' ')[0].trim();
		if (isThread) {
			addQuote(quoteNum);
		} else {
			setLocalStorage('clickedQuote', quoteNum);
			window.location = this.firstChild.href.replace(/#postform$/, '#'+quoteNum);
		}
	};

	//on loading page after clicking quote
	if (isThread) {
		const quoteNum = localStorage.getItem('clickedQuote');
		if (quoteNum != null) {
			addQuote(quoteNum);
			//scroll to the post you quoted
			const quotingPost = document.getElementById(quoteNum);
			if (quotingPost) {
				quotingPost.scrollIntoView();
			}
		}
		localStorage.removeItem('clickedQuote');
	}

	const addQuoteListeners = (l) => {
		for (let i = 0; i < l.length; i++) {
			l[i].addEventListener('click', quote, false);
		}
	};

	const links = document.getElementsByClassName('post-quoters');
	addQuoteListeners(links);

	window.addEventListener('addPost', function(e) {
		if (e.detail.hover) {
			return; //dont need to handle hovered posts for this
		}
		const post = e.detail.post;
		const newlinks = post.getElementsByClassName('post-quoters');
		addQuoteListeners(newlinks);
	});

});