Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: simplify onboarding modal initialization and enhance slide navigation functionality for improved user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 23:53:19 -05:00
parent a20ef6292e
commit f0cbf2ac73
1 changed files with 44 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
extensions/Others/Onboarding/resources/views/modal.blade.php
View File

@@ -10,24 +10,62 @@
@if($showModal)
<!-- Debug: PHP Data Check -->
<script>
console.log('📦 PHP Data:', {
const phpData = {
showModal: @json($showModal),
slidesCount: @json(count($slides)),
currentSlide: @json($currentSlide),
slides: @json($preparedSlides),
showBackdrop: @json($this->showBackdrop ?? false)
});
};
console.log('📦 PHP Data:', phpData);
console.log('📊 Prepared Slides:', @json($preparedSlides));
</script>
<div class="onboarding-modal"
x-data="paymenterOnboarding({
x-data="{
open: @js($showModal),
currentSlide: @js($currentSlide),
slides: @js($preparedSlides),
componentId: @js($this->getId()),
showBackdrop: @js($this->showBackdrop ?? false)
})"
x-init="init()">
showBackdrop: @js($this->showBackdrop ?? false),
init() {
console.log('🚀 Alpine Init - Direct Data');
console.log('Slides:', this.slides);
console.log('Current Slide:', this.currentSlide);
console.log('Slides Length:', this.slides?.length);
this.$watch('open', value => {
document.documentElement.style.overflow = value ? 'hidden' : '';
});
if (this.open) {
document.documentElement.style.overflow = 'hidden';
}
},
get activeSlide() {
return this.slides[this.currentSlide] ?? null;
},
primaryActionLabel(index) {
const isLast = index === this.slides.length - 1;
if (isLast) return 'Finish';
return (this.slides[index]?.is_guided ?? false) ? 'Continue' : 'Next';
},
previous() {
if (this.currentSlide <= 0) return;
this.currentSlide--;
@this.call('previousSlide');
},
next() {
if (this.currentSlide >= this.slides.length - 1) {
this.finish();
return;
}
this.currentSlide++;
@this.call('nextSlide');
},
finish() {
@this.call('finish');
}
}"
<div x-show="open"
x-transition.opacity
class="fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:py-10"
@@ -148,75 +186,4 @@
</div>
</div>
@once
<script>
function paymenterOnboarding(config) {
console.log('🎯 Onboarding Modal Initialized with config:', config);
const data = {
open: config?.open ?? true,
currentSlide: config?.currentSlide ?? 0,
slides: config?.slides ?? [],
showBackdrop: config?.showBackdrop ?? false,
componentId: config?.componentId ?? '',
init() {
console.log('🚀 Alpine.js Init Called');
console.log('📊 Data after init:', {
slides: this.slides,
currentSlide: this.currentSlide,
open: this.open,
slidesLength: this.slides?.length,
slideData: this.slides[this.currentSlide]
});
this.$watch('open', value => {
console.log('👁️ Open changed to:', value);
document.documentElement.style.overflow = value ? 'hidden' : '';
});
if (this.open) {
document.documentElement.style.overflow = 'hidden';
}
},
get activeSlide() {
return this.slides[this.currentSlide] ?? null;
},
primaryActionLabel(index) {
const isLast = index === this.slides.length - 1;
if (isLast) {
return 'Finish';
}
return (this.slides[index]?.is_guided ?? false) ? 'Continue' : 'Next';
},
previous() {
if (this.currentSlide <= 0) {
return;
}
this.currentSlide--;
this.callLivewire('previousSlide');
},
next() {
if (this.currentSlide >= this.slides.length - 1) {
this.finish();
return;
}
this.currentSlide++;
this.callLivewire('nextSlide');
},
finish() {
this.callLivewire('finish');
},
callLivewire(method) {
if (!method || !window.Livewire) {
return;
}
const component = window.Livewire.find(this.componentId);
if (component) {
component.call(method);
}
}
};
}
</script>
@endonce
@endif