document.addEventListener('DOMContentLoaded', function() {
// Create the locations section HTML
const locationsHTML = `
`;
// Insert after .s-block--stats
const statsBlock = document.querySelector('.s-block--stats');
if (statsBlock) {
statsBlock.insertAdjacentHTML('afterend', locationsHTML);
// Tab switching functionality
const tabButtons = document.querySelectorAll('.location-tab-btn');
const tabPanes = document.querySelectorAll('.location-tab-pane');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetLocation = this.getAttribute('data-location');
// Remove active class from all buttons and panes
tabButtons.forEach(btn => btn.classList.remove('active'));
tabPanes.forEach(pane => pane.classList.remove('active'));
// Add active class to clicked button and corresponding pane
this.classList.add('active');
document.getElementById(targetLocation).classList.add('active');
});
});
}
});
const LOGO_SRC =
'https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NKQEEe/RQDasWmUdmZOxZdpMqc8eVBcOOB7vvLs2U0nRf9x.png';
const API_ENDPOINT = 'https://prices-bar.autogoldapp.com/';
const CACHE_KEY = 'mfgp_cached_data';
const REFRESH_INTERVAL = 60000; // 30 seconds
document.addEventListener('theme::ready', () => {
initMfgp();
});
function initMfgp() {
if (document.querySelector('.mfgp-top-bar')) return;
injectHtml();
bindMobileToggle();
// Load cached data first if available
loadCachedData();
// Fetch fresh prices
fetchPrices();
// Set up interval for auto-refresh
setInterval(fetchPrices, REFRESH_INTERVAL);
}
const priceMapping = {
21: { type: 'gold', key: '21' },
18: { type: 'gold', key: '18' },
22: { type: 'gold', key: '22' },
24: { type: 'gold', key: '24' },
xau: { type: 'gold', key: 'ounce' },
};
// Store previous prices for comparison
let previousPrices = {};
let previousChanges = {};
function injectHtml() {
const container = document.createElement('div');
container.innerHTML = `
${createCard({ id: 21, name: 'ذهب عيار 21' })}
${createCard({ id: 18, name: 'ذهب عيار 18' })}
${createCard({ id: 22, name: 'ذهب عيار 22' })}
${createCard({ id: 24, name: 'ذهب عيار 24', main: true })}
${createCard({ id: 'xau', name: 'ذهب أونصة', currency: 'دولار' })}
`;
document.body.prepend(container);
}
function createCard({
id,
name,
currency = '',
main = false,
silver = false,
}) {
return `
${name}
---
${currency}
▼
`;
}
function bindMobileToggle() {
const topBar = document.querySelector('.mfgp-top-bar');
const mainCard = document.querySelector('.mfgp-main-card');
const cards = topBar.querySelectorAll('.mfgp-card:not(.mfgp-main-card)');
if (!mainCard) return;
mainCard.addEventListener('click', (e) => {
e.stopPropagation();
const isOpen = topBar.classList.contains('mfgp-open');
if (isOpen) {
cards.forEach((c, i) =>
setTimeout(() => {
c.classList.remove('show-slide');
c.classList.add('hide-slide');
}, i * 40),
);
setTimeout(() => {
topBar.classList.remove('mfgp-open');
cards.forEach((c) => c.classList.remove('hide-slide'));
}, 400);
} else {
topBar.classList.add('mfgp-open');
cards.forEach((c, i) => {
c.classList.remove('hide-slide');
setTimeout(() => c.classList.add('show-slide'), i * 60);
});
}
});
}
function updateArrow(id, status) {
const arrow = document.querySelector(`#mfgp-card-${id} .mfgp-dynamic-arrow`);
if (!arrow) return;
arrow.style.display = 'block';
const color = status === 'up' ? '#00b208' : '#ff0000';
const paths =
status === 'up'
? `
`
: `
`;
arrow.innerHTML = paths;
}
function loadCachedData() {
try {
const cached = localStorage.getItem(CACHE_KEY);
if (cached) {
const { data } = JSON.parse(cached);
updateUI(data, false); // false = don't animate from cache
}
} catch (error) {
console.error('Error loading cached data:', error);
}
}
function determineStatus(id, newPrice, metalChanges) {
// For gold cards (not ounce), use the gold change
// For silver, use the silver change
// For ounces, use USD ounce changes
let change = 0;
if (id === 'xag') {
// Silver ounce
change = metalChanges.silver || 0;
} else if (id === 'xau') {
// Gold ounce
change = metalChanges.gold || 0;
} else {
// Gold gram prices (18, 21, 22, 24)
change = metalChanges.gold || 0;
}
if (change > 0) return 'up';
if (change < 0) return 'down';
return 'neutral';
}
function updateUI(data, animate = true) {
const prices = data.prices;
const changes = data.changes || {};
if (!prices) return;
Object.keys(priceMapping).forEach((id) => {
const { type, key } = priceMapping[id];
const priceValue = prices[type]?.[key];
if (priceValue === undefined || priceValue === null) return;
const priceElement = document.getElementById(`mfgp-price-${id}`);
const priceContainer = priceElement?.parentElement;
const card = document.getElementById(`mfgp-card-${id}`);
if (!priceElement || !priceContainer || !card) return;
const oldPrice = parseFloat(priceElement.textContent);
const newPrice = parseFloat(priceValue);
// Determine status based on changes from API
const status = determineStatus(id, newPrice, changes);
// Update the price text
priceElement.textContent = newPrice.toFixed(2);
// Update color classes based on status
priceContainer.classList.remove('mfgp-up', 'mfgp-down');
if (status === 'up') {
priceContainer.classList.add('mfgp-up');
} else if (status === 'down') {
priceContainer.classList.add('mfgp-down');
}
// Update arrow
updateArrow(id, status);
// Animate card if price changed and animation is enabled
if (animate && !isNaN(oldPrice) && oldPrice !== newPrice) {
// Remove existing animation classes
card.classList.remove('flash-up', 'flash-down');
// Force reflow to restart animation
void card.offsetWidth;
// Add appropriate flash animation
if (status === 'up') {
card.classList.add('flash-up');
} else if (status === 'down') {
card.classList.add('flash-down');
}
// Remove animation class after it completes
setTimeout(() => {
card.classList.remove('flash-up', 'flash-down');
}, 800);
}
// Store current price for next comparison
previousPrices[id] = newPrice;
});
// Store changes for next comparison
previousChanges = changes;
// Cache the data
try {
localStorage.setItem(
CACHE_KEY,
JSON.stringify({
data,
timestamp: Date.now(),
}),
);
} catch (error) {
console.error('Error caching data:', error);
}
}
async function fetchPrices() {
try {
const response = await fetch(API_ENDPOINT, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
// Validate response
if (!data.success || !data.prices) {
throw new Error('Invalid response format');
}
updateUI(data, true); // true = enable animations
} catch (error) {
console.error('Error fetching prices:', error);
// Try to load cached data on error
loadCachedData();
}
}
(function () {
if (document.getElementById('sg-size-guide')) return;
const style = document.createElement('style');
style.textContent = `
:root { --sg-red: #3a0504; --sg-gold: #dbaa0f; }
#sg-fab {
position: fixed; left: 0; top: 50%; transform: translateY(-50%);
z-index: 9999;
}
#sg-trigger {
writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
background: var(--sg-red); color: var(--sg-gold); border: none; cursor: pointer;
padding: 14px 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.5px;
border-radius:6px 0px 0px 6px; display: flex; align-items: center; gap: 6px;
box-shadow: 2px 0 8px rgba(0,0,0,0.25); transition: background 0.2s;
white-space: nowrap; font-family: inherit;
}
#sg-trigger:hover { background: #5c0806; }
#sg-panel {
position: fixed; left: -380px; top: 50%; transform: translateY(-50%);
width: 360px; max-height: 85vh; background: #fff;
border-radius: 0 12px 12px 0; box-shadow: 4px 0 24px rgba(0,0,0,0.18);
z-index: 9998; transition: left 0.3s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column; overflow: hidden;
border: 1px solid rgba(0,0,0,0.1); border-left: none;
}
#sg-panel.open { left: 0; }
.sg-header { background: var(--sg-red); padding: 14px 16px 0; flex-shrink: 0; }
.sg-header-top {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.sg-title { color: var(--sg-gold); font-size: 15px; font-weight: 600; margin: 0; }
.sg-close {
background: none; border: none; color: var(--sg-gold); cursor: pointer;
font-size: 20px; padding: 0; opacity: 0.85; line-height: 1;
}
.sg-close:hover { opacity: 1; }
.sg-tabs { display: flex; gap: 4px; }
.sg-tab {
background: transparent; border: none; color: rgba(219,170,15,0.6);
cursor: pointer; padding: 8px 16px; font-size: 13px; font-weight: 500;
border-radius: 6px 6px 0 0; transition: all 0.2s; font-family: inherit;
border-bottom: 2px solid transparent;
}
.sg-tab:hover { color: var(--sg-gold); }
.sg-tab.active { background: #fff; color: var(--sg-red); border-bottom: 2px solid #fff; }
.sg-body { overflow-y: auto; flex: 1; padding: 16px; background: #fff; }
.sg-pane { display: none; }
.sg-pane.active { display: block; }
.sg-img {
width: 100%; border-radius: 8px;
border: 1px solid #eee; display: block;
}
@media (max-width: 600px) {
#sg-panel {
width: calc(100vw - 36px); max-height: 80vh;
top: auto; bottom: -100vh; transform: none;
left: unset !important; right: 0;
border-radius: 12px 12px 0 0;
transition: bottom 0.3s cubic-bezier(.4,0,.2,1);
}
#sg-panel.open { bottom: 0; }
#sg-fab { top: auto; bottom: 90px; transform: none; }
#sg-trigger {
writing-mode: horizontal-tb; transform: none;
padding: 10px 8px; border-radius: 0 8px 8px 0;
font-size: 11px; letter-spacing: 0;
}
}
`;
document.head.appendChild(style);
document.body.insertAdjacentHTML('beforeend', `
`);
const trigger = document.getElementById('sg-trigger');
const panel = document.getElementById('sg-panel');
const closeBtn = document.getElementById('sg-close');
trigger.addEventListener('click', () => panel.classList.toggle('open'));
closeBtn.addEventListener('click', () => panel.classList.remove('open'));
document.addEventListener('click', (e) => {
if (!panel.contains(e.target) && !trigger.contains(e.target)) {
panel.classList.remove('open');
}
});
document.querySelectorAll('.sg-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.sg-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.sg-pane').forEach(p => p.classList.remove('active'));
tab.classList.add('active');
document.getElementById('sg-pane-' + tab.dataset.tab).classList.add('active');
});
});
})(); 
