tag.html

---
layout: document
title: Tag
permalink: /tag/
public: true
---
<div>
    <ul id="tag-list" class="tag-list"></ul>
</div>

<div id="tag-collection"></div>

<script>
    ;(function() {
        fetch(`/data/tag_count.json`)
            .then(response => response.json())
            .then(function(data) {
                if (data == null) {
                    return;
                }
                const tags = data;

                let template = '';
                for (let i = 0; i < tags.length; i++) {
                    const tag = tags[i];
                    template += `
                    <li class="tag-item">
                        <a href="#${tag.name}" onclick="showTag('${tag.name}')">${tag.name}<sup>${tag.size}</sup></a>
                    </li>`
                }
                document.getElementById('tag-list').innerHTML = template;

                showInitTag();
            })
            .catch(function(error) {
                console.error(error);
            });
    })();

    /*
     * 주어진 태그에 해당하는 모든 문서의 목록을 보여줍니다.
     */
    function showTag(tagName) {
        fetch(`/data/tag/${tagName}.json`)
            .then(response => response.json())
            .then((data) => createLinks(data, tagName))
            .catch(function(error) {
                console.error(error);
            });
    }

    /*
     * 주어진 태그에 해당하는 모든 문서의 링크를 만들어 줍니다.
     */
    function createLinks(data, tagName) {
        if (data == null) {
            return;
        }

        const documents = [];

        let listItems = '';
        for (let i = 0; i < data.length; i++) {
            const idText = getDocumentElementId(tagName, data[i]);
            listItems += `<li id="${idText}" class="post-item"></li>`;
        }
        const template = `
            <h3>${tagName}</h3>
            <ul class="post-list"> ${listItems} </ul>`;

        document.getElementById('tag-collection').innerHTML = template;

        for (let i = 0; i < data.length; i ++) {
            setTimeout(() => insertDocumentLink(data[i], tagName), 0);
        }
    }

    /*
     * 문서 하나의 링크를 생성합니다.
     */
    function insertDocumentLink(documentId, tagName) {
        fetch(`/data/metadata/${documentId}.json`)
            .then(response => response.json())
            .then(function(data) {
                if (data == null) {
                    return;
                }
                const d = data;

                const updatedDate = d.updated.replace(/^(\d{4}-\d{2}-\d{2}).*$/, '$1')
                const summaryText = (d.summary == null || /^\s*$/.test(d.summary))
                    ? ('')
                    : ('-' + d.summary);
                const subDocument = (d.children && d.children.length > 0)
                    ? `- 서브 문서: ${d.children.length} 개`
                    : '';

                const link = `
                <a class="post-link" href="${d.url}">
                    <span>${d.title}</span>
                    <div class="post-meta" style="float: right;" title="${d.updated}">${updatedDate}</div>
                    <div class="post-excerpt">${summaryText}</div>
                    <div class="post-sub-document">${subDocument}</div>
                </a>`;

                const idText = getDocumentElementId(tagName, documentId);
                document.getElementById(idText).innerHTML = link;
            })
            .catch(function(error) {
                console.error(error);
            });
    }

    function getDocumentElementId(tagName, documentId) {
        return `tag-${tagName}-${documentId}`;
    }

    function showInitTag() {
        const url = window.location.href;
        const req = /#([^\s]+)$/.exec(url);
        if(Array.isArray(req)) {
            let tagName = decodeURI(req.pop());
            showTag(tagName);
        }
    }
</script>