참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: 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 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")