180 lines
6.5 KiB
JavaScript
180 lines
6.5 KiB
JavaScript
|
class VoiceSearch {
|
||
|
constructor() {
|
||
|
this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
||
|
this.searchInput = document.querySelector('.search-input input');
|
||
|
this.voiceButton = document.querySelector('.voice-search-btn');
|
||
|
|
||
|
this.initializeVoiceSearch();
|
||
|
}
|
||
|
|
||
|
initializeVoiceSearch() {
|
||
|
// إعداد خصائص التعرف على الصوت
|
||
|
this.recognition.lang = 'ar';
|
||
|
this.recognition.continuous = false;
|
||
|
this.recognition.interimResults = false;
|
||
|
|
||
|
// إضافة مستمعي الأحداث
|
||
|
this.voiceButton?.addEventListener('click', () => this.startVoiceSearch());
|
||
|
|
||
|
// معالجة نتائج التعرف على الصوت
|
||
|
this.recognition.onresult = (event) => {
|
||
|
const result = event.results[0][0].transcript;
|
||
|
if (this.searchInput) {
|
||
|
this.searchInput.value = result;
|
||
|
// تشغيل البحث تلقائياً
|
||
|
this.searchInput.form?.dispatchEvent(new Event('submit'));
|
||
|
}
|
||
|
};
|
||
|
|
||
|
// معالجة الأخطاء
|
||
|
this.recognition.onerror = (event) => {
|
||
|
console.error('Voice recognition error:', event.error);
|
||
|
this.showNotification('حدث خطأ في التعرف على الصوت', 'error');
|
||
|
};
|
||
|
|
||
|
// عند انتهاء التسجيل
|
||
|
this.recognition.onend = () => {
|
||
|
this.voiceButton?.classList.remove('listening');
|
||
|
};
|
||
|
}
|
||
|
|
||
|
startVoiceSearch() {
|
||
|
try {
|
||
|
this.recognition.start();
|
||
|
this.voiceButton?.classList.add('listening');
|
||
|
this.showNotification('جارٍ الاستماع... تحدث الآن');
|
||
|
} catch (error) {
|
||
|
console.error('Voice recognition error:', error);
|
||
|
this.showNotification('لا يمكن استخدام البحث الصوتي', 'error');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
showNotification(message, type = 'info') {
|
||
|
const notification = document.createElement('div');
|
||
|
notification.className = `voice-notification ${type}`;
|
||
|
notification.textContent = message;
|
||
|
|
||
|
document.body.appendChild(notification);
|
||
|
|
||
|
setTimeout(() => {
|
||
|
notification.classList.add('show');
|
||
|
}, 100);
|
||
|
|
||
|
setTimeout(() => {
|
||
|
notification.classList.remove('show');
|
||
|
setTimeout(() => notification.remove(), 300);
|
||
|
}, 3000);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// نظام مشاركة المنتجات
|
||
|
class ShareSystem {
|
||
|
constructor() {
|
||
|
this.initializeShare();
|
||
|
}
|
||
|
|
||
|
initializeShare() {
|
||
|
document.querySelectorAll('.share-btn').forEach(button => {
|
||
|
button.addEventListener('click', (e) => this.shareProduct(e));
|
||
|
});
|
||
|
}
|
||
|
|
||
|
async shareProduct(e) {
|
||
|
const productCard = e.target.closest('.product-card');
|
||
|
const productData = {
|
||
|
title: productCard.querySelector('h3').textContent,
|
||
|
text: productCard.querySelector('p').textContent,
|
||
|
url: window.location.href
|
||
|
};
|
||
|
|
||
|
try {
|
||
|
if (navigator.share) {
|
||
|
// استخدام Web Share API إذا كان متوفراً
|
||
|
await navigator.share(productData);
|
||
|
} else {
|
||
|
// عرض قائمة مشاركة مخصصة
|
||
|
this.showCustomShareMenu(e.target, productData);
|
||
|
}
|
||
|
} catch (error) {
|
||
|
console.error('Share error:', error);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
showCustomShareMenu(target, data) {
|
||
|
const shareMenu = document.createElement('div');
|
||
|
shareMenu.className = 'share-menu';
|
||
|
|
||
|
const platforms = [
|
||
|
{ name: 'Facebook', icon: 'fab fa-facebook', url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(data.url)}` },
|
||
|
{ name: 'Twitter', icon: 'fab fa-twitter', url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(data.title)}&url=${encodeURIComponent(data.url)}` },
|
||
|
{ name: 'WhatsApp', icon: 'fab fa-whatsapp', url: `https://wa.me/?text=${encodeURIComponent(data.title + ' ' + data.url)}` },
|
||
|
{ name: 'نسخ الرابط', icon: 'fas fa-link', action: () => this.copyToClipboard(data.url) }
|
||
|
];
|
||
|
|
||
|
shareMenu.innerHTML = platforms.map(platform => `
|
||
|
<button class="share-option" data-url="${platform.url || ''}" data-action="${platform.action ? 'copy' : 'share'}">
|
||
|
<i class="${platform.icon}"></i>
|
||
|
<span>${platform.name}</span>
|
||
|
</button>
|
||
|
`).join('');
|
||
|
|
||
|
// إضافة مستمعي الأحداث للأزرار
|
||
|
shareMenu.querySelectorAll('.share-option').forEach(button => {
|
||
|
button.addEventListener('click', () => {
|
||
|
if (button.dataset.action === 'copy') {
|
||
|
this.copyToClipboard(data.url);
|
||
|
} else {
|
||
|
window.open(button.dataset.url, '_blank');
|
||
|
}
|
||
|
shareMenu.remove();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
// إضافة القائمة للصفحة
|
||
|
document.body.appendChild(shareMenu);
|
||
|
|
||
|
// تحديد موقع القائمة
|
||
|
const rect = target.getBoundingClientRect();
|
||
|
shareMenu.style.top = rect.bottom + window.scrollY + 'px';
|
||
|
shareMenu.style.left = rect.left + window.scrollX + 'px';
|
||
|
|
||
|
// إغلاق القائمة عند النقر خارجها
|
||
|
document.addEventListener('click', (e) => {
|
||
|
if (!shareMenu.contains(e.target) && e.target !== target) {
|
||
|
shareMenu.remove();
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
async copyToClipboard(text) {
|
||
|
try {
|
||
|
await navigator.clipboard.writeText(text);
|
||
|
this.showNotification('تم نسخ الرابط بنجاح');
|
||
|
} catch (error) {
|
||
|
console.error('Clipboard error:', error);
|
||
|
this.showNotification('فشل نسخ الرابط', 'error');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
showNotification(message, type = 'success') {
|
||
|
const notification = document.createElement('div');
|
||
|
notification.className = `share-notification ${type}`;
|
||
|
notification.textContent = message;
|
||
|
|
||
|
document.body.appendChild(notification);
|
||
|
|
||
|
setTimeout(() => {
|
||
|
notification.classList.add('show');
|
||
|
}, 100);
|
||
|
|
||
|
setTimeout(() => {
|
||
|
notification.classList.remove('show');
|
||
|
setTimeout(() => notification.remove(), 300);
|
||
|
}, 2000);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// تهيئة الأنظمة
|
||
|
const voiceSearch = new VoiceSearch();
|
||
|
const shareSystem = new ShareSystem();
|