미디어위키:Responsive-arrow.js

console.time("arrow-test");

(function () {
    var arrowArray = document.getElementsByClassName("arrow-dataset");
    for (var i = 0; i < arrowArray.length; i++) {
        (function () {
            var arrowData = arrowArray[i];
            var data = Object.create(arrowData.dataset)
            data.thick = Number(data.thick)
            data.pointLength = Number(data.pointLength)
            data.deg = Number(data.deg)

            var arrowBox = arrowData.parentElement
            var arrowPoint = arrowData.nextElementSibling
            var arrowShaft = arrowPoint.nextElementSibling

            arrowPoint.style['border-width'] = data.thick + "px";
            arrowPoint.style['position'] = arrowShaft.style['position'] = "absolute"
            arrowPoint.style['borderRadius'] = arrowShaft.style['borderRadius'] = "100px"
            arrowPoint.style['background'] = arrowPoint.style['border-color'] = arrowShaft.style['background'] = arrowShaft.style['border-color'] = data.color;
            arrowPoint.style['transform-box'] = "fill-box"

            switch (data.direction) {
                case "left":
                    if (data.pointDirection === "right") {
                        arrowBox.style['align-items'] = "flex-end";
                        arrowPoint.style['transform-origin'] = "left";
                    }
                    else {
                        arrowBox.style['align-items'] = "flex-start"
                        arrowPoint.style['transform-origin'] = "right";
                    }

                    arrowPoint.style['left'] = 0
                    break;


                case "right":
                    if (data.pointDirection === "right") {
                        arrowBox.style['align-items'] = "flex-start";
                        arrowPoint.style['transform-origin'] = "left";
                    }
                    else {
                        arrowBox.style['align-items'] = "flex-end"
                        arrowPoint.style['transform-origin'] = "right";
                    }
                    arrowPoint.style['right'] = 0

                    break;

                case "up":
                    if (data.pointDirection === "right") {
                        arrowBox.style['justify-content'] = "flex-start";
                    }
                    else {
                        arrowBox.style['justify-content'] = "flex-end"
                    }

                    arrowPoint.style['transform-origin'] = "top"
                    arrowPoint.style['top'] = 0
                    break;

                case "down":
                    if (data.pointDirection === "right") {
                        arrowBox.style['justify-content'] = "flex-end";
                    }
                    else {
                        arrowBox.style['justify-content'] = "flex-start"
                    }

                    arrowPoint.style['transform-origin'] = "bottom"
                    arrowPoint.style['bottom'] = 0
                    break;
                default:
                    break;
            }

            var minBoxSize;
            if (data.pointDirection === "both") {
                minBoxSize = (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) * 2 + data.thick + 1) + "px"
            }
            else {
                minBoxSize = (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) + data.thick + 1) + "px"
            }

            switch (data.direction) {
                case "left":
                case "right":
                    arrowPoint.style['height'] = 0
                    arrowPoint.style['width'] = data.pointLength + "px"
                    arrowBox.style['min-height'] = minBoxSize
                    arrowBox.style['width'] = data.length ? data.length + "px" : null;
                    arrowShaft.style['left'] = arrowShaft.style['right'] = 0;
                    arrowShaft.style['border-width'] = data.thick + "px"
                    break;

                case "up":
                case "down":
                    arrowPoint.style['width'] = 0
                    arrowPoint.style['height'] = data.pointLength + "px"
                    arrowBox.style['min-width'] = minBoxSize
                    arrowBox.style['height'] = (data.length || 100) + "px";
                    arrowShaft.style['border-width'] = data.thick + "px";
                    arrowShaft.style['top'] = arrowShaft.style['bottom'] = 0;
                    break;
            }

            switch (data.direction) {
                case "left":
                    switch (data.pointDirection) {
                        case "left":
                            arrowPoint.style['rotate'] = (data.deg) + "deg";
                            break;


                        case "right":
                            arrowPoint.style['rotate'] = - data.deg + "deg";
                            break;

                        case "both":
                            arrowPoint.style['rotate'] = (data.deg) + "deg";
                            console.log(arrowPoint.style['rotate']);

                            var arrowPoint2 = arrowPoint.cloneNode(true)
                            arrowPoint2.style['rotate'] = - (data.deg) + "deg";
                            arrowPoint2.style['transform-origin'] = "bottom"
                            arrowBox.appendChild(arrowPoint2)
                            console.log(arrowPoint2.style['rotate']);

                            break;
                    }
                    break;

                case "right":
                    switch (data.pointDirection) {
                        case "left":
                            arrowPoint.style['rotate'] = (data.deg) + "deg";
                            break;


                        case "right":
                            arrowPoint.style['rotate'] = -(data.deg) + "deg";
                            break;

                        case "both":
                            arrowPoint.style['rotate'] = (data.deg) + "deg";
                            console.log(arrowPoint.style['rotate']);

                            var arrowPoint2 = arrowPoint.cloneNode(true)
                            arrowPoint2.style['rotate'] = - (data.deg) + "deg";
                            arrowBox.appendChild(arrowPoint2)
                            console.log(arrowPoint2.style['rotate']);

                            break;
                    }
                    break;

                case "up":
                    switch (data.pointDirection) {
                        case "left":
                            arrowPoint.style['rotate'] = data.deg + "deg";
                            break;


                        case "right":
                            arrowPoint.style['rotate'] = - data.deg + "deg";
                            break;

                        case "both":
                            arrowPoint.style['rotate'] = data.deg + "deg";
                            var arrowPoint2 = arrowPoint.cloneNode(true);
                            arrowBox.style['justify-content'] = "center"
                            arrowPoint2.style['rotate'] = - data.deg + "deg";
                            arrowBox.appendChild(arrowPoint2)
                            break;
                    }
                    break;

                case "down":
                    switch (data.pointDirection) {
                        case "left":
                            arrowPoint.style['rotate'] = data.deg + "deg";
                            break;


                        case "right":
                            arrowPoint.style['rotate'] = - data.deg + "deg";
                            break;

                        case "both":
                            arrowPoint.style['rotate'] = data.deg + "deg";
                            var arrowPoint2 = arrowPoint.cloneNode(true);
                            arrowBox.style['justify-content'] = "center"
                            arrowPoint2.style['rotate'] = - data.deg + "deg";
                            arrowBox.appendChild(arrowPoint2)
                            break;
                    }
                    break;
            }
        })()
    }
})();

console.timeEnd("arrow-test")