191016 블로그 제작일지

모바일 전용 업데이트

스와이프 기능을 업데이트했습니다.

아무래도 모바일에선 버튼 터치보단 스와이프가 훨씬 직관적인 것 같더라고요.
저도 본능적으로 슬라이더를 넘기거나 드로워를 열려고 스와이프를 하기도 하고요.

홈 화면에 있는 슬라이더를 스와이프 하면 이전, 다음 슬라이더로 넘어가고, 화면 왼쪽 끝에서 오른쪽, 오른쪽 끝에서 왼쪽으로 스와이프 하면 양측 드로워 - 삼선 메뉴나 프로필 사진 누르면 열리는 것 - 가 열립니다.

홈 화면 업데이트

홈 화면을 갈아엎고자 하는 생각을 항상 품고 살았는데, 이 정도 선에서 일단락 지어야 하지 싶습니다.

화면 최상단에 표시되던 랜덤 사진을 없애고, 인기 글 목록이 들어간 슬라이더를 넣었습니다.
근데 인기 글 기준이 최다 조회 수라, 새로 올라온 글이 치고 올라오기 너무 힘든 환경이 아닌가 싶긴 하네요.

Since

푸터에 블로그 시작일을 기재해두고, 자바스크립트로 몇 년 몇 개월이 지났는지 표시하도록 했습니다.
적고 보니 조만간 9주년이네요. 언제 이렇게까지 됐는지.

toggleSlide 업데이트

이제 하위 카테고리가 하나씩만 열립니다.

[...document.querySelectorAll(".cat-item")].forEach(a => {
    const button = document.createElement("button");
    let children;
    0 !== a.querySelectorAll(".children").length && (
        a.classList.add("hasChildren"),
        a.insertBefore(button, a.querySelector(".children")),
        button.addEventListener("click", () => {
            button.classList.toggle("flip-y"),
            [...document.querySelectorAll(".cat-item.hasChildren")].forEach(x => {
                children = x.querySelector(".children"),
                x !== a && children !== null && children.style.height !== "" && children.style.height !== "0px" && (
                    toggleSlide(children),
                    x.querySelector("button").classList.toggle("flip-y")
                )
            }),
            toggleSlide(a.querySelector(".children"))
        })
    )
})