Skip to content

Instantly share code, notes, and snippets.

Avatar

TinaH tanthammar

View GitHub Profile
View ItemList.php
<?php
/**
* In your Livewire model for the list of items
*/
class ItemList extends Component
{
// rest of component
@tanthammar
tanthammar / HasLinks.php
Last active Jul 6, 2020
No more controllers! Only Laravel LiveWire SPA routes and a handy Eloquent Model trait.
View HasLinks.php
@tanthammar
tanthammar / session-timeout-alert-after-livewire-scripts.blade.php
Last active Jul 16, 2020
Laravel Livewire Turbolinks Blade component to keep session alive
View session-timeout-alert-after-livewire-scripts.blade.php
{{-- You do not need to add this component if you are using the permanent option in the head component --}}
<script>
if (!window.sessionTimerPermanent && window.Livewire) {
window.livewire.hook('afterDomUpdate', startSessionTimer)
}
// if you are on livewire > 1.3.1 and want to avoid the default error alert
// https://github.com/livewire/livewire/pull/1146
/*
window.livewire.onError(statusCode => {
if (statusCode === 419) {
@tanthammar
tanthammar / keep-csrf-alive.blade.php
Last active Jun 23, 2020
Keep livewire form session alive (419)
View keep-csrf-alive.blade.php
<script data-turbolinks-eval=false>
function updateToken() {
fetch('/update-csrf')
.then(response => response.text())
.then(csrf => {
document.head.querySelector('meta[name="csrf-token"]').setAttribute('content', csrf)
})
}
setInterval(updateToken, 1000 * 60 * 5)
</script>
View filesystems.php
<?php
$spaces = [
'driver' => 's3',
'key' => env('DO_SPACES_KEY'),
'secret' => env('DO_SPACES_SECRET'),
'endpoint' => env('DO_SPACES_ENDPOINT'),
'region' => env('DO_SPACES_REGION'),
'bucket' => env('DO_SPACES_BUCKET')
];
View app#Charts#WanSpeedTestsChart.php
<?php
namespace App\Charts;
use App\Support\Livewire\ChartComponentData;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
/**
* Class WanSpeedTestsChart
*
@tanthammar
tanthammar / Media.blade.php
Last active Jun 19, 2020
LiveWire Spatie Media Image upload with VueCroppa
View Media.blade.php
<div id="media-comp" class="display-contents">
<media inline-template>
<form>
<div v-for="(image, index) in form" :key="index" @touchstart.stop @mousedown.stop class="col-span-6">
<h3 class="text-3xl font-medium">@{{ image.label }}</h3>
<p class="py-3">Allowed Width @{{image.width}}px, Height @{{image.height}}px, Max file size @{{image.maxFileSize}}</p>
<input v-model="image.value" wire:model="@{{ image.name }}" type="hidden">
<croppa v-model="image.model" :width="image.width" :height="image.height"
:placeholder="locale == 'sv' ? 'Välj en bild' : 'Choose an image'"
:accept="'image/*'" :file-size-limit="image.maxByte" :zoom-speed="3" :disable-drag-and-drop="false"
@tanthammar
tanthammar / LivewireSortable.php
Last active May 15, 2020
Livewire Sortable fix with array form
View LivewireSortable.php
<?php
namespace App\Http\Livewire\App\Organizers\Forms;
use App\Http\Livewire\Traits\Form;
use App\Models\Organizer;
use Livewire\Component;
class People extends Component
{
@tanthammar
tanthammar / trix.blade.php
Last active May 25, 2020
Livewire trix input
View trix.blade.php
@push('body-styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css">
@endpush
<form x-data="form()">
<input x-ref="description" id="description" name="description" value='{{ $description }}' type="hidden" />
<div wire:ignore>
<trix-editor input="description"></trix-editor>
</div>
@tanthammar
tanthammar / capturePlainTextOnPaste.js
Created May 2, 2020
Capture plain-text on paste JS
View capturePlainTextOnPaste.js
/**
* Capture the <CTL-V> paste event, only allow plain-text, no images.
*
* see: https://stackoverflow.com/a/28213320
*
* @param {object} evt - array of files
* @author Daniel Thompson-Yvetot
* @license MIT
*/
pasteCapture(evt, ref) {
You can’t perform that action at this time.