참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
"use strict";
{
const arrowArray = document.getElementsByClassName('arrow-dataset');
for (const arrowElement of arrowArray) {
const data = Object.create(arrowElement.dataset);
data.thick = Number(data.thick);
data.pointLength = Number(data.pointLength);
data.pointDeg = Number(data.pointDeg);
const arrowBox = arrowElement.parentElement;
const arrowPoint = arrowElement.nextElementSibling;
const arrowShaft = arrowPoint.nextElementSibling;
arrowPoint.style.borderWidth =
arrowShaft.style.borderWidth = `${data.thick}px`;
arrowPoint.style.position = arrowShaft.style.position = 'absolute';
arrowPoint.style.borderRadius = arrowShaft.style.borderRadius = '100px';
arrowPoint.style.background =
arrowPoint.style.borderColor =
arrowShaft.style.background =
arrowShaft.style.borderColor =
data.color;
arrowPoint.style.transformBox = 'fill-box';
switch (data.direction) {
case 'left':
if (data.pointDirection === 'right') {
arrowBox.style.alignItems = 'flex-end';
}
else {
arrowBox.style.alignItems = 'flex-start';
}
arrowPoint.style.transformOrigin = 'left';
arrowPoint.style.left = "0px";
break;
case 'right':
if (data.pointDirection === 'right') {
arrowBox.style.alignItems = 'flex-start';
}
else {
arrowBox.style.alignItems = 'flex-end';
}
arrowPoint.style.transformOrigin = 'right';
arrowPoint.style.right = "0px";
break;
case 'up':
if (data.pointDirection === 'right') {
arrowBox.style.justifyContent = 'flex-start';
}
else {
arrowBox.style.justifyContent = 'flex-end';
}
arrowPoint.style.transformOrigin = 'top';
arrowPoint.style.top = "0px";
break;
case 'down':
if (data.pointDirection === 'right') {
arrowBox.style.justifyContent = 'flex-end';
}
else {
arrowBox.style.justifyContent = 'flex-start';
}
arrowPoint.style.transformOrigin = 'bottom';
arrowPoint.style.bottom = "0px";
break;
default:
break;
}
switch (data.direction) {
case 'left':
case 'right':
arrowPoint.style.height = "0px";
arrowPoint.style.width = `${data.pointLength}px`;
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` : "";
arrowShaft.style.left = arrowShaft.style.right = "0px";
break;
case 'up':
case 'down':
arrowPoint.style.width = "0px";
arrowPoint.style.height = `${data.pointLength}px`;
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`;
arrowShaft.style.top = arrowShaft.style.bottom = "0px";
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.style.alignItems = 'center';
arrowBox.style.justifyContent = 'center';
arrowBox.appendChild(arrowPoint2);
break;
}
}
}
}