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

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

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

# tmlTitle.js를 소개합니다.

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

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

---

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

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

 

원인 찾기

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

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

 

 크롬 개발자 도구(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로 삭제가 안됩니다. 그래서 덮어씌우는 코드를 작성합니다. 제대로 동작할지는 모르겠군요.

// 프로토타입 코드로, 실제 릴리즈 버전과 코드가 상이합니다.
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('더보기') 코드가 먼저 실행이되면 다행이겠지만 그렇지 않으면 말짱 도루묵이 되어버립니다.

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

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

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

---

스크립트 사용법

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

# index