33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
const placeIcon = (instrument) => {
|
|
if (currStaveNumber > numStaves) currStaveNumber = 1;
|
|
// Select the staveWrapper in which to place the div
|
|
const staveWrapper = document.getElementById(
|
|
`stave-wrapper-${currStaveNumber}`
|
|
);
|
|
// Determine the position of the time indicator
|
|
const rect = timeIndicator.getBoundingClientRect();
|
|
const sheetLeft = sheetWindow.getBoundingClientRect().left;
|
|
const xPosition = rect.left + window.scrollX - sheetLeft;
|
|
|
|
// Create the icon div and give it its location data
|
|
const newObject = document.createElement("div");
|
|
newObject.classList.add("event-icon");
|
|
newObject.style.position = "absolute";
|
|
|
|
newObject.style.left = `${
|
|
xPosition - document.documentElement.clientWidth / 200
|
|
}px`;
|
|
newObject.style.top = `${instrument.yPos}`;
|
|
|
|
// Create the icon
|
|
const eventIcon = document.createElement("object");
|
|
eventIcon.type = "image/svg+xml";
|
|
eventIcon.data = instrument.image;
|
|
|
|
// Append icon to div
|
|
newObject.appendChild(eventIcon);
|
|
|
|
// Append the div to the staveWrapper
|
|
staveWrapper.appendChild(newObject);
|
|
};
|