クリックアニメーションを追加、進行方向に合わせた配置の変更

This commit is contained in:
harukin-expo-dev-env 2025-06-11 12:06:55 +00:00
parent 45b41dcef0
commit a305aa7202

View File

@ -1247,9 +1247,10 @@ export const injectJavascriptData: InjectJavascriptData = (
const returnText1 = (isWanman ? "ワンマン " : "") + trainName + viaData; const returnText1 = (isWanman ? "ワンマン " : "") + trainName + viaData;
const returnText2 = (ToData ? ToData+"行 " : ToData)+ TrainNumber; const returnText2 = (ToData ? ToData+"行 " : ToData)+ TrainNumber;
.innerText = ""; .innerText = "";
.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: black;'>" + returnText1 + "</p>"); .insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + returnText1 + "</p>");
.insertAdjacentHTML('beforebegin', "<div style='display:inline-flex;flex-direction:column;'><p style='font-size:10px;font-weight: bold;padding:0;color:black;'>" + (ToData ? ToData + "行 " : ToData) + "</p><p style='font-size:10px;padding:0;color:black;'>" + TrainNumber + (JRF ? "":"レ") + "</p></div>"); .insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color:black;text-align:center;'>" + (ToData ? ToData + "行 " : ToData) + "</p>");
.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>"); .insertAdjacentHTML('beforebegin', "<p style='font-size:8px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p>");
.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
} }
`; `;
@ -1265,16 +1266,27 @@ const setNewTrainItem = (element)=>{
element.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; element.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
element.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)'; element.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)';
element.style.margin = '2px'; element.style.margin = '2px';
element.style.display = 'flex'; element.style.display = 'flex';
element.style.flexDirection = 'column';
element.style.alignItems = 'center'; element.style.alignItems = 'center';
element.style.justifyContent = 'center'; element.style.justifyContent = 'flex-end';
element.style.width = '52px'; element.style.width = '52px';
element.style.height = '80px'; element.style.height = '80px';
element.getElementsByTagName("p")[0].style.textAlign = "center";
element.getElementsByTagName("p")[0].style.fontSize = '8px';
element.getElementsByTagName("img")[0].style.float = 'unset'; element.getElementsByTagName("img")[0].style.float = 'unset';
element.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)';
element.style.transition = 'transform 0.1s ease-in-out';
element.addEventListener('touchstart', () => element.style.transform = 'scale(0.8)');
element.addEventListener('touchend', () => element.style.transform = 'scale(1)');
if(element.getAttribute("style").includes("left")){
// borderを使って五角形を生成 下り
element.style.borderRadius = '20% 20% 80% 80%';
element.style.flexDirection = 'column-reverse';
}
else if(element.getAttribute("style").includes("right")){
// borderを使って五角形を生成 上り
element.style.borderRadius = '80% 80% 20% 20%';
element.style.flexDirection = 'column';
}
} }
//列番付与 //列番付与
const setStrings = () =>{ const setStrings = () =>{