Open joffreypersia opened 9 months ago
@joffreypersia hm. Does it crash, or does it just not handle the syntax highlighting properly? There's a known bug when combining Alpine and Blade that is very tricky—it's hard to inject the correct language into the file when they're mixed in certain ways.
I pasted your example into PhpStorm and didn't get any IDE errors…
Hi @inxilpro,
Try this code :
@props([
'tableOnly' => false,
])
<div
x-data="{
viewTableMosaic: {{ $tableOnly ? '\'table\'' : '(localStorage.getItem(\'table-filter\') ? localStorage.getItem(\'table-filter\') : \'table\')' }},
tableOnly: {{ $tableOnly ? 'true' : 'false'}},
allowClickingOnAllRow: false,
showFilters: false,
showDeleteModal: @entangle('showDeleteModal'),
nbOfRows: 0,
selected: @entangle('selected'),
firstItem: null,
lastItem: null,
init() {
this.nbOfRows = document.querySelectorAll('tbody tr').length;
this.checkSelectedItems();
$nextTick(() => {
// Call the shadowScrolling function
this.shadowScrolling();
let isUpdated = false;
Livewire.hook('morph.updated', ({ el, component }) => {
if (!isUpdated) {
isUpdated = true;
setTimeout(() => {
// Call checkSelectedItems
this.checkSelectedItems();
this.checkNumberOfRows();
// Reset the flag
isUpdated = false;
// Call the shadowScrolling function
this.shadowScrolling();
}, 10);
}
});
});
},
resetSelectAll() {
document.querySelector('thead tr input[type=checkbox]').checked = false;
},
checkSelectedItems() {
// timeout of 100ms to be sure that the function will run after the wire:model has been updated
setTimeout(() => {
let nbOfChecked = this.selected.length;
if (nbOfChecked === this.nbOfRows) {
document.querySelector('thead tr input[type=checkbox]').checked = true;
} else {
document.querySelector('thead tr input[type=checkbox]').checked = false;
}
}, 100);
},
toggleAllCheckboxes(el) {
document.querySelectorAll('tbody tr input[type=checkbox]').forEach((checkbox) => {
const isChecked = el.checked;
if (checkbox.checked !== isChecked) {
checkbox.checked = isChecked;
// Manually dispatch the change event
checkbox.dispatchEvent(new Event('change'));
}
});
},
checkNumberOfRows() {
this.nbOfRows = document.querySelectorAll('tbody tr').length;
},
shadowScrolling() {
const scrollBoxes = document.querySelectorAll('.scroll-shadows');
let isShadowBottomActive = false; // Flag to track the current state of the shadow
scrollBoxes.forEach(scrollBox => {
// Check if the element is currently visible (not having display: none)
if (getComputedStyle(scrollBox).display !== 'none') {
// At page load / refresh
if (scrollBox.scrollHeight > scrollBox.clientHeight) {
const el = document.querySelector('#shadowContainer');
el.classList.add('shadowBottom');
isShadowBottomActive = true;
} else {
const el = document.querySelector('#shadowContainer');
el.classList.remove('shadowBottom');
isShadowBottomActive = false;
}
scrollBox.addEventListener('scroll', function(e) {
const shouldShowShadow = e.currentTarget.scrollHeight - e.currentTarget.clientHeight - e.currentTarget.scrollTop > 30;
if (shouldShowShadow && !isShadowBottomActive) {
const el = document.querySelector('#shadowContainer');
el.classList.add('shadowBottom');
isShadowBottomActive = true;
} else if (!shouldShowShadow && isShadowBottomActive) {
const el = document.querySelector('#shadowContainer');
el.classList.remove('shadowBottom');
isShadowBottomActive = false;
}
});
}
});
}
}"
class="space-y-4 flex-grow flex flex-col"
>
@include('model-index-pages.table-filter')
<div class="relative flex flex-col flex-grow">
<!-- Shadow container -->
<div id="shadowContainer" class="absolute w-full h-full z-10 pointer-events-none rounded"></div>
<!-- Table view -->
@include('model-index-pages.table', array('tableStyle' => ' divide-y divide-shade-200 dark:divide-shade-700')) {{-- tableStyle is used here to style header / body separation --}}
@if($tableOnly === false )
<!-- Mosaic view -->
@include('model-index-pages.mosaique')
@endif
</div>
@include('model-index-pages.pagination')
<!-- Delete Modal -->
@teleport('body')
<form wire:submit="deleteSelected">
<x-modal.confirmation wire:model="showDeleteModal" maxWidth="xl">
<x-slot name="title">Delete Confirmation</x-slot>
<x-slot name="content">
<p>Are you sure you want to delete these items ? This action is irreversible.</p>
</x-slot>
<x-slot name="footer">
<button type="button" x-on:click="show = false" class="btn btn-white w-full sm:w-fit">Cancel</button>
<button type="submit" class="btn btn-danger w-full sm:w-fit">Delete</button>
</x-slot>
</x-modal.confirmation>
</form>
@endteleport
</div>
I documented this subject in the ticket https://youtrack.jetbrains.com/issue/WEB-64951
Hi,
I tried to remove the maximum of useless plugins for my projects but still Alpine makes the editor crash on complex blade files like this one :
Also, you can see this ticket : https://youtrack.jetbrains.com/issue/WEB-64951
My editor doesn't see and read the JS correctly
Thank you @inxilpro