{% extends "admin/change_list.html" %}
{% block extrahead %}
{{ block.super }}
<style type="text/css">
    .dhp-frame {
        position: fixed;
        z-index: 9999999999;
        border: 1px #b0ccea solid;
        border-radius: 4px;
        background: #d0dbe6;
    }

    .dhp-list {
        display: inline-block;
        margin-right: 0;
    }

    .dhp-item {
        cursor: pointer;
        margin: 10px 5px;
    }

    .dhp-item:hover {
        color: #47bac1;
        text-decoration: underline;
    }

    .dhp-item-disable {
        color: #aeaeae;
        margin: 10px 5px;
    }
</style>
<script type="text/javascript" charset="utf-8">
    function dhpItemClick(url) {
        window.open(url, '_blank')
    }

    function getContextMenuPosition(event, contextMenu) {
        var mousePosition = {};
        var menuPosition = {};
        var menuDimension = {};

        menuDimension.x = contextMenu.clientWidth;
        menuDimension.y = contextMenu.clientHeight;
        mousePosition.x = event.clientX;
        mousePosition.y = event.clientY;

        if (mousePosition.x + menuDimension.x > window.innerWidth) {
            menuPosition.x = mousePosition.x - menuDimension.x;
        } else {
            menuPosition.x = mousePosition.x;
        }

        if (mousePosition.y + menuDimension.y > window.innerHeight) {
            menuPosition.y = mousePosition.y - menuDimension.y;
        } else {
            menuPosition.y = mousePosition.y;
        }

        return menuPosition;
    }

    document.addEventListener("DOMContentLoaded", function () {
        var timeFrame = null
        var timeFrame2 = null
        var elFrame = document.querySelector('.dhp-frame')
        elFrame.style.display = 'none'
        document.querySelectorAll("[data-dhp]").forEach(function (elItem) {
            var text = elItem.dataset.dhp
            if (text) {
                var dataList = JSON.parse(text)
                if (dataList.length > 0) {
                    elItem.addEventListener('mouseenter', function (e) {
                        if (!elFrame.style.display)
                            return
                        var divList = []
                        dataList.forEach(function (dataMap) {
                            var dataItems = Object.keys(dataMap)
                            divList.push(`<div class="dhp-list">` + dataItems.map(function (item) {
                                var url = dataMap[item]
                                if (url)
                                    return `<div class="dhp-item" onclick="dhpItemClick('${url}')">` + item + `</div>`
                                else
                                    return `<div class="dhp-item-disable">` + item + `</div>`
                            }).join("") + `</div>`)
                        })
                        elFrame.innerHTML = divList.join("")
                        elFrame.style.display = ''
                        var pos = getContextMenuPosition(e, elFrame)
                        elFrame.style.left = pos.x + 'px'
                        elFrame.style.top = pos.y + 'px'
                    })
                    elItem.addEventListener('mouseleave', function () {
                        if (timeFrame) {
                            clearTimeout(timeFrame)
                            timeFrame = null
                        }
                        timeFrame = setTimeout(function () {
                            elFrame.style.display = 'none'
                            timeFrame = null
                        }, 200)
                    })
                    elItem.addEventListener('mousemove', function () {
                        if (timeFrame2) {
                            clearTimeout(timeFrame2)
                            timeFrame2 = null
                        }
                    })
                }
            }
        })
        elFrame.addEventListener('mouseenter', function () {
            if (timeFrame) {
                clearTimeout(timeFrame)
                timeFrame = null
            }
        })
        elFrame.addEventListener('mouseleave', function () {
            if (timeFrame) {
                clearTimeout(timeFrame)
                timeFrame = null
            }
            if (timeFrame2) {
                clearTimeout(timeFrame2)
                timeFrame2 = null
            }
            timeFrame2 = setTimeout(function () {
                elFrame.style.display = 'none'
            }, 100)
        })
    });
</script>
<div class="dhp-frame"></div>
{% endblock %}
