87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
var cineraDropdownNavigation = document.getElementsByClassName("cineraNavDropdown");
|
|
for(var i = 0; i < cineraDropdownNavigation.length; ++i)
|
|
{
|
|
var cineraFamily = cineraDropdownNavigation[i].getElementsByClassName("cineraNavHorizontal")[0];
|
|
cineraDropdownNavigation[i].addEventListener("click", function() {
|
|
if(cineraFamily.classList.contains("visible"))
|
|
{
|
|
cineraFamily.classList.remove("visible");
|
|
}
|
|
else
|
|
{
|
|
cineraFamily.classList.add("visible");
|
|
}
|
|
});
|
|
|
|
cineraDropdownNavigation[i].addEventListener("mouseenter", function() {
|
|
cineraFamily.classList.add("visible");
|
|
});
|
|
|
|
cineraDropdownNavigation[i].addEventListener("mouseleave", function() {
|
|
cineraFamily.classList.remove("visible");
|
|
});
|
|
}
|
|
|
|
var Sprites = document.getElementsByClassName("cineraSprite");
|
|
|
|
for(var i = 0; i < Sprites.length; ++i)
|
|
{
|
|
var This = Sprites[i];
|
|
|
|
var TileX = This.getAttribute("data-tile-width");
|
|
var TileY = This.getAttribute("data-tile-height");
|
|
var AspectRatio = TileX / TileY;
|
|
|
|
// TODO(matt): Nail down the desiredness situation. Perhaps respond to:
|
|
// width / min-width / height / min-height set in a CSS file
|
|
// flexbox layout, if possible
|
|
|
|
// NOTE(matt): These values are "decoupled" here, to facilitate handling of sizes other than the original
|
|
// We'll probably need some way of checking the desired and original of both the X and Y, and pick which one on
|
|
// which to base the computation of the other
|
|
var DesiredX = TileX;
|
|
var DesiredY = DesiredX / AspectRatio;
|
|
var Proportion = DesiredX / TileX;
|
|
//
|
|
////
|
|
|
|
// NOTE(matt): Size the container and its background image
|
|
//
|
|
This.style.width = DesiredX + "px";
|
|
This.style.height = DesiredY + "px";
|
|
|
|
var SpriteWidth = This.getAttribute("data-sprite-width");
|
|
var SpriteHeight = This.getAttribute("data-sprite-height");
|
|
This.style.backgroundSize = SpriteWidth * Proportion + "px " + SpriteHeight * Proportion + "px";
|
|
//
|
|
////
|
|
|
|
// NOTE(matt): Pick the tile
|
|
//
|
|
setSpriteLightness(This);
|
|
if(This.classList.contains("dark"))
|
|
{
|
|
This.style.backgroundPositionX = This.getAttribute("data-x-dark") + "px";
|
|
}
|
|
|
|
if(elementIsFocused(This))
|
|
{
|
|
This.style.backgroundPositionY = This.getAttribute("data-y-focused") + "px";
|
|
}
|
|
|
|
if(This.classList.contains("off"))
|
|
{
|
|
This.style.backgroundPositionY = This.getAttribute("data-y-disabled") + "px";
|
|
}
|
|
else
|
|
{
|
|
This.style.backgroundPositionY = This.getAttribute("data-y-normal") + "px";
|
|
}
|
|
//
|
|
////
|
|
|
|
// NOTE(matt): Finally apply the background image
|
|
var URL = This.getAttribute("data-src");
|
|
This.style.backgroundImage = "url('" + URL + "')";
|
|
}
|