67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
(function () {
|
|
const odometer = document.querySelector(".odometer");
|
|
const value = document.querySelector(".odometer-value");
|
|
const unit = document.querySelector(".odometer-unit");
|
|
|
|
function elementPosition(position) {
|
|
element = odometer;
|
|
element.style.top = '';
|
|
element.style.bottom = '';
|
|
element.style.left = '';
|
|
element.style.right = '';
|
|
element.style.transform = '';
|
|
|
|
switch (position) {
|
|
|
|
case 'bottom-right':
|
|
element.style.bottom = '0';
|
|
element.style.right = '0';
|
|
break;
|
|
case 'bottom-left':
|
|
element.style.bottom = '0';
|
|
element.style.left = '0';
|
|
break;
|
|
case 'top-right':
|
|
element.style.top = '0';
|
|
element.style.right = '0';
|
|
break;
|
|
case 'top-left':
|
|
element.style.top = '0';
|
|
element.style.left = '0';
|
|
break;
|
|
case 'bottom-center':
|
|
element.style.bottom = '0';
|
|
element.style.left = '50%';
|
|
element.style.transform = 'translateX(-50%)';
|
|
break;
|
|
case 'top-center':
|
|
element.style.top = '0';
|
|
element.style.left = '50%';
|
|
element.style.transform = 'translateX(-50%)';
|
|
break;
|
|
default:
|
|
element.style.bottom = '0';
|
|
element.style.right = '0';
|
|
break;
|
|
}
|
|
}
|
|
|
|
window.addEventListener("message", (evt) => {
|
|
const { data } = evt;
|
|
|
|
if (!data) return false;
|
|
|
|
if (data.type === "show") {
|
|
odometer.style.display = "flex";
|
|
value.innerHTML = Math.floor(
|
|
data.value * (data.unit === "miles" ? 0.621371 : 1)
|
|
)
|
|
.toString()
|
|
.padStart(6, "0");
|
|
unit.innerHTML = data.unit === "miles" ? "MI" : "KM";
|
|
elementPosition(data.position);
|
|
} else if (data.type === "hide") {
|
|
odometer.style.display = "none";
|
|
}
|
|
});
|
|
})();
|