미디어위키:Responsive-arrow.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
오페라: Ctrl-F5를 입력.

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 arrow = arrowData.parentElement;

            var arrowPoint = arrowData.nextElementSibling

            var arrowShaft = arrowPoint.nextElementSibling

            arrowPoint.style['width'] = data.pointLength + "px"
            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

            switch (data.direction) {
                case "left":
                    arrow.style['align-items'] = data.pointDirection === "right" ? "flex-end" : "flex-start"
                    arrowPoint.style['transform-origin'] = data.thick + "px 50%";
                    arrowPoint.style['left'] = 0
                    break;


                case "right":
                    arrow.style['align-items'] = data.pointDirection === "right" ? "flex-start" : "flex-end"
                    arrowPoint.style['transform-origin'] = (data.pointLength + data.thick) + "px 50%";
                    arrowPoint.style['right'] = 0
                    break;

                case "up":
                    arrow.style['justify-content'] = data.pointDirection === "right" ? "flex-start" : "flex-end"
                    arrowPoint.style['transform-origin'] = (data.pointDirection === "left" ?
                        data.pointLength + data.thick : data.thick) + "px 50%";
                    arrowPoint.style['top'] = 0
                    break;

                case "down":
                    arrow.style['justify-content'] = data.pointDirection === "right" ? "flex-end" : "flex-start"
                    arrowPoint.style['transform-origin'] = (data.pointDirection === "right" ?
                        data.pointLength + data.thick : data.thick) + "px 50%";
                    arrowPoint.style['bottom'] = 0
                    break;
                default:
                    break;
            }

            switch (data.direction) {
                case "left":
                case "right":
                    arrow.style['min-height'] =
                        (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) + data.thick) + "px"
                    arrow.style['width'] = data.length ? data.length + "px" : null;
                    arrowShaft.style['left'] = arrowShaft.style['right'] = 0;
                    arrowShaft.style['border-width'] = data.thick + "px"
                    arrowPoint.style['rotate'] = (data.pointDirection === "left" ?
                        data.deg : - data.deg) + "deg"
                    break;

                case "up":
                case "down":
                    arrow.style['min-width'] =
                        (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) + data.thick) + "px"
                    arrow.style['height'] = (data.length || 100) + "px";
                    arrowShaft.style['border-width'] = data.thick + "px";
                    arrowShaft.style['top'] = arrowShaft.style['bottom'] = 0;
                    arrowPoint.style['rotate'] = (data.pointDirection === "left" ?
                        - 90 + data.deg : 90 - data.deg) + "deg"

                    break;

                default:
                    break;
            }


        })()
    }
})();

console.timeEnd("arrow-test")