x-data="{
init() {
// Sayfa yüklendiğinde pozisyonu ayarla
this.applyWidgetPosition();
// Widget ayarları değiştiğinde pozisyonu güncelle
this.$watch('widgetSettings.position', () => {
this.applyWidgetPosition();
});
this.$watch('widgetSettings.position_top_offset', () => {
this.applyWidgetPosition();
});
this.$watch('widgetSettings.position_right_offset', () => {
this.applyWidgetPosition();
});
this.$watch('widgetSettings.position_bottom_offset', () => {
this.applyWidgetPosition();
});
this.$watch('widgetSettings.position_left_offset', () => {
this.applyWidgetPosition();
});
// Mobil offset'leri de watch et
this.$watch('widgetSettings.mobile_position_top_offset', () => {
this.applyWidgetPosition();
});
this.$watch('widgetSettings.mobile_position_right_offset', () => {
this.applyWidgetPosition();
});
this.$watch('widgetSettings.mobile_position_bottom_offset', () => {
this.applyWidgetPosition();
});
this.$watch('widgetSettings.mobile_position_left_offset', () => {
this.applyWidgetPosition();
});
},
startDrag(e) {
this.isDragging = true;
this.dragStarted = false;
this.$el.classList.add('dragging');
const rect = this.$el.getBoundingClientRect();
this.startX = (e.type === 'mousedown' ? e.clientX : e.touches[0].clientX) - rect.left;
this.startY = (e.type === 'mousedown' ? e.clientY : e.touches[0].clientY) - rect.top;
// Geçiş efektini kaldır
this.$el.style.transition = 'none';
document.addEventListener('mousemove', this.drag.bind(this));
document.addEventListener('mouseup', this.stopDrag.bind(this));
document.addEventListener('touchmove', this.drag.bind(this), { passive: false });
document.addEventListener('touchend', this.stopDrag.bind(this));
e.preventDefault();
},
drag(e) {
if (!this.isDragging) return;
this.dragStarted = true;
const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
const clientY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
let newX = window.innerWidth - (clientX - this.startX) - this.$el.offsetWidth;
let newY = window.innerHeight - (clientY - this.startY) - this.$el.offsetHeight;
// Ekran sınırları içinde tut
newX = Math.max(10, Math.min(newX, window.innerWidth - this.$el.offsetWidth - 10));
newY = Math.max(10, Math.min(newY, window.innerHeight - this.$el.offsetHeight - 10));
this.currentX = newX;
this.currentY = newY;
this.updatePosition();
e.preventDefault();
},
stopDrag(e) {
if (this.isDragging) {
this.isDragging = false;
this.$el.classList.remove('dragging');
// Kenarları manyetik yap - daha akıllı
const threshold = 80;
const centerThreshold = window.innerWidth / 3;
// Sol kenar manyetiği
if (this.currentX < threshold) {
this.currentX = 10;
}
// Sağ kenar manyetiği
else if (this.currentX > window.innerWidth - this.$el.offsetWidth - threshold) {
this.currentX = window.innerWidth - this.$el.offsetWidth - 10;
}
// Orta bölge - en yakın kenara yapış
else if (Math.abs(this.currentX - (window.innerWidth / 2 - this.$el.offsetWidth / 2)) > centerThreshold) {
if (this.currentX < window.innerWidth / 2) {
this.currentX = 10; // Sol kenara yapış
} else {
this.currentX = window.innerWidth - this.$el.offsetWidth - 10; // Sağ kenara yapış
}
}
// Yumuşak geçiş ile pozisyonu güncelle
this.$el.style.transition = 'all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
localStorage.setItem('chatWidgetX', this.currentX);
localStorage.setItem('chatWidgetY', this.currentY);
this.updatePosition();
// Geçiş efektini kaldır
setTimeout(() => {
this.$el.style.transition = '';
}, 300);
// Event listener'ları temizle
document.removeEventListener('mousemove', this.drag.bind(this));
document.removeEventListener('mouseup', this.stopDrag.bind(this));
document.removeEventListener('touchmove', this.drag.bind(this));
document.removeEventListener('touchend', this.stopDrag.bind(this));
// Eğer sürükleme yapıldıysa tıklama event'ini engelle
if (this.dragStarted) {
setTimeout(() => { this.dragStarted = false; }, 100);
}
}
},
updatePosition() {
// Sürükleme modu kontrolü - eğer localStorage'da pozisyon varsa sürükleme modu aktif
const isDragModeActive = localStorage.getItem('chatWidgetX') !== null;
console.log('🔄 updatePosition called - isDragModeActive:', isDragModeActive);
// Eğer sürükleme modunda değilse ve aktif sürükleme yoksa, widget ayarlarından pozisyon kullan
if (!this.isDragging && !isDragModeActive) {
console.log('✅ Using widget settings position');
this.applyWidgetPosition();
} else if (isDragModeActive) {
// Sürükleme pozisyonunu kullan (localStorage'dan)
console.log('🎯 Using drag position from localStorage');
this.$el.style.top = '';
this.$el.style.left = '';
this.$el.style.right = this.currentX + 'px';
this.$el.style.bottom = this.currentY + 'px';
}
},
// Sürükleme modunu sıfırla - widget ayarlarına geri dön
resetToWidgetPosition() {
localStorage.removeItem('chatWidgetX');
localStorage.removeItem('chatWidgetY');
// currentX ve currentY değerlerini de sıfırla
this.currentX = 20;
this.currentY = 20;
this.applyWidgetPosition();
},
// Sürükleme modu durumunu kontrol et
isDragModeActive() {
return localStorage.getItem('chatWidgetX') !== null;
},
applyWidgetPosition() {
// Tüm pozisyon stillerini temizle
this.$el.style.top = '';
this.$el.style.right = '';
this.$el.style.bottom = '';
this.$el.style.left = '';
// Mobil cihaz kontrolü
const isMobile = window.innerWidth <= 768;
// Debug için console.log
console.log('Widget Settings:', widgetSettings);
console.log('Is Mobile:', isMobile);
console.log('Mobile Bottom Offset:', widgetSettings.mobile_position_bottom_offset);
console.log('Mobile Left Offset:', widgetSettings.mobile_position_left_offset);
// Widget ayarlarından pozisyon ve offset'leri uygula
const position = widgetSettings.position || 'bottom-right';
const topOffset = isMobile ? (widgetSettings.mobile_position_top_offset || 20) : (widgetSettings.position_top_offset || 20);
const rightOffset = isMobile ? (widgetSettings.mobile_position_right_offset || 20) : (widgetSettings.position_right_offset || 20);
const bottomOffset = isMobile ? (widgetSettings.mobile_position_bottom_offset || 20) : (widgetSettings.position_bottom_offset || 20);
const leftOffset = isMobile ? (widgetSettings.mobile_position_left_offset || 20) : (widgetSettings.position_left_offset || 20);
console.log('Final offsets - Top:', topOffset, 'Right:', rightOffset, 'Bottom:', bottomOffset, 'Left:', leftOffset);
switch(position) {
case 'bottom-right':
this.$el.style.bottom = bottomOffset + 'px';
this.$el.style.right = rightOffset + 'px';
break;
case 'bottom-left':
this.$el.style.bottom = bottomOffset + 'px';
this.$el.style.left = leftOffset + 'px';
break;
case 'top-right':
this.$el.style.top = topOffset + 'px';
this.$el.style.right = rightOffset + 'px';
break;
case 'top-left':
this.$el.style.top = topOffset + 'px';
this.$el.style.left = leftOffset + 'px';
break;
}
},
handleClick(e) {
if (this.dragStarted) {
e.preventDefault();
e.stopPropagation();
return false;
}
}
}"
style="z-index: 2147483647 !important; cursor: grab;"
:style="{
cursor: isDragging ? 'grabbing' : 'grab',
transform: isDragging ? 'scale(1.05)' : 'scale(1)',
opacity: isDragging ? '0.9' : '1'
}"
:class="{ 'dragging': isDragging }"
@mousedown="startDrag($event)"
@touchstart="startDrag($event)"
x-show="(widgetSettings.is_enabled === true || false) && !open"
>
AI Asistan
Enter: Kaydet, Esc: İptal
15:12
AI