document.addEventListener("DOMContentLoaded", function() {
// --- 1. INSERT THE HTML FIRST ---
const goldBarHtml = `
`;
// Inject into body
document.body.insertAdjacentHTML("afterbegin", goldBarHtml);
// --- 2. YOUR LOGIC SCRIPT ---
var priceTypes = [
"price",
"priceGram18k",
"priceGram20k",
"priceGram21k",
"priceGram22k",
"priceGram24k",
];
var colorsConfig = {
arrowUpColor: "",
arrowDownColor: "",
};
function updateConfig(config) {
if (config) {
var priceBar = document.querySelector(".livegold_pricesBar");
priceTypes.forEach(function(type) {
if (!(config.goldItems && config.goldItems.includes(type))) {
var goldItem = document.querySelector('.livegold_pricesBar_goldItem.' + type);
if (goldItem) goldItem.style.display = "none";
}
if (!(config.silverItems && config.silverItems.includes(type))) {
var silverItem = document.querySelector('.livegold_pricesBar_silverItem.' + type);
if (silverItem) silverItem.style.display = "none";
}
});
if (config.viewType !== "full") {
if (
config.viewType === "onlyDigitsArrows" ||
config.viewType === "onlyDigits"
) {
document
.querySelectorAll(".livegold_pricesBar_goldItem .currency")
.forEach(function(e) {
e.style.display = "none";
});
document
.querySelectorAll(".livegold_pricesBar_silverItem .currency")
.forEach(function(e) {
e.style.display = "none";
});
}
if (
config.viewType === "onlyDigitsCurrency" ||
config.viewType === "onlyDigits"
) {
document
.querySelectorAll(".livegold_pricesBar_goldItem .arrow-icon")
.forEach(function(e) {
e.style.display = "none";
});
document
.querySelectorAll(".livegold_pricesBar_silverItem .arrow-icon")
.forEach(function(e) {
e.style.display = "none";
});
}
}
if (config.mode === "light") priceBar.classList.add("light");
if (config.mode === "custom") {
priceBar.style.backgroundColor = config.backgroundColor || "#000";
priceBar.style.color = config.foregroundColor || "#fff";
document
.querySelectorAll(".livegold_pricesBar_goldItem .price")
.forEach(function(e) {
e.style.color = config.goldColor || "#debc5b";
});
document
.querySelectorAll(".livegold_pricesBar_goldItem .currency")
.forEach(function(e) {
e.style.color = config.goldColor || "#debc5b";
});
document
.querySelectorAll(".livegold_pricesBar_silverItem .price")
.forEach(function(e) {
e.style.color = config.silverColor || "#a9b0b4";
});
document
.querySelectorAll(".livegold_pricesBar_silverItem .currency")
.forEach(function(e) {
e.style.color = config.silverColor || "#a9b0b4";
});
var style = document.createElement("style");
document.head.appendChild(style);
colorsConfig.arrowUpColor = config.upColor;
colorsConfig.arrowDownColor = config.downColor;
}
// Hide loading and show prices
var loadingEl = document.querySelector(".livegold_pricesBar_loading");
if (loadingEl) loadingEl.style.display = "none";
var ulEl = document.querySelector(".livegold_pricesBar ul");
if (ulEl) ulEl.style.display = "flex";
}
}
function getConfig() {
var designConfig = {
template: "basic",
goldItems: ["priceGram18k", "priceGram21k", "priceGram22k", "priceGram24k", "price", "priceGram14k"],
silverItems: ["price"],
viewType: "full",
mode: "dark",
backgroundColor: "#000000",
foregroundColor: "#ffffff",
goldColor: "#debc5b",
silverColor: "#a9b0b4",
upColor: "#627E77",
downColor: "#C86868",
};
updateConfig(designConfig);
}
function getPrices() {
var options = {
method: "GET",
headers: {
"Content-Type": "application/json;charset=utf-8",
"X-API-KEY": "h92rp6smh1auku6ot1l6cs68xvyfplyd",
},
};
var apiUrl = "https://live-gold-development-1ce6929338ed.herokuapp.com/api/metals";
fetch(apiUrl, options)
.then(function(res) {
if (!res.ok) {
throw new Error("Network response was not ok " + res.statusText);
}
return res.json();
})
.then(function(prices) {
priceTypes.forEach(function(type) {
var goldPrice = prices.gold && prices.gold[type];
var silverPrice = prices.silver && prices.silver[type];
if (goldPrice) updatePrice("gold", type, goldPrice);
if (silverPrice) updatePrice("silver", type, silverPrice);
});
})
.catch(function(error) {
console.error(
"There has been a problem with your fetch operation:",
error
);
});
}
function updatePrice(mainType, type, price) {
var mainSelector = '.livegold_pricesBar_' + mainType + 'Item.' + type;
var item = document.querySelector(mainSelector + ' .price');
if(item) item.innerHTML = price.value;
var arrowContainer = document.querySelector(mainSelector + ' .arrow-icon');
if(arrowContainer) {
arrowContainer.innerHTML = "";
var upArrowSVG = '';
var downArrowSVG = '';
var balancedArrowSVG = '';
if (price.status === "up") {
arrowContainer.innerHTML = upArrowSVG;
} else if (price.status === "down") {
arrowContainer.innerHTML = downArrowSVG;
} else if (price.status === "balance") {
arrowContainer.innerHTML = balancedArrowSVG;
}
}
}
function setupEventListeners() {
var gold24k = document.querySelector(".gold-24k-item");
if(!gold24k) return;
gold24k.addEventListener("click", function() {
var items = document.querySelectorAll(".livegold_pricesBar ul li");
var isExpanded = false;
items.forEach(function(item) {
if (
!item.classList.contains("gold-24k-item") &&
item.classList.contains("show")
) {
isExpanded = true;
}
});
items.forEach(function(item) {
if (!item.classList.contains("gold-24k-item")) {
if (isExpanded) {
item.classList.remove("show");
} else {
item.classList.add("show");
}
}
});
if (!isExpanded) {
var ul = document.querySelector(".livegold_pricesBar ul");
var gold24kItem = document.querySelector(".gold-24k-item");
ul.removeChild(gold24kItem);
ul.insertBefore(gold24kItem, ul.firstChild);
}
if (isExpanded) {
this.classList.remove("expanded");
} else {
this.classList.add("expanded");
}
if (!isExpanded) {
items.forEach(function(item) {
if (!item.classList.contains("gold-24k-item")) {
item.addEventListener("click", function() {
items.forEach(function(i) {
if (!i.classList.contains("gold-24k-item")) {
i.classList.remove("show");
}
});
document
.querySelector(".gold-24k-item")
.classList.remove("expanded");
});
}
});
}
});
}
// --- 3. EXECUTE ---
getConfig();
getPrices();
setInterval(getPrices, 10000);
setTimeout(setupEventListeners, 1000);
});