미디어위키:Responsive-arrow.js: 두 판 사이의 차이
편집 요약 없음 |
(테스트) |
||
| 1번째 줄: | 1번째 줄: | ||
console.time("arrow-test"); | // console.time("arrow-test"); | ||
(function () { | // (function () { | ||
var arrowArray = document.getElementsByClassName("arrow-dataset"); | // var arrowArray = document.getElementsByClassName("arrow-dataset"); | ||
for (var i = 0; i < arrowArray.length; i++) { | // for (var i = 0; i < arrowArray.length; i++) { | ||
(function () { | // (function () { | ||
var arrowData = arrowArray[i]; | // var arrowData = arrowArray[i]; | ||
var data = Object.create(arrowData.dataset) | // var data = Object.create(arrowData.dataset) | ||
data.thick = Number(data.thick) | // data.thick = Number(data.thick) | ||
data.pointLength = Number(data.pointLength) | // data.pointLength = Number(data.pointLength) | ||
data.deg = Number(data.deg) | // data.deg = Number(data.deg) | ||
var arrowBox = arrowData.parentElement | // var arrowBox = arrowData.parentElement | ||
var arrowPoint = arrowData.nextElementSibling | // var arrowPoint = arrowData.nextElementSibling | ||
var arrowShaft = arrowPoint.nextElementSibling | // var arrowShaft = arrowPoint.nextElementSibling | ||
arrowPoint.style['border-width'] = data.thick + "px"; | // arrowPoint.style['border-width'] = data.thick + "px"; | ||
arrowPoint.style['position'] = arrowShaft.style['position'] = "absolute" | // arrowPoint.style['position'] = arrowShaft.style['position'] = "absolute" | ||
arrowPoint.style['borderRadius'] = arrowShaft.style['borderRadius'] = "100px" | // 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['background'] = arrowPoint.style['border-color'] = arrowShaft.style['background'] = arrowShaft.style['border-color'] = data.color; | ||
arrowPoint.style['transform-box'] = "fill-box" | // arrowPoint.style['transform-box'] = "fill-box" | ||
switch (data.direction) { | // switch (data.direction) { | ||
case "left": | // case "left": | ||
if (data.pointDirection === "right") { | // if (data.pointDirection === "right") { | ||
arrowBox.style['align-items'] = "flex-end"; | // arrowBox.style['align-items'] = "flex-end"; | ||
arrowPoint.style['transform-origin'] = "left"; | // arrowPoint.style['transform-origin'] = "left"; | ||
} | // } | ||
else { | // else { | ||
arrowBox.style['align-items'] = "flex-start" | // arrowBox.style['align-items'] = "flex-start" | ||
arrowPoint.style['transform-origin'] = "left"; | // arrowPoint.style['transform-origin'] = "left"; | ||
} | // } | ||
arrowPoint.style['left'] = 0 | // arrowPoint.style['left'] = 0 | ||
break; | // break; | ||
case "right": | // case "right": | ||
if (data.pointDirection === "right") { | // if (data.pointDirection === "right") { | ||
arrowBox.style['align-items'] = "flex-start"; | // arrowBox.style['align-items'] = "flex-start"; | ||
arrowPoint.style['transform-origin'] = "right"; | // arrowPoint.style['transform-origin'] = "right"; | ||
} | // } | ||
else { | // else { | ||
arrowBox.style['align-items'] = "flex-end" | // arrowBox.style['align-items'] = "flex-end" | ||
arrowPoint.style['transform-origin'] = "right"; | // arrowPoint.style['transform-origin'] = "right"; | ||
} | // } | ||
arrowPoint.style['right'] = 0 | // arrowPoint.style['right'] = 0 | ||
break; | // break; | ||
case "up": | // case "up": | ||
if (data.pointDirection === "right") { | // if (data.pointDirection === "right") { | ||
arrowBox.style['justify-content'] = "flex-start"; | // arrowBox.style['justify-content'] = "flex-start"; | ||
} | // } | ||
else { | // else { | ||
arrowBox.style['justify-content'] = "flex-end" | // arrowBox.style['justify-content'] = "flex-end" | ||
} | // } | ||
arrowPoint.style['transform-origin'] = "top" | // arrowPoint.style['transform-origin'] = "top" | ||
arrowPoint.style['top'] = 0 | // arrowPoint.style['top'] = 0 | ||
break; | // break; | ||
case "down": | // case "down": | ||
if (data.pointDirection === "right") { | // if (data.pointDirection === "right") { | ||
arrowBox.style['justify-content'] = "flex-end"; | // arrowBox.style['justify-content'] = "flex-end"; | ||
} | // } | ||
else { | // else { | ||
arrowBox.style['justify-content'] = "flex-start" | // arrowBox.style['justify-content'] = "flex-start" | ||
} | // } | ||
arrowPoint.style['transform-origin'] = "bottom" | // arrowPoint.style['transform-origin'] = "bottom" | ||
arrowPoint.style['bottom'] = 0 | // arrowPoint.style['bottom'] = 0 | ||
break; | // break; | ||
default: | // default: | ||
break; | // break; | ||
} | // } | ||
var minBoxSize; | // var minBoxSize; | ||
if (data.pointDirection === "both") { | // if (data.pointDirection === "both") { | ||
minBoxSize = (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) * 2 + data.thick + 1) + "px" | // minBoxSize = (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) * 2 + data.thick + 1) + "px" | ||
} | // } | ||
else { | // else { | ||
minBoxSize = (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) + data.thick + 1) + "px" | // minBoxSize = (data.pointLength * Math.sin(data.pointDeg * Math.PI / 180) + data.thick + 1) + "px" | ||
} | // } | ||
switch (data.direction) { | // switch (data.direction) { | ||
case "left": | // case "left": | ||
case "right": | // case "right": | ||
arrowPoint.style['height'] = 0 | // arrowPoint.style['height'] = 0 | ||
arrowPoint.style['width'] = data.pointLength + "px" | // arrowPoint.style['width'] = data.pointLength + "px" | ||
arrowBox.style['min-height'] = minBoxSize | // arrowBox.style['min-height'] = minBoxSize | ||
arrowBox.style['width'] = data.length ? data.length + "px" : null; | // arrowBox.style['width'] = data.length ? data.length + "px" : null; | ||
arrowShaft.style['left'] = arrowShaft.style['right'] = 0; | // arrowShaft.style['left'] = arrowShaft.style['right'] = 0; | ||
arrowShaft.style['border-width'] = data.thick + "px" | // arrowShaft.style['border-width'] = data.thick + "px" | ||
break; | // break; | ||
case "up": | // case "up": | ||
case "down": | // case "down": | ||
arrowPoint.style['width'] = 0 | // arrowPoint.style['width'] = 0 | ||
arrowPoint.style['height'] = data.pointLength + "px" | // arrowPoint.style['height'] = data.pointLength + "px" | ||
arrowBox.style['min-width'] = minBoxSize | // arrowBox.style['min-width'] = minBoxSize | ||
arrowBox.style['height'] = (data.length || 100) + "px"; | // arrowBox.style['height'] = (data.length || 100) + "px"; | ||
arrowShaft.style['border-width'] = data.thick + "px"; | // arrowShaft.style['border-width'] = data.thick + "px"; | ||
arrowShaft.style['top'] = arrowShaft.style['bottom'] = 0; | // arrowShaft.style['top'] = arrowShaft.style['bottom'] = 0; | ||
break; | // break; | ||
} | // } | ||
switch (data.direction) { | // switch (data.direction) { | ||
case "left": | // case "left": | ||
switch (data.pointDirection) { | // switch (data.pointDirection) { | ||
case "left": | // case "left": | ||
arrowPoint.style['rotate'] = (data.deg) + "deg"; | // arrowPoint.style['rotate'] = (data.deg) + "deg"; | ||
break; | // break; | ||
case "right": | // case "right": | ||
arrowPoint.style['rotate'] = - data.deg + "deg"; | // arrowPoint.style['rotate'] = - data.deg + "deg"; | ||
break; | // break; | ||
case "both": | // case "both": | ||
arrowPoint.style['rotate'] = (data.deg) + "deg"; | // arrowPoint.style['rotate'] = (data.deg) + "deg"; | ||
console.log(arrowPoint.style['rotate']); | // console.log(arrowPoint.style['rotate']); | ||
var arrowPoint2 = arrowPoint.cloneNode(true) | // var arrowPoint2 = arrowPoint.cloneNode(true) | ||
arrowPoint2.style['rotate'] = - (data.deg) + "deg"; | // arrowPoint2.style['rotate'] = - (data.deg) + "deg"; | ||
arrowBox.appendChild(arrowPoint2) | // arrowBox.appendChild(arrowPoint2) | ||
console.log(arrowPoint2.style['rotate']); | // console.log(arrowPoint2.style['rotate']); | ||
break; | // break; | ||
} | // } | ||
break; | // break; | ||
case "right": | // case "right": | ||
switch (data.pointDirection) { | // switch (data.pointDirection) { | ||
case "left": | // case "left": | ||
arrowPoint.style['rotate'] = (data.deg) + "deg"; | // arrowPoint.style['rotate'] = (data.deg) + "deg"; | ||
break; | // break; | ||
case "right": | // case "right": | ||
arrowPoint.style['rotate'] = -(data.deg) + "deg"; | // arrowPoint.style['rotate'] = -(data.deg) + "deg"; | ||
break; | // break; | ||
case "both": | // case "both": | ||
arrowPoint.style['rotate'] = (data.deg) + "deg"; | // arrowPoint.style['rotate'] = (data.deg) + "deg"; | ||
console.log(arrowPoint.style['rotate']); | // console.log(arrowPoint.style['rotate']); | ||
var arrowPoint2 = arrowPoint.cloneNode(true) | // var arrowPoint2 = arrowPoint.cloneNode(true) | ||
arrowPoint2.style['rotate'] = - (data.deg) + "deg"; | // arrowPoint2.style['rotate'] = - (data.deg) + "deg"; | ||
arrowBox.appendChild(arrowPoint2) | // arrowBox.appendChild(arrowPoint2) | ||
console.log(arrowPoint2.style['rotate']); | // console.log(arrowPoint2.style['rotate']); | ||
break; | // break; | ||
} | // } | ||
break; | // break; | ||
case "up": | // case "up": | ||
switch (data.pointDirection) { | // switch (data.pointDirection) { | ||
case "left": | // case "left": | ||
arrowPoint.style['rotate'] = data.deg + "deg"; | // arrowPoint.style['rotate'] = data.deg + "deg"; | ||
break; | // break; | ||
case "right": | // case "right": | ||
arrowPoint.style['rotate'] = - data.deg + "deg"; | // arrowPoint.style['rotate'] = - data.deg + "deg"; | ||
break; | // break; | ||
case "both": | // case "both": | ||
arrowPoint.style['rotate'] = data.deg + "deg"; | // arrowPoint.style['rotate'] = data.deg + "deg"; | ||
var arrowPoint2 = arrowPoint.cloneNode(true); | // var arrowPoint2 = arrowPoint.cloneNode(true); | ||
arrowBox.style['justify-content'] = "center" | // arrowBox.style['justify-content'] = "center" | ||
arrowPoint2.style['rotate'] = - data.deg + "deg"; | // arrowPoint2.style['rotate'] = - data.deg + "deg"; | ||
arrowBox.appendChild(arrowPoint2) | // arrowBox.appendChild(arrowPoint2) | ||
break; | // break; | ||
} | // } | ||
break; | // break; | ||
case "down": | // case "down": | ||
switch (data.pointDirection) { | // switch (data.pointDirection) { | ||
case "left": | // case "left": | ||
arrowPoint.style['rotate'] = data.deg + "deg"; | // arrowPoint.style['rotate'] = data.deg + "deg"; | ||
break; | // break; | ||
case "right": | // case "right": | ||
arrowPoint.style['rotate'] = - data.deg + "deg"; | // arrowPoint.style['rotate'] = - data.deg + "deg"; | ||
break; | // break; | ||
case "both": | // case "both": | ||
arrowPoint.style['rotate'] = data.deg + "deg"; | // arrowPoint.style['rotate'] = data.deg + "deg"; | ||
var arrowPoint2 = arrowPoint.cloneNode(true); | // var arrowPoint2 = arrowPoint.cloneNode(true); | ||
arrowBox.style['justify-content'] = "center" | // arrowBox.style['justify-content'] = "center" | ||
arrowPoint2.style['rotate'] = - data.deg + "deg"; | // arrowPoint2.style['rotate'] = - data.deg + "deg"; | ||
arrowBox.appendChild(arrowPoint2) | // arrowBox.appendChild(arrowPoint2) | ||
break; | // break; | ||
} | // } | ||
break; | // break; | ||
} | // } | ||
})() | // })() | ||
} | // } | ||
})(); | // })(); | ||
console.timeEnd("arrow-test") | // console.timeEnd("arrow-test") | ||
2025년 3월 4일 (화) 00:07 판
// 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'] = "left";
// }
// arrowPoint.style['left'] = 0
// break;
// case "right":
// if (data.pointDirection === "right") {
// arrowBox.style['align-items'] = "flex-start";
// arrowPoint.style['transform-origin'] = "right";
// }
// 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";
// 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")