[임시] 공감버튼 오류

티스토리에서 공감 버튼 관련한 코드를 변경해서 공감 버튼의 모양이 기존과 다르게 나타나는 현상이 발생하고 있습니다

롤백이 되거나 업데이트가 끝난 게 아닐 수도 있어서 기다려본 후 코드 업데이트를 하려고 합니다만 

레이아웃이 깨져 보이는 스킨도 있기도 하고... 임시로 관련 코드를 안내해 드리니 참고해주세요

 

어떤 스킨이든 기본적으로 로직은 비슷할 텐데

apricotskin(스킨번호).js 파일을 열고, 

function handlePostBtn() 함수를 찾아서 교체해주시면 됩니다.

 

// 스킨 2
function handlePostBtn() {
	const containerPostBtns = document.querySelectorAll(".container_postbtn");

	containerPostBtns.forEach((containerPostBtn) => {
		const closestElement = containerPostBtn.closest(".article, .notice");
		if (!closestElement) return;

		const elements = postBtnElements(closestElement);

		// if (!isValidElement(elements)) return;
		setTimeout(() => {
			moveContainerPostBtn(closestElement, containerPostBtn);
			startObserving(closestElement);
			setPostBtn(closestElement);
		}, 500);
	});
}


// 스킨 3
function handlePostBtn() {
	const containerPostBtns = document.querySelectorAll(".container_postbtn");

	containerPostBtns.forEach((containerPostBtn) => {
		const closestElement = containerPostBtn.closest(".article, .notice");
		if (!closestElement) return;

		const elements = postBtnElements(closestElement);

		// if (!isValidElement(elements)) return;

		setTimeout(() => {
			moveContainerPostBtn(closestElement, containerPostBtn);
			startPostBtnObserving(closestElement);
			setPostBtn(closestElement);
		}, 500);
	});
}


// 스킨 4
function handlePostBtn() {
	const containerPostBtns = document.querySelectorAll(".container_postbtn");

	containerPostBtns.forEach((containerPostBtn) => {
		const closestElement = containerPostBtn.closest(".article, .notice");
		if (!closestElement) return;

		const elements = postBtnElements(closestElement);

		// if (!isValidElement(elements)) return;

		setTimeout(() => {
			moveContainerPostBtn(closestElement, containerPostBtn);
			startPostBtnObserving(closestElement);
			setPostBtn(closestElement);
		}, 1000);
	});
}


// 스킨 6
function handlePostBtn() {
	const containerPostBtns = document.querySelectorAll(".container_postbtn");

	containerPostBtns.forEach((containerPostBtn) => {
		const closestElement = containerPostBtn.closest(".article, .notice");
		if (!closestElement) return;

		// const elements = getPostBtnElements(closestElement);
		// if (!isValidLikeElement(elements)) return;

		setTimeout(() => {
			moveContainerPostBtn(closestElement, containerPostBtn);
			startPostBtnObserving(closestElement);
			setPostBtn(closestElement);
		}, 500);
	});
}


// 스킨 7
function handlePostBtn() {
	const containerPostBtns = document.querySelectorAll(".container_postbtn");

	containerPostBtns.forEach((containerPostBtn) => {
		const closestElement = containerPostBtn.closest(".article, .notice");
		if (!closestElement) return;

		// const elements = getPostBtnElements(closestElement);
		// if (!isValidLikeElement(elements)) return;

		setTimeout(() => {
			moveContainerPostBtn(closestElement, containerPostBtn);
			startPostBtnObserving(closestElement);
			setPostBtn(closestElement);
		}, 500);
	});
}

 

// 스킨 5

function updateLikeCount(selector) {
	const elements = getPostBtnElements(selector);
	if (elements.likeCount) {
		if (elements.likeCount.textContent.trim() === elements.likeInitMsg) {
			elements.likeCount.textContent = "0";
		}
		elements.likeCount.classList.add("like-count");
	}
}


function startPostBtnObserving(selector) {
	const config = { childList: true, subtree: true, characterData: true };
	const postObserver = new MutationObserver((mutationsList, observer) => {
		let shouldCreateLikeIcon = false;

		mutationsList.forEach((mutation) => {
			if (mutation.type === "childList" || mutation.type === "characterData") {
				updateLikeCount(selector);
				moveSupportIcon(selector);
				shouldCreateLikeIcon = true;
			}
		});

		if (shouldCreateLikeIcon) {
			observer.disconnect(); 
			createLikeIcon(selector);
			observer.observe(selector, config);
		}
	});

	postObserver.observe(selector, config);
}


function createLikeIcon(selector) {
	const el = getPostBtnElements(selector);
	const likeIcon = document.createElement("span");
	likeIcon.classList.add("like-iconbox");
	likeIcon.appendChild(el.likeIconElement?.cloneNode(true));
	el.likeIconElement?.parentNode?.replaceChild(likeIcon, el.likeIconElement);
	el.likeBtnDiv?.insertAdjacentElement("afterbegin", likeIcon);
	handleTooltip();
	const likeIconBoxes = selector.querySelectorAll(".like-iconbox");
	likeIconBoxes.forEach(iconBox => {
		if (!iconBox.hasChildNodes()) {
			iconBox.remove();
		}
	});
}

 

스킨 5는 세 개의 함수를 변경해주세요