[1] 장고(4버전) 관리자 커스텀 - 썸네일 확대

인증 이벤트 페이지의 백엔드를 장고로 구현하였다.(관리자 기능의 편리성때문에)

아래와 같이 썸네일을 클릭하면 크게 볼수 있고 다시 누르면 작아지게 해 달라는 요청이었다.

 

 

settings.py에 가서 아래와 같이 템플릿을 사용할 경로를 지정해 주고

template/admin/base_site.html에 아래와 같이 작성하면 기본 admin html파일에 추가된 태그를 오버라이딩 해 준다.

{% extends "admin/base.html" %}
{% load static %}
{% block extrahead %}
	{{ block.super }}
	// header에 들어갈 메타데이터를 삽입하면 됨
{% endblock %}

 

1. 장고어드민의 데이터는 SSR이 아니라, 템플릿을 불러온후 프론트에서 ajax콜을 한다. 따라서 렌더링 완료후 node를 선택할 수 있도록 아래와 같이 이벤트 리스너의 콜백으로 node를 찾아야 한다.

 

2. 각각의 노드에 대해서 클릭여부에 따라 사이즈를 조절해야 하기 때문에, 각각의 노드에 대한 스위치(불린) 변수가 필요하였다. 클로저를 작성하면 각각의 노드에 대한 개별 handler를 가질수 있다. 리액트에서도 가끔 필요할때가 있기 때문에 아래의 기법은 숙지해 두면 유용하다.

<script type="text/javascript">

    window.addEventListener("DOMContentLoaded", () => {
        const nodes = document.getElementsByClassName('field-image_tag')
        for (const node of nodes) {
            const nodeHandler = new nodeHandlerFactory()
            nodeHandler(node)
        }
    })

    function nodeHandlerFactory() {
        let isDetail = false
        function nodeHandler(node) {
            node.addEventListener('click', () => {
                isDetail = !isDetail
                isDetail
                	? node.firstChild.style.width = "300px" 
                	: node.firstChild.style.width = "100px"
            })
        }
        return nodeHandler
    }

</script>

 

최종 코드

 

{% extends "admin/base.html" %}
{% load static %}
{% block extrahead %}
{{ block.super }}
<script type="text/javascript">

    window.addEventListener("DOMContentLoaded", () => {
        const nodes = document.getElementsByClassName('field-image_tag')
        for (const node of nodes) {
            const nodeHandler = new nodeHandlerFactory()
            nodeHandler(node)
        }
    })

    function nodeHandlerFactory() {
        let isDetail = false
        function nodeHandler(node) {
            node.addEventListener('click', () => {
                isDetail = !isDetail
                isDetail
                	? node.firstChild.style.width = "300px" 
                    	: node.firstChild.style.width = "100px"
            })
        }
        return nodeHandler
    }

</script>
{% endblock %}