참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
// [[틀:반응형 화살표]]
{
document.querySelectorAll('.arrow-dataset').forEach((element) => {
const error = (isError, message) => {
if (isError) {
element.innerHTML = message;
throw new Error(message);
}
};
const dataSet = element.dataset;
const data = Object.create(dataSet);
data.length = Number(dataSet.length);
error(Number.isNaN(data.length), `length is not a number`);
data.thick = Number(dataSet.thick);
error(Number.isNaN(data.thick), `thick is not a number`);
data.pointLength = Number(dataSet.pointLength);
error(Number.isNaN(data.pointLength), `pointLength is not a number`);
data.pointDeg = Number(dataSet.pointDeg);
error(Number.isNaN(data.pointDeg), `pointDeg is not a number`);
error(!['left', 'right', 'up', 'down'].includes(data.direction), `direction is invalid`);
error(!['left', 'right', 'both'].includes(data.direction), `pointDirection is invalid`);
const arrowBox = element.parentElement;
const arrowPoint = element.nextElementSibling;
const arrowShaft = arrowPoint.nextElementSibling;
arrowPoint.style.position = arrowShaft.style.position = 'absolute';
arrowPoint.style.borderRadius = arrowShaft.style.borderRadius = '100px';
arrowPoint.style.transformBox = 'fill-box';
arrowPoint.style.borderWidth =
arrowShaft.style.borderWidth = `${data.thick}px`;
if (data.color)
arrowPoint.style.background =
arrowPoint.style.borderColor =
arrowShaft.style.background =
arrowShaft.style.borderColor =
data.color;
switch (data.direction) {
case 'left':
arrowBox.style.alignItems =
data.pointDirection === 'right' ? 'flex-end' : 'flex-start';
arrowPoint.style.transformOrigin = 'left';
arrowPoint.style.left = '0px';
break;
case 'right':
arrowBox.style.alignItems =
data.pointDirection === 'right' ? 'flex-start' : 'flex-end';
arrowPoint.style.transformOrigin = 'right';
arrowPoint.style.right = '0px';
break;
case 'up':
arrowBox.style.justifyContent =
data.pointDirection === 'right' ? 'flex-start' : 'flex-end';
arrowPoint.style.transformOrigin = 'top';
arrowPoint.style.top = '0px';
break;
case 'down':
arrowBox.style.justifyContent =
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;
}
}
});
}