큰숲백과

미디어위키:Responsive-arrow.js: 두 판 사이의 차이

메시지 토론

미디어위키:Responsive-arrow.js (원본 보기)

2025년 8월 7일 (목) 15:11 판

164 바이트 추가됨 ,  2025년 8월 7일 (목)
완성
편집 요약 없음
(완성)
 
(같은 사용자의 중간 판 11개는 보이지 않습니다)
1번째 줄: 1번째 줄:
(function () {
// [[틀:반응형 화살표]]
     var arrowArray = document.getElementsByClassName("arrow-dataset");
{
    for (var i = 0; i < arrowArray.length; i++) {
     document.querySelectorAll('.arrow-dataset').forEach((element) => {
         (function () {
        const arrowBox = element.parentElement;
             var arrowData = arrowArray[i];
        const arrowPoint = element.nextElementSibling;
             var data = Object.create(arrowData.dataset)
        const arrowShaft = arrowPoint.nextElementSibling;
            data.thick = Number(data.thick)
         const errorMsg = (message) => {
            data.pointLength = Number(data.pointLength)
             arrowBox.outerHTML = `<span>${message}</span>`;
            data.deg = Number(data.deg)
             console.log(message, element);
 
        };
             var arrowBox = arrowData.parentElement
        const dataSet = element.dataset;
             var arrowPoint = arrowData.nextElementSibling
        const data = Object.create(dataSet);
             var arrowShaft = arrowPoint.nextElementSibling
        data.length = Number(dataSet.length);
 
        data.thick = Number(dataSet.thick);
             arrowPoint.style['border-width'] = arrowShaft.style['border-width'] = data.thick + "px";
        data.pointLength = Number(dataSet.pointLength);
             arrowPoint.style['position'] = arrowShaft.style['position'] = "absolute"
        data.pointDeg = Number(dataSet.pointDeg);
            arrowPoint.style['borderRadius'] = arrowShaft.style['borderRadius'] = "100px"
        if (Number.isNaN(data.length)) {
            arrowPoint.style['background'] = arrowPoint.style['border-color'] = arrowShaft.style['background'] = arrowShaft.style['border-color'] = data.color;
            errorMsg(`length is not a number`);
             arrowPoint.style['transform-box'] = "fill-box"
             return;
 
        }
            switch (data.direction) {
        if (Number.isNaN(data.thick)) {
                case "left":
            errorMsg(`thick is not a number`);
                     if (data.pointDirection === "right") {
             return;
                        arrowBox.style['align-items'] = "flex-end";
        }
                        arrowPoint.style['transform-origin'] = "left";
        if (Number.isNaN(data.pointLength)) {
                    }
            errorMsg(`pointLength is not a number`);
                    else {
             return;
                        arrowBox.style['align-items'] = "flex-start"
        }
                        arrowPoint.style['transform-origin'] = "left";
        if (Number.isNaN(data.pointDeg)) {
                    }
            errorMsg(`pointDeg is not a number`);
 
             return;
                    arrowPoint.style['left'] = 0
        }
                    break;
        if (!['left', 'right', 'up', 'down'].includes(data.direction)) {
 
            errorMsg(`direction is invalid`);
 
            return;
                 case "right":
        }
                     if (data.pointDirection === "right") {
        if (!['left', 'right', 'both'].includes(data.pointDirection)) {
                        arrowBox.style['align-items'] = "flex-start";
            errorMsg(`pointDirection is invalid`);
                        arrowPoint.style['transform-origin'] = "right";
             return;
                    }
        }
                    else {
        arrowPoint.style.position = arrowShaft.style.position = 'absolute';
                        arrowBox.style['align-items'] = "flex-end"
        arrowPoint.style.borderRadius = arrowShaft.style.borderRadius = '100px';
                        arrowPoint.style['transform-origin'] = "right";
        arrowPoint.style.transformBox = 'fill-box';
                    }
        arrowPoint.style.borderWidth =
                    arrowPoint.style['right'] = 0
            arrowShaft.style.borderWidth = `${data.thick}px`;
 
        if (data.color)
                    break;
             arrowPoint.style.background =
 
                arrowPoint.style.borderColor =
                case "up":
                    arrowShaft.style.background =
                    if (data.pointDirection === "right") {
                        arrowShaft.style.borderColor =
                        arrowBox.style['justify-content'] = "flex-start";
                            data.color;
                     }
        switch (data.direction) {
                     else {
            case 'left':
                        arrowBox.style['justify-content'] = "flex-end"
                arrowBox.style.alignItems =
                    }
                     data.pointDirection === 'right' ? 'flex-end' : 'flex-start';
 
                arrowPoint.style.transformOrigin = 'left';
                    arrowPoint.style['transform-origin'] = "top"
                arrowPoint.style.left = '0px';
                    arrowPoint.style['top'] = 0
                break;
                     break;
            case 'right':
 
                arrowBox.style.alignItems =
                case "down":
                    data.pointDirection === 'right' ? 'flex-start' : 'flex-end';
                     if (data.pointDirection === "right") {
                arrowPoint.style.transformOrigin = 'right';
                        arrowBox.style['justify-content'] = "flex-end";
                arrowPoint.style.right = '0px';
                    }
                break;
                    else {
            case 'up':
                        arrowBox.style['justify-content'] = "flex-start"
                 arrowBox.style.justifyContent =
                    }
                     data.pointDirection === 'right' ? 'flex-start' : 'flex-end';
 
                arrowPoint.style.transformOrigin = 'top';
                    arrowPoint.style['transform-origin'] = "bottom"
                arrowPoint.style.top = '0px';
                    arrowPoint.style['bottom'] = 0
                break;
                    break;
            case 'down':
                 default:
                arrowBox.style.justifyContent =
                    break;
                    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;
             }
             }
 
         }
 
     });
            switch (data.direction) {
}
                case "left":
                case "right":
                    arrowPoint.style['height'] = 0
                    arrowPoint.style['width'] = data.pointLength + "px"
                    arrowBox.style['min-height'] = (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" : null;
                    arrowShaft.style['left'] = arrowShaft.style['right'] = 0;
                    break;
 
                case "up":
                case "down":
                    arrowPoint.style['width'] = 0
                    arrowPoint.style['height'] = data.pointLength + "px"
                    arrowBox.style['min-width'] = (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";
                    arrowShaft.style['top'] = arrowShaft.style['bottom'] = 0;
                    break;
            }
 
            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)
                    arrowPoint2.style['rotate'] = - (data.deg) + "deg";
 
                    arrowBox.style['align-items'] = "center"
                    arrowBox.style['justify-content'] = "center"
 
                    arrowBox.appendChild(arrowPoint2)
 
                    break;
            }
 
 
         })()
     }
})();
Cerulean
관리자

편집

4,193

번

원본 주소 "https://bigforest.a2hosted.com/wiki/특수:모바일차이/88953...89491"