미디어위키:Responsive-arrow.js

// [[틀:반응형 화살표]]
{
    document.querySelectorAll('.arrow-dataset').forEach((element) => {
        const arrowBox = element.parentElement;
        const arrowPoint = element.nextElementSibling;
        const arrowShaft = arrowPoint.nextElementSibling;
        const errorMsg = (message) => {
            arrowBox.outerHTML = `<span>${message}</span>`;
            console.log(message, element);
        };
        const dataSet = element.dataset;
        const data = Object.create(dataSet);
        data.length = Number(dataSet.length);
        data.thick = Number(dataSet.thick);
        data.pointLength = Number(dataSet.pointLength);
        data.pointDeg = Number(dataSet.pointDeg);
        if (Number.isNaN(data.length)) {
            errorMsg(`length is not a number`);
            return;
        }
        if (Number.isNaN(data.thick)) {
            errorMsg(`thick is not a number`);
            return;
        }
        if (Number.isNaN(data.pointLength)) {
            errorMsg(`pointLength is not a number`);
            return;
        }
        if (Number.isNaN(data.pointDeg)) {
            errorMsg(`pointDeg is not a number`);
            return;
        }
        if (!['left', 'right', 'up', 'down'].includes(data.direction)) {
            errorMsg(`direction is invalid`);
            return;
        }
        if (!['left', 'right', 'both'].includes(data.pointDirection)) {
            errorMsg(`pointDirection is invalid`);
            return;
        }
        arrowPoint.style.position = arrowShaft.style.position = 'absolute';
        arrowPoint.style.borderRadius = arrowShaft.style.borderRadius = '100px';
        arrowPoint.style.transformBox = 'fill-box';
        arrowPoint.style.borderWidth =
            arrowShaft.style.borderWidth = `${data.thick}px`;
        if (data.color)
            arrowPoint.style.background =
                arrowPoint.style.borderColor =
                    arrowShaft.style.background =
                        arrowShaft.style.borderColor =
                            data.color;
        switch (data.direction) {
            case 'left':
                arrowBox.style.alignItems =
                    data.pointDirection === 'right' ? 'flex-end' : 'flex-start';
                arrowPoint.style.transformOrigin = 'left';
                arrowPoint.style.left = '0px';
                break;
            case 'right':
                arrowBox.style.alignItems =
                    data.pointDirection === 'right' ? 'flex-start' : 'flex-end';
                arrowPoint.style.transformOrigin = 'right';
                arrowPoint.style.right = '0px';
                break;
            case 'up':
                arrowBox.style.justifyContent =
                    data.pointDirection === 'right' ? 'flex-start' : 'flex-end';
                arrowPoint.style.transformOrigin = 'top';
                arrowPoint.style.top = '0px';
                break;
            case 'down':
                arrowBox.style.justifyContent =
                    data.pointDirection === 'right' ? 'flex-end' : 'flex-start';
                arrowPoint.style.transformOrigin = 'bottom';
                arrowPoint.style.bottom = '0px';
                break;
            default:
                break;
        }
        switch (data.direction) {
            case 'left':
            case 'right':
                arrowPoint.style.width = `${data.pointLength}px`;
                arrowPoint.style.height = '0px';
                arrowShaft.style.left = arrowShaft.style.right = '0px';
                arrowBox.style.minHeight = `${data.pointLength *
                    Math.sin((data.pointDeg * Math.PI) / 180) *
                    (data.pointDirection === 'both' ? 2 : 1) +
                    data.thick +
                    1}px`;
                arrowBox.style.width = data.length ? `${data.length}px` : '';
                break;
            case 'up':
            case 'down':
                arrowPoint.style.width = '0px';
                arrowPoint.style.height = `${data.pointLength}px`;
                arrowShaft.style.top = arrowShaft.style.bottom = '0px';
                arrowBox.style.minWidth = `${data.pointLength *
                    Math.sin((data.pointDeg * Math.PI) / 180) *
                    (data.pointDirection === 'both' ? 2 : 1) +
                    data.thick +
                    1}px`;
                arrowBox.style.height = `${data.length || 100}px`;
                break;
        }
        switch (data.pointDirection) {
            case 'left':
                arrowPoint.style.rotate = `${data.pointDeg}deg`;
                break;
            case 'right':
                arrowPoint.style.rotate = `${-data.pointDeg}deg`;
                break;
            case 'both': {
                arrowPoint.style.rotate = `${data.pointDeg}deg`;
                const arrowPoint2 = arrowPoint.cloneNode(true);
                arrowPoint2.style.rotate = `${-data.pointDeg}deg`;
                arrowBox.appendChild(arrowPoint2);
                arrowBox.style.alignItems = 'center';
                arrowBox.style.justifyContent = 'center';
                break;
            }
        }
    });
}