[tmlTitle.js]티스토리 접은글 제목 정하기 : 02

티스토리 접은글 제목 정하기 : 01

 이전 포스트에서 이어 작성하는 글입니다.

tmlTitle.js를 소개합니다.

 해당 기능을 이용할 수 있는 tmlTitle.js 스크립트를 소개합니다. 아래 링크를 클릭해 확인할 수 있습니다.

당신의 글쓰기를 더욱 다채롭게

tmlTitle.js를 소개합니다.

---

Index

• 원인 찾기
• 스크립트 사용법

Script from F.R.I.D.A.Y

---

 이전 포스트 마지막 부분에 버그리포트를 진행했습니다.

 처음만 동작하고 이후엔 제대로 동작하지 않는다고 말이죠. 그래서 문제의 원인을 알아보았습니다.

 

원인 찾기copy^

 접은글의 코드를 보면 대강 아래와 같습니다.

 이중에서 우리는 밑줄 그인 속성에 주목할 필요가 있습니다. 티스토리에서 제공하는 기본 베이스 코드에는 이 속성들이 사용될 테니, 속성의 이름을 검색해보자!라고 생각해 실행에 옮겼습니다.

 

 크롬 개발자 도구(F12)를 이용해 검색에 옮겼더니 다행히 아래와 같이 코드가 발견되었습니다.

base.js 파일이 발견되었음

 그래서 이 코드에서 찾아보았습니다. data-ke-type을.

 발견됐습니다.

 확실하게 접은글에 대한 코드네요. 그런데 이상합니다. 사진을 자세히 보면 함수 이름이 close, open으로 작성된 코드에서 고정된 상수가 발견되었습니다.

밑줄 친 코드 부분. 상수로 되어있음.

 결국, html 코드상에 존재하는 값은 전혀 이용하지 않고 함수에서 사용하는 값을 상수 처리한 것입니다. 왜 이렇게 만들었을까 하는 의문이 들었습니다. 개발 도중 잊어버렸나 하는 생각이 들긴 합니다만..

 

 아무튼, 우리는 버그의 원인을 발견했습니다. 그러니 이를 덮어버릴 코드를 작성해봅니다.

smalltalk - Tistory based JQuery

function($) {
    function close($btn, $parent) {
        $parent.removeClass("open"), $btn.text("더보기")
    }

    function open($btn, $parent) {
        $parent.addClass("open"), $btn.text("접기")
    }

    function init() {
        var $morelessBtn = $('[data-ke-type="moreLess"] .btn-toggle-moreless');
        $morelessBtn.on("click", function(e) {
            e.preventDefault();
            var $this = $(this),
                $parent = $this.parent();
            $parent.hasClass("open") ? close($this, $parent) : open($this, $parent)
        }), close($morelessBtn, $morelessBtn.parent())
    }
    $(function() {
        init()
    })
}

 일단, 코드를 보았을 때, 익명함수(Anonymous Function)를 이용하기 때문에 removeEventListener로 삭제가 안됩니다. 그래서 덮어씌우는 코드를 작성합니다. 제대로 동작할지는 모르겠군요.

smalltalk - Tistory based JQuery

// 프로토타입 코드로, 실제 릴리즈 버전과 코드가 상이합니다.
function moreLessChanger(data) {
    let list = document.querySelectorAll(`[data-ke-type='moreLess']`);

    function close(btn, title) {
        btn.innerText = title;
    }

    for (let i = 0; i < list.length; ++i) {
        let visBtn = list[i].querySelector('a.btn-toggle-moreless');
        let mlTitle = list[i].querySelector('div.moreless-content p');
        if (mlTitle.innerText.substr(0, 2) === '# ') {
            let openTitle = mlTitle.innerText.substr(2);
            list[i].setAttribute("data-text-more", openTitle);
            visBtn.innerText = openTitle;

            if (data.delTitleContent === true) {
                mlTitle.remove();
            }

            visBtn.addEventListener('click', function (e) {
                e.preventDefault();
                if (!list[i].classList.contains('open')) {
                    close(visBtn, openTitle);
                }
            });
        }
    }
}

 티스토리의 베이스 코드를 봐서, 이번 코드도 비슷하게 만들어보자는 의미에서 넣었습니다. 이게 순서가 어떻게 처리되는지 모릅니다. 베이스 코드의 $btn.text('더보기') 코드가 먼저 실행이되면 다행이겠지만 그렇지 않으면 말짱 도루묵이 되어버립니다.

 아무튼 코드는 준비되었고 테스트 해봅니다.

왼쪽부터 펼치기 전, 펼친 후, 펼친후 닫음

 잘 되었습니다! 일단 테스트한 컴퓨터가 한 대 뿐이라 모든 컴퓨터, 브라우저에서 제대로 동작하는지 모르겠지만 일단은 뭐.. ㅎㅎ 잘 되었으니 만족합니다.

---

스크립트 사용법copy^

tmlTitle.js : 티스토리 접은글 타이틀 지정하기